<template>
  <el-dialog
    v-model="state"
    :width="cp.value ? 194:1240"
    class="video-dialog"
    :align-center="true"
    @closed="onClosed"
    destroy-on-close
  >
    <template #header>
      <div class="header">
        {{ title }}
      </div>
    </template>

    <div class="container" :style="imgStyle">
      <ImageSome :images />
    </div>
  </el-dialog>
</template>

<script lang="ts" setup>
import ImageSome from '@/components/ImageSome/index.vue'

import { ref, defineExpose } from 'vue'

const state = ref(false)
const cp = ref(false)

const title = ref('')
const images = ref<any[]>([])
const dialogwidth = computed(()=>{
  cp.value ? 194:1240
})
const diaOpen = (e, str,iscp) => {
  title.value = str
  images.value = e
  state.value = true
  if(iscp){
    cp.value = true
  }else{
    cp.value = false
  }

   setTimeout(() => {
    const dialog = document.querySelector('.el-dialog');
    if (dialog) {
      dialog.style.width = iscp ? '194px' : '1240px';
    }
  }, 0);
}

const imgStyle = computed(() => {
  return {
    width: cp.value ? '194px' : '1240px',
    height: cp.value ? '59px' : '720px'
  }
}) 

const onClosed = () => {
  title.value = ''
  images.value = []
  cp.value = false

}

defineExpose({
  diaOpen
})
</script>

<style lang="scss" scoped>
.header {
  height: 48px;
  padding: 0px 20px;
  background: rgb(11, 36, 77);
  display: flex;
  align-items: center;
  color: white;
}

.container {
  // width: 1240px;
  // height: 720px;
  background: black;
  position: relative;

  &:deep(.el-image__error) {
    background: transparent;
  }

  &:deep(.el-image__placeholder) {
    background: transparent;
  }

  .x-image {
    width: 1240px;
    height: 720px;
  }
  .lines {
    font-size: 14px;
    position: absolute;
    top: 12px;
    left: 12px;
    color: white;
    z-index: 2;
    line-height: 22px;
    text-align: left;
  }
}
</style>

<style lang="scss">
.video-dialog {
  padding: 0;
  .el-dialog__header {
    padding: 0;
  }
  .el-dialog__body{
    background:rgb(11, 36, 77)
  }
}
</style>
