<!--
 * @Description: 团队管理
 * @Author: ymz
 * @Date: 2021-12-02 14:36:44
 * @LastEditTime: 2021-12-17 17:03:27
 * @LastEditors: ymz
 * @Reference: 
-->
<template>
  <div class="execution">
    <basic-container>
      <avue-crud
        :page='page'
        :option='opt'
        :data='data'
        @size-change="sizeChange"
        @current-change="currentChange">
        <template slot="leader" slot-scope="scope" >
          <el-tooltip class="item" effect="dark"  placement="top-start">
            <div slot="content">
              <span v-for="(item,index) in scope.row.leaderName" :key="index">
                 {{item + '；'}}
                <br v-if="index % 3 === 0" />
              </span>
            </div>
            <div class="tr-content">
              <span >{{scope.row.leaderName ? scope.row.leaderName.join('，') : ''}}</span>
            </div>
          </el-tooltip>
        </template>
        <template slot="member" slot-scope="scope" >
          <el-tooltip class="item" effect="dark"  placement="top-start">
            <div slot="content">
              <span v-for="(item,index) in scope.row.memberName" :key="index">
                {{item + '；'}}
                <br v-if="index % 3 === 0" />
              </span>
            </div>
            <div class="tr-content">
              <span >{{scope.row.memberName ? scope.row.memberName.join('，') : ''}}</span>
            </div>
            </el-tooltip>
          </template>
          <template slot="menuLeft">
            <el-button
              icon="el-icon-edit"
              size="small"
              type="primary"
              @click.stop="addTeam">添加
            </el-button>
          </template>

          <template slot-scope="scope" slot="menu">
             <el-button
               type="text"
                size="small"
                icon="el-icon-edit"
                @click="edit(scope.row)"
             >编辑
              </el-button>
            <el-button
              type="text"
              size="small"
              icon="el-icon-delete"
              @click="dissolution(scope.row)"
             >解散
            </el-button>
            <el-button
              type="text"
              size="small"
              icon="el-icon-folder-add"
              @click="importFile(scope.row)"
              >导入
            </el-button>
          </template>
      </avue-crud>
    </basic-container>
    <!-- 添加团队 -->
    <template v-if="addShow"> 
      <addTeam :show.sync='addShow' @Success='Success' :type='type' :editId='editId'></addTeam>
    </template>
    <!-- 导入 -->
    <importFile :show.sync='importatShow' @importSuccess='Success' :teamId='teamId'></importFile>

  </div>
</template>

<script>
  import {teamManagementOpt} from '@/const/crud/teamManagement'
  import addTeam from '@/views/components/teamManagement/addTeam'
  import importFile from '@/views/components/teamManagement/importFile'
  import myMinix  from '@/views/mixins/teamManagement/index.js'
  import { getTeamList , dissolveTeam} from '@/api/teamManagement/index'

  export default {
    mixins:[myMinix],
    components:{
      addTeam,
      importFile
    },
    data(){
      return {
        teamId:'',
        opt:teamManagementOpt,
        data:[],

      }
    },
    methods:{
      // 获取团队列表
      async getTeamList(){
        let obj = {
          current:this.page.currentPage,
          size:this.page.pageSize
        }
        const res = await getTeamList(obj)
        if(res.data.code === 0){
          this.data = res.data.data.records
          this.page.total = res.data.data.total
        }
      },


    },
    created(){
      this.getTeamList()
    }
  }
</script>
<style lang="scss" scoped>
  .tr-content{
    width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: inline;
  }
</style>