<template>
  <div>
    <van-cell-group>
      <van-cell
        v-for="(item, index) in team_list"
        :key="index"
        :title="item.name"
        @click="add(index, item)"
        is-link
      >
        <template slot="label">
          <div class="member_list_box">
            <van-tag
              type="primary"
              size="small"
              v-if="item.leader > 0 && employee_map[item.leader]"
            ><Wxopendata type="userName" :openid="employee_map[item.leader].name"></Wxopendata>(队长)</van-tag>
            <van-tag
              type="primary"
              plain
              size="small"
              :key="employee_id"
              v-for="employee_id in item.member"
              v-if="employee_id > 0 && employee_map[employee_id] && item.leader!== employee_id"
            ><Wxopendata type="userName" :openid="employee_map[employee_id].name"></Wxopendata></van-tag>
          </div>
        </template>
      </van-cell>
    </van-cell-group>
    <van-cell-group>
      <van-cell class="add-btn" title="创建团队" icon="plus" @click="add(-1, null)" />
    </van-cell-group>
    <van-popup
      v-model="show"
      :get-container="getContainer"
      position="right"
      style="height:100%; width:100%; background-color: rgb(245, 245, 245);"
    >
      <div :style="'padding-top:' + bar_height + 'px;background-color: #238dfa;'"></div>
      <van-nav-bar
        :title="title"
        left-text="返回"
        @click-left="show = false"
        left-arrow
        right-arrow
        @click-right="save"
        right-text="保存"
      ></van-nav-bar>
      <van-cell-group>
        <van-field v-if="team_info != null" v-model="team_info.name" label="队名" placeholder="输入队名" />
        <EmployeeSelectorCell
          :employee_not_select.sync="employee_not_select"
          title="选择队员"
          v-model="member_list"
          @value="checkLeader"
          :max="20"
        ></EmployeeSelectorCell>
        <EmployeeSelectorCell
          v-if="member_list.length > 0"
          title="选择队长"
          v-model="leader_list"
          use_employee_list
          :employee_list.sync="member_list"
          :multi="false"
          :max="1"
        ></EmployeeSelectorCell>
      </van-cell-group>
      <div style="padding:0.32rem;">
        <van-button type="danger" plain @click="del()" v-if="index >= 0" block>删除</van-button>
      </div>
    </van-popup>
  </div>
</template>

<script>
import EmployeeSelectorCell from '@/components/common/EmployeeSelectorCell'
import Vue from 'vue';
import { Tag } from 'vant';

Vue.use(Tag);
export default {
  components: { EmployeeSelectorCell },
  name: "team_item",
  model: {
    prop: 'list',
    event: 'value'
  },
  props: {
    list: {
      type: Array,
      default: () => {
        return []
      }
    }
  },
  data() {
    let team_list = this.list
    return {
      employee_not_select: [],
      bar_height: 0,
      title: '创建团队',
      show: false,
      team_list: team_list,
      team_info: null,
      member_list: [],
      leader_list: [],
      index: -1,
      employee_map: this.$store.getters.employee_map
    }
  },
  created() {
    if (window.plus) {
      this.bar_height = window.plus.navigator.getStatusbarHeight();
    }
  },
  methods: {
    // 不要删除这个方法 这是默认队长用的 不要嫌弃他写的low
    checkLeader() {
      let array = this.member_list
      this.leader_list = array.slice(0,1);
    },
    set_employee_not_select(member) {
      this.employee_not_select = []
      for (let i in this.team_list) {
        for (let j in this.team_list[i].member) {
          if (member.indexOf(this.team_list[i].member[j]) < 0) {
            this.employee_not_select.push(this.team_list[i].member[j])
          }
        }
      }
    },
    del(index) {
      this.$dialog.confirm({
        title: '删除团队',
        message: '确定要删除当前团队吗？'
      }).then(() => {
        this.team_list.splice(this.index, 1)

        this.show = false
      })
    },
    save() {
      if (this.team_info.name == '') {
        this.$toast('请输入队名')
        return false
      }
      if (this.member_list.length == 0) {
        this.$toast('请选择队员')
        return false
      }
      if (this.leader_list.length == 0) {
        this.$toast('请选择队长')
        return false
      }
      let member = []
      for (let i in this.member_list) {
        member.push(this.member_list[i].id)
      }
      let leader = this.leader_list[0].id
      this.team_info.member = member
      this.team_info.leader = leader
      if (this.index >= 0) {
        this.team_list[this.index] = this.team_info
      } else {
        this.team_list.push(this.team_info)
      }
      this.show = false
    },
    add(index, data) {
      this.index = index
      if (index >= 0) {
        this.set_employee_not_select(data.member)
        this.title = '修改团队'
      } else {
        this.set_employee_not_select([])
        this.title = '创建团队'
      }
      if (data == null) {
        this.team_info = {
          name: '',
          member: [],
          leader: 0
        }
      } else {
        this.team_info = JSON.parse(JSON.stringify(data))
      }
      this.member_list = []
      this.leader_list = []
      for (let i in this.team_info.member) {
        this.member_list.push(this.employee_map[this.team_info.member[i]])
      }
      if (this.team_info.leader > 0 && this.employee_map[this.team_info.leader]) {
        this.leader_list.push(this.employee_map[this.team_info.leader])
      }
      this.show = true
    },
    getContainer() {
      return document.body
    },
  }
}
</script>

<style scoped>
.member_list_box .van-tag {
  font-size: 0.2rem;
  margin-left: 0.05rem;
}
.member_list_box .van-tag:first-child {
  margin-left: 0rem;
}
.add-btn {
  color: #1989fa;
}
</style>
