<!--  -->
<template>
  <div>
    <div>
      <span style="font-size: 14px;">标签分类：</span>
      <el-select
        v-model="tagType"
        placeholder="请选择标签分类"
        clearable
        class="!w-180px"
      >
        <el-option
          v-for="tag in tagList"
          :key="tag.id"
          :label="tag.name"
          :value="tag.id"
        />
      </el-select>
    </div>
    <div>
      <div v-for="val in tagList" :key="val.id" class="m-t-15px">
        <!-- <span style="font-size: 14px;">{{ val?.nameCn || '--' }}</span> -->
        <div v-if="val?.children?.length">
          <el-tag size="large" class="m-r-10px m-t-10px" v-for="item of val.children" :key="item.id">{{ item.name }}</el-tag>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
defineOptions({name: 'TagsRecommend'})

const tagType = ref(null)
// const tagTypeList = ref([{name: '专家', id: '专家'},{name: '管理', id: '管理'}, {name: '创新', id: '创新'}, {name: '市场', id: '市场'}])
const tagList = ref([
  {
    name: "前台与客服类人才", 
    id: "1", 
    children: [
      {
        name: "前台接待员", 
        id: "1.1"
      }, 
      {
        name: "礼宾员", 
        id: "1.2"
      }, 
      {
        name: "客户服务员", 
        id: "1.3"
      }, 
      {
        name: "预订员", 
        id: "1.4"
      }, 
      {
        name: "电话接线员", 
        id: "1.5"
      }, 
      {
        name: "前台经理", 
        id: "1.6"
      }, 
      {
        name: "行政酒廊服务员", 
        id: "1.7"
      }, 
      {
        name: "商务中心文员", 
        id: "1.8"
      }, 
      {
        name: "宾客关系主任", 
        id: "1.9"
      }, 
      {
        name: "大堂副理", 
        id: "1.10"
      }
    ]
  }, 
  {
    name: "客房与餐饮类人才", 
    id: "2", 
    children: [
      {
        name: "客房服务员", 
        id: "2.1"
      }, 
      {
        name: "楼层服务员", 
        id: "2.2"
      }, 
      {
        name: "公共区域清洁工", 
        id: "2.3"
      }, 
      {
        name: "餐厅服务员", 
        id: "2.4"
      }, 
      {
        name: "调酒师", 
        id: "2.5"
      }, 
      {
        name: "餐饮部经理", 
        id: "2.6"
      }, 
      {
        name: "宴会服务员", 
        id: "2.7"
      }, 
      {
        name: "厨房助手", 
        id: "2.8"
      }, 
      {
        name: "西餐厨师", 
        id: "2.9"
      }, 
      {
        name: "中餐厨师", 
        id: "2.10"
      }
    ]
  }, 
  {
    name: "销售与市场类人才", 
    id: "3", 
    children: [
      {
        name: "销售经理", 
        id: "3.1"
      }, 
      {
        name: "销售代表", 
        id: "3.2"
      }, 
      {
        name: "市场推广员", 
        id: "3.3"
      }, 
      {
        name: "市场营销专员", 
        id: "3.4"
      }, 
      {
        name: "预订部员工", 
        id: "3.5"
      }, 
      {
        name: "收益管理分析师", 
        id: "3.6"
      }, 
      {
        name: "客户关系经理", 
        id: "3.7"
      }, 
      {
        name: "渠道销售经理", 
        id: "3.8"
      }, 
      {
        name: "电子商务销售经理", 
        id: "3.9"
      }, 
      {
        name: "市场情报分析师", 
        id: "3.10"
      }
    ]
  }, 
  {
    name: "财务与人力资源类人才", 
    id: "4", 
    children: [
      {
        name: "财务经理", 
        id: "4.1"
      }, 
      {
        name: "会计", 
        id: "4.2"
      }, 
      {
        name: "出纳", 
        id: "4.3"
      }, 
      {
        name: "薪资管理人员", 
        id: "4.4"
      }, 
      {
        name: "人力资源经理", 
        id: "4.5"
      }, 
      {
        name: "招聘专员", 
        id: "4.6"
      }, 
      {
        name: "培训与发展专员", 
        id: "4.7"
      }, 
      {
        name: "绩效管理员", 
        id: "4.8"
      }, 
      {
        name: "员工关系专员", 
        id: "4.9"
      }, 
      {
        name: "薪酬福利专员", 
        id: "4.10"
      }
    ]
  }, 
  {
    name: "工程与后勤类人才", 
    id: "5", 
    children: [
      {
        name: "维修工程师", 
        id: "5.1"
      }, 
      {
        name: "电工", 
        id: "5.2"
      }, 
      {
        name: "水管工", 
        id: "5.3"
      }, 
      {
        name: "空调工", 
        id: "5.4"
      }, 
      {
        name: "管家部员工", 
        id: "5.5"
      }, 
      {
        name: "布草员", 
        id: "5.6"
      }, 
      {
        name: "仓库管理员", 
        id: "5.7"
      }, 
      {
        name: "采购员", 
        id: "5.8"
      }, 
      {
        name: "安全主管", 
        id: "5.9"
      }, 
      {
        name: "保安员", 
        id: "5.10"
      }
    ]
  }
])

</script>