<template>
  <div :columns="columns" :role="role">
    <!-- 调配弹窗 -->
    <deplot-modal ref="deployModal" :level="level"/>
    <!-- 信息列表 -->
    <a-table
      :columns="columns"
      :data-source="dataSource"
      style=" text-align: center; margin-top:40px;"
      bordered
      :pagination="pagination"
      @change="changeHandle"
      >
      <span slot="created_at" slot-scope="text,record">
        {{ record.created_at | formatTime }}
      </span>
      <span slot="level" slot-scope="text,record">
        {{ record.level | filterLevel }}
      </span>
      <span slot="status" slot-scope="text,record">
        {{ record.status | filterStatus }}
      </span>
      <!-- 管理员类型 level + 1 -->
      <!-- 二级分行管理员 -->
      <span slot="secondaryManager" slot-scope="text,record"> <a @click="getSecondaryManageList(record, 1)">查看</a> </span>
      <!-- 一级支行管理员 -->
      <span slot="firstSubManager" slot-scope="text,record"> <a @click="getfirstSubManageList(record, 1)">查看</a> </span>
      <!-- 一级支行客户经理(无) -->
      <span slot="firstSubClientManager" slot-scope="text,record"> <a @click="getFirstSubClientManagerList(record)">查看</a> </span>
      <!-- 一级支行客户 -->
      <span slot="firstSubClient" slot-scope="text,record"> <a @click="getFirstSubClientList(record)">查看</a> </span>
      <!-- 二级支行管理员 -->
      <span slot="secondarySubManager" slot-scope="text,record"> <a @click="getSecondarySubManagerList(record, 1)">查看</a> </span>
      <!-- 二级支行客户经理 -->
      <span slot="secondarySubClientManager" slot-scope="text,record"> <a @click="getSecondarySubClientManageList(record)">查看</a> </span>
      <!-- 二级支行客户 -->
      <span slot="secondarySubClient" slot-scope="text,record"> <a @click="getSecondarySubClientList(record)">查看</a> </span>
        <!-- 操作 -->
      <p slot="action" slot-scope="text,record" >
        <a @click="deploy(record)">调配</a>
        <span v-if="record.status===tableStatus.disable_notOnPosition || record.status===tableStatus.disable_noPosition">
          <a-divider type="vertical" />
          <a @click="() => enable(record.uuid)">启用</a>
        </span>
        <span v-if="record.status===tableStatus.enable_notOnPosition || record.status===tableStatus.enable_onPosition">
          <a-divider type="vertical" />
          <a  @click="disable(record.uuid)">禁用</a>
        </span>
        <span v-if="record.status===tableStatus.disable_noPosition || record.status === tableStatus.enable_onPosition">
          <a-divider type="vertical" />
          <a @click="offJob(record.uuid)">不在岗</a>
        </span>
        <span v-if="record.status===tableStatus.disable_notOnPosition || record.status === tableStatus.enable_notOnPosition">
          <a-divider type="vertical" />
          <a @click="inJob(record.uuid)">在岗</a>
        </span>
      </p>
    </a-table>
    <!-- 操作Modal -->
    <a-modal
      :title="title"
      v-model="show"
      :centered="true"
      :closable="false"
      @ok="handleOk"
      @cancle="show = false"
    >
      <p class=" text-center">{{text}}</p>
    </a-modal>
  </div>
</template>

<script lang="ts">
import Vue, { PropType } from "vue"
import { firstLevelManager } from '@/mock/index'
import { staff , iStaffQueryResItem} from '@/types/staff'
import { eUserStatusAction, eUserStatus } from '@/types/user'
import { eRole, eNewRoleRelatedToBackEnd } from "@/types/role"
import { eLevel } from "@/types/level"
import { getColumns } from '@/const/columns/userManagerCol'
import { userModal } from './const'
import deplotModal from "@/components/UserManage/deployModal.vue"
import Filter from '@/filter/index'
import { mapActions, mapMutations, mapState } from 'vuex'
// import Mixin from "@/views/Root/User/Mixin/index"
import StaffService from '@/service/StaffService'
import { message } from "ant-design-vue"
import { eAddManagerModalMode, eTypeOfOperatedObject } from "@/store/UserManagement/types"


