<template>
  <div>
    <a-input
      placeholder="产品名称模糊搜索"
      v-model="searchPageReqParams.name"
      style="width: 150px; margin-right: 10px"
    />
    <span class="font-semibold">创建时间：</span>
    <timerange
      class="mr-3"
      @getNewTime="getNewTime"
      :startTime="searchPageReqParams.startTime"
      :endTime="searchPageReqParams.endTime"
    />
    <span class="mr-3">产品分类</span>
    <a-select
      :default-value="productType[0]"
      style="width: 120px; margin-right: 10px"
      v-model="searchPageReqParams.type"
      @change="handleChange"
    >
      <a-select-option v-for="(type, i) in productType" :key="i" :value="i">
        {{ type }}
      </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 ["全部", "企业", "个人"];
      },
    },
  },
  computed:{
    ...mapState('loanProductManagement', [
      'start_time',
      'end_time',
      'name',
      'loan_type',
    ]),
  },
  data() {
    return {
      searchPageReqParams: {
        name: "",
        type: 0,
        startTime: undefined as undefined | number,
        endTime: undefined as undefined | number,
        offset: 0,
        limit: PAGE_SIZE,
      },
    };
  },
  watch: {
    searchPageReqParams: {
      deep: true,
      handler(newV) {
        this.productSave({
          name: newV.name,
          start_time: newV.startTime,
          end_time: newV.endTime,
          loan_type: newV.type,
        })
      },
    },
  },
  methods: {
    handleChange(val:any){
      this.searchPageReqParams.type = val
    },
    ...mapMutations('loanProductManagement', {
      productSave: 'save',
    }),
    ...mapActions('loanProductManagement', {
      productQuery: 'query',
    }),
    getNewTime(startTime: number, endTime: number) {
      this.searchPageReqParams.startTime = startTime;
      this.searchPageReqParams.endTime = endTime;
    },
    query() {
      this.productSave({
        page: 1,
      })
      this.productQuery()
    },
    reset() {
      this.searchPageReqParams.name = "";
      this.searchPageReqParams.type = 0;
      this.searchPageReqParams.startTime = undefined;
      this.searchPageReqParams.endTime = undefined;
      this.$nextTick(() => {
        this.productSave({
          page: 1,
        })
        this.query()
      })
    },
  },
});
</script>

<style scoped>
</style>