<!-- 新增单位 -->
<template>
  <div class="L-assets-info">
    <div class="assets-info-top">
      <el-row style="margin: 10px 0;">
        <span class="top-title-box">基本信息</span>
      </el-row>
      <div class="assets-info-box">
        <el-form v-loading="loading" :model="ruleForm" :rules="rules" ref="ruleForm" label-width="170px" class="demo-ruleForm" label-position="right" :disabled="disabled">
          <el-row>
            <el-col :span="12">
              <el-form-item label="新增单位名称" required>
                <el-input v-model="ruleForm.nickName" placeholder="请输入单位名称"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="单位简称">
                <el-input v-model="ruleForm.dwjc" placeholder="请输入单位简称"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="所属区域" required>
                <el-cascader
                  size="large"
                  :props="props"
                  :options="options"
                  v-model="ruleForm.ssqy"
                >
                </el-cascader>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="单位详细地址" required>
                <el-input v-model="ruleForm.dwxxdz" placeholder="请输入单位详细地址"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="所属行业" required>
                <el-select v-model="ruleForm.sshy" placeholder="请选择所属行业">
                  <el-option
                    v-for="dict in dict.type.zc_xtzyx"
                    :key="dict.value"
                    :label="dict.label"
                    :value="dict.value"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="单位类型" required>
                <el-select v-model="ruleForm.dwlx" placeholder="请选择单位类型">
                  <el-option
                    v-for="dict in dict.type.dwlx"
                    :key="dict.value"
                    :label="dict.label"
                    :value="dict.value"
                  />
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="单位标签">
                <el-select v-model="ruleForm.dwbq" placeholder="请选择单位标签">
                  <el-option
                    v-for="dict in dict.type.zc_xtzyx"
                    :key="dict.value"
                    :label="dict.label"
                    :value="dict.value"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="所属监管单位">
                <el-input v-model="ruleForm.ssjgdw" placeholder="请输入监管单位"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="单位角色">
                <el-select v-model="ruleForm.dwjs" placeholder="请选择单位角色">
                  <el-option
                    v-for="dict in dict.type.dwjs"
                    :key="dict.value"
                    :label="dict.label"
                    :value="dict.value"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="单位直属性质">
                <el-select v-model="ruleForm.dwzsxz" placeholder="请选择单位直属性质">
                  <el-option
                    v-for="dict in dict.type.dwzsxz"
                    :key="dict.value"
                    :label="dict.label"
                    :value="dict.value"
                  />
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="统一社会信用代码" required prop="userName">
                <el-input v-model="ruleForm.userName" placeholder="请输入统一社会信用代码"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="是否关基单位">
                <el-select v-model="ruleForm.gjdw" placeholder="请选择是否关基单位">
                  <el-option
                    v-for="dict in dict.type.is_no"
                    :key="dict.value"
                    :label="dict.label"
                    :value="dict.value"
                  />
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="日常运营负责部门" required>
                <el-input v-model="ruleForm.rcyyfzbm" placeholder="请输入日常运营负责部门"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <!-- 联系人 -->
          <el-row style="margin: 10px 0;">
            <span class="top-title-box">联系人</span>
            <el-row>
              <el-col :span="24">
                <el-form-item label="单位负责人" required class="daoqitixingren">
                  <el-row>
                    <el-col :span="6">
                      <el-form-item prop="dwfzrxm">
                        <el-input v-model="ruleForm.dwfzrxm" style="width: 100%;" placeholder="请输入联系人"></el-input>
                      </el-form-item>
                    </el-col>
                    <el-col :span="6" style="margin-left: 10px;">
                      <el-form-item prop="dwfzrlxfs"
                        :rules="[
                          {
                            pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
                            message: '请输入正确的手机号码',
                            trigger: 'blur'
                          }
                        ]"
                      >
                        <el-input v-model="ruleForm.dwfzrlxfs" style="width: 100%;" placeholder="请输入联系方式"></el-input>
                      </el-form-item>
                    </el-col>
                    <el-col :span="6" style="margin-left: 10px;">
                      <el-form-item prop="dwfzryx"
                        :rules="[
                          {
                            type: 'email',
                            message: '请输入正确的邮箱地址',
                            trigger: ['blur', 'change']
                          }
                        ]"
                      >
                        <el-input v-model="ruleForm.dwfzryx" style="width: 100%;" placeholder="请输入邮箱"></el-input>
                      </el-form-item>
                    </el-col>
                    <el-col :span="6" style="margin-left: 10px;">
                      <el-form-item prop="dwfzrzwzc">
                        <el-input v-model="ruleForm.dwfzrzwzc" style="width: 100%;" placeholder="请输入职务职称"></el-input>
                      </el-form-item>
                    </el-col>
                  </el-row>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="24">
                <el-form-item label="分管负责人" class="daoqitixingren">
                  <el-row>
                    <el-col :span="6">
                      <el-form-item prop="fgfzrxm">
                        <el-input v-model="ruleForm.fgfzrxm" style="width: 100%;" placeholder="请输入联系人"></el-input>
                      </el-form-item>
                    </el-col>
                    <el-col :span="6" style="margin-left: 10px;">
                      <el-form-item prop="fgfzrlxfs"
                        :rules="[
                          {
                            pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
                            message: '请输入正确的手机号码',
                            trigger: 'blur'
                          }
                        ]"
                      >
                        <el-input v-model="ruleForm.fgfzrlxfs" style="width: 100%;" placeholder="请输入联系方式"></el-input>
                      </el-form-item>
                    </el-col>
                    <el-col :span="6" style="margin-left: 10px;">
                      <el-form-item prop="fgfzryx"
                        :rules="[
                          {
                            type: 'email',
                            message: '请输入正确的邮箱地址',
                            trigger: ['blur', 'change']
                          }
                        ]"
                      >
                        <el-input v-model="ruleForm.fgfzryx" style="width: 100%;" placeholder="请输入邮箱"></el-input>
                      </el-form-item>
                    </el-col>
                    <el-col :span="6" style="margin-left: 10px;">
                      <el-form-item prop="fgfzrzwzc">
                        <el-input v-model="ruleForm.fgfzrzwzc" style="width: 100%;" placeholder="请输入职务职称"></el-input>
                      </el-form-item>
                    </el-col>
                  </el-row>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="24">
                <el-form-item label="部门负责人" class="daoqitixingren">
                  <el-row>
                    <el-col :span="6">
                      <el-form-item prop="bmfzrxm">
                        <el-input v-model="ruleForm.bmfzrxm" style="width: 100%;" placeholder="请输入联系人"></el-input>
                      </el-form-item>
                    </el-col>
                    <el-col :span="6" style="margin-left: 10px;">
                      <el-form-item prop="bmfzrlxfs"
                        :rules="[
                          {
                            pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
                            message: '请输入正确的手机号码',
                            trigger: 'blur'
                          }
                        ]"
                      >
                        <el-input v-model="ruleForm.bmfzrlxfs" style="width: 100%;" placeholder="请输入联系方式"></el-input>
                      </el-form-item>
                    </el-col>
                    <el-col :span="6" style="margin-left: 10px;">
                      <el-form-item prop="bmfzryx"
                        :rules="[
                          {
                            type: 'email',
                            message: '请输入正确的邮箱地址',
                            trigger: ['blur', 'change']
                          }
                        ]"
                      >
                        <el-input v-model="ruleForm.bmfzryx" style="width: 100%;" placeholder="请输入邮箱"></el-input>
                      </el-form-item>
                    </el-col>
                    <el-col :span="6" style="margin-left: 10px;">
                      <el-form-item prop="bmfzrzwzc">
                        <el-input v-model="ruleForm.bmfzrzwzc" style="width: 100%;" placeholder="请输入职务职称"></el-input>
                      </el-form-item>
                    </el-col>
                  </el-row>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="24">
                <el-form-item label="第一联系人" class="daoqitixingren">
                  <el-row>
                    <el-col :span="6">
                      <el-form-item prop="dylxrxm">
                        <el-input v-model="ruleForm.dylxrxm" style="width: 100%;" placeholder="请输入联系人"></el-input>
                      </el-form-item>
                    </el-col>
                    <el-col :span="6" style="margin-left: 10px;">
                      <el-form-item prop="dylxrlxfs"
                        :rules="[
                          {
                            pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
                            message: '请输入正确的手机号码',
                            trigger: 'blur'
                          }
                        ]"
                      >
                        <el-input v-model="ruleForm.dylxrlxfs" style="width: 100%;" placeholder="请输入联系方式"></el-input>
                      </el-form-item>
                    </el-col>
                    <el-col :span="6" style="margin-left: 10px;">
                      <el-form-item prop="dylxryx"
                        :rules="[
                          {
                            type: 'email',
                            message: '请输入正确的邮箱地址',
                            trigger: ['blur', 'change']
                          }
                        ]"
                      >
                        <el-input v-model="ruleForm.dylxryx" style="width: 100%;" placeholder="请输入邮箱"></el-input>
                      </el-form-item>
                    </el-col>
                    <el-col :span="6" style="margin-left: 10px;">
                      <el-form-item prop="dylxrzwzc">
                        <el-input v-model="ruleForm.dylxrzwzc" style="width: 100%;" placeholder="请输入职务职称"></el-input>
                      </el-form-item>
                    </el-col>
                  </el-row>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="24">
                <el-form-item label="其他联系人" class="daoqitixingren" v-for="(domain, index) in ruleForm.otherConcat" :key="domain.key" :prop="'otherConcat.' + index + '.qtlxrlxfs'">
                  <el-row>
                    <el-col :span="6">
                      <el-form-item prop="name">
                        <el-input v-model="domain.qtlxrxm" style="width: 100%;" placeholder="请输入联系人"></el-input>
                      </el-form-item>
                    </el-col>
                    <el-col :span="6" style="margin-left: 10px;">
                      <el-form-item :prop="'otherConcat.' + index + '.qtlxrlxfs'"
                        :rules="[
                          {
                            pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
                            message: '请输入正确的手机号码',
                            trigger: 'blur'
                          }
                        ]"
                      >
                        <el-input v-model="domain.qtlxrlxfs" style="width: 100%;" placeholder="请输入联系方式"></el-input>
                      </el-form-item>
                    </el-col>
                    <el-col :span="6" style="margin-left: 10px;">
                      <el-form-item prop="qtlxryx"
                        :rules="[
                          {
                            type: 'email',
                            message: '请输入正确的邮箱地址',
                            trigger: ['blur', 'change']
                          }
                        ]"
                      >
                        <el-input v-model="domain.qtlxryx" style="width: 100%;" placeholder="请输入邮箱"></el-input>
                      </el-form-item>
                    </el-col>
                    <el-col :span="6" style="margin-left: 10px;">
                      <el-form-item prop="zhiwu">
                        <el-input v-model="domain.qtlxrzwzc" style="width: 100%;" placeholder="请输入职务职称"></el-input>
                      </el-form-item>
                    </el-col>
                    <el-col :span="1" style="text-align: center;">
                      <i @click="removeDomain(domain,'otherConcat')" class="el-icon-remove-outline" style="margin-left: 5px;font-size: 16px;cursor: pointer;"></i>
                    </el-col>
                  </el-row>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="24">
                <el-form-item prop="btn">
                  <el-button @click="addForm('otherConcat')">添加其他联系人</el-button>
                </el-form-item>
              </el-col>
            </el-row>
          </el-row>
          <!-- 检查信息 -->
          <el-row style="margin: 10px 0;">
            <span class="top-title-box">检查信息</span>
          </el-row>
          <div v-for="(domain, index) in ruleForm.jcxxList" :key="domain.key" :prop="'jcxxList.' + index + '.value'">
            <el-row style="display: flex;">
              <el-col :span="8">
                <el-form-item class="daoqitixingren" required :label="'时间' + (index == 0 ? '' : index)">
                  <el-date-picker
                    v-model="domain.sj"
                    type="date"
                    format="yyyy-MM-dd"
                    value-format="yyyy-MM-dd"
                    placeholder="选择日期">
                  </el-date-picker>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item class="daoqitixingren" :label="'系统域名' + (index == 0 ? '' : index)">
                  <el-input v-model="domain.tyshxydm" placeholder="请输入系统域名"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="7">
                <el-form-item class="daoqitixingren" :label="'系统名称' + (index == 0 ? '' : index)">
                  <el-input v-model="domain.lxdh" placeholder="请输入系统名称"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="1" style="text-align: center;">
                <i @click="addGongyinglian('jcxxList')" v-if="index == 0" class="el-icon-circle-plus-outline" style="margin-top: 10px;font-size: 16px;cursor: pointer;"></i>
                <i @click="removeDomain(domain,'jcxxList')" v-else class="el-icon-remove-outline" style="margin-top: 10px;font-size: 16px;cursor: pointer;"></i>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="8">
                <el-form-item :label="'等保级别' + (index == 0 ? '' : index)">
                  <el-select v-model="domain.dbjb" placeholder="请选择等保级别">
                    <el-option
                      v-for="dict in dict.type.dbxx_dbdj"
                      :key="dict.value"
                      :label="dict.label"
                      :value="dict.value"
                    />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item :label="'单位名称' + (index == 0 ? '' : index)">
                  <el-input v-model="domain.dwmc" placeholder="请输入单位名称"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="24">
                <el-form-item :label="'检查结果' + (index == 0 ? '' : index)">
                  <el-input type="textarea" resize="none" placeholder="请输入检查结果" :rows="5" v-model="domain.xgyw_ywms"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
          </div>
          <!-- 更多信息 -->
          <el-row style="margin: 10px 0;">
            <span class="top-title-box">更多信息</span>
          </el-row>
          <el-row>
            <el-col :span="8">
              <el-form-item label="官网">
                <el-input v-model="ruleForm.gw" placeholder="请输入官网"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="地图经度">
                <el-input v-model="ruleForm.dtjd" placeholder="请输入地图经度"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="地图纬度">
                <el-input v-model="ruleForm.dtwd" placeholder="请输入地图纬度"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="8">
              <el-form-item label="上级单位" required>
                <el-input v-model="ruleForm.sjdw" placeholder="请输入上级单位"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <el-form-item label="备注">
                <el-input type="textarea" resize="none" placeholder="请输入备注" :rows="5" v-model="ruleForm.remark"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row style="margin: 10px 0 ;padding-bottom: 50px; text-align: center;">
            <el-button type="danger" @click="cancel" :disabled="false">取消</el-button>
            <el-button type="primary" @click="newUnit" :disabled="false">确定</el-button>
          </el-row>
        </el-form>
      </div>
    </div>
  </div>
