<template>
<div class="container normal-panel">
  <div  v-for="item in list" :key="item.index" class="normal-panel">
    <el-divider content-position="left">负责人</el-divider>
    <div>
      <div class="flex-align-center" v-if="men.isleader === 1" v-for="men in item.team" :key="men.index">
        <div class="avatar inline-16" :class="men.isleader === 1?'leader':''" >{{men.name.substr(0, 1)}}
          <span class="avatar__model">
            <i style="margin-right:5px" class="el-icon-user" @click="setLeader(men)"></i>
            <i class="el-icon-delete" @click="deleteGroupAccount(men)"></i>
          </span>
        </div>
        <p>{{men.name}}</p>
      </div>
    </div>
    <accountDialog style="text-align:right" :ownertable="ownertable" @onSuccess="queryGroup"></accountDialog>
    <el-divider content-position="left">团队</el-divider>
    <div>
      <div v-if="men.isleader === 0" v-for="men in item.team" :key="men.index">
        <div class="avatar inline-16"  :class="men.isleader === 1?'leader':''" >{{men.name.substr(0, 1)}}
          <span class="avatar__model">
            <i style="margin-right:5px" class="el-icon-user" @click="setLeader(men)"></i>
            <i class="el-icon-delete" @click="deleteGroupAccount(men)"></i>
          </span>
        </div>
      </div>
    </div>
    <accountDialog style="text-align:right" :ownertable="ownertable" @onSuccess="queryGroup"></accountDialog>
  </div>
</div>
</template>

<script>
// import tableLayout
import accountDialog from './select_account.vue'
export default {
  props:['ownertable'],
  components:{
    accountDialog
  },
  data () {
    return {
      list:[]
    }
  },
  methods:{
    async queryGroup () {
      const res = await this.$api.requested({
        "id": 20220930103501,
        "content": {
          "ownertable":this.ownertable,
          "ownerid":this.$route.query.id
        }
      })
      this.list = res.data
      console.log(res.data,'----')
    },
    async setLeader (item) {
      const res = await this.$api.requested({
        "id": 20220930103701,
        "content": {
          "ownertable":this.ownertable,
          "ownerid":this.$route.query.id,
          "userid":item.userid
        }
      })
      this.tool.showMessage(res,()=>{
        this.queryGroup()
      })
    },
    async deleteGroupAccount (item) {
      const res = await this.$api.requested({
        "id": 20220930103801,
        "content": {
          "ownertable":this.ownertable,
          "ownerid":this.$route.query.id,
          "userid":item.userid
        }
      })
      this.tool.showMessage(res,()=>{
        this.queryGroup()
      })
    }
  },
  mounted() {
    this.queryGroup()
  },
  watch: {
    $route () {
      this.queryGroup()
    }
  }
}

</script>
<style>
</style>
<style scoped>
.avatar{
  position: relative;
  height:40px;
  width: 40px;
  margin-bottom: 5px;
  border-radius: 100%;
  text-align: center;
  line-height: 40px;
  color:#fff;
  font-weight: 500;
  background: #3874F6;
  cursor: pointer;
}
.avatar__model{
  display: none;
  position: absolute;
  left:0;
  top:0;
  height:40px;
  width: 40px;
  border-radius: 100%;
  background: rgba(0,0,0,0.5);
  z-index: 999;
}
.avatar:hover .avatar__model{
  display: block;
}
.leader{
  background: orange !important;;
}
</style>