<template>
  <div>
    <el-dialog v-model="visible" title="问题详情" width="80%" align-center :close-on-click-modal="false">
      <div class="description-box">
        <div class="title">问题描述</div>
        <p>{{ description }}</p>
      </div>
      <div>
        <div class="title">问题图片/视频</div>
        <div class="media-box">
          <div class="img-box" v-for="(imagePath, index) in imagePaths" :key="index">
            <img :src="imagePath" alt="" style="object-fit:contain;width:200px;height:200px;border: solid 1px #CCC">
          </div>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { ref, toRefs, watch } from 'vue';

const props = defineProps({
  showDrawer: Boolean,
  description: String,
  imagePaths: Array<string>,
});
const { showDrawer } = toRefs(props);

const emits = defineEmits(['toggleStatus']);
const visible = ref(false);

const toggle = (newVal: boolean) => {
  visible.value = newVal;
};

watch(
  () => showDrawer.value,
  (newVal) => {
    toggle(newVal)
  }
);

watch(
  () => visible.value,
  (newVal) => {
    emits('toggleStatus', newVal)
  }
);

</script>

<style scoped>
:deep(.el-dialog) {
  padding: 0;
  background: #FFFFFF;
  box-shadow: 0px 9px 28px 8px rgba(0, 0, 0, 0.05), 0px 6px 16px 0px rgba(0, 0, 0, 0.08), 0px 3px 6px -4px rgba(0, 0, 0, 0.12);

  .el-dialog__header {
    display: flex;
    align-items: center;
    height: 56px;
    padding-left: 24px;
    padding-bottom: 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  }

  .el-dialog__title {
    color: rgba(0, 0, 0, 0.88);
    font-size: 16px;
    font-weight: 500;
  }

  .el-dialog__headerbtn .el-dialog__close {
    color: #000;
  }

  .el-dialog__body {
    height: 564px;
    padding: 40px;
    overflow: scroll;
  }
}

.title {
  margin-bottom: 20px;
  color: #303133;
  font-size: 16px;
  font-weight: 500;
}

.title:before {
  margin-right: 8px;
  content: '';
  border-left: 3px solid #1777FF;
}

.description-box {
  margin-bottom: 20px;

  p {
    color: #606266;
  }
}

.media-box {
  display: flex;

  .img-box {
    width: 200px;
    height: 200px;
    margin-right: 10px;
  }
}
</style>