<template>
  <div class="app-container">
      <div class="clearfix">
          <span>{{$t('工作单元')}}</span>
          <el-button style="float: right;" v-if="optType !='view'" @click="handleAdd" type="primary">{{ $t('common.add') }}</el-button>
      </div>
      <el-table v-loading="loading" :data="teamList" max-height="570px">
          <el-table-column :label="$t('工作单元ID')" align="center" prop="workunitId" >
          </el-table-column>
          <el-table-column :label="$t('common.workunit_code')" align="center" prop="workunitCode" />
          <el-table-column :label="$t('common.workunit_name')" align="center" prop="workunitName" />
          <el-table-column :label="$t('common.option')" align="center" v-if="optType !='view'" class-name="small-padding fixed-width">
              <template slot-scope="scope">
              <el-button
                  size="mini"
                  type="text"
                  icon="el-icon-delete"
                  @click="handleDelete(scope.row, scope.$index)"
                  v-hasPermi="['mes:cal:calplan:edit']"
              >{{ $t('common.del') }}</el-button>
              </template>
          </el-table-column>
      </el-table>
      <pagination
        v-show="total>0&&planId"
        :total="total"
        :page.sync="queryParams.pageNum"
        :limit.sync="queryParams.pageSize"
        @pagination="getTeamList"
      />
      <TeamSelect ref="teamSelect" @onSelected="onTeamSelected" :planId="planId"></TeamSelect>
  </div>
</template>

<script>


import { listPlanteam,  delPlanteam, addPlanteam } from "@/api/mes/cal/planteam";
import TeamSelect from "../team/calTeamSelect/multi.vue"
export default {
    name:"PlanTeam",
    components:{TeamSelect},
    props:{
        planId:null,
        planCode: null,
        optType:null,
        form: null,
        calendarType:null
    },
    data(){
        return {
            // 遮罩层
            loading: false,
            //班组表格数据
            teamList:[],
            // 班组成员表格数据
            teammemberList: [],
            form:{},
            queryParams: {
              pageNum: 1,
              pageSize: 10,
              planCode: this.planCode || ''
            },
            total: 0
        }
    },
    created() {
        this.getTeamList();
    },
    methods:{
        getTeamList(){
            if (!this.planCode) {
              return
            }
            this.loading = true;
            listPlanteam(this.queryParams).then(response => {
                this.teamList = response.rows;
                this.total = response.total
                this.loading = false;
            });
        },

        /** 新增按钮操作 */
        handleAdd() {
            this.$refs.teamSelect.showFlag = true;
        },
        onTeamSelected(rows){
          // console.log(rows, 'rows')
          const data = rows.map(team => {
            return {
              ...team,
              planId: this.planId,
              planCode: this.form.planCode,
            }
          });
          if(!this.planId) {
            this.teamList.push(...rows)
            return
          }
          addPlanteam(data).then(response => {
              this.getTeamList();
          });
        },
        /** 删除按钮操作 */
        handleDelete(row, index) {
            if (!this.planId) {
              this.teamList.splice(index, 1)
              return
            }
            const recordIds = row.id
            this.$modal.confirm(this.$t('是否确认删除工作单元？')).then(function() {
                return delPlanteam(recordIds);
            }).then(() => {
                this.getTeamList();
                this.$modal.msgSuccess(this.$t('common.del_success'));
            }).catch(() => {});
        },
    }
}
</script>

<style>

</style>
