<template>
  <el-dialog
    :visible.sync="visible"
    top="3vh"
    :before-close="handleClose"
    lock-scroll
  >
    <div class="title" slot="title">
      <div class="divider"></div>
      <div class="label">{{ prviewType == "view" ? "预览" : "审核" }}</div>
    </div>
    <div class="dialog-content">
      <el-tabs v-model="activeName">
        <el-tab-pane
          v-for="(item, index) in tabs"
          :key="index"
          :label="item"
          :name="item"
        >
          <ApprovalInfo
            :info="aprrovalInfo"
            :isShowApprovalForm="prviewType == 'approval'"
            v-if="item == '流程详情'"
          />
          <CulturalRelicBaseInfo
            :info="culturalRelicBaseInfo"
            v-if="item == '文物基本信息'"
          />
          <CulturalRelicTable :crList="crList" v-if="item == '文物列表'" />
          <DisplayBaseInfo :info="displayInfo" v-if="item == '展览基本信息'" />
          <DisplayRender :info="displayInfo" v-if="item == '效果预览'" />
        </el-tab-pane>
      </el-tabs>
    </div>
  </el-dialog>
</template>

<script>
import { mapGetters } from "vuex";
import CulturalRelicBaseInfo from "./culturalRelic/CulturalRelicInfo.vue";
import CulturalRelicTable from "./culturalRelic/CulturalRelicTable.vue";
import DisplayBaseInfo from "./display/DisplayBaseInfo.vue";
import ApprovalInfo from "./approval/ApprovalInfo.vue";
import DisplayRender from "./display/DisplayRender.vue";
import { cr, crList, display } from "../mock";
export default {
  name: "PreviewDialog",
  components: {
    CulturalRelicBaseInfo,
    CulturalRelicTable,
    ApprovalInfo,
    DisplayBaseInfo,
    DisplayRender,
  },
  props: {
    // 预览类型，view or approval
    prviewType: {
      type: String,
      default: "view",
    },
    aprrovalInfo: {
      type: Object,
      default: () => ({}),
    },
  },
  computed: {
    ...mapGetters(["dicts"]),
    tabs() {
      const tabs = ["流程详情"];
      const { sourceType, addWay } = this.aprrovalInfo;
      switch (sourceType) {
        case "展览":
          tabs.push("展览基本信息", "效果预览");
          break;
        case "文物":
          if (addWay == "单个") {
            tabs.push("文物基本信息");
          } else {
            tabs.push("文物列表");
          }
          break;
      }
      return tabs;
    },
  },
  data() {
    return {
      visible: false,
      activeName: "流程详情",
      culturalRelicBaseInfo: cr, //单个文物的信息
      crList,
      displayInfo: display,
    };
  },
  methods: {
    handleClose(done) {
      this.visible = false;
      this.activeName = "流程详情";
    },
  },
};
</script>

<style lang="scss" scoped>
::v-deep .el-tabs__content {
  max-height: 60vh;
  overflow: auto;
}
</style>
