<template>
  <div>
    <h3>隐患管理</h3>

    <el-button
      type="primary"
      plain
      icon="el-icon-plus"
      size="mini"
      style="margin-bottom: 10px"
      @click="handleAddHidden"
      v-if="!readOnly"
    >新增隐患</el-button>

    <el-table v-loading="loading" :data="refList">
      <el-table-column label="隐患唯一编码" align="center" prop="fHazardUniqueCode" />
      <el-table-column label="自有编号" align="center" prop="fHazardOutUniqueCode">
        <template slot-scope="scope">
          <span v-if="scope.row.fHazardOutUniqueCode">{{ scope.row.fHazardOutUniqueCode }}</span>
          <span v-else>-</span>
        </template>
      </el-table-column>
      <el-table-column label="检查对象分类" align="center" prop="fObjType" :formatter="fObjTypeFormat" />
      <el-table-column label="监督检查时间" align="center" prop="fCheckTime" :show-overflow-tooltip="true"/>
      <el-table-column label="整改状态" align="center" prop="fRectificationStatus">
        <template slot-scope="scope">
          <span v-if="scope.row.fRectificationStatus">{{ fRectificationStatusFormat(scope.row) }}</span>
          <span v-else>-</span>
        </template>
      </el-table-column>
      <el-table-column label="是否执行" align="center" prop="fIsEnforcement">
        <template slot-scope="scope">
          <span v-if="scope.row.fIsEnforcement == '1'">是</span>
          <span v-else-if="scope.row.fIsEnforcement == '0'">否</span>
          <span v-else>-</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="150">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="text"
            icon="el-icon-document"
            @click="handleDetail(scope.row)"
          >详情</el-button>
          <el-button
            size="mini"
            type="text"
            icon="el-icon-edit"
            v-if="!readOnly && (('-2' == $store.state.user.enterpriseId && scope.row.fRectificationStatus == '0') || '-2' != $store.state.user.enterpriseId)"
            @click="handleUpdate(scope)"
          >修改</el-button>
          <el-button
            size="mini"
            type="text"
            icon="el-icon-delete"
            v-if="!readOnly && (('-2' == $store.state.user.enterpriseId && scope.row.fRectificationStatus == '0') || '-2' != $store.state.user.enterpriseId)"
            @click="handleDelete(scope)"
          >删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />

    <!-- 隐患新增 -->
    <el-dialog :title="title" :visible.sync="open" width="900px" append-to-body destroy-on-close :close-on-click-modal="false">
      <el-form ref="form" :model="form" :rules="rules" label-width="150px">
        <el-row class="el-row-table">
          <el-col :span="12">
            <el-form-item label="隐患分类分级编码" prop="fHazardTypeLevelId">
              <el-input v-model="form.fHazardTypeLevelId" placeholder="请输入隐患分类分级编码" />
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="隐患唯一编码" prop="fHazardUniqueCode">
              <el-input v-model="form.fHazardUniqueCode" placeholder="请输入隐患唯一编码" />
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="自有编号" prop="fHazardOutUniqueCode">
              <el-input v-model="form.fHazardOutUniqueCode" placeholder="请输入自有编号" />
            </el-form-item>
          </el-col>

          <!--<el-col :span="12" v-if="form.fInsHazRefId">
            <el-form-item label="检查记录编码" prop="fCheckCode">
              <el-input disabled v-model="form.fCheckCode" placeholder="请输入检查记录编码" />
            </el-form-item>
          </el-col>-->

          <el-col :span="12">
            <el-form-item label="供气企业" prop="fInvolveEnterpriseCode">
              <el-select
                v-model="form.fInvolveEnterpriseCode"
                placeholder="请选择供气企业"
                style="width: 100%"
              >
                <el-option
                  v-for="enterprise in enterpriseList"
                  :key="enterprise.companyType"
                  :label="enterprise.enterpriseName"
                  :value="enterprise.companyType"
                />
              </el-select>
            </el-form-item>
          </el-col>

          <!--<el-col :span="12">
            <el-form-item label="检查对象分类" prop="fObjType">
              <el-select
                v-model="form.fObjType"
                placeholder="请选择检查对象分类"
                style="width: 100%"
              >
                <el-option
                  v-for="dict in fObjTypeOptions"
                  :key="dict.dictValue"
                  :label="dict.dictLabel"
                  :value="dict.dictValue"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="对象编码" prop="fObjCode">
              <el-input v-model="form.fObjCode" placeholder="请输入对象编码" />
            </el-form-item>
          </el-col>-->

          <el-col :span="12">
            <el-form-item label="行政区县级行政区" prop="fObjBelongRegionId">
              <el-select
                v-model="form.fObjBelongRegionId"
                placeholder="请选择县级行政区"
                style="width: 100%"
              >
                <el-option
                  v-for="county in countyInfo"
                  :key="county.fId"
                  :label="county.fName.trim()"
                  :value="county.fId"
                />
              </el-select>
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="监督检查时间" prop="fCheckTime">
              <el-date-picker
                style="width: 100%"
                v-model="form.fCheckTime"
                type="datetime"
                value-format="yyyy-MM-dd HH:mm:ss"
                placeholder="选择监督检查时间">
              </el-date-picker>
            </el-form-item>
          </el-col>


          <el-col :span="12">
            <el-form-item label="整改状态" prop="fRectificationStatus">
              <el-select
                v-model="form.fRectificationStatus"
                placeholder="请选择整改状态"
                style="width: 100%"
              >
                <el-option
                  v-for="dict in fRectificationStatusOptions"
                  :key="dict.dictValue"
                  :label="dict.dictLabel"
                  :value="dict.dictValue"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="整改资金/万元" prop="fRectificationFund">
              <el-input type="number" v-model="form.fRectificationFund" placeholder="请输入整改资金" />
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="整改完成日期" prop="fCompletionDate">
              <el-date-picker
                style="width: 100%"
                v-model="form.fCompletionDate"
                type="datetime"
                value-format="yyyy-MM-dd HH:mm:ss"
                placeholder="选择整改完成日期">
              </el-date-picker>
            </el-form-item>
          </el-col>

          <el-col :span="24">
            <el-form-item label="整改或管控措施描述" prop="fControlMeasure">
              <el-input type="textarea" v-model="form.fControlMeasure" placeholder="请输入整改或管控措施描述" />
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="隐患整改前照片">
              <imageUpload v-model="form.fBeforePicture"/>
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="隐患整改后照片">
              <imageUpload v-model="form.fAfterPicture"/>
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="是否执行" prop="fIsEnforcement">
              <el-select
                v-model="form.fIsEnforcement"
                placeholder="请选择是否执行"
                @change="isEnforcement"
                style="width: 100%"
              >
                <el-option label="是" value="1" />
                <el-option label="否" value="0" />
              </el-select>
            </el-form-item>
          </el-col>

          <el-col :span="12" v-if="form.fIsEnforcement == '1'">
            <el-form-item label="处罚措施" prop="fEnforcementType">
              <el-select
                v-model="form.fEnforcementType"
                placeholder="请选择处罚措施"
                style="width: 100%"
              >
                <el-option
                  v-for="dict in fEnforcementTypeOptions"
                  :key="dict.dictValue"
                  :label="dict.dictLabel"
                  :value="dict.dictValue"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="处罚金额/万元" prop="fPenaltyAmount"  v-if="form.fIsEnforcement == '1'">
              <el-input type="number" v-model="form.fPenaltyAmount" placeholder="请输入处罚金额/万元" />
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="执法日期" prop="fPenaltyDate" v-if="form.fIsEnforcement == '1'">
              <el-date-picker
                style="width: 100%"
                v-model="form.fPenaltyDate"
                type="date"
                value-format="yyyy-MM-dd"
                placeholder="选择执法日期">
              </el-date-picker>
            </el-form-item>
          </el-col>

          <el-col :span="24">
            <el-form-item label="其他执法情况说明" prop="fPenaltyDesc" v-if="form.fIsEnforcement == '1'">
              <el-input type="textarea" v-model="form.fPenaltyDesc" placeholder="请输入其他执法情况说明" />
            </el-form-item>
          </el-col>

        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>

    <InsRefDetailInfo ref="insRefDetail"/>
  </div>


