<template>
  <div class="pay-item">
    <el-form-item
      :label="$t('pages.affairsHall.payItem.paytime')"
      :prop="'payment_instrument.' + index + '.pay_date'"
      :rules="{ required: true, message: $t('pages.affairsHall.payItem.paytimemsg') }"
    >
      <el-date-picker
        v-model="data.pay_date"
        type="date"
        value-format="yyyy-MM-dd"
        :placeholder="$t('pages.affairsHall.payItem.paytimemsg')"
        :disabled="disabled"
      ></el-date-picker>
    </el-form-item>
    <el-form-item
      :label="$t('pages.affairsHall.payItem.pay')"
      :prop="'payment_instrument.' + index + '.type'"
      :rules="{ required: true, message: $t('pages.affairsHall.payItem.pay') }"
    >
      <el-popover placement="top-start" trigger="hover">
        <p>{{ $t('pages.affairsHall.payItem.msgtip') }}</p>
        <p>{{ $t('pages.affairsHall.payItem.bank1') }}</p>
        <p>{{ $t('pages.affairsHall.payItem.bank') }}</p>
        <el-radio slot="reference" label="1" v-model="data.type" :disabled="disabled">{{ $t('pages.affairsHall.payItem.bank2') }}</el-radio>
      </el-popover>
      <el-popover placement="top-start" trigger="hover">
        <p>{{ $t('pages.affairsHall.payItem.bank3') }}</p>
        <el-radio
          slot="reference"
          label="2"
          v-model="data.type"
          :disabled="disabled"
          style="margin-left:40px;"
        >{{ $t('pages.affairsHall.payItem.bank4') }}</el-radio>
      </el-popover>
    </el-form-item>
    <el-form-item
      :label="$t('pages.affairsHall.payItem.paynumber')"
      :prop="'payment_instrument.' + index + '.money'"
      :rules="{ required: true, message: $t('pages.affairsHall.payItem.inputnumber') }"
    >
      <el-input v-model="data.money" :placeholder="$t('pages.affairsHall.payItem.inputnumber')" :disabled="disabled" style="width:220px">
        <template slot="append">¥</template>
      </el-input>
    </el-form-item>
    <el-form-item
      :label="$t('pages.affairsHall.payItem.uppayment')"
      :prop="'payment_instrument.' + index + '.url'"
      :rules="{ required: true, message: $t('pages.affairsHall.payItem.uppayment') }"
    >
      <app-upload v-model="data.url" :disabled="disabled"></app-upload>
    </el-form-item>
    <el-form-item :label="$t('pages.affairsHall.payItem.approvalStatus')" 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>
