<template>
  <!-- 添加或修改特种设备申请对话框 -->
  <el-dialog  :close-on-click-modal="false" :title="$t('提交申请')" :visible.sync="visible" width="1200px" append-to-body>
    <el-form :model="dataForm" :rules="dataRule" ref="dataForm" @keyup.enter.native="" label-width="80px">
      <el-form-item :label="$t('申请设备')">
        <u-table
          :data="devList"
          use-virtual
          showBodyOverflow="title"
          showHeaderOverflow="title"
          max-height="500px"
          border
          style="width: 100%">
          <u-table-column :label="$t('装置名称')" align="center" fixed="left" prop="plantCode" :show-overflow-tooltip="true"/>
          <u-table-column :label="$t('单元')" align="center" fixed="left" prop="unit" :show-overflow-tooltip="true"/>
          <u-table-column :label="$t('管道名称')" align="center" fixed="left" prop="devname" :show-overflow-tooltip="true"/>
          <u-table-column :label="$t('管道编号')" align="center" fixed="left" prop="devno" :show-overflow-tooltip="true"/>

          <u-table-column :label="$t('管道级别')" align="center" prop="grade" :show-overflow-tooltip="true"/>
          <u-table-column :label="$t('介质')" align="center" prop="medium" :show-overflow-tooltip="true">

          </u-table-column>
          <u-table-column :label="$t('设计压力')+'(MPa)'" align="center" prop="desPressure" :show-overflow-tooltip="true">

          </u-table-column>
          <u-table-column :label="$t('设计温度')+'(℃)'" align="center" prop="desTemp" :show-overflow-tooltip="true">

          </u-table-column>
          <u-table-column :label="$t('操作压力')+'(MPa)'" align="center" prop="optPressure" :show-overflow-tooltip="true">

          </u-table-column>
          <u-table-column :label="$t('操作温度')+'(℃)'" align="center" prop="optTemp" :show-overflow-tooltip="true">

          </u-table-column>
          <u-table-column :label="$t('安全状况等级')" align="center" prop="safeClass" :show-overflow-tooltip="true"/>
          <u-table-column :label="$t('下次定期检验日期')" align="center" prop="nextWarnDate" width="100">

          </u-table-column>

          <u-table-column label="1" align="center" prop="pj1" :render-header="renderHeader">

          </u-table-column>
          <u-table-column label="2" align="center" prop="pj2" :render-header="renderHeader">

          </u-table-column>
          <u-table-column label="3" align="center" prop="pj3" :render-header="renderHeader">

          </u-table-column>
          <u-table-column label="4" align="center" prop="pj4" :render-header="renderHeader">

          </u-table-column>
          <u-table-column label="5" align="center" prop="pj5" :render-header="renderHeader">

          </u-table-column>
          <u-table-column :label="$t('安全附件仪表及检查情况')" align="center">
            <u-table-column label="6" align="center" prop="pj6" :render-header="renderHeader">

            </u-table-column>
            <u-table-column label="7" align="center" prop="pj7" :render-header="renderHeader">

            </u-table-column>
            <u-table-column label="8" align="center" prop="pj8" :render-header="renderHeader">

            </u-table-column>
            <u-table-column label="9" align="center" prop="pj9" :render-header="renderHeader">

            </u-table-column>
            <u-table-column label="10" align="center" prop="pj10" :render-header="renderHeader">

            </u-table-column>
            <u-table-column label="11" align="center" prop="pj11" :render-header="renderHeader">

            </u-table-column>
          </u-table-column>
          <u-table-column label="12" align="center" prop="pj12" :render-header="renderHeader">

          </u-table-column>
          <u-table-column label="13" align="center" prop="pj13" :render-header="renderHeader">

          </u-table-column>
          <u-table-column label="14" align="center" prop="pj14" :render-header="renderHeader">

          </u-table-column>
          <u-table-column label="15" align="center" prop="pj15" :render-header="renderHeader">

          </u-table-column>
          <u-table-column label="16" align="center" prop="pj16" :render-header="renderHeader">

          </u-table-column>
          <u-table-column label="17" align="center" prop="pj17" :render-header="renderHeader">
          </u-table-column>
          <u-table-column :label="$t('备注')" align="center" prop="remarks" :show-overflow-tooltip="true">

          </u-table-column>
          <u-table-column :label="$t('检查日期')" align="center" prop="checkDate" width="100">

          </u-table-column>
          <u-table-column :label="$t('下次年度检查日期')" align="center" prop="nextCheckDate" width="100">

          </u-table-column>
          <u-table-column :label="$t('问题及处理')" align="center" prop="problem" :show-overflow-tooltip="true">

          </u-table-column>
          <u-table-column :label="$t('检查结论')" align="center" prop="con" :formatter="conFormat">

          </u-table-column>
          <u-table-column :label="$t('年检报告编号')" align="center" prop="yearReportNo" :show-overflow-tooltip="true">

          </u-table-column>
        </u-table>
      </el-form-item>
      <el-form-item :label="$t('CTM检查人')" label-width="140" prop="inspectorOne">
        <el-select v-model="dataForm.inspectorOne" filterable :placeholder="$t('请选择')+$t('CTM检查人')">
          <el-option
            v-for="item in userOption"
            :key="item.userId"
            :label="item.nickName"
            :value="item.userId"
            :disabled="item.disabled">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item :label="$t('CTA检查人')" label-width="140" prop="inspectorTwo">
        <el-select v-model="dataForm.inspectorTwo" filterable :placeholder="$t('请选择')+$t('CTA检查人')">
          <el-option
            v-for="item in userOption"
            :key="item.userId"
            :label="item.nickName"
            :value="item.userId"
            :disabled="item.disabled">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item :label="$t('工艺部门检查人')" label-width="140" prop="inspectorThree">
        <el-select v-model="dataForm.inspectorThree" filterable :placeholder="$t('请选择')+$t('工艺部门检查人')">
          <el-option
            v-for="item in userOption"
            :key="item.userId"
            :label="item.nickName"
            :value="item.userId"
            :disabled="item.disabled">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item :label="$t('审核人员')" label-width="140" prop="auditor">
        <el-select v-model="dataForm.auditor" filterable :placeholder="$t('请选择')+$t('审核人员')">
          <el-option
            v-for="item in userOption"
            :key="item.userId"
            :label="item.nickName"
            :value="item.userId"
            :disabled="item.disabled">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item :label="$t('审批人员')" label-width="140" prop="approver">
        <el-select v-model="dataForm.approver" filterable :placeholder="$t('请选择')+$t('审批人员')">
          <el-option
            v-for="item in userOption"
            :key="item.userId"
            :label="item.nickName"
            :value="item.userId"
            :disabled="item.disabled">
          </el-option>
        </el-select>
      </el-form-item>
