<template>
  <div
    style="
      width: 99%;
      height: 100%;
      background-color: #d7dee6;
      padding: 5px;
      border: 2px solid #9e9b9b;
      display: flex;
      flex-direction: column;
    "
  >
    <el-row
      :gutter="20"
      style="
        margin-bottom: 10px;
        display: flex;
        align-items: center;
        flex-shrink: 0;
      "
    >
      <el-col :span="14">
        <el-form :inline="true" size="small">
          <el-form-item label="日期范围:" style="margin-bottom: 0">
            <el-date-picker
              v-model="dateRange"
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              value-format="yyyy-MM-dd"
              @change="handleDateChange"
            />
          </el-form-item>
          <el-form-item label="工件:" style="margin-bottom: 0">
            <el-select
              v-model="workpieceId"
              filterable
              placeholder="请选择工件"
              clearable
              @change="handleWorkpieceChange"
            >
              <el-option
                v-for="item in workpieceList"
                :key="item.工件编号"
                :label="item.工件编号"
                :value="item.工件编号"
              />
            </el-select>
          </el-form-item>
        </el-form>
      </el-col>
      <el-col :span="10" style="text-align: right">
        <el-button type="primary" @click="showCurveDialog">质量曲线</el-button>
        <!-- <el-button type="warning" @click="showPhotoDialog">查看照片</el-button> -->
      </el-col>
    </el-row>
    <el-row style="flex: 1; width: 100%; margin-top: 10px; min-height: 0">
      <el-table
        :data="orderCompletion_table1"
        :header-cell-style="{ background: '#F5F5F5', fontSize: '24px' }"
        border
        height="100%"
        stripe
        style="width: 100%; border: 1px solid #9e9b9b"
        tooltip-effect="dark"
      >
        <el-table-column align="right" label="序号" type="index" width="80px" />
        <!--
        工位号,
        订单号,
        机型代码,
        机型,
        发动机号,
        托盘编号,
        离开时间,
        IsOK -->
        <el-table-column align="center" label="工件编号" width="400">
          <template slot-scope="scope">
            {{ scope.row.发动机号 }}
          </template>
        </el-table-column>
        <el-table-column align="center" label="产品型号">
          <template slot-scope="scope">
            {{ scope.row.机型 }}
          </template>
        </el-table-column>
        <!--<el-table-column align="center" label="产品机型">-->
        <!--  <template slot-scope="scope">-->
        <!--    {{ scope.row.发动机型号 }}-->
        <!--  </template>-->
        <!--</el-table-column>-->
        <el-table-column align="center" label="到达时间" min-width="120px">
          <template slot-scope="scope">
            {{ scope.row.到达时间 }}
          </template>
        </el-table-column>
        <el-table-column align="center" label="离开时间" min-width="120px">
          <template slot-scope="scope">
            {{ scope.row.离开时间 }}
          </template>
        </el-table-column>
        <el-table-column align="center" label="是否合格">
          <template slot-scope="scope">
            <i v-if="scope.row.是否合格"
              ><span
                style="font-size: x-large; font-weight: 700; color: #67c23a"
                >OK</span
              ></i
            >
            <i v-else
              ><span
                style="font-size: x-large; font-weight: 700; color: #ff0000"
                >NG</span
              ></i
            >
          </template>
        </el-table-column>
        <el-table-column align="center" label="查看">
          <template slot-scope="scope">
            <el-button
              size="mini"
              style="font-size: large"
              type="text"
              @click="choose(scope.row)"
            >
              质量数据
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-row>
    <div
      style="
        height: 5.4%;
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: #fff;
        border-radius: 5px;
        margin: 5px;
      "
    >
      <el-col :span="6" class="totalInfo">
        <img :src="require('@/assets/image/passOn.png')" width="20px" />
        <span>过站数量：{{ passCount }}</span>
      </el-col>
      <el-col :span="6" class="totalInfo">
        <img :src="require('@/assets/image/passOK.png')" width="20px" />
        <span>OK：{{ ok }}</span>
      </el-col>
      <el-col :span="6" class="totalInfo">
        <img :src="require('@/assets/image/passNG.png')" width="20px" />
        <span>NG：{{ ng }}</span>
      </el-col>
      <el-col :span="6" class="totalInfo">
        <img :src="require('@/assets/image/passRate.png')" width="20px" />
        <span>合格率：{{ rate }}%</span>
      </el-col>
    </div>
    <el-dialog
      :append-to-body="true"
      :title="title"
      :visible.sync="dialogFormVisible1"
      center
      class="qualityDataDialog"
      style="text-align: center"
      width="650px"
    >
      <div style="text-align: center">
        <div style="width: 100%; height: 365px">
          <el-table
            :data="qualityData"
            :row-class-name="tableRowClassName"
            border
            max-height="365px"
            size="small"
            style="
              width: 100%;
              height: 100%;
              font-size: 20px;
              color: #000;
              border: 1px solid #9e9b9b;
            "
          >
            <el-table-column align="center" label="测量位置" prop="名称" />
            <el-table-column align="center" label="测量项目" prop="测量项目1" />
            <el-table-column align="center" label="测量值" prop="测量项目2" />
          </el-table>
        </div>
        <div style="margin-top: 10px">
          <el-button style="width: 100px; height: 40px" @click="cancel()">
            关闭
          </el-button>
        </div>
      </div>
    </el-dialog>
    <!-- Photo Dialog -->
    <el-dialog
      :append-to-body="true"
      :visible.sync="photoDialogVisible"
      center
      custom-class="photo-dialog"
      title="检测照片"
      width="80%"
    >
      <div style="display: flex; height: 60vh">
        <div class="photo-list-container">
          <ul>
            <li
              v-for="(photo, index) in photoList"
              :key="index"
              :class="{ 'active-photo': photo.url === currentPhotoUrl }"
              class="photo-list-item"
              @click="selectPhoto(photo)"
            >
              {{ photo.name }}
            </li>
          </ul>
        </div>
        <div class="photo-view-container">
          <img
            v-if="currentPhotoUrl"
            :src="currentPhotoUrl"
            class="photo-image"
          />
          <div v-else class="no-photo">请从左侧选择一张照片</div>
        </div>
      </div>
      <div style="text-align: center; margin-top: 10px">
        <el-button
          style="width: 100px; height: 40px"
          @click="photoDialogVisible = false"
        >
          关闭
        </el-button>
      </div>
    </el-dialog>
    <!-- Curve Dialog -->
    <el-dialog
      :append-to-body="true"
      :visible.sync="curveDialogVisible"
      title="查看曲线"
      width="80%"
      @close="onCurveDialogClose"
    >
      <el-form :inline="true" size="small">
        <el-form-item label="日期范围:">
          <el-date-picker
            v-model="curveDateRange"
            end-placeholder="结束日期"
            range-separator="至"
            start-placeholder="开始日期"
            type="daterange"
            value-format="yyyy-MM-dd"
          />
        </el-form-item>
        <el-form-item label="测量项目:">
          <el-select v-model="curveTagId" filterable placeholder="请选择">
            <el-option
              v-for="item in curveTagList"
              :key="item.TagID"
              :label="item.数据项"
              :value="item.TagID"
            />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button
            type="primary"
            size="medium"
            style="padding: 10px 20px; font-size: 14px"
            @click="drawCurve"
            >绘制曲线</el-button
          >
        </el-form-item>
      </el-form>
      <div ref="curveChart" style="width: 100%; height: 500px" />
      <span slot="footer" class="dialog-footer">
        <el-button @click="curveDialogVisible = false">关 闭</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import * as echarts from "echarts";

