<template>
  <draggable v-model="list" item-key="id" class="list-group" @move="isHidden = true" @start="isHidden = true"  @end="onDragEnd" handle=".tuoz">
    <template #item="{ element, index }">
      <section class="box rounded-16 p-10 my-10" style="min-width: 1110px;">
        <div class="flex-align-center justify-between">
          <div class="flex-align-center gap-4">
            <div class="relative">
              <div class="tuoz flex-align-center" id="anzhu" @mousedown="isHidden = true" @mouseup="isHidden = false"
                @mouseleave="isHidden = false" @touchstart="isHidden = true" @touchend="isHidden = false">
                <img src="@/static/imgs/tuoz.png" alt="" class="h-16">
              </div>
            </div>
            <span class="fs-12">分镜{{ index + 1 }}</span>
            <span class="fs-10 py-2 px-4 rounded-4 bg-e3e9ff">ID</span>
            <div class="flex-align-center ml-10 bg-f4f6ff py-6 px-14 rounded-8 btnsborder gap-4">
              <el-icon color="#5252ff" size="14">
                <HelpFilled />
              </el-icon>
              <span class="fs-12">全能参考生视频</span>
            </div>
          </div>
          <div class="">
            <el-button text :icon="Plus" circle />
            <el-button text :icon="CopyDocument" circle />
            <el-button text :icon="Delete" circle />
          </div>
        </div>
        <div class="flex gap-10 h-b100" :style="{ display: isHidden ? 'none' : 'flex' }">
          <section class="w-400 p-14 bg-fff rounded-16 mt-10">
            <div>分镜信息</div>
            <div class="h-548 hide-scrollbar">
              <div class="mt-10 text-666 mb-6">分镜描述</div>
              <el-input v-model="fenjDesc" placeholder="请输入分镜描述" type="textarea" clearable />
              <div class="mt-20">
                <div class="flex-between-center">
                  <span>出镜角色</span>
                  <el-button text :icon="Plus" circle />
                </div>
                <div class="mt-6">
                  <div v-for="(item, index) in 2" :key="index" class="flex-align-center gap-4 mt-10">
                    <img class="h-40 w-40 rounded-8"
                      src="https://res.volccdn.com/obj/volc-console-fe/dramart/static/image/PIC3.22e42366.png" alt="">
                    <el-select v-model="aiTypeVal" placeholder="未配置角色" style="width: 160px;">
                      <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
                    </el-select>
                    <el-select v-model="aiTypeVal" placeholder="未配置音色" style="width: 120px;">
                      <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
                    </el-select>
                    <el-button :icon="MoreFilled" style="padding-left: 8px;padding-right: 8px;border-radius: 8px;" />
                  </div>
                  <Empty v-if="1 == 2" text="暂未选择出镜角色" />
                </div>
              </div>
              <div class="mt-20">
                <div class="flex-between-center">
                  <span>分镜场景</span>
                  <el-button text :icon="Plus" circle />
                </div>
                <div class="flex gap-10 flex-wrap mt-10">
                  <div v-for="(item, index) in 4" :key="index" class="child mb-6">
                    <img class="rounded-8 w-b100 h-100"
                      src="https://res.volccdn.com/obj/volc-console-fe/dramart/static/image/PIC3.22e42366.png" alt="">
                    <div class="flex-align-center gap-4 mt-4">
                      <el-select v-model="aiTypeVal" placeholder="未配置角色">
                        <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
                      </el-select>
                      <el-button :icon="MoreFilled" style="padding-left: 8px;padding-right: 8px;border-radius: 8px;" />
                    </div>
                  </div>
                  <Empty v-if="1 == 2" text="暂未选择分镜场景" />
                </div>
              </div>
              <div class="mt-20">
                <div class="flex-between-center">
                  <span>场景道具</span>
                  <el-button text :icon="Plus" circle />
                </div>
                <div class="mt-6">
                  <div v-for="(item, index) in 2" :key="index" class="flex-align-center gap-4 mt-10">
                    <img class="h-40 w-40 rounded-8"
                      src="https://res.volccdn.com/obj/volc-console-fe/dramart/static/image/PIC3.22e42366.png" alt="">
                    <el-select v-model="aiTypeVal" placeholder="未配置角色">
                      <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
                    </el-select>
                    <el-button :icon="MoreFilled" style="padding-left: 8px;padding-right: 8px;border-radius: 8px;" />
                  </div>
                  <Empty v-if="1 == 2" text="暂未选择场景道具" />
                </div>
              </div>
            </div>
          </section>
          <section class="flex-1 flex flex-col bg-fff rounded-16 p-10 mt-10 right">
            <div class="flex-between-center">
              <span>分镜视频生成</span>
              <el-icon color="#888" size="12">
                <DocumentCopy />
              </el-icon>
            </div>
            <div class="flex h-b100 mt-10 gap-10">
              <div class="flex-3 flex flex-col justify-between rounded-16 p-10 card1">
                <div class="flex gap-4">
                  <div v-if="fileList.length > 0" class="relative w-40 h-40 rounded-4 overflow-hidden imgbox"
                    v-for="(item, index) in fileList" :key="index">
                    <img :src="item.url" class="w-b100 h-b100" />
                    <el-icon class="absolute right-2 top-2 del cursor-pointer" @click="delImg(index)">
                      <CircleCloseFilled />
                    </el-icon>
                  </div>
                  <el-upload v-model:file-list="fileList"
                    action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15" list-type="picture-card"
                    class="custom-upload" :show-file-list="false">
                    <el-icon size="18">
                      <Plus />
                    </el-icon>
                  </el-upload>
                </div>
                <div class="flex-1 overflow-y-auto my-8 hide-scrollbar" style="max-height: 412px">
                  <div contenteditable="true" class="bg-f5 p-10 text-333 rounded-8 custom" style="min-height: 412px">
                  </div>
                </div>
                <div class="">
                  <div v-if="isShowtip" class="hint flex-between-center px-10">
                    <div class="flex-align-center">
                      <el-icon color="#888">
                        <Warning />
                      </el-icon>
                      <span class="ml-4 text-888 fs-12">提示词内容出现修改，请注意及时保存</span>
                    </div>
                    <el-button type="primary" text size="small" class="h-32 rounded-8"
                      @click="isShowtip = false">保存</el-button>
                  </div>
                  <div class="flex-between-center mt-6">
                    <div class="flex gap-6">
                      <el-select v-model="aiTypeVal" placeholder="Select" style="width: 200px;">
                        <el-option v-for="item in options1" :key="item.value" :label="item.label" :value="item.value" />
                      </el-select>
                      <el-select v-model="secondVal" placeholder="Select" style="width: 80px;">
                        <el-option v-for="item in options2" :key="item.value" :label="item.label" :value="item.value" />
                      </el-select>
                      <el-button size="small" class="h-32 rounded-8" @click="isShowtip = false">@</el-button>
                    </div>
                    <div class="flex-align-center h-32 px-10 rounded-4 jinbi">
                      <svg t="1779335788481" class="icon" viewBox="0 0 1024 1024" version="1.1"
                        xmlns="http://www.w3.org/2000/svg" p-id="9953" width="20" height="20">
                        <path
                          d="M408.8832 353.9968c40.7552-87.1424 61.0304-130.7648 92.7744-136.192a61.44 61.44 0 0 1 20.6848 0c31.744 5.4272 52.0192 49.0496 92.7744 136.192 7.8848 16.9984 11.8784 25.6 18.0224 32.3584a61.44 61.44 0 0 0 4.5056 4.5056c6.8608 6.144 15.36 10.1376 32.3584 18.0224 87.1424 40.7552 130.7648 61.0304 136.192 92.7744a61.44 61.44 0 0 1 0 20.6848c-5.4272 31.744-49.0496 52.0192-136.192 92.7744-16.9984 7.8848-25.6 11.8784-32.3584 18.0224a61.44 61.44 0 0 0-4.5056 4.5056c-6.144 6.8608-10.1376 15.36-18.0224 32.3584-40.7552 87.1424-61.0304 130.7648-92.7744 136.192a61.44 61.44 0 0 1-20.6848 0c-31.744-5.4272-52.0192-49.0496-92.7744-136.192-7.8848-16.9984-11.8784-25.6-18.0224-32.3584a61.44 61.44 0 0 0-4.5056-4.5056c-6.8608-6.144-15.36-10.1376-32.3584-18.0224-87.1424-40.7552-130.7648-61.0304-136.192-92.7744a61.44 61.44 0 0 1 0-20.6848c5.4272-31.744 49.0496-52.0192 136.192-92.7744 16.9984-7.8848 25.6-11.8784 32.3584-18.0224a61.44 61.44 0 0 0 4.5056-4.5056c6.144-6.8608 10.1376-15.36 18.0224-32.3584z"
                          p-id="9954" fill="#ffffff"></path>
                      </svg>
                      <span class="text-fff ml-4">882</span>
                    </div>
                  </div>
                </div>
              </div>
              <div class="flex-2 flex flex-col rounded-12 card2 overflow-hidden" style="background: #fafbfd">
                <video src="@/static/imgs/mp4.mp4" class="w-b100 bg-2b303a flex-1" controls></video>
                <div class="flex-center gap-4 px-20 mt-10">
                  <div v-for="(item, index) in 2" :key="index" class="fjitem flex rounded-8 cursor-pointer"
                    @click="changeVideo(item, index)" :class="videoIndex === index ? 'active' : ''">
                    <img class="h-36 w-50 rounded-6"
                      src="https://res.volccdn.com/obj/volc-console-fe/dramart/static/image/PIC3.22e42366.png" alt="">
                  </div>
                </div>
              </div>
            </div>
          </section>
        </div>
      </section>
    </template>
  </draggable>
