<template>
  <div>
    <el-row :gutter="10">
      <el-col :span="14">
        <el-card shadow="never">
          <!-- <template #header>
            <CardTitle title="人才详情" />
          </template> -->
          <el-tabs>
            <el-tab-pane label="基本信息">
              <Info :id="id" :user-id="userId" />
            </el-tab-pane>
            <el-tab-pane label="教育经历">
              <Edu :user-id="userId" />
            </el-tab-pane>
            <el-tab-pane label="工作经历">
              <Exp :user-id="userId" />
            </el-tab-pane>
            <el-tab-pane label="求职意向">
              <JobIntention :user-id="userId" />
            </el-tab-pane>
            <!-- <el-tab-pane label="面试邀约记录">
              <InterviewInvite :user-id="userId" />
            </el-tab-pane> -->
            <el-tab-pane label="职位投递记录">
              <DeliveryJob :user-id="userId" />
            </el-tab-pane>
            <!-- <el-tab-pane label="职位收藏、企业收藏数">
              <Collect :user-id="userId" />
            </el-tab-pane> -->
            <el-tab-pane label="附件简历">
              <Attachment :user-id="userId" />
            </el-tab-pane>
          </el-tabs>
        </el-card>
      </el-col>
      <el-col :span="10">
        <div>
          <el-card shadow="never">
            <template #header>
              <!-- <CardTitle title="已有标签" /> -->
              <div class="flex items-center justify-between">
                <CardTitle title="已有标签" />
                <el-button size="small" type="primary" @click="addNewTag = true; newTagText = ''">
                  添加新标签
                </el-button>
              </div>
            </template>
            <div style="display: flex;" class="m-b-12px" v-if="addNewTag">
              <el-input
                v-model="newTagText"
                placeholder="请输入标签，按回车键确认！"
                clearable
                style="max-width: 300px;"
                @keyup.enter="saveTags"
              />
              <el-button type="primary" class="m-l-12px" @click="saveTags">保存</el-button>
              <el-button @click="addNewTag = false">关闭</el-button>
            </div>
            <Tags :id="id" :user-id="userId" />
          </el-card>
          <el-card shadow="never" class="m-t-10px">
            <template #header>
              <CardTitle title="推荐标签" />
            </template>
            <TagsRecommend :id="id" :user-id="userId" />
          </el-card>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script setup>
defineOptions({ name: 'TalentMapDetail'})
import { useTagsViewStore } from '@/store/modules/tagsView'
import { ElMessage } from 'element-plus'
import Info from './components/info.vue'
import Edu from './components/edu.vue'
import Exp from './components/exp.vue'
import JobIntention from './components/jobIntention.vue'
// import Collect from './components/collect.vue'
import Attachment from './components/attachment.vue'
import DeliveryJob from './components/deliveryJob.vue'
// import InterviewInvite from './components/interviewInvite.vue'
import Tags from './components/tags.vue'
import TagsRecommend from './components/tagsRecommend.vue'

const addNewTag = ref(false)
const newTagText = ref('')
const saveTags = () => {
  addNewTag.value = false
}

/** 初始化 */
const { currentRoute } = useRouter() // 路由
const { delView } = useTagsViewStore() // 视图操作
const route = useRoute()
const { id, userId } = route.query
onMounted(() => {
  if (!userId) {
    ElMessage.warning('参数错误，用户编号不能为空！')
    delView(unref(currentRoute))
    return
  }
})
</script>
