<template>
  <div class="testdiv">
    <div class="divborder newSearchDiv" style="margin:0px;">
      <div class="filter">
        <label>{{$t('1132')}}：</label>
        <Cascader
          :data="datalevel"
          :value="leveldata"
          trigger="click"
          change-on-select
          class="searchSelect"
          @on-change="getlevel"
        ></Cascader>
      </div>
      <div class="filter">
        <label>{{$t('900908')}}：</label>
        <DatePicker
          type="datetimerange"
          :value="dateTime"
          placeholder
          class="searchInput MaxWidth"
          @on-change="selectdate"
        ></DatePicker>
      </div>
      <div class="filter">
        <label>{{$t('950047')}}：</label>
        <Select v-model="sectionIdStr" clearable multiple class="searchSelect nowropStyle">
          <Option v-for="(item,key) in allsections" :value="item.id" :key="key">{{ item.name }}</Option>
        </Select>
      </div>
      <div class="searchBtn">
        <Button
          type="primary"
          class="twoWord intervalRight"
          icon="ios-search"
          @click="tosearch()"
        >{{$t('1001')}}</Button>
        <Button
          type="primary"
          class="fourWord"
          icon="md-close-circle"
          @click="clear()"
        >{{$t('1039')}}</Button>
        <Button
          type="primary"
          class="fourWord"
          icon="ios-cloud-download"
          @click="dowmloadexport()"
        >{{$t('1007')}}</Button>
      </div>
    </div>
    <div class="divborder newEchartStyle">
      <div style="width:100%;height:160px;display: inline-block; padding:15px 0px;">
        <div class="div_baifenbi" id="div_top_one" style="height:150px;"></div>
        <div class="div_baifenbi" id="div_top_two" style="height:150px;"></div>
        <div class="div_baifenbi" id="div_top_three" style="height:150px;"></div>
        <div class="div_baifenbi" id="div_top_four" style="height:150px;"></div>
        <div class="div_baifenbi" id="div_top_five" style="height:150px;"></div>
      </div>
    </div>
    <div class="divborder newTableDiv">
      <Table class="tableClass" highlight-row :data="tableData1" :columns="tableColumns1"></Table>
      <div class="pageDiv">
        <div class="pageDirection">
          <Page
            :total="total"
            :current="page"
            @on-change="changePage"
            show-elevator
            show-sizer
            show-total
            @on-page-size-change="handlePageSize"
            :page-size-opts="[10,20,30,40,100]"
          ></Page>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import moment from "moment";
import echarts from "echarts";
import axios from "@/libs/api.request";

