<template>
  <div class="ls-vertical">
    <navbar title="工作报告统计" :buttons="btns" @clickbutton="clickbtn" icon="look">
    </navbar>
    <div class="ls-container">
      <el-tabs v-model="activeName" type="card" @tab-click="tabChange">
        <el-tab-pane v-for="(items,index) in tabTable" :key="index" :label="items.label" :name="items.name">
          <div class="ls-table-warp">
            <el-table class="todo-table dic-table" size="mini" stripe border @cell-dblclick="showLogsInfo"
              :data="datas">
              <el-table-column type="index" width="50" label="#">
              </el-table-column>
              <el-table-column v-for="(item,index) in daily" :key="index" :prop="item.prop" :label="item.label"
                :min-width="item.width" :show-overflow-tooltip="item.tooltip" :fixed="item.fixed">
              </el-table-column>
            </el-table>
          </div>
        </el-tab-pane>
      </el-tabs>

      <!-- <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
        <el-tab-pane label="日报" name="first">
          <div class="ls-table-warp">
            <el-table class="todo-table dic-table" size="mini" stripe border @cell-dblclick="showLogsInfo" :data="datas">
              <el-table-column type="index" width="50" label="#">
              </el-table-column>
              <el-table-column v-for="(item,index) in daily" :key="index" :prop="item.prop" :label="item.label"
                :min-width="item.width" :show-overflow-tooltip="item.tooltip" :fixed="item.fixed">
              </el-table-column>
            </el-table>
          </div>
        </el-tab-pane>
        <el-tab-pane label="周报" name="second">周报</el-tab-pane>
        <el-tab-pane label="月报" name="third"><div class="ls-table-warp">
            <el-table class="todo-table dic-table" size="mini" stripe border @cell-dblclick="showLogsInfo" :data="datas">
              <el-table-column type="index" width="50" label="#">
              </el-table-column>
              <el-table-column v-for="(item,index) in daily" :key="index" :prop="item.prop" :label="item.label"
                :min-width="item.width" :show-overflow-tooltip="item.tooltip" :fixed="item.fixed">
              </el-table-column>
            </el-table>
          </div></el-tab-pane>
        <el-tab-pane label="季报" name="fourth">季报</el-tab-pane>
      </el-tabs> -->

    </div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        activeName: 'first',
        tabData:[],
        tabTable: [{
            label: "日报",
            name: 'daily'
          },
          {
            label: "周报",
            name: 'weekly'
          },
          {
            label: "月报",
            name: 'monthlyReport'
          },
          {
            label: "季报",
            name: 'quarterlyReport'
          }
        ],
        btns: [{
          title: '',
          btnEvent: 'refresh',
          size: '',
          circle: 'circle',
          type: 'refresh',
          show: true,
          icon: ''
        }],
        datas: [],
        monthlyReport:[{
            prop: 'content',
            label: '姓名',
            width: 100,
            fixed: false,
            tooltip: true
          },
          {
              prop: 'content',
              label: '姓名',
              width: 100,
              fixed: false,
              tooltip: true
            },
            ],
        daily: [{
            prop: 'content',
            label: '姓名',
            width: 100,
            fixed: false,
            tooltip: true
          },
          {
            prop: 'content',
            label: '01月',
            width: 100,
            fixed: false,
            tooltip: true
          },
          {
            prop: 'content',
            label: '02月',
            width: 100,
            fixed: false,
            tooltip: true
          },
          {
            prop: 'content',
            label: '03月',
            width: 100,
            fixed: false,
            tooltip: true
          },
          {
            prop: 'content',
            label: '04月',
            width: 100,
            fixed: false,
            tooltip: true
          },
          {
            prop: 'content',
            label: '05月',
            width: 100,
            fixed: false,
            tooltip: true
          },
          {
            prop: 'content',
            label: '06月',
            width: 100,
            fixed: false,
            tooltip: true
          },
          {
            prop: 'content',
            label: '07月',
            width: 100,
            fixed: false,
            tooltip: true
          },
          {
            prop: 'content',
            label: '08月',
            width: 100,
            fixed: false,
            tooltip: true
          },
          {
            prop: 'content',
            label: '09月',
            width: 100,
            fixed: false,
            tooltip: true
          },
          {
            prop: 'content',
            label: '10月',
            width: 100,
            fixed: false,
            tooltip: true
          },
          {
            prop: 'content',
            label: '11月',
            width: 100,
            fixed: false,
            tooltip: true
          },
          {
            prop: 'content',
            label: '12月',
            width: 100,
            fixed: false,
            tooltip: true
          },
          {
            prop: 'content',
            label: '完成率',
            width: 100,
            fixed: false,
            tooltip: true
          },
        ]
      }
    },
    methods: {
      // 导航栏按钮操作
      clickbtn: function(type) {
        // switch (type) {
        //   case 'refresh':
        //     this.pager.currPage = 1;
        //     this.pager.pageSize = 50;
        //     this.doQuery();
        //     break;
        // }
        console.log(222)
      },
      handleClick(tab, event) {
        console.log(tab, event);
      },
      // 日志信息展示
      showLogsInfo: function(msg) {
        this.$refs.logRef.logMsg = msg;
        this.$refs.logRef.visible = true;
      },
      //tab 改变
      tabChange(tab, event, index) {
        switch (tab.name) {
          case 'daily':
            this.tabData = this.daily;
            break;
          case "weekly":
            this.tabData = this.daily;
            break;
          case "monthlyReport":
            this.tabData = this.daily;
            break;
          case "quarterlyReport":
            this.tabData = this.daily;
            break;
          default:
        }
      },
    }
  }
</script>

<style>
  .el-tabs--card>.el-tabs__header .el-tabs__item.is-active {
    background-color: #357FB9;
    color: #FFFFFF;
  }

  ,
  .el-tabs--card>.el-tabs__header {
    border-bottom: 0px solid #E4E7ED;
  }

  .el-tabs--card>.el-tabs__header .el-tabs__nav {
    /* border-bottom: block; */
  }
</style>
