<script lang="ts" setup>
  import { ref, onMounted } from 'vue';
  import {
    platformProBatchGetListApi,
    platformProBatchGetDetailApi,
  } from '/@/api/regionalSpotManage';
  import { message } from 'ant-design-vue';
  onMounted(async () => {
    getList();
  });
  let list = ref<any[]>([]);
  let listLoading = ref(false);
  const pagination = ref({
    pageSize: 10,
    current: 1,
    total: 0,
    showTotal: (total) => `共 ${total} 条`,
    hideOnSinglePage: false,
    showQuickJumper: true,
    showSizeChanger: true,
    pageSizeOptions: ['10', '20', '30', '50', '100'],
    onChange: (current, size) => {
      pagination.value.current = current;
      pagination.value.pageSize = size;
      getList();
    },
  });
  const search = () => {
    pagination.value.current = 1;
    getList();
  };
  const getList = async () => {
    const param = ref<{ [key: string]: any }>({
      currentPage: pagination.value.current,
      pageSize: pagination.value.pageSize,
    });
    listLoading.value = true;
    const res = await platformProBatchGetListApi(param.value);
    if (res.success) {
      list.value = res.data;
      pagination.value.total = res.data[0].total;
    } else {
      list.value = [];
      pagination.value.total = 0;
    }
    listLoading.value = false;
  };
  let curItem = ref<{ [key: string]: any }>({});
  let visible = ref(false);
  let operationList = ref<any[]>([]);
  let detailLoading = ref(false);
  const viewRecord = (item) => {
    curItem.value = item;
    visible.value = true;
    getDetails(item);
  };
  const getDetails = async (item) => {
    const param = ref<{ [key: string]: any }>({
      currentPage: 1,
      pageSize: 10,
      sysid: item.sysid,
      type: '',
    });
    detailLoading.value = true;
    const res = await platformProBatchGetDetailApi(param.value);
    if (res.success) {
      operationList.value = res.data;
    } else {
      operationList.value = [];
    }
    detailLoading.value = false;
  };

  // =================导出========================
  let exportLoading = ref(false);
  const exportExcel = async () => {
    const param = ref<{ [key: string]: any }>({
      sysid: curItem.value.sysid,
      type: '',
    });
    exportLoading.value = true;
    const res = await platformProBatchGetDetailApi(param.value);
    if (res.success) {
      handleDownload(res.data);
    } else {
      message.error('暂无数据');
    }
    exportLoading.value = false;
  };
  const handleDownload = (list) => {
    import('/@/vendor/Export2Excel').then((excel) => {
      let tHeader = [
        '商品名称',
        '品牌',
        '货号',
        '包装规格',
        '平台',
        '状态',
        '失败原因',
        '执行时间',
      ];
      let filterVal = [
        'productName',
        'brand',
        'itemNo',
        'spec',
        'platforms',
        'status',
        'failReason',
        'createTime',
      ];
      list.forEach((item) => {
        if (item.status) {
          item.status = '成功';
        } else {
          item.status = '失败';
        }
        if (item.platforms) {
          item.platforms = item.platforms.join(',');
        } else {
          item.platforms = '';
        }
      });
      const data = formatJson(filterVal, list);
      excel.export_json_to_excel({
        header: tHeader,
        data: data,
        filename: '操作记录详情',
        autoWidth: false,
        bookType: 'xlsx',
        XlsWidth: [],
        searchList: null,
      });
    });
  };
  const formatJson = (filterVal, jsonData) => {
    return jsonData.map((v) =>
      filterVal.map((j) => {
        return v[j];
      }),
    );
  };
</script>

<template>
  <div>
    <a-button @click="search" type="primary">刷新数据</a-button>
  </div>
  <a-table
    :data-source="list"
    :loading="listLoading"
    :pagination="pagination"
    bordered
    :rowKey="(record) => record.sysid"
    style="margin-top: 15px"
  >
    <a-table-column title="操作时间" align="center" :width="100">
      <template #default="{ record }">
        {{ record.createTime }}
      </template>
    </a-table-column>
    <a-table-column title="功能模块" align="center" :width="100">
      <template #default="{ record }">
        {{ record.operateModule }}
      </template>
    </a-table-column>
    <a-table-column title="类型" align="center" :width="100">
      <template #default="{ record }">
        {{ record.type }}
      </template>
    </a-table-column>
    <a-table-column title="操作数量" align="center" :width="100">
      <template #default="{ record }">
        <a-button v-if="record.operateNum" type="link" @click="viewRecord(record)">{{
          record.operateNum
        }}</a-button>
        <span v-else>/</span>
      </template>
    </a-table-column>
    <a-table-column title="解析成功数量" align="center" :width="100">
      <template #default="{ record }">
        <span v-if="record.successNum">{{ record.successNum }}</span>
        <span v-else>/</span>
      </template>
    </a-table-column>
    <a-table-column title="解析失败数量" align="center" :width="100">
      <template #default="{ record }">
        <span v-if="record.failNum">{{ record.failNum }}</span>
        <span v-else>/</span>
      </template>
    </a-table-column>
    <a-table-column title="操作人" align="center" :width="100">
      <template #default="{ record }">
        {{ record.operateName }}
      </template>
    </a-table-column>
  </a-table>
  <a-modal
    v-model:visible="visible"
    title="操作记录详情"
    :width="1200"
    :maskClosable="false"
    :keyboard="false"
  >
    <template #footer>
      <a-button type="primary" :loading="exportLoading" @click="exportExcel">导出数据</a-button>
    </template>
    <a-table
      :data-source="operationList"
      :loading="detailLoading"
      bordered
      :rowKey="(record) => record.sysid"
    >
      <a-table-column title="商品名称" align="center" :width="100">
        <template #default="{ record }">
          {{ record.productName }}
        </template>
      </a-table-column>
      <a-table-column title="品牌" align="center" :width="100">
        <template #default="{ record }">
          {{ record.brand }}
        </template>
      </a-table-column>
      <a-table-column title="货号" align="center" :width="100">
        <template #default="{ record }">
          {{ record.itemNo }}
        </template>
      </a-table-column>
      <a-table-column title="包装规格" align="center" :width="100">
        <template #default="{ record }">
          {{ record.spec }}
        </template>
      </a-table-column>
      <a-table-column title="平台" align="center" :width="150">
        <template #default="{ record }">
          <span
            v-if="record.platforms && record.platforms.length > 1"
            :title="record.platforms.join(',')"
            >{{ record.platforms[0] + '...' }}</span
          >
          <span v-else>{{ record.platforms ? record.platforms[0] : '' }}</span>
        </template>
      </a-table-column>
      <a-table-column title="状态" align="center" :width="100">
        <template #default="{ record }">
          {{ record.status ? '成功' : '失败' }}
        </template>
      </a-table-column>
      <a-table-column title="失败原因" :width="150">
        <template #default="{ record }">
          <span class="opinionClass" :title="record.failReason">{{ record.failReason }}</span>
        </template>
      </a-table-column>
      <a-table-column title="执行时间" align="center" :width="100">
        <template #default="{ record }">
          {{ record.createTime }}
        </template>
      </a-table-column>
    </a-table>
  </a-modal>
</template>

<style lang="less" scoped>
  .opinionClass {
    word-break: break-all;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
  }
</style>
