<template>
  <div class="h-full" v-loading="loading" element-loading-text="视频生成中，请等待...">
    <div class="flex flex-col h-full">
      <div class="h-77px flex items-center bg-white px-20px">
        <el-icon class="mr-30px cursor-pointer" size="29" @click="handleBack">
          <ArrowLeftBold />
        </el-icon>
        <input type="text" v-model="szrObj.axm_title" class="placeholder-current w-300px h-48px text-center outline-solid-none border-b-2 border-black" placeholder="请输入数字人名称">
      </div>
      <div class="flex p-15px">
        <div class="basis-3/5">
          <div class="flex justify-between px-15px">
            <div>
              <div class="flex items-center space-x-4" v-if="szrType==='2'">
                <div>比例</div>
                <el-select v-model="scale" class="select" popper-class="selectContent" size="large" :teleported="false">
                  <el-option v-for="(item, index) in scaleData" :key="index" :label="item.label" :value="index">
                    <div class="flex items-center space-x-18px">
                      <div class="w-30px">{{ item.label }}</div>
                      <div :style="{width: item.width}">
                        <div class="bg-hex-cceabb rounded-2px relative w-full" :style="{paddingBottom: item.padding}"></div>
                      </div>
                    </div>
                  </el-option>
                </el-select>
              </div>
            </div>
            <div class="flex items-center space-x-8">
              <!-- <div class="flex items-center space-x-4">
                <div>显示字幕</div>
                <el-switch v-model="showSubTitle" style="--el-switch-on-color: #FDCB9E; --el-switch-off-color: #797979" />
              </div> -->
              <el-button class="h-48px" type="primary" @click="dialogVisible=true">数字人与画面设置</el-button>
            </div>
          </div>
        </div>
        <div class="flex-1 ml-20px">
          <div class="text-right px-15px">
            <el-button class="h-48px w-110px" type="primary" @click="handleConfirm('2', '1')">保存草稿</el-button>
            <el-button class="h-48px w-110px" type="primary" @click="handleConfirm('1', '2')">生成视频</el-button>
          </div>
        </div>
      </div>
      <div class="flex p-15px pt-0">
        <div class="basis-3/5" id="player">
          <div class="relative" :style="{paddingBottom: scaleData[scale].padding}">
            <div class="absolute w-full h-full">
              <div v-show="fileUrl!=='' && uploadStatus==='3'" id="player-con" class="rounded-24px"></div>
              <div v-show="fileUrl===''" class="h-full bg-cover rounded-24px bg-hex-efefef" :style="{backgroundImage: `url(${szrObj.axm_img})`}">
                <img :src="szrObj.axm_fm_img" alt="" class="h-full m-auto" />
              </div>
            </div>
          </div>
        </div>
        <div class="rounded-24px bg-white flex-1 ml-20px">
          <ssml-editor v-model:speech="szrObj.axm_speech_rate" :showContent="szrObj.axm_show_content" @modify="isModify=true"></ssml-editor>
        </div>
      </div>
      <div class="px-15px text-sm">
        <div v-if="uploadStatus==='2'">视频生成中...</div>
        <div v-else-if="uploadStatus==='4'">视频生成失败，请重新制作视频</div>
      </div>
    </div>

    <div class="dialogContent">
      <el-dialog v-model="dialogVisible" class="_" title="数字人与画面设置" :width="dialogWidth" destroy-on-close :close-on-click-modal="false" :modal="false" draggable @open="handleSetOpen">
        <template #header>
          <div class="flex justify-between items-center pr-30px">
            <div>数字人与画面设置</div>
            <el-icon class="cursor-pointer" color="#909399" @click="miniSize">
              <Minus v-if="!isMiniSize" />
              <FullScreen v-else />
            </el-icon>
          </div>
        </template>
        <template v-if="!isMiniSize">
          <el-tabs v-model="activeName" class="demo-tabs">
            <el-tab-pane label="数字人(必选)" name="1" />
            <el-tab-pane v-if="szrType==='1'" label="声音(必选)" name="3" />
            <el-tab-pane label="背景(可选)" name="2" />
          </el-tabs>
          <el-scrollbar view-class="h-400px">
            <div class="p-5px pr-20px">
              <div class="h-full grid grid-cols-4 gap-6" v-if="activeName==='1'">
                <div class="rounded-10px cursor-pointer shadow_gray text-center py-25px" :class="activeSzr === item.axi_id ? 'shadow_green' : 'shadow_gray'" @click="handleChoose('1', item, true)" v-for="(item, index) in szrData" :key="index">
                  <div class="m-auto h-86px w-86px rounded-50px bg-hex-f9f9f9">
                    <img :src="item.axi_img" alt="" class="h-full m-auto" />
                  </div>
                  <!-- <div class="m-auto h-86px w-86px flex items-center justify-center overflow-hidden rounded-50px bg-hex-f9f9f9 bg-cover bg-top" :style="{ backgroundImage: `url(${item.axi_img})` }"></div> -->
                  <div class="mt-10px text-sm">{{ item.axi_name }}</div>
                </div>
              </div>
              <div class="h-full" v-if="activeName==='2'">
                <div class="flex mb-15px">
                  <div class="w-48px">备注：</div>
                  <div class="flex-1">
                    <div> 1、不选择背景，默认生成为透明背景视频</div>
                    <div>2、选择背景后生成视频的背景会根据视频分辨率自动拉伸背景图片来填充视频</div>
                    <div>3、如需视频背景，建议预先上传和视频分辨率大小匹配的背景，2D视频背景图片的分辨率需大于等于1080，3D视频背景图片的分辨率必须要与生成的视频分辨率保持一致，目前支持jpg，jpeg，png的图片格式，图片大小建议小于5MB</div>
                  </div>
                </div>
                <div class="mb-15px flex items-center space-x-2">
                  <div>系统背景</div>
                  <el-icon class="cursor-pointer" @click="bgSystemExpand=!bgSystemExpand">
                    <ArrowDownBold v-if="!bgSystemExpand" />
                    <ArrowUpBold v-else />
                  </el-icon>
                </div>
                <div v-show="bgSystemExpand" class="grid grid-cols-4 gap-6">
                  <div class="rounded-10px cursor-pointer shadow_gray text-center py-25px" :class="activeBg === item.axb_id ? 'shadow_green' : 'shadow_gray'" @click="handleChoose('2', item, true)" v-for="(item, index) in bgSystemData" :key="index">
                    <div class="m-auto h-116px w-116px flex items-center justify-center overflow-hidden bg-cover bg-top" :style="{ backgroundImage: `url(${item.axb_img})` }"></div>
                    <!-- <div class="mt-10px text-sm">{{ item.axb_name }}</div> -->
                  </div>
                </div>
                <div class="mt-15px mb-10px flex items-center space-x-2">
                  <div>自定义背景</div>
                  <el-icon class="cursor-pointer" @click="bgCustomExpand=!bgCustomExpand">
                    <ArrowDownBold v-if="!bgCustomExpand" />
                    <ArrowUpBold v-else />
                  </el-icon>
                </div>
                <div v-show="bgCustomExpand" class="grid grid-cols-4 gap-6">
                  <div class="rounded-10px cursor-pointer shadow_gray text-center py-25px relative" :class="activeBg === item.axb_id ? 'shadow_green' : 'shadow_gray'" @click="handleChoose('2', item, true)" v-for="(item, index) in bgCustomData" :key="index">
                    <div class="m-auto h-116px w-116px flex items-center justify-center overflow-hidden bg-cover bg-top" :style="{ backgroundImage: `url(${item.axb_img})` }"></div>
                    <!-- <div class="mt-10px text-sm">{{ item.axb_name }}</div> -->
                    <div @click.stop="handleRemove(item.axb_id)" class="close absolute cursor-pointer" style="top: -8px;right: -8px;">
                      <img class="w-16px h-16px" :src="close" alt="">
                    </div>
                  </div>
                  <div class="rounded-10px w-full cursor-pointer shadow_gray text-center py-25px">
                    <file-upload-progress v-model:part="uploadImg" accept=".jpg,.jpeg,.png" aliyun="1" @compile="handleCompile">
                      <template #default>
                        <div class="m-auto h-116px w-116px flex items-center justify-center">
                          <el-icon size="50" color="#ccc">
                            <Plus />
                          </el-icon>
                        </div>
                      </template>
                    </file-upload-progress>
                  </div>
                </div>
              </div>
              <div class="h-full" v-if="activeName==='3'">
                <div class="mb-15px flex items-center space-x-2">
                  <div>系统声音</div>
                  <el-icon class="cursor-pointer" @click="voiceSystemExpand=!voiceSystemExpand">
                    <ArrowDownBold v-if="!voiceSystemExpand" />
                    <ArrowUpBold v-else />
                  </el-icon>
                </div>
                <div v-show="voiceSystemExpand" class="h-full grid grid-cols-4 gap-6">
                  <!-- <div class="rounded-10px cursor-pointer shadow_gray text-center py-25px" :class="activeVoice === item.axa_id ? 'shadow_green' : 'shadow_gray'" @click="handleChoose('3', item, true)" v-for="(item, index) in voiceData" :key="index">
                    <div class="m-auto h-86px w-86px flex items-center justify-center overflow-hidden rounded-50px bg-hex-f9f9f9 bg-cover bg-top" :style="{ backgroundImage: `url(${item.axa_img})` }"></div>
                    <div class="mt-10px text-sm">{{ item.axa_name }}</div>
                  </div> -->
                  <div class="rounded-10px cursor-pointer shadow_gray text-center p-15px flex justify-between items-center" :class="activeVoice === item.axa_id ? 'shadow_green' : 'shadow_gray'" @click="handleChoose('3', item, true)" v-for="(item, index) in voiceData" :key="index">
                    <div class="text-sm">{{ item.axa_name }}</div>
                    <div class="voice" @click.stop="handleListen(item.axa_file)"></div>
                  </div>
                </div>
                <div class="mt-15px mb-10px flex items-center space-x-2">
                  <div>自定义声音</div>
                  <el-icon class="cursor-pointer" @click="voiceCustomExpand=!voiceCustomExpand">
                    <ArrowDownBold v-if="!voiceCustomExpand" />
                    <ArrowUpBold v-else />
                  </el-icon>
                </div>
                <el-button v-show="voiceCustomExpand" class="h-48px w-144px" type="primary" @click="linkTo">定制专属音色</el-button>
              </div>
            </div>
          </el-scrollbar>
          <div class="text-center">
            <el-button class="mt-30px h-48px w-300px m-auto" type="primary" @click="dialogVisible=false">
              确认
            </el-button>
          </div>
        </template>
      </el-dialog>
    </div>

    <el-dialog v-model="dialogBackVisible" class="_" title="" width="360px" destroy-on-close :close-on-click-modal="false" @close="handleClose">
      <div class="text-center my-30px">是否保存已编辑内容为草稿？</div>
      <el-button class="mt-30px h-48px w-full" type="primary" @click="handleConfirm('2', '1', true)">
        确认
      </el-button>
    </el-dialog>
  </div>
