<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="68px">
      <el-form-item label="巡检日期" prop="recordTime">
        <el-date-picker
          v-model="queryParams.recordTime"
          type="date"
          value-format="yyyy-MM-dd"
          placeholder="选择巡检日期"
          :clearable="false">
        </el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button type="cyan" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>
    <el-table v-loading="loading" :data="pressureList" @selection-change="handleSelectionChange" border :cell-style="tableCellStyle">
      <el-table-column label="" align="center" prop="furnanceName" :show-overflow-tooltip="true" fixed="left"></el-table-column>
      <el-table-column label="" align="center" prop="time" :show-overflow-tooltip="true" fixed="left"></el-table-column>
      <el-table-column label="PASS 1" align="center">
        <el-table-column label="INLET" align="center" prop="pass1Inlet" :show-overflow-tooltip="true"></el-table-column>
        <el-table-column label="OUT" align="center" prop="pass1Out" :show-overflow-tooltip="true"></el-table-column>
        <el-table-column label="RATIO" align="center" prop="pass1Ratio" :show-overflow-tooltip="true">
          <template slot-scope="scope">
            <span @click="handleClick('pass1', scope.row) "v-if="scope.row.pass1Ratio>0.9" style="color:red;">{{scope.row.pass1Ratio}}</span>
            <span @click="handleClick('pass1', scope.row) "v-if="scope.row.pass1Ratio<=0.9">{{scope.row.pass1Ratio}}</span>
          </template>
        </el-table-column>
      </el-table-column>
      <el-table-column label="PASS 2" align="center">
        <el-table-column label="INLET" align="center" prop="pass2Inlet" :show-overflow-tooltip="true"></el-table-column>
        <el-table-column label="OUT" align="center" prop="pass2Out" :show-overflow-tooltip="true"></el-table-column>
        <el-table-column label="RATIO" align="center" prop="pass2Ratio" :show-overflow-tooltip="true">
          <template slot-scope="scope">
            <span @click="handleClick('pass2', scope.row)" v-if="scope.row.pass2Ratio>0.9" style="color:red;">{{scope.row.pass2Ratio}}</span>
            <span @click="handleClick('pass2', scope.row)" v-if="scope.row.pass2Ratio<=0.9">{{scope.row.pass2Ratio}}</span>
          </template>
        </el-table-column>
      </el-table-column>
      <el-table-column label="PASS 3" align="center">
        <el-table-column label="INLET" align="center" prop="pass3Inlet" :show-overflow-tooltip="true"></el-table-column>
        <el-table-column label="OUT" align="center" prop="pass3Out" :show-overflow-tooltip="true"></el-table-column>
        <el-table-column label="RATIO" align="center" prop="pass3Ratio" :show-overflow-tooltip="true">
          <template slot-scope="scope">
            <span @click="handleClick('pass3', scope.row)" v-if="scope.row.pass3Ratio>0.9" style="color:red;">{{scope.row.pass3Ratio}}</span>
            <span @click="handleClick('pass3', scope.row)" v-if="scope.row.pass3Ratio<=0.9">{{scope.row.pass3Ratio}}</span>
          </template>
        </el-table-column>
      </el-table-column>
      <el-table-column label="PASS 4" align="center">
        <el-table-column label="INLET" align="center" prop="pass4Inlet" :show-overflow-tooltip="true"></el-table-column>
        <el-table-column label="OUT" align="center" prop="pass4Out" :show-overflow-tooltip="true"></el-table-column>
        <el-table-column label="RATIO" align="center" prop="pass4Ratio" :show-overflow-tooltip="true">
          <template slot-scope="scope">
            <span @click="handleClick('pass4', scope.row)" v-if="scope.row.pass4Ratio>0.9" style="color:red;">{{scope.row.pass4Ratio}}</span>
            <span @click="handleClick('pass4', scope.row)" v-if="scope.row.pass4Ratio<=0.9">{{scope.row.pass4Ratio}}</span>
          </template>
        </el-table-column>
      </el-table-column>
      <el-table-column label="PASS 5" align="center">
        <el-table-column label="INLET" align="center" prop="pass5Inlet" :show-overflow-tooltip="true"></el-table-column>
        <el-table-column label="OUT" align="center" prop="pass5Out" :show-overflow-tooltip="true"></el-table-column>
        <el-table-column label="RATIO" align="center" prop="pass5Ratio" :show-overflow-tooltip="true">
          <template slot-scope="scope">
            <span @click="handleClick('pass5', scope.row)" v-if="scope.row.pass5Ratio>0.9" style="color:red;">{{scope.row.pass5Ratio}}</span>
            <span @click="handleClick('pass5', scope.row)" v-if="scope.row.pass5Ratio<=0.9">{{scope.row.pass5Ratio}}</span>
          </template>
        </el-table-column>
      </el-table-column>
      <el-table-column label="PASS 6" align="center">
        <el-table-column label="INLET" align="center" prop="pass6Inlet" :show-overflow-tooltip="true"></el-table-column>
        <el-table-column label="OUT" align="center" prop="pass6Out" :show-overflow-tooltip="true"></el-table-column>
        <el-table-column label="RATIO" align="center" prop="pass6Ratio" :show-overflow-tooltip="true">
          <template slot-scope="scope">
            <span @click="handleClick('pass6', scope.row)" v-if="scope.row.pass6Ratio>0.9" style="color:red;">{{scope.row.pass6Ratio}}</span>
            <span @click="handleClick('pass6', scope.row)" v-if="scope.row.pass6Ratio<=0.9">{{scope.row.pass6Ratio}}</span>
          </template>
        </el-table-column>
      </el-table-column>
      <el-table-column label="PASS 7" align="center">
        <el-table-column label="INLET" align="center" prop="pass7Inlet" :show-overflow-tooltip="true"></el-table-column>
        <el-table-column label="OUT" align="center" prop="pass7Out" :show-overflow-tooltip="true"></el-table-column>
        <el-table-column label="RATIO" align="center" prop="pass7Ratio" :show-overflow-tooltip="true">
          <template slot-scope="scope">
            <span @click="handleClick('pass7', scope.row)" v-if="scope.row.pass7Ratio>0.9" style="color:red;">{{scope.row.pass7Ratio}}</span>
            <span @click="handleClick('pass7', scope.row)" v-if="scope.row.pass7Ratio<=0.9">{{scope.row.pass7Ratio}}</span>
          </template>
        </el-table-column>
      </el-table-column>
      <el-table-column label="PASS 8" align="center">
        <el-table-column label="INLET" align="center" prop="pass8Inlet" :show-overflow-tooltip="true"></el-table-column>
        <el-table-column label="OUT" align="center" prop="pass8Out" :show-overflow-tooltip="true"></el-table-column>
        <el-table-column label="RATIO" align="center" prop="pass8Ratio" :show-overflow-tooltip="true">
          <template slot-scope="scope">
            <span @click="handleClick('pass8', scope.row)" v-if="scope.row.pass8Ratio>0.9" style="color:red;">{{scope.row.pass8Ratio}}</span>
            <span @click="handleClick('pass8', scope.row)" v-if="scope.row.pass8Ratio<=0.9">{{scope.row.pass8Ratio}}</span>
          </template>
        </el-table-column>
      </el-table-column>
      <el-table-column label="ALL PASS" align="center">
        <el-table-column label="MAX INLET" align="center" prop="allPassMaxInlet" :show-overflow-tooltip="true"></el-table-column>
        <el-table-column label="MAX OUT" align="center" prop="allPassMaxOut" :show-overflow-tooltip="true"></el-table-column>
        <el-table-column label="MAX RATIO" align="center" prop="allPassMaxRatio" :show-overflow-tooltip="true">
          <template slot-scope="scope">
            <span @click="handleClick('passAll', scope.row)" v-if="scope.row.allPassMaxRatio>0.9" style="color:red;">{{scope.row.allPassMaxRatio}}</span>
            <span @click="handleClick('passAll', scope.row)" v-if="scope.row.allPassMaxRatio<=0.9">{{scope.row.allPassMaxRatio}}</span>
          </template>
        </el-table-column>
      </el-table-column>
    </el-table>
    <!-- 趋势分析对话框 -->
    <el-dialog :title="analysis.title" :visible.sync="analysis.open" width="1000px" append-to-body @close="disposeChart">
      <div id="chart" :style="{width:width,height:height}"></div>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="cancelAnalysis">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import { listFvp, getFvpAnalysis } from "@/api/production/pressure";
  import { treeselect } from "@/api/system/dept";
  import { getToken } from "@/utils/auth";
  import Treeselect from "@riophae/vue-treeselect";
  import "@riophae/vue-treeselect/dist/vue-treeselect.css";

  export default {
    props: {
      width: {
        type: String,
        default: '100%'
      },
      height: {
        type: String,
        default: '400px'
      },
    },
    name: "Pressure",
    components: { Treeselect },
    data() {
      return {
        chart: null,
        // 趋势分析参数
        analysis: {
          open: false,
          title: "",
        },
        // 遮罩层
        loading: true,
        // 选中数组
        ids: [],
        // 非单个禁用
        single: true,
        // 非多个禁用
        multiple: true,
        // 显示搜索条件
        showSearch: true,
        // 总条数
        total: 0,
        // 裂解炉炉管测压表格数据
        pressureList: [],
        // 弹出层标题
        title: "",
        // 部门树选项
        deptOptions: undefined,
        clientHeight:300,
        // 是否显示弹出层
        open: false,
        // 用户导入参数
        upload: {
          // 是否显示弹出层（用户导入）
          open: false,
          // 弹出层标题（用户导入）
          title: "",
          // 是否禁用上传
          isUploading: false,
          // 是否更新已经存在的用户数据
          updateSupport: 0,
          // 设置上传的请求头部
          headers: { Authorization: "Bearer " + getToken() },
          // 上传的地址
          url: process.env.VUE_APP_BASE_API + "/production/pressure/importData"
        },
        // 查询参数
        queryParams: {
          pageNum: 1,
          pageSize: 20,
          furnanceName: null,
          recordTime: null,
          pass1: null,
          pass2: null,
          pass3: null,
          pass4: null,
          pass5: null,
          pass6: null,
          pass7: null,
          pass8: null,
          pass9: null,
          pass10: null,
          pass11: null,
          pass12: null,
          pass13: null,
          pass14: null,
          pass15: null,
          pass16: null,
          deptId: null,
        },
        recordTime: null,
        // 表单参数
        form: {},
        h109Out:[],
        h110Out:[],
        h111Out:[],
        h112Out:[],
        h113Out:[],
        h114Out:[],
        h115Out:[],
        h116Out:[],
        h117Out:[],
        h118Out:[],
        h130Out:[],
        // 表单校验
        rules: {
          id: [
            { required: true, message: "主键id不能为空", trigger: "blur" }
          ],
        }
      };
    },
    watch: {
      // 根据名称筛选部门树
      deptName(val) {
        this.$refs.tree.filter(val);
      }
    },
    created() {
      //设置表格高度对应屏幕高度
      this.$nextTick(() => {
        this.clientHeight = document.body.clientHeight -250
      })
      // this.getList();
      // this.getTreeselect();
      let now = new Date();
      this.queryParams.recordTime = now.getFullYear() + "-" + (now.getMonth() + 1) + "-" + now.getDate();
    },
    methods: {
      init() {
        this.getList();
      },
      handleClick(pass, row) {
        let passName = "";
        switch (pass) {
          case "pass1": passName = "PASS 1"; break;
          case "pass2": passName = "PASS 2"; break;
          case "pass3": passName = "PASS 3"; break;
          case "pass4": passName = "PASS 4"; break;
          case "pass5": passName = "PASS 5"; break;
          case "pass6": passName = "PASS 6"; break;
          case "pass7": passName = "PASS 7"; break;
          case "pass8": passName = "PASS 8"; break;
          case "passAll": passName = "ALL PASS"; break;
        }
        this.analysis.open = true;
        this.analysis.title = row.furnanceName + " " + passName + " RATIO 趋势分析";
        getFvpAnalysis({
          "pass": pass,
          "furnanceName": row.furnanceName,
          "recordTime": this.queryParams.recordTime,
        }).then(response => {
          let dateList = [];
          let dataList = [];
          for (let key in response.data) {
            let date = new Date(key);
            let year = date.getFullYear();
            let month = ('0' + (date.getMonth() + 1)).slice(-2);
            let day = ('0' + date.getDate()).slice(-2);
            let hours = ('0' + date.getHours()).slice(-2);
            let minutes = ('0' + date.getMinutes()).slice(-2);
            let seconds = ('0' + date.getSeconds()).slice(-2);
            dateList.push(year + '-' + month + '-' + day + ' ' + hours + ':' + minutes + ':' + seconds);
            dataList.push(response.data[key]);
          }
          let option = {
            tooltip: {
              trigger: 'axis'
            },
            xAxis: {
              type: 'category',
              data: dateList,
            },
            yAxis: {
              type: 'value'
            },
            series: [
              {
                data: dataList,
                type: 'line'
              }
            ]
          };
          this.chart = this.echarts.init(document.getElementById('chart'));
          this.chart.setOption(option);
        });
      },
      /** 销毁趋势图 */
      disposeChart() {
        if(this.chart != null) {
          this.echarts.dispose(this.chart);
        }
      },
      /** 查询裂解炉炉管测压列表 */
      getList() {
        this.loading = true;
        listFvp(this.queryParams).then(response => {
          if (response.msg == "incompleteData") {
            this.msgInfo("巡检数据录入不完整，暂时无法生成此表格。");
          } else {
            this.pressureList = response.data;
          }
          this.loading = false;
        });
      },
      // 单元格样式
      tableCellStyle( {row, column, rowIndex, columnIndex} ) {
        if (columnIndex === 0) {
          return "background:#F5F7FA;";
        }
      },
      /** 查询部门下拉树结构 */
      getTreeselect() {
        treeselect().then(response => {
          this.deptOptions = response.data;
        });
      },
      // 取消按钮
      cancel() {
        this.open = false;
        this.reset();
      },
      cancelAnalysis() {
        this.analysis.open = false;
      },
      // 表单重置
      reset() {
        this.form = {
          id: null,
          furnanceName: null,
          recordTime: null,
          pass1: null,
          pass2: null,
          pass3: null,
          pass4: null,
          pass5: null,
          pass6: null,
          pass7: null,
          pass8: null,
          pass9: null,
          pass10: null,
          pass11: null,
          pass12: null,
          pass13: null,
          pass14: null,
          pass15: null,
          pass16: null,
          deptId: null,
          delFlag: null,
          createBy: null,
          createTime: null,
          updateBy: null,
          updateTime: null,
        };
        this.pass1 = [];
        this.pass2 = [];
        this.pass3 = [];
        this.pass4 = [];
        this.pass5 = [];
        this.pass6 = [];
        this.pass7 = [];
        this.pass8 = [];
        this.pass9 = [];
        this.pass10 = [];
        this.pass11 = [];
        this.pass12 = [];
        this.pass13 = [];
        this.pass14 = [];
        this.pass15 = [];
        this.pass16 = [];
        this.resetForm("form");
      },
      /** 搜索按钮操作 */
      handleQuery() {
        this.queryParams.pageNum = 1;
        this.getList();
      },
      /** 重置按钮操作 */
      resetQuery() {
        this.resetForm("queryForm");
        this.handleQuery();
      },
      // 多选框选中数据
      handleSelectionChange(selection) {
        this.ids = selection.map(item => item.id)
        this.single = selection.length!==1
        this.multiple = !selection.length
      },
      /** 新增按钮操作 */
      handleAdd() {
        this.reset();
        this.form.furnanceName = "H130";
        this.open = true;
        this.title = "添加裂解炉炉管测压";
      },
      /** 修改按钮操作 */
      handleUpdate(row) {
        this.reset();
        const id = row.id || this.ids
        getPressure(id).then(response => {
          this.form = response.data;
          if (response.data.pass1 == null) { this.pass1 = []; } else { this.pass1 = response.data.pass1.split(','); }
          if (response.data.pass2 == null) { this.pass2 = []; } else { this.pass2 = response.data.pass2.split(','); }
          if (response.data.pass3 == null) { this.pass3 = []; } else { this.pass3 = response.data.pass3.split(','); }
          if (response.data.pass4 == null) { this.pass4 = []; } else { this.pass4 = response.data.pass4.split(','); }
          if (response.data.pass5 == null) { this.pass5 = []; } else { this.pass5 = response.data.pass5.split(','); }
          if (response.data.pass6 == null) { this.pass6 = []; } else { this.pass6 = response.data.pass6.split(','); }
          if (response.data.pass7 == null) { this.pass7 = []; } else { this.pass7 = response.data.pass7.split(','); }
          if (response.data.pass8 == null) { this.pass8 = []; } else { this.pass8 = response.data.pass8.split(','); }
          if (response.data.pass9 == null) { this.pass9 = []; } else { this.pass9 = response.data.pass9.split(','); }
          if (response.data.pass10 == null) { this.pass10 = []; } else { this.pass10 = response.data.pass10.split(','); }
          if (response.data.pass11 == null) { this.pass11 = []; } else { this.pass11 = response.data.pass11.split(','); }
          if (response.data.pass12 == null) { this.pass12 = []; } else { this.pass12 = response.data.pass12.split(','); }
          this.open = true;
          this.title = "修改裂解炉炉管测压";
        });
      },
      /** 提交按钮 */
      submitForm() {
        this.form.pass1 = this.pass1.join(",");
        this.form.pass2 = this.pass2.join(",");
        this.form.pass3 = this.pass3.join(",");
        this.form.pass4 = this.pass4.join(",");
        this.form.pass5 = this.pass5.join(",");
        this.form.pass6 = this.pass6.join(",");
        this.form.pass7 = this.pass7.join(",");
        this.form.pass8 = this.pass8.join(",");
        this.form.pass9 = this.pass9.join(",");
        this.form.pass10 = this.pass10.join(",");
        this.form.pass11 = this.pass11.join(",");
        this.form.pass12 = this.pass12.join(",");
        this.form.pass13 = this.pass13.join(",");
        this.form.pass14 = this.pass14.join(",");
        this.form.pass15 = this.pass15.join(",");
        this.form.pass16 = this.pass16.join(",");
        this.$refs["form"].validate(valid => {
          if (valid) {
            if (this.form.id != null) {
              updatePressure(this.form).then(response => {
                this.msgSuccess("修改成功");
                this.open = false;
                this.getList();
              });
            } else {
              addPressure(this.form).then(response => {
                this.msgSuccess("新增成功");
                this.open = false;
                this.getList();
              });
            }
          }
        });
      },
      /** 删除按钮操作 */
      handleDelete(row) {
        const ids = row.id || this.ids;
        this.$confirm('是否确认删除?', "警告", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }).then(function() {
          return delPressure(ids);
        }).then(() => {
          this.getList();
          this.msgSuccess("删除成功");
        })
      },
      /** 导出按钮操作 */
      handleExport() {
        const queryParams = this.queryParams;
        this.$confirm('是否确认导出所有裂解炉炉管测压数据项?', "警告", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }).then(function() {
          return exportPressure(queryParams);
        }).then(response => {
          this.download(response.msg);
        })
      },
      /** 导入按钮操作 */
      handleImport() {
        this.upload.title = "用户导入";
        this.upload.open = true;
      },
      /** 下载模板操作 */
      importTemplate() {
        importTemplate().then(response => {
          this.download(response.msg);
        });
      },
      // 文件上传中处理
      handleFileUploadProgress(event, file, fileList) {
        this.upload.isUploading = true;
      },
      // 文件上传成功处理
      handleFileSuccess(response, file, fileList) {
        this.upload.open = false;
        this.upload.isUploading = false;
        this.$refs.upload.clearFiles();
        this.$alert(response.msg, "导入结果", { dangerouslyUseHTMLString: true });
        this.getList();
      },
      // 提交上传文件
      submitFileForm() {
        this.$refs.upload.submit();
      }
    }
  };
</script>