</template>

<script>
  import ImageUpload from '@/components/ImageUpload';
  import { listRef, getRef, delRef } from "@/api/supervision/rectification";
  import { getDefaultCountyList } from "@/api/area/county";
  import { enterpriseListInfo } from "@/api/regulation/info";
  import InsRefDetailInfo from "./InsRefDetailInfo";
  export default {
    name: "rectification",
    props:{
      readOnly:{
        type: Boolean,
        default: false
      },
      fCheckCode:{
        type: String
      }
    },
    components:{
      ImageUpload,
      InsRefDetailInfo
    },
    data(){
        return{
          title: "",
          open: false,
          form:{},
          rules: {
            fHazardUniqueCode:[
              { required: true, message: "隐患唯一编码不能为空", trigger: "blur" }
            ],
            fCheckCode: [
              { required: true, message: "请选择检查记录编码", trigger: "change" }
            ],
            fObjBelongRegionId: [
              { required: true, message: "对象所在行政区，县级行政区ID不能为空", trigger: "blur" }
            ],
            fCheckTime: [
              { required: true, message: "监督检查时间不能为空", trigger: "blur" }
            ],
            fHazardTypeLevelId: [
              { required: true, message: "隐患分类分级编码不能为空", trigger: "blur" }
            ],
          },
          fObjTypeOptions:[],
          fRectificationStatusOptions:[],
          fEnforcementTypeOptions:[],
          loading: false,
          // 查询参数
          queryParams: {
            pageNum: 1,
            pageSize: 10,
            fCheckCode: null
          },
          refList:[],
          total: 0,
          countyInfo: [],
          enterpriseList: [],
          editIndex: -1
        }
    },
    created(){
      this.$parent.$parent.$parent.form.fHazardsNum = this.refList.length;
      if(this.fCheckCode){
        this.queryParams.fCheckCode = this.fCheckCode;
        this.getList();
      }
      this.getDicts("t_type_code").then(response => {
          this.fObjTypeOptions = response.data;
      });
      this.getDicts("t_rectification_status").then(response => {
          this.fRectificationStatusOptions = response.data;
      });
      this.getDicts("t_enforcement_type").then(response => {
          this.fEnforcementTypeOptions = response.data;
      });
      this.getCountyInfo();
    },
    methods:{
      // 检查对象分类
      fObjTypeFormat(row, column) {
        return this.selectDictLabel(this.fObjTypeOptions, row.fObjCode);
      },
      // 整改状态
      fRectificationStatusFormat(row, column) {
        return this.selectDictLabel(this.fRectificationStatusOptions, row.fRectificationStatus);
      },
      // 处罚措施
      fEnforcementTypeFormat(row, column) {
        return this.selectDictLabel(this.fEnforcementTypeOptions, row.fEnforcementType);
      },
      handleAddHidden(){
        this.reset();
        this.editIndex = -1;
        //this.getRecordList();
        this.getCountyInfo();
        this.getEnterpriseInfo();
        this.open = true;
        this.title = "添加隐患";
      },
      getList() {
        this.loading = true;
        listRef(this.queryParams).then(response => {
          this.refList = response.rows;
          this.total = response.total;
          this.loading = false;
        });
      },
      // 表单重置
      reset() {
        this.form = {
          fInsHazRefId: null,
          fHazardUniqueCode: null,
          fHazardOutUniqueCode: null,
          fCheckCode: null,
          fInvolveEnterpriseCode: null,
          fObjType: null,
          fObjCode: null,
          fObjBelongRegionId: null,
          fCheckTime: null,
          fHazardTypeLevelId: null,
          fHazardDesc: null,
          fRectificationStatus: '0',
          fRectificationFund: null,
          fCompletionDate: null,
          fControlMeasure: null,
          fBeforePicture: null,
          fAfterPicture: null,
          fIsEnforcement: null,
          fEnforcementType: null,
          fPenaltyAmount: null,
          fPenaltyDesc: null,
          fPenaltyDate: null,
          fRemark: null,
          fLastTime: null
        };
        this.resetForm("form");
      },
      submitForm(){
        if(this.editIndex > -1){
          this.refList[this.editIndex] = this.form;
        }else{
          this.form.fObjType = this.$parent.$parent.$parent.form.fObjectType;
          this.form.fObjCode = this.$parent.$parent.$parent.form.fObjectCode;
          this.refList.push(this.form);
        }
        this.$parent.$parent.$parent.form.rectificationList = this.refList;
        this.$parent.$parent.$parent.form.fHazardsNum = this.refList.length;
        this.open = false;
      },
      cancel(){
        this.open = false;
        this.reset();
      },
      handleUpdate(scope) {
        this.editIndex = scope.$index;
        this.reset();
        this.form = this.refList[scope.$index];
        this.getCountyInfo();
        this.getEnterpriseInfo();
        this.open = true;
        this.title = "修改隐患";
      },
      /** 删除按钮操作 */
      handleDelete(scope) {
        let that = this;
       // const fInsHazRefIds = row.fInsHazRefId || this.ids;
        this.$confirm('是否确认删除隐患唯一编号为'+ scope.row.fHazardUniqueCode +'的数据?', "警告", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }).then(function() {
          //return delRef(fInsHazRefIds);
         // this.msgSuccess("删除成功");
          that.refList.splice(scope.$index,1);
          that.$parent.$parent.$parent.form.rectificationList = that.refList;
          that.$parent.$parent.$parent.form.fHazardsNum = that.refList.length;
        }).catch((e) => {});
      },
      isEnforcement(val){
        if(val == '1'){
          this.form.fEnforcementType = null;
          this.form.fPenaltyAmount = null;
          this.form.fPenaltyDate = null;
          this.form.fPenaltyDesc = null;
        }
      },
      //获取县级
      getCountyInfo(){
        getDefaultCountyList().then(res =>{
          if(res.code == 200 && res.data){
            this.countyInfo =  res.data;
            const fRegionCode = this.$parent.$parent.$parent.form.fRegionCode;
            if(fRegionCode) this.form.fObjBelongRegionId = this.countyInfo.find(item => item.fCountyCode == fRegionCode).fId;
          }
        })
      },
      getEnterpriseInfo(){
        enterpriseListInfo().then(res =>{
          if(res.code == 200 && res.data){
             this.enterpriseList = res.data;
          }
        })
      },
      //详情
      handleDetail(row){
        this.$refs.insRefDetail.detailInfo = row;
        this.$refs.insRefDetail.detailOpen = true;
      },
    }
  }
</script>

<style scoped>

</style>