</template>

<script setup>
import SsmlEditor from "./SsmlEditor.vue";
import { ArrowLeftBold, ArrowDownBold, ArrowUpBold, Plus, Minus, FullScreen } from '@element-plus/icons-vue';
import close from '/images/close.png';

const router = useRouter()

const dialogBackVisible = ref(false);
const isModify = ref(false);

const loading = ref(false);

const player = ref("");
const currentId = ref(router.currentRoute.value.params.id);
const queryId = router.currentRoute.value.query.szr;
const detailInfo = ref({})
const fileUrl = ref("");
const showSubTitle = ref(false);
const szrObj = ref({
  // axm_title: "测试2D数字人",
  // axm_content: "一轮明月，挂在初冬夜空，清冷的光照彻了万物，天地一片宁静，你是否会摘抄这样的优美句子呢？本文是小编为大家收集整理的优美好句摘抄，欢迎参考借鉴。",
  axm_title: "",
  axm_content: "",
  axm_show_content: "",
  axm_img: "",
  axm_code: "",
  axm_video: "",
  axm_status: "",
  axm_upload_status: "",
  axm_sbbl: "",
  axm_sfxszm: "",
  axm_fm_img: "",
  axm_voice_code: "",
  axm_resolution: "",
  axm_type: "",
  axm_speech_rate: "1",
})
const activeSzr = ref("");
const activeBg = ref("");
const activeVoice = ref("");
const szrType = ref("");
const uploadStatus = ref("3");

