<template>
  <!-- 现场展示 -->
  <div class="testdiv dashboard-editor-container">
    <div class="divborder newSearchDiv" style="margin:0px;">
      <!-- 产线层级 -->
      <div class="filter">
        <label>{{ $t("1132") }}：</label>
        <Cascader
          :data="datalevel"
          v-model="leveldata"
          change-on-select
          trigger="click"
          class="searchSelect"
          @on-change="changelevel"
        ></Cascader>
      </div>
      <!-- 文档名称 -->
      <div class="filter">
        <label>{{ $t("900752") }}：</label>
        <Input clearable class="searchInput" v-model="searchObj.documentName" />
      </div>
      <Button
        type="primary"
        class="twoWord Searchbtn"
        icon="ios-search"
        @click="Search()"
        >{{ $t("1001") }}</Button
      >
      <!-- 第一层 -->
      <div class="entryItem">
        <div class="choose">
          <div class="row">
            <Tooltip
              placement="top"
              class="options"
              v-for="(item, index) in passageList"
              @click.native="change(index, item.id)"
              :class="{ active: a == index }"
              :key="index"
              :content="item.name"
              >{{
                item.name.length > 5
                  ? item.name.substring(0, 5) + "..."
                  : item.name
              }}</Tooltip
            >
          </div>
        </div>
      </div>
      <!-- 第二层 -->
      <div class="choose">
        <div class="row">
          <div
            class="options_bot"
            v-for="(item, index) in stationList"
            @click="change1(item)"
            :key="index"
          >
            <p>
              <b style="color:blue">{{$t('900754')}}:</b>
              {{ item.type_name }}
            </p>
            <p>
              <b style="color:blue">{{$t('900752')}}:</b>
              {{ item.name }}
            </p>
            <p>
              <b style="color:blue">{{$t('100088')}}:</b>
              {{ item.product_name }}
            </p>
            <p>
              <b style="color:blue">{{$t('930133')}}:</b>
              {{ item.version }}
            </p>
          </div>
        </div>
      </div>
    </div>
    <!-- 预览窗口 -->
    <Modal
      title="预览"
      v-model="showmodal"
      :styles="{ width: '800px' }"
      class="newModalClass"
    >
      <div style="width:700px;height:500px;overflow:auto;">
        <div v-show="showcontent" ref="preview_content"></div>
        <div v-show="showpdf">
          <embed
            :src="pdfurl"
            type="application/pdf"
            width="100%"
            height="500px"
          />
        </div>
      </div>
      <div slot="footer">
        <div>
          <Button
            type="text"
            size="large"
            @click="showmodal = false"
            v-text="$t(1033)"
            >取消</Button
          >
        </div>
      </div>
    </Modal>
  </div>
</template>

