<!-- 筛选系统用户弹窗 -->
<script name="FilterCustomerStaff" lang="ts" setup>
import { ElMessage } from 'element-plus'
import type { ICustomerInfo } from '../info/customer-info'
import type { ICustomerFilter, ICustomerTree } from './customer-questionnaire'
import type { IlistQueryType } from '@/views/system/user/user-interface'
import { getUserList } from '@/api/system/user'
import { getCustomerInfoList } from '@/api/resource/customer'
import type { TableColumn } from '@/components/NormalTable/table_interface'

const emit = defineEmits(['recordSelected'])

const defaultProps = {
  children: 'children',
  label: 'customerName',
}

// 定义变量
const customerIdSelected = ref<string>('')
const customerNameSelected = ref<string>('')

const showFilterDialog = ref(false)
const customerQuery = ref<ICustomerFilter>({
  customerName: '',
  approvalStatus: '0', // 查询委托方名录
  formId: 'zyglwtfml', // 表单Id
  offset: 1,
  limit: 1000,
})
const sysUserQuery = ref<IlistQueryType>({
  keywords: '',
  deptId: '',
  offset: 1,
  limit: 10,
  sort: '',
  beginTime: '',
  endTime: '',
  deptType: '',
})
const sysUserList = ref([])
const total = ref<number>(0) // 数据总条数
const columns = ref <Array<TableColumn>>([
  { text: '账号', value: 'account', align: 'center' },
  { text: '姓名', value: 'name', align: 'center' },
  { text: '部门', value: 'deptName', align: 'center' },
]) // 表头

const customerTree = ref<Array<ICustomerTree>>([])

// 查询用户列表
const getSysUserList = () => {
  getUserList(sysUserQuery.value).then((res) => {
    if (res.code === 200) {
      sysUserList.value = res.data.rows.map((item: any) => {
        return {
          ...item,
          customerId: customerIdSelected.value,
          customerName: customerNameSelected.value,
        }
      })
      total.value = Number(res.data.total)
    }
  })
}

// 查询委托方名录列表
const getCustomerList = () => {
  getCustomerInfoList(customerQuery.value).then((res) => {
    if (res.code === 200) {
      customerTree.value = res.data.rows
    }
    else {
      customerTree.value = []
    }
  })
}

// 逻辑
const changePage = (val: { size?: number; page?: number }) => {
  if (val && val.size) {
    sysUserQuery.value.limit = val.size
  }
  if (val && val.page) {
    sysUserQuery.value.offset = val.page
  }
  getSysUserList()
}

// 点击树形结构
const handleNodeClick = (data: ICustomerInfo) => {
  sysUserQuery.value.deptId = data.deptId

  // 赋值选中的委托方
  customerIdSelected.value = data.id
  customerNameSelected.value = data.customerName

  getSysUserList()
}

// 选中用户
const selectSingleUser = (row: Object) => {
  emit('recordSelected', row)
}

const showOrHideFilterDialog = (show: boolean) => {
  if (show === false) {
    customerQuery.value.customerName = ''
    customerQuery.value.approvalStatus = '0'

    sysUserQuery.value.keywords = ''
    sysUserQuery.value.offset = 1
    sysUserQuery.value.limit = 10
  }
  else {
    getCustomerList()
  }

  showFilterDialog.value = show
}

defineExpose({
  showOrHideFilterDialog,
})
</script>

<template>
  <el-dialog v-model="showFilterDialog" title="选择委托方和填写人" :append-to-body="true" :close-on-click-modal="false" top="10vh" width="75%">
    <div class="container">
      <!-- 左侧组织机构 -->
      <div class="left-container">
        <div class="dept-div">
          <el-card class="box-card" shadow="always">
            <search-item>
              <el-input v-model="customerQuery.customerName" placeholder="委托方名称" clearable @change="getCustomerList" />
            </search-item>

            <el-scrollbar height="100%" class="user-dept-scroll">
              <el-tree
                ref="refCustomerTree"
                :data="customerTree" :props="defaultProps" node-key="id"
                default-expand-all :highlight-current="true"
                :expand-on-click-node="false"
                @node-click="handleNodeClick"
              />
            </el-scrollbar>
          </el-card>
        </div>
      </div>

      <!-- 右侧表格 -->
      <div ref="tableContainer" class="table">
        <search-area :need-clear="false" @search="getSysUserList">
          <search-item>
            <el-input v-model="sysUserQuery.keywords" placeholder="姓名" clearable />
          </search-item>
        </search-area>

        <!-- 表格数据展示 -->
        <table-container :title-show="false">
          <!-- 表格区域 -->
          <normal-table
            id="sysUserFilter"
            :data="sysUserList" :total="total" :columns="columns"
            :query="{ limit: sysUserQuery.limit, offset: sysUserQuery.offset }"
            @change="changePage"
          >
            <template #preColumns>
              <el-table-column label="序号" width="55" align="center">
                <template #default="scope">
                  {{ (sysUserQuery.offset - 1) * sysUserQuery.limit + scope.$index + 1 }}
                </template>
              </el-table-column>
            </template>
            <template #columns>
              <el-table-column fixed="right" label="操作" align="center" width="130">
                <template #default="{ row }">
                  <el-button size="small" type="primary" @click="selectSingleUser(row)">
                    选定
                  </el-button>
                </template>
              </el-table-column>
            </template>
          </normal-table>
        </table-container>
      </div>
    </div>
  </el-dialog>
</template>

<style lang="scss" scoped>
// 样式
.container {
  width: 100%;
  display: flex;

  .left-container {
    width: 30%;
  }

  :deep(.el-radio__label) {
    display: none;
  }

  .table {
    width: 70%;
  }
}

.dept-div {
  padding-right: 12px;

  :deep(.el-card) {
    // height: 100vh;
    background-color: #fff;
  }

  .box-card {
    width: 100%;

    .user-dept-scroll {
      width: 100%;
      // height: calc(100vh - 120px);
    }
  }
}
</style>
