<template>
  <div :level="level" :type="type">
    <span class="my-1 font-semibold">创建时间：</span>
    <timerange
      class="my-1 mr-3"
      :startTime="searchPageReqParams.startTime"
      :endTime="searchPageReqParams.endTime"
      @getNewTime="getNewTime"
    />
    <a-input
      class="my-1"
      placeholder="姓名模糊搜索"
      v-model="searchPageReqParams.queryName"
      style="width: 150px; margin-right: 10px;"
    />
    <a-input
      class="my-1"
      placeholder="手机号模糊搜索"
      v-model="searchPageReqParams.queryTel"
      style="width: 150px; margin-right: 10px;"
    />
    <a-button
      class="my-1"
      type="primary"
      style="margin-right: 10px;"
      @click="query"
    >
      查询
    </a-button>
    <a-button
      class="my-1"
      type="primary"
      style="margin-right: 10px;"
      @click="reset"
    >
      重置
    </a-button>
    <a-button class="my-1" type="primary" @click="showModal">
      新增
    </a-button>
    <component
      class="my-1"
      :is="type == 1 ? 'addNormalManagerModal' : 'addSuperManagerModal'"
      ref="addrModal"
      :userType="type"
      :level="level"
    />
  </div>
</template>

<script lang="ts">
import Vue from 'vue'
import { PropType } from 'vue'
import addNormalManagerModal from './addNormalManagerModal.vue'
import addSuperManagerModal from './addSuperManagerModal.vue'
import timerange from '@/components/TimePicker/index.vue'
import { eLevel } from '@/types/level'
import { addUser } from './const'
import { mapActions, mapMutations, mapState } from 'vuex'
import { nextTick } from 'vue/types/umd'
import { eAddManagerModalMode } from '@/store/UserManagement/types'
import {eTypeOfOperatedObject, iUserManagementState} from "@/store/UserManagement/types"

export default Vue.extend({
  components: { addNormalManagerModal, addSuperManagerModal, timerange },
  props: {
    level: {
      type: Number as PropType<eLevel>,
      default: 0,
    },
    type: {
      type: Number as PropType<addUser>,
      default: addUser.normalManager,
    },
  },
  data() {
    return {
      searchPageReqParams: {
        queryName: '',
        queryTel: '',
        startTime: undefined as undefined | number,
        endTime: undefined as undefined | number,
      },
    }
  },
  watch: {
    searchPageReqParams: {
      deep: true,
      handler(newV) {
        console.log(2)
        if (this.type === addUser.superManager) {
          this.platformSave({
            start: newV.startTime,
            end: newV.endTime,
            userName: newV.queryName,
            phone: newV.queryTel,
          })
        }
      },
    },
  },
  computed: {
    ...mapState('platformUserManagement', [
      'start',
      'end',
      'userName',
      'phone',
    ]),
  },
  methods: {
    ...mapMutations('platformUserManagement', {
      platformSave: 'save',
    }),
    ...mapActions('platformUserManagement', {
      platformQuery: 'query',
    }),
    getNewTime(startTime: number, endTime: number) {
      this.searchPageReqParams.startTime = startTime
      this.searchPageReqParams.endTime = endTime
    },
    query() {
      this.platformSave({
        page: 1,
      })
      this.platformQuery()
    },
    reset() {
      this.searchPageReqParams.queryName = ''
      this.searchPageReqParams.queryTel = ''
      this.searchPageReqParams.startTime = undefined
      this.searchPageReqParams.endTime = undefined
      this.$nextTick(() => {
        this.platformSave({
          page: 1,
        })
        this.query()
      })
    },
    showModal() {
      const rankVal = (JSON.parse(this.$route.query.rankVal as string)) as {name: string, value: number}[];

      this.$store.commit('UserManagement/save', {
        modalMode: eAddManagerModalMode.create, // create表示新增
        typeOfOperatedObject: eTypeOfOperatedObject.manager, // !!!!要改 表示管理员还是客服经理
        searchLevel: this.level, // 当前搜索的层级 如果展示一级分行页面 则是 eLevel.firstLevel_branch
        branchDetailMsg: { // 分支行下拉栏的值
          fb: rankVal[0].name,
          fb_id: rankVal[0].value,
          sb: rankVal[1] && rankVal[1].name || undefined,
          sb_id: rankVal[1] && rankVal[1].value || undefined,
          fsb: rankVal[2] && rankVal[2].name || undefined,
          fsb_id: rankVal[2] && rankVal[2].value || undefined,
          ssb: rankVal[1] && rankVal[1].name || undefined,
          ssb_id: rankVal[1] && rankVal[1].value || undefined,
        }
      } as iUserManagementState)
      ;(this.$refs.addrModal as any).showModal()
    },
  },
})
</script>

<style scoped></style>
