<!--
  @description: 招标-邀请函-联系方式
  @Modifier: 肖文龙/haoFx
  @routerPath: /bidding/projectDrive/invitation/tabs/invitationContactInformation-add
  @date: 2020/1/2-10:14
-->
<template>
  <div>
    <div>
      <div style="width: 90%;margin-left: 4%;">
        <el-form
          ref="form"
          :model="formData"
          :rules="rules"
          label-width="140px"
        >
          <!-----------------招标人信息-------------------->
          <el-row>
            <div class="mb16">
              招标人信息
            </div>
            <el-col :span="12">
              <!--招标人名称-->
              <el-form-item
                ref="buyersName"
                label="招标人"
                prop="buyersName"
              >
                <el-input v-model.trim="formData.buyersName" placeholder="请输入" style="width: calc(100%)" disabled />
              </el-form-item>
              <!--招标人联系方式-->
              <el-form-item ref="buyersLinkerTel" label="电话" prop="buyersLinkerTel">
                <el-input v-model.trim="formData.buyersLinkerTel" maxlength="400" placeholder="请输入" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <!--招标人联系人名称-->
              <el-form-item
                ref="buyersLinkerName"
                label="联系人"
                prop="buyersLinkerName"
              >
                <el-input v-model.trim="formData.buyersLinkerName" maxlength="20" placeholder="请输入" />
              </el-form-item>
              <!--招标人邮箱-->
              <el-form-item ref="buyersLinkerEmail" label="邮箱" prop="buyersLinkerEmail">
                <el-input v-model.trim="formData.buyersLinkerEmail" maxlength="100" placeholder="请输入" />
              </el-form-item>
            </el-col>
            <el-col>
              <!--招标人联系地址-->
              <el-form-item ref="buyersLinkerAddress" label="地址" prop="buyersLinkerAddress">
                <el-input v-model.trim="formData.buyersLinkerAddress" maxlength="200" placeholder="请输入" />
              </el-form-item>
            </el-col>
          </el-row>
          <!-----------------招标代理机构信息-------------------->
          <el-row v-if="formData.tenderOrgMethod ==='01'">
            <div class="mb16">
              招标代理机构
            </div>
            <el-col :span="12">
              <!--代理机构名称-->
              <el-form-item ref="agentName" label="代理机构" prop="agentName">
                <el-input v-model.trim="formData.agentName" placeholder="请输入" style="width: calc(100%)" disabled />
              </el-form-item>
              <!-- 招标代理机构联系电话 -->
              <el-form-item ref="agentLinkerTel" label="电话" maxlength="400" prop="agentLinkerTel">
                <el-input v-model.trim="formData.agentLinkerTel" placeholder="请输入" style="width: calc(100% - 122px)" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <!-- 代理机构联系人 -->
              <el-form-item ref="agentLinkerName" label="联系人" prop="agentLinkerName">
                <el-input v-model.trim="formData.agentLinkerName" maxlength="20" placeholder="请输入" />
              </el-form-item>
              <!--  招标代理电子邮箱 -->
              <el-form-item ref="agentLinkerEmail" label="邮箱" prop="agentLinkerEmail">
                <el-input v-model.trim="formData.agentLinkerEmail" maxlength="100" placeholder="请输入" />
              </el-form-item>
            </el-col>
            <el-col>
              <!-- 代理联系地址 -->
              <el-form-item ref="agentLinkerAddress" label="地址" prop="agentLinkerAddress">
                <el-input v-model.trim="formData.agentLinkerAddress" maxlength="200" placeholder="请输入" />
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
    </div>
    <!--保存按钮-->
    <div class="but_footer">
      <div class="but_footer-h" />
      <div class="but_footer-but">
        <el-button @click="prevStep">
          上一步
        </el-button>
        <el-button :loading="confirmLoading" type="primary" @click="nextStep('form')">
          暂存，进入下一步
        </el-button>
      </div>
    </div>
  </div>
</template>

