<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="distributorName">
          <a-input v-model:value="formState.distributorName" />
        </a-form-item>
        <a-form-item label="结束时间" name="discountEndTime">
          <a-date-picker
            v-model:value="formState.discountEndTimeTo"
            :show-time="{ format: 'HH:mm:ss' }"
            valueFormat="YYYY-MM-DD HH:mm:ss"
          />
        </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>
    </div>
    <div class="tableWrap">
      <div class="titleWrap">
        <span class="title">商品分类</span>
        <a-button type="primary" @click="handleAdd">新增</a-button>
      </div>
      <a-table :dataSource="dataSource" :columns="columns" :pagination="pagination" :loading="tableLoading">
        <template #bodyCell="{ column, record }">
          <template v-if="column.key === 'name'">
            <span>{{ record.goodsDto.name }}</span>
          </template>
          <template v-if="column.key === 'lineName'">
            <span>{{ record.goodsDto.lineName }}</span>
          </template>
          <template v-if="column.key === 'distributor'">
            <span>{{ record.distributor.name }}</span>
          </template>
          <template v-if="column.key === 'time'">
            <span>{{ record.discountStartTime + ' - ' + record.discountEndTime }} </span>
          </template>
          <template v-if="column.key === 'status'">
            <span v-if="record.status === 'YES'">启用</span>
            <span v-else>禁用</span>
          </template>
          <template v-if="column.key === 'action'">
            <a-button type="link" @click="handleEdit(record.id)">编辑</a-button>
            <a-popconfirm
              title="是否确认删除?"
              ok-text="是"
              cancel-text="否"
              @confirm="handleDelete(record.id)"
              v-if="hasPermission('AUTH_PRODUCT_GOODS_CATEGORY:DELETE')"
            >
              <a-button type="link">删除</a-button>
            </a-popconfirm>
          </template>
        </template>
      </a-table>
    </div>
    <Modal ref="modalRef" v-model:editId="editId" @handleSuccess="getData"></Modal>
  </div>
</template>

<script lang="ts" setup>
  import { reactive, ref, onMounted } from 'vue';
  import { usePagination } from '/@/hooks/myhooks/index';
  import * as GoodsPriceApi from '/@/api/product/goodsPriceApi';
  import { columns } from './schema';
  import Modal from './modal.vue';
  import { message } from 'ant-design-vue';
  import { usePermission } from '/@/hooks/web/usePermission';

  const { hasPermission } = usePermission();
  const formRef = ref();
  const modalRef = ref();
  const tableLoading = ref(false);

  const formState = reactive({
    goodsName: undefined,
    distributorName: undefined,
    discountEndTimeTo: undefined,
  });

  const dataSource = ref();
  const editId = ref();

  const getData = () => {
    tableLoading.value = true;
    GoodsPriceApi.search(Object.assign({ pageSize: pagination.pageSize, pageNum: pagination.current }, formState))
      .then((res) => {
        pagination.total = res.total;
        dataSource.value = res.records;
      })
      .finally(() => {
        tableLoading.value = false;
      });
  };

  const pagination = usePagination(getData);

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

  const handleAdd = () => {
    modalRef.value.visible = true;
  };
  const handleEdit = (id) => {
    editId.value = id;
    handleAdd();
  };

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

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

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