<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">
        <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>
  </div>
</template>

<script>
import condition from "../condition";

export default {
  props: {
    formData: {
      type: Object,
      required: true,
    },
  },
  components: {
    condition,
  },
  data() {
    return {
      benefitData: [],
      activeKeys: "",
    };
  },
  mounted() {
    this._getBenefitData();
  },
  methods: {
    _getBenefitData() {
      const { corpCode, coverageCode, payorCode, planCode } = this.formData;
      const data = { corpCode, coverageCode, payorCode, planCode };
      this.$apis.GETBENEFITLIST(data).then((res) => {
        this.benefitData = res.content || [];
      });
    },
  },
};
</script>

<style lang="less" scoped>
.benefits {
  .pa(0, 20, 10, 20);
  background-color: #fff;
  .save-btn {
    .mg-t(20);
    .mg-b(10);
    .icon-class {
      .mg-r(10);
    }
  }
}
.policy_line {
  .pa(0, 30, 0, 30);
  line-height: 60px;
  //   &:not(:last-child) {
  border-bottom: 1px solid #f8fafb;
  //   }
}
</style>