<!-- 委托方名录 人员信息 -->
<script name="CustomerInfoStaff" lang="ts" setup>
import { ElMessage } from 'element-plus'
import { mobileReg } from './customer-info'
import type { ICustomerInfoStaff } from './customer-info'
import { useCheckList } from '@/commonMethods/useCheckList'
import { useSetAllRowReadable } from '@/commonMethods/useSetAllRowReadable'
import { addCustomerStaff, deleteCustomerStaff, getCustomerStaffList } from '@/api/resource/customer'

const props = defineProps({
  operation: { type: String, default: '' },
  customerId: { type: String, default: '' },
})

const listQuery = {
  id: '',
  limit: 1000,
  offset: 1,
}

const staffColumns = [
  { text: '姓名', value: 'staffName', align: 'center', required: true },
  { text: '工作部门', value: 'deptName', align: 'center', required: true },
  { text: '职务', value: 'staffJob', align: 'center' },
  { text: '联系方式', value: 'mobile', align: 'center', required: true, reg: mobileReg },
] // 表头

const staffList = ref<ICustomerInfoStaff[]>([]) // 表格数据

// 表格被选中的行
const staffSelected = ref<ICustomerInfoStaff[]>([])

const staffRecord: ICustomerInfoStaff = {
  id: '',
  customerId: '',
  staffName: '',
  deptName: '',
  staffJob: '',
  mobile: '',
  editable: true,
}

// 逻辑
const addEditableRow = (tableName: string) => {
  switch (tableName) {
    case 'staff':
      if (useCheckList(staffList.value, staffColumns, '委托方人员')) {
        useSetAllRowReadable(staffList.value)
        staffList.value.push({ ...staffRecord })
      }
      break

    default:
      break
  }
}

const authMultiSelect = (e: any) => {
  staffSelected.value = e
}

// 根据委托方id查询相关人员
const getStaffListByCustomerId = () => {
  getCustomerStaffList(listQuery).then((res: any) => {
    if (res.code === 200) {
      staffList.value = res.data.rows
    }
  })
}

// 增加委托方人员
const addCustomerStaffRecords = async () => {
  if (useCheckList(staffList.value, staffColumns, '委托方人员') === false) {
    return
  }

  const newRecords = ref<Array<ICustomerInfoStaff>>([])
  newRecords.value = staffList.value.filter(item => item.id === '')

  // 逐个调用添加接口
  if (newRecords.value.length > 0) {
    let recAdded = 0
    await Promise.all(newRecords.value.map(async (record) => {
      await addCustomerStaff(record).then((res) => {
        if (res.code !== 200) {
          ElMessage.error(`委托方人员 ${record.staffName} 添加失败：${res.message}`)
        }
        else {
          recAdded++
        }
      })
    }))

    if (recAdded === newRecords.value.length) {
      ElMessage.success('添加委托方人员成功')
    }

    getStaffListByCustomerId()
  }
}

// 删除委托方人员
const delCustomerStaffRecords = async () => {
  if (staffSelected.value.length === 0) {
    ElMessage.warning('请至少选择一行')
    return
  }

  // 前端界面删除
  staffList.value = staffList.value.filter(item => staffSelected.value.includes(item) === false)

  // 逐个调用后端接口进行删除
  const staffIdsSelected = ref<string[]>([])
  staffIdsSelected.value = staffSelected.value.map((item: { id: string }) => item.id)
  staffIdsSelected.value = staffIdsSelected.value.filter(item => item !== '')
  if (staffIdsSelected.value.length > 0) {
    let recDeleted = 0
    await Promise.all(staffIdsSelected.value.map(async (staffId) => {
      await deleteCustomerStaff({ id: staffId }).then((res) => {
        if (res.code !== 200) {
          ElMessage.error(`删除委托方人员失败：${res.message}`)
        }
        else {
          recDeleted++
        }
      })
    }))

    if (recDeleted === staffIdsSelected.value.length) {
      ElMessage.success('删除委托方人员成功')
    }

    getStaffListByCustomerId()
  }
}

watch(() => props.customerId, (newVal: string) => {
  listQuery.id = newVal
  staffRecord.customerId = newVal
  if (newVal !== '') {
    getStaffListByCustomerId()
  }
}, { immediate: true })

defineExpose({
  addCustomerStaffRecords,
})
</script>

<template>
  <app-container>
    <el-form ref="staffFormRef" label-position="right" label-width="110px" border stripe>
      <table-container title="委托方人员">
        <template v-if="props.operation !== 'detail'" #btns-right>
          <el-button type="primary" @click="addEditableRow('staff')">
            增加行
          </el-button>
          <el-button type="info" @click="delCustomerStaffRecords">
            删除行
          </el-button>
        </template>

        <!-- 表格区域 -->
        <el-table :data="staffList" border style="width: 100%;" @selection-change="authMultiSelect">
          <el-table-column v-if="props.operation !== 'detail'" type="selection" align="center" width="38" />
          <el-table-column align="center" label="序号" width="55" type="index" />
          <el-table-column
            v-for="item in staffColumns"
            :key="item.value"
            :prop="item.value"
            :label="item.text"
            align="center"
          >
            <template #header>
              <span v-show="item.required && props.operation !== 'detail'" style="color: red;">*</span><span>{{ item.text }}</span>
            </template>
            <template #default="scope">
              <span v-if="!scope.row.editable">{{ scope.row[item.value] }}</span>
              <el-input v-else v-model="scope.row[item.value]" :autofocus="true" :placeholder="`${item.text}`" class="input" />
            </template>
          </el-table-column>
        </el-table>
      </table-container>
    </el-form>
  </app-container>
</template>