</template>
<script setup lang="ts">
import { ref } from 'vue';
import { Plus, DocumentCopy, CopyDocument, CircleCloseFilled, MoreFilled, Delete, HelpFilled, Warning } from '@element-plus/icons-vue'
import Empty from './Empty.vue';
import draggable from 'vuedraggable'

const fenjDesc = ref('')
const aiTypeVal = ref('1')
const isShowtip = ref(true)
const secondVal = ref(5)
const isHidden = ref(false)

const options = [
  {
    value: '1',
    label: '林霞',
  }
]
const options1 = [
  {
    value: '1',
    label: 'DouBao-hahyha-1.0',
  },
  {
    value: '2',
    label: 'DouBao-hahyha-12.0'
  },
]
const options2 = [
  {
    value: 4,
    label: '4s',
  },
  {
    value: 5,
    label: '5s',
  },
  {
    value: 6,
    label: '6s',
  },
  {
    value: 7,
    label: '7s',
  },
  {
    value: 8,
    label: '8s',
  },
  {
    value: 9,
    label: '9s',
  },
  {
    value: 10,
    label: '10s',
  },
  {
    value: 11,
    label: '11s',
  },
  {
    value: 12,
    label: '12s',
  },
  {
    value: 13,
    label: '13s',
  },
  {
    value: 14,
    label: '14s',
  },
  {
    value: 15,
    label: '15s',
  },
]

