<template>
  <div class="app-container">
    <!-- 搜索工作栏 -->
    <search-bar
      :formConfigs="formConfig"
      ref="searchBarForm"
      @headBtnClick="buttonClick"
    />
    <!-- 列表 -->
    <base-table
      :page="queryParams.pageNo"
      :limit="queryParams.pageSize"
      :table-props="tableProps"
      :table-data="list"
      :max-height="tableH"
    >
      <method-btn
        v-if="tableBtn.length"
        slot="handleBtn"
        :width="160"
        label="操作"
        :method-list="tableBtn"
        @clickBtn="handleClick"
      />
    </base-table>
    <!-- 查看详情 -->
    <group-team-view-detail v-if="paramVisible" ref="groupTeamViewDetail"/>
  </div>
</template>
<script>
import { getByWorkOrder } from '@/api/monitoring/groupTeamView'
import { workOrderList } from '@/api/base/workOrder'
import GroupTeamViewDetail from './components/groupTeamViewDetail.vue'
const tableProps = [
  {
    prop: 'name',
    label: '班组名称'
  },
  {
    prop: 'leaderName',
    label: '班组长'
  },
  {
    prop: 'num',
    label: '人数'
  },
  {
    prop: 'workCount',
    label: '上班次数'
  }
]
const tableBtn = [
  {
    type: 'detail',
    btnName: '详情'
  }
]
export default {
  name: 'GroupTeamView',
  data() {
    return {
      formConfig: [
        {
          type: 'input',
          label: '工单名称',
          placeholder: '工单名称',
          param: 'cnName'
        },
        {
          type: 'button',
          btnName: '查询',
          name: 'search',
          color: 'primary'
        }
      ],
      // 查询参数
      queryParams: {
        pageNo: 1,
        pageSize: 1000,
        workOrderId: ''
      },
      workOrderName: '工单名称ddd',
      tableBtn,
      tableProps,
      tableH: this.tableHeight(220),
      list: [],
      paramVisible: false
    }
  },
  components: { GroupTeamViewDetail },
  mounted() {
    window.addEventListener('resize', () => {
      this.tableH = this.tableHeight(220)
    })
  },
  methods: {
    // 获取工单list
    getOrderList() {
      workOrderList().then(res => {
        
      })
    },
    // 查询
    buttonClick(val) {
      // this.queryParams.workOrderId = val.id
      this.queryParams.workOrderId = 1
      this.getList()
    },
    // 获取table数据
    getList() {
      getByWorkOrder({ id: this.queryParams.workOrderId }).then(res => {
        console.log(res)
        this.list = res.data
      })
    },
    handleClick(val) {
      console.log(val)
      this.paramVisible = true
      let params = {}
      params.teamId = val.data.id
      params.teamName = val.data.name
      params.workOrderId = this.queryParams.workOrderId
      params.workOrderName = this.workOrderName
      this.$nextTick(() => {
        this.$refs.groupTeamViewDetail.init(params)
      })
    }
  }
}
</script>