<template>
  <div>
    <!-- 分类 -->
    <div class="classify clearfix">
      <a-button :type="!type ? 'primary' : ''">全部</a-button>
      <a-button
        :type="item.code === type ? 'primary' : ''"
        v-for="item in welfareType"
        :key="item.code"
      >
        {{ item.name }}
      </a-button>
      <div class="save-btn">
        <a-button type="danger" @click="addNew">
          <Icon name="ssiadd" :size="14" />新增
        </a-button>
        <a-button type="primary">
          <Icon name="ssidownload" :size="14" />保存
        </a-button>
      </div>
    </div>
    <!-- table -->
    <a-table
      :columns="columns"
      :data-source="dataList"
      row-key="coverageCode"
      :scroll="{ x: true }"
      :pagination="pagination"
      :expanded-row-keys.sync="expandedRowKeys"
      @change="onWelfareChange"
      @expand="handleExpand"
    >
      <template slot="operation" slot-scope="text, record, index">
        <a-button
          v-if="record.isEdit"
          type="link"
          @click.stop="saveEditData(record)"
        >
          保存
        </a-button>
        <a-button v-else type="link" @click.stop="editData(record, index)">
          修改
        </a-button>
        <a-button type="link" class="success">新增</a-button>
        <a-popconfirm
          title="你确定要关闭吗？"
          ok-text="确定"
          cancel-text="取消"
          @confirm="deleteData(record, index)"
        >
          <a-button type="link" class="danger">删除</a-button>
        </a-popconfirm>
      </template>
      <template slot="expandedRowRender" slot-scope="record">
        <benefits :coverageForm="record" />
      </template>
    </a-table>
  </div>
</template>

<script>
import benefits from "../benefits";
export default {
  props: {
    coverageForm: {
      type: Object,
      required: true,
    },
  },
  components: {
    benefits,
  },
  data() {
    const columns = [
      {
        title: "责任项目",
        dataIndex: "coverageCode",
        width: 180,
        customRender: (val, row) => {
          if (row.isEdit) {
            return (
              <a-select
                v-model={row.coverageCode}
                placeholder="请选择责任项目"
                show-search
                allow-clear
                v-on:filterOption={this.filterCode}
              >
                {this.coverageCode.map((item) => {
                  return (
                    <a-select-option value={item.coverageCode}>
                      {item.coverageDesc}
                    </a-select-option>
                  );
                })}
              </a-select>
            );
          }
          return val;
        },
      },
      { title: "责任项目列表", dataIndex: "patientName", width: 120 },
      {
        title: "是否直付",
        dataIndex: "isdirect",
        width: 180,
        customRender: (val, row) => {
          if (row.isEdit) {
            return (
              <a-radio-group
                v-model={row.isdirect}
                default-value={row.isdirect}
                button-style="solid"
              >
                <a-radio-button value="Y"> 是 </a-radio-button>
                <a-radio-button class="mar-left10" value="N">
                  否
                </a-radio-button>
              </a-radio-group>
            );
          }
          return val;
        },
      },
      { title: "单位", dataIndex: "sex", width: 80 },
      { title: "年限额", dataIndex: "payorName", width: 180 },
      { title: "剩余额度（￥）", dataIndex: "policyNo", width: 190 },
      { title: "次限额（￥）", dataIndex: "startDate", width: 180 },
      //   { title: "次免赔额（￥）", dataIndex: "endDate", width: 180 },
      //   { title: "自付比例", dataIndex: "endDate", width: 180 },
      //   { title: "备注", dataIndex: "endDate", width: 180 },
      {
        title: "操作",
        key: "operation",
        width: "175px",
        fixed: "right",
        scopedSlots: { customRender: "operation" },
      },
    ];
    return {
      columns,
      dataList: [{ coverageCode: 22 }],
      expandedRowKeys: [],
      type: "",
      welfareType: [],
      pager: {
        pageNum: 1,
        pageSize: 10,
      },
      total: 0,
      coverageCode: [],
    };
  },
  watch: {
    coverageForm: {
      deep: true,
      handler: function () {
        this.type = "";
        this._getCoverageList();
      },
    },
  },
  mounted() {
    this._getSpecialtyCode();
    // this._getCoverageList();
  },
  computed: {
    pagination() {
      return this.initPageConfig(
        { ...this.pager, total: this.total },
        this.onWelfareSizeChange
      );
    },
  },
  methods: {
    addNew() {
      const item = { isEdit: true, isNew: true };
      this.pager.pageSize++;
      this._getCoverageCode(); // 获取责任项目码表
      this.dataList.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.dataList.splice(index, 1);
        return true;
      }
      this.dataList.splice(index, 1);
    },
    initPageConfig(pager, sizeChange) {
      const { pageNum, pageSize, total } = pager;
      const pages = Math.ceil(total / pageSize);
      return {
        current: pageNum,
        pageSize,
        size: "large",
        position: "bottom",
        align: "right",
        total: this.total,
        hideOnSinglePage: false,
        itemRender: (current, type, originalElement) => {
          if (type === "prev") {
            originalElement.children = undefined;
            originalElement.text = "上一页";
          }
          if (type === "page") {
            if (current !== pageNum) {
              return undefined;
            }
            return (
              <p>
                <span class="current-page">{current}</span> / {pages}
              </p>
            );
          }
          if (type === "next") {
            originalElement.children = undefined;
            originalElement.text = "下一页";
            return (
              <div>
                {originalElement}
                <a-input-number
                  onblur={sizeChange}
                  class="size-change"
                ></a-input-number>
              </div>
            );
          }
          return originalElement;
        },
      };
    },
    onWelfareChange(pager) {
      const { current } = pager;
      // console.log(pager);
      this.pager.pageNum = current;
      // this._getCustomerList();
    },
    onWelfareSizeChange(e) {
      e && e.stopPropagation();
      const val = e.target.value * 1;
      if (!val || val < 0) {
        return false;
      }
      this.pager.pageSize = val;
    },
    // 选择框筛选
    filterCode(input, option) {
      return (
        option.componentOptions.children[0].text
          .toLowerCase()
          .indexOf(input.toLowerCase()) >= 0
      );
    },
    handleExpand(expended, record) {
      console.log(expended);
      if (record.isEdit && expended) {
        console.log(this.expandedRowKeys);
        return false;
      }
    },
    _getSpecialtyCode() {
      this.$apis.GETSPECIALTYLIST().then((res) => {
        this.welfareType = res.content || [];
      });
    },
    _getCoverageList() {
      const { corpCode, payorCode, planCode } = this.coverageForm;
      this.$apis
        .GETCOVERAGELIST({
          corpCode,
          payorCode,
          planCode,
          specialtyCode: this.type,
        })
        .then((res) => {
          this.dataList = 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;
}
.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>