const fileList = ref([
  {
    name: 'food.jpeg',
    url: 'https://res.volccdn.com/obj/volc-console-fe/dramart/static/image/PIC3.22e42366.png',
  },
  {
    name: 'food1.jpeg',
    url: 'https://res.volccdn.com/obj/volc-console-fe/dramart/static/image/PIC3.22e42366.png',
  }
])

const delImg = (index: number) => {
  fileList.value.splice(index, 1)
}

const videoIndex = ref(0)
const changeVideo = (item: any, index: number) => {
  videoIndex.value = index
}

const list = ref([
  { id: 1, name: '第1集 凌晨的咖啡与雨', time: '00:00:00' },
  { id: 2, name: '第2集 早餐的阳光与微笑', time: '00:00:00' },
  { id: 3, name: '第3集 午餐的温暖与关怀', time: '00:00:00' },
])

const onDragEnd = (evt: any) => {
  isHidden.value = false
  console.log('拖拽结束', list.value)
}

</script>
<style lang="scss" scoped>
.box {
  border: 1px solid #ddd;

  .bg-f4f6ff {
    background-color: #f4f6ff;
  }

  .bg-e3e9ff {
    background-color: #e3e9ff;
  }

  .btnsborder {
    border: 1px solid #eeeeff;
  }

  .child {
    flex: 0 0 calc(50% - 5px);
  }

  .h-548 {
    height: 548px;
    overflow-y: auto;
  }

  .right {
    .card1 {
      border: 1px solid #5252ff;
      box-shadow: 0px 0px 3px 1px rgba(177, 177, 255, 1.3);
    }

    .fjitem {
      border: 1px solid #ddd;
      padding: 1px;

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

  .imgbox {
    .del {
      display: none;
    }

    &:hover {
      .del {
        display: inline-block;
      }
    }
  }
}

.bg-2b303a {
  background-color: #2b303a;
}

:deep(.el-select__wrapper) {
  border-radius: 8px;
}

/* 控制上传卡片的大小 */
.custom-upload :deep(.el-upload--picture-card) {
  width: 40px;
  height: 40px;
  --el-upload-picture-card-size: 40px;
  /* 修改 Element Plus 变量 */
}

.hint {
  border: 1px solid #e5e7eb;
  border-radius: 8px;
}

.jinbi {
  background-color: #5252ff;

  &:hover {
    background-color: #4747e7;
  }
}

.custom {
  outline: none;
  box-shadow: none;
  border-color: transparent;
}

.tuoz {
  cursor: all-scroll;
}

// .content1 {
//   // display: inline-block;
// }

// section.box:has(#anzhu:active) .content1 {
//   display: none !important;
// }
</style>