<template>
  <div v-if="true" class="flex h-b100 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: 74px">
        </div>
      </div>
      <div class="">
        <div class="flex-between-center">
          <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>
            <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-26 rounded-8"
                @click="isShowtip = false">保存</el-button>
            </div>
          </div>
          <div class="flex-align-center h-30 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>
</template>
<script lang="ts" setup>
import { ref } from 'vue'
import { Plus } from '@element-plus/icons-vue'

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



const options1 = [
  {
    value: '1',
    label: 'DouBao-hahyha-1.0',
  },
  {
    value: '2',
    label: 'DouBao-hahyha-12.0'
  },
]
const options2 = [
  {
    value: 1,
    label: '1张',
  },
  {
    value: 2,
    label: '2张',
  },
  {
    value: 4,
    label: '4张',
  },
  {
    value: 9,
    label: '9张',
  },
]
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
}

</script>

<style scoped lang="scss">
.card1 {
  border: 1px solid #5252ff;
  box-shadow: 0px 0px 3px 1px rgba(177, 177, 255, 1.3);

  .imgbox {
    .del {
      display: none;
    }

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

  /* 控制上传卡片的大小 */
  .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;
    }
  }
}

.bg-2b303a {
  background-color: #2b303a;
}
.custom {
  outline: none;
  box-shadow: none;
  border-color: transparent;
}

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

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

:deep(.el-select__wrapper) {
  min-height: 30px;
  border-radius: 8px;
}
</style>
