<template>
  <el-card class="box-card">
    <byTable
      :source="sourceList.data"
      :pagination="sourceList.pagination"
      :config="config"
      :loading="loading"
      :searchConfig="searchConfig"
      highlight-current-row
      :action-list="[
        {
          text: '导出Excel',
          action: () => clickExcel(),
        },
        {
          text: 'Excel文件',
          action: () => clickExcelFile(),
        },
      ]"
      @get-list="getList"
      @clickReset="clickReset"
      @changeRadioGroup="changeRadioGroup">
    </byTable>

    <el-dialog title="Excel文件" v-if="openFileList" v-model="openFileList" width="60%">
      <ExcelFile></ExcelFile>
      <template #footer>
        <el-button @click="openFileList = false" size="large">关 闭</el-button>
      </template>
    </el-dialog>
  </el-card>
</template>

<script setup>
import byTable from "/src/components/byTable/index";
import * as date from "/src/utils/date";
import { ElMessage, ElMessageBox } from "element-plus";
import ExcelFile from "/src/views/group/finance/check-bill/ExcelFile.vue";

const { proxy } = getCurrentInstance();
const departmentList = ref([{ dictKey: "0", dictValue: "胜德体育" }]);
const sourceList = ref({
  data: [],
  pagination: {
    total: 0,
    pageNum: 1,
    pageSize: 10,
    code: "",
    departmentId: "",
    skuSpecCode: "",
    skuSpecName: "",
    beginTime: "",
    endTime: "",
    type: 1,
  },
});
const loading = ref(false);
const searchConfig = computed(() => {
  return [
    {
      type: "input",
      prop: "code",
      label: "订单号",
    },
    {
      type: "select",
      prop: "departmentId",
      data: departmentList.value,
      label: "事业部",
    },
    {
      type: "input",
      prop: "skuSpecCode",
      label: "SKU品号",
    },
    {
      type: "input",
      prop: "skuSpecName",
      label: "SKU品名",
    },
    {
      type: "radio-group",
      prop: "type",
      label: "维度",
      data: [
        {
          dictKey: 1,
          dictValue: "本年度",
        },
        {
          dictKey: 2,
          dictValue: "近365天",
        },
        {
          dictKey: 3,
          dictValue: "近180天",
        },
        {
          dictKey: 4,
          dictValue: "近90天",
        },
      ],
    },
    {
      type: "date",
      propList: ["beginTime", "endTime"],
      label: "日期",
    },
  ];
});
const config = computed(() => {
  return [
    {
      attrs: {
        label: "销售日期",
        prop: "salesDate",
        width: 160,
      },
    },
    {
      attrs: {
        label: "客户编号",
        prop: "customerCode",
        width: 140,
      },
    },
    {
      attrs: {
        label: "客户名称",
        prop: "customerName",
        width: 160,
      },
    },
    {
      attrs: {
        label: "事业部",
        prop: "departmentName",
        width: 140,
      },
    },
    {
      attrs: {
        label: "订单号",
        prop: "code",
        width: 160,
      },
    },
    {
      attrs: {
        label: "E10单号",
        prop: "wlnCode",
        width: 140,
      },
    },
    {
      attrs: {
        label: "出库单号",
        prop: "outStorageCode",
        width: 140,
      },
    },
    {
      attrs: {
        label: "SKU品号",
        prop: "skuSpecCode",
        width: 140,
      },
    },
    {
      attrs: {
        label: "SKU品名",
        prop: "skuSpecName",
        "min-width": 240,
      },
    },
    {
      attrs: {
        label: "销售数量",
        prop: "quantity",
        width: 100,
      },
    },
    {
      attrs: {
        label: "销售单价",
        prop: "salesUnitPrice",
        width: 100,
      },
    },
    {
      attrs: {
        label: "销售金额",
        prop: "salesAmount",
        width: 100,
      },
    },
    {
      attrs: {
        label: "产品金额",
        prop: "productAmount",
        width: 100,
      },
    },
    {
      attrs: {
        label: "代发金额",
        prop: "issuingAmount",
        width: 100,
      },
    },
    {
      attrs: {
        label: "其他金额",
        prop: "otherAmount",
        width: 100,
      },
    },
    {
      attrs: {
        label: "材料成本",
        prop: "materialCost",
        width: 100,
      },
    },
    {
      attrs: {
        label: "辅料成本",
        prop: "auxiliaryMaterialCost",
        width: 100,
      },
    },
    {
      attrs: {
        label: "产品包材成本",
        prop: "productPackagingMaterialCost",
        width: 120,
      },
    },
    {
      attrs: {
        label: "物流包材成本",
        prop: "logisticsPackagingMaterialCost",
        width: 120,
      },
    },
    {
      attrs: {
        label: "成本小计",
        prop: "costSubtotal",
        width: 100,
      },
    },
    {
      attrs: {
        label: "毛利",
        prop: "grossProfit",
        width: 120,
      },
    },
    {
      attrs: {
        label: "毛利率",
        prop: "grossProfitRate",
        width: 120,
      },
    },
  ];
});
const getDemandData = () => {
  proxy.post("/department/page", { pageNum: 1, pageSize: 999 }).then((res) => {
    if (res.rows && res.rows.length > 0) {
      departmentList.value = departmentList.value.concat(
        res.rows.map((item) => {
          return {
            dictKey: item.id,
            dictValue: item.name,
          };
        })
      );
    }
  });
};
getDemandData();
const getList = async (req, status) => {
  if (status) {
    sourceList.value.pagination = {
      pageNum: sourceList.value.pagination.pageNum,
      pageSize: sourceList.value.pagination.pageSize,
    };
  } else {
    sourceList.value.pagination = { ...sourceList.value.pagination, ...req };
  }
  loading.value = true;
  proxy.post("/statementOfAccountMerge/salesRevenueCostPage", sourceList.value.pagination).then((res) => {
    if (res.rows && res.rows.length > 0) {
      sourceList.value.data = res.rows.map((item) => {
        return {
          ...item,
          isCheck: true,
        };
      });
    } else {
      sourceList.value.data = [];
    }
    sourceList.value.pagination.total = res.total;
    setTimeout(() => {
      loading.value = false;
    }, 200);
  });
};
const clickReset = () => {
  sourceList.value.pagination.type = 1;
  changeRadioGroup();
};
const changeRadioGroup = () => {
  let beginTime = "";
  let endTime = "";
  if (sourceList.value.pagination.type == 1) {
    beginTime = date.getYearFirstDay();
    endTime = date.getYearLastDay();
  } else if (sourceList.value.pagination.type == 2) {
    let days = date.getDaysNoTime(365);
    beginTime = days.startTime;
    endTime = days.endTime;
  } else if (sourceList.value.pagination.type == 3) {
    let days = date.getDaysNoTime(180);
    beginTime = days.startTime;
    endTime = days.endTime;
  } else if (sourceList.value.pagination.type == 4) {
    let days = date.getDaysNoTime(90);
    beginTime = days.startTime;
    endTime = days.endTime;
  }
  getList({ beginTime: beginTime, endTime: endTime });
};
changeRadioGroup();
const openFileList = ref(false);
const clickExcel = () => {
  ElMessageBox.confirm("你是否确认此操作", "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then(() => {
      proxy.postFile("/statementOfAccountMerge/exportSalesRevenueCostData", sourceList.value.pagination).then(() => {
        ElMessage({ message: "导出成功", type: "success" });
        openFileList.value = true;
      });
    })
    .catch(() => {});
};
const clickExcelFile = () => {
  openFileList.value = true;
};
</script>

<style lang="scss" scoped></style>
