<template>
  <div class="bbsl-common-page">
    <div class="bbsl-table-search">
      <el-form v-model="queryParam" :inline="true">
        <el-form-item label="资料名称：">
          <el-input
            v-model="querys[0].value"
            clearable
            maxlength="128"
            placeholder="请输入课目名称"
          >
          </el-input>
        </el-form-item>
        <el-form-item>
          <el-button icon="el-icon-search" type="primary" @click="getData(1)"
            >搜索
          </el-button>
          <!-- <el-button icon="el-icon-refresh" @click="clearQuerys">重置</el-button> -->
        </el-form-item>
      </el-form>
    </div>
    <el-row :gutter="10" class="fullheight">
      <el-col :span="6" class="fullheight">
        <div class="common-tree-container">
          <div class="container-head">
            <el-input
              v-model="filterText"
              clearable
              placeholder="输入关键字进行过滤"
            >
            </el-input>
            <img
              v-if="expandAll"
              src="@/assets/img/quanjusuoxiao2.png"
              @click="expandHandle"
            />
            <img v-else src="@/assets/img/quanping.png" @click="expandHandle" />
            <i class="el-icon-refresh" @click="getTreen"></i>
          </div>
          <el-tree
            v-if="treeData.length"
            ref="tree"
            :current-node-key="currentKey"
            :data="treeData"
            :expand-on-click-node="expandAll"
            :filter-node-method="filterNode"
            :props="defaultProps"
            highlight-current
            node-key="id"
            @node-click="handleNodeClick"
          >
            <!-- :render-content="renderContent" -->
          </el-tree>
        </div>
      </el-col>

      <el-col :span="18" class="fullheight">
        <div ref="contentPanel" class="bbsl-table-content">
          <div ref="btnPanel" class="bbsl-btn-content"></div>
          <el-table
            ref="multipleSelection"
            v-loading="loading"
            :cell-style="{'text-align': 'center'}"
            :data="tableData"
            :header-cell-style="{'text-align': 'center'}"
            :max-height="tableMaxHeight"
            :style="{width: '100%'}"
            size="mini"
            @row-dblclick="handleDbClick"
            @selection-change="handleSelectionChange"
          >
            <el-table-column
              fixed
              label="序号"
              type="index"
              width="55"
            ></el-table-column>
            <el-table-column
              label="资料名称"
              min-width="150"
              prop="title"
              show-overflow-tooltip
            >
            </el-table-column>
            <el-table-column
              label="资料分类"
              min-width="100"
              prop="typeName"
              show-overflow-tooltip
            >
            </el-table-column>
            <el-table-column
              label="关键词"
              min-width="70"
              prop="keyword"
              show-overflow-tooltip
            >
            </el-table-column>
            <el-table-column
              label="资料简介"
              min-width="150"
              prop="memo"
              show-overflow-tooltip
            >
            </el-table-column>
            <el-table-column label="操作">
              <template slot-scope="scope">
                <!-- <el-button size="mini" @click="Empower(scope.$index, scope.row)">查看文件</el-button> -->
                <el-popover
                  :width="examFiles.length > 0 ? '300' : '200'"
                  placement="bottom"
                  trigger="click"
                >
                  <div v-if="examFiles.length > 0">
                    <div
                      v-for="(item, index) in examFiles"
                      :key="index"
                      class="spinner"
                    >
                      <span>{{ item.fileName }}</span>
                      <div style="width: 15%;text-align: right;">
                        <a :href="item.fileUrl" target="_blank">下 载</a>
                      </div>
                    </div>
                  </div>
                  <div v-else>
                    暂无文件可供下载
                  </div>
                  <el-button
                    slot="reference"
                    @click="Empower(scope.$index, scope.row)"
                    >查看文件
                  </el-button>
                </el-popover>
              </template>
            </el-table-column>
          </el-table>
          <el-pagination
            ref="paginationPanel"
            :current-page="queryParam.pageBean.page"
            :page-size="queryParam.pageBean.pageSize"
            :page-sizes="[20, 30, 40, 50]"
            :total="total"
            align="right"
            background
            class="bbsl-pagination"
            layout="prev, pager, next,total, sizes, jumper"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          ></el-pagination>
        </div>
      </el-col>
    </el-row>
    <el-dialog
      :before-close="handleClose"
      :close-on-click-modal="false"
      :visible.sync="dialogVisible"
      title="文件列表"
      width="30%"
    >
      <div>
        <div
          v-for="(item, index) in this.examFiles"
          :key="index"
          class="spinner"
        >
          <span>{{ item.fileName }}</span>
          <el-button size="mini"
            ><a :href="item.fileUrl" target="_blank">下 载</a></el-button
          >
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import zlcyMenu from '@/api/examination/zlcyMenu.js'
import {TableMixin} from '@/mixins/tableMixin' // import zlflMenuDialog from './components/zlflMenuDialog.vue'
// import zlflMenuDialog from './components/zlflMenuDialog.vue'
// import givePower from './components/givePower.vue'

