<template>
  <div class="testdiv">
    <div class="divborder newSearchDiv" style="margin:0px;">
      <div>
        <div class="filter">
          <label>{{ $t("1950574") }}：</label>
          <Cascader
            :data="datalevel"
            :value="leveldata"
            v-model="sectionid"
            @on-change="handlelevelchange"
            trigger="click"
            change-on-select
            class="searchSelect"
          ></Cascader>
        </div>
        <div class="filter">
          <label>{{ $t("100391") }}：</label>
          <Select
            v-model="materialNameId"
            label-in-value
            clearable
            filterable
            class="searchSelect"
            @on-change="initmaterialsuppliers()"
          >
            <Option
              v-for="item in materialNames"
              :value="item.id"
              :key="item.id"
              >{{ item.name }}</Option
            >
          </Select>
        </div>
        <div class="filter">
          <label>{{ $t("100390") }}：</label>
          <Select
            v-model="materialid"
            label-in-value
            clearable
            filterable
            class="searchSelect"
            @on-change="initsuppliers()"
          >
            <Option v-for="item in materials" :value="item.id" :key="item.id">{{
              item.name + "【" + item.pn + "】" + "【" + item.spec + "】"
            }}</Option>
          </Select>
        </div>
        <div class="filter">
          <label>{{ $t("600011") }}：</label>
          <Select
            v-model="supplierid"
            label-in-value
            clearable
            filterable
            @on-change="supplierChange()"
            class="searchSelect"
          >
            <Option v-for="item in suppliers" :value="item.id" :key="item.id">{{
              item.name
            }}</Option>
          </Select>
        </div>

        <!-- 次级搜索条件--隐藏 -->
        <div v-show="!morecondition">
          <div>
            <!-- TOP select下拉框 -->
            <div class="filter">
              <label>TOP：</label>
              <Select
                v-model="top"
                label-in-value
                clearable
                class="searchSelect"
                filterable
              >
                <Option :value="5" :key="5">5</Option>
                <Option :value="10" :key="10">10</Option>
                <Option :value="15" :key="15">15</Option>
                <Option :value="25" :key="20">20</Option>
                <Option :value="30" :key="30">30</Option>
              </Select>
            </div>
            <!-- 时间范围 -->
            <div class="filter">
              <label>{{ $t("1046") }}：</label>
              <DatePicker
                id="日期"
                type="datetimerange"
                v-model="daterange"
                confirm
                placeholder=""
                class="searchInput MaxWidth"
                format="yyyy-MM-dd HH:mm:ss"
                @on-change="selectdate"
              ></DatePicker>
            </div>
          </div>
        </div>
      </div>
      <div class="searchBtn">
        <Button
          type="primary"
          class="twoWord"
          icon="ios-search"
          @click="search()"
          >{{ $t("1001") }}</Button
        >
      </div>

      <!-- 更多条件 按钮 -->
      <MoreConbtn
        @getCon="morecondition = !morecondition"
        :morecondition="morecondition"
      ></MoreConbtn>
    </div>
    <div class="divborder newEchartStyle">
      <div class="echartsId" id="chart1"></div>
      <div class="echartsId" id="chart2"></div>
    </div>
  </div>
</template>

