<!-- 供方名录 业务能力信息 -->
<script name="SupplierInfoAbility" lang="ts" setup>
import { ElMessage } from 'element-plus'
import type { ISupplierInfoAbility } from './supplier-interface'
import { useCheckList } from '@/commonMethods/useCheckList'
import { useSetAllRowReadable } from '@/commonMethods/useSetAllRowReadable'
import { addSupplierAbilityList, deleteSupplierAbilityList, getSupplierAbilityList } from '@/api/resource/supplier'

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

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

const abilityColumns = [
  { text: '能力名称', value: 'name', align: 'center', required: true, width: 180 },
  { text: '能力描述', value: 'description', align: 'center', required: true },
  { text: '报价', value: 'price', align: 'center', width: 180 },
] // 表头

const abilityList = ref<ISupplierInfoAbility[]>([]) // 表格数据

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

const abilityRecord: ISupplierInfoAbility = {
  id: '',
  supplierId: '',
  name: '',
  price: '',
  description: '',
  editable: true,
}

// 逻辑
const addEditableRow = (tableName: string) => {
  switch (tableName) {
    case 'ability':
      if (useCheckList(abilityList.value, abilityColumns, '业务能力')) {
        useSetAllRowReadable(abilityList.value)
        abilityList.value.push({ ...abilityRecord })
      }
      break

    default:
      break
  }
}

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

// 根据供方id查询关联业务能力
const getAbilityListBySupplierId = () => {
  getSupplierAbilityList(listQuery).then((res: any) => {
    if (res.code === 200) {
      abilityList.value = res.data.rows
    }
  })
}

// 增加业务能力
const addSupplierAbilityRecords = async () => {
  if (useCheckList(abilityList.value, abilityColumns, '业务能力') === false) {
    return
  }

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

  // 调用批量新增接口
  if (newRecords.value.length > 0) {
    addSupplierAbilityList(newRecords.value).then((res) => {
      if (res.code === 200) {
        ElMessage.success('添加业务能力成功')

        getAbilityListBySupplierId()
      }
      else {
        ElMessage.error(`业务能力添加失败：${res.message}`)
      }
    })
  }
}

// 删除业务能力
const delSupplierAbilityRecords = async () => {
  if (abilitySelected.value.length === 0) {
    ElMessage.warning('请至少选择一行')
    return
  }

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

  // 调用后端接口进行批量删除
  const abilityIdsSelected = ref<string[]>([])
  abilityIdsSelected.value = abilitySelected.value.map((item: { id: string }) => item.id)
  abilityIdsSelected.value = abilityIdsSelected.value.filter(item => item !== '')
  if (abilityIdsSelected.value.length > 0) {
    deleteSupplierAbilityList({ ids: abilityIdsSelected.value }).then((res) => {
      if (res.code === 200) {
        ElMessage.success('删除业务能力成功')

        getAbilityListBySupplierId()
      }
      else {
        ElMessage.error(`删除业务能力失败：${res.message}`)
      }
    })
  }
}

watch(() => props.supplierId, (newVal: string) => {
  listQuery.id = newVal
  abilityRecord.supplierId = newVal

  getAbilityListBySupplierId()
})

defineExpose({
  addSupplierAbilityRecords,
})
</script>

<template>
  <el-form ref="abilityFormRef" 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('ability')">
          增加行
        </el-button>
        <el-button type="info" @click="delSupplierAbilityRecords">
          删除行
        </el-button>
      </template>

      <!-- 表格区域 -->
      <el-table :data="abilityList" 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 abilityColumns"
          :key="item.value"
          :prop="item.value"
          :label="item.text"
          :width="item.width"
          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>
</template>