function handleBack() {
  let html = document.querySelector(".editor").innerHTML;
  if (isModify.value && szrObj.value.axm_title && html) {
    dialogBackVisible.value = true;
  } else {
    router.back();
  }
}

function handleClose() {
  isModify.value = false;
  handleBack();
}

if (currentId.value && currentId.value !== '0') {
  judgeFinished(true);
} else if (queryId) {
  initDetailInfo1();
}

async function judgeFinished(init) {
  await initDetailInfo(init);
  if (uploadStatus.value !== '2') {
    loading.value = false;
  }

  const inval = setInterval(() => {
    if (uploadStatus.value !== '2') {
      loading.value = false;
      clearInterval(inval)
    } else {
      initDetailInfo(init);
    }
  }, 5000)
}

async function initDetailInfo(init) {
  loading.value = true;
  player.value && player.value.dispose();
  player.value = null;
  const { code, data } = await request({ url: '/aimooc/xnszr_make/detail', data: { axm_id: currentId.value } })
  if (code === '1') {
    uploadStatus.value = data.one_info.axm_upload_status_option_k;
    if (uploadStatus.value !== '2') {
      loading.value = false;
      render(data, init);
    }
  }
}

function render(data, init) {
  for (let key in szrObj.value) {
    szrObj.value[key] = data.one_info[key];
  }
  showSubTitle.value = data.one_info.axm_sfxszm_option_k === "1" ? true : false;
  szrType.value = data.one_info.axm_type_option_k;
  szrObj.value.axm_type = data.one_info.axm_type_option_k;
  scale.value = scaleData.value.findIndex(item => item.value === szrObj.value.axm_resolution);
  fileUrl.value = data.one_info.axm_video;
  player.value = new Aliplayer({
    id: 'player-con',
    source: fileUrl.value,
    width: '100%',
    height: '100%',
    autoplay: false,
    // cover: szrObj.value.axm_fm_img,
    isLive: false,
    rePlay: false,
    playsinline: true,
    preload: true,
    controlBarVisibility: 'hover',
    useH5Prism: true,
    skinLayout: [
      {
        name: 'bigPlayButton',
        align: 'blabs',
        x: 30,
        y: 80,
      },
      {
        name: 'H5Loading',
        align: 'cc',
      },
      {
        name: 'errorDisplay',
        align: 'tlabs',
        x: 0,
        y: 0,
      },
      {
        name: 'infoDisplay',
      },
      {
        name: 'tooltip',
        align: 'blabs',
        x: 0,
        y: 56,
      },
      {
        name: 'thumbnail',
      },
      {
        name: 'controlBar',
        align: 'blabs',
        x: 0,
        y: 0,
        children: [
          {
            name: 'progress',
            align: 'blabs',
            x: 0,
            y: 44,
          },
          {
            name: 'playButton',
            align: 'tl',
            x: 15,
            y: 12,
          },
          {
            name: 'timeDisplay',
            align: 'tl',
            x: 10,
            y: 7,
          },
          {
            name: 'fullScreenButton',
            align: 'tr',
            x: 10,
            y: 12,
          },
          {
            name: 'setting',
            align: 'tr',
            x: 15,
            y: 12,
          },
          {
            name: 'volume',
            align: 'tr',
            x: 5,
            y: 10,
          },
        ],
      },
    ],
  }, (player) => {
    console.log('The player is created')
  })

  if (init) {
    loading.value = false;
    initSettingData();
  }
  setTimeout(() => {
    isModify.value = false;
  }, 0)
}

