<template>
  <div>
    <p class="text-2xl font-bold mb-5">用户管理</p>
    <div>
      <!-- 级联选择 -->
      <!-- <a-cascader
        :disabled="search.length == 0 ? false : true"
        v-model="value"
        @change="handleChange"
        placeholder="通过选择搜索"
        style="width: 40%; margin-right: 15px"
      /> -->
      <header-select
        ref="headerSelect"
        :setFooList="setFooList"
        :fooList="fooList"
        :level="level"
        :role="role"
      />
      <!-- 搜索框 -->
      <!-- <a-input
        :disabled="value.length == 0 ? false : true"
        placeholder="通过输入详细地址搜索"
        v-model="search"
        style="width: 20%; margin-right: 15px"
      /> -->
      <a-select style="width: 120px" v-model="type" :disabled="true">
        <a-select-option v-for="item in options1" :key="item.value" :value="item.value">
          {{ item.label }}
        </a-select-option>
      </a-select>
      <a-select style="width: 120px" v-model="search">
        <a-select-option v-for="item in option" :key="item.value" :value="item.value">
          {{ item.label }}
        </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
      >
    </div>
  </div>
</template>

<script lang="ts">
import Vue from 'vue'
import { Cascader,Icon} from 'ant-design-vue'
import { options } from '@/mock/index'
import { message } from 'ant-design-vue'
import StaffService from "@/service/StaffService";
import { getUserMsg } from "@/utils/userMsg/userMsg"
import { eLevel } from '@/types/level';
import { bank } from '@/types/staff';
import { fooList } from "@/views/Root/OutletManagement/components/HeaderSelect/const";
import { PAGE_SIZE } from "@/const/config/page"
import HeaderSelect from "@/views/Root/OutletManagement/components/HeaderSelect/index.vue";
import { eNewRoleRelatedToBackEnd } from "@/types/role"
import { mapMutations } from 'vuex'
Vue.use(Cascader)
Vue.prototype.$message = message

export default Vue.extend({
  components: {
    HeaderSelect,
    Icon
  },
  computed:{
    options(){
      return options
    },
    level(): number | undefined {
      return getUserMsg()?.level;
    },
    role() {
      return getUserMsg()?.newRole;
    },
  },
  data(){
    return{
      search: eNewRoleRelatedToBackEnd.Management,
      type: bank['一级分行'],
      value:[],
      fooList,
      options1: [
        {
          label: '一级分行',
          value: bank['一级分行']
        },
        {
          label: '二级分行',
          value: bank['二级分行']
        },
        {
          label: '一级支行',
          value: bank['一级支行']
        },
        {
          label: '二级支行',
          value: bank['二级支行']
        }
      ],
      option: [
        {
          label: eNewRoleRelatedToBackEnd.Management,
          value: eNewRoleRelatedToBackEnd.Management
        },
        {
          label: eNewRoleRelatedToBackEnd.ACM,
          value: eNewRoleRelatedToBackEnd.ACM
        }
      ]
    }
  },
  mounted(){
    this.clearPostion()
    this.getBranchList()
  },
  methods:{
    ...mapMutations('platformUserManagement', {
      platformSave: 'save',
    }),
    clearPostion() {
      this.platformSave({
        location: '',
        firstBranch: undefined,
        firstSubBranch: undefined,
        secondBranch: undefined,
        secondSubBranch: undefined,
      })
    },
    setFooList(v: any[]) {
      this.fooList = [...v];
      for (let i = 0; i < v.length; i++) {
        if (!v[i].value) {
          this.type = i - 1 < 0 ? 0 : i - 1
          break
        } else if (i === v.length - 1 && v[i].value) {
          this.type = i
        }
      }
    },
    async getBranchList(){
      const userLevel = getUserMsg()?.level
      console.log("level",userLevel);
      
      const ret = StaffService.getInstance().getBranch({
        level:userLevel as eLevel,
        page:5,
        page_size:PAGE_SIZE,
      });
      
      console.log(ret);
      
    },
    query(){
      console.log(this.fooList)
      const levelList = []
      for (let item of this.fooList) {
        if (item.value) {
          let name = ''
          for (let i of item.options) {
            if (i.ID === item.value) {
              name = i.Name
            }
          }
          levelList.push({ value: item.value, name })
        } else {
          break
        }
      }
      if( levelList.length==0 && this.search.length == 0 ){
          this.$message.info({content:"请通过选择或者输入详细地址搜索",icon:()=>{return this.$createElement('Icon',{style:{color:'#3E4FAF'},props:{type:'exclamation-circle'}})}})
      }else{
        this.selectTables(levelList)
      }
    },
    selectTables(arr: Array<{value: number, name: string}>) {
      const count = arr.length
      const query = {
        rankVal: JSON.stringify(arr),
        role: this.search,
        level: this.type + 1 + '',
        // ... permission
      }
      if (this.search === eNewRoleRelatedToBackEnd.ACM && count >= 3) {
        switch (count) {
          case 3:
            this.$router.push({path: '/backend/user/firstSubClientManager', query })
            break
          case 4:
            this.$router.push({path: '/backend/user/secondarySubClientManager', query })
        }
      } else {
        switch (count) {
          case 1:
            this.$router.push({path: '/backend/user/firstLevel', query })
            break
          case 2:
            this.$router.push({path: '/backend/user/secondary', query })
            break
          case 3:
            this.$router.push({path: '/backend/user/firstSub', query })
            break
          case 4:
            this.$router.push({path: '/backend/user/secondarySub', query })
        }
      }
    },
    reset(){
      (this.$refs.headerSelect as any).init();
      this.search = eNewRoleRelatedToBackEnd.Management
    },
  }
})
</script>