<template>
  <div class="pay-item">
    <el-form-item
      label="支付时间"
      :prop="'payment_instrument.' + index + '.pay_date'"
      :rules="{ required: true, message: '请选择日期' }"
    >
      <el-date-picker
        v-model="data.pay_date"
        type="date"
        value-format="yyyy-MM-dd"
        placeholder="选择日期"
        :disabled="disabled"
      ></el-date-picker>
    </el-form-item>
    <el-form-item
      label="支付方式"
      :prop="'payment_instrument.' + index + '.type'"
      :rules="{ required: true, message: '请选择支付方式' }"
    >
      <el-popover placement="top-start" trigger="hover">
        <p>银行账户名称：清控紫荆（北京）教育科技股份有限公司</p>
        <p>银行帐号：694485289</p>
        <p>开户行：中国民生银行股份有限公司北京魏公村支行</p>
        <el-radio slot="reference" label="1" v-model="data.type" :disabled="disabled">银行卡转账</el-radio>
      </el-popover>
      <el-popover placement="top-start" trigger="hover">
        <p>支付宝户名：清控紫荆（北京）教育科技股份有限公司</p>
        <el-radio
          slot="reference"
          label="2"
          v-model="data.type"
          :disabled="disabled"
          style="margin-left:40px;"
        >支付宝转账</el-radio>
      </el-popover>
    </el-form-item>
    <el-form-item
      label="支付金额"
      :prop="'payment_instrument.' + index + '.money'"
      :rules="{ required: true, message: '请输入支付金额' }"
    >
      <el-input v-model="data.money" placeholder="输入支付金额" :disabled="disabled" style="width:220px">
        <template slot="append">¥</template>
      </el-input>
    </el-form-item>
    <el-form-item
      label="上传缴费凭证"
      :prop="'payment_instrument.' + index + '.url'"
      :rules="{ required: true, message: '请上传缴费凭证' }"
    >
      <app-upload v-model="data.url" :disabled="disabled"></app-upload>
    </el-form-item>
    <el-form-item label="审核状态" v-if="statusText">
      <el-tag>{{statusText}}</el-tag>
    </el-form-item>
  </div>
</template>

<script>
import AppUpload from '@/components/upload'

export default {
  props: {
    data: { type: Object, required: true },
    index: { type: Number },
    disabled: { type: Boolean, default: false }
  },
  components: { AppUpload },
  computed: {
    statusText() {
      const status = {
        '-1': '待审核',
        0: '未通过',
        1: '通过'
      }
      return status[this.data.status] || ''
    }
  }
}
</script>
