<template>
  <div style="background-color: #f5f5f5;">
    <van-nav-bar :title="title" left-text="返回" @click-left="$route_back" :right-text="right_text" @click-right="multi_option" left-arrow></van-nav-bar>
    <div class="body_com has_header" :class="{multi_option: multi}">
      <scroller ref="my_scroller" :on-refresh="refresh" :on-infinite="infinite">
        <van-checkbox-group v-model="radio" :class="{show_radio: item.status == '0' && multi}" class="new_employee_group" v-for="(item, index) in list" :key="index">
          <van-checkbox :name="item.id">
            <van-cell :title="item.account_name" :label="'由'+item.employee_name+'邀请加入'">
              <template slot="icon">
                <img :src="item.account_img_url?item.account_img_url:'static/images/defalut_custmer_headicon.png'" class="new_employee_img"/>
              </template>
              <template slot="default">
                <van-button type="info" @click="agree_btn([item.id])" size="small" v-if="item.status == '0' && !multi">同意</van-button>
                <span v-if="item.invitee">
<!--                 <a style="color:#1989fa;" v-if="item.invitee && item.status == '1' && item.invitee.employee_detail.dept_list.length == 0" @click="$router.push({name:'',query:{id: item.invitee.employee_detail.id}})" >去完善信息</a>
                 <span v-if="item.status == '1' && item.invitee.employee_detail.id && item.invitee.employee_detail.dept_list.length > 0">信息已完善</span> -->
                </span>
              </template>
            </van-cell>
          </van-checkbox>
        </van-checkbox-group>
        <noData v-model="list"></noData>
      </scroller>
    </div>

    <van-radio-group class="bottom_group">
      <van-cell>
        <van-checkbox v-model="select_all" slot="icon">全选</van-checkbox>
        <van-button type="info" size="small" @click.stop="agree_btn(radio)" slot="default">同意</van-button>
      </van-cell>
    </van-radio-group>

  </div>
</template>

<script>
import request from '@/utils/request'
import Vue from 'vue'
import { Checkbox, CheckboxGroup } from 'vant'
Vue.use(Checkbox)
Vue.use(CheckboxGroup)
export default {
  watch: {
    radio (val) {
      let _val = []
      for (let i in this.list) {
        if (this.list[i].status == '0') {
          _val.push(i * 1)
        }
      }
      if (_val.length == val.length && val.length > 0) {
        this.select_all = true
      } else {
        this.select_all = false
      }
    },
    select_all (val) {
      if (val) {
        this.radio = []
        for (let i in this.list) {
          if (this.list[i].status == '0') {
            this.radio.push(this.list[i].id * 1)
          }
        }
      } else {
        this.radio = []
      }
    }
  },
  data () {
    return {
      list: null,
      title: '新成员',
      radio: [],
      multi: false,
      select_all: false,
      right_text: '批量',
      filter: {
        page: 1,
        page_size: '10'
      }
    }
  },
  mounted () {

  },
  methods: {
    multi_option () {
      if (this.multi) {
        this.multi = false
        this.right_text = '批量'
      } else {
        this.multi = true
        this.right_text = '取消'
      }
    },
    showLoading () {
      this.$toast.loading({
        message: '正在处理'
      })
    },
    // 同意按钮
    agree_btn (id) {
      let self = this
      if (id.length == 0) {
        this.$toast('请至少选择一条申请记录')
        return false
      }
      self.$toast.loading({
        message: '正在处理'
      })
      request('post', '/api/join/agree', {ids: id}).then(res => {
        self.$toast.clear()
        if (res.data.code == 1) {
          self.$toast(res.data.msg)
          self.refresh(function () {
            self.$toast.clear()
          })
        } else {
          self.$toast(res.data.msg)
        }
      })
    },
    // 获取列表
    get_list (done) {
      let self = this
      // request('get', '/api/join/index', self.filter).then((res) => {
      //   done()
      //   if (res.data.code == 1) {
      //     var list = res.data.data.list
      //     for (let i in list) {
      //       if (list[i].invitee) {
      //         if (list[i].invitee.employee_detail.dept_list == null) {
      //           list[i].invitee.employee_detail.dept_list = []
      //         }
      //       }
      //     }
      //     if (self.filter.page === 1) {
      //       self.list = list
      //     } else {
      //       self.list = self.list.concat(list)
      //     }
      //     self.$refs.my_scroller.finishInfinite(list.length != '10') // 停止上滚加载下一页，由于服务器端没有统一空数据和正常数据的格式，所以通过total字段来判定数据是否存在下一页
      //   } else {
      //     self.$refs.my_scroller.finishInfinite(true)
      //   }
      // }).finally(() => {

      // })
    },
    refresh (done) {
      let self = this
      setTimeout(() => {
        this.filter.page = 1
        this.get_list(function () {
          self.list = []
          done()
        })
      }, 100)
    },
    infinite (done) {
      this.filter.page++
      this.get_list(done)
    }
  },
  keep_alive_update: {
    employee_list: function (vm, data) {
      vm.refresh(function () {
        vm.$toast.clear()
      })
    }
  }
}
</script>

