<script setup name="driverDialog">
import { getCurrentInstance, reactive, ref, watch } from 'vue'
import { userList } from '@/http/apis/systemManage/userManage'
import store from '@/store'
import { storeToRefs } from 'pinia'

const { proxy } = getCurrentInstance(),
  props = defineProps({
    visible: {
      type: Boolean,
      default: false,
      required: true
    },
    data: {
      type: Array,
      default: undefined
    },
    orgCode: {
      type: String,
      default: ''
    }
  }),
  roleList = storeToRefs(store.userStore).roleList || {},
  emits = defineEmits(['close', 'getUserData']),
  searchForm = reactive({
    userRoleList: undefined,
    name: undefined,
    phoneNo: undefined
  }),
  tableListRef = ref(),
  total = ref(0),
  column = [
    {
      type: 'selection',
      reserveSelection: true,
      width: '55'
    },
    {
      label: '姓名',
      key: 'name',
      prop: 'name'
    },
    {
      label: '所属单位（主职）',
      key: 'orgName',
      prop: 'orgName',
      showOverflowTooltip: true,
      width: 250
    },
    {
      label: '所属区域',
      key: 'regionId',
      prop: 'regionId',
      width: '150'
    },
    {
      label: '用户角色',
      slot: 'userRoleList',
      width: 200
    }
  ],
  tableData = ref([]),
  getTableData = async (pageParams = tableListRef.value?.pageParams) => {
    const res = await userList({
      ...pageParams,
      ...searchForm,
      orgCode: props.orgCode,
      status: 'ENABLE'
    })
    total.value = res.data.total
    tableData.value = res.data.records || []
    if (props.data && props.data.length) {
      tableData.value && tableData.value.forEach(item => {
        const dataIds = props.data.map(i => i.id * 1)
        if (dataIds.includes(item.userId)) {
          tableListRef.value.toggleRowSelect(item, true)
        }
      })
    }
  },
  search = () => {
    getTableData()
  },
  reset = () => {
    searchForm.userRoleList = undefined
    searchForm.name = undefined
    searchForm.phoneNo = undefined
    tableListRef.value.pageParams.pageNumber = 1
    tableListRef.value.pageParams.pageSize = 10
    getTableData()
  },
  selectData = ref([]),
  selectionChange = val => {
    selectData.value = val
  },
  confirm = () => {
    if (selectData.value?.length > 10) {
      proxy.$messageBox.warning('最多选择10位人员')
    } else {
      emits('getUserData', selectData.value)
    }
  }
watch(
  () => props.visible,
  async val => {
    if (val) {
      getTableData()
      store.userStore.setRoleStore()
    }
  }
)
</script>

<template>
  <el-dialog
    :model-value="visible"
    title="选择人员"
    width="840px"
    destroy-on-close
    @close="emits('close')"
  >
    <div class="search mb-16">
      <el-form label-suffix=":" :model="searchForm" size="small">
        <el-row :gutter="16" class="mb-16">
          <el-col :span="8">
            <el-form-item label="用户姓名">
              <el-input
                v-model="searchForm.name"
                placeholder="请输入"
              />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="手机号码">
              <el-input
                v-model="searchForm.phoneNo"
                maxlength="11"
                placeholder="请输入"
              />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="用户角色">
              <el-select
                v-model="searchForm.userRoleList"
                style="width: 100%"
                clearable
                placeholder="请选择"
              >
                <el-option
                  v-for="(item,index) in roleList"
                  :key="index"
                  :label="item.name"
                  :value="item.id"
                />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item class="btn">
              <el-button type="primary" @click="search">查询</el-button>
              <el-button type="info" @click="reset">重置</el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <table-list
      ref="tableListRef"
      :column="column"
      :data="tableData"
      :total="total"
      row-key="userId"
      @selection-change="selectionChange"
      @get-table-data="getTableData"
    >
      <template #userRoleList="{scope}">
        <el-tag
          v-for="(item,index) in scope.row.userRoleList"
          :key="index"
          type="info"
          class="mr-4"
        >{{ item.name }}</el-tag>
      </template>
    </table-list>
    <template #footer>
      <el-button type="primary" size="small" @click="confirm">
        确定
      </el-button>
      <el-button size="small" @click="emits('close')">
        关闭
      </el-button>
    </template>
  </el-dialog>
</template>
