<template>
  <div class="right_con">
    <div v-if="team_list_type==='list'">
      <div class="staff_fgx fl"></div>
      <p class="team_text fl">部门列表</p>
      <Button type="primary" class="add_team_btn" @click="add_team">添加部门</Button>
      <div class="fr search mar_T_15">
        <Select v-model="search.studio_id" class='wid_120' :transfer='true' filterable placeholder="请选择部门" @on-change="chooseTeam">
          <Option v-for="(item,index) in studioSelectList" :key="index" :value="item.id">{{item.name}}</Option>
        </Select>
        <Button type="primary" class="mar_L_5" @click="searchData()">搜索</Button>
        <Button class="clear_btn" @click="removeSearch">清空</Button>
      </div>
      <div class="clear"></div>
      <Table :columns="teamList" :data="teamData" border class="tables"></Table>
    </div>
    <div v-else>
      <editTeam :team_list_type='team_list_type' @return_last='return_last' :team_id='team_id' :studio_id='search.studio_id'></editTeam>
    </div>
  </div>
</template>
<script>
import editTeam from '@@/staff/edit_team'
import { mapState } from "vuex";
import { removeSearch } from "@/assets/js/common";
export default {
  name: "team_list",
  components:{editTeam},
  data() {
    return {
      team_id:null,
      is_CanAdd:false,
      is_CanDisable:false,
      is_CanEnable:false,
      team_list_type: 'list',
      studioSelectList:[],
      studioList:[],
      search:{
        studio_id:''
      },
      studioData:{},
      lv:1,
      teamList: [
        {
          title: "分类ID",
          width:120,
          render:(h,params)=>{
            if(params.index===0){
              return h('span','')
            }else{
              return h('span',params.row.id)
            }
          }
        },
        {
          title: "名称",
          render:(h,params)=>{
            let name=params.row.name
            if(params.index===0){
              return h('span',name)
            }else{
              return h('p',{
                style:{
                  marginLeft:Number(params.row.level)*20+'px'
                }
              },'|-- '+name)
            }
          },
        },
        {
          title: "状态",
          render: (h, params) => {
            if (params.row.status === 0) {
              return h("span",
                { 
                  style: { 
                    color: "rgba(255, 121, 0, 1)",
                    cursor:'pointer'
                  },
                  on:{
                    click:()=>{
                      this.enableStudioStatus(params.row.id,params.index)
                    }
                  }
                },"禁用");
            } else {
              return h("span",
                { 
                  style: { 
                    color: "rgba(0, 156, 255, 1)",
                    cursor:'pointer'
                  },
                  on:{
                    click:()=>{
                      this.disableStudioStatus(params.row.id,params.index)
                    }
                  }
                },"正常");
            }
          }
        },
        {
          title: "添加时间",
          key: "create_time"
        },
          {
              title: "操作",
              render: (h, params) => {
                if(params.index===0){
                  return h('span','')
                }else{
                  return h("p",
                  {
                    class:'operate-btn',
                    style:{
                        color:'rgb(0, 156, 255)'
                      },
                    on: {
                      click: () => {
                        this.team_list_type = 'edit';
                        this.team_id = params.row.id
                        }
                    }
                  },"编辑");
                }
                
              }
            }
      ],
      teamData: []
    };
  },
  computed:{
    ...mapState({
      role: state => state.adminInfo.role_id,
    })
  },
  methods: {
    add_team() {
      this.team_list_type='add'
    },
    return_last(){
      this.team_list_type='list'
      this.getTeamList()
    },
    array_to_tree(lists,root = 0,level = 0){
        var tree = new Array();
        for(let i in lists){
          if(lists[i].pid===root){
            lists[i].level = level;
            lists[i].children?lists[i].children = this.array_to_tree(lists[i].children,lists[i].id,parseInt(level)+1):''
          }
          tree.push(lists[i]);
        }
        return tree;
    },
    // 获取数据
     getTeamList(id){
      this.$store.commit('changeloading',true)
      this.$api.getTeamList().then(data => {
        if(data.code===200){
          this.teamData = data.data
          this.$store.commit('changeloading',false)
        }else{
          this.$Message.info(data.msg)
          this.$store.commit('changeloading',false)
        }
      })
    },
    enableStudioStatus(id,i){
      this.$api.enableGuild({id}).then(data=> {
        if(data.code===200){
          this.$Message.info(data.msg)
          this.teamData[i].status=1
        }else{
          this.$Message.info(data.msg)
        }
      })
    },
    disableStudioStatus(id,i){
      this.$api.disableGuildInfo({id}).then(data =>{
        if(data.code===200){
          this.$Message.info(data.msg)
          this.teamData[i].status=0
        }else{
          this.$Message.info(data.msg)
        }
      })
    },
    // 清空搜索条件
    removeSearch() {
      this.search = { ...removeSearch({ ...this.search }) };
    },
    // 获取搜索条件下拉框数据
    getGuildList(){
       this.$api.getTeamList().then(data => {
        if(data.code===200){
          let newData = {}
          data.data.forEach(item => {
            newData = {
              id:item.id,
              name:item.name
            }
            this.studioSelectList.push(newData)
          })
        }else{
          this.$Message.info(data.msg)
          return
        }
      })
    },
    searchData() {
      this.$store.commit('changeloading',true)
      this.$api.getTeamList({id: this.search.studio_id }).then(data => {
        if(data.code===200){
          this.teamData = data.data
          this.$store.commit('changeloading',false)
        }else{
          this.$Message.info(data.msg)
          this.$store.commit('changeloading',false)
        }
      })
    },
    chooseTeam(e) {
      this.search.studio_id = e
    }
  },
  created() {
    this.getTeamList()
  },
  mounted() {
    this.getGuildList()
  }
};
</script>
<style>
.team_text {
  width: 120px;
  margin-top: 15px;
  margin-left: 5px;
  font-size: 15px;
}
.add_team_btn{
  margin-top: 10px
}
#teamlist {
  width: 100%;
  border: 1px solid #dddee1;
}
#teamlist th td{
  height: 40px;
  /* width: 21%; */
}
</style>



