<template>
  <div class="box-border w-[320px] border border-[#EEEEEE] rounded-[8px] border-solid bg-[#FFFFFF] px-[23px] py-[25px]">
    <div class="text-[16px] text-[#333333] font-normal">频道列表</div>
    <div class="mt-[30px]">
      <el-row>
        <el-col v-for="(item, index) in channelIdList" :key="index" :span="8" class="mb-[10px]">
          <span
            class="cursor-pointer text-[14px] text-[#999999] font-normal"
            :class="{ active: channelId === item.channelId }"
            @click="handleClick(item.channelId)"
            >{{ item.channelTitle }}</span
          >
        </el-col>
      </el-row>
    </div>
  </div>
</template>
<script setup lang="ts">
  import { ref } from 'vue'
  import { list } from '~/api/channel/index'

  const channelId = defineModel('modelValue', {
    required: true,
  })
  /** 获取频道列表 */
  const channelIdList = ref<any>([])
  const getChannelIdList = () => {
    list().then((res) => {
      channelIdList.value = res.data
      if (channelIdList.value.length > 0) {
        channelId.value = channelIdList.value[0].channelId
      }
    })
  }
  getChannelIdList()

  const handleClick = (id: number) => {
    console.log(id)
    channelId.value = id
  }
</script>

<style scoped lang="scss">
  .active {
    color: #1a65ff !important;
  }
</style>
