<template>
  <div>
    <descriptions :column="2" style="margin-bottom: 20px">
      <descriptions-item label="学练宝版本">{{
        detail.name || '--'
      }}</descriptions-item>
      <descriptions-item label="周期">{{
        detail.period | memberEnumType
      }}</descriptions-item>
      <descriptions-item label="数量">{{
        detail.memberNum
      }}</descriptions-item>
      <descriptions-item label="缴费金额(元)">{{
        detail.actualAmount | moneyFormat(true)
      }}</descriptions-item>
      <descriptions-item label="已缴费人数/总人数"
        >{{ detail.paymentUserNum }}/{{ detail.userNum }}</descriptions-item
      >
      <descriptions-item label="创建人">{{
        detail.operatorName
      }}</descriptions-item>
      <descriptions-item label="创建时间">{{
        detail.createTime
      }}</descriptions-item>
      <descriptions-item :span="2" label="学员姓名">{{
        detail.userNames
      }}</descriptions-item>
      <descriptions-item :span="2" label="备注">{{
        detail.remark
      }}</descriptions-item>
    </descriptions>

    <template v-if="detail.status === 'AUDITING'">
      <el-alert
        style="margin: 20px 0"
        title="审核意见"
        :closable="false"
        class="alert"
        type="info"
      >
      </el-alert>
      <el-form :model="form" ref="form">
        <el-form-item
          prop="memo"
          :rules="[
            { required: true, message: '请输入审核意见', trigger: 'blur' }
          ]"
        >
          <el-input
            type="textarea"
            :autosize="{ minRows: 2, maxRows: 4 }"
            placeholder="请输入审核意见"
            v-model="form.memo"
          >
          </el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button
          type="primary"
          @click="submit(1)"
          v-if="permission('musicGroupPaymentCalender/auditPass/batchAuditing')"
          >审核通过</el-button
        >
        <el-button
          type="danger"
          @click="submit(0)"
          v-if="
            permission('musicGroupPaymentCalender/auditRefuse/batchAuditing')
          "
          >驳回</el-button
        >
        <el-button @click="$emit('close')">关 闭</el-button>
      </div>
    </template>
  </div>
</template>
<script>
import { permission } from "@/utils/directivePage";
import { cloudCoachPaymentProgramAudit } from "./api";
export default {
  props: ["detail"],
  data() {
    return {
      form: {
        memo: ""
      }
    };
  },
  mounted() {
    console.log(this.detail, "detail");
  },
  methods: {
    async submit(val) {
      this.$refs.form.validate(async _ => {
        if (_) {
          try {
            const detail = this.detail;
            const str = val ? "通过" : "驳回";
            await this.$confirm(`是否确认审核${str}`, "提示", {
              type: "warning"
            });
            await cloudCoachPaymentProgramAudit({
              id: detail.id,
              memo: this.form.memo,
              status: val ? "OPEN" : "REJECT"
            });
            this.$message.success(`${str}成功`);
            this.$emit("close");
            this.$emit("getList");
          } catch (error) {}
        }
      });
    },
    permission(str) {
      return permission(str);
    }
  }
};
</script>
<style lang="less" scoped>
.dialog-footer {
  margin-top: 20px;
  display: block;
  text-align: right;
}
</style>
