<template>
  <div class="t_rtdw">
    <div class="row" v-if="typeList.length && showList.length">
      <div class="top_button">
        <Button
          v-for="(v, i) in typeList"
          :class="{ mr14: true, active: index == i }"
          @click="selectType(i)"
          :key="i"
          size="large"
        >
          {{ v.type }}
        </Button>
      </div>
      <div class="draw_box">
        <div class="content" v-for="(v, i) in showList" :key="i">
          <div class="content_item" @click="preview(i)">
            <div class="item_box">
              <span class="label">文档类型：</span>{{ v.type }}
            </div>
            <div class="item_box">
              <span class="label">文档名称：</span>{{ v.filename }}
            </div>
            <div class="item_box">
              <span class="label">产品名称：</span>{{ v.productName }}
            </div>
            <div class="item_box">
              <span class="label">版本号：</span>{{ v.version }}
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="empty h100" v-else></div>
    <Modal v-model="isPreview" footer-hide fullscreen>
      <p slot="header">
        <span>工艺图纸预览</span>
      </p>
      <div class="modal_body">
        <iframe
          :src="`${curFileUrl}#toolbar=0`"
          v-if="reset"
          frameborder="0"
          width="100%"
          height="100%"
        ></iframe>
      </div>
    </Modal>
  </div>
</template>
<script>
export default {
  name: "t_rtdw",
  inject: ["reload"],
  props: {
    curLevel: {
      type: Array,
    },
    levelNums: {
      type: Number,
    },
    signDetail: {
      type: Object,
    },
  },
  data() {
    return {
      // 分类列表
      typeList: [],
      // 文件总列表
      fileList: [],
      // 当前选中类型
      index: -1,
      // 展示文件列表
      showList: [],
      // 预览弹框是否展示
      isPreview: false,
      // 当前预览的工艺图纸文件路径
      curFileUrl: "",
      // 复位标志位
      reset: false,
      // 全屏好看的 Loading
      loading: null,
    };
  },
  mounted() {
    const _this = this;
    // 若当前页面不是从签到签出页面跳转过来的，就返回签到签出页面
    if (!_this.curLevel.length) {
      _this.$router.replace({
        name: "t_sign",
      });
      return false;
    }
    _this.getWkodBySection();
  },
  methods: {
    // 根据工位 ID 查询该工位下是否有已绑定的工单
    getWkodBySection() {
      const _this = this;
      let params = {
        sectionId: _this.curLevel[_this.curLevel.length - 1],
      };
      _this.axios
        .request({
          url: "/CNC/ProductPlanDispatch/WebScanMachine",
          params,
          method: "get",
        })
        .then((res) => {
          let result = res.data;
          if (result.ret == 1) {
            let data = result.data;
            let productId = data.product_id;
            if (productId) {
              // 获取该产品的工艺图纸
              _this.getDrawByProduct(productId);
            }
          }
        });
    },
    // 获取产品工艺图纸信息
    getDrawByProduct(productId) {
      const _this = this;
      let params = {
        productId: productId,
      };
      _this.loading = _this.$loading();
      _this.axios
        .request({
          url: "/Esop/EsopDocumentCreate/GetAllDocumentSet",
          params,
          method: "get",
        })
        .then((res) => {
          _this.loading.close();
          let result = res.data;
          if (result.ret == 1) {
            let data = result.data;
            _this.typeList = data.types;
            _this.fileList = data.fileList;
            // 默认选中第一种类型
            _this.selectType(0);
          }
        })
        .catch((err) => {
          _this.loading.close();
          _this.$Message.error("系统异常，请联系管理员！");
        });
    },
    // 监听类型选择
    selectType(i) {
      const _this = this;
      if (_this.index == i) {
        return false;
      }
      _this.index = i;
      _this.showList = [];
      _this.fileList.forEach((v) => {
        if (v.typeid == _this.typeList[i].typeid) {
          _this.showList.push(v);
        }
      });
    },
    // 预览
    preview(i) {
      const _this = this;
      let fileUrl = _this.showList[i].fileurl;
      let suffix = fileUrl.split(".")[1];
      if (suffix != "jpg" && suffix != "png" && suffix != "pdf") {
        _this.$Message.error("文件类型不支持预览！");
        return false;
      }
      _this.isPreview = true;
      _this.curFileUrl = _this.axios.publicPath + fileUrl;
      _this.reset = false;
      _this.$nextTick(() => {
        _this.reset = true;
      });
    },
  },
};
</script>
<style lang="less" scoped>
.t_rtdw {
  height: 100%;
  .row {
    height: 100%;
    .top_button {
      padding: 12px 14px;
      button {
        background-color: #f7f7f7;
        color: #c5c8ce;
      }
      .mr14 {
        margin-right: 14px;
      }
      .active {
        background-color: #2d8cf0;
        color: #fff;
      }
    }
    .draw_box {
      height: ~"calc(80vh - 80px)";
      overflow-y: auto;
      .content {
        display: inline-block;
        width: 32%;
        margin-top: 10px;
        margin-left: 10px;
        .content_item {
          font-size: 20px;
          background-color: #e4e4e4;
          margin-left: 15px;
          margin-top: 15px;
          padding: 8px;
          cursor: pointer;
          .item_box {
            color: #42415c;
            font-weight: bold;
            margin: 8px 0;
            .label {
              font-size: 20px;
              color: #2925fc;
            }
          }
        }
      }
    }
  }
}
.h100 {
  height: 100%;
}
.modal_body {
  height: 100%;
}
.empty {
  background: url("../../static/images/empty.png");
  background-repeat: no-repeat;
  background-position: 50% 50%;
}
</style>