async function initDetailInfo1() {
  const { code, data } = await request({ url: '/aimooc/xnszr_img/detail', data: { axi_id: queryId } })
  if (code === '1') {
    detailInfo.value = data.one_info;
    szrType.value = data.one_info.axi_type_option_k;
    szrObj.value.axm_type = data.one_info.axi_type_option_k;
    szrObj.value.axm_code = detailInfo.value.axi_code;
    szrObj.value.axm_fm_img = detailInfo.value.axi_img;
    activeSzr.value = detailInfo.value.axi_id;
    initSettingData();
    setTimeout(() => {
      isModify.value = false;
    }, 0)
  }
}

const scale = ref(0);
const scaleData = ref([
  {
    value: "2",
    label: "1280 * 720",
    w: "1280",
    h: "720",
    padding: (720 / 1280 * 100).toFixed(2) + "%"
  },
  {
    value: "1",
    label: "720 * 1280",
    w: "720",
    h: "1280",
    padding: (1280 / 720 * 100).toFixed(2) + "%"
  },
  {
    value: "4",
    label: "1920 * 1080",
    w: "1920",
    h: "1080",
    padding: (1080 / 1920 * 100).toFixed(2) + "%"
  },
  {
    value: "3",
    label: "1080 * 1920",
    w: "1080",
    h: "1920",
    padding: (1920 / 1080 * 100).toFixed(2) + "%"
  }
])

