<template>
  <div class="benefits">
    <!-- <div>
      <div class="text-r">
        <a-button type="danger" class="save-btn">
          <Icon name="ssiadd" :size="14" />新增
        </a-button>
        <a-table
          :pagination="false"
          :columns="benefitColumns"
          :data-source="benefitData"
        >
          <template slot="operation" slot-scope="text, record">
            <a-button v-if="record.isEdit" type="link"> 保存 </a-button>
            <a-button v-else type="link"> 修改 </a-button>
            <a-button type="link" class="success">新增</a-button>
            <a-popconfirm
              title="你确定要关闭吗？"
              ok-text="确定"
              cancel-text="取消"
            >
              <a-button type="link" class="danger">删除</a-button>
            </a-popconfirm>
          </template>
        </a-table>
      </div>
    </div> -->
    <!-- <a-collapse v-model="activeKeys" expand-icon-position="right" :bordered="false">
      <a-collapse-panel v-for="item in benefitData" :key="item.benefitCode" :header="item.benefitCode + ' ' +item.benefitDesc">
        <div>
          <a-row class="policy_line" :gutter="10">
            <a-col :span="6">事先授权：</a-col>
            <a-col :span="6">等待期：{{ item.waitingPeriod }}</a-col>
            <a-col :span="6">年限额：</a-col>
            <a-col :span="6">赔付比例：</a-col>
          </a-row>
        </div>
        <condition :formData="{ ...item, conditionType: '01' }" />
      </a-collapse-panel>
    </a-collapse> -->
    <a-row v-for="(item, index) in benefitData" :key="item.benefitCode" class="policy_line" :gutter="10">
      <a-col :span="12">{{item.benefitDesc}}</a-col>
      <a-col :span="12" class="border-r">
        <a-row :gutter="10">
          <a-col :span="8">{{item.benefitConditionDesc}}</a-col>
          <a-col :span="8" class="border-r" v-if="showRemainingQuota(item)">
            <a-row v-if="item.isEditRemainingQuota">
              <a-col :span="14">
                <a-input v-model="remainingQuotaForm[item.benefitCode]" placeholder="请输入剩余金额"></a-input>
              </a-col>
              <a-col :span="10">
                <a-button type="link" @click="saveRemainingQuota(item, index)">保存</a-button>
                <a-button type="link" @click="editRemainingQuota(item, index)">取消</a-button>
              </a-col>
            </a-row>
            <p v-else @dblclick="editRemainingQuota(item, index)" title="双击可编辑剩余金额">剩余{{item.remainingQuota}}元</p>
          </a-col>
          <a-col :span="8">{{item.modifierDate}}</a-col>
        </a-row>
      </a-col>
    </a-row>
  </div>
</template>

<script>

export default {
  props: {
    formData: {
      type: Object,
      required: true,
    },
  },
  components: {
  },
  data() {
    return {
      benefitData: [],
      activeKeys: "",
      remainingQuotaForm: {}
    };
  },
  mounted() {
    this._getBenefitData();
  },
  methods: {
    showRemainingQuota(item){
      return item.remainingQuota || item.remainingQuota === 0;
    },
    // 编辑剩余金额的打开与取消
    editRemainingQuota(data, index) {
      const val = data.isEditRemainingQuota
      if (! val) {
        this.remainingQuotaForm[data.benefitCode] = data.remainingQuota;
      }
      this.$set(this.benefitData[index], 'isEditRemainingQuota', !val)
    },
    // 剩余金额保存
    saveRemainingQuota(data, index) {
      const { benefitCode, corpCode, coverageCode, patientId, payorCode, planCode } = data;
      const remainingQuota = this.remainingQuotaForm[benefitCode]
      if (! remainingQuota) {
        this.$message.error('剩余金额不能为空')
        return false;
      }
      if (! /^\d+$|^\d*\.\d+$/g.test(remainingQuota)) {
        this.$message.error('剩余金额应该为数字')
        return false;
      }
      const params = {
        benefitCode, corpCode, coverageCode, patientId, payorCode, planCode,
        remainingQuota,
        quotaType: '01' // 额度类型（01：福利额度 02：责任额度 03：计划额度）
      }
      this.$apis.SETREMAININGQUOTA(params).then(res => {
        if(res.returnCode === '0000') {
          this.$message.success(res.returnMsg || '保存成功')
          this.editRemainingQuota(data, index) // 转换编辑状态
          this.benefitData[index].remainingQuota = remainingQuota  // 直接赋值， 就不请求数据初始化了
        } else {
          this.$message.error(res.returnMsg || '保存失败')
        }
      })
    },
    _getBenefitData() {
      const { corpCode, coverageCode, payorCode, planCode } = this.formData;
      const data = { corpCode, coverageCode, payorCode, planCode, patientId: this.formData.id };
      this.$apis.GETBENEFITSHOWLIST(data).then((res) => {
        this.benefitData = res.content || [];
      });
    },
  },
};
</script>

<style lang="less" scoped>
.benefits {
  .pa(0, 0, 10, 0);
  background-color: #fff;
  .save-btn {
    .mg-t(20);
    .mg-b(10);
    .icon-class {
      .mg-r(10);
    }
  }
}
.policy_line {
  display: flex;
  align-items: center;
  .pa(0, 30, 0, 30);
  min-height: 60px;
  line-height: 1.5;
  border-bottom: 1px solid #f8fafb;
  .border-r{
    border-right: 1px solid #f8fafb;
  }
}
</style>