// import { mapGetters } from 'vuex'
export default {
  data() {
    return {
      dateRange: [], // 日期范围
      workpieceId: "", // 工件编号
      workpieceList: [], // 工件列表
      photoDialogVisible: false, // 照片查看弹窗
      photoList: [], // 照片列表
      currentPhotoUrl: "", // 当前查看的照片URL
      curveDialogVisible: false,
      curveDateRange: [],
      curveTagList: [],
      curveTagId: "",
      chartInstance: null,
      checked: false,
      Type: [{ label: "", value: "" }],
      count: true,
      text1: "正常生产订单",
      text2: "无订单生产",
      intdex: true,
      xianshou: "",
      orderCompletion_table1: [],
      PersonaSex: [],
      jixingName: [],
      Sex: [],
      title: "",
      publication: {
        topic: "",
        qos: 0,
        payload: "",
      },
      // 质量数据列表
      qualityData: [],
      dateCheckTimer: null,
      dataRefreshTimer: null,
      dialogFormVisible1: false,
      form1: {
        订单号: "",
        产品型号: "",
        零件号: "",
        计划数量: "",
        完成数量: "",
        计划时间: "",
        状态: "",
      },
      rules: {
        排序: [{ required: true, message: "序号为空", trigger: "change" }],
        订单号: [{ required: true, message: "订单号为空", trigger: "change" }],
        产品机型: [
          { required: true, message: "产品机型为空", trigger: "change" },
        ],
        零件号: [
          { required: true, message: "机型代码为空", trigger: "change" },
        ],
        计划数量: [
          { required: true, message: "计划数量为空", trigger: "change" },
        ],
        完成数量: [
          { required: true, message: "完成数量为空", trigger: "change" },
        ],
        计划时间: [
          { required: true, message: "计划时间为空", trigger: "change" },
        ],
        状态: [{ required: true, message: "状态为空", trigger: "change" }],
      },
    };
  },
  created() {
    this.setDefaultDate();
    this.getWorkpieceList();
    this.startAutoRefresh();
  },
  destroyed() {
    this.clearAutoRefresh();
  },
  computed: {
    passCount() {
      return this.orderCompletion_table1.length;
    },
    ok() {
      return this.orderCompletion_table1.filter((item) => item.是否合格).length;
    },
    ng() {
      return this.orderCompletion_table1.filter((item) => !item.是否合格)
        .length;
    },
    rate() {
      if (this.passCount === 0) {
        return "0.00";
      }
      const passRate = (this.ok / this.passCount) * 100;
      return passRate.toFixed(2);
    },
  },
  // watch: {
  //   orderCompletion_table: {
  //     handler(newValue, oldName) {
  //       this.orderCompletion_table1 = newValue
  //     },
  //     immediate: true,
  //     deep: true
  //   }

  // },
  // computed: {
  //   ...mapGetters([
  //     'orderCompletion_table'
  //   ])
  // },
  methods: {
    formatDate(date) {
      return `${date.getFullYear()}-${(date.getMonth() + 1)
        .toString()
        .padStart(2, "0")}-${date.getDate().toString().padStart(2, "0")}`;
    },
    setDefaultDate() {
      const end = new Date();
      const start = new Date();
      start.setDate(start.getDate() - 7); // 设置开始日期为七天前
      const startDate = this.formatDate(start);
      const endDate = this.formatDate(end);
      this.dateRange = [startDate, endDate];
    },
    startAutoRefresh() {
      this.clearAutoRefresh();
      this.dateCheckTimer = setInterval(() => {
        this.checkDateRange();
      }, 1000 * 60 * 60);
      this.dataRefreshTimer = setInterval(() => {
        this.getWorkpieceList();
      }, 1000 * 60 * 5);
    },
    clearAutoRefresh() {
      if (this.dateCheckTimer) {
        clearInterval(this.dateCheckTimer);
        this.dateCheckTimer = null;
      }
      if (this.dataRefreshTimer) {
        clearInterval(this.dataRefreshTimer);
        this.dataRefreshTimer = null;
      }
    },
    checkDateRange() {
      const today = this.formatDate(new Date());
      if (
        !this.dateRange ||
        this.dateRange.length !== 2 ||
        this.dateRange[1] !== today
      ) {
        this.setDefaultDate();
        this.getWorkpieceList();
      }
    },
    getWorkpieceList() {
      if (!this.dateRange || this.dateRange.length !== 2) {
        return;
      }
      const param = [];
      param[0] = ["开始日期", this.dateRange[0]];
      param[1] = ["结束日期", this.dateRange[1]];
      param[2] = ["工位号", this.$store.state.station.stationName];
      const Data = this.CreateData(
        "11",
        "测量数据发动机在线状态_时间段机型_查询",
        param
      );
      this.ExecDatabase(Data).then((response) => {
        this.workpieceList = response.data;
        if (this.workpieceList.length > 0) {
          // this.workpieceId = this.workpieceList[0].工件编号
          this.handleWorkpieceChange();
        } else {
          this.workpieceId = "";
          this.orderCompletion_table1 = [];
        }
      });
    },
    handleDateChange() {
      this.getWorkpieceList();
    },
    handleWorkpieceChange() {
      this.getTable();
    },
    showPhotoDialog() {
      if (!this.workpieceId) {
        this.$message.warning("请先选择一个工件");
        return;
      }
      // TODO: 需要用户提供获取图片的存储过程
      this.$message.info("正在加载图片列表... ");
      // 示例数据
      this.photoList = [
        { name: "视觉图片1.jpg", url: "/CreamImg/视觉图片1.jpg" },
        { name: "视觉图片2.jpg", url: "/CreamImg/视觉图片2.jpg" },
      ];
      if (this.photoList.length > 0) {
        this.selectPhoto(this.photoList[0]);
      } else {
        this.currentPhotoUrl = "";
      }
      this.photoDialogVisible = true;
    },
    showCurveDialog() {
      this.curveDialogVisible = true;
      this.setDefaultCurveDate();
      this.getCurveTagItems();
    },
    setDefaultCurveDate() {
      const end = new Date();
      const start = new Date();
      start.setDate(start.getDate() - 7);
      const startDate = `${start.getFullYear()}-${(start.getMonth() + 1)
        .toString()
        .padStart(2, "0")}-${start.getDate().toString().padStart(2, "0")}`;
      const endDate = `${end.getFullYear()}-${(end.getMonth() + 1)
        .toString()
        .padStart(2, "0")}-${end.getDate().toString().padStart(2, "0")}`;
      this.curveDateRange = [startDate, endDate];
    },
    getCurveTagItems() {
      const param = [["工位号", this.$store.state.station.stationName]];
      const Data = this.CreateData("11", "工位_曲线数据_数据项_查询", param);
      this.ExecDatabase(Data).then((response) => {
        this.curveTagList = response.data;
        if (this.curveTagList.length > 0) {
          this.curveTagId = this.curveTagList[0].TagID;
        }
      });
    },
    drawCurve() {
      if (!this.curveTagId) {
        this.$message.warning("请选择一个测量项目");
        return;
      }
      if (!this.curveDateRange || this.curveDateRange.length !== 2) {
        this.$message.warning("请选择日期范围");
        return;
      }

      const param = [];
      param[0] = ["工位号", this.$store.state.station.stationName];
      param[1] = ["TagID", this.curveTagId];
      param[2] = ["开始时间", this.curveDateRange[0]];
      param[3] = ["结束时间", this.curveDateRange[1]];

      const Data = this.CreateData("11", "工位_曲线数据_数据_查询", param);
      this.ExecDatabase(Data).then((response) => {
        const chartData = response.data;
        if (chartData.length === 0) {
          this.$message.info("该时间段内无数据");
          if (this.chartInstance) {
            this.chartInstance.clear();
          }
          return;
        }

        const xAxisData = chartData.map((item) => item.操作时间);
        const seriesData = chartData.map((item) => ({
          value: item.TagValue,
          工件编号: item.工件编号,
          操作时间: item.操作时间,
        }));
        const upperLimit = chartData.length > 0 ? chartData[0].上限值 : null;
        const lowerLimit = chartData.length > 0 ? chartData[0].下限值 : null;

        const markLineData = [];
        if (upperLimit !== null) {
          markLineData.push({
            yAxis: upperLimit,
            name: "上限值",
            lineStyle: { color: "#ff0000", type: "dashed" },
            label: { formatter: "上限: {c}" },
          });
        }
        if (lowerLimit !== null) {
          markLineData.push({
            yAxis: lowerLimit,
            name: "下限值",
            lineStyle: { color: "#67c23a", type: "dashed" },
            label: { formatter: "下限: {c}" },
          });
        }

        const option = {
          tooltip: {
            trigger: "axis",
            formatter: (params) => {
              const data = params[0].data;
              return `工件编号: ${data.工件编号}<br/>测量时间: ${data.操作时间}<br/>测量值: ${data.value}`;
            },
          },
          xAxis: {
            type: "category",
            data: xAxisData,
          },
          yAxis: {
            type: "value",
            scale: true,
          },
          series: [
            {
              data: seriesData,
              type: "line",
              smooth: true,
              markLine: {
                silent: true,
                symbol: "none",
                data: markLineData,
              },
            },
          ],
        };

        this.$nextTick(() => {
          if (!this.chartInstance) {
            this.chartInstance = echarts.init(this.$refs.curveChart);
          }
          this.chartInstance.setOption(option, true);
        });
      });
    },
    onCurveDialogClose() {
      if (this.chartInstance) {
        this.chartInstance.dispose();
        this.chartInstance = null;
      }
    },
    selectPhoto(photo) {
      this.currentPhotoUrl = photo.url;
    },
    tableRowClassName({ row }) {
      if (row.合格标志 == "1") {
        return "green";
      } else {
        return "red";
      }
    },
    getQualityData(row) {
      const param = [];
      param[0] = ["工位号", this.$store.state.station.stationName];
      param[1] = ["发动机号", row.发动机号];
      const Data = this.CreateData("11", "测量数据合格_查询", param);
      this.ExecDatabase(Data).then((response) => {
        this.qualityData = response.data;
      });
    },
    changeRadio() {
      if (this.checked) {
        this.intdex = false;
        if (this.xianshou === 1) {
          this.count = true;
        }
      } else if (!this.checked) {
        this.intdex = true;
        if (this.xianshou === 1) {
          this.count = false;
        }
      }
    },
    cancel() {
      this.dialogFormVisible1 = false;
    },
    confirm11(form) {
      const param = [];
      param[0] = ["工位号", this.$store.state.station.stationName];
      param[1] = ["订单号", this.form1.订单号];
      const Data2 = this.CreateData(
        "12",
        "测量数据工位_监控系统_订单号_增加",
        param
      );
      this.ExecDatabase(Data2).then((response) => {
        if (response.data[0].result === "1") {
          this.$notify.success({
            title: "提示",
            message: "订单选择成功！",
            position: "bottom-right",
            offset: 170,
          });
        } else {
          this.$message.error("订单选择失败");
        }
        this.getTable();
      });
      // this.publication.topic = window.g.mqttPublishTopic
      // this.publication.payload  = 'WEB|SetMoby|' + this.$store.state.station.stationName + '|' + '1'
      // const result = window.g.mqttClient.doPublish(this.publication)
      // if (result === true) {
      //   this.$notify.success({
      //     title: '提示',
      //     message: '订单增加传递成功！',
      //     position: 'bottom-right',
      //     offset: 170
      //   })
      // } else {
      //   this.$notify.error({
      //     title: '提示',
      //     message: '订单增加传递失败！',
      //     position: 'bottom-right',
      //     offset: 170
      //   })
      // }
      this.dialogFormVisible1 = false;
    },
    getTable() {
      const param = [];
      param[0] = ["开始日期", this.dateRange[0]];
      param[1] = ["结束日期", this.dateRange[1]];
      param[2] = ["工位号", this.$store.state.station.stationName];
      param[3] = ["工件编号", this.workpieceId];
      const Data = this.CreateData(
        "11",
        "测量数据发动机在线状态_工位数据_查询",
        param
      );
      this.ExecDatabase(Data).then((response) => {
        this.orderCompletion_table1 = response.data;
      });
    },
    choose(row) {
      if (this.qualityData) {
        this.qualityData = [];
      }
      this.getQualityData(row);
      this.dialogFormVisible1 = true;
    },
  },
};
</script>

