<template>
  <div class="letter">
    <header class="header">
      <div class="inner">
        <div class="logo">
          <router-link to="/"
            ><img src="https://zws-imgs-pub.ezijing.com/static/public/a0671ced04ce75b04f2e491b555b412d.png"
          /></router-link>
        </div>
      </div>
    </header>
    <nav class="nav"><h1 class="title">康博斯威尔大学蒙台梭利硕士项目推荐信</h1></nav>
    <section class="content">
      <el-form
        :model="ruleForm"
        :rules="rules"
        ref="form"
        label-width="100px"
        :label-position="labelPosition"
        @submit.native.prevent
        style="max-width: 680px"
      >
        <el-form-item label="姓名" prop="provider_name">
          <el-input v-model="ruleForm.provider_name" @blur="onBlur('provider_name')"></el-input>
        </el-form-item>
        <el-form-item label="推荐信内容" prop="letter_content">
          <el-input
            type="textarea"
            :autosize="{ minRows: 6 }"
            v-model="ruleForm.letter_content"
            @blur="onBlur('letter_content')"
          ></el-input>
        </el-form-item>
        <el-form-item label="手机号" prop="provider_phone_number">
          <el-input v-model="ruleForm.provider_phone_number"></el-input>
        </el-form-item>
        <el-form-item label="工作单位" prop="provider_company_name">
          <el-input v-model="ruleForm.provider_company_name" @blur="onBlur('provider_company_name')"></el-input>
        </el-form-item>
        <el-form-item label="职务" prop="provider_job_title">
          <el-input v-model="ruleForm.provider_job_title" @blur="onBlur('provider_job_title')"></el-input>
        </el-form-item>
      </el-form>
      <div class="buttons">
        <el-button type="primary" @click="handleSubmit">确认提交</el-button>
      </div>
    </section>

    <el-dialog title="推荐信提交成功" :visible.sync="dialogVisible" :center="true" width="348px">
      <div style="text-align: center"><img src="../../assets/images/icon_success.png" /></div>
      <template #footer>
        <el-button type="primary" @click="toHome">了解项目</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import * as api from '@/api/my'

export default {
  name: 'LetterIndex',
  data() {
    return {
      ruleForm: {
        provider_name: '',
        letter_content: '',
        provider_phone_number: '',
        provider_company_name: '',
        provider_job_title: ''
      },
      rules: {
        provider_name: [{ required: true, message: '请输入姓名', trigger: 'blur' }],
        letter_content: [{ required: true, message: '请输入推荐信内容', trigger: 'blur' }],
        provider_phone_number: [{ required: true, pattern: /^1[3-9]\d{9}$/, message: '请输入手机号', trigger: 'blur' }],
        provider_company_name: [{ required: true, message: '请输入工作单位', trigger: 'blur' }],
        provider_job_title: [{ required: true, message: '请输入职务', trigger: 'blur' }]
      },
      dialogVisible: false,
      clientWidth: 0
    }
  },
  computed: {
    userId() {
      return this.$route.params.userId
    },
    letterId() {
      return this.$route.params.letterId
    },
    labelPosition() {
      return this.clientWidth < 768 ? 'top' : 'left'
    }
  },
  methods: {
    // 提交
    handleSubmit() {
      this.$refs.form.validate().then(() => {
        this.handleAddRequest()
      })
    },
    // 提交推荐信
    handleAddRequest() {
      api.addLetter(this.userId, this.letterId, this.ruleForm).then(response => {
        console.log(response)
        const { error, message } = response
        if (error.toString() === '0') {
          this.dialogVisible = true
        } else {
          this.$message.error(message)
        }
      })
    },
    toHome() {
      this.$router.push('/')
    },
    getClientWidth() {
      this.clientWidth = document.body.clientWidth
    },
    onBlur(key) {
      if (this.ruleForm[key]) {
        this.ruleForm[key] = this.ruleForm[key].trim()
      }
    }
  },
  mounted() {
    this.getClientWidth()
    window.addEventListener('resize', this.getClientWidth)
  },
  destroyed() {
    window.removeEventListener('resize', this.getClientWidth)
  }
}
</script>

<style lang="scss" scoped>
.letter {
  .header {
    background-color: #fff;
    .inner {
      max-width: 1000px;
      margin: 0 auto;
    }
    .logo {
      padding: 14px 0;
    }
  }
  .nav {
    background-color: #af1b40;
    .title {
      font-size: 24px;
      font-weight: 600;
      color: #fff;
      line-height: 60px;
      text-align: center;
    }
  }
  .content {
    max-width: 1000px;
    margin: 20px auto;
    padding: 20px;
    background-color: #fff;
    box-sizing: border-box;
  }
  ::v-deep .el-input {
    max-width: 270px;
  }
  ::v-deep .el-form--label-top {
    .el-form-item__label {
      line-height: 20px;
    }
    .el-input {
      max-width: 100%;
    }
  }
  ::v-deep .el-input__inner,
  ::v-deep .el-textarea__inner {
    border-radius: 0;
  }
  .buttons {
    border-top: 1px solid #f1f1f1;
    padding: 20px 100px;
  }
  @media (max-width: 767px) {
    .logo {
      text-align: center;
    }
    .buttons {
      padding: 20px 0;
      .el-button {
        width: 100%;
        display: block;
      }
    }
  }
}
</style>