<script>
import axios from "@/libs/api.request";
import echarts from "echarts";
import moment from "moment";
export default {
  data() {
    return {
      headers: {
        token: localStorage.getItem("token"),
        timestamp: localStorage.getItem("timestamp"),
        nonce: localStorage.getItem("nonce"),
        sign: localStorage.getItem("sign")
      },
      morecondition: false, // 条件
      products: [],
      dtStart: "",
      dtEnd: "",
      daterange: "",
      host: axios.publicPath,
      materials: [],
      leveldata: [],
      datalevel: [],
      sectionid: [],
      materialid: 0,
      top: 0,
      suppliers: [],
      supplierid: 0,
      materialNameId: 0,
      materialNames: []
    };
  },
  created() {
    var nowtime = Date.parse(new Date()) / 1000;
    var oldtime = nowtime - 86400 * 7;
    this.daterange = [
      this.datetrans(oldtime) + "00:00:00",
      this.datetrans(nowtime) + "23:59:59"
    ];
    this.selectdate(this.daterange);
    this.initlevel();
    this.initsuppliers();
    this.supplierChange();
  },
  methods: {
    supplierChange(sectionid) {
      axios
        .request({
          url:
            "/qms/IncomingMaterial/GetCheckMaterials?supplierid=" +
            this.supplierid +
            "&sectionid=" +
            sectionid +
            "&materialNameId=" +
            this.materialNameId,
          method: "get"
        })
        .then(res => {
          this.materials = res.data.data;
        });
      axios
        .request({
          url:
            "/qms/IncomingMaterial/GetCheckMaterials?supplierid=" +
            this.supplierid +
            "&sectionid=" +
            sectionid +
            "&distinct=1",
          method: "get"
        })
        .then(res => {
          this.materialNames = res.data.data;
        });
    },
    initsuppliers() {
      this.axios
        .request({
          url:
            "/qms/IncomingMaterial/GetCheckSuppliers?materialid=" +
            this.materialid +
            "&materialNameId=" +
            this.materialNameId,
          method: "get"
        })
        .then(res => {
          this.suppliers = res.data.data;
        });
    },
    initmaterialsuppliers() {
      var sectionid = this.leveldata[this.leveldata.length - 1];
      this.axios
        .request({
          url:
            "/qms/IncomingMaterial/GetCheckMaterials?supplierid=" +
            this.supplierid +
            "&sectionid=" +
            sectionid +
            "&materialNameId=" +
            this.materialNameId,
          method: "get"
        })
        .then(res => {
          this.materials = res.data.data;
          this.axios
            .request({
              url:
                "/qms/IncomingMaterial/GetCheckSuppliers?materialid=" +
                this.materialid +
                "&materialNameId=" +
                this.materialNameId,
              method: "get"
            })
            .then(res => {
              this.suppliers = res.data.data;
            });
        });
    },
    handlelevelchange(value) {
      this.leveldata = value;
      var sectionid = value[value.length - 1];
      this.supplierChange(sectionid);
    },
    initlevel() {
      axios
        .request({
          url: "/qms/InspectStandardMaterial/GetSectionTree",
          method: "get"
        })
        .then(res => {
          const arr = [];
          this.datalevel = res.data.data;
          // arr.push(res.data.data[0].value)
          this.leveldata = arr;
        });
    },
    datetrans(date) {
      if (date === "" || date === undefined || date === 0 || date === null) {
        return "";
      }
      date = new Date(date * 1000);
      var Y = date.getFullYear() + "-";
      var M =
        (date.getMonth() + 1 < 10
          ? "0" + (date.getMonth() + 1)
          : date.getMonth() + 1) + "-";
      var D =
        (date.getDate() < 10 ? "0" + date.getDate() : date.getDate()) + " ";
      return Y + M + D;
    },
    search() {
      var params = {
        sectionid: this.sectionid[this.sectionid.length - 1],
        starttime: this.dtStart,
        endtime: this.dtEnd,
        materialid: this.materialid,
        top: this.top,
        supplierid: this.supplierid,
        materialNameId: this.materialNameId
      };
      axios
        .request({
          url: "/qms/Statistical/GetConcessionReceptionReport",
          data: params,
          method: "post"
        })
        .then(res => {
          if (res.data.ret === 1) {
            var data = res.data.data;
            var x1 = data.x1;
            var y1 = data.y1;
            var x2 = data.x2;
            var y2 = data.y2;
            var y3 = data.y3;
            this.echarts1(x1, y1);
            this.echarts2(x2, y2, y3);
          }
        });
    },
    echarts1(x, y) {
      var myChart = echarts.init(document.getElementById("chart1"));
      var option = {
        title: {
          text: this.$t(9900048) + "-" + this.$t(300084),
          x: "center",
          textStyle: {
            fontSize: 18
          },
          subtextStyle: {
            fontSize: 14
          }
        },
        color: ["#3398DB"],
        tooltip: {
          trigger: "axis",
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: "shadow" // 默认为直线，可选为：'line' | 'shadow'
          }
        },
        // grid: {
        //     left: '3%',
        //     right: '4%',
        //     bottom: '3%',
        //     containLabel: true
        // },
        xAxis: [
          {
            name: this.$t(920165),
            type: "category",
            data: x,
            axisTick: {
              alignWithLabel: true
            },
            axisLabel: {
              interval: 0,
              rotate: 20
            }
          }
        ],
        yAxis: [
          {
            name: this.$t(300084),
            type: "value"
          }
        ],
        series: [
          {
            name: this.$t(300084),
            type: "bar",
            barMaxWidth: 70,
            barWidth: "60%",
            data: y,
            label: {
              normal: {
                show: true,
                position: "top",
                // formatter:'{c}
                textStyle: {
                  color: "black",
                  fontSize: 14
                }
              }
            }
          }
        ]
      };

      myChart.setOption(option);
      window.onresize = function() {
        myChart.resize();
      };
    },
    echarts2(x, y1, y2) {
      var myChart = echarts.init(document.getElementById("chart2"));
      var option = {
        title: {
          text: this.$t(9900048) + "-" + this.$t(1950514),
          x: "center",
          textStyle: {
            fontSize: 18
          },
          subtextStyle: {
            fontSize: 14
          }
        },
        tooltip: {
          trigger: "item",
          formatter: "{c} %"
        },
        legend: {
          data: [this.$t(700142), { name: "占比 %", icon: "circle" }],
          icon: "roundRect",
          right: "20%",
          bottom: "90%"
        },
        xAxis: [
          {
            name: "      " + this.$t(900933),
            nameLocation: "end",
            splitLine: {
              show: false
            },
            data: x,
            axisLabel: {
              interval: 0,
              rotate: 20
            }
          }
        ],
        yAxis: [
          {
            name: this.$t(700142),
            type: "value",
            minInterval: 1,
            axisLabel: {
              show: true
            },
            axisTick: {
              show: false
            },
            splitLine: {
              show: false
            }
          },
          {
            name: this.$t(950016),
            type: "value",
            max: 100,
            axisLabel: {
              formatter: "{value} %",
              show: true
            },
            axisTick: {
              show: false
            },
            splitLine: {
              show: false
            }
          }
        ],
        series: [
          {
            name: this.$t(700142),
            type: "bar",
            barMaxWidth: 70,
            xAxisIndex: 0,
            yAxisIndex: 0,
            barCategoryGap: "10%",
            silent: true,
            label: {
              normal: {
                show: true,
                position: "top",
                // formatter:'{c}
                textStyle: {
                  color: "black",
                  fontSize: 14
                }
              }
            },
            data: y1
          },
          {
            name: this.$t(950016) + "%",
            type: "line",
            xAxisIndex: 0,
            yAxisIndex: 1,
            smooth: true,
            clipOverflow: false,
            symbolSize: 9,
            itemStyle: {
              normal: {
                // color:,
                // borderColor:,
                label: {
                  formatter: "{c} %",
                  position: "" | "",
                  show: true
                },
                borderWidth: 3
              }
            },
            lineStyle: {
              normal: {
                // color:,
                width: 4
              }
            },
            data: y2
          }
        ]
      };

      myChart.setOption(option);
      window.onresize = function() {
        myChart.resize();
      };
    },
    selectdate(e) {
      this.dtStart = e[0];
      this.dtEnd = e[1];

      let last_str = this.dtEnd.split(" ")[1];
      if (last_str === "00:00:00") {
        this.dtEnd = moment(this.dtEnd).format("YYYY-MM-DD") + " 23:59:59";
        this.daterange = [this.dtStart, this.dtEnd];
      }
    },
    initproducts() {
      axios
        .request({
          url: "/config/projectproduct/GetProducts",
          method: "get"
        })
        .then(res => {
          this.products = res.data.data;
        });
    }
  }
};
</script>
<style lang="less" scoped>
</style>