<script>
import axios from "@/libs/api.request";
export default {
  data() {
    return {
      active: "active",
      datalevel: [], //  级联选择框数据
      levelid: 0, // 产线层级选中的section_id
      leveldata: [], //  产线层级插件所需数据
      passageList: [],
      stationList: [],
      a: 0,
      b: 0,
      ids: "",
      searchObj: {
        documentName: ""
      },
      showmodal: false,
      showcontent: false,
      showpdf: false,
      pdfurl: ""
    };
  },
  created() {
    this.defaultPageData();
    this.init();
  },
  methods: {
    // 第一层数据
    init() {
      let data = { type: 1 };
      axios
        .request({
          url: "/esop/EsopDocumentSet/GetAllDocumentSets",
          params: data,
          method: "get"
        })
        .then(res => {
          if (res.data.ret === 1) {
            if (res.data.data != null && res.data.data.length !== 0) {
              this.passageList = res.data.data;
              this.change(0);
            } else {
              this.passageList = [];
            }
          } else {
            this.$Message.error(this.$t(1000));
          }
        });
    },
    // 第一层改变事件
    change(index, id) {
      this.a = index;
      this.ids = id;
      // 组装请求参数
      let params = {
        section_id: this.levelid, // 0
        type_id: this.ids, // (当前选中项的id)
        document_name: this.searchObj.documentName
      };
      axios
        .request({
          url: "/esop/EsopDocumentSearch/SearchDocuments",
          params,
          method: "get"
        })
        .then(res => {
          this.stationList = []; // 初始化
          if (res.data.ret === 1) {
            this.stationList = res.data.data;
          } else {
            this.$Message.error(this.$t(res.data.msg));
          }
        });
    },
    // 监听搜索事件
    Search() {
      // 组装请求现参数
      let data = {
        section_id: this.levelid,
        type_id: 0, // 初始化为0
        document_name: this.searchObj.documentName
      };
      axios
        .request({
          url: "/esop/EsopDocumentSearch/SearchDocuments",
          params: data,
          method: "get"
        })
        .then(res => {
          this.stationList = []; // 初始化
          if (res.data.ret === 1) {
            this.stationList = res.data.data;
          } else {
            this.$Message.error(this.$t(res.data.msg));
          }
        });
    },
    defaultPageData() {
      this.initlevel(); // 初始化公司层级
    },
    initlevel() {
      // 初始化产线层级
      this.axios
        .request({
          url: "/config/ProjectLevelSection/GetSectionTree",
          method: "get"
        })
        .then(res => {
          this.datalevel = []; // 初始化
          if (res.data.ret === 1 && res.data.data.length !== 0) {
            this.datalevel = res.data.data;
          } else {
            this.$Message.error(this.$t(res.data.msg));
          }
          const arr = [];
          this.leveldata = arr;
        });
    },
    changelevel(data) {
      // 切换产线层级，触发事件
      this.levelid = data[data.length - 1];
    },
    change1(info) {
      var id = info.document_id;
      var versionid = 0;
      this.showpdf = false;
      this.showcontent = false;
      let url = axios.publicPath + info.file_url;
      // 判断url的值
      if (url != undefined && url != "undefined" && url != "") {
        //判断文档过类型
        let arr = url.split(".");
        if (arr.length > 1) {
          let type = arr[arr.length - 1];
          if (
            type == "txt" ||
            type == "pdf" ||
            type == "jpg" ||
            type == "png"
          ) {
            if (type == "jpg" || type == "png") {
              let html =
                '<img style="width:100%;height:100%;" src="' + url + '">';
              this.$refs.preview_content.innerHTML = html;
              this.showcontent = true;
              this.showmodal = true;
            } else if (type == "txt") {
              var params = {
                id: id,
                history_id: versionid
              };
              axios
                .request({
                  url: "/esop/Download/PreviewFile",
                  params,
                  method: "get"
                })
                .then(res => {
                  if (res.data.ret === 1) {
                    // var str = 'asfdasdfasdfasfd\nadfasdfasdfasdfad\nasdfasdfasdfasdf\n'
                    var str = res.data.data;
                    var str_o = str.replace(/<br>/g, "\n");
                    var str_t = str_o.replace(/</g, "&lt;");
                    var str_f = str_t.replace(/>/g, "&gt;");
                    var str_s = str_f.replace(/\n/g, "<br/>");
                    this.$refs.preview_content.innerHTML = str_s;
                    this.showcontent = true;
                    this.showmodal = true;
                  } else {
                    this.$Message.error(this.$t(res.data.msg));
                  }
                });
            } else if (type == "pdf") {
              this.showpdf = true;
              this.pdfurl = url;
              this.showmodal = true;
            }
          } else {
            this.$Message.error(this.$t("400073"));
            return false;
          }
        } else {
          this.$Message.error(this.$t("400072"));
          return false;
        }
      } else {
        this.$Message.error(this.$t("400071"));
        return false;
      }
    }
  }
};
</script>

<style lang="less" scoped>
.entryItem {
  background-color: #fff;
  border-radius: 20px;
  margin-bottom: 20px;
  padding: 20px;
  width: 100%;
}
.row {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  flex-shrink: 1;
}
.options {
  width: 100px;
  height: 35px;
  line-height: 35px;
  text-align: center;
  border-radius: 5px;
  background-color: #ddd;
  margin: 5px 5px;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: #fff;
  font-weight: bold;
}
.options_bot {
  padding: 0 10px;
  width: 185px;
  border-radius: 5px;
  margin-left: 10px;
  margin-bottom: 10px;
  background-color: rgb(228, 228, 228);
  cursor: pointer;
  p {
    margin: 3px 2px;
  }
}
.active {
  background-color: #2d8cf0;
  color: #fff;
}
.Searchbtn {
  margin-left: 35px;
  width: 70px;
  height: 30px;
}
.dashboard-editor-container {
  height: 800px;
  overflow-y: auto;
}
</style>
