<template>
  <div class="testdiv">
    <div class="divborder newSearchDiv" style="margin:0px;">
      <div>
        <div class="filter">
          <label>{{ $t("100307") }}：</label>
          <Select
            v-model="productid"
            label-in-value
            clearable
            filterable
            @on-change="initmaterials"
            class="searchSelect"
          >
            <Option v-for="item in products" :value="item.id" :key="item.id">{{
              item.name + "【" + item.code + "】"
            }}</Option>
          </Select>
        </div>
        <div class="filter">
          <label>{{ $t("920165") }}：</label>
          <Select
            v-model="materialid"
            label-in-value
            clearable
            filterable
            class="searchSelect"
          >
            <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("1950502") }}：</label>
          <Select
            v-model="testroom"
            label-in-value
            clearable
            class="searchSelect"
          >
            <Option
              v-for="item in edittestrooms"
              :value="item.key"
              :key="item.key"
              >{{ item.value }}</Option
            >
          </Select>
        </div>
        <div class="filter">
          <label>{{ $t("1950501") }}：</label>
          <Select
            v-model="checktype"
            label-in-value
            clearable
            class="searchSelect"
          >
            <Option v-for="item in checktypeList" :value="item.id" :key="item.id">{{ item.name }}</Option>
            <!--<Option value="5" key="5">{{ $t(930033) }}</Option>
            <Option value="2" key="2">{{ $t(930034) }}</Option>
            <Option value="3" key="3">{{ $t(930035) }}</Option>
            <Option value="6" key="6">{{ $t(930036) }}</Option>
            <Option value="1" key="1">{{ $t(950367) }}</Option>
            <Option value="4" key="4">{{ $t(930037) }}</Option>
            <Option value="7" key="7">{{ $t(600233) }}</Option>-->
          </Select>
        </div>
        <!-- 次级搜索条件--隐藏 -->
        <div v-show="!morecondition">
          <!-- 横坐标 -->
          <div>
            <div class="filter">
              <label>{{ $t("1129") }}：</label>
              <Select
                v-model="x_type"
                label-in-value
                clearable
                class="searchSelect"
              >
                <Option :value="0" v-text="$t('1101')">天</Option>
                <Option :value="1" v-text="$t('1136')">周</Option>
                <Option :value="2" v-text="$t('1138')">月</Option>
                <Option :value="5" v-text="$t('1140')">季度</Option>
                <Option :value="4" v-text="$t('1142')">年</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 id="chart1" class="echartsId"></div>
      <div id="chart2" class="echartsId"></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,
      productid: 0,
      edittestrooms: [],
      testroom: "",
      checktype: 0,
      x_type: "",
      checktypeList: [],
    };
  },
  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.initedittestrooms();
    this.initproducts();
    this.initchecktypeList();
  },
  methods: {
    initchecktypeList () {
      axios.request({
        url: '/qms/TypeCount/GetTypeCounts?page=1&pagesize=10000',
        method: 'get'
      }).then(res => {
        res.data.data.forEach(ele => {
          this.checktypeList.push({id:ele.type_code, name:ele.type_name})
        });
      })      
    },
    initedittestrooms() {
      axios
        .request({
          url: "/qms/SendTestCollection/GetTestRoomDict",
          method: "get"
        })
        .then(res => {
          this.edittestrooms = res.data.data;
        });
    },
    initlevel() {
      axios
        .request({
          url: "config/ProjectLevelSection/GetSectionTree",
          method: "get"
        })
        .then(res => {
          const arr = [];
          this.datalevel = res.data.data;
          // arr.push(res.data.data[0].value)
          this.leveldata = arr;
        });
    },
    initmaterials() {
      axios
        .request({
          url:
            "/config/Material/GetSonMaterialsByProduct?productid=" +
            this.productid,
          method: "get"
        })
        .then(res => {
          this.materials = res.data.data;
        });
    },
    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 = {
        productid: this.productid,
        testroom: this.testroom,
        starttime: this.dtStart,
        endtime: this.dtEnd,
        materialid: this.materialid,
        testtype: this.checktype,
        xtype: this.x_type
      };
      axios
        .request({
          url: "/qms/Statistical/GetTestRoomCheckReport",
          data: params,
          method: "post"
        })
        .then(res => {
          if (res.data.ret === 1) {
            var data = res.data.data;
            var x1 = data.date;
            var y1 = data.qualified;
            var y2 = data.deviationrelease;
            var y3 = data.unqualified;
            this.echarts1(x1, y1, y2, y3);
          }
        });
    },
    echarts1(x, y1, y2, y3) {
      let ydata1 = [];
      let ydata2 = [];
      let ydata3 = [];
      let num = x.length;
      if (num > 0) {
        for (var i = 0; i < num; i++) {
          ydata1.push(y1[i]);
          ydata2.push(y2[i]);
          ydata3.push(y3[i]);
        }
      }
      var myChart = echarts.init(document.getElementById("chart1"));
      var option = {
        title: {
          text: this.$t(930041),
          x: "center",
          textStyle: {
            fontSize: 18
          },
          subtextStyle: {
            fontSize: 14
          }
        },
        tooltip: {
          trigger: "axis"
        },
        color: ["green", "blue", "red"],
        legend: {
          data: [this.$t(930042), this.$t(930043), this.$t(930044)],
          right: "20%",
          bottom: "90%"
        },
        calculable: true,
        xAxis: [
          {
            name: this.$t(1046),
            type: "category",
            data: x,
            axisLabel: {
              interval: 0,
              rotate: 40
            }
          }
        ],
        yAxis: [
          {
            name: this.$t(700142),
            type: "value",
            minInterval: 1
          }
        ],
        series: [
          {
            name: this.$t(930042),
            type: "bar",
            barMaxWidth: 70,
            stack: "总量",
            label: {
              show: false,
              position: "insideRight"
            },
            data: ydata1
          },
          {
            name: this.$t(930043),
            type: "bar",
            barMaxWidth: 70,
            stack: "总量",
            label: {
              show: false,
              position: "insideRight"
            },
            data: ydata2
          },
          {
            name: this.$t(930044),
            type: "bar",
            barMaxWidth: 70,
            stack: "总量",
            label: {
              show: false,
              position: "insideRight"
            },
            data: ydata3
          }
          // {
          //   name: this.$t(930042),
          //   type: 'bar',
          //   color: 'green',
          //   data: y1,
          //   label: {
          //     show: true, // 开启显示
          //     position: 'top', // 在上方显示
          //     textStyle: { // 数值样式
          //       color: 'green',
          //       fontSize: 16
          //     }
          //   }
          // },
          // {
          //   name: '偏差放行次数',
          //   type: 'bar',
          //   color: 'blue',
          //   data: y2,
          //   label: {
          //     show: true, // 开启显示
          //     position: 'top', // 在上方显示
          //     textStyle: { // 数值样式
          //       color: 'blue',
          //       fontSize: 16
          //     }
          //   }
          // },
          // {
          //   name: '不合格次数',
          //   type: 'bar',
          //   color: 'red',
          //   data: y3,
          //   label: {
          //     show: true, // 开启显示
          //     position: 'top', // 在上方显示
          //     textStyle: { // 数值样式
          //       color: 'red',
          //       fontSize: 16
          //     }
          //   }
          // }
        ]
      };

      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>
