<script setup lang="ts" generic="T">
const { errorList } = defineProps<{
  errorList: T[]
}>()

const visible = defineModel<boolean>('visible', { required: true })

const handleContent = (content: string) => {
  // 弹窗展示
  ElMessageBox.alert(content, '案例全部文本内容', {
    confirmButtonText: '确定',
  })
}
</script>

<template>
  <el-dialog v-model="visible" title="以下数据导入失败" width="80vw">
    <el-table :data="errorList" style="width: 100%" height="500">
      <el-table-column prop="errorMsg" label="错误信息" width="200"></el-table-column>
      <el-table-column label="来源对象" align="center">
        <el-table-column prop="jobNo" label="工号" width="120"></el-table-column>
        <el-table-column prop="name" label="姓名" width="120"></el-table-column>
      </el-table-column>
      <el-table-column prop="title" label="案例标题" width="200"></el-table-column>
      <!-- 内容过多加入tooltip -->
      <el-table-column prop="content" label="案例文本内容" width="300">
        <template #default="{ row }">
          <!-- 省略号 -->
          <div
            class="line-clamp-1 text-blue-500 cursor-pointer"
            @click="handleContent(row.content)"
          >
            {{ row.content }}
          </div>
        </template>
      </el-table-column>
      <el-table-column label="文化关键词（次关键词选填）" align="center">
        <el-table-column prop="cultureKeywordMain" label="主关键词" width="160">
          <template #default="{ row }">
            <el-tag type="primary"> {{ row.cultureMain }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="cultureKeywordSecond" label="次关键词1" width="160">
          <template #default="{ row }">
            <el-tag v-if="row.cultureSub1" type="primary">
              {{ row.cultureSub1 }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="cultureKeywordSecond" label="次关键词2" width="160">
          <template #default="{ row }">
            <el-tag v-if="row.cultureSub2" type="primary">
              {{ row.cultureSub2 }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="cultureKeywordSecond" label="次关键词3" width="160">
          <template #default="{ row }">
            <el-tag v-if="row.cultureSub3" type="primary">
              {{ row.cultureSub3 }}
            </el-tag>
          </template>
        </el-table-column>
      </el-table-column>
      <el-table-column label="年度主推关键词（选填）" align="center">
        <el-table-column prop="yearMain" label="主关键词" width="160"></el-table-column>
        <el-table-column prop="yearSub1" label="次关键词1" width="160"></el-table-column>
      </el-table-column>
      <el-table-column prop="caseType" label="案例类型（选填）" width="120"></el-table-column>
      <el-table-column label="关联场景（选填）" align="center">
        <el-table-column prop="sceneMain" label="主关键词" width="160">
          <template #default="{ row }">
            <el-tag v-if="row.sceneMain" type="primary">
              {{ row.sceneMain }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="abnormalReason" label="次关键词1" width="160">
          <template #default="{ row }">
            <el-tag v-if="row.sceneSub1" type="primary">
              {{ row.sceneSub1 }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="abnormalReason" label="次关键词2" width="160">
          <template #default="{ row }">
            <el-tag v-if="row.sceneSub2" type="primary">
              {{ row.sceneSub2 }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="abnormalReason" label="次关键词3" width="160">
          <template #default="{ row }">
            <el-tag v-if="row.sceneSub3" type="primary">
              {{ row.sceneSub3 }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="abnormalReason" label="次关键词4" width="160">
          <template #default="{ row }">
            <el-tag v-if="row.sceneSub4" type="primary">
              {{ row.sceneSub4 }}
            </el-tag>
          </template>
        </el-table-column>
      </el-table-column>
      <el-table-column label="关联部门（选填）" align="center">
        <el-table-column label="部门1" width="160">
          <template #default="{ row }">
            <el-tag v-if="row.dept1" type="primary">
              {{ row.dept1 }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="taxBracket2" label="部门2" width="160">
          <template #default="{ row }">
            <el-tag v-if="row.dept2" type="primary">
              {{ row.dept2 }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="taxBracket3" label="部门3" width="160">
          <template #default="{ row }">
            <el-tag v-if="row.dept3" type="primary">
              {{ row.dept3 }}
            </el-tag>
          </template>
        </el-table-column>
      </el-table-column>
      <el-table-column prop="remarks" label="来源渠道（选填）" width="120">
        <el-table-column prop="sourceProject" label="来源项目" width="120"></el-table-column>
        <el-table-column prop="sourceType" label="来源类型" width="120"></el-table-column>
      </el-table-column>
    </el-table>
  </el-dialog>
</template>
