<template>
  <!--折扣信息-->
  <div class="discount-container">
    <div class="title-div">下面的是写死为1001这条保险公司的-----折扣信息</div>
    <a-table
      :columns="columns"
      :data-source="tableList"
      :scroll="{ x: 'max-content' }"
      :pagination="false"
    >
      <div
        v-for="col in columns"
        :slot="col.dataIndex"
        slot-scope="text, record, index"
        :key="col.dataIndex"
      >
        <template v-if="col.dataIndex == 'operation'">
          <a-button type="link" @click.stop="editEvt(record, index)">{{
            record.edit ? "保存" : "修改"
          }}</a-button>
          <a-button type="link" class="success">新增</a-button>
          <a-button type="link" class="danger" @click.stop="delRecord(index)"
            >删除</a-button
          >
        </template>
        <template
          v-else-if="col.dataIndex == 'benefits'"
          slot-scope="text, record"
        >
          <a-select
            v-if="record.edit"
            v-model="record.benefits2"
            placeholder="请选择"
            mode="multiple"
          >
            <a-select-option
              :value="item.benefitCode"
              v-for="item in benefitType"
              :key="item.benefitCode"
              >{{ item.description }}</a-select-option
            >
          </a-select>
          <span v-else>{{ filterType(record.benefits2) }}</span>
        </template>
        <template v-else>
          <a-input
            v-if="record.edit"
            placeholder="请输入"
            v-model="record[col.dataIndex]"
          />
          <span v-else>{{ text }}</span>
        </template>
      </div>
    </a-table>
    <!--分页-->
    <BurtPagination :pagination="pagination" @pageChange="getTableList" />
  </div>
</template>

<script>
import BurtPagination from "@/components/CUSTOMER/pagation";
const columns = [
  {
    title: "序号",
    dataIndex: "id",
    width: 205,
  },
  {
    title: "项目",
    dataIndex: "benefits",
    ellipsis: true,
    scopedSlots: { customRender: "benefits" },
    width: 310,
  },
  {
    title: "折扣比例",
    dataIndex: "ratio",
    ellipsis: true,
    scopedSlots: { customRender: "ratio" },
    width: 190,
  },
  {
    title: "备注",
    dataIndex: "remark",
    scopedSlots: { customRender: "remark" },
    width: 180,
  },
  {
    title: "操作",
    dataIndex: "operation",
    scopedSlots: { customRender: "operation" },
    fixed: "right",
    width: "170px",
  },
];
export default {
  data() {
    return {
      columns,
      pagination: {
        pageNum: 1,
        pageSize: 5,
        total: 0,
      },
      dataList: [], //所有的折扣信息
      tableList: [], //显示
      benefitType: [], //福利类型
      benefitTypeObj: {}, //福利类型对象
    };
  },
  components: {
    BurtPagination,
  },
  async created() {
    await this.getBenefitType();
    this.getData();
  },
  methods: {
    //过滤器
    filterType(val) {
      let txt = (val || []).map((item) => {
        return this.benefitTypeObj[item] || "";
      });
      return txt.join("，");
    },
    //获取福利类型列表
    getBenefitType() {
      return new Promise((resolve, reject) => {
        this.$apis.GETBENEGITTYPE().then((res) => {
          if (res.returnCode == "0000") {
            this.benefitType = res.content || [];
            (res.content || []).forEach((item) => {
              this.benefitTypeObj[item.benefitCode] = item.description;
            });
            resolve();
          } else {
            this.$message.error(res.returnMsg);
            reject();
          }
        });
      });
    },
    //获取列表
    getData() {
      this.$apis
        .PAYORDETAIL({
          id: 1001,
        })
        .then((res) => {
          if (res.returnCode == "0000") {
            let list = res.content.discountList || [];
            this.pagination.total = list.length;
            this.dataList = list;
            this.getTableList();
          } else {
            this.$message.error(res.returnMsg);
          }
        });
    },
    //分页
    getTableList() {
      let list = this.dataList.slice(
        (this.pagination.pageNum - 1) * this.pagination.pageSize,
        this.pagination.pageNum * this.pagination.pageSize
      );
      this.tableList = list.map((item) => {
        return {
          ...item,
          edit: false,
          benefits2: item.benefits ? item.benefits.split(",") : [],
        };
      });
    },
    //编辑
    editEvt(record, index) {
      this.tableList.forEach((item, i) => {
        if (index != i) {
          item.edit = false;
        }
      });
      record.edit = !record.edit;
      //保存
      if (!record.edit) {
        this.$apis
          .PAYORADDDISCOUNT({
            payorId: 1001,
            id: record.id,
            ratio: record.ratio,
            remark: record.remark,
            discountBenefitList: (record.benefits2 || []).map((item) => {
              return {
                benefitCode: item,
                discountId: record.id,
              };
            }),
          })
          .then((res) => {
            if (res.returnCode == "0000") {
              this.$message.success("编辑成功");
            } else {
              this.$message.error(res.returnMsg);
            }
          });
      }
    },
    //删除
    delRecord(index) {
      this.$modal.confirm({
        title: "删除",
        content: "确定删除该条记录？",
        okText: "确定",
        cancelText: "取消",
        onOk: () => {
          this.$apis
            .PAYORDISCOUNTDELETE({
              id: this.tableList[index].id,
            })
            .then((res) => {
              if (res.returnCode == "0000") {
                this.$message.success("删除成功");
                this.tableList.splice(index, 1);
              } else {
                this.$message.error(res.returnMsg);
              }
            });
        },
      });
    },
  },
};
</script>

<style lang="less" scoped>
.discount-container {
  margin-top: 16px;
}
.title-div {
  line-height: 52px;
  color: #252631;
  font-weight: bold;
}
</style>