<style scoped>
::v-deep .el-dialog__header {
  background-color: #f5f7fa;
  border-bottom: 1px solid #e4e7ed;
  padding: 15px 20px;
}

::v-deep .el-dialog__body {
  padding: 20px;
  background-color: #ffffff;
}

::v-deep .el-dialog__title {
  font-size: 18px;
  font-weight: bold;
  color: #303133;
}

::v-deep .cell {
  font-size: large;
  color: black;
}

::v-deep .el-table--striped .el-table__body tr.el-table__row--striped td {
  background-color: #cedcf3;
}

::v-deep.el-table th.el-table__cell > .cell {
  font-size: 22px;
  color: #2f2f2f;
}

::v-deep.qualityDataDialog .el-table th.el-table__cell > .cell {
  font-size: 18px;
  color: #2f2f2f;
}

::v-deep.el-table .green {
  background: rgba(0, 128, 0, 0.7) !important;
}

::v-deep.el-table .red {
  background: rgba(255, 0, 0, 0.7) !important;
}

.photo-dialog .el-dialog__body {
  padding: 10px 20px 20px;
  background-color: #f2f2f2;
}

.photo-list-container {
  width: 200px;
  border-right: 1px solid #ccc;
  padding-right: 10px;
  overflow-y: auto;
  height: 100%;
  background-color: white;
}

.photo-list-container ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.photo-list-item {
  cursor: pointer;
  padding: 8px;
  border-radius: 4px;
}

.photo-list-item:hover {
  background-color: #f0f0f0;
}

.active-photo {
  background-color: #dbeaff;
  color: #409eff;
  font-weight: bold;
}

.photo-view-container {
  flex: 1;
  padding-left: 10px;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: white;
}

.photo-image {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.no-photo {
  color: #909399;
}
.totalInfo {
  display: flex;
  align-items: center;
  justify-content: center;
}

.totalInfo span {
  margin-left: 8px;
  font-size: 18px;
  font-weight: 500;
}
</style>
