<template>
  <div>
    <a-table
      :columns="columns"
      :data-source="dataSource"
      style="text-align: center; margin-top: 40px"
      bordered
      :loading="loading"
      :pagination="false"
      @change="handleChange"
    >
      <template #created_at="text">
        {{ text | formatDate }}
      </template>
      <span slot="name" slot-scope="text">
        {{ text.inst_name }}-{{ text.product_name }}
      </span>
      <template #loan_type="text">
        {{ text | filterLoanType }}
      </template>
      <span slot="date" slot-scope="text">
        {{ text.min_date }}-{{ text.max_date }}
      </span>
      <span slot="rate" slot-scope="text">
        {{ text.rate_lower }}-{{ text.rate_upper }}
      </span>
      <span slot="amount" slot-scope="text">
        {{ text.min_amount }}-{{ text.max_amount }}
      </span>
      <template #guarantee_type="text">
        {{ text | filterGuaranteeType }}
      </template>
      <template #product_status="text">
        {{ text | filterProductStatus }}
      </template>
      <span slot="products" slot-scope="text, record">
        <a @click="getIntroduction(record)">查看</a>
      </span>
      <span slot="features" slot-scope="text, record">
        <a @click="getCharacteristic(record)">查看</a>
      </span>
      <span slot="apply_to" slot-scope="text, record">
        <a @click="getTarget(record)">查看</a>
      </span>
      <span slot="apply_cond" slot-scope="text, record">
        <a @click="getApplication(record)">查看</a>
      </span>
      <span slot="submit_cond" slot-scope="text, record">
        <a @click="getSubmission(record)">查看</a>
      </span>
      <!-- 操作 -->
      <div slot="action" slot-scope="text, record">
        <!-- 下架状态 -->
        <div v-if="record.product_status == eProductStatus.unpublished">
          <a @click="toAdd(record)">上架</a>
          <a-divider type="vertical" />
          <a
            @click="
              $router.push({
                name: 'editLoanProduct',
                query: { record: JSON.stringify(record) },
              })
            "
            >编辑</a
          >
          <a-divider type="vertical" />
          <a @click="toDelete(record)">删除</a>
        </div>
        <!-- 上架状态 -->
        <div v-else>
          <a @click="toRemove(record)">下架</a>
          <a-divider type="vertical" />
          <a
            v-if="record.product_status == eProductStatus.normal"
            @click="setAsHot(record)"
          >
            热门
          </a>
          <a v-else @click="setAsCommon(record)">普通</a>
        </div>
      </div>
    </a-table>
    <a-pagination
      class="text-right mt-4"
      :total="total"
      :pageSize="pageSize"
      :current="current"
      @change="handlePaginationChange"
    ></a-pagination>
    <!-- 操作弹窗 -->
    <a-modal
      v-model="show"
      :title="title"
      :centered="true"
      @ok="handleOk"
      :closable="false"
    >
      <p class="text-center">{{ content }}</p>
    </a-modal>
    <!-- 信息弹窗 -->
    <a-modal v-model="visible" :title="title" :centered="true" footer="">
      <p class="text-center">{{ content }}</p>
    </a-modal>
  </div>
</template>

<script lang="ts">
import Vue from "vue";
import columns from "@/const/columns/productColumn";
import {
  eProductStatus,
  editableProductStatus,
  eProductType,
  eGuaranteeType,
} from "@/types/loanProduct";
import { modalType } from "./const";
import { mapActions, mapMutations, mapState } from "vuex";
import LoanProductService from "@/service/LoanProductService";
import { Pagination } from "ant-design-vue";

export default Vue.extend({
  computed: {
    ...mapState("loanProductManagement", {
      productList: "list",
      productPage: "page",
      total: "total",
      pageSize: "limit",
      loading: "loading",
      offset: "offset",
    }),
    current(): number {
      return this.offset / this.pageSize + 1
    },
    columns() {
      return columns;
    },
    dataSource(): any[] {
      return this.productList;
    },
  },
  data() {
    return {
      type: modalType.add,
      show: false,
      visible: false,
      uuid: "",
      content: "",
      title: "",
      status: "",
      eProductStatus,
      editableProductStatus,
      eProductType,
      eGuaranteeType,
      filteredInfo:null as any
    };
  },
  methods: {
    ...mapMutations("loanProductManagement", {
      loanProductSave: "save",
    }),
    ...mapActions("loanProductManagement", {
      loanProductQuery: "query",
    }),
    handlePaginationChange(page: number) {
      const offset = (page - 1) * this.pageSize;
      this.loanProductSave({
        page,
        offset
      });
      this.loanProductQuery();
    },
    handleChange(pagination:Pagination, filters:any, sorter:any) {
      console.log('Various parameters',filters);
      this.filteredInfo = filters;
    },
    getIntroduction(record: any) {
      this.title = "产品介绍";
      this.content = record.products;
      this.visible = true;
    },
    getCharacteristic(record: any) {
      this.title = "产品特点";
      this.content = record.features;
      this.visible = true;
    },
    getTarget(record: any) {
      this.title = "适用客户";
      this.content = record.apply_to;
      this.visible = true;
    },
    getApplication(record: any) {
      this.title = "申请条件";
      this.content = record.apply_cond;
      this.visible = true;
    },
    getSubmission(record: any) {
      this.title = "提交条件";
      this.content = record.submit_cond;
      this.visible = true;
    },
    toAdd(record: any) {
      this.uuid = record.uuid;
      this.content = "确定上架产品？";
      this.title = "上架产品";
      this.type = modalType.add;
      this.show = true;
    },
    toRemove(record: any) {
      this.uuid = record.uuid;
      this.content = "确定下架产品？";
      this.title = "下架产品";
      this.type = modalType.remove;
      this.show = true;
    },
    setAsCommon(record: any) {
      this.uuid = record.uuid;
      this.content = "确定设置为普通产品？";
      this.title = "设置产品";
      this.type = modalType.common;
      this.show = true;
    },
    setAsHot(record: any) {
      this.uuid = record.uuid;
      this.content = "确定设置为热门产品？";
      this.title = "设置产品";
      this.type = modalType.hot;
      this.show = true;
    },
    toDelete(record: any) {
      this.uuid = record.uuid;
      this.content = "确定删除产品？";
      this.title = "删除产品";
      this.type = modalType.delete;
      this.show = true;
    },
    ...mapMutations("loanProductManagement", {
      productSave: "save",
    }),
    ...mapActions("loanProductManagement", {
      productQuery: "query",
    }),
    async handleOk() {
      if (this.type == modalType.add) {
        const ret = await LoanProductService.getInstance().modifyLoanStatus({
          product_status: editableProductStatus.normal,
          uuid: this.uuid,
        });
        console.log(ret);
      } else if (this.type == modalType.remove) {
        await LoanProductService.getInstance().modifyLoanStatus({
          product_status: editableProductStatus.unpublished,
          uuid: this.uuid,
        });
      } else if (this.type == modalType.common) {
        await LoanProductService.getInstance().modifyLoanStatus({
          product_status: editableProductStatus.normal,
          uuid: this.uuid,
        });
      } else if (this.type == modalType.hot) {
        await LoanProductService.getInstance().modifyLoanStatus({
          product_status: editableProductStatus.hot,
          uuid: this.uuid,
        });
      } else if (this.type == modalType.delete) {
        await LoanProductService.getInstance().deleteLoanItem(this.uuid);
      }
      this.productSave({
        page: 1,
      });
      this.productQuery();
      this.show = false;
    },
  },
});
</script>

<style>
.ant-modal-header {
  text-align: center;
}
.ant-modal-footer {
  text-align: center;
}
</style>