<template>
  <div class="monthReport">
    <div class="monthContent1" v-if="modleBool">
      <div style="display: flex">
        <el-input
          placeholder="输入站点名称或关键字"
          v-model="filterText"
          class="attContentInput"
          clearable
        >
          <template #suffix>
            <i class="el-icon-search el-input__icon"></i>
          </template>
        </el-input>
      </div>

      <div class="monthSwitch">
        <el-tree
          class="monthTree"
          ref="tree"
          :data="store.state.siteList"
          show-checkbox
          node-key="id"
          :props="defaultProps"
          :filter-node-method="filterNode"
        >
          <template #default="{ node }">
            <span class="custom-tree-node">
              <el-tooltip
                class="item"
                effect="dark"
                :content="node.label"
                placement="top"
              >
                <span>{{ node.label }}</span>
              </el-tooltip>
            </span>
          </template>
        </el-tree>
      </div>
    </div>
    <div class="monthContent2" v-if="modleBool">
      <el-tabs
        v-model="activeName"
        type="card"
        @tab-click="handleClick"
        style="background-color: #fff; height: 100%"
        class="tabsSizeColor"
      >
        <el-tab-pane label="月报列表" name="monthList">
          <baseic-Table></baseic-Table>
        </el-tab-pane>
        <el-tab-pane label="月报模板" name="monthModel">
          <deviation-Table @modle="modleAll"></deviation-Table>
        </el-tab-pane>
      </el-tabs>
    </div>

    <report-Model
      v-if="!modleBool"
      style="width: 100%"
      @modle="modleAll"
    ></report-Model>
  </div>
</template>
<script>
import { useStore } from 'vuex'
import { defineComponent, ref, watch } from 'vue'
import baseicTable from './tables/basicTable.vue'
import deviationTable from './tables/deviationTable.vue'
import reportModel from './reportModel.vue'

export default defineComponent({
  name: 'monthReport',
  components: { baseicTable, deviationTable, reportModel },
  props: {},
  setup() {
    const store = useStore()
    const tree = ref(null)
    const filterText = ref('')

    const handleClick = (tab, event) => {
      console.log(tab, event)
    }

    const modleBool = ref(true)
    const modleAll = (value) => {
      modleBool.value = value.modleBool
    }

    //tree 树形控件处理方法
    const filterNode = (value, data) => {
      if (!value) return true
      return data.siteName.indexOf(value) !== -1
    }
    // 异步任务 用于给tree传值
    const writeValue = (val) => {
      return tree.value.filter(val)
    }
    // 定义 watch 监听
    watch(
      filterText,
      (newCount, old, clear) => {
        // 执行异步任务，并得到关闭异步任务的 id
        let id = writeValue(newCount, old)
        // 如果 watch 监听被重复执行了，则会先清除上次未完成的异步任务
        clear(() => clearTimeout(id))
      },
      // watch 刚被创建的时候不执行
      { lazy: true }
    )
    
    // 表头样式设置
    const headClass = () => {
      return 'background:#FAFAFA !important;color: black;'
    }
    return {
      filterNode,
      headClass,
      modleAll,
      handleClick, //tabs切换事件

      modleBool,
      store,
      tree,
      filterText,
      activeName: ref('monthList'),
      data: [
        {
          id: 1,
          label: '所有站点',
          children: [
            {
              id: 4,
              label: '分组1',
            },
            {
              id: 4,
              label: '分组2',
            },
            {
              id: 4,
              label: '分组3',
            },
          ],
        },
      ],
      defaultProps: {
        children: 'children',
        id: 'id',
        label: 'siteName',
      },
    }
  },
})
</script>

<style lang="scss">
.monthReport {
  display: flex;
  height: calc(100vh - 130px);
  // padding: 30px;
  // margin-top: 50px;
  .monthContent1 {
    background-color: #fff;
    width: 15%;
    height: 100%;
    margin-right: 25px;
    padding: 20px;
    min-width: 200px;
    .monthSwitch {
      margin-top: 20px;
      width: 100%;
      height: 20px;
      cursor: pointer;
    }
  }
  .monthContent2 {
    background-color: #fff;
    width: 85%;
    min-width: 845px;
    height: 100%;
    .basicHeader {
      margin-left: 15px;
      margin-top: 15px;
      margin-bottom: 15px;
      overflow: hidden;
    }
  }
}

// tab重置样式
.tabsSizeColor > .el-tabs__header .el-tabs__item {
  line-height: 50px;
  height: 50px;
  font-size: 16px;
}

.tabsSizeColor > .el-tabs__header .el-tabs__item.is-active {
  border-bottom: 2px solid #409eff;
  color: #409eff;
}
.el-tabs__header {
  margin-bottom: 0;
}
.el-tabs--card > .el-tabs__header .el-tabs__item,
.el-tabs--card > .el-tabs__header .el-tabs__nav {
  border: none;
}
</style>
<style>
.monthTree {
  width: 100%;
  overflow: hidden;
  height: 76vh;
  overflow-y: auto;
}
.monthTree::-webkit-scrollbar {
  display: none;
}
</style>