<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('申请设备')">
        <el-table
          :data="devList"
          max-height="600px"
          border
          style="width: 100%">
          <el-table-column :label="$t('装置')" align="center" fixed="left" prop="plantCode" :show-overflow-tooltip="true"/>
          <el-table-column :label="$t('单元')" align="center" fixed="left" prop="unit" :show-overflow-tooltip="true"/>
          <el-table-column :label="$t('位号')" align="center" fixed="left" prop="devno" :show-overflow-tooltip="true"/>
          <el-table-column :label="$t('设备名称')" align="center" prop="devname" width="200" :show-overflow-tooltip="true"/>
          <el-table-column :label="$t('使用证号码')" align="center" prop="useno" :show-overflow-tooltip="true"/>
          <el-table-column :label="$t('设备代码')" align="center" prop="regno" :show-overflow-tooltip="true"/>
          <el-table-column :label="$t('介质')" align="center" prop="medium" :show-overflow-tooltip="true" :render-header="renderHeader">
          </el-table-column>
          <el-table-column :label="$t('设计压力')+'(MPa)'" align="center" prop="desPressure" :show-overflow-tooltip="true" :render-header="renderHeader">
          </el-table-column>
          <el-table-column :label="$t('设计温度')+'(℃)'" align="center" prop="desTemp" :show-overflow-tooltip="true" :render-header="renderHeader">
          </el-table-column>
          <el-table-column :label="$t('操作压力')+'(MPa)'" align="center" prop="optPressure" :show-overflow-tooltip="true" :render-header="renderHeader">
          </el-table-column>
          <el-table-column :label="$t('操作温度')+'(℃)'" align="center" prop="optTemp" :show-overflow-tooltip="true" :render-header="renderHeader">
          </el-table-column>
          <el-table-column :label="$t('安全状况等级')" align="center" prop="safeClass" :show-overflow-tooltip="true"/>
          <el-table-column :label="$t('下次定期检验日期')" align="center" prop="nextWarnDate" width="100">
          </el-table-column>
          <el-table-column :label="$t('容器管理')" header-align="center">
            <el-table-column
              prop="pj1"
              header-align="center"
              align="center"
              label="1">
              <template slot-scope="scope" slot="header">
                <el-tooltip effect="dark" :content="$t('管理制度、操作规程、运行记录')" placement="top">
                  <span>1</span>
                </el-tooltip>
              </template>
            </el-table-column>
            <el-table-column
              prop="pj2"
              header-align="center"
              align="center"
              label="2">
              <template slot-scope="scope" slot="header">
                <el-tooltip effect="dark" :content="$t('设计文件、竣工图样、产品合格证、质量证明文件、安装使用说明')" placement="top">
                  <span>2</span>
                </el-tooltip>
              </template>
            </el-table-column>
            <el-table-column
              prop="pj3"
              header-align="center"
              align="center"
              label="3">
              <template slot-scope="scope" slot="header">
                <el-tooltip effect="dark" :content="$t('监督检验证书以及安装、改造、修理等资料')" placement="top">
                  <span>3</span>
                </el-tooltip>
              </template>
            </el-table-column>
            <el-table-column
              prop="pj4"
              header-align="center"
              align="center"
              label="4">
              <template slot-scope="scope" slot="header">
                <el-tooltip effect="dark" :content="$t('使用登记证，使用登记表是否与实际相符')" placement="top">
                  <span>4</span>
                </el-tooltip>
              </template>
            </el-table-column>
            <el-table-column
              prop="pj5"
              header-align="center"
              align="center"
              label="5">
              <template slot-scope="scope" slot="header">
                <el-tooltip effect="dark" :content="$t('日常维护保养、定期安全检查记录')" placement="top">
                  <span>5</span>
                </el-tooltip>
              </template>
            </el-table-column>
            <el-table-column
              prop="pj6"
              header-align="center"
              align="center"
              label="6">
              <template slot-scope="scope" slot="header">
                <el-tooltip effect="dark" :content="$t('年度检查、定期检验报告齐全，报告中问题解决')" placement="top">
                  <span>6</span>
                </el-tooltip>
              </template>
            </el-table-column>
            <el-table-column
              prop="pj7"
              header-align="center"
              align="center"
              label="7">
              <template slot-scope="scope" slot="header">
                <el-tooltip effect="dark" :content="$t('作业人员定期培训情况')" placement="top">
                  <span>7</span>
                </el-tooltip>
              </template>
            </el-table-column>
          </el-table-column>
          <el-table-column  :label="$t('容器本体及运行情况')" header-align="center">
            <el-table-column
              prop="pj8"
              header-align="center"
              align="center"
              label="8">
              <template slot-scope="scope" slot="header">
                <el-tooltip effect="dark" :content="$t('设备铭牌、漆色、标志、使用证号码')" placement="top">
                  <span>8</span>
                </el-tooltip>
              </template>
            </el-table-column>
            <el-table-column
              prop="pj9"
              header-align="center"
              align="center"
              label="9">
              <template slot-scope="scope" slot="header">
                <el-tooltip effect="dark" :content="$t('本体裂、过热、变形、泄漏、损伤情况')" placement="top">
                  <span>9</span>
                </el-tooltip>
              </template>
            </el-table-column>
            <el-table-column
              prop="pj10"
              header-align="center"
              align="center"
              label="10">
              <template slot-scope="scope" slot="header">
                <el-tooltip effect="dark" :content="$t('接口部位、焊接接头等裂纹、泄漏、损伤情况')" placement="top">
                  <span>10</span>
                </el-tooltip>
              </template>
            </el-table-column>
            <el-table-column
              prop="pj11"
              header-align="center"
              align="center"
              label="11">
              <template slot-scope="scope" slot="header">
                <el-tooltip effect="dark" :content="$t('外表面腐蚀、异常结霜、结露情况')" placement="top">
                  <span>11</span>
                </el-tooltip>
              </template>
            </el-table-column>
            <el-table-column
              prop="pj12"
              header-align="center"
              align="center"
              label="12">
              <template slot-scope="scope" slot="header">
                <el-tooltip effect="dark" :content="$t('保温层、隔热层、衬里情况')" placement="top">
                  <span>12</span>
                </el-tooltip>
              </template>
            </el-table-column>
            <el-table-column
              prop="pj13"
              header-align="center"
              align="center"
              label="13">
              <template slot-scope="scope" slot="header">
                <el-tooltip effect="dark" :content="$t('检漏孔、信号孔')" placement="top">
                  <span>13</span>
                </el-tooltip>
              </template>
            </el-table-column>
            <el-table-column
              prop="pj14"
              header-align="center"
              align="center"
              label="14">
              <template slot-scope="scope" slot="header">
                <el-tooltip effect="dark" :content="$t('容器与相邻管道、构件间异常振动、响声、摩擦')" placement="top">
                  <span>14</span>
                </el-tooltip>
              </template>
            </el-table-column>
            <el-table-column
              prop="pj15"
              header-align="center"
              align="center"
              label="15">
              <template slot-scope="scope" slot="header">
                <el-tooltip effect="dark" :content="$t('支承、支座、基础、紧固螺栓')" placement="top">
                  <span>15</span>
                </el-tooltip>
              </template>
            </el-table-column>
            <el-table-column
              prop="pj16"
              header-align="center"
              align="center"
              label="16">
              <template slot-scope="scope" slot="header">
                <el-tooltip effect="dark" :content="$t('遮阳罩、操作台紧固')" placement="top">
                  <span>16</span>
                </el-tooltip>
              </template>
            </el-table-column>
            <el-table-column
              prop="pj17"
              header-align="center"
              align="center"
              label="17">
              <template slot-scope="scope" slot="header">
                <el-tooltip effect="dark" :content="$t('罐体与底盘等连接')" placement="top">
                  <span>17</span>
                </el-tooltip>
              </template>
            </el-table-column>
            <el-table-column
              prop="pj18"
              header-align="center"
              align="center"
              label="18">
              <template slot-scope="scope" slot="header">
                <el-tooltip effect="dark" :content="$t('波板、罐内扶梯与罐体连接')" placement="top">
                  <span>18</span>
                </el-tooltip>
              </template>
            </el-table-column>
            <el-table-column
              prop="pj19"
              header-align="center"
              align="center"
              label="19">
              <template slot-scope="scope" slot="header">
                <el-tooltip effect="dark" :content="$t('罐车拉紧带、鞍座、中间支座')" placement="top">
                  <span>19</span>
                </el-tooltip>
              </template>
            </el-table-column>
            <el-table-column
              prop="pj20"
              header-align="center"
              align="center"
              label="20">
              <template slot-scope="scope" slot="header">
                <el-tooltip effect="dark" :content="$t('气液相管及其它管路')" placement="top">
                  <span>20</span>
                </el-tooltip>
              </template>
            </el-table-column>
            <el-table-column
              prop="pj21"
              header-align="center"
              align="center"
              label="21">
              <template slot-scope="scope" slot="header">
                <el-tooltip effect="dark" :content="$t('疏水、排放、排污装置')" placement="top">
                  <span>21</span>
                </el-tooltip>
              </template>
            </el-table-column>
            <el-table-column
              prop="pj22"
              header-align="center"
              align="center"
              label="22">
              <template slot-scope="scope" slot="header">
                <el-tooltip effect="dark" :content="$t('设备运行稳定情况')" placement="top">
                  <span>22</span>
                </el-tooltip>
              </template>
            </el-table-column>
            <el-table-column
              prop="pj23"
              header-align="center"
              align="center"
              label="23">
              <template slot-scope="scope" slot="header">
                <el-tooltip effect="dark" :content="$t('接地装置')" placement="top">
                  <span>23</span>
                </el-tooltip>
              </template>
            </el-table-column>
            <el-table-column
              prop="pj24"
              header-align="center"
              align="center"
              label="24">
              <template slot-scope="scope" slot="header">
                <el-tooltip effect="dark" :content="$t('安全状况等级为4级的压力容器的监控措施')" placement="top">
                  <span>24</span>
                </el-tooltip>
              </template>
            </el-table-column>
          </el-table-column>
          <el-table-column :label="$t('安全附件或设施')" header-align="center">
            <el-table-column
              prop="pj25"
              header-align="center"
              align="center"
              label="25">
              <template slot-scope="scope" slot="header">
                <el-tooltip effect="dark" :content="$t('安全阀')" placement="top">
                  <span>25</span>
                </el-tooltip>
              </template>
            </el-table-column>
            <el-table-column
              prop="pj26"
              header-align="center"
              align="center"
              label="26">
              <template slot-scope="scope" slot="header">
                <el-tooltip effect="dark" :content="$t('压力表')" placement="top">
                  <span>26</span>
                </el-tooltip>
              </template>
            </el-table-column>
            <el-table-column
              prop="pj27"
              header-align="center"
              align="center"
              label="27">
              <template slot-scope="scope" slot="header">
                <el-tooltip effect="dark" :content="$t('爆破片')" placement="top">
                  <span>27</span>
                </el-tooltip>
              </template>
            </el-table-column>
            <el-table-column
              prop="pj28"
              header-align="center"
              align="center"
              label="28">
              <template slot-scope="scope" slot="header">
                <el-tooltip effect="dark" :content="$t('测温仪表')" placement="top">
                  <span>28</span>
                </el-tooltip>
              </template>
            </el-table-column>
            <el-table-column
              prop="pj29"
              header-align="center"
              align="center"
              label="29">
              <template slot-scope="scope" slot="header">
                <el-tooltip effect="dark" :content="$t('液位计')" placement="top">
                  <span>29</span>
                </el-tooltip>
              </template>
            </el-table-column>
            <el-table-column
              prop="pj30"
              header-align="center"
              align="center"
              label="30">
              <template slot-scope="scope" slot="header">
                <el-tooltip effect="dark" :content="$t('快开门安全联锁装置')" placement="top">
                  <span>30</span>
                </el-tooltip>
              </template>
            </el-table-column>
            <el-table-column
              prop="pj31"
              header-align="center"
              align="center"
              label="31">
              <template slot-scope="scope" slot="header">
                <el-tooltip effect="dark" :content="$t('紧急切断装置')" placement="top">
                  <span>31</span>
                </el-tooltip>
              </template>
            </el-table-column>
          </el-table-column>
          <el-table-column :label="$t('其他')" header-align="center">
            <el-table-column
              prop="pj32"
              header-align="center"
              align="center"
              label="32">
              <template slot-scope="scope" slot="header">
                <el-tooltip effect="dark" :content="$t('装卸软管、装卸阀门')" placement="top">
                  <span>32</span>
                </el-tooltip>
              </template>
            </el-table-column>
          </el-table-column>
          <el-table-column
            fixed="right"
            prop="con"
            header-align="center"
            align="center"
            :label="$t('结论')"
            :formatter="conFormat">
          </el-table-column>
          <el-table-column :label="$t('年检报告编号')" align="center" prop="yearReportNo" :show-overflow-tooltip="true">

          </el-table-column>
        </el-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: 1,
        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: 1,
        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;
            });
        }
      });
    },
//结论备注
    renderHeader(h, {column, $index}) {
      let _this = this
      return [
        column.label,
        h(
          "el-tooltip",
          {
            props: {
              content: (function () {
                if (column.label == 1) {
                  return `管理制度、操作规程、运行记录`
                }else {
                  return _this.$t('如果是多腔压力容器')
                }
              })(),
              placement: "top"
            }
          },
          [
            h("span", {
              class: {
                "el-icon-question": true,
                "report-headerTips": true
              }
            })
          ]
        )
      ]
    },

}
}


</script>

<style scoped>

</style>
