<template>
  <Card :bordered="false" :loading="isLoading">
    <Descriptions bordered :column="3">
      <Descriptions.Item
        v-for="p in displayProps"
        :key="p.title"
        :label="p.title"
        :span="['avatar'].includes(p.name) ? 3 : 1"
      >
        <span v-if="p.key === 'avatar'">
          <ImagePreview :imageList="[p.value]" style="width: 120px" />
        </span>
        <template v-else>
          {{ p.value }}
        </template>
      </Descriptions.Item>
    </Descriptions>
    <a-table
      :dataSource="productList"
      :columns="detailColumns"
      :pagination="false"
      childrenColumnName="batchOrderDetailProductDetailList"
      rowKey="uuid"
      :scroll="{ y: 450 }"
    >
    </a-table>
    <div class="btnWrap">
      <a-button
        type="primary"
        danger
        v-if="isRetain && hasPermission('AUTH_BATCH_ORDER:CANCEL')"
        @click="handleChangeStatus('REJECT')"
        >驳回</a-button
      >
      <a-button
        type="primary"
        danger
        v-if="isPadding && hasPermission('AUTH_BATCH_ORDER:CHECK') && isDistributor"
        @click="handleVerify('REJECT')"
        >拒绝</a-button
      >
      <a-button type="primary" @click="handleGoBack">返回</a-button>
      <a-button
        type="primary"
        v-if="isRetain && hasPermission('AUTH_BATCH_ORDER:SUBMIT')"
        @click="handleChangeStatus('PENDING_REVIEW')"
        >提交</a-button
      >
      <a-button
        type="primary"
        v-if="isPadding && hasPermission('AUTH_BATCH_ORDER:CHECK') && isDistributor"
        @click="handleVerify('PASSED')"
        >通过</a-button
      >
    </div>
  </Card>
</template>
<script lang="ts" setup name="DeviceDetail">
  import { onMounted, computed, ref } from 'vue';
  import { useRoute, useRouter } from 'vue-router';
  import { useAsyncState } from '@vueuse/core';
  import { ImagePreview } from '/@/components/Preview/index';
  import { ComputedRef } from '@vue/reactivity';
  import { Descriptions, Card } from 'ant-design-vue';
  import { descriptionColumns, detailColumns } from './schema';
  import * as BatchOrderApi from '/@/api/order/batchOrderApi';
  import { BatchOrder } from '/@/api/model/batchOrder';
  import { toNumber } from 'lodash';
  import { usePermission } from '/@/hooks/web/usePermission';
  import { useUserStore } from '/@/store/modules/user';

  const route = useRoute();
  const router = useRouter();
  const userStore = useUserStore();
  const id = ref(route.params?.id);
  const { hasPermission } = usePermission();

  const productList = ref<any>([]);

  const isDistributor = userStore.getIsDistributor;

  // id 查询
  const {
    state: detail,
    isReady: isDetailReady,
    isLoading,
    execute,
  } = useAsyncState(
    () => {
      return BatchOrderApi.getById(id.value).then((res: BatchOrder) => {
        res.batchOrderDetailList?.forEach((item) => {
          item.uuid = item.goodsId + '';
          item.batchOrderDetailProductDetailList.forEach((el) => {
            el.uuid = item.goodsId + '-' + el.id;
          });
        });
        productList.value = res.batchOrderDetailList;

        return res;
      });
    },
    null,
    {
      immediate: false,
    },
  );

  onMounted(() => {
    execute();
  });

  const displayProps: ComputedRef<Array<any>> = computed(() => {
    if (!isDetailReady.value) return {};
    const display: any = descriptionColumns.map(({ title, dataIndex = '', customRender }) => ({
      key: dataIndex,
      title,
      value: customRender
        ? customRender({ text: detail.value[dataIndex], record: detail.value })
        : detail.value[dataIndex],
    }));
    return display;
  });

  const isRetain = computed(() => detail.value?.status === 'TO_BE_USE');
  const isPadding = computed(() => detail.value?.status === 'PENDING_REVIEW');

  const handleGoBack = () => {
    router.back();
  };

  const handleChangeStatus = (status) => {
    if (id) {
      const api = status === 'REJECT' ? BatchOrderApi.cancel : BatchOrderApi.submit;
      api({
        id: toNumber(id.value),
      }).then(() => {
        execute();
      });
    }
  };

  const handleVerify = (status) => {
    BatchOrderApi.check({ id: detail.value?.id, status }).then(() => {
      execute();
    });
  };
</script>

<style lang="less" scoped>
  .ant-table-wrapper {
    margin-top: 20px;
  }

  .btnWrap {
    margin-top: 20px;
    text-align: center;
    button {
      margin: 0 5px;
    }
  }
</style>
