<template>
  <el-dialog
    :visible.sync="visible"
    top="3vh"
    :before-close="handleClose"
    lock-scroll
    width="65vw"
  >
    <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="approvalInfo"
            :flowId="detail.id"
            :isShowApprovalForm="prviewType == 'approval'"
            v-if="item == '流程详情'"
          />
          <CulturalRelicBaseInfo
            :info="culturalRelicDetailVo"
            v-if="item == '文物基本信息'"
          />
          <CulturalRelicTable
            :crList="culturalRelicPageVo"
            :flowId="detail.id"
            v-if="item == '文物列表'"
          />
          <DisplayBaseInfo
            :info="exhibitionDetailVo"
            v-if="item == '展览基本信息'"
          />
          <DisplayRender :info="exhibitionDetailVo" v-if="item == '效果预览'" />
        </el-tab-pane>
      </el-tabs>
    </div>
    <el-card v-if="prviewType == 'approval'" class="approval-form">
      <ApprovalForm :flowId="detail.id" />
    </el-card>
  </el-dialog>
</template>

<script>
import { mapGetters } from "vuex";
import CulturalRelicBaseInfo from "@/components/CulturalRelicInfo";
import DisplayBaseInfo from "@/components/DisplayBaseInfo";
import CulturalRelicTable from "./culturalRelic/CulturalRelicTable.vue";
import ApprovalInfo from "./approval/ApprovalInfo.vue";
import DisplayRender from "./display/DisplayRender.vue";
import ApprovalForm from "./approval/ApprovalForm.vue";
export default {
  name: "PreviewDialog",
  components: {
    CulturalRelicBaseInfo,
    CulturalRelicTable,
    ApprovalInfo,
    DisplayBaseInfo,
    DisplayRender,
    ApprovalForm,
  },
  props: {
    // 预览类型，view or approval
    prviewType: {
      type: String,
      default: "view",
    },
    detail: {
      type: Object,
      default: () => ({}),
    },
  },
  // provide必须返回一个函数，不然更新后无法获取最新的值
  provide() {
    return {
      handleClosePreviewDialog: this.handleClose,
    };
  },
  computed: {
    ...mapGetters(["dicts"]),
    tabs() {
      const tabs = ["流程详情"];
      const { sourceType, addWay } = this.detail;
      switch (sourceType) {
        case "展览展示":
          tabs.push("展览基本信息", "效果预览");
          break;
        case "文物":
          if (addWay == "手动添加") {
            tabs.push("文物基本信息");
          } else {
            tabs.push("文物列表");
          }
          break;
      }
      return tabs;
    },
    //传给ApprovalInfo组件的
    approvalInfo() {
      if (!this.detail) {
        return {};
      }
      const {
        title,
        addWay,
        sourceType,
        createTime,
        deptName,
        checkStatus,
        remark,
        createName,
        checkDetailList,
      } = this.detail;
      const approvalInfo = {
        title,
        addWay,
        sourceType,
        createTime,
        deptName,
        checkStatus,
        remark,
        createName,
        checkDetailList,
      };
      return approvalInfo;
    },
    //传给CulturalRelicBaseInfo组件的
    culturalRelicDetailVo() {
      if (!this.detail) {
        return {};
      }
      const { culturalRelicDetailVo } = this.detail;
      return culturalRelicDetailVo;
    },
    //传给CulturalRelicTable组件的
    culturalRelicPageVo() {
      if (!this.detail) {
        return {};
      }
      const { culturalRelicPageVo } = this.detail;
      return culturalRelicPageVo;
    },
    //传给DisplayBaseInfo和DisplayRender组件的
    exhibitionDetailVo() {
      if (!this.detail) {
        return {};
      }
      const { exhibitionDetailVo } = this.detail;
      return exhibitionDetailVo;
    },
  },
  data() {
    return {
      visible: false,
      activeName: "流程详情",
    };
  },
  methods: {
    handleClose(done) {
      this.visible = false;
      this.activeName = "流程详情";
    },
  },
};
</script>

<style lang="scss" scoped>
::v-deep .el-tabs__content {
  max-height: 64vh;
  overflow: auto;
  padding-bottom: 80px;
}

::v-deep .el-table__body-wrapper {
  overflow-x: hidden;
}
.approval-form {
  padding: 20px;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 99;
}
</style>
