<template>
  <draggable v-model="list" item-key="id" class="list-group" @move="isHidden = true" @start="isHidden = true"
    @end="onDragEnd" handle=".tuoz">
    <template #item="{ ele, 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 @click="changeList('add', index)" />
            <el-button text :icon="CopyDocument" circle @click="changeList('copy', index, ele)" />
            <el-button text :icon="Delete" circle @click="changeList('del', index)" />
          </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="false" 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="false" 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="false" 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>
              <div title="生成历史">
                <el-popover placement="left" :width="300" trigger="click">
                  <template #reference>
                    <el-button text circle>
                      <svg t="1779695410408" class="icon" viewBox="0 0 1024 1024" version="1.1"
                        xmlns="http://www.w3.org/2000/svg" p-id="20349" width="16" height="16">
                        <path
                          d="M511.73808594 93.19941406c-140.67070313 0-264.92695313 69.1453125-341.01035156 175.08955078v-70.47597656c0-21.66767578-17.61679688-39.22998047-39.346875-39.22998047s-39.346875 17.56318359-39.346875 39.22998047v156.91992188c0 21.66240234 17.61679688 39.22998047 39.346875 39.22998047h170.50341796c21.73007813 0 39.346875-17.56669922 39.346875-39.22998047 0-21.66767578-17.61679688-39.22998047-39.346875-39.22998047h-68.4421875c61.73085937-86.98798828 163.28496094-143.84267578 278.296875-143.84267578 188.32851562 0 341.00507812 152.22128906 341.00507813 339.99345703 0 187.76865234-152.6765625 339.99345703-341.00507813 339.99345703-158.73574219 0-291.74589844-108.29179688-329.75771484-254.70439453l-0.68291016 0.21269531c-5.3015625-15.41162109-19.54248047-26.65986328-36.8024414-26.65986328-21.73007813 0-39.346875 17.56318359-39.346875 39.22558594 0 3.86630859 1.16367187 7.36875 2.20605469 10.89316406l-0.40957032 0.12919922c0.25839844 0.95009766 0.73212891 1.8 0.99580078 2.74482422 0.28916016 0.76201172 0.48164063 1.52314453 0.81650391 2.2640625 49.92539062 175.47011719 210.98935547 304.35380859 402.98378906 304.35380859 231.79394531 0 419.69970703-187.35029297 419.69970703-418.45341797-0.00175781-231.10751953-187.90839844-418.45429688-419.70322265-418.45429687z m0 176.53183594c-21.73007813 0-39.346875 17.56318359-39.346875 39.22998047v235.37988281c0 21.66767578 17.61679688 39.22998047 39.346875 39.22998047h170.50253906c21.73007813 0 39.346875-17.56318359 39.346875-39.22558594 0-21.67119141-17.61679688-39.22998047-39.346875-39.22998047H551.08496094v-196.15429687c0-21.66767578-17.61767578-39.22998047-39.34775391-39.22998047z"
                          p-id="20350" fill="#3f3f51"></path>
                      </svg>
                    </el-button>
                  </template>
                  <div>
                    <div class="flex-between-center mb-10">
                      <span>分镜视频生成历史</span>
                      <span>工1个</span>
                    </div>
                    <div class="flex-align-center gap-4 mt-10">
                      <div v-for="(item, index) in 2" :key="index" class="fjitem flex rounded-4 cursor-pointer active"
                        @click="lookHistory(ele)">
                        <img class="h-36 w-50 rounded-4"
                          src="https://res.volccdn.com/obj/volc-console-fe/dramart/static/image/PIC3.22e42366.png"
                          alt="">
                      </div>
                    </div>
                  </div>
                </el-popover>
              </div>
            </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-36 h-36 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 pl-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-26 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 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>
  <VideoPlayModal ref="videoPlayModalRef" src="@/static/imgs/mp4.mp4" v-model:visible="showDialog" />
</template>
<script setup lang="ts">
import { ref } from 'vue';
import { Plus, CopyDocument, CircleCloseFilled, MoreFilled, Delete, HelpFilled, Warning } from '@element-plus/icons-vue'
import Empty from './Empty.vue';
import draggable from 'vuedraggable'
import VideoPlayModal from './VideoPlayModal.vue';

const fenjDesc = ref('')
const isShowtip = ref(true)
const aiTypeVal = ref('1')
const secondVal = ref(5)
const isHidden = ref(false)
const showDialog = 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',
  }
])

// 分镜的 新增，copy，删除
const changeList = (type: string, index: number, item?: any) => {
  if (type === 'add') {
    list.value.push({
      id: list.value.length + 1,
      name: `凌晨的咖啡与雨`,
      time: '00:00:00'
    })
  } else if (type === 'copy') { // 复制
    list.value.push({
      id: list.value.length + 1,
      name: `凌晨的咖啡与雨`,
      time: '00:00:00'
    })
  } else if (type === 'del') { // 删除
    list.value.splice(index, 1)
  }
}

// 查看生成历史
const videoPlayModalRef = ref()
const lookHistory = (item: any) => {
  videoPlayModalRef.value?.open()
}

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

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

const list: any = ref([
  { id: 1, name: '第1集 凌晨的咖啡与雨', time: '00:00:00' },
])

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

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

  .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: 36px;
  height: 36px;
  --el-upload-picture-card-size: 36px;
  /* 修改 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;
}
</style>