<template>
  <div>
    <el-drawer title="查看详情" :visible.sync="visible" size="70%">
      <div class="box">
        <el-form :inline="true">
          <el-form-item label="工单名称">
            <el-input v-model="queryParams.workOrderName" size='small' readonly></el-input>
          </el-form-item>
          <el-form-item label="班组名称">
            <el-input v-model="queryParams.teamName" size='small' readonly></el-input>
          </el-form-item>
        </el-form>
        <base-table
          :table-props="tableProps"
          :table-data="tableData"
          :max-height="tableH"
        />
      </div>
    </el-drawer>
  </div>
</template>
<script>
import { getByTeam } from '@/api/monitoring/groupTeamView'
import { parseTime } from '@/utils/ruoyi'
const tableProps = [
  {
    prop: 'startTime',
    label: '开始时间',
    filter: parseTime,
    minWidth: 150
  },
  {
    prop: 'endTime',
    label: '结束时间',
    filter: parseTime,
    minWidth: 150
  },
  {
    prop: 'num',
    label: '人数'
  },
  {
    prop: 'workTime',
    label: '工作时长'
  }
]
export default {
  name: 'GroupTeamViewDetail',
  data() {
    return {
      visible: false,
      workOrderName: '',
      teamName: '',
      tableProps,
      tableData: [],
      tableH: this.tableHeight(200),
      queryParams: {}
    }
  },
  created() {
    window.addEventListener('resize', () => {
      this.tableH = this.tableHeight(200)
    })
  },
  methods: {
    init(params) {
      this.visible = true
      this.queryParams = params
      getByTeam({
        teamId: this.queryParams.teamId,
        workOrderId: this.queryParams.workOrderId
      }).then(res => {
        this.tableData = res.data || []
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.box {
  padding: 0 32px;
}
</style>