<template>
  <section class="flex h-b100">
    <section class="aside flex-align-center flex-col">
      <span class="py-16">集数</span>
      <div class="flex-1 flex-center flex-col gap-10 overflow-y-auto hide-scrollbar">
        <div v-for="(item, index) in 100" :key="index"
          class="cursor-pointer w-36 min-h-36 rounded-4 flex-center text-888 jj"
          :class="indexVal === index ? 'active' : ''">
          {{ index + 1 }}</div>
      </div>
    </section>
    <section class="flex flex-col w-b100 box">
      <div class="flex-between-center py-20 px-36">
        <span class="bg-fff py-6 px-14 rounded-4 boxshadow-1">分镜表</span>
        <div class="flex gap-10">
          <el-select v-model="aiTypeVal" placeholder="Select" style="width: 200px;">
            <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
          </el-select>
          <el-button :icon="DocumentCopy" class="hover">批量生成</el-button>
        </div>
      </div>
      <div class="flex-1 overflow-y-auto px-36 hide-scrollbar">
        <div class="fw-bold">第1集 凌晨的咖啡与雨</div>
        <div class="fs-12 text-666 mt-4">
          林夏在雨夜来到便利店，与店员阿哲交谈。她倾诉人际关系的疲惫与困惑，阿哲以温和的话语给予慰藉。
          <el-popover placement="bottom" :width="400">
            <template #reference>
              <el-button text ><span class="fs-12">详情</span></el-button>
            </template>
            <div class="max-h-200 overflow-y-auto">
              <p>林夏在雨夜来到便利店，与店员阿哲交谈。她倾诉人际关系的疲惫与困惑，阿哲以温和的话语给予慰藉。</p>
              <p>林夏在雨夜来到便利店，与店员阿哲交谈。她倾诉人际关系的疲惫与困惑，阿哲以温和的话语给予慰藉。</p>
              <p>林夏在雨夜来到便利店，与店员阿哲交谈。她倾诉人际关系的疲惫与困惑，阿哲以温和的话语给予慰藉。</p>
            </div>
          </el-popover>
        </div>
        <div v-for="(item, index) in 2" :key="index" class="pb-20">
          <Episode />
        </div>
      </div>
    </section>
  </section>
</template>
<script setup lang="ts">
import { ref } from 'vue';
import { DocumentCopy } from '@element-plus/icons-vue'
import Episode from './Episode.vue';


const indexVal = ref(0)
const aiTypeVal = ref('')
const options = [
  {
    value: '1',
    label: 'DouBao-hahyha-1.0',
  },
  {
    value: '2',
    label: 'DouBao-hahyha-12.0'
  },
]

</script>
<style lang="scss" scoped>
.aside {
  width: 60px;
  border-right: 1px solid #eee;

  .jj {
    border: 1px solid #ddd;

    &.active {
      border: 1px solid #5252ff;
      background: #5252ff;
      color: #fff;
    }
  }
}

.box {
  .boxshadow-1 {
    box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.1);
  }
}
</style>