const dialogVisible = ref(false);
const dialogWidth = ref("900px");
const activeName = ref("1");
const szrData = ref([]);
const bgSystemData = ref([]);
const bgCustomData = ref([]);
const bgSystemExpand = ref(true);
const bgCustomExpand = ref(true);
const voiceData = ref([]);
const voiceSystemExpand = ref(true);
const voiceCustomExpand = ref(true);
const uploadImg = ref("");
async function initSettingData() {
  const res1 = await request({ url: '/aimooc/xnszr_img/index', data: { axi_status: "1", limit: "999", axi_type: szrType.value } })
  if (res1.code === '1') {
    szrData.value = res1.data.page_data;
  }

  if (szrType.value === '1') {
    const res3 = await request({ url: '/aimooc/xnszr_audio/index', data: { limit: "999" } })
    if (res3.code === '1') {
      voiceData.value = res3.data.page_data;
      if (voiceData.value[0] && szrObj.value.axm_voice_code === "") {
        handleChoose('3', voiceData.value[0])
      }
    }
  }
  initBgData();
}

async function initBgData() {
  const res2 = await request({ url: '/aimooc/xnszr_background/index', data: { limit: "999" } })
  if (res2.code === '1') {
    bgSystemData.value = res2.data.page_data.filter(item => item.axi_is_system === '1');
    bgCustomData.value = res2.data.page_data.filter(item => item.axi_is_system !== '1');
  }
}

const isMiniSize = ref(false);
function miniSize() {
  isMiniSize.value = !isMiniSize.value;
  if (!isMiniSize.value) {
    dialogWidth.value = "900px";
  } else {
    dialogWidth.value = "300px";
  }
}

function handleSetOpen() {
  isMiniSize.value = false;
  dialogWidth.value = "900px";
}

