<!--
 * @Description: create
 * @Version: 1.0
 * @Autor: XuTongZhang
 * @Date: 2020-08-03 09:38:03
 * @LastEditors: XuTongZhang
 * @LastEditTime: 2020-08-10 19:59:58
-->
<template>
<div class="mailManage">
    <el-card class="box-card">
        <el-form ref="form51" :model="form51" :rules="rules" label-width="140px" label-position="left">
            <el-form-item label="51job邮箱" prop="cmpMailAccount">
                <el-input v-model.trim="form51.cmpMailAccount" maxlength="32" show-word-limit></el-input>
            </el-form-item>
            <el-form-item label="密码" prop="cmpMailPassword">
                <el-input v-model.trim="form51.cmpMailPassword" show-password maxlength="32" show-word-limit></el-input>
            </el-form-item>
            <el-form-item label="邮箱类型" prop="cmpMailType">
                <el-radio-group v-model="form51.cmpMailType">
                    <el-radio :label="0">阿里</el-radio>
                    <el-radio :label="1">网易</el-radio>
                    <el-radio :label="2">QQ</el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item class="button-grounp">
                <el-button type="primary" @click="determine(0)">验证并使用</el-button>
            </el-form-item>
        </el-form>
        <el-form ref="formzl" :model="formzl" :rules="rules" label-width="140px" label-position="left">
            <el-form-item label="智联邮箱" prop="cmpMailAccount">
                <el-input v-model.trim="formzl.cmpMailAccount" maxlength="32" show-word-limit></el-input>
            </el-form-item>
            <el-form-item label="密码" prop="cmpMailPassword">
                <el-input v-model.trim="formzl.cmpMailPassword" show-password maxlength="32" show-word-limit></el-input>
            </el-form-item>
            <el-form-item label="邮箱类型" prop="cmpMailType">
                <el-radio-group v-model="formzl.cmpMailType">
                    <el-radio :label="0">阿里</el-radio>
                    <el-radio :label="1">网易</el-radio>
                    <el-radio :label="2">QQ</el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item class="button-grounp">
                <el-button type="primary" @click="determine(1)">验证并使用</el-button>
            </el-form-item>
        </el-form>
        <el-form ref="form58" :model="form58" :rules="rules" label-width="140px" label-position="left">
            <el-form-item label="58邮箱" prop="cmpMailAccount">
                <el-input v-model.trim="form58.cmpMailAccount" maxlength="32" show-word-limit></el-input>
            </el-form-item>
            <el-form-item label="密码" prop="cmpMailPassword">
                <el-input v-model.trim="form58.cmpMailPassword" show-password maxlength="32" show-word-limit></el-input>
            </el-form-item>
            <el-form-item label="邮箱类型" prop="cmpMailType">
                <el-radio-group v-model="form58.cmpMailType">
                    <el-radio :label="0">阿里</el-radio>
                    <el-radio :label="1">网易</el-radio>
                    <el-radio :label="2">QQ</el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item class="button-grounp">
                <el-button type="primary" @click="determine(2)">验证并使用</el-button>
            </el-form-item>
        </el-form>
    </el-card>
</div>
</template>

<script>
export default {
  data () {
    let determine = (val) => {
      let a
      this.$refs[val === 0 ? 'form51' : val === 1 ? 'formzl' : 'form58'].validate((valid) => {
        a = valid
      })
      if (!a) return
      let reqdata = val === 0 ? this.form51 : val === 1 ? this.formzl : this.form58
      reqdata.companyId = 2
      reqdata.useType = 0
      // reqdata.cmpMailType = 0
      // reqdata.cmpMailType = val
      let url = reqdata.id ? '/companyAccount/updateCompanyAccount' : '/companyAccount/saveReceiverMail'
      this.$api
        .post(url, {
          reqdata
        })
        .then((res) => {
          this.$message({
            type: 'success',
            message: '验证成功!'
          })
          queryDate()
        })
    }
    let queryDate = () => {
      this.$api
        .post('/companyAccount/queryCompanyAccountList', {
          reqdata: {}
        })
        .then((res) => {
          let list = res.list.filter(item => item.useType !== 1)
          console.log(list[0])
          // this.$set(this.$data, 'form51', list[0] ? list[0] : this.form51)
          // this.$set(this.$data, 'formzl', list[1] ? list[1] : this.formzl)
          // this.$set(this.$data, 'form58', list[2] ? list[2] : this.form58)
          list[0] && Object.assign(this.form51, list[0])
          list[1] && Object.assign(this.formzl, list[1])
          list[2] && Object.assign(this.form58, list[2])
          // this.form = res.list.some(item => item.useType === 1) ? res.list.find(item => item.useType === 1) : {}
        })
    }
    // let submit = () => {
    //   let a
    //   this.$refs['form'].validate((valid) => {
    //     a = valid
    //   })
    //   if (!a) return
    //   let reqdata = this.form
    //   reqdata.useType = 1
    //   let url = reqdata.id ? '/companyAccount/updateCompanyAccount' : '/companyAccount/saveReceiverMail'
    //   this.$api
    //     .post(url, {
    //       reqdata
    //     })
    //     .then((res) => {
    //       this.$message({
    //         type: 'success',
    //         message: '验证发件邮箱成功!'
    //       })
    //     })
    // }
    return {
      form51: {
        cmpMailAccount: '',
        cmpMailPassword: '',
        cmpMailType: 0
      },
      formzl: {
        cmpMailAccount: '',
        cmpMailPassword: '',
        cmpMailType: 0
      },
      form58: {
        cmpMailAccount: '',
        cmpMailPassword: '',
        cmpMailType: 0
      },
      // form: {
      //   cmpMailAccount: '',
      //   cmpMailPassword: '',
      //   cmpMailType: 0
      // },
      determine,
      queryDate,
      rules: {
        cmpMailAccount: [{
          required: true,
          message: '请输入邮箱账号',
          trigger: 'blur'
        }],
        cmpMailPassword: [{
          required: true,
          message: '请输入邮箱密码',
          trigger: 'blur'
        }]
      }
    }
  },
  created () {
    this.queryDate()
  }
}
</script>

<style lang="scss" scoped>
.mailManage {
    display: flex;
    justify-content: center;
    align-content: center;
    margin-bottom: 20px;
}

.box-card {
    width: 800rpx;
    padding: 18px 0;
}

.button-grounp {
    display: flex;
    justify-content: flex-end;
}

.info {
    width: 540px;
    color: #bbb;
    font-size: 12px;
}

.title {
    padding: 15px;
    text-align: center;
    font-size: 20px;
}
</style><style lang="scss">
.mailManage {
    .el-input__inner {
        width: 400px !important;
    }
}
</style>