export default {
  components: {},
  data() {
    return {
      leveldata: [], // 产线层级集合
      levelid: 0, // 产线层级id
      tableData1: [], // 列表数据
      dateTime: "", // 时间范围
      starttime: "", // 开始时间
      endtime: "", // 结束时间
      page: 1,
      pagesize: 10,
      total: 0,
      toexcel: 0,
      obj: {},
      treedata1: [],
      datalevel: [],
      sectionIdStr: "",
      allsections: [],
      tableColumns1: [
        {
          type: "index2",
          title: this.$t("1008"),
          key: "xuhao",
          render: (h, params) => {
            return h(
              "span",
              (this.page - 1) * this.pagesize + params.index + 1
            );
          },
          width: 60,
        },
        {
          title: this.$t("200003"),
          key: "location",
          width: "120px",
        },
        {
          title: this.$t("600009"),
          key: "program_no",
        },
        {
          title: this.$t("100088"),
          key: "product_name",
        },
        {
          title: this.$t("900967"),
          key: "route_name",
        },
        {
          title: this.$t("500229"),
          key: "theory_yield",
          width: 150,
        },
        {
          title: this.$t("500230"),
          key: "actual_output",
          width: 150,
        },
        {
          title: this.$t("500224"),
          key: "total_efficiency",
        },
        {
          title: this.$t("500225"),
          key: "idle_loss",
        },
        {
          title: this.$t("500226"),
          key: "debug_loss",
        },
        {
          title: this.$t("500227"),
          key: "fault_loss",
        },
        {
          title: this.$t("500228"),
          key: "shutdown_loss",
          width: 150,
        },
      ],
    };
  },
  mounted() {
    this.inittime(); // 初始化
    this.initlevel();
    this.inisectionIds();
    // 格式化表格样式
    this.tableColumns1 = this.$time.initTableTitle(this.tableColumns1);
    // this.tosearch()
  },
  methods: {
    inittime() {
      // 时间赋值
      var date = new Date();
      this.dateTime = [
        moment(date.getTime()).format("YYYY-MM-DD ") + "00:00:00",
        moment(date.getTime()).format("YYYY-MM-DD ") + "23:59:59",
      ];
    },
    selectdate(e) {
      var date = new Date();
      let dtEnd = e[1];
      let last_str = dtEnd.split(" ")[1];
      if (last_str == "00:00:00") {
        dtEnd = moment(dtEnd).format("YYYY-MM-DD") + " 23:59:59";
      }
      this.dateTime = [e[0], dtEnd];
    },
    // 产线层级
    initlevel() {
      axios
        .request({
          url: "config/ProjectLevelSection/GetSectionTree",
          method: "get",
        })
        .then((res) => {
          this.levelid = res.data.data[0].value;
          const arr = [];
          this.datalevel = res.data.data;
          arr.push(res.data.data[0].value);
          this.leveldata = arr;

          this.tosearch();
        });
    },
    // 产线层级选择
    getlevel: function (data) {
      this.levelid = data[data.length - 1];
    },
    inisectionIds() {
      axios
        .request({
          url: "/config/ProjectLevelSection/GetSectionSelect?reverselevel=1",
          method: "get",
        })
        .then((res) => {
          // 产线层级
          if (res.data.ret === 1) {
            if (res.data.data.length !== 0) {
              res.data.data.forEach((item) => {
                this.allsections.push({ id: item.id, name: item.name });
              });
              this.levelid = res.data.data[0].value;
            }
          }
        });
    },
    tosearch() {
      this.page = 1;
      this.pagesize = 10;
      this.toexcel = 0;
      this.search();
    },
    dowmloadexport() {
      this.page = 1;
      this.pagesize = 10000;
      this.toexcel = 1;
      this.search();
    },
    search() {
      let { page, pagesize } = this;

      if (this.dateTime == undefined || this.dateTime == "") {
        this.$Message.error(this.$t("800154"));
        return false;
      }

      var sectionIds = [];
      if (this.sectionIdStr.length > 0) {
        this.sectionIdStr.forEach((ele) => {
          sectionIds.push(parseInt(ele));
        });
      }
      // if (this.levelid == null || this.levelid == undefined) {
      //   this.$Message.error(this.$t('1037'))
      //   return false
      // }
      var data = {
        startTime: moment(this.dateTime[0]).format("YYYY-MM-DD HH:mm:ss"),
        endTime: moment(this.dateTime[1]).format("YYYY-MM-DD HH:mm:ss"),
        section_id: this.levelid,
        sectionIdStr: sectionIds.join(","),
        toexcel: this.toexcel,
        page,
        pagesize,
      };
      axios
        .request({
          url: "cnc/ProductSum/GetListProductionEfficiencyAnalysis",
          data,
          method: "post",
        })
        .then((res) => {
          if (this.toexcel == 0) {
            this.total = 0;
            this.tableData1 = [];
            if (res.data.ret === 1) {
              if (res.data.data.list !== []) {
                this.total = res.data.data.total;
                this.mockTableData1(res.data.data.list);
              }
              // 造数据
              var arr1 = {
                id: "div_top_one",
                name: this.$t("500224"),
                color: "#7ECF51",
                number: res.data.data.summary.total_eff,
              };
              this.baseEcharts(arr1);
              var arr2 = {
                id: "div_top_two",
                name: this.$t("500225"),
                color: "#F0AD4E",
                number: res.data.data.summary.idle_loss,
              };
              this.baseEcharts(arr2);
              var arr3 = {
                id: "div_top_three",
                name: this.$t("500226"),
                color: "#0400B4",
                number: res.data.data.summary.debug_loss,
              };
              this.baseEcharts(arr3);
              var arr4 = {
                id: "div_top_four",
                name: this.$t("500227"),
                color: "#D9001B",
                number: res.data.data.summary.fault_loss,
              };
              this.baseEcharts(arr4);
              var arr5 = {
                id: "div_top_five",
                name: this.$t("500228"),
                color: "#555555",
                number: res.data.data.summary.shutdown_loss,
              };
              this.baseEcharts(arr5);
            } else {
              var arr11 = {
                id: "div_top_one",
                name: this.$t("500224"),
                color: "#7ECF51",
                number: 0,
              };
              this.baseEcharts(arr11);
              var arr12 = {
                id: "div_top_two",
                name: this.$t("500225"),
                color: "#F0AD4E",
                number: 0,
              };
              this.baseEcharts(arr12);
              var arr13 = {
                id: "div_top_three",
                name: this.$t("500226"),
                color: "#0400B4",
                number: 0,
              };
              this.baseEcharts(arr13);
              var arr14 = {
                id: "div_top_four",
                name: this.$t("500227"),
                color: "#D9001B",
                number: 0,
              };
              this.baseEcharts(arr14);
              var arr15 = {
                id: "div_top_five",
                name: this.$t("500228"),
                color: "#555555",
                number: 0,
              };
              this.baseEcharts(arr15);
              this.$Message.error(this.$t(res.data.msg));
            }
          } else {
            if (res.data.ret === 1) {
              document.location.href = axios.publicPath + "" + res.data.data;
            } else {
              this.$Message.error(this.$t(res.data.msg));
            }
          }
        });
    },
    baseEcharts(data) {
      var _value = 0;
      if (data.number < 0) {
        _value = 0;
      } else if (data.number > 100) {
        _value = 100;
      } else {
        _value = data.number;
      }
      var myChart = echarts.init(document.getElementById(data.id));
      var option = {
        color: [data.color, "#ccc"],
        title: {
          text: data.name,
          subtext: _value + "%",
          x: "center",
          y: "center",
          textStyle: {
            color: "black",
            fontSize: 18,
          },
          subtextStyle: {
            color: "black",
            fontSize: 14,
          },
        },
        series: [
          {
            name: "",
            type: "pie",
            radius: ["100%", "70%"],
            avoidLabelOverlap: false,
            hoverAnimation: false, // 移动放大
            clockwise: true, // 逆时针
            startAngle: 270,
            labelLine: {
              normal: {
                show: false,
              },
            },
            label: {
              normal: {
                show: false,
              },
            },
            data: [
              {
                value: _value,
                name: "",
              },
              {
                value: 100 - _value,
                name: "other",
                itemStyle: {
                  normal: {
                    color: "#ddd",
                  },
                },
              },
            ],
          },
        ],
      };
      myChart.setOption(option);
    },
    mockTableData1(tablelist) {
      let data = [];
      tablelist.forEach((item) => {
        if (item) {
          data.push({
            location: item.location,
            program_no: item.program_no,
            product_name: item.product_name,
            route_name: item.route_name,
            theory_yield: item.theory_yield,
            actual_output: item.actual_output,
            total_efficiency: item.total_efficiency,
            idle_loss: item.idle_loss,
            debug_loss: item.debug_loss,
            fault_loss: item.fault_loss,
            shutdown_loss: item.shutdown_loss,
          });
        }
      });
      this.tableData1 = data;
    },
    clear() {
      this.inittime();
      this.initlevel();
      this.sectionIdStr = "";
      this.tosearch();
    },
    handlePageSize(value) {
      this.pagesize = value;
      this.search();
    },
    changePage(value) {
      this.page = value;
      this.search();
    },
    handleRowChange(currentRow, oldCurrentRow) {},
  },
};
</script>
<style lang="less" scoped>
.div_baifenbi {
  width: 20%;
  float: left;
}
</style>