function handleRemove(id) {
  ElMessageBox.confirm('确定要删除该数据吗？', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning',
  })
    .then(async () => {
      const { code } = await request({ url: '/aimooc/xnszr_background/delete', data: { axb_id: id } })
      if (code === '1') {
        ElMessage.success('删除成功！')
        initBgData()
      }
    })
    .catch(() => { })
}

const handleCompile = async (fileList) => {
  let data = fileList[0];
  if (!data)
    return

  let obj = {
    aimooc_xnszr_background: {
      axb_name: data.name.split(".")[0] || "图片",
      axb_keyword: data.name.split(".")[0] || "图片",
      axb_img: data.response.data.oss_url,
      axi_is_system: "2"
    }
  }
  const { code } = await request({ url: '/aimooc/xnszr_background/add', data: obj })
  if (code === "1") {
    ElMessage.success('上传图片成功！');
    uploadImg.value = "";
    initBgData();
  }
}

const handleChoose = (type, data, clear) => {
  if (clear) {
    fileUrl.value = "";
    uploadStatus.value = "3";
  }
  if (type === "1") {
    activeSzr.value = data.axi_id;
    szrObj.value.axm_code = data.axi_code;
    szrObj.value.axm_fm_img = data.axi_img;
  } else if (type === "2") {
    activeBg.value = data.axb_id;
    if(data.axb_id === "1") {
      szrObj.value.axm_img = "";
    } else {
      // let arr = data.axb_img.split('?');
      // szrObj.value.axm_img = arr[arr.length - 1];
      szrObj.value.axm_img = `${data.axb_img}?x-oss-process=image/resize,h_${scaleData.value[scale.value].h},w_${scaleData.value[scale.value].w},m_pad`;
    }
    // console.log(szrObj.value.axm_img)
  } else if (type === "3") {
    activeVoice.value = data.axa_id;
    szrObj.value.axm_voice_code = data.axa_code;
  }
}

const handleListen = (url) => {
  let mp3 = new Audio(url);
  mp3.play();
}

const handleConfirm = async (axm_status, axm_upload_status, draft) => {
  let html = document.querySelector(".editor").innerHTML;
  html = html.replace(/&nbsp;/g, '');
  let $newContent = document.createElement("p");
  $newContent.innerHTML = html;

  // 停顿
  let breakData = $newContent.querySelectorAll(".break-icon");
  for (let i = 0; i < breakData.length; i++) {
    let text = breakData[i].innerText;
    // let str = document.createElement("break");
    // str.setAttribute("time", text);
    // breakData[i].replaceWith(str)
    breakData[i].replaceWith(`<break time="${text}"/>`)
  }
  // 数字符号
  let digitalData = $newContent.querySelectorAll(".digital");
  for (let i = 0; i < digitalData.length; i++) {
    let text = digitalData[i].querySelector(".selectedValue").innerText;
    let val = digitalData[i].querySelector(".selectedValue").getAttribute("v");
    let str = document.createElement("say-as");
    str.setAttribute("interpret-as", val);
    str.innerHTML = text;
    digitalData[i].replaceWith(str)
  }
  // 换行生成的div标签
  let divData = $newContent.querySelectorAll("div");
  for (let i = 0; i < divData.length; i++) {
    let text = divData[i].innerText;
    divData[i].replaceWith(text)
  }
  let brData = $newContent.querySelectorAll("br");
  for (let i = 0; i < brData.length; i++) {
    brData[i].replaceWith('')
  }
  let text = $newContent.innerHTML;
  szrObj.value.axm_speech_rate = szrObj.value.axm_speech_rate || 1;
  let rate = Number(szrObj.value.axm_speech_rate) >= 1 ? (1 - 1 / szrObj.value.axm_speech_rate) / 0.001 : (1 - 1 / szrObj.value.axm_speech_rate) / 0.002;
  let str = `<speak voice="${szrObj.value.axm_voice_code}" rate="${rate}">${text}</speak>`;
  console.log(str)
  szrObj.value.axm_content = str;
  szrObj.value.axm_show_content = html;

  szrObj.value.axm_video = "";
  szrObj.value.axm_task_id = "";
  szrObj.value.axm_status = axm_status;
  szrObj.value.axm_upload_status = axm_upload_status;
  szrObj.value.axm_sbbl = scaleData.value[scale.value].label;
  szrObj.value.axm_resolution = scaleData.value[scale.value].value;
  szrObj.value.axm_sfxszm = showSubTitle.value ? "1" : "2";

  if (axm_status === "1") {
    if (szrObj.value.axm_title === "") {
      ElMessage.error('请输入视频标题！')
      return
    } else if (html === "") {
      ElMessage.error('请输入视频文本内容！')
      return
    }
  }
  let obj = {
    aimooc_xnszr_make: szrObj.value
  }
  if (axm_status === "1") {
    obj.submitTextTo2D = szrType.value;
  }
  loading.value = true;
  if (currentId.value && currentId.value !== '0') {
    obj.axm_id = currentId.value;
    const { code } = await request({ url: '/aimooc/xnszr_make/edit', data: obj })
    if (code === '1') {
      ElMessage.success('保存成功！')
      if (axm_status === "1" || draft) {
        router.back();
      } else {
        judgeFinished();
      }
    } else {
      loading.value = false;
    }
  } else {
    const { code, data } = await request({ url: '/aimooc/xnszr_make/add', data: obj })
    if (code === '1') {
      ElMessage.success('保存成功！')
      router.replace(`/home/spzz/djszr/${data.one_info.axm_id}`)
      currentId.value = data.one_info.axm_id;
      if (axm_status === "1" || draft) {
        router.back();
      } else {
        judgeFinished();
      }
    } else {
      loading.value = false;
    }
  }
}

