<template>
  <div>
    <el-drawer
      title="材料预览"
      :visible.sync="Visible"
      size="50%"
      @close="handleClose"
      :destroy-on-close="true"
    >
      <div class="main flex">
        <div class="left flex flexc jcc aic">
          <div class="left-header flex flexc aic jcc">
            <div class="mb10 name">{{ materialsInfo.materialName }}</div>
            <p class="abbreviation">
              {{ materialsInfo.materiaFullName }}
            </p>
          </div>
          <!-- 样表 -->
          <div class="sample-sheet flex1">
            <img class="sample-sheet-img" :src="api2 + materialsPreview" />
          </div>
        </div>
        <!--        <div class="right">-->
        <!--          <formBuilder-->
        <!--            ref="formBuilder"-->
        <!--            :buildData="materialsJsonList"-->
        <!--            v-model="val"-->
        <!--          ></formBuilder>-->
        <!--        </div>-->
      </div>
    </el-drawer>
  </div>
</template>

<script>
// import formViewer from "@/components/formDes/formViewer.vue";
//import formBuilder from "@/components/formDes/formBuilder.vue";
// import { regionData } from "element-china-area-data";
export default {
  props: {
    drawer: {
      type: Boolean,
      required: true,
      default: false,
    },
    materialsInfo: {
      type: Object,
      required: true,
      default: () => {
        return {};
      },
    },
  },
  components: {
    // formViewer,
    //formBuilder,
  },
  data() {
    return {
      api: process.env.VUE_APP_API_BASE_URL + "/",
      api2: process.env.VUE_APP_API_IMG_URL,
      val: "",
    };
  },
  computed: {
    Visible: {
      get() {
        return this.drawer;
      },
      set(val) {
        this.$emit("update:drawer", val);
      },
    },
    materialsJsonList() {
      if (this.materialsInfo.formContent) {
        return JSON.parse(this.materialsInfo.formContent);
      } else {
        return {};
      }
    },
    materialsPreview() {
      return this.materialsInfo.preViewPath;
    },
  },
  methods: {
    handleOk() {
      this.$refs.formBuilder.validate();
    },
    handleClose() {
      this.val = "";
    },
  },
};
</script>

<style lang="less" scoped>
/deep/.el-drawer__header {
  margin-bottom: 20px !important;
}
/deep/.el-drawer__body {
  border-top: 1px solid #ececec;
}
/deep/.el-input {
  width: 100% !important;
}
.main {
  width: 100%;
  height: 100%;
}
.left {
  width: 100%;
  height: 100%;
  background-color: #e8e8e8;
  overflow-y: auto;
  &::-webkit-scrollbar {
    width: 10px;
    overflow-y: auto;
  }

  &::-webkit-scrollbar-thumb {
    border-radius: 6px;
    background-color: rgba(144, 147, 153, 0.5);
  }

  &::-webkit-scrollbar-track {
    border-radius: 6px;
    background: #fff;
  }

  .left-header {
    height: 80px;
    .name {
      font-size: 18px;
    }
    .abbreviation {
      font-size: 14px;
      color: #999;
    }
  }
  .sample-sheet {
    width: 90%;
    height: 80%;
    padding-bottom: 20px;
  }
  .sample-sheet-img {
    width: 100%;
  }
}
.right {
  width: 50%;
  height: 100%;
  padding: 10px;
  padding-bottom: 20px;
  overflow-y: auto;
}
</style>