<script>
/* 接口*/
import { queryInvitationContactInformation, saveBulletinContactInformation } from '@/api/bidding/bidInvitation'
/* 公用方法*/
import { characters1_auto, checkLinktel, linkerName, email, validateInput } from '@/assets/js/validate'// 校验输入内容
export default {
  name: 'BulletinContactInformationAdd',
  data() {
    return {
      confirmLoading: false, // 暂存Loding
      // 相关机构信息
      formData: {
        tenderOrgMethod: '', // 组织形式 01 委托招标 00 自主招标
        agentCode: '', // 招标代理机构代码
        agentId: '', // 代理机构Id
        agentLinkerAddress: '', // 招标代理联系地址
        agentLinkerEmail: '', // 招标代理电子邮箱
        agentLinkerName: '', // 招标代理机构联系人
        agentLinkerTel: '', // 招标代理机构联系电话(多个电话用英文逗号隔开)
        agentName: '', // 招标代理机构名称
        invitationId: this.$route.query.invitationId, // 公告id
        buyersCode: '', // 招标人代码
        buyersId: '', // 招标人id
        buyersLinkerAddress: '', // 招标人联系地址
        buyersLinkerEmail: '', // 招标人电子邮箱
        buyersLinkerName: '', // 招标人联系人
        buyersLinkerTel: '', // 招标人联系电话(多个电话用英文逗号隔开)
        buyersName: '' // 招标人名称
      },

      // 校验输入内容
      rules: {
        buyersName: [{ required: true, validator: characters1_auto, trigger: 'blur' }], // 招标人名称
        buyersCode: [{ required: true, validator: characters1_auto, trigger: 'blur' }], // 招标人编码
        buyersLinkerName: [{ required: true, validator: linkerName, trigger: 'blur' }, { validator: validateInput }], // 招标人-联系人
        buyersLinkerTel: [{ required: true, validator: checkLinktel, trigger: 'blur' }], // 招标人联系电话
        buyersLinkerEmail: [{ required: true, validator: email, trigger: 'blur' }], // 招标人邮箱
        buyersLinkerAddress: [{ required: true, validator: characters1_auto, trigger: 'blur' }], // 招标人地址

        agentName: [{ required: true, validator: characters1_auto, trigger: 'blur' }], // 招标代理机构名称
        agentCode: [{ required: true, validator: characters1_auto, trigger: 'blur' }], // 招标代理机构编码
        agentLinkerName: [{ required: true, validator: linkerName, trigger: 'blur' }, { validator: validateInput }], // 招标代理机构-联系人
        agentLinkerTel: [{ required: true, validator: checkLinktel, trigger: 'blur' }], // 招标代理机构联系电话
        agentLinkerEmail: [{ required: true, validator: email, trigger: 'blur' }], // 招标代理机构邮箱
        agentLinkerAddress: [{ required: true, validator: characters1_auto, trigger: 'blur' }] // 招标代理机构地址
      }
    }
  },
  created() {
    this.initData(this.formData.invitationId)// 加载数据/初始化
  },
  methods: {
    // 获取联系方式
    initData(invitationId) {
      if (!invitationId) return
      queryInvitationContactInformation(invitationId).then((response) => {
        this.formData = Object.assign(this.formData, response.data)
      })
    },
    // 保存数据接口 暂存，下一步
    saveData(type) {
      this.confirmLoading = true// btnLoding
      saveBulletinContactInformation(this.formData).then(response => {
        // route携带参数
        const pathData = {
          ...this.$route.query
        }
        if (type === 'draft') return false// 判断是否-点击步骤条切换-如果是则不执行next下一步
        this.$emit('stepPage', 'next', pathData)// 步骤条切换方法 next 下一步
        this.confirmLoading = false// btnLoding
      }).catch(() => {
        this.confirmLoading = false// btnLoding
      })
    },
    // 上一步
    prevStep() {
      // route携带参数
      const pathData = {
        ...this.$route.query
      }
      this.$emit('stepPage', 'prev', pathData)// 步骤条切换方法 prev 上一步
    },
    // 下一步
    nextStep(formName) {
      // 校验输入内容
      this.$refs[formName].validate((valid, field) => {
        if (valid) { // 校验通过
          this.saveData()
        } else { // 校验不通过
          this.$confirm('联系方式未完善, 是否进入下一步?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            confirmButtonClass: 'confirmBtn',
            cancelButtonClass: 'cancelBtn',
            type: 'warning'
          }).then(() => {
            this.saveData()
          }).catch(() => {
          })
        }
      })
    }
  }
}
</script>

<style lang="less" scoped>

</style>
