<template>
  <div class="containe">
    <div class="queryWrap">
      <a-form
        :model="formState"
        name="basic"
        ref="formRef"
        layout="inline"
        :label-col="{ span: 8 }"
        :wrapper-col="{ span: 16 }"
        autocomplete="off"
        class="ant-row"
      >
        <a-form-item label="商品名称" name="goodsName">
          <a-input v-model:value="formState.goodsName" />
        </a-form-item>
        <a-form-item label="分类" name="classify">
          <a-input v-model:value="formState.classify" />
        </a-form-item>
        <a-form-item label="产品线" name="productLine">
          <a-input v-model:value="formState.productLine" />
        </a-form-item>
        <a-form-item label="产品编码" name="productCode">
          <a-input v-model:value="formState.productCode" />
        </a-form-item>
        <a-form-item :wrapper-col="{ offset: 8, span: 16 }">
          <a-button @click="handleReset">重置</a-button>
          <a-button type="primary" @click="getData">查询</a-button>
        </a-form-item>
        <a-form-item class="checkBoxWrap">
          <a-checkbox-group v-model:value="stateChange" :options="stateOption" />
        </a-form-item>
      </a-form>
    </div>
    <div class="tableWrap">
      <div class="titleWrap">
        <span class="title">商品列表</span>
        <a-button type="primary" @click="handleAdd(false)" v-if="hasPermission('AUTH_PRODUCT_GOODS:ADD')"
          >新增</a-button
        >
      </div>
      <a-table :dataSource="dataSource" :columns="columns" :pagination="pagination" :loading="tableLoading">
        <template #bodyCell="{ column, record }">
          <template v-if="column.key === 'status'">
            <span v-if="record.status === 'YES'"><a-tag color="green">是</a-tag></span>
            <span v-else><a-tag color="red">否</a-tag></span>
          </template>
          <template v-if="column.key === 'isImport'">
            <span v-if="record.isImport === 'YES'"><a-tag color="green">是</a-tag></span>
            <span v-else><a-tag color="red">否</a-tag></span>
          </template>
          <template v-if="column.key === 'isNews'">
            <span v-if="record.isNews === 'YES'"><a-tag color="green">是</a-tag></span>
            <span v-else><a-tag color="red">否</a-tag></span>
          </template>
          <template v-if="column.key === 'isUnconventional'">
            <span v-if="record.isUnconventional === 'YES'"><a-tag color="green">是</a-tag></span>
            <span v-else><a-tag color="red">否</a-tag></span>
          </template>
          <template v-if="column.key === 'isPromotion'">
            <span v-if="record.isPromotion === 'YES'"><a-tag color="green">是</a-tag></span>
            <span v-else><a-tag color="red">否</a-tag></span>
          </template>
          <template v-if="column.key === 'action'">
            <a-button type="link" @click="handleAdd(record.id)" v-if="hasPermission('AUTH_PRODUCT_GOODS:EDIT')"
              >编辑</a-button
            >
            <a-popconfirm
              title="是否确认删除?"
              ok-text="是"
              cancel-text="否"
              @confirm="handleDelete(record.id)"
              v-if="hasPermission('AUTH_PRODUCT_GOODS:DELETE')"
            >
              <a-button type="link">删除</a-button>
            </a-popconfirm>
          </template>
        </template>
      </a-table>
    </div>
  </div>
</template>
<script lang="ts" setup name="DeviceIndex">
  import { ref, reactive, onMounted } from 'vue';
  import { useGo } from '/@/hooks/web/usePage';
  import { usePermission } from '/@/hooks/web/usePermission';
  import { FormState } from './type';
  import { columns, stateOption } from './schema';
  import * as GoodsApi from '/@/api/product/goodsApi';
  import { Goods } from '/@/api/model/goods';
  import { usePagination } from '/@/hooks/myhooks/index';
  import { message } from 'ant-design-vue';

  const { hasPermission } = usePermission();
  const go = useGo();

  const formRef = ref();
  const tableLoading = ref(false);

  const formState = reactive<FormState>({
    goodsName: undefined,
    classify: undefined,
    productLine: undefined,
    productCode: undefined,
    promotion: undefined,
  });

  const stateChange = ref([]);

  const dataSource = ref<Goods[]>();

  const getData = () => {
    tableLoading.value = true;
    const data: any = {};
    stateChange.value.forEach((item) => {
      data[item] = 'YES';
    });
    GoodsApi.search(Object.assign({ pageSize: pagination.pageSize, pageNum: pagination.current }, formState, data))
      .then((res) => {
        pagination.total = res.total;
        dataSource.value = res.records;
      })
      .finally(() => {
        tableLoading.value = false;
      });
  };

  const pagination = usePagination(getData);

  const handleReset = () => {
    stateChange.value = [];
    formRef.value.resetFields();
  };

  const handleAdd = (id: number | boolean) => {
    if (id) {
      go('/main/goods-add' + `?id=${id}`);
    } else {
      go('/main/goods-add');
    }
  };

  const handleDelete = (id) => {
    GoodsApi.remove(id).then((res) => {
      message.success('删除成功');
      getData();
    });
  };

  onMounted(() => {
    getData();
  });
</script>

<style lang="less" scoped>
  @import url('/@/style/index.less');
</style>
