<style>
.addTeamman-ctrl{
  text-align: right;
  padding: 0 0 20px 0;
}
</style>
<template>
    <div class="addTeamman">
      <div class="addTeamman-ctrl">
        <el-button icon="el-icon-plus" class="crm-btn crm-btn-mini query-btn" @click="addTeammanShow=true" v-if="IsRead === 0">团队成员</el-button>
        <el-button class="crm-btn query-btn crm-btn-mini easy-btn" @click="bianji" v-if="IsRead === 0">编辑</el-button>
        <el-button class="crm-btn query-btn crm-btn-mini easy-btn" @click="yichu" v-if="IsRead === 0">移除</el-button>
        <el-button class="crm-btn query-btn crm-btn-mini org-btn margin-right0" @click="tuichu">退出团队</el-button>
      </div>
      <el-table
        v-loading="loading"
        stripe
        ref="multipleTable"
        :data="dataList"
        tooltip-effect="dark"
        style="width: 100%"
        @selection-change="handleSelectionChange"
        row-class-name="font-size-12">
        <el-table-column :selectable='checkboxT' fixed type="selection" width="40"></el-table-column>
        <el-table-column 
            prop="EmpName"
            label="销售名称"
            show-overflow-tooltip>
        </el-table-column>
        <el-table-column 
            prop="PostName"
            label="岗位"
            show-overflow-tooltip>
        </el-table-column>
        <el-table-column 
            prop="RoleName"
            label="角色名称"
            show-overflow-tooltip>
        </el-table-column>
        <el-table-column 
            prop="RoleType"
            label="角色属性"
            show-overflow-tooltip>
            <template  slot-scope="scope">
              <p v-if="scope.row.RoleType === 1">负责人</p>
              <p v-else>普通员工</p>
            </template>
        </el-table-column>
        <el-table-column 
            prop="JurisdictionName"
            label="权限"
            show-overflow-tooltip>
        </el-table-column>
      </el-table>
      <div v-if="addTeammanShow">
        <addTeamman :ID="CustomerId" @addTeammanOk="addTeammanOk"/>
      </div>
      <div v-if="editTeamPowerShow">
        <editTeamPower :CustomerId="CustomerId" :ID="IDs" @addTeammanOk="addTeammanOk"/>
      </div>
    </div>
</template>
<script>
import addTeamman from "../dialogModel/addTeamman";
import editTeamPower from "../dialogModel/editTeamPower";
export default {
  components: {
    addTeamman,
    editTeamPower
  },
   props:{
    CustomerId: {
      type: Number,
      default: 0
    },
    IsRead: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {
      loading: false,
      addTeammanShow: false,
      editTeamPowerShow: false,
      dataList: [],
      multipleSelection: [],
      IDs: ''
    };
  },watch:{
      CustomerId: {
        handler(val, oldVal){
          console.log(val)
          this.GetCustomerTeamList()
        },
        deep:true
      }
  },
  mounted() {
    this.GetCustomerTeamList()
    let $this = this
    this.MsgBus.$on('closeaddTeamman', function (){
      $this.addTeammanShow = false
    })
    this.MsgBus.$on('closeeditTeamPower', function(){
      $this.editTeamPowerShow = false
    })
  },
  methods: {
    tuichu(){
      this.$confirm('确定退出团队?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        let str = ''
        this.multipleSelection.map((x, i)=>{
          str = str + x + ','
        })
        let msg = {
          CustomerId: this.CustomerId,
          IDs: str.substring(0, str.length - 1)
        }
        this.apipost('/api/Customer/ExitCustomerJurisdiction', msg, res=>{
          if (res.data.resultCode == 1) {
            this.$message.success('操作成功')
            this.GetCustomerTeamList()
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消'
        });          
      }); 
    },
    yichu(){
      if(this.multipleSelection.length < 1) {
        return this.$message.error('请勾选需要操作的团队成员')
      }
      this.$confirm('此操作将移除这些团队成员是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        let str = ''
        this.multipleSelection.map((x, i)=>{
          str = str + x + ','
        })
        let msg = {
          CustomerId: this.CustomerId,
          IDs: str.substring(0, str.length - 1)
        }
        this.apipost('/api/Customer/RemoveCustomerListJurisdiction', msg, res=>{
          if (res.data.resultCode == 1) {
            this.$message.success('操作成功')
            this.GetCustomerTeamList()
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消'
        });          
      }); 
    },
    bianji(){
      if(this.multipleSelection.length < 1) {
        return this.$message.error('请勾选需要操作的团队成员')
      }
      let str = ''
      this.multipleSelection.map((x, i)=>{
        str = str + x + ','
      })
      this.IDs = str.substring(0, str.length - 1)
      this.editTeamPowerShow = true
    },
    checkboxT(row,index){
      if(row.JurisdictionName==='负责人权限'){
        return 0;
      }else{
        return 1;
      }
    },
    handleSelectionChange(val) {
      this.multipleSelection = val.map(x=>
        x.ID
      )
    },
    addTeammanOk(){
      this.GetCustomerTeamList()
    },
    GetCustomerTeamList(){
      if(this.CustomerId === 0) return
      this.loading = true
      this.apipost('/api/Customer/GetCustomerTeamList', {CustomerId: this.CustomerId}, res=>{
        if (res.data.resultCode == 1) {
          this.loading = false
          this.dataList = res.data.data
        }
      })
    },
  }
}
</script>