const staff = new StaffService()

export default Vue.extend({
  // mixins: [Mixin],
  components:{ deplotModal },
  filters: {
    filterStatus(val: number) {
      return Filter.filterUserStatus(val)
    },
    formatTime(val: number) {
      return Filter.formatDate(val)
    },
    filterLevel(val: number) {
      return Filter.filterLevel(val)
    }
  },
  props:{
    level:{
      type: Number as PropType<eLevel>,
      default:0
    },
    role:{
      type: Number as PropType<eRole>,
      default:0
    },
  },
  data(){
    return{
      show:false,
      title:'',
      text:'',
      type:userModal.enable,
      id: '',
      params: {} as any
    }
  },
  computed:{
    firstLevelManager():Array<staff>{
      return firstLevelManager
    },
    columns(){
      return getColumns(this.role)
    },
    pagination() {
      return {
        current: this.$store.state.platformUserManagement.page,
        defaultPageSize: this.$store.state.platformUserManagement.page_size,
        total: this.$store.state.platformUserManagement.total
      }
    },
    dataSource() {
      return this.$store.state.platformUserManagement.list
    },
    tableStatus() {
      return eUserStatus
    }
  },
  methods:{
    ...mapMutations('platformUserManagement', {
      platformSave: 'save',
    }),
    ...mapActions('platformUserManagement', {
      platformQuery: 'queryUser',
      platform: 'queryNext'
    }),
    clearSearch() {
      this.platformSave({
        start: undefined,
        end: undefined,
        userName: '',
        phone: ''
      })
    },
    getRouteQuery() {
      if (this.$route.query.rankVal) {
        const keys = JSON.parse(this.$route.query.rankVal as string)
        const level = this.$route.query.level
        const uuid = this.$route.query.uuid
        const role = this.$route.query.role
        this.params = {
          firstBranch: +keys[0]?.value || undefined,
          firstSubBranch: +keys[2]?.value || undefined,
          secondBranch: +keys[1]?.value || undefined,
          secondSubBranch: +keys[3]?.value || undefined,
          level,
          uuid,
          role
        }
        console.log(this.params)
      } else {
        this.params = {
          location: this.$route.query.address
        }
      }
    },
    getLists() {
      this.platformSave({
        ...this.params
      })
      const uuid = this.$route.query.uuid
      if (uuid) {
        this.platform()
      } else {
        this.platformQuery()
      }
    },
    changeHandle(e: any) {
      this.platformSave({
        page: e.current,
      })
      this.platformQuery()
    },
    deploy(record:iStaffQueryResItem){
      const rankVal = (JSON.parse(this.$route.query.rankVal as string)) as {name: string, value: number}[];
      const role = this.$route.query.role === eNewRoleRelatedToBackEnd.ACM ? eTypeOfOperatedObject.clientManager : eTypeOfOperatedObject.manager
      this.$store.commit('UserManagement/save', {
        modalMode: eAddManagerModalMode.edit,
        typeOfOperatedObject: role, //!!!!需要调整 表示管理员还是客户经理
        searchLevel: this.level, 
        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,
        },
        personalMsg: { // 被调配人员信息
          name: record.user_name,
          uid: record.uuid,
          phone: record.phone,
          branchDetailMsg: {
            fb: record.first_branch,
            fb_id: 1, // 后端没有传ID，但是任意设置不影响，制作展示，不做接口数据回传
            sb: record.second_branch,
            sb_id: 1,
            fsb: record.first_sub_branch,
            fsb_id: 1,
            ssb: record.second_sub_branch,
            ssb_id: 1,
            address: record.location,
          },
        },
        modalShow: true,
      })
    },
    enable(key:string){
      this.type = userModal.enable
      this.id = key
      this.title = '启用用户'
      this.text = '确定启用该用户？'
      this.show = true
    },
    disable(key:string){
      this.type = userModal.disable
      this.id = key
      this.title = '禁用用户'
      this.text = '确定禁用该用户？'
      this.show = true
    },
    inJob(key:string){
      this.type = userModal.enable
      this.id = key
      this.title = '设置在岗'
      this.text = '确定将该用户设置为在岗？'
      this.show = true
    },
    offJob(key:string){
      this.type = userModal.enable
      this.id = key
      this.title = '设置不在岗'
      this.text = '确定将该用户设置为在岗？'
      this.show = true
    },
    modifyStauts(status: number) {
      staff.modifyStaffStatus({
        status: status,
        uuid: this.id
      }).then(res => {
        if (res.code === 200) {
          message.success('操作成功')
          this.getLists()
        }
      })
    },
    handleOk(record:any){
      if( this.type == userModal.enable ){
        this.modifyStauts(eUserStatusAction.enable)
      } else if( this.type == userModal.disable ){
        this.modifyStauts(eUserStatusAction.disable)
      } else if( this.type == userModal.inJob ){
        this.modifyStauts(eUserStatusAction.onPosition)
      } else if( this.type == userModal.offJob ){
        this.modifyStauts(eUserStatusAction.notOnPosition)
      }
      this.show = false
    },
    getScanVal(item: any, c?: number) {
      const val = JSON.parse(this.$route.query.rankVal as string)
      if (item.level === 1) {
        val.push({ name: item.second_branch, value: item.sbid })
      } else if (item.level === 2) {
        val.push({ name: item.first_sub_branch, value: item.fsbid })
      } else if (item.level === 3) {
        val.push({ name: item.second_sub_branch, value: item.ssbid })
      }
      console.log(val)
      return val
    },
    // 二级分行管理员
    getSecondaryManageList(item: any, count: number){
      const role = count === 1 ? eNewRoleRelatedToBackEnd.Management : eNewRoleRelatedToBackEnd.ACM
      this.platformSave({
        page: 1
      })
      const v= JSON.stringify(this.getScanVal(item))
      this.$router.push({name:'secondary',query:{level: item.level + count, rankVal: v, uuid: item.uuid, role}})
    },
    // 一级支行管理员
    getfirstSubManageList(item:any, count: number){
      const role = count === 1 ? eNewRoleRelatedToBackEnd.Management : eNewRoleRelatedToBackEnd.ACM
      this.platformSave({
        page: 1
      })
      const v= JSON.stringify(this.getScanVal(item))
      this.$router.push({name:'firstSub',query:{level: item.level + count, rankVal: v, uuid: item.uuid, role}})
    },
    // 一级支行客户经理
    getFirstSubClientManagerList(item:any, count: number){
      const role = count === 1 ? eNewRoleRelatedToBackEnd.Management : eNewRoleRelatedToBackEnd.ACM
      this.platformSave({
        page: 1
      })
      const v= JSON.stringify(this.getScanVal(item))
      this.$router.push({name:'firstSubClientManager',query:{level: item.level, rankVal: v, uuid: item.uuid, role}})
    },
    // 一级支行客户
    getFirstSubClientList(item:any){
      this.platformSave({
        page: 1
      })
      this.$router.push({name:'firstSubClient',query:{uuid: item.uuid, rankVal: this.$route.query.rankVal}})
    },
    // 二级支行管理员
    getSecondarySubManagerList(item:any, count: number){
      const role = count === 1 ? eNewRoleRelatedToBackEnd.Management : eNewRoleRelatedToBackEnd.ACM
      this.platformSave({
        page: 1
      })
      const v= JSON.stringify(this.getScanVal(item))
      this.$router.push({name:'secondarySub',query:{level: item.level + count, rankVal: v, uuid: item.uuid, role}})
    },
    // 二级支行客户经理
    getSecondarySubClientManageList(item: any, count: number){
      const role = count === 1 ? eNewRoleRelatedToBackEnd.Management : eNewRoleRelatedToBackEnd.ACM
      this.platformSave({
        page: 1
      })
      const v= JSON.stringify(this.getScanVal(item))
      this.$router.push({name:'secondarySubClientManager',query:{level: item.level, rankVal: v, uuid: item.uuid, role}})
    },
    // 二级支行客户
    getSecondarySubClientList(item: any){
      this.platformSave({
        page: 1
      })
      this.$router.push({name:'secondarySubClient',query:{uuid: item.uuid, rankVal: this.$route.query.rankVal}})
    },
  },
  created() {
    this.clearSearch()
    this.getRouteQuery()
    this.getLists()
  },
})
</script>

<style scoped>

</style>