<template>
  <div class="flex-1 h-full p-[20px] select-none">
    <TitleSection title="渠道管理" desc="绑定酒店使用的相关渠道的账户和密码用于智能操作" />

    <div class="grid grid-cols-3 gap-[12px] mb-[12px] select-none">
      <div class="border-[1px] border-[#E5E8ED] box-border flex flex-col rounded-[12px] overflow-hidden"
        v-for="item in channel" :key="item.id">
        <div class="bg-[#E0E0E0] h-[120px]"></div>
        <div class="flex items-center relative mt-[-20px] pl-[12px]">
          <img :src="item.icon" class="w-[40px] h-[40px]">
        </div>
        <div class="flex items-center p-[12px]">
          <span class="text-[14px] font-500 text-[#171717] leading-[20px]">
            {{ item.name }}
          </span>
          <div class="bg-[#F2F5F8] rounded-[6px] flex items-center ml-[8px] py-[4px] px-[6px]">
            <RiForbidLine class="w-[16px] h-[16px]" color="#717784" />
            <span class="text-[12px] font-500 text-[#717784] leading-[20px] ml-[4px]">
              未绑定
            </span>
          </div>
        </div>
        <div class="p-[12px] border-t-[1px] border-t-[#E5E8ED]">
          <el-button plain>绑定</el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { channel } from '@constant/channel'
import { RiForbidLine } from '@remixicon/vue'
import TitleSection from '@src/components/TitleSection/index.vue'

</script>