<template>
    <!-- 所在路段选择弹层 -->
    <SuperTableSelectorDialog
      width="75%"
      v-on="$listeners"
      v-bind="$attrs"
      title="人员选择"
      selectKey="id"
      selectLabel="name"
      select-title-name="派遣人员"
      :treeTabList="['行政维度']"
      :isShow.sync="isShowDialog"
      hintLanguage="提示：请在列表中选择人员后，点击确认。"
      :search-option="optionList"
      :treeData="orgData"
      :tree-item="treeItem"
      :defaultTreeExpandLevel="4"
      :table-data="tableData"
      :table-options="tableOptions"
      :table-loading="tableLoading"
      :tableParams="params"
      :selectedContent="userSelectedContent"
      :isShowSelect="false"
      @open="open"
      @closed="closed"
      @tableRefresh="getTableData"
      @treeChange="treeChange"
      ref="superTableSelectorDialog"
    />
  </template>
  
  <script>
  import {orgTree} from '@/api/systemInterface'
  import {tableData} from '@/api/patrolAndRescue/infoMgmtPatrolsRescues/patrolAndRescuePersonnelMgmt'
  import {refineRequestBody, setQueryValue} from '@/utils/requestWrappers'
  import SuperTableSelectorDialog from './components/SuperTableSelectorDialog/index.vue'
  import {dictionaryEscape, getDictionaryByCode} from '@/utils/dictionary'
  
  export default {
    name: 'UserChoiceDialog',
    components: {SuperTableSelectorDialog},
    props: {
      isShow: {
        default: false,
        type: Boolean
      },
      selectedContent: {
        default: () => ([]),
        type: Array
      },
      teamFullId: {
        default: '',
        type: String
      }
    },
    data() {
      return {
        orgData: [], // 组织树
        optionList: [
          {title: '人员姓名、手机号', prop: ['name', 'tel'], type: 'input', default: true},
          {title: '外包公司', prop: 'out_company_name_', type: 'input'},
          {title: '人员类型', prop: 'type', type: 'select', option: getDictionaryByCode('rylx-xcjyry'), multiple: false},
          {title: '人员职务', prop: 'post', type: 'select', option: getDictionaryByCode('ryzw-xcjyry'), multiple: false},
          {title: '是否外派人员', prop: 'isOut', type: 'select', option: getDictionaryByCode('sfpj'), multiple: false}
        ],
        tableOptions: [
          {label: '人员姓名', minWidth: '30', prop: 'name'},
          {label: '手机号', minWidth: '40', prop: 'tel'},
          {label: '外包公司', minWidth: '65', prop: 'outCompanyName'},
          {label: '人员类型', minWidth: '40', prop: 'type', formatter: ({type}) => dictionaryEscape('rylx-xcjyry', type) || '-'},
          {label: '人员职务', minWidth: '50', prop: 'post', formatter: ({post}) => dictionaryEscape('ryzw-xcjyry', post) || '-'},
          {label: '是否外派人员', minWidth: '50', prop: 'isOut', formatter: ({isOut}) => dictionaryEscape('sfpj', isOut) || '-'},
        ],
        params: {
          pageBean: {pageSize: 20, page: 1, total: 0},
          querys: [
            {operation: 'LIKE', property: 'TEAM_FULL_ID_'},
            {group: 'accountNameTel', operation: 'LIKE', relation: 'OR', property: 'name'},
            {group: 'accountNameTel', operation: 'LIKE', relation: 'OR', property: 'tel'},
            {operation: 'LIKE', property: 'code'},
            {operation: 'LIKE', property: 'out_company_name_'},
            {operation: 'EQUAL', property: 'type'},
            {operation: 'EQUAL', property: 'post'},
            {operation: 'EQUAL', property: 'isOut'}
          ],
          sorter: [
            {direction: '', property: 'name'},
            {direction: '', property: 'tel'},
            {direction: '', property: 'isOut'}
          ]
        },
        tableData: [], // 所在路段数据
        treeItem: {}, // 树选中
        tableLoading: false // 表格loading
      }
    },
    computed: {
      isShowDialog: {
        get() {
          return this.isShow
        },
        set(val) {
          this.$emit('update:isShow', val)
        }
      },
      userSelectedContent: {
        get() {
          return this.selectedContent
        },
        set(val) {
          this.$emit('update:selectedContent', val)
        }
      }
    },
    created() {
      this.getOrgTreeData()
    },
    methods: {
      // 打开弹层时触发
      open() {
        setQueryValue(this.params, 'TEAM_FULL_ID_', this.teamFullId || '')
        this.getTableData()
      },
  
      // 关闭弹层触发
      closed() {
        const {orgData} = this
        // 重置data中的数据
        Object.assign(this.$data, this.$options.data.call(this), {orgData})
        this.treeItem = this.orgData[0] || {}
        setQueryValue(this.params, 'TEAM_FULL_ID_', this.treeItem?.path || '')
      },
  
      // 获取公司树
      async getOrgTreeData() {
        this.orgData = await orgTree()
        this.treeItem = this.orgData[0] || {}
        setQueryValue(this.params, 'TEAM_FULL_ID_', this.treeItem?.path || '')
      },
  
      //获取所在路段列表数据
      async getTableData() {
        this.tableData = []
        this.tableLoading = true
        const {total = 0, rows = []} = await tableData(refineRequestBody(this.params))
        this.params.pageBean.total = total
        this.tableData = rows.map(i => {
          const { id, name, outCompanyName, tel, type, post, isOut, teamFullId } = i
          return { id, name, outCompanyName, tel, type, post, isOut, teamFullId }
        })
        this.tableLoading = false
      },
  
      // 树改变
      treeChange(treeItem) {
        // 修改对应的字段值
        setQueryValue(this.params, 'TEAM_FULL_ID_', treeItem?.path || '')
        this.getTableData()
      }
    }
  }
  </script>
  
  <style lang="scss" scoped>
  </style>
  