<template>
  <div id="">
    <a-layout>
      <a-layout-content style="border:1px solid #d5d5ff;margin-left:5px;padding:0px;overflow: auto;">
        <p style="font-weight:bolder;background-color:#d5d5ff;padding:3px;margin-bottom: 20px">信息填报</p>
        <a-form :model="formObj" :label-col="{ span: 10 }" :wrapper-col="{ span: 14 }" :rules="rules">
          <p style="margin-top:10px;margin-bottom: 10px;overflow: hidden;">
            <a-icon type="caret-right" />
            <span style="width:120px;padding-left: 10px">现场督查</span>
            <span class="hrs"></span>
          </p>
          <a-form-item label="疏浚采砂项目（活动）获发改（水利、交通）等部门立项批准" required>
            <a-radio-group v-model:value="formObj.isAppWt">
              <a-radio value="1">是</a-radio>
              <a-radio value="2">否</a-radio>
              <a-button v-if="formObj.isAppWt == '2'" type="link" @click="addProblem('isAppWt')">
                <a-icon type="plus-circle" theme="filled" />
              </a-button>
              <a-icon @click="showPic('isAppWt')" type="camera" />
            </a-radio-group>
          </a-form-item>
          <a-form-item label="立项批准单位" v-if="formObj.isAppWt == '1'">
            <a-input v-model:value="formObj.appWtDep" autocomplete="off" style="width:200px"/>
          </a-form-item>

          <a-form-item label="疏浚采砂项目（活动）获环评批准" required>
            <a-radio-group v-model:value="formObj.isAppEvn">
              <a-radio value="1">是</a-radio>
              <a-radio value="2">否</a-radio>
              <a-button v-if="formObj.isAppEvn == '2'" type="link" @click="addProblem('isAppEvn')">
                <a-icon type="plus-circle" theme="filled" />
              </a-button>
              <a-icon @click="showPic('isAppEvn')" type="camera" />
            </a-radio-group>
          </a-form-item>
          <a-form-item label="批准单位" v-if="formObj.isAppEvn == '1'">
            <a-input v-model:value="formObj.appEvnDep" autocomplete="off" style="width:200px" />
          </a-form-item>

          <a-form-item label="疏浚采砂项目（活动）获防洪评价批准" required>
            <a-radio-group v-model:value="formObj.isAppRsfco">
              <a-radio value="1">是</a-radio>
              <a-radio value="2">否</a-radio>
              <a-button v-if="formObj.isAppRsfco == '2'" type="link" @click="addProblem('isAppRsfco')">
                <a-icon type="plus-circle" theme="filled" />
              </a-button>
              <a-icon @click="showPic('isAppRsfco')" type="camera" />
            </a-radio-group>
          </a-form-item>
          <a-form-item label="批准单位" v-if="formObj.isAppRsfco == '1'">
            <a-input v-model:value="formObj.appRsfcoDep" autocomplete="off" style="width:200px" />
          </a-form-item>

          <a-form-item label="疏浚采砂项目（活动）批准日期是否存在逾期开采" required>
            <a-radio-group v-model:value="formObj.isExpDue">
              <a-radio value="1">是</a-radio>
              <a-radio value="2">否</a-radio>
              <a-button v-if="formObj.isExpDue == '2'" type="link" @click="addProblem('isExpDue')">
                <a-icon type="plus-circle" theme="filled" />
              </a-button>
            </a-radio-group>
          </a-form-item>
          <a-form-item label="批准疏浚日期" v-if="formObj.isExpDue == '1'">
            <a-date-picker v-model:value="formObj.expDueDt" placeholder="批准疏浚日期"></a-date-picker>
          </a-form-item>

          <a-form-item label="疏浚采砂项目（活动）实际疏浚砂石总量是否超过批准疏浚砂石总量" required>
            <a-radio-group v-model:value="formObj.isAppStnd">
              <a-radio value="1">是</a-radio>
              <a-radio value="2">否</a-radio>
              <a-button v-if="formObj.isAppStnd == '1'" type="link" @click="addProblem('isAppStnd')">
                <a-icon type="plus-circle" theme="filled" />
              </a-button>
            </a-radio-group>
          </a-form-item>
          <a-form-item label="批准疏浚砂石总量(万方)">
            <a-input v-model:value="formObj.appStnd" autocomplete="off" style="width:200px" />
          </a-form-item>
          <a-form-item label="实际疏浚砂石总量(万方)">
            <a-input v-model:value="formObj.realStnd" autocomplete="off" style="width:200px" />
          </a-form-item>

          <a-form-item label="疏浚采砂项目（活动）砂石上岸综合利用是否已实施" required>
            <a-radio-group v-model:value="formObj.isAct">
              <a-radio value="1">是</a-radio>
              <a-radio value="2">否</a-radio>
              <a-button v-if="formObj.isAct == '2'" type="link" @click="addProblem('isAct')">
                <a-icon type="plus-circle" theme="filled" />
              </a-button>
            </a-radio-group>
          </a-form-item>

          <a-form-item label="疏浚采砂项目（活动）砂石上岸综合利用是否编制砂石综合利用实施方案" required>
            <a-radio-group v-model:value="formObj.isSynAct">
              <a-radio value="1">是</a-radio>
              <a-radio value="2">否</a-radio>
              <a-button v-if="formObj.isSynAct == '2'" type="link" @click="addProblem('isSynAct')">
                <a-icon type="plus-circle" theme="filled" />
              </a-button>
              <a-icon @click="showPic('isSynAct')" type="camera" />
            </a-radio-group>
          </a-form-item>

          <a-form-item label="砂石综合利用实施方案获水行政主管部门审查批准" required>
            <a-radio-group v-model:value="formObj.isAppWtdep">
              <a-radio value="1">是</a-radio>
              <a-radio value="2">否</a-radio>
              <a-button v-if="formObj.isAppWtdep == '2'" type="link" @click="addProblem('isAppWtdep')">
                <a-icon type="plus-circle" theme="filled" />
              </a-button>
              <a-icon @click="showPic('isAppWtdep')" type="camera" />
            </a-radio-group>
          </a-form-item>
          <a-form-item label="水行政主管部门审查批准单位" v-if="formObj.isAppWtdep == '1'">
            <a-input v-model:value="formObj.appWtdep" autocomplete="off" style="width:200px" />
          </a-form-item>

          <a-form-item label="砂石综合利用实施方案是否存在越权批准（标准：省管河道由省水利厅审批，其他河道由设区市或直管试点县审批）" required>
            <a-radio-group v-model:value="formObj.isUltra">
              <a-radio value="1">是</a-radio>
              <a-radio value="2">否</a-radio>
              <a-button v-if="formObj.isUltra == '2'" type="link" @click="addProblem('isUltra')">
                <a-icon type="plus-circle" theme="filled" />
              </a-button>
            </a-radio-group>
          </a-form-item>

          <a-form-item label="砂石综合利用实施方案是否征求同级交通、公安、自然资源、农业、林业、生态环境等部门意见" required>
            <a-radio-group v-model:value="formObj.isAskIdea">
              <a-radio value="1">是</a-radio>
              <a-radio value="2">否</a-radio>
              <a-button v-if="formObj.isAskIdea == '2'" type="link" @click="addProblem('isAskIdea')">
                <a-icon type="plus-circle" theme="filled" />
              </a-button>
              <a-icon @click="showPic('isAskIdea')" type="camera" />
            </a-radio-group>
          </a-form-item>

          <a-form-item label="综合利用砂石运砂车辆或船舶是否执行河道砂石采运管理单制度" required>
            <a-radio-group v-model:value="formObj.isActSys">
              <a-radio value="1">是</a-radio>
              <a-radio value="2">否</a-radio>
              <a-button v-if="formObj.isActSys == '2'" type="link" @click="addProblem('isActSys')">
                <a-icon type="plus-circle" theme="filled" />
              </a-button>
              <a-icon @click="showPic('isActSys')" type="camera" />
            </a-radio-group>
          </a-form-item>
          <a-form-item label="项目（活动）进展情况">
            <a-input v-model:value="formObj.progress" autocomplete="off" style="width:200px" />
          </a-form-item>
          <a-form-item :wrapper-col="{ span: 10, offset: 14 }">
            <a-button type="primary" @click="addHandler" v-if="openType">保 存</a-button>
          </a-form-item>
        </a-form>
      </a-layout-content>
      <problem-dialog
        v-if="showAddProblemDialog && openType"
        :objType="52"
        :villType="52"
        :objId="currentObjectId"
        :objName="currentObjectName"
        :problemMiddleType="'疏浚沙石'"
        :problData="probId"
        @closeDialog="closePlDialog"
        :currentObjectRgstrId="currentObjectRgstrId"></problem-dialog>
      <add-pic-com
        v-if="jqmmDialogShow"
        :dialogTitle="'相关材料'"
        :jqmmEngId="id"
        :type="type"
        :openType="openType"
        @jqmmDialogClose="jqmmDialogClose"></add-pic-com>
    </a-layout>
  </div>
