<template>
  <div class="bg" v-show="dialogFlag">
    <div class="dialogBox">
      <div class="header">
        <span class="text">请选择数据</span>
        <span class="close" @click="closeDialog" data-isClose>&#10005;</span>
      </div>
      <div class="chooseArea">
        <div class="dataFrom" v-if="isShowDataFrom">
          <span style="display:inline-block;white-space:nowrap;">数据来源：</span>
          <div class="mySelect" @click="showDropList = !showDropList" ref="mySelect">
            <span class="chooseRes">{{ defaultValue }}</span>
            <span class="myIcon">&or;</span>
          </div>
          <ul class="myList" @click="handleChange" v-show="showDropList">
            <li v-for="option in options" :key="option.value">{{ option.label }}</li>
          </ul>
        </div>
        <div class="wn" v-show="defaultValue === '视图设计器'">
          <div class="chooseBox">
            <!-- <div class="myBtn" @click="showBtnList = !showBtnList" ref="myBtn" v-if="isClickDsList2">
              <span class="btnchooseRes">{{ choose }}</span>
              <span class="myIcon">&or;</span>
            </div> -->
            <!-- <ul class="myBtnList" @click="handleMenuClick" v-show="showBtnList">
              <li v-for="(name, index) in nameArr" :key="'_' + index">{{ name }}</li>
            </ul> -->
            <div class="myInput" :class="{ inputActive: iActive }" @click="iActive = true" ref="myInput">
              <span class="iconfont icon-sousuo"></span>
              <input placeholder="请输入搜索内容" @blur="iActive = false" @keydown="handleInput" v-model="datasetName" />
            </div>
          </div>
          <!-- <ul v-show="showList" class="dataSetList" @click="chooseDataSet">
            <li v-for="(item,index) in filDataSet" :key="index" :class="{liactive: item.dataSetId === checkedName}">
              {{item.dataSetId}}</li>
          </ul> -->

          <div style="height:300px;width: 100%;">
            <el-scrollbar style="height:300px;">
              <el-tree ref="dsPanelTree" :data="treeData" default-expand-all node-key="dataSet" @node-click="nodeClick"
                :filter-node-method="filterNode">
                <span slot-scope="{data}">
                  <i :class="!data.isFile ? 'el-icon-folder' : 'el-icon-document'" style="color:#1488f5"></i>
                  <span style="margin-left:6px;display:inline-block;">{{ data.dataSet }}</span>
                </span>
              </el-tree>
            </el-scrollbar>
          </div>

          <!-- <div v-show="!showList" class="empty">
            <span>暂无数据</span>
          </div> -->
        </div>
        <div class="desk" v-show="defaultValue === '桌面文件'" @click="chooseFile">
          <span class="iconfont icon-jia"></span>{{ fileName }}
        </div>
        <textarea class="interface" v-show="defaultValue === '数据接口'" v-model="text" @click="clearText" @paste="pasting"
          :class="{ active: isActive }"></textarea>
      </div>
      <div class="btnBox">
        <button class="cancel" @click="closeDialog" data-isClose>取消</button>
        <button class="confirm" @click="toDs">确定</button>
      </div>
    </div>
  </div>
</template>

