<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="创建时间">
          <a-range-picker
            @change="onChangeTime"
            :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" v-if="hasPermission('AUTH_ORDER_BATCH_WORK_ORDER:ADD')" @click="handleAdd"
          >新增</a-button
        >
      </div>
      <a-table
        :dataSource="dataSource"
        :columns="columns"
        :pagination="pagination"
        :loading="tableLoading"
        :row-class-name="(_record, index) => (index % 2 === 1 ? 'table-striped' : null)"
        bordered
      >
        <template #bodyCell="{ column, record }">
          <template v-if="column.key === 'status'">
            {{ StatusEnum[record.status] }}
          </template>
          <template v-if="column.key === 'distributor'">
            {{ record.batchOrder.distributorName }}
          </template>
          <template v-if="column.key === 'saleUserName'">
            {{ record.batchOrder.saleUserName }}
          </template>
          <template v-if="column.dataIndex === 'logisticsMode'">
            {{ logisticsLabelEnum[record.logisticsMode] }}
          </template>
          <template v-if="column.key === 'action'">
            <a-button type="link" @click="handleView(record)">查看</a-button>
            <!-- <a-button type="link" @click="handleEdit(record.id)">编辑</a-button> -->
            <a-popconfirm
              title="是否确认收货?"
              ok-text="是"
              cancel-text="否"
              @confirm="handleReceipt(record.id)"
              v-if="hasPermission('AUTH_ORDER_BATCH_WORK_ORDER:RECEIPT') && record.status == 'DELIVERED'"
            >
              <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 BatchWorkOrderApi from '/@/api/order/batchWorkOrderApi';
  import { columns } from './schema';
  import Modal from './modal.vue';
  import { message } from 'ant-design-vue';
  import { StatusEnum } from '/@/views/order/batch-order/schema';
  import { usePermission } from '/@/hooks/web/usePermission';
  import { useGo } from '/@/hooks/web/usePage';
  import { logisticsLabelEnum } from '/@/views/order/enum';

  interface FormStateType {
    createTimeFrom: undefined | Date;
    createTimeTo: undefined | Date;
  }

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

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

  const formState = reactive<FormStateType>({
    createTimeFrom: undefined,
    createTimeTo: undefined,
  });

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

  const getData = () => {
    tableLoading.value = true;
    BatchWorkOrderApi.search(
      Object.assign({ pageSize: pagination.pageSize, pageNum: pagination.current, orderMode: 'SEND_ORDER' }, 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.open();
  };

  const handleView = (record) => {
    go('/main/batch-work-order/detail/' + record.id + `?order=${record.batchOrderId}`);
  };

  const onChangeTime = (data: Date[] | undefined) => {
    formState.createTimeFrom = data && data[0];
    formState.createTimeTo = data && data[1];
  };

  const handleReceipt = (id: number) => {
    BatchWorkOrderApi.update({ id, status: 'CONFIRM' }).then((res) => {
      message.success('确认成功');
      getData();
    });
  };

  // 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');

  .ant-table-striped :deep(.table-striped) td {
    background-color: #fafafa;
  }
</style>
