<style lang="scss" scoped>
.task{
  position: relative;
  .tool-bar{
    height: 60px;
    line-height: 60px;
    padding: 0 15px;
    border-bottom: solid 1px #DEE0E3;
    display: flex;
    &>div{
      flex: auto;
      span:first-child{
        margin-right: 20px;
      }
      span:nth-child(3){
        margin-left: 50px;
      }
    }
    &>p{
      font-size: 16px;
    }
  }
  .task-panel{
    height: calc(100% - 60px);
  }
}
.el-select1{
  width: 110px;
}
</style>
<template>
<div class="task">
  <div class="tool-bar">
    <div>
      <span>当前成员：XXX</span>
      <el-button type="primary" icon="el-icon-edit" circle @click="personChange = true;"></el-button>
      <span>计划类型： </span>
      <el-select v-model="timeValue" placeholder="请选择" class="el-select1">
        <el-option v-for="item in timeOption" :key="item.value" :label="item.label" :value="item.value">
        </el-option>
      </el-select>
    </div>
    <p>
      <label>年度总目标：{{currentPlan.name}}</label>
    </p>
  </div>
  <div class="task-panel">
    <Year v-if="timeValue == 'year'"></Year>
    <Quarter v-if="timeValue == 'quarter'"></Quarter>
    <Month v-if="timeValue == 'month'"></Month>
  </div>
  <el-dialog
      class="dialog-style"
      title="切换成员"
      :visible.sync="personChange"
      width="500px">
      <div>
        <el-input
          placeholder="输入关键字查找"
          v-model="filterText">
        </el-input>
        <el-tree
          class="filter-tree"
          :data="data"
          :props="defaultProps"
          default-expand-all
          :filter-node-method="filterNode"
          ref="tree">
        </el-tree>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="personChange = false">取 消</el-button>
        <el-button type="primary" @click="personChange = false">确 定</el-button>
      </span>
    </el-dialog>
</div>
</template>

<script>
import { getCurrent } from '@/api/year';
import Year from "@/components/MainPage/Task/Year";
import Quarter from "@/components/MainPage/Task/Quarter";
import Month from "@/components/MainPage/Task/Month";

export default {
  name: 'Task',
  components: {
    Year,
    Quarter,
    Month
  },
  data () {
    return {
      person: '',
      timeOption: [{
        value: 'year',
        label: '年度计划'
      }, {
        value: 'quarter',
        label: '季度计划'
      }, {
        value: 'month',
        label: '月计划'
      }],
      timeValue: 'year',
      personChange: false,

      filterText: '',
      currentPlan:{},

      data: [{
        label: '爻象',
        children: [{
          label: '部门1',
          children: [{
            label: '人员1'
          }, {
            label: '人员2'
          }, {
            label: '人员3'
          }, {
            label: '人员4'
          }, {
            label: '人员5'
          }]
        },{
          label: '部门2',
          children: [{
            label: '人员1'
          }, {
            label: '人员12'
          }]
        },{
          label: '部门3',
          children: [{
            label: '人员1'
          }, {
            label: '人员2'
          }, {
            label: '人员3'
          }]
        }]
      }],
      defaultProps: {
        children: 'children',
        label: 'label'
      }
	  }
  },
  created() {
    this.getCurrent();
  },
  watch: {
    filterText(val) {
      this.$refs.tree.filter(val);
    }
  },
  methods: {
    filterNode(value, data) {
      if (!value) return true;
      return data.label.indexOf(value) !== -1;
    },
    getCurrent(){
      let currentYear = new Date().getFullYear();
      getCurrent(currentYear).then((data) => {
        if(data.result){
          this.currentPlan = data.data;
        }
      })
    }
  }
}
</script>