<script>
// import { xlgToJson, debounce } from './dialogFile/index'
import { Message } from 'element-ui';
// const fileurl = '/file/openPurchFile?gongqiFileId='
export default {
  name: "MyDialog",
  components: {},
  props: ['dialogFlag', 'treeData', 'isShowDataFrom'],
  watch: {
    datasetName(newVal) {
      // 遍历可以展示树节点的数组，判断newVal是否在其中
      this.$refs.dsPanelTree.filter(newVal);
    }
  },
  created() {

  },
  destroyed() {
    document.removeEventListener('click', this.documentClick)
    window.removeEventListener('click', this.exClickTreeNode)
  },
  mounted() {
    let that = this
    window.addEventListener('click', that.exClickTreeNode)

    document.addEventListener('click', this.documentClick)
    window.getImportFileContent = (suffix, url, gongQiFileId, filePath) => {
      // let primary = fileurl + gongQiFileId
      that.$emit('getFileMsg', { suffix, gongQiFileId, url, filePath })

      // that.$http.get(primary).then(res => {
      //   console.log(res, "$$$$$$$$$$$$$");
      //   let title = res.result.title
      //   this.fileName = title + suffix
      //   const dsJson = xlgToJson(res)
      //   console.log('xlgToJson的结果', dsJson);

      //   this.dataObj.dataFrom = 'desk'
      //   this.dataObj.res = JSON.parse(dsJson.dataSetJSON)
      //   this.dataObj.result = dsJson.dsJson
      //   that.$emit('getImportFileDsData', this.dataObj)
      //   this.closeDialog()
      // })


    }
  },
  computed: {
    showList() {
      return this.filDataSet.length !== 0
    },
    filDataSet() {
      return this.checkedData.filter(item => {
        return item.dataSetId.indexOf(this.finalSearch) !== -1
      })
    }
  },
  data() {
    return {
      curNodeData: null,
      isActive: false,
      iActive: false,
      showDropList: false,
      // showBtnList: false,
      defaultValue: '视图设计器',
      options: [
        {
          value: 'wn',
          label: '视图设计器'
        },
        {
          value: 'desk',
          label: '桌面文件'
        },
        {
          value: 'interface',
          label: '数据接口'
        }
      ],
      //当前域名
      choose: '',
      //域名
      nameArr: [],
      doMain: [],
      //所有域数据集
      resResult: [],
      //选中域的数据
      checkedData: [],
      //数据集选中的名字
      // checkedName: '',
      //搜索框内容
      datasetName: '',
      finalSearch: '',
      text: '请输入接口地址',
      gongQiFileId: '1',
      dataObj: {},
      fileName: '点击选择文件'
    };
  },
  methods: {
    exClickTreeNode() {
      this.curNodeData = null

    },
    documentClick(e) {
      if (this.$refs.mySelect) {
        let flag = this.$refs.mySelect.contains(e.target)
        let flag3 = this.$refs.myInput.contains(e.target)
        if (!flag) this.showDropList = false
        if (!flag3) this.iActive = false
      }
    },
    // 树节点筛选
    filterNode(value, data) {
      if (!value) return true;
      return data.label.indexOf(value) !== -1;
    },
    // 点击树节点
    nodeClick(data) {
      this.curNodeData = data

    },
    chooseDataSet(e) {
      console.log(e.target.innerText);
      // this.checkedName = e.target.innerText
    },
    //选择域后的回调
    handleMenuClick(e) {
      this.choose = e.target.innerText
      let i = this.nameArr.indexOf(this.choose)
      if (i !== -1) {
        if (this.resResult[i].content !== null) {
          this.checkedData = [...new Set(Object.values(this.resResult[i].content).flat(1))];
        } else {
          console.log();

        }
      }
    },
    handleChange(e) {
      this.defaultValue = e.target.innerText
    },
    // handleInput: debounce(function () {
    //   console.log(this.datasetName);
    //   this.finalSearch = this.datasetName
    // }, 500),
    handleInput() {
      this.finalSearch = this.datasetName

    },
    chooseFile() {
      let frameId = window.frameElement.id
      if(frameId === 'dsDialog'){
        frameId = window.parent.frameElement.id
      }
      console.log(frameId,'frameId',window)
      window.top.window.selectItem(frameId,'ds,xlg,xlsx');
    },
    clearText() {
      console.log("111");
      this.isActive = true;
      this.text = ''
    },
    getText() {
      this.isActive = false;
      console.log(this.text);
    },
    pasting(e) {
      /* let pasteValue = (e.clipboardData || window.clipboardData).getData("text");
      e.target.innerHTML = pasteValue; */
      console.log(this.text, e);
    },
    closeDialog(e) {
      console.log(e);
      this.$emit('update:dialogFlag', false)
    },
    toDs() {
      // const index = this.nameArr.indexOf(this.choose)
      // this.dataObj.doMain = this.doMain[index]
      // this.dataObj.dataFrom = this.defaultValue
      // pubsub.publish('getData',this.dataObj)
      // this.$emit('update:dialogFlag',false)

      if (this.curNodeData && this.curNodeData.isFile) {
        this.$emit('showIframeDs', this.curNodeData.dataSet)
      } else {
        Message({
          type: 'info',
          message: '请选择需要打开的文件',
        })
      }



    },
  },
};
</script>

<style scoped>
ul,
li {
  padding: 0;
  margin: 0;
}

.bg {
  position: fixed;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.3);
  z-index: 9999999;
}

.inputActive {
  border: 1px solid #409eff !important;
  box-shadow: 0 0 5px 0 #409eff;
}

.liactive {
  color: #409eff !important;
  border: 1px solid #409eff !important;
}

.dataSetList {
  display: block;
  list-style-type: none;
  padding: 0;
  border: 1px solid #dcdfe6;
  width: 320px;
  max-height: 250px;
  margin: 20px auto;
  overflow: auto;
}

.dataSetList li {
  display: block;
  list-style-type: none;
  padding: 0;
  width: 100%;
  height: 30px;
  font-size: 12px;
  text-align: center;
  line-height: 30px;
  cursor: pointer;
}

.dataSetList li:hover {
  color: #409eff;
  border: 1px solid #409eff;
}

.dataSetList li+li {
  border-top: 1px solid #dcdfe6;
}

.dataSetList::-webkit-scrollbar {
  width: 6px;
  border-radius: 4px;
}

.dataSetList::-webkit-scrollbar-thumb {
  background-color: #dcdfe6;
  border-radius: 4px;
}

.empty {
  margin: 20px;
  height: 200px;
  border: 1px solid #dcdfe6;
  display: flex;
  align-items: center;
  justify-content: center;
}

.active {
  color: #000 !important;
  border: 1px solid #409eff !important;
}

.dialogBox {
  width: 400px;
  box-sizing: border-box;
  position: fixed;
  /* z-index: 99999999; */
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  border: 1px solid #fff;
  padding: 10px;
  background-color: #fff;
  user-select: none;
}

