<!--
 * @Description: 
 * @Author: ymz
 * @Date: 2021-12-02 17:12:39
 * @LastEditTime: 2021-12-17 16:34:46
 * @LastEditors: ymz
 * @Reference: 
-->
<template>
  <div>
    <basic-container>
      <div class="content-box">
        <!-- 左侧菜单 -->
        <leftMenu @select="select"></leftMenu>
        <!-- 右侧表格 -->
        <div class="right-tab" :key="deptId">
          <avue-crud
            ref="tab"
            :table-loading="loading"
            :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>
        </div>
      </div>
    </basic-container>

    <!-- 添加团队 -->
    <template v-if="addShow">
      <addTeam
        :show.sync="addShow"
        @Success="Success"
        :type="type"
        :editId="editId"
        :deptId="deptId"
      ></addTeam>
    </template>
    <!-- 导入 -->
    <importFile
      :show.sync="importatShow"
      @importSuccess="Success"
      :teamId="teamId"
    ></importFile>
  </div>
</template>

<script>
import leftMenu from "@/views/components/teamManagement/leftMenu";
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 { teamListById, dissolveTeam } from "@/api/teamManagement/index";

export default {
  mixins: [myMinix],
  //import 引入的组件需要注入到对象中才能使用
  components: { leftMenu, addTeam, importFile },
  props: {},
  data() {
    //这里存数据
    return {
      loading: false,
      teamId: "",
      deptId: "",
      data: [],
      opt: teamManagementOpt
    };
  },
  //计算属性
  computed: {},
  //监控data中数据变化
  watch: {},
  updated() {},
  //方法
  methods: {
    select(info) {
      this.initPage();
      this.deptId = "";
      if (info) {
        this.loading = true;
        this.deptId = info.deptId;
        this.getTeamList();
      }
    },
    async getTeamList() {
      let obj = {
        current: this.page.currentPage,
        size: this.page.pageSize,
        deptId: this.deptId
      };
      const res = await teamListById(obj);
      if (res.data.code === 0) {
        this.data = res.data.data.records;
        this.page.total = res.data.data.total;
      }
      this.loading = false;
    }
  },
  //声明周期 - 创建完成（可以访问当前this实例）
  created() {},
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {}
};
</script>

<style scoped lang="scss">
.content-box {
  display: flex;
  // height: 78vh;
  overflow: hidden;
  .right-tab {
    flex: 1;
    height: 100%;
    width: 100%;
  }
}

.tr-content {
  width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: inline;
}
</style>
