<!--
  Description: 新增作业人员列表
  Author: 李亚光
  Date: 2023-04-24
 -->
<script lang="ts" setup name="addOperatives">
import { ElMessage } from 'element-plus'
import userList from './personListDialog.vue'
import deviceList from './deviceListDialog.vue'
import { getDeptTreeList } from '@/api/system/dept'
import { toTreeList } from '@/utils/structure'
const props = defineProps({
  // 列表数据
  list: {
    type: Array,
    default: () => [],
  },
  // 列表挑剔
  tableTitle: {
    type: String,
    default: '新增作业人员',
  },
  // 是否可操作
  isOperate: {
    type: Boolean,
    default: true,
  },
})
const $route = useRoute()
const userListData = ref<any[]>([])
watch(() => props.list, (newVal) => {
  if (newVal.length) {
    userListData.value = JSON.parse(JSON.stringify(newVal))
  }
}, {
  deep: true,
  immediate: true,
})
// 表格被选中的行
const selectList = ref<any[]>([])
// 表格多选
const multiSelect = (row: any[]) => {
  selectList.value = row
}
const deptTreeList = ref([])
const deptList = ref([])
// 加载组织机构树形下拉
const fetchDeptTree = () => {
  getDeptTreeList().then((res) => {
    if (res.data) { // 将列表转树结构
      deptList.value = res.data
      deptTreeList.value = toTreeList(res.data, '0', true)
    }
  })
}
fetchDeptTree()
const selectPersonRef = ref()
const selectDeviceRef = ref()
// 当前正在操作的人员
const personIndex = ref(0)
// 选择作业人员
const selectPerson = (index: any) => {
  personIndex.value = index
  selectPersonRef.value.initDialog()
}
// 选择设备
const selectDevice = (index: number, type: string) => {
  let id = ''
  if ($route.query.id as string) {
    id = $route.query.id as string
  }
  personIndex.value = index
  selectDeviceRef.value.initDialog(type, id)
}
// 选中的作业人员
const confirmPerson = (row: any) => {
  const person = userListData.value[personIndex.value]
  person.workerName = row.workerName
  person.workerPhoneNumber = row.phoneNumber
  person.deptId = row.deptId
  person.workerDeptName = row.deptName
  person.workerId = row.id
}
// 选中的设备
const confirmDevice = (row: any) => {
  const person = userListData.value[personIndex.value]
  const type = row.Type
  person[type] = row.deviceCode
}
// 新增人员
const add = () => {
  userListData.value.push({
    edit: true,
    workerName: '',
    workerPhoneNumber: '',
    deptId: '',
    workerDeptName: '',
    braceletCode: '', // 手环编号
    hatCode: '', // 安全帽编号
    vastCode: '', // 背心编号
    workerId: '', // 人员id
  })
}
// 删除人员
const del = () => {
  userListData.value = userListData.value.filter((item) => {
    return !selectList.value.includes(item)
  })
}
// 编辑人员
const edit = (index: number) => {
  userListData.value[index].edit = true
}
// 完成编辑
const complete = (index: number) => {
  if (!userListData.value[index].workerName) {
    ElMessage.warning('请先填写完整信息')
    return false
  }
  else if (!userListData.value[index].vastCode || !userListData.value[index].hatCode || !userListData.value[index].braceletCode) {
    ElMessage.warning('请先绑定所有安全设备')
    return false
  }
  userListData.value[index].edit = false
}
defineExpose({ userListData })
</script>

<template>
  <table-container :title="tableTitle">
    <!-- 选择作业人员弹窗 -->
    <user-list ref="selectPersonRef" @add="confirmPerson" />
    <!-- 选择设备弹窗 -->
    <device-list ref="selectDeviceRef" @add="confirmDevice" />
    <template v-if="isOperate" #btns-right>
      <el-button type="primary" @click="add">
        新增
      </el-button>
      <el-button type="info" @click="del">
        删除
      </el-button>
    </template>
    <!-- 查询结果Table显示 -->
    <normal-table
      :data="userListData" :pagination="false" :is-showmulti-select="true" :is-multi="true"
      @multi-select="multiSelect"
    >
      <template #columns>
        <el-table-column label="姓名" align="center">
          <template #default="scope">
            <el-input
              v-if="scope.row.edit" v-model.trim="scope.row.workerName" placeholder="姓名"
              @focus="selectPerson(scope.$index)"
            />
            <div v-else style="height: 32px;line-height: 32px;">
              {{ scope.row.workerName }}
            </div>
          </template>
        </el-table-column>
        <el-table-column label="联系方式" align="center">
          <template #default="scope">
            <!-- <el-input v-if="scope.row.edit" v-model.trim="scope.row.phoneNumber" placeholder="联系方式" /> -->
            <div style="height: 32px;line-height: 32px;">
              {{ scope.row.workerPhoneNumber }}
            </div>
          </template>
        </el-table-column>
        <el-table-column label="所属部门" align="center">
          <template #default="scope">
            <!-- <dept-select v-if="scope.row.edit" v-model="scope.row.deptId" :data="deptTreeList" placeholder="所属部门"
              style="width: 100%;" /> -->
            <div style="height: 32px;line-height: 32px;">
              {{ scope.row.workerDeptName }}
            </div>
          </template>
        </el-table-column>
        <el-table-column label="挂载安全帽编号" align="center">
          <template #default="scope">
            <el-input
              v-if="scope.row.edit" v-model.trim="scope.row.hatCode" placeholder="安全帽编号"
              @focus="selectDevice(scope.$index, 'hatCode')"
            />
            <div v-else style="height: 32px;line-height: 32px;">
              {{ scope.row.hatCode }}
            </div>
          </template>
        </el-table-column>
        <el-table-column label="挂载背心编号" align="center">
          <template #default="scope">
            <el-input
              v-if="scope.row.edit" v-model.trim="scope.row.vastCode" placeholder="背心编号"
              @focus="selectDevice(scope.$index, 'vastCode')"
            />
            <div v-else style="height: 32px;line-height: 32px;">
              {{ scope.row.vastCode }}
            </div>
          </template>
        </el-table-column>
        <el-table-column label="挂载手环编号" align="center">
          <template #default="scope">
            <el-input
              v-if="scope.row.edit" v-model.trim="scope.row.braceletCode" placeholder="手环编号"
              @focus="selectDevice(scope.$index, 'braceletCode')"
            />
            <div v-else style="height: 32px;line-height: 32px;">
              {{ scope.row.braceletCode }}
            </div>
          </template>
        </el-table-column>
        <el-table-column v-if="isOperate" label="操作" align="center">
          <template #default="scope">
            <el-button v-if="!scope.row.edit" link type="primary" size="small" @click="edit(scope.$index)">
              编辑
            </el-button>
            <el-button v-else link type="primary" size="small" @click="complete(scope.$index)">
              完成
            </el-button>
          </template>
        </el-table-column>
      </template>
    </normal-table>
  </table-container>
</template>

<style lang="scss" scoped>
::v-deep {
  .title-left {
    font-size: 16px;
    font-weight: 700;
  }

  .button-area {
    background-color: #ccc;
    padding: 10px;
    margin-bottom: 0 !important;
  }
}
</style>