<template>
  <div>
    <!-- 分类 -->
    <div class="classify clearfix">
      <a-button @click="specialtyChange('')" :type="!type ? 'primary' : ''">
        全部
      </a-button>
      <a-button @click="specialtyChange(item.specialtyCode)" :type="item.specialtyCode === type ? 'primary' : ''" v-for="item in welfareType" :key="item.specialtyCode">
        {{ item.specialtyDesc }}
      </a-button>
      <div class="save-btn">
        <!-- <a-button type="primary" @click="addNew">
          <Icon name="ssiadd" :size="14" />新增
        </a-button> -->
        <a-button type="primary">
          <Icon name="ssidownload" :size="14" />保存
        </a-button>
      </div>
    </div>
    <a-collapse v-model="activeKeys" expand-icon-position="right" :bordered="false">
      <a-collapse-panel v-for="item in coverageData" :key="item.coverageCode" :header="item.coverageCode">
        <div>
          <a-row class="policy_line" :gutter="10">
            <a-col :span="6">是否开放直付：{{ item.isDirect }}</a-col>
            <a-col :span="6">直付刷卡上限：</a-col>
            <a-col :span="6">事先授权：</a-col>
            <a-col :span="6">等待期：{{ item.waitingPeriod }}</a-col>
          </a-row>
          <a-row class="policy_line" :gutter="10">
            <a-col :span="6">年限额：</a-col>
            <a-col :span="6">限次：</a-col>
            <a-col :span="6">免赔额：</a-col>
            <a-col :span="6">赔付比例：</a-col>
          </a-row>
        </div>
        <condition :formData="{ ...item, conditionType: '02' }" />
        <benefits :formData="item" />
      </a-collapse-panel>
    </a-collapse>
  </div>
</template>

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

export default {
  props: {
    formData: {
      type: Object,
      required: true,
    },
  },
  components: {
    condition,
    benefits,
  },
  data() {
    return {
      activeKeys: "",
      coverageData: [],
      expandedRowKeys: [],
      type: "",
      welfareType: [],
      pager: {
        pageNum: 1,
        pageSize: 10,
      },
      total: 0,
      coverageCode: [],
    };
  },
  watch: {
    formData: {
      immediate: true,
      deep: true,
      handler: function () {
        this.type = "";
        this._getCoverageList();
      },
    },
  },
  created() {
    this._getSpecialtyCode();
    // this._getCoverageList();
  },
  methods: {
    addNew() {
      const item = { isEdit: true, isNew: true };
      this.pager.pageSize++;
      this._getCoverageCode(); // 获取责任项目码表
      this.coverageData.unshift(item);
    },
    editData(record) {
      this._getCoverageCode(); // 获取责任项目码表
      const { coverageCode } = record;
      const index = this.expandedRowKeys.indexOf(coverageCode);
      if (index > -1) {
        this.expandedRowKeys.splice(index, 1);
      }
      this.$set(record, "isEdit", true);
    },
    saveEditData(record) {
      record.isEdit = undefined;
    },
    deleteData(record, index) {
      if (record.isNew) {
        this.coverageData.splice(index, 1);
        return true;
      }
      this.coverageData.splice(index, 1);
    },
    specialtyChange(code) {
      this.type = code;
      this._getCoverageList();
    },
    // 选择框筛选
    filterCode(input, option) {
      return (
        option.componentOptions.children[0].text
          .toLowerCase()
          .indexOf(input.toLowerCase()) >= 0
      );
    },
    _getSpecialtyCode() {
      this.$apis.GETSPECIALTYLIST().then((res) => {
        this.welfareType = res.content || [];
      });
    },
    _getCoverageList() {
      const { corpCode, payorCode, planCode } = this.formData;
      this.$apis.GETCOVERAGELIST({
          corpCode,
          payorCode,
          planCode,
          specialtyCode: this.type,
        }).then((res) => {
          this.coverageData = res.content || [];
        });
    },
    _getCoverageCode() {
      if (this.coverageCode && this.coverageCode.length) {
        return true;
      }
      this.$apis.GETCOVERAGECODE().then((res) => {
        this.coverageCode = res.content || [];
      });
    },
  },
};
</script>

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