<!--
  @description: 联系人信息
  @author: change by sunxinman
  @routerPath: /systemManagement/addOrganization/contactInformation
  @date:  2019/11/16-23:33
-->
<template>
  <div>
    <el-form ref="form" :model="formData" :rules="itemRules" label-width="160px">
      <div v-for="(item,index) in formData.linkerlist" :key="index">
        <div style="height:40px;">
          <span class="fl fs">联系人{{ index+1 }}</span>
          <span class="iconfont icon-guanbi fr cq" @click="eliminate(index)">清除</span>
        </div>
        <div style="border-bottom:1px solid #EDF0F5">
          <el-row :gutter="40">
            <el-col :lg="12" :xl="12" :md="12" :sm="12">
              <el-form-item
                ref="linkname"
                :rules="itemRules.linkname"
                :prop="`linkerlist.${index}.linkname`"
                label="联系人姓名"
              >
                <el-input v-model="item.linkname" placeholder="请输入联系人姓名" />
              </el-form-item>
              <el-form-item
                ref="linkerID"
                :rules="itemRules.linkerID"
                :prop="`linkerlist.${index}.linkerID`"
                label="身份证"
              >
                <el-input v-model="item.linkerID" placeholder="请输入联系人身份证号" />
              </el-form-item>
              <el-form-item
                ref="email"
                :rules="itemRules.email"
                :prop="`linkerlist.${index}.email`"
                label="电子邮箱"
              >
                <el-input v-model="item.email" placeholder="请输入联系人电子邮箱" />
              </el-form-item>
            </el-col>
            <el-col :lg="12" :xl="12" :md="12" :sm="12">
              <el-form-item
                ref="linktel"
                :rules="itemRules.linktel"
                :prop="`linkerlist.${index}.linktel`"
                label="联系电话"
              >
                <el-input v-model="item.linktel" placeholder="请输入联系人电话" />
              </el-form-item>
              <el-form-item
                ref="address"
                :rules="itemRules.address"
                :prop="`linkerlist.${index}.address`"
                label="联系地址"
              >
                <el-input v-model="item.address" placeholder="请输入联系人地址" />
              </el-form-item>
              <el-form-item
                ref="linkPostCode"
                :rules="itemRules.linkPostCode"
                :prop="`linkerlist.${index}.linkPostCode`"
                label="邮政编码"
              >
                <el-input v-model="item.linkPostCode" placeholder="请输入联系人邮政编码" />
              </el-form-item>
            </el-col>
          </el-row>
        </div>
      </div>
      <div class="add_lxr">
        <span class="iconfont icon-tianjia1" @click="addContact">添加联系人</span>
      </div>
    </el-form>

    <div class="but_footer">
      <div class="but_footer-h">
        <div class="but_footer-but">
          <el-button type="primary" @click="submitForm('form')">
            保存
          </el-button>
          <el-button @click="lastStep">
            上一步
          </el-button>
          <el-button @click="nextStep('form')">
            下一步
          </el-button>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { getDepartInfo, saveDepartLinker } from '@/api/rolemanagment/organization'
import { characters1_50, checkLinktel, checkCode, email, makeSureId } from '@/assets/js/validate'

export default {
  data() {
    return {
      formData: {
        departId: '', // 机构Id
        linkerlist: [
          {
            address: '', // 联系地址
            createBy: '',
            createDate: '',
            createName: '',
            departId: '', // 机构ID
            departName: '',
            email: '', // 电子邮箱
            id: '',
            linkPostCode: '', // 邮政编码
            linkerID: '', // 身份证
            linkname: '', // 联系人姓名
            linktel: ''// 联系电话
          }
        ]
      },
      itemRules: {
        linkname: [{ required: true, validator: characters1_50, trigger: 'blur' }],
        email: [{ required: true, validator: email, trigger: 'blur' }],
        linktel: [{ required: true, validator: checkLinktel, trigger: 'blur' }],
        linkerID: [{ required: true, validator: makeSureId, trigger: 'blur' }],
        linkPostCode: [{ required: true, validator: checkCode, trigger: 'blur' }],
        address: [{ required: true, validator: characters1_50, trigger: 'blur' }]
      }
    }
  },
  created() {
    this.departId = this.$route.query.departId
  },
  mounted() {
    const data = {
      departId: this.departId
    }
    getDepartInfo(data).then(response => {
      this.formData.linkerlist = response.data.linkerlist
    }).catch(res => {

    })
  },
  methods: {
    // 清除联系人
    eliminate(index) {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.formData.linkerlist.splice(index, 1)
        this.$message({
          type: 'success',
          message: '删除成功!'
        })
      }).catch(() => {
      })
    },
    // 添加联系人
    addContact() {
      this.formData.linkerlist.push({
        address: '', // 联系地址
        createBy: '',
        createDate: '',
        createName: '',
        departId: '', // 机构ID
        departName: '',
        email: '', // 电子邮箱
        id: '',
        linkPostCode: '', // 邮政编码
        linkerID: '', // 身份证
        linkname: '', // 联系人姓名
        linktel: ''// 联系电话
      })
    },
    // 保存联系人
    submitForm() {
      this.$confirm('确认保存？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        confirmButtonClass: 'confirmBtn',
        cancelButtonClass: 'cancelBtn',
        type: 'warning'
      }).then(() => {
        this.formData.departId = this.$route.query.departId
        saveDepartLinker(this.formData).then(response => {
          this.$message({
            type: 'success',
            message: '保存成功!'
          })
        }).catch(res => {

        })
      }).catch(() => {
      })
    },
    // 上一步
    lastStep() {
      const pathData = {
        departId: this.$route.query.departId
      }
      this.$emit('stepPage', 0, pathData)
    },
    // 下一步
    nextStep(formName) {
      this.formData.departId = this.$route.query.departId
      this.$refs[formName].validate((valid) => {
        if (valid) {
          saveDepartLinker(this.formData).then(response => {
            if (response.header.ret === '0') {
              const pathData = {
                departId: this.$route.query.departId
              }
              this.$emit('stepPage', 2, pathData)
            }
          }).catch(res => {

          })
        }
      })
    }
  }
}
</script>
<style lang="less" scoped>

.fs {
  font-size: 16px;
  color: #333333;
}

.cq {
  font-size: 14px;
  color: #909399;

  &:before {
    content: "\e62e";
    font-size: 8px;
    margin-right: 6px;
  }
}

.add_lxr {
  height: 80px;
  margin-top: 16px;
  background-color: #f7f9fc;
  border: 1px dashed #dcdfe6;
  text-align: center;

  span {
    font-size: 16px;
    color: #606266;
    line-height: 80px;

    &:before {
      content: "\e636";
      font-size: 24px;
      margin-right: 16px;
      color: #abb0b7;
      vertical-align: bottom;
    }
  }
}
</style>