.header {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

.text {
  font-size: 14px;
}

.close {
  font-size: 20px;
  color: #000;
  font-weight: 700;
}

.close:hover {
  color: #409eff;
}

.chooseArea {
  width: 100%;
}

.dataFrom,
.wn {
  width: 360px;
  margin: 0 auto;
  margin-bottom: 10px;
  font-size: 14px;
}

.dataFrom {
  display: flex;
  align-items: center;
}

.wn {
  border: 1px solid #dcdfe6;
}

.chooseBox {
  display: flex;
  justify-content: center;
  align-content: center;
  width: 320px;
  margin: 8px auto;
}

.chooseBox button {
  height: 30px;
  background-color: #1890ff;
  color: #fff;
  margin: 1px;
}

.chooseBox input {
  border: none;
  outline: none;
  padding-left: 4px;
  line-height: 27px;
}

.chooseBox input::-webkit-input-placeholder {
  color: #dcdfe6;
}

.myInput {
  width: 300px;
  height: 30px;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
}

.myInput span {
  display: inline-block;
  vertical-align: middle;
  margin-top: -1px;
  padding-left: 4px;
}

.mySelect {
  position: relative;
  display: flex;
  width: 290px;
  height: 30px;
  outline: none;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  justify-content: space-between;
  align-items: center;
}

.mySelect .chooseRes {
  margin-left: 10px;
}

.mySelect .myIcon {
  font-size: 14px;
  line-height: 30px;
  transform: scale(2, 1);
  font-weight: 100;
  color: #dcdfe6;
  margin-right: 10px;
}

.mySelect .myIcon:hover {
  color: #000;
}

.myList {
  position: absolute;
  top: 80px;
  left: 89px;
  display: block;
  z-index: 3;
  background-color: #fff;
  border: 1px solid #dcdfe6;
  width: 290px;
  height: auto;
  list-style-type: none;
}

.myList li {
  display: block;
  box-sizing: border-box;
  width: 100%;
  height: 24px;
  font-size: 14px;
  text-align: left;
  padding-left: 10px;
  line-height: 24px;
  list-style-type: none;
  cursor: pointer;
}

.myList li:hover {
  color: #000;
  font-weight: 700;
}

.myBtn {
  width: auto;
  height: 30px;
  line-height: 30px;
  text-align: center;
  background-color: #409eff;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #fff;
  border: 1px solid #409eff;
  border-radius: 4px;
  padding: 2px 10px;
}

.myBtn .btnchooseRes {
  max-width: 70px;
  overflow: hidden;
  white-space: nowrap;
}

.myBtn .myIcon {
  font-size: 14px;
  line-height: 30px;
  transform: scale(2, 1);
  font-weight: 100;
  color: #dcdfe6;
  margin-left: 10px;
}

.myBtnList {
  position: absolute;
  top: 130px;
  left: 39px;
  display: block;
  z-index: 3;
  background-color: #fff;
  border: 1px solid #dcdfe6;
  width: auto;
  height: auto;
  padding: 2px 20px;
  border-radius: 4px;
  list-style-type: none;
}

.myBtnList li {
  display: block;
  width: 100%;
  height: 24px;
  font-size: 14px;
  text-align: center;
  line-height: 24px;
  list-style-type: none;
  cursor: pointer;
}

.myBtnList li:hover {
  font-weight: 700;
}

.myBtnList li {
  max-width: 200px;
  overflow: hidden;
}

.desk {
  width: 360px;
  height: 100px;
  margin: 0 auto;
  text-align: center;
  line-height: 100px;
  margin-bottom: 20px;
  border: 1px dashed gray;
  color: gray;
  font-size: 14px;
}

.desk:hover {
  border: 1px solid #409eff !important;
  box-shadow: 0 0 5px 0 #409eff;
}

.interface {
  display: block;
  width: 355px;
  height: 100px;
  margin: 0 auto;
  margin-bottom: 20px;
  border: 1px solid #dcdfe6;
  color: #dcdfe6;
  font-size: 14px;
  outline: none;
  resize: none;
}

.btnBox {
  display: flex;
  justify-content: flex-end;
}

.btnBox button {
  font-size: 12px;
  margin-left: 10px;
  height: 30px;
  padding: 2px 10px;
  cursor: pointer;
}

.cancel {
  border: 1px solid #409eff;
  background: #fff;
  color: #409eff;
  border-radius: 4px;
}

.confirm {
  background-color: #409eff;
  color: #fff;
  border: 1px solid #409eff;
  border-radius: 4px;
}



/* ::v-deep .el-message { */

::v-deep .el-message.el-message--info {
  top: 12px !important;
  z-index: 20999909 !important;
}



/* .el-scrollbar__wrap::-webkit-scrollbar {
  width: 0 !important
} */


::v-deep .el-scrollbar__wrap::-webkit-scrollbar {
  width: 0 !important
}

::v-deep .el-scrollbar__wrap {
  overflow-x: auto;
  height: calc(100% + 20px);
}

::v-deep .el-scrollbar .el-scrollbar__wrap .el-scrollbar__view {
  white-space: nowrap;
  display: inline-block;
}
</style>