<template>
  <div>
    <up-down-layout class="up-down-layout-style">
      <template slot="query">
        <el-form>
          <el-row class="textRight marginBottom up-down-layout-style">
            <el-tooltip effect="dark" :content="showHandleFlag ? $t('common.fold') : $t('common.open')" placement="top">
              <el-button :icon="showHandleFlag ? 'iconfont iconycshouqi' : 'iconfont iconycxiala'"
                         @click="setShowHandleFlag" size="mini" class="ycFoldCss" circle></el-button>
            </el-tooltip>
          </el-row>
          <el-row>
            <el-tabs>
              <el-tab-pane :label="$t('traceMgr.message8')" style="font-size: 26px !important;"></el-tab-pane>
            </el-tabs>
          </el-row>
          <el-row type="flex" v-show="showHandleFlag">
            <el-col>
              <el-form-item>
                <task-statistics-list></task-statistics-list>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </template>
      <template slot="table">
        <task-list ref="_taskList"></task-list>
      </template>
    </up-down-layout>
  </div>
</template>
<script>
import BasePage from '@/pages/basePage'
import mixin from '@/pages/mixin'
import {
  upDownLayout
} from 'newepoch-components'
import TaskStatisticsList
  from '@/components/tracemgr/regionalCommissioner/TaskTable/TaskStatisticsList.vue'
import taskList
  from '@/components/tracemgr/regionalCommissioner/TaskTable/taskList.vue'

export default {
  extends: new BasePage(),
  name: 'regionalCommissionerTaskTablePage',
  mixins: [mixin],
  components: {
    upDownLayout,
    TaskStatisticsList,
    taskList
  },
  data: function () {
    return {
      showHandleFlag: true
    }
  },
  methods: {
    setShowHandleFlag: function () {
      this.showHandleFlag = !this.showHandleFlag
      this.$nextTick(function () {
        this.$refs['_taskList'].$refs['taskComponent'].$refs['taskListUpDownLayout'].upHeight = this.$refs['_taskList'].$refs['taskComponent'].$refs['taskListUpDownLayout'].getHeight()
        this.$refs['_taskList'].initStyle()
      })
    }
  }
}

</script>

<style lang="scss" scoped>
  @import './src/styles/tracemgr/regionalCommissioner/taskTable/taskTablePage.scss';
</style>
