<template>
  <dee-dialog
    v-if="visible"
    title="工时查看"
    :dialog-visible.sync="visible"
    width="90%"
    custom-class="mobile-dialog"
  >
    <section class="statistical-summary-working-hours-com">
      <Search :active-name="activeName" @init="searchData" />
      <dee-tools :tools="tools" mode="normal" :collapse="false" />
      <el-tabs v-model="activeName" type="card" @tab-click="tabClick">
        <el-tab-pane label="生产工时" name="product">
          <ProductionTable ref="productTable" />
        </el-tab-pane>
        <el-tab-pane label="临时工时" name="temp">
          <TemporaryTable ref="tempTable" />
        </el-tab-pane>
      </el-tabs>
    </section>
  </dee-dialog>
</template>

<script>
import ProductionTable from './components/productionTable'
import TemporaryTable from './components/temporaryTable'
import Search from './components/Search'
export default {
  name: 'StatisticalSummaryWorkingHours',
  components: {
    ProductionTable,
    TemporaryTable,
    Search
  },
  data() {
    return {
      activeName: 'product',
      visible: false,
      // 工具栏
      tools: [{
        name: '确认',
        icon: '/icons/check.png ',
        handler: {
          click: () => this.confirmHandle()
        }
      }],
      initForm: {}
    }
  },
  methods: {
    // 打开弹出框
    open() {
      this.visible = true
    },
    handleClose() {
      this.visible = false
    },
    searchData(form) {
      this.initForm = form
      this.tableInit(this.initForm)
    },
    tabClick() {
      this.tableInit(this.initForm)
    },
    tableInit(form) {
      if (this.activeName === 'product') {
        this.$refs.productTable.init(form, 1)
      } else {
        this.$refs.tempTable.init(form, 1)
      }
    },
    confirmHandle(section) {
      if (this.activeName === 'product') {
        this.$refs.productTable.confirmHandle()
      } else {
        this.$refs.tempTable.confirmHandle()
      }
    }
  }

}
</script>

<style lang="scss">
.statistical-summary-working-hours-com{
  .dee-tools{
    float: right;
    position: relative;
    top: 10px;
    z-index: 99999;
  }
}
</style>