<template>
  <div>
    <div class="containerTop">
      <bmSearchBar @getSearch="getSearch" @handleExport="handleExport" />
    </div>
    <div class="containerBottom">
      <div class="smallTitle">标准组件转化效率</div>
      <bm-line-bar
        :chartHeight="chartHeight"
        :legendList="legendList"
        :chartMsg="chartMsg"
        :chartId="chartId"
        :chartNum="chartNum"
      />
      <base-table
        :table-props="tableProps"
        :page="listQuery.current"
        :limit="listQuery.size"
        :table-data="tableData"
        :max-height="tableH"
      />
    </div>
  </div>
</template>

<script>
import bmSearchBar from "../components/bmSearchBar.vue";
import BmLineBar from "../components/bmLineBar.vue";
import {
  componentconvertrateCPage,
  componentconvertrateCExport,
} from "@/api/report/benchmarking.js";
import moment from "moment";
export default {
  name: "TurnoverRateBM",
  data() {
    return {
      factoryList: [
        { id: 0, name: "瑞昌" },
        { id: 1, name: "邯郸" },
      ],
      tableProps: [],
      tableProps1: [
        {
          prop: "factory",
          label: "工厂名称",
          filter: (val) => this.factoryList[val].name,
          minWidth: 150,
          showOverflowtooltip: true,
        },
        {
          prop: "item",
          label: "科目",
          minWidth: 120,
          showOverflowtooltip: true,
        },
        {
          prop: "unit",
          label: "单位",
          minWidth: 80,
          showOverflowtooltip: true,
        },
      ],
      listQuery: {
        current: 1,
        size: 100,
      },
      tableData: [],
      chartHeight: this.tableHeight(269) / 2,
      tableH: this.tableHeight(269) / 2,
      legendList: [
        { id: 1, name: "", type: 1, color: "#8EF0AB" },
        { id: 2, name: "", type: 1, color: "#63BDFF" },
        { id: 3, name: "", type: 1, color: "#288AFF" },
        { id: 4, name: "", type: 1, color: "#7164FF" },
      ],
      chartMsg: {
        color: ["#8EF0AB", "#63BDFF", "#288AFF", "#7164FF"],
        xData: [],
        yName: "单位/%",
        series: [
          {
            name: "1",
            data: [],
            type: "bar",
            barWidth: 20,
            barGap: 0.5,
            label: {
              show: true,
              position: "top",
              color: "#68C483",
              fontSize: 9,
              formatter: function (params) {
                return params.value.toFixed(2) + "%";
              },
            },
          },
          {
            name: "2",
            data: [],
            type: "bar",
            barWidth: 20,
            label: {
              show: true,
              position: "top",
              color: "#63BDFF",
              fontSize: 9,
              formatter: function (params) {
                return params.value.toFixed(2) + "%";
              },
            },
          },
          {
            name: "3",
            data: [],
            type: "bar",
            barWidth: 20,
            label: {
              show: true,
              position: "top",
              color: "#288AFF",
              fontSize: 9,
              formatter: function (params) {
                return params.value.toFixed(2) + "%";
              },
            },
          },
          {
            name: "4",
            data: [],
            type: "bar",
            barWidth: 20,
            label: {
              show: true,
              position: "top",
              color: "#7164FF",
              fontSize: 9,
              formatter: function (params) {
                return params.value.toFixed(2) + "%";
              },
            },
          },
        ],
      },
      chartId: "turnoverRateBMChart",
      chartNum: 1,
    };
  },
  components: {
    bmSearchBar,
    BmLineBar,
  },
  computed: {
    isOpen() {
      return this.$store.getters.sidebar.opened;
    },
  },
  watch: {
    // 监听左侧菜单栏是否展开
    isOpen(val) {
      if (this.$route.name === "TurnoverRateBM") {
        this.chartNum++;
      }
    },
  },
  created() {
    this.tableH = this.tableHeight(269) / 2;
    this.chartHeight = this.tableHeight(269) / 2;
    window.addEventListener("resize", this._setTableHeight);
  },
  mounted() {
    this.tableProp = this.tableProp1;
    this.listQuery.type = 2;
    this.listQuery.startDate = moment().format("yyyy-MM-DD");
    this.listQuery.factory = [];
    this.getList();
  },
  destroyed() {
    window.removeEventListener("resize", this._setTableHeight);
  },
  activated() {
    // 图重新加载，为了防止窗口变化后尺寸图显示不佳，数据不更新
    if (this.$route.name === "TurnoverRateBM") {
      this.chartNum++;
    }
  },
  methods: {
    _setTableHeight() {
      this.tableH = this.tableHeight(269) / 2;
      this.chartHeight = this.tableHeight(269) / 2;
      if (this.$route.name === "TurnoverRateBM") {
        this.chartNum++;
      }
    },
    getSearch(val) {
      this.listQuery.type = val.type;
      this.listQuery.startDate = val.startDate;
      this.listQuery.factory = val.factory;
      this.getList();
    },
    getList() {
      this.tableProps = [];
      componentconvertrateCPage({ ...this.listQuery }).then((res) => {
        if (res.data && res.data.records.length > 0) {
          let msg = res.data.records[0];
          let arr1 = [
            {
              prop: "yoy",
              label: msg.yoyColumn,
              filter: (val) => (val || val === 0 ? val : "-"),
              minWidth: 150,
            },
            {
              prop: "queryValue",
              label: msg.queryColumn,
              filter: (val) => (val || val === 0 ? val : "-"),
              minWidth: 150,
            },
            {
              prop: "target",
              label: msg.targetColumn,
              filter: (val) => (val || val === 0 ? val : "-"),
              minWidth: 150,
            },
          ];
          let arr2 = [
            {
              prop: "yearTarget",
              label: msg.yearTargetColumn,
              filter: (val) => (val || val === 0 ? val : "-"),
              minWidth: 150,
            },
          ];
          // 重置chart的series
          this.chartMsg.series = [
            {
              name: "1",
              data: [],
              type: "bar",
              barWidth: 20,
              barGap: 0.5,
              label: {
                show: true,
                position: "top",
                color: "#68C483",
                fontSize: 9,
                formatter: function (params) {
                  return params.value.toFixed(2) + "%";
                },
              },
            },
            {
              name: "2",
              data: [],
              type: "bar",
              barWidth: 20,
              label: {
                show: true,
                position: "top",
                color: "#63BDFF",
                fontSize: 9,
                formatter: function (params) {
                  return params.value.toFixed(2) + "%";
                },
              },
            },
            {
              name: "3",
              data: [],
              type: "bar",
              barWidth: 20,
              label: {
                show: true,
                position: "top",
                color: "#288AFF",
                fontSize: 9,
                formatter: function (params) {
                  return params.value.toFixed(2) + "%";
                },
              },
            },
            {
              name: "4",
              data: [],
              type: "bar",
              barWidth: 20,
              label: {
                show: true,
                position: "top",
                color: "#7164FF",
                fontSize: 9,
                formatter: function (params) {
                  return params.value.toFixed(2) + "%";
                },
              },
            },
          ];
          // 维度为月时加年目标
          if (this.listQuery.type === 2) {
            this.tableProps = this.tableProps1.concat(arr1, arr2);
            this.legendList = [
              { id: 1, name: "", type: 1, color: "#8EF0AB" },
              { id: 2, name: "", type: 1, color: "#63BDFF" },
              { id: 3, name: "", type: 1, color: "#288AFF" },
              { id: 4, name: "", type: 1, color: "#7164FF" },
            ];
            this.legendList[3].name = msg.yearTargetColumn;
            this.chartMsg.series[3].name = msg.yearTargetColumn;
          } else {
            this.tableProps = this.tableProps1.concat(arr1);
            this.legendList = [
              { id: 1, name: "", type: 1, color: "#8EF0AB" },
              { id: 2, name: "", type: 1, color: "#63BDFF" },
              { id: 3, name: "", type: 1, color: "#288AFF" },
            ];
          }
          this.tableData = res.data.records;
          // 设置图例
          this.legendList[0].name = msg.yoyColumn;
          this.legendList[1].name = msg.queryColumn;
          this.legendList[2].name = msg.targetColumn;
          this.chartMsg.series[0].name = msg.yoyColumn;
          this.chartMsg.series[1].name = msg.queryColumn;
          this.chartMsg.series[2].name = msg.targetColumn;
          // 设置chartMsg的series的数据
          this.setChartMsg(res.data.records);
        } else {
          // 重置
          this.resetMsg();
        }
      });
    },
    setChartMsg(val) {
      let xData = [];
      let barData1 = [];
      let barData2 = [];
      let barData3 = [];
      let barData4 = [];
      for (let i = 0; i < val.length; i++) {
        this.factoryList.map((item) => {
          if (item.id === val[i].factory) {
            xData.push(item.name);
          }
        });
        barData1.push({ name: "%", value: val[i].yoy || 0 });
        barData2.push({
          name: "%",
          value: val[i].queryValue || 0,
        });
        barData3.push({ name: "%", value: val[i].target || 0 });
        barData4.push({
          name: "%",
          value: val[i].yearTarget || 0,
        });
      }
      this.chartMsg.xData = xData;
      this.chartMsg.series[0].data = barData1;
      this.chartMsg.series[1].data = barData2;
      this.chartMsg.series[2].data = barData3;
      this.chartMsg.series[3].data = barData4;
      if (this.listQuery.type !== 2) {
        this.chartMsg.series.pop();
      }
      this.chartMsg.xData = xData;
    },
    resetMsg() {
      this.tableProps = this.tableProps1;
      this.tableData = [];
      this.chartMsg = {
        color: ["#8EF0AB", "#63BDFF", "#288AFF", "#7164FF"],
        xData: [],
        yName: "单位/%",
        series: [
          {
            name: "1",
            data: [],
            type: "bar",
            barWidth: 20,
            barGap: 0.5,
            label: {
              show: true,
              position: "top",
              color: "#68C483",
              fontSize: 9,
              formatter: function (params) {
                return params.value.toFixed(2) + "%";
              },
            },
          },
          {
            name: "2",
            data: [],
            type: "bar",
            barWidth: 20,
            label: {
              show: true,
              position: "top",
              color: "#63BDFF",
              fontSize: 9,
              formatter: function (params) {
                return params.value.toFixed(2) + "%";
              },
            },
          },
          {
            name: "3",
            data: [],
            type: "bar",
            barWidth: 20,
            label: {
              show: true,
              position: "top",
              color: "#288AFF",
              fontSize: 9,
              formatter: function (params) {
                return params.value.toFixed(2) + "%";
              },
            },
          },
          {
            name: "4",
            data: [],
            type: "bar",
            barWidth: 20,
            label: {
              show: true,
              position: "top",
              color: "#7164FF",
              fontSize: 9,
              formatter: function (params) {
                return params.value.toFixed(2) + "%";
              },
            },
          },
        ],
      };
    },
    handleExport(val) {
      this.listQuery.type = val.type;
      this.listQuery.startDate = val.startDate;
      this.listQuery.factory = val.factory;
      let fileName = "转化效率对标.xls";
      componentconvertrateCExport({ ...this.listQuery })
        .then((response) => {
          this.$download.excel(response, fileName);
          this.$message.success("导出成功");
        })
        .catch(() => {});
    },
  },
};
</script>

<style lang="scss" scoped>
.containerTop {
  height: 64px;
}
.containerTop,
.containerBottom {
  position: relative;
  background-color: #fff;
  border-radius: 8px;
  padding: 16px;
}
.containerBottom {
  height: calc(100vh - 201px);
  margin-top: 8px;
  .smallTitle {
    font-size: 16px;
    color: #000;
    margin-bottom: 15px;
  }
  .smallTitle::before {
    display: inline-block;
    width: 4px;
    height: 16px;
    background: #0b58ff;
    content: "";
    margin-right: 8px;
    vertical-align: -3px;
  }
}
</style>
