<template>
  <el-dialog :visible.sync="dialogVisible" width="80%" style="height: 98%" :before-close="handleClose" top="5vh"
    lock-scroll>
    <div class="title" slot="title">
      <div class="divider"></div>
      <div class="label">{{ title }}</div>
    </div>
    <div class="dialog-content">
      <el-descriptions class="margin-top" title="文物详情" :column="3" :size="size" border>
        <template slot="extra">
          <el-button type="primary" size="small">同意</el-button>
          <el-button type="danger" size="small">驳回</el-button>
          
        </template>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-user"></i>
            文物名称
          </template>
          {{crDetail.name}}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-mobile-phone"></i>
            馆藏介绍
          </template>
          18100000000
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-mobile-phone"></i>
            文物封面
          </template>
          18100000000
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-mobile-phone"></i>
            文物图片
          </template>
          18100000000
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-mobile-phone"></i>
            文物视频
          </template>
          18100000000
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-mobile-phone"></i>
            文物音频
          </template>
          18100000000
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-mobile-phone"></i>
            馆藏单位
          </template>
          18100000000
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-location-outline"></i>
            文物类别
          </template>
          苏州市
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-tickets"></i>
            文物质地
          </template>
          <el-tag size="small">学校</el-tag>
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-office-building"></i>
            文物年代
          </template>
          江苏省苏州市吴中区吴中大道 1188 号
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-office-building"></i>
            文物级别
          </template>
          江苏省苏州市吴中区吴中大道 1188 号
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-office-building"></i>
            文物数量
          </template>
          江苏省苏州市吴中区吴中大道 1188 号
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-office-building"></i>
            关联文献
          </template>
          江苏省苏州市吴中区吴中大道 1188 号
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-office-building"></i>
            主题词
          </template>
          江苏省苏州市吴中区吴中大道 1188 号
        </el-descriptions-item>

        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-office-building"></i>
            3durl链接
          </template>
          江苏省苏州市吴中区吴中大道 1188 号
        </el-descriptions-item>

        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-office-building"></i>
            备注
          </template>
          江苏省苏州市吴中区吴中大道 1188 号
        </el-descriptions-item>
      </el-descriptions>
      <div class="dialog-footer">
        <el-button type="primary" @click="handleClose">关闭</el-button>
      </div>
    </div>
  </el-dialog>
</template>

<script>
import { mapGetters } from "vuex";
export default {
  name: "PreviewDialog",
  components: {

  },
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
    crDetail: {
      type: Object,
      default: () => ({}),
    },
  },

  computed: {
    ...mapGetters(["dicts"]),
    title() {
      return "预览——" + this.crDetail.name;
    },
  },

  watch: {
    visible: {
      handler: function (value) {
        this.dialogVisible = value;
      },
      immediate: true,
      deep: true,
    },
  },
  data() {
    return {
      dialogVisible: false,
    };
  },
  async mounted() {
    await this.$store.dispatch("dict/getDictList", [
      "displayType",
      "displayCharacter",
    ]);
  },
  methods: {
    handleClose(done) {
      this.$emit("handleClose");
    },
  },
};
</script>

<style lang='scss' scoped>
.title {
  display: flex;
  margin-bottom: 16px;

  .divider {
    width: 8px;
    border-left: 4px solid #409eff;
    margin-right: 8px;
  }

  .label {
    font-weight: bold;
  }
}

.dialog-content {
  padding: 0 32px;
  display: flex;
  flex-direction: column;

  .relate {
    flex: 1;
  }

  .dialog-footer {
    display: flex;
    justify-content: flex-end;
    margin-top: 40px;
  }
}

.video-container {
  background-color: #000;
  display: flex;
  justify-content: center;
}

.el-dialog__body {
  padding: 0 20px 30px 20px;
}
</style>