<template>
  <div>
    <div class="con-title">纸质成绩单申请</div>
    <div class="con-box">
      <el-button type="text" @click="goBack">返回列表</el-button>
      <div class="main-form">
        <el-form label-width="180px" :disabled="isView" ref="ruleForm" :model="ruleForm" :rules="rules">
          <el-form-item label="姓名" prop="personal_name">
            <el-input v-model="ruleForm.personal_name" readonly />
          </el-form-item>
          <el-form-item label="班级" prop="class_name">
            <el-input v-model="ruleForm.class_name" readonly />
          </el-form-item>
          <el-form-item label="Sofia ID" prop="sofia_id">
            <el-input v-model="ruleForm.sofia_id" readonly />
          </el-form-item>
          <el-form-item label="成绩单收件人是否为本人" prop="is_self">
            <el-radio-group v-model="ruleForm.is_self">
              <el-radio label="1">是</el-radio>
              <el-radio label="2">否</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="收件人名字" prop="receive_name" v-if="ruleForm.is_self !== '1'">
            <el-input v-model="ruleForm.receive_name" />
          </el-form-item>
          <el-form-item label="收件人联系电话" prop="telephone">
            <el-input v-model="ruleForm.telephone" />
          </el-form-item>
          <el-form-item label="邮寄地址" prop="email">
            <el-input type="textarea" v-model="ruleForm.email" :autosize="{ minRows: 3 }" />
            <div style="line-height: 20px">
              国内大陆地区顺丰或EMS包邮，偏远地区及港澳台地区请联系班主任，根据实际情况收取快递费用。
            </div>
          </el-form-item>
          <el-form-item label="需打印份数" prop="number">
            <el-select v-model="ruleForm.number" :disabled="isPaid">
              <el-option v-for="item in productList" :key="item.value" :label="item.label" :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="支付方式" prop="payment">
            <el-radio-group v-model="ruleForm.payment" :disabled="isPaid">
              <div v-for="item in payList" :key="item.value" style="margin: 10px 0">
                <el-radio :label="item.value">{{ item.label }}</el-radio>
              </div>
            </el-radio-group>
          </el-form-item>

          <template v-if="isView">
            <el-form-item label="支付方式" style="margin: 0" v-if="detail.pay !== -1">
              {{ payText }}
            </el-form-item>
            <el-form-item label="支付状态" style="margin: 0" v-if="detail.pay !== -1">
              {{ payStatusText }}
            </el-form-item>
            <el-form-item label="审批状态" style="margin: 0">
              {{ statusText }}
            </el-form-item>
            <el-form-item label="审批时间" style="margin: 0" v-if="detail.approve_time1">
              {{ detail.approve_time1 }}
            </el-form-item>
            <el-form-item label="审批备注" style="margin: 0" v-if="detail.remark1 || detail.remark2">
              {{ detail.remark1 || detail.remark2 }}
            </el-form-item>
          </template>
          <el-form-item v-if="!this.isView">
            <el-button type="primary" :loading="submitLoading" @click="handleSubmit(handleSubmitSuccess)" v-if="!isPaid"
              >去支付</el-button
            >
            <el-button type="primary" :loading="submitLoading" @click="handleSubmit" v-else>保存并提交</el-button>
            <el-button type="info" @click="onRemove" v-if="hasAbort">撤回申请</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>

    <el-dialog title="支付" width="400px" :visible.sync="payVisible">
      <pay :payment="ruleForm.payment" :productId="productId" @success="handlePaySuccess" v-if="payVisible"></pay>
    </el-dialog>
  </div>
</template>

<script>
import * as api from '../../api'
import editMixins from '../../mixins/edit'
import Pay from '../../components/pay'
export default {
  mixins: [editMixins],
  components: { Pay },
  data() {
    return {
      ruleForm: {
        affair_id: '',
        personal_name: '',
        class_name: '',
        sofia_id: '',
        number: '1',
        is_self: '1',
        receive_name: '',
        telephone: '',
        email: '',
        payment: '2'
      },
      rules: {
        personal_name: [{ required: true, message: '请输入您的姓名', trigger: 'blur' }],
        class_name: [{ required: true, message: '请输入您的班级', trigger: 'blur' }],
        sofia_id: [{ required: true, message: '请输入Sofia ID', trigger: 'blur' }],
        number: [{ required: true, message: '请输入需打印份数', trigger: 'blur' }],
        receive_name: [{ required: true, message: '请输入收件人名字', trigger: 'blur' }],
        telephone: [{ required: true, message: '请输入收件人联系电话', trigger: 'blur' }],
        email: [{ required: true, message: '请输入邮寄地址', trigger: 'blur' }]
      },
      productList: [
        { label: '1份—￥126元', value: '1', product_id: '6747325185390542848' },
        { label: '2份—￥201元', value: '2', product_id: '6747325279879823360' },
        { label: '3份—￥276元', value: '3', product_id: '6747325351686307840' }
      ],
      payVisible: false
    }
  },
  watch: {
    '$route.query': {
      immediate: true,
      handler(query) {
        this.payVisible = query.pay === '1'
      }
    }
  },
  computed: {
    productId() {
      const found = this.productList.find(item => item.value === this.ruleForm.number)
      return found ? found.product_id : ''
    }
  },
  methods: {
    handleSubmitSuccess(response) {
      if (!this.isEdit) {
        this.$router
          .replace({ name: 'pareportEdit', params: { id: response.data.id }, query: { id: this.affairId, pay: '1' } })
          .then(this.getDetail)
      }
      this.handlePay()
    },
    // 去支付
    handlePay() {
      this.payVisible = true
    },
    // 支付成功
    handlePaySuccess() {
      api.paySuccess(this.pid).then(response => {
        this.getDetail()
        this.payVisible = false
      })
    }
  },
  beforeMount() {
    if (this.isEdit || this.isView) {
      this.getDetail()
    } else {
      // 获取学生信息
      this.getStudent()
    }
  }
}
</script>

<style lang="scss" scoped>
.main-form {
  max-width: 600px;
  margin: 0 auto;
}
.el-date-editor.el-input {
  width: 100%;
}
</style>
