<template>
  <div>
    <a-input
      placeholder="产品名称模糊搜索"
      v-model="product_name"
      style="width: 150px; margin-right: 10px"
    />
    <span class="font-semibold">新增时间：</span>
    <timerange
      class="mr-3"
      @getNewTime="getNewTime"
      :startTime="start_time"
      :endTime="end_time"
    />
    <span class="mr-3">产品分类</span>
    <a-select
      style="width: 120px; margin-right: 10px"
      :value="loan_type"
      @change="handleChangeType"
    >
      <a-select-option v-for="(type, i) in productType" :key="i" :value="i">
        {{ type }}
      </a-select-option>
    </a-select>
    <span class="mr-3">产品状态</span>
    <a-select
      style="width: 120px; margin-right: 10px"
      :value="product_status"
      @change="handleChangeStatus"
    >
      <a-select-option
        v-for="(status, i) in productStatus"
        :key="i"
        :value="status.value"
      >
        {{ status.title }}
      </a-select-option>
    </a-select>
    <a-button type="primary" style="margin-right: 10px" @click="query"
      >查询</a-button
    >
    <a-button type="primary" style="margin-right: 10px" @click="reset"
      >重置</a-button
    >
    <a-button
      type="primary"
      @click="$router.push({ name: 'publishLoanProduct' })"
      >新增</a-button
    >
  </div>
</template>

<script lang="ts">
import Vue, { PropType } from "vue";
import timerange from "@/components/TimePicker/index.vue";
import LoanProductService from "@/service/LoanProductService/index";
import { PAGE_SIZE } from "@/const/config/page";
import { mapActions, mapMutations, mapState } from "vuex";
export default Vue.extend({
  components: { timerange },
  props: {
    productType: {
      type: Array as PropType<String[]>,
      default() {
        return ["全部", "企业", "个人"];
      },
    },
    productStatus: {
      type: Array as PropType<Object[]>,
      default() {
        return [
          {
            title: "全部",
            value: 0,
          },
          {
            title: "未发布",
            value: 1,
          },

          {
            title: "已发布",
            value: 4,
          },

          {
            title: "普通",
            value: 2,
          },

          {
            title: "热门",
            value: 3,
          },
        ];
      },
    },
  },
  computed: {
    ...mapState("loanProductManagement", [
      "start_time",
      "end_time",
      "product_name",
      "loan_type",
      "product_status",
    ]),
  },
  data() {
    return {
      searchPageReqParams: {
        name: "",
        type: 0,
        status: 0,
        startTime: undefined as undefined | number,
        endTime: undefined as undefined | number,
        offset: 0,
        limit: PAGE_SIZE,
      },
    };
  },
  watch: {
    searchPageReqParams: {
      deep: true,
      handler(newV) {
        this.productSave({
          product_name: newV.name,
          start_time: newV.startTime,
          end_time: newV.endTime,
          loan_type: newV.type,
          product_status: newV.status,
        });
      },
    },
  },
  methods: {
    handleChangeType(val: any) {
      this.productSave({
        loan_type: val,
      });
    },
    handleChangeStatus(val: any) {
      this.productSave({
        product_status: val,
      });
    },
    ...mapMutations("loanProductManagement", {
      productSave: "save",
    }),
    ...mapActions("loanProductManagement", {
      productQuery: "query",
    }),
    getNewTime(startTime: number, endTime: number) {
      this.productSave({
        start_time: startTime,
        end_time: endTime,
      });
    },
    query() {
      this.productSave({
        page: 1,
        offset: 0,
      });
      this.productQuery();
    },
    reset() {
      this.$nextTick(() => {
        this.productSave({
          page: 1,
          loan_type: 0,
          product_status: 0,
          start_time: undefined,
          product_name: "",
          end_time: undefined,
        });
        this.query();
      });
    },
  },
});
</script>

<style scoped>
</style>