<template>
  <Dialog
    title="工程质量详情"
    :visible="dialogVisible"
    width="70%"
    @change-visible="changeVisible"
  >
    <DialogTabs
      :tabList="tabList"
      :currentTab="currentTabNow"
      @change="(val) => changeTab(val)"
    ></DialogTabs>
    <component :is="currentTabNow" :data="data"></component>
  </Dialog>
</template>
<script>
import ZLPD from "./ZLJCPD.vue";
import ZLJC from "./ZLJC.vue";
export default {
  name: "GCZLIndex",
  components: { ZLPD, ZLJC },
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
    data: {
      type: Object,
      default: () => {
        return {};
      },
    },
  },
  data() {
    return {
      tabList: [
        { name: "ZLPD", label: "质量评定" },
        { name: "ZLJC", label: "质量检测" },
      ],
      currentTabNow: "",
    };
  },
  computed: {
    dialogVisible: {
      get() {
        return this.visible;
      },
      set(val) {
        this.$emit("change-visible", val);
      },
    },
  },
  methods: {
    changeTab(e) {
      this.currentTabNow = e;
    },
    changeVisible(val) {
      this.dialogVisible = val;
    },
  },
  mounted() {
    this.$eventBus.$on("switchTabGC", (type) => {
      this.$nextTick(() => {
        this.currentTabNow = type;
      });
    });
  },
  watch: {
    dialogVisible(val) {
      if (val) {
        this.currentTabNow = "ZLPD";
      } else {
        this.currentTabNow = "";
      }
    },
  },
};
</script>
  <style lang="less" scoped>
</style>