<!--      <el-form-item :label="$t('检查日期')" label-width="140" prop="checkDate">-->
<!--        <el-date-picker-->
<!--          v-model="dataForm.checkDate"-->
<!--          type="date"-->
<!--          value-format="yyyy-MM-dd"-->
<!--          :placeholder="$t('请选择')+$t('检查日期')">-->
<!--        </el-date-picker>-->
<!--      </el-form-item>-->
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="submitForm">{{ $t('提交') }}</el-button>
      <el-button @click="cancel">{{ $t('取 消') }}</el-button>
    </div>
  </el-dialog>
</template>

<script>
import {getToken} from "@/utils/auth";
import {
  addYearApprove
} from "@/api/sems/approve";
import {listPostUser} from "@/api/system/user";

export default {
  name: "tapprove-add",
  data() {
    return {
      visible: false,
      devList: [],
      userOption:[],
      fileTips: '',
      showDelay: false,
      dataForm: {
        id: 0,
        devType: 2,
        approveType: 7,
        devId: '',
        inspectorOne: '',
        inspectorTwo: '',
        inspectorThree: '',
        auditor: '',
        approver: '',
        checkDate: ''
      },
      conOptions: [],
      doc: {
        file: "",
        // 是否显示弹出层（报告附件）
        open: false,
        // 弹出层标题（报告附件）
        title: "",
        // 是否禁用上传
        isUploading: false,
        // 是否更新已经存在的用户数据
        updateSupport: 0,
        // 报告附件上传位置编号
        ids: 0,
        // 设置上传的请求头部
        headers: { Authorization: "Bearer " + getToken() },
        // 上传的地址
        url: process.env.VUE_APP_BASE_API + "/sems/specfile/uploadFile",
        commonfileList: null,
        pType: 'traning',
        pId: null
      },
      dataRule: {
        approveType: [
          { required: true, message: this.$t('approveType') + this.$t('notEmpty'), trigger: 'blur' }
        ],
        content: [
          { required: true, message: this.$t('content') + this.$t('notEmpty'), trigger: 'blur' }
        ],
        inspectorOne: [
          { required: true, message: this.$t('content') + this.$t('notEmpty'), trigger: 'blur' }
        ],
        inspectorTwo: [
          { required: true, message: this.$t('content') + this.$t('notEmpty'), trigger: 'blur' }
        ],
        inspectorThree: [
          { required: true, message: this.$t('content') + this.$t('notEmpty'), trigger: 'blur' }
        ],
        auditor: [
          { required: true, message: this.$t('content') + this.$t('notEmpty'), trigger: 'blur' }
        ],
        approver: [
          { required: true, message: this.$t('content') + this.$t('notEmpty'), trigger: 'blur' }
        ]
      },
      approveOption: [],
      belong: '',
      fileList: [],
    };
  },
  watch: {
    // 根据名称筛选部门树
    deptName(val) {
      this.$refs.tree.filter(val);
    }
  },
  created() {
    this.getDicts("REPORT_CON").then(response => {
      this.conOptions = response.data;
    });
  },
  methods: {
    init (rows, type) {
      this.visible = true
      this.fileList = []
      this.devList = rows
      listPostUser(this.queryParams).then(response => {
        this.userOption = response;
      });
    //这里的devId是指的report的Id
      for (let i = 0; i < rows.length; i++) {
        if (i == 0){
          this.dataForm.devId = rows[i].id
        }else {
          this.dataForm.devId += ',' + rows[i].id
        }
      }
    },
    // 设备类型：字典翻译
    devTypeFormat(row, column) {
      return this.selectDictLabel(this.devTypeOptions, row.devType);
    },
    // 审批类型字典翻译
    approveTypeFormat(row, column) {
      return this.selectDictLabel(this.approveTypeOptions, row.approveType);
    },
    // 检查结论字典翻译
    conFormat(row, column) {
      return this.selectDictLabel(this.conOptions, row.con);
    },
    // 取消按钮
    cancel() {
      this.visible = false;
      this.reset();
    },
    // 表单重置
    reset() {
      this.form = {
        id: 0,
        devType: 2,
        approveType: 7,
        devId: '',
        inspectorOne: '',
        inspectorTwo: '',
        inspectorThree: '',
        auditor: '',
        approver: '',
        checkDate: ''
      };
      this.resetForm("form");
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs["dataForm"].validate(valid => {
        if (valid) {
          this.dataForm.reportId = this.dataForm.devId
          addYearApprove(this.dataForm).then(response => {
              this.msgSuccess(this.$t('申请成功'));
              this.visible = false;
            });
        }
      });
      this.$emit('refreshDataList')
    },
    //结论备注
    renderHeader(h, {column, $index}) {
      return [
        column.label,
        h(
          "el-tooltip",
          {
            props: {
              content: (function () {
                if (column.label == 1) {
                  return `安全管理情况`
                } else if (column.label == 2) {
                  return `设计图纸文档、维修记录、质量证明等资料`
                } else if (column.label == 3) {
                  return `作业人员定期培训情况`
                } else if (column.label == 4) {
                  return `管道本体及支架`
                } else if (column.label == 5) {
                  return `管道运行情况`
                } else if (column.label == 6) {
                  return `安全阀`
                } else if (column.label == 7) {
                  return `爆破片装置`
                } else if (column.label == 8) {
                  return `阻火器装置`
                } else if (column.label == 9) {
                  return `紧急切断阀`
                } else if (column.label == 10) {
                  return `压力表`
                } else if (column.label == 11) {
                  return `测温仪表`
                } else if (column.label == 12) {
                  return `电阻值测量`
                } else if (column.label == 13) {
                  return `壁厚测定`
                } else if (column.label == 14) {
                  return ``
                } else if (column.label == 15) {
                  return ``
                } else if (column.label == 16) {
                  return ``
                } else if (column.label == 17) {
                  return ``
                } else {
                  return `   `
                }
              })(),
              placement: "top"
            }
          },
          [
            h("span", {
              class: {
                "el-icon-question": true,
                "report-headerTips": true
              }
            })
          ]
        )
      ]
    },
}
}


</script>

<style scoped>

</style>
