<template>
  <el-dialog
    v-model="dialogVisible"
    title="批量绑定胜任力标签"
    width="60%"
  >
    <el-form :model="form" label-width="120px">
      <el-form-item label="胜任力标签">
        <el-table :data="form.competency_tags" border style="width: 100%">
          <el-table-column label="标签" width="200">
            <template #default="{ row }">
              <el-select 
                v-model="row.id"
                filterable
                placeholder="请选择胜任力标签"
                style="width: 100%"
              >
                <el-option
                  v-for="item in competencyOptions"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                />
              </el-select>
            </template>
          </el-table-column>
          <el-table-column label="权重" width="100">
            <template #default="{ row }">
              <div class="weight-input">
                <el-input-number 
                  v-model="row.weight" 
                  :min="0" 
                  :max="100"
                  :step="1" 
                  :precision="0"
                  :controls="false"
                  style="width: calc(100% - 20px)"
                />
                <span class="percent-sign">%</span>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="重要性" width="100">
            <template #default="{ row }">
              <el-input-number 
                v-model="row.importance" 
                :min="1"
                :controls="false"
                style="width: 100%"
              />
            </template>
          </el-table-column>
          <el-table-column label="备注">
            <template #default="{ row }">
              <el-input 
                v-model="row.remark" 
                placeholder="请输入备注"
              />
            </template>
          </el-table-column>
          <el-table-column label="操作" width="80" fixed="right">
            <template #default="{ $index }">
              <el-button type="danger" link @click="removeTag($index)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <div style="margin-top: 10px">
          <el-button type="primary" @click="addTag">添加标签</el-button>
        </div>
      </el-form-item>
     <!--  <el-form-item label="清除现有标签">
        <el-switch v-model="form.clear_existing" />
      </el-form-item> -->
    </el-form>
    <template #footer>
      <el-button @click="dialogVisible = false">取消</el-button>
      <el-button type="primary" @click="handleSubmit">确定</el-button>
    </template>
  </el-dialog>
</template>

<script lang="ts" setup>
import { ref, reactive, onMounted } from 'vue'
import { successMessage } from '/@/utils/message'
import * as api from '../api'
import { ElMessage } from 'element-plus'
import { Session } from '/@/utils/storage';
const props = defineProps({
  crudExpose: {
    type: Object,
    required: true
  }
})

const dialogVisible = ref(false)
const selectedQuestions = ref<number[]>([])
const competencyOptions = ref<Array<any>>([])

const form = reactive({
  competency_tags: [] as any[],
  /* clear_existing: true */
})

// 获取胜任力标签列表
const fetchCompetencyList = async () => {
  try {
    const res = await api.GetCompetencyList({
      page: 1,
      limit: 50
    })
    if (res.code === 2000 && res.data?.items) {
      competencyOptions.value = res.data.items
    }
  } catch (error) {
    console.error('获取胜任力标签列表失败:', error)
  }
}

const open = async (selection: any[]) => {
  selectedQuestions.value = selection.map(item => item.id)
  // 打开对话框时获取最新的胜任力标签列表
  await fetchCompetencyList()
  dialogVisible.value = true
}

const addTag = () => {
  form.competency_tags.push({
    id: undefined,
    weight: 100,
    importance: 1,
    remark: ''
  })
}

const removeTag = (index: number) => {
  form.competency_tags.splice(index, 1)
}

const handleSubmit = async () => {
  // 验证是否选择了标签
  if (form.competency_tags.some(tag => !tag.id)) {
    ElMessage.warning('请选择胜任力标签')
    return
  }

  try {
    // 转换权重为小数形式
    const formattedTags = form.competency_tags.map(tag => ({
      ...tag,
      weight: tag.weight // 将百分比转换为小数
    }))

    const res = await api.BatchUpdateCompetencyTags({
      question_ids: selectedQuestions.value,
      competency_tags: formattedTags, // 使用转换后的数据
      tenant_id:Session.get('tenant_id')
    })
    
    if (res.code === 2000) {
      successMessage('批量更新胜任力标签成功')
      dialogVisible.value = false
      // 刷新列表
      props.crudExpose.doRefresh()
      // 重置表单
      form.competency_tags = []
    }
  } catch (error) {
    console.error('批量更新胜任力标签失败', error)
  }
}

// 组件挂载时获取胜任力标签列表
onMounted(() => {
  fetchCompetencyList()
})

defineExpose({
  open
})
</script>

<style scoped>
.el-input-number {
  width: 100%;
}

.weight-input {
  display: flex;
  align-items: center;
}

.percent-sign {
  margin-left: 4px;
}
</style> 