export default {
  name: 'zlcyMenu',

  mixins: [TableMixin],
  data() {
    return {
      dialogVisible: false,
      search: '',
      tableData: [],
      treeData: [],
      defaultProps: {
        children: 'children',
        label: 'name'
      },
      parentId: null, //上级id
      querys: [
        {
          group: 'main',
          operation: 'LIKE',
          parentGroup: '',
          property: 'title',
          relation: 'AND',
          value: ''
        },
        {
          group: 'main',
          operation: 'EQUAL',
          parentGroup: '',
          property: 'typeId',
          relation: 'AND',
          value: ''
        }
      ],
      examFiles: [], //文件列表
      currentKey: null,
      filterText: '',
      expandAll: false
    }
  },
  created() {
    this.getTreen()
  },
  watch: {
    currentKey: {
      handler(value) {
        if (value) {
          this.$nextTick(() => {
            this.$refs.tree.setCurrentKey(this.currentKey)
          })
        }
      },
      immediate: true,
      valType: false
    },
    filterText(val) {
      this.$refs.tree.filter(val)
    }
  },
  mounted() {},
  methods: {
    expandHandle() {
      console.log(this.$refs.tree.store)
      this.expandAll = !this.expandAll
      this.expandNodes(this.$refs.tree.store.root)
    },
    // 遍历树形数据，设置每一项的expanded属性，实现展开收起
    expandNodes(node) {
      node.expanded = this.expandAll
      for (let i = 0; i < node.childNodes.length; i++) {
        node.childNodes[i].expanded = this.expandAll
        if (node.childNodes[i].childNodes.length > 0) {
          this.expandNodes(node.childNodes[i])
        }
      }
    },
    filterNode(value, data) {
      // console.log(data);
      if (!value) return true
      return data.name.indexOf(value) !== -1
    },
    handleAdd() {
      this.$refs.formModal.add(this.parentId)
    },
    // 查看文件
    Empower(index, item) {
      this.examFiles = []
      zlcyMenu.getInfo(item.id, res => {
        if (res.examFiles) {
          // this.dialogVisible = true
          this.examFiles = res.examFiles
        }
      })
    },
    loadData() {},
    // 获取list
    getData(page) {
      if (page) {
        this.queryParam.pageBean.page = page
      }
      this.loading = true
      this.tableData = []
      this.queryParam.querys = []
      if (this.querys[0].value) {
        this.queryParam.querys.push(this.querys[0])
      }
      if (this.querys[1].value) {
        this.queryParam.querys.push(this.querys[1])
      }
      zlcyMenu.getMaterial(this.queryParam, res => {
        this.total = res.total
        this.tableData = res.rows
        this.$set(this.tableData)
        this.loading = false
      })
    },
    // 获取树
    getTreen() {
      this.currentKey = null
      zlcyMenu.getMaterTree(
        {
          id: '0'
        },
        res => {
          this.treeData = res.value
          this.currentKey = res.value[0].id
          this.querys[1].value = this.currentKey
          this.$set(this.querys[1])
          this.$set(this.treeData)
          this.getData(1)
        }
      )
    },
    searchName() {
      let querys = {
        name: ''
      }
      querys.name = this.search
      zlcyMenu.getMaterTree(querys, res => {
        this.treeData[0].children = res.value
        this.$set(this.treeData)
      })
    },
    // 点击树查看数据
    handleNodeClick(data) {
      this.parentId = data.id
      if (data.id == '0') {
        this.querys[1].value = ''
        this.getData(1)
      } else {
        this.querys[1].value = this.parentId
        this.getData(1)
      }
    },
    handleClose(done) {
      this.dialogVisible = false
    }
  }
}
</script>
<style lang="scss" scoped>
a {
  // text-decoration: none;
  // color: #000;
}

.type-tag {
  margin: 0 2px;
}

.common-tree-container {
  height: calc(100% - 70px);
  margin-top: 0.52083vw;
  padding: 1.04167vw 1.04167vw;
  background-color: #fff;
  position: relative;
  box-sizing: border-box;
  overflow-y: auto;
  border-radius: 20px;
  box-shadow: 0px 0px 0.625vw 0 rgba(92, 102, 83, 0.2);
}

.title {
  width: 100%;
  margin-bottom: 10px;

  i {
    color: #1289fe;
    font-size: 25px;
  }

  span {
    font-size: 25px;
  }
}

::v-deep .el-tree {
  height: 90%;
  overflow-y: auto;
  border: none;
}

::v-deep .el-tree-node__content {
  padding: 5px 0;
}

.spinner {
  display: flex;
  justify-content: space-between;
}

.container-head {
  display: flex;
  align-items: center;

  img {
    width: 28px;
    height: 28px;
    margin: auto 5px;
    cursor: pointer;
  }

  i {
    font-size: 28px;
    font-weight: 600;
    cursor: pointer;
  }
}
</style>