<style lang="less" scoped>
  .avatar_img{width:1.2rem; margin-right:0.16rem;
    height: 1.2rem; border-radius: 0.16rem;}
  .user-info{padding-top:0.24rem;}
  .user-info .van-cell__title{
    font-size:0.36rem;
    font-weight: bold;
    margin-top:0.1rem;
  }
  .user-info:after{
    border:none;
  }
  .user-info .van-icon.van-icon-arrow.van-cell__right-icon:before{
    margin-top:0.28rem;
  }
  .user-info-username{font-size:0.28rem;
    font-weight: normal;margin-top:0.16rem;}
  .body_com{height: calc(100% - 0.92rem); position: relative;}
  .body_com.multi_option{height: calc(100% - 1.92rem); position: relative;}
  .avatar_bg{
    background-color: #fff;
    width: 100vw;
    padding: 0.6rem 0;
  }
  .info_conten_group{
    .van-cell{
      &:after{
        display: none;
      }
    }
  }
  .info_conten{
    padding: 0.2rem 0.32rem;
    padding-top: 0;
    &.disabled{
      color: #959595;
    }
  }
  .info_conten_group{
    .van-cell-group{
      margin-top: 0;
    }
  }
  .new_employee_group{
    padding:0 0.32rem;
    background-color: #fff;
    .new_employee_img{
      width: 0.96rem;
      height: 0.96rem;
      border-radius: 50%;
      margin-right: 0.24rem;
    }
    .van-cell__title{
      span{
        font-size: 0.38rem;
        line-height: 0.4rem;
        padding-top:0.2rem;
      }
      .van-cell__label{
        font-size: 0.28rem;
        line-height: 0.32rem;
      }
    }
    .van-cell__value{
      padding-top: 0.22rem
    }
    i{
      line-height: 0.96rem;
    }
  }
  /deep/ .new_employee_group{margin-top:0.2rem;}
  /deep/ .new_employee_group .van-checkbox__icon{display: none;}
  /deep/ .new_employee_group.show_radio .van-checkbox__icon{display: block;}
  /deep/ .new_employee_group .van-checkbox__label{width:100%;}
  /deep/ .new_employee_group .van-cell{padding-left:0; padding-right:0;}
  /deep/ .new_employee_group .van-checkbox__icon{height: auto;}
  /deep/ .new_employee_group .van-checkbox__label{height: auto;}
  /deep/ .bottom_group .van-cell__value--alone{text-align: right;}
  .new_employee_group /deep/ .van-cell__title{
    margin-top:0.1rem;
  }
  .new_employee_group /deep/ .van-checkbox__label{
    margin-left:0.16rem;
  }
  .new_employee_group /deep/ .van-cell__value a{
    font-size:0.28rem;
  }
  .new_employee_group /deep/ .van-cell__value span{
    font-size:0.28rem;
  }
</style>