function linkTo() {
  router.push('/home/zdpy/dzzsys')
}

watch(
  () => szrObj.value,
  (newVal, oldVal) => {
    isModify.value = true;
  },
  { deep: true },
)
</script>

<route lang="json">
  {
    "meta": {
      "hidden": true,
      "hideLayout": true
    }
  }
</route>

<style lang="scss" scoped>
@use "~/styles/dialog.scss";
.outline-solid-none {
  outline: none;
}
:deep() {
  .el-loading-spinner .el-loading-text {
    color: #333;
  }
  .select {
    .el-input {
      .el-input__wrapper {
        box-shadow: none !important;
      }
    }
    &.bg {
      .el-input__wrapper {
        background: #e9e9ea;
      }
    }
  }
  .selectContent {
    .el-select-dropdown__list {
      .el-select-dropdown__item {
        height: auto;
        padding: 8px 32px 8px 20px;
      }
    }
  }

  .el-tabs__nav-wrap::after {
    width: 0;
  }

  .el-tabs__active-bar {
    background-color: #cceabb;
    height: 5px;
    border-radius: 8px;
    bottom: 8px;
  }

  .el-tabs__item:hover {
    color: #cceabb;
    cursor: pointer;
  }

  .is-active {
    color: #000 !important;
    font-size: 16px;
  }
  .common_list {
    overflow: visible;
  }
  video {
    border-radius: 24px;
  }
  .el-upload-list {
    display: none;
  }
  .el-dialog__headerbtn .el-dialog__close {
    color: #909399;
  }
  .dialogContent {
    *:not(.el-overlay-dialog *) {
      pointer-events: none;
    }
    .el-dialog {
      pointer-events: all;
    }
  }
}
.shadow_gray {
  box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.14);
}
.voice {
  width: 16px;
  height: 16px;
  background: url("/images/voice1.png") no-repeat;
  &:hover {
    background: url("/images/voice2.png") no-repeat;
  }
}
.shadow_green {
  box-shadow: 0px 0px 8px 2px #cceabb;
}
</style>