<template>
  <div class="dialog" v-if="dialogForm">
    <div class="head_box">
      <span class="title">图片详情</span>
      <div>
        <el-button size="small" @click="close">关闭</el-button>
      </div>
    </div>
    <div class="cntinfo">
      <el-tabs v-model="activeName">
        <el-tab-pane label="图片基本信息" name="first">
          <el-form :model="listQuery" :label-width="230" label-position="left">
            <div class="form-row">
              <el-form-item label="图片名称">
                <el-input v-model="listQuery.imageName" disabled/>
              </el-form-item>
              <el-form-item label="图片类型">
                <el-input v-model="listQuery.imageType" disabled/>
              </el-form-item>
            </div>

            <div class="form-row">
              <el-form-item label="上传时间">
                <el-input v-model="listQuery.uploadTime" disabled/>
              </el-form-item>
              <el-form-item label="文件大小">
                <el-input v-model="listQuery.fileSize" disabled/>
              </el-form-item>
            </div>

            <div class="form-row">
              <el-form-item label="图片分辨率">
                <el-input v-model="listQuery.resolution" disabled/>
              </el-form-item>
              <el-form-item label="图片格式">
                <el-input v-model="listQuery.format" disabled/>
              </el-form-item>
            </div>

            <div class="form-row">
              <el-form-item label="拍摄设备">
                <el-input v-model="listQuery.device" disabled/>
              </el-form-item>
              <el-form-item label="拍摄时间">
                <el-input v-model="listQuery.shootTime" disabled/>
              </el-form-item>
            </div>

            <div class="form-row">
              <el-form-item label="拍摄地点">
                <el-input v-model="listQuery.location" disabled/>
              </el-form-item>
              <el-form-item label="图片标签">
                <el-input v-model="listQuery.tags" disabled/>
              </el-form-item>
            </div>

            <div class="form-row">
              <el-form-item label="图片描述" :label-width="460">
                <el-input type="textarea" v-model="listQuery.description" disabled rows="3"/>
              </el-form-item>
            </div>

            <div class="form-row">
              <el-form-item label="图片预览" :label-width="460">
                <div class="image-preview">
                  <img :src="listQuery.imageUrl" alt="图片预览" v-if="listQuery.imageUrl"/>
                  <div class="no-image" v-else>暂无图片</div>
                </div>
              </el-form-item>
            </div>
          </el-form>
        </el-tab-pane>
        <el-tab-pane label="图片处理记录" name="second">图片处理记录</el-tab-pane>
        <el-tab-pane label="使用历史" name="third">使用历史</el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue';

const dialogForm = ref(false);
const listQuery = ref({});
const activeName = ref('first');

// 初始化数据
const init = (type, row) => {
  dialogForm.value = true;
  if (row) {
    listQuery.value = { ...row };
  } else {
    listQuery.value = {};
  }
};

const close = () => {
  dialogForm.value = false;
  listQuery.value = {};
};

defineExpose({init});
</script>

<style lang="scss" scoped>
.dialog {
  padding: 20px;

  :deep(.el-form-item__label) {
    background-color: #F7FAFB;
    padding: 0px 8px;
    color: #000;
    font-weight: 500;
    border: 1px solid #E3E7ED;
  }

  .head_box {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
  }
  
  .cntinfo{
    height: calc(100% - 70px);
    overflow: hidden;
    overflow-y: auto;
  }

  .form-row {
    display: flex;
    
    .el-form-item {
      flex: 1;
    }
  }

  .image-preview {
    width: 100%;
    min-height: 300px;
    border: 1px solid #E3E7ED;
    display: flex;
    align-items: center;
    justify-content: center;
    
    img {
      max-width: 100%;
      max-height: 500px;
      object-fit: contain;
    }
    
    .no-image {
      color: #999;
      font-size: 14px;
    }
  }

   ::v-deep .el-input__inner{
    height: 36px !important;
    line-height: 36px !important;
    border-radius: 0;
    color: #777575;
  }
}

.el-form-item--default{
  margin-bottom: 0px;
}
</style>
