<template>
  <el-card class="box-card">
    <el-tabs v-model="activeName" type="card" @tab-change="getList">
      <el-tab-pane label="瑜伽垫" :name="'1'"> </el-tab-pane>
      <el-tab-pane label="瑜伽砖" :name="'2'"> </el-tab-pane>
    </el-tabs>
    <byTable
      ref="data"
      :hidePagination="true"
      :borderStatus="true"
      :source="sourceList.data"
      :config="config"
      :loading="sourceList.loading"
      :defaultSort="{ prop: 'turnoverRate', order: 'turnoverRateNinetyDays' }"
      highlight-current-row
      :action-list="[
        {
          text: '刷新',
          action: () => getList(),
        },
        {
          text: '导出Excel',
          action: () => deriveExcel(),
        },
      ]"
      @get-list="getList">
      <template #bomSpecName="{ item }">
        <div>
          <el-tooltip class="box-item" effect="dark" placement="bottom">
            <template #content>
              <div style="max-width: 600px; word-break: break-all">{{ item.bomSpecName }}</div>
            </template>
            <div style="cursor: pointer; overflow: hidden; white-space: nowrap; text-overflow: ellipsis">
              {{ item.bomSpecName }}
            </div>
          </el-tooltip>
        </div>
      </template>
    </byTable>
  </el-card>
</template>

<script setup>
import byTable from "/src/components/byTable/index";
import { nextTick } from "vue";
import { ElMessageBox } from "element-plus";

const { proxy } = getCurrentInstance();
const activeName = ref("1");
const sourceList = ref({
  loading: false,
  data: [],
});
const config = computed(() => {
  return [
    {
      attrs: {
        label: "品号",
        prop: "bomSpecCode",
        width: 120,
      },
    },
    {
      attrs: {
        label: "品名",
        slot: "bomSpecName",
      },
    },
    {
      attrs: {
        label: "30天周转率",
        prop: "turnoverRateThirtyDays",
        width: 130,
      },
      sortable: true,
    },
    {
      attrs: {
        label: "30天销售量",
        prop: "salesQuantityThirtyDays",
        width: 120,
      },
    },
    {
      attrs: {
        label: "60天周转率",
        prop: "turnoverRateSixtyDays",
        width: 130,
      },
      sortable: true,
    },
    {
      attrs: {
        label: "60天销售量",
        prop: "salesQuantitySixtyDays",
        width: 120,
      },
    },
    {
      attrs: {
        label: "90天周转率",
        prop: "turnoverRateNinetyDays",
        width: 130,
      },
      sortable: true,
    },
    {
      attrs: {
        label: "90天销售量",
        prop: "salesQuantityNinetyDays",
        width: 120,
      },
    },
    {
      attrs: {
        label: "库存数量",
        prop: "quantity",
        width: 90,
      },
    },
  ];
});
const getList = () => {
  sourceList.value.loading = true;
  proxy.post("/turnoverRateBoard/getTurnoverRateStatisticsList", { bomClassify: activeName.value }).then(async (res) => {
    sourceList.value.data = res;
    setTimeout(() => {
      sourceList.value.loading = false;
    }, 200);
    await nextTick();
    proxy.$refs.data.hocElTable.sort("turnoverRate", "turnoverRateNinetyDays");
  });
};
getList();
const deriveExcel = () => {
  ElMessageBox.confirm("你是否确认此操作", "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then(() => {
      proxy.postFile("/turnoverRateBoard/exportExcel", { bomClassify: activeName.value }).then((res) => {
        if (activeName.value == "1") {
          proxy.downloadFile(res, "周转率-裸垫.xlsx");
        } else {
          proxy.downloadFile(res, "周转率-裸砖.xlsx");
        }
      });
    })
    .catch(() => {});
};
</script>

<style lang="scss" scoped>
::v-deep(.colorDim) {
  color: red;
}
</style>