</template>
<script>
import pcas from "@/utils/pca-code.json"
import { lookUnit, postUnit } from "@/api/auditPagesApi/index";
export default {
  dicts:['zc_xtzyx', 'is_no', 'sshy', 'dwlx', 'dwjs', 'dwzsxz', 'dbxx_dbdj'],
  data() {
    const validateTyshxydm = (rule, value, callback) => {
      const pattern = /^[a-zA-Z0-9]{18}$/;
      if (!pattern.test(value)) {
        callback(new Error('请输入正确格式的18位统一社会信用代码'));
        return;
      } 
      callback();
      // if (value.length!== 18) {
      //   callback(new Error('请输入18位统一社会信用代码'));
      //   return;
      // } else {
      //   callback();
      // }
    }
    return {
      options: pcas ,
      props:{
        value:'value',
        label:"value",
        checkStrictly:true,
      },
      ruleForm:{
        // 其他联系人
        otherConcat:[
          {
            qtlxrxm: '',
            qtlxrlxfs: '',
            qtlxryx: '',
            qtlxrzwzc: '',
          }
        ],
        // 所属区域
        ssqy:[],
        // 检查信息
        jcxxList:[
          {
            name:"",
            tyshxydm:"",
            lxdh:"",
          }
        ],
      },
      rules:{
        userName: [
          { required: true, trigger: "blur" ,validator: validateTyshxydm},
        ]
      },
      disabled:false,
      loading:false,
    }
  },
  mounted(){
    if(this.$route.query.pageType == 'look') {
      this.getInfo(this.$route.query.id)
      this.disabled = true;
    } else if(this.$route.query.pageType == 'change') {
      this.getInfo(this.$route.query.id)
      this.disabled = false;
    }
  },
  methods:{
    getInfo(id){
      this.loading = true;
      lookUnit(id).then(res=>{
        this.ruleForm = res.data;
        if(res.data.ssqyprovince && res.data.ssqycity && res.data.ssqycounty) {
          this.$set(this.ruleForm, 'ssqy', [res.data.ssqyprovince,res.data.ssqycity,res.data.ssqycounty])
        } else if(res.data.ssqyprovince && res.data.ssqycity) {
          this.$set(this.ruleForm, 'ssqy', [res.data.ssqyprovince,res.data.ssqycity])
        } else if(res.data.ssqyprovince) {
          this.$set(this.ruleForm, 'ssqy', [res.data.ssqyprovince])
        }
        this.loading = false;
      })
    },
    // 新增form
    addForm(type){
      this.ruleForm[type].push({
        qtlxrxm: '',
        qtlxrlxfs: '',
        qtlxryx: '',
        qtlxrzwzc: '',
        key: Date.now()
      });
    },
    // 供应链Form新增
    addGongyinglian(type){
      this.ruleForm[type].push({
        sj:"",
        xtym:"",
        xthc:"",
        dbjb:"",
        dwmc:"",
        jcjg:"",
        key: Date.now()
      });
    },
    // 删除增加的form
    removeDomain(item,type) {
      var index = this.ruleForm[type].indexOf(item)
      if (index !== -1) {
        this.ruleForm[type].splice(index, 1)
      }
    },
    newUnit(){
      if(this.$route.query.pageType == 'look') {
        this.$router.go(-1);
        return;
      }
      if(this.ruleForm.ssqy.length > 0) {
        this.ruleForm.ssqyprovince = this.ruleForm.ssqy[0]
        this.ruleForm.ssqycity = this.ruleForm.ssqy[1]
        this.ruleForm.ssqycounty = this.ruleForm.ssqy[2]
      }
      this.loading = true;
      if(this.$route.query.pageType == 'change') {
        postUnit('put',this.ruleForm).then(res=>{
          this.loading = false;
          this.$modal.msgSuccess("修改成功");
          this.$router.go(-1);
        }).catch(err=>{
          this.loading = false;
        })
      } else if(this.$route.query.pageType == 'add') {
        postUnit('post',this.ruleForm).then(res=>{
          this.loading = false;
          this.$modal.msgSuccess("新增成功");
          this.$router.go(-1);
        }).catch(err=>{
          this.loading = false;
        })
      }
    },
    cancel(){
      this.$router.go(-1);
    },
  },
  beforeRouteEnter(to,from,next){
    if(to.query.pageType == 'add') {
      to.meta.title = '新增单位'
    } else if(to.query.pageType == 'change') {
      to.meta.title = '修改单位'
    } else if(to.query.pageType == 'look') {
      to.meta.title = '单位详情'
    }
    next();
  },
}
</script>