</template>

<script>
import { getRgstridDinasScenc } from '../../../api/duChaTianBao';
import request from '../../../utils/gw_ajax_request';
import { formatDateTimeD } from '../../../utils/gw_date.js';
import inputWith from '../../../widgets/inuptWith.vue';
import problemDialog from '../../duChaWenTi/problemDialog.vue';
import addPicCom from './addPic.vue';
export default {
  components: {
    inputWith: inputWith,
    problemDialog,
    addPicCom,
  },
  props: [
    'currentObjectId',
    'currentObjectName',
    'currentObjectRgstrId',
    'openType',
  ],
  data() {
    var checkTel = (rule, value, callback) => {
      var isPhone = /^([0-9]{3,4}-)?[0-9]{7,8}$/; // 座机
      var isMob = /^[1][3,4,5,7,8][0-9]{9}$/; // 座机格式
      if (value && !isMob.test(value) && !isPhone.test(value)) {
        callback(new Error('请输入合理电话'));
      } else if (value && (isMob.test(value) || isPhone.test(value))) {
        callback();
      }
      // setTimeout(() => {

      // }, 1000);
    };
    return {
      id: '',
      objtbStatu: {
        scencState: '',
        rgstrId: '',
        id: '',
        state: '',
      },
      rules: {
        wiunWaoLegPersTel: [{ validator: checkTel, trigger: 'blur' }],
        techPersTel: [{ validator: checkTel, trigger: 'blur' }],
        patrolPersTel: [{ validator: checkTel, trigger: 'blur' }],
      },
      jqmmDialogShow: false,
      type: '',
      formObj: {
        isAppWt: '',
        appWtDep: '',
        isAppEvn: '',
        appEvnDep: '',
        isAppRsfco: '',
        appRsfcoDep: '',
        isExpDue: '',
        expDueDt: '',
        isAppStnd: '',
        appStnd: '',
        realStnd: '',
        isAct: '',
        isSynAct: '',
        isAppWtdep: '',
        appWtdep: '',
        isUltra: '',
        isAskIdea: '',
        isActSys: '',
        progress: '',
      },
      dialogFormVisible: false,
      formLabelWidth: '180px',
      loading: true,
      operationType1: '',
      rsvrRules: null,
      probId: '',
      showAddProblemDialog: false,
    };
  },
  computed: {
    recPersId() {
      return localStorage.getItem('persId')
        ? localStorage.getItem('persId')
        : '';
    },
  },
  created() {
    this.findItemByType();
  },
  mounted() {
    this.getRgstridObj();
  },
  watch: {
    currentObjectRgstrId(n, o) {
      this.getRgstridObj();
    },
  },
  methods: {
    jqmmDialogClose() {
      this.jqmmDialogShow = false;
    },
    showPic(type) {
      this.type = type;
      this.jqmmDialogShow = true;
    },
    getRgstridObj() {
      getRgstridDinasScenc(this.currentObjectRgstrId).then((res) => {
        //  res.data.dutyId去掉dutyId解决dutyId为空时不显示三个责任人
        if (res.data && Object.keys(res.data).length) {
          this.formObj = res.data;
          this.operationType1 = 'update';
          this.id = res.data.id;
        } else {
          this.formObj = {};
          this.operationType1 = 'add';
        }
      });
    },
    addHandler() {
      this.formObj['rgstrId'] = this.currentObjectRgstrId;
      this.formObj['recPersId'] = this.recPersId;
      this.objtbStatu.rgstrId = this.currentObjectRgstrId;
      this.objtbStatu.id = this.currentObjectRgstrId;

      if (
        this.formObj.isAppWt != null &&
        this.formObj.isAppEvn != null &&
        this.formObj.isAppRsfco != null &&
        this.formObj.isExpDue != null &&
        this.formObj.isAppStnd != null &&
        this.formObj.isAct != null &&
        this.formObj.isSynAct != null &&
        this.formObj.isAppWtdep != null &&
        this.formObj.isUltra != null &&
        this.formObj.isAskIdea != null &&
        this.formObj.isActSys != null
      ) {
        this.formObj['state'] = '2';
        this.objtbStatu.scencState = '2';
        this.objtbStatu.state = '1';
      } else if (
        this.formObj.isAppWt == null &&
        this.formObj.isAppEvn == null &&
        this.formObj.isAppRsfco == null &&
        this.formObj.isExpDue == null &&
        this.formObj.isAppStnd == null &&
        this.formObj.isAct == null &&
        this.formObj.isSynAct == null &&
        this.formObj.isAppWtdep == null &&
        this.formObj.isUltra == null &&
        this.formObj.isAskIdea == null &&
        this.formObj.isActSys == null
      ) {
        this.objtbStatu.scencState = '0';
        this.formObj['state'] = '0';
      } else {
        this.objtbStatu.scencState = '1';
        this.objtbStatu.state = '1';
        this.formObj['state'] = '1';
      }
      this.$confirm({
        title: '提示',
        content: '确认保存现场督察情况信息？',
        okType: 'warning',
        onOk: () => {
          if (this.operationType1 == 'add') {
            try {
              request
                .post('/bis/insp/dinas/scenc/add', this.formObj)
                .then((res) => {
                  if (res.success) {
                    this.$message.success('添加成功');
                    request
                      .post('/bis/insp/dinas/update', this.objtbStatu)
                      .then((res) => {
                        res;
                      });
                    this.$emit('addShuiKuSuccess');
                  }
                });
            } catch (e) {}
          } else if (this.operationType1 == 'update') {
            try {
              request
                .post('/bis/insp/dinas/scenc/update', this.formObj)
                .then((res) => {
                  if (res.success) {
                    this.$message.success('修改成功');
                    request
                      .post('/bis/insp/dinas/update', this.objtbStatu)
                      .then((res) => {
                        res;
                      });
                    this.$emit('addShuiKuSuccess');
                  }
                });
            } catch (e) {}
          }
        },
      });
    },
    cancelHandler() {
      this.$emit('cancelHandler');
    },
    findItemByType() {
      const obj = {
        tname: 'BIS_INSP_DINAS_SCENC',
      };
      request
        .post('/bis/insp/item/ques/info/findItemByType', obj)
        .then((res) => {
          this.rsvrRules = res.data;
        });
    },
    addProblem(item) {
      const rest = this.rsvrRules.filter((e) => {
        return e.eName === item;
      });
      this.probId = rest[0].id;
      this.showAddProblemDialog = true;
    },
    formatRadio(val) {
      if (val == '1') {
        return '是';
      } else if (val == '2') {
        return '否';
      } else {
        return val;
      }
    },
    closePlDialog(val) {
      this.showAddProblemDialog = false;
    },
  },
};
</script>

<style lang='less' scoped>
#dcdxHeader {
  padding: 15px 20px;
}

#dxdcFooter {
  text-align: center;
}

#dxdcAside {
  border: 1px solid #d5d5ff;
}

.el-dialog__wrapper .el-treeWhite {
  /* max-height: 260px !important; */
}

.add-problem-icon {
  font-size: 16px;
}

.el-icon-camera-solid,
.el-icon-circle-plus {
  margin-left: 20px;
  color: #00bbff;
  font-size: 18px;
  line-height: 12px;
  vertical-align: middle;
  cursor: pointer;
}

.el-icon-circle-plus {
  vertical-align: top;
}

.tip_info {
  margin-left: 20px;
  font-size: 12px;
  color: #ff0000;
}
</style>
