<template>
  <!-- 工程管理页面 -->
  <div class="app-container">
    <!-- 表格 -->
    <TableModel
      :formLabel="formLabel"
      :columnsList="columnsList"
      :request-api="queryCrewListApi"
      ref="tableRef"
      @transIdList="getIdList"
    >
      <template slot="btn" slot-scope="{ queryParams }">
        <el-button type="primary" @click="handleAddData()" icon="el-icon-plus" size="mini"
        >新增班组</el-button
        >
        <el-button
          @click="handleExportData(
                    exportList,
                    'base/tbPeople/export',
                    '人员清单',
                    queryParams
                  )"
          icon="el-icon-upload2"
          size="mini"
        >导出数据</el-button
        >
      </template>
      <template slot="handle" slot-scope="{ data }">
        <el-button
          type="primary"
          size="mini"
          @click="handleEditData(data)"
          v-if="data.teamStatus === '正常'"
        >编辑</el-button
        >
        <el-button
          type="danger"
          size="mini"
          @click="handleDeleteData(data.id, deleteCrewApi)"
          v-if="data.teamStatus === '正常' && data.peopleCount === 1"
        >解散</el-button
        >
<!--        <span v-else>-</span>-->
      </template>
      <template slot="peopleCount" slot-scope="{ data }">
        <span
          :class="[{ peopleCount: data.teamStatus === '正常' }]"
          @click="handleCrew(data)"
        >
          {{ data.peopleCount }}
        </span>
      </template>
      <template slot="teamStatus" slot-scope="{ data }">
        <span
          v-if="data.teamStatus === '正常'"
          style="color: #11AB21;"
        >{{ data.teamStatus }}</span>
        <span
          v-else
          style="color: #FF0000"
        >{{ data.teamStatus }}</span>
      </template>
    </TableModel>

    <!-- 新增以及修改时的弹框 -->
    <DialogModel
      :dialogConfig="dialogConfig"
      @closeDialogOuter="closeDialogOuter"
    >
      <template slot="outerContent">
        <!-- 新增以及修改数据的表单组件 -->
        <FormCrew
          :crew-params="editParams"
          @closeDialog="closeDialog"
        />
      </template>
    </DialogModel>

    <DialogModel
      :dialogConfig="dialogConfigCrewTab"
      @closeDialogOuter="closeDialogCrewTabOuter"
    >
      <template slot="outerContent">
        <!-- 新增以及修改数据的表单组件 -->
        <TableCrew
          :table-crew-params="tableCrewData"
        />
      </template>
    </DialogModel>

  </div>
</template>

<script>
import { formLabel, columnsList, dialogConfig } from './config'
import { dialogConfigCrewTab } from './table-crew'
import { commonMixin } from '../mixins/common'
import {
  queryCrewListApi,
  deleteCrewApi
} from '@/api/base/crew'
import FormCrew from './components/form-crew.vue'
import TableCrew from './components/table-crew.vue'
export default {
  name: 'crew',
  methods: {
    queryCrewListApi,
    deleteCrewApi,
    getIdList(idList) {
      this.exportList = []
      idList.forEach(item => {
        this.exportList.push(item.id)
      })
    },
    closeDialogCrewTabOuter() {
      this.dialogConfigCrewTab.outerVisible = false
      this.$refs.tableRef.getTableList()
    },
    handleCrew(v) {
      if(v.teamStatus === '正常') {
        this.tableCrewData = v
        this.dialogConfigCrewTab.outerVisible = true
      }
    }
  },
  mixins: [commonMixin],
  components: {
    FormCrew,
    TableCrew
  },
  created() {

  },
  data() {
    return {
      // 搜索区表单配置项
      formLabel,
      // 表格导出id列表
      exportList: [],
      // 列表区配置项
      columnsList,
      // 弹框区配置项
      dialogConfig,
      dialogConfigCrewTab,
      // 新建时弹框标题
      addDialogTitle: '新增班组',
      // 修改时弹框标题
      editDialogTitle: '修改班组',
      tableCrewData: undefined,
    }
  },
}
</script>

<style lang="scss" scoped>

  .peopleCount{

    cursor: pointer;
    color: #11AB21;
    font-weight: bold;

  }

  .peopleCount:hover{

    border-bottom: 2px solid #11AB21;

  }

</style>
