<template>
  <div>
    <van-nav-bar :title="title" left-text="返回" @click-left="$route_back" left-arrow></van-nav-bar>
    <div class="body_com has_header">
      <scroller ref="scroller">
        <div class="formTitle">分组名称</div>
        <van-field v-model="group_name" placeholder="请输入分组名称" />
        <div class="formTitle">分组成员({{employee_list?employee_list.length:0}})</div>
        <EmployeeSelectorCell title="+ 添加员工" :title-class="['text-blue']" :selected_all="true" v-model="employee_list" :selectedQuitEmployee="false" :max="0"></EmployeeSelectorCell>
        <van-cell-group>
          <van-cell v-for="(item,index) in employee_list" :key="index">
            <template slot="title">
              <div style="display: flex">
                <userImage :id="item.id" :user_name="item.name" :img_url="item.img_url" style="margin-right: 0.1rem"></userImage>
                <div style="line-height: 0.8rem; ">{{item.name}}</div>
              </div>
            </template>
          </van-cell>
        </van-cell-group>
      </scroller>
    </div>
    <van-row gutter="20" style="margin: 0 0.1rem">
      <van-col :span="8" v-show="$route.query.type == 'edit'">
        <van-button type="default" block @click="del(getItemData)">删除</van-button>
      </van-col>
      <van-col :span="16" v-show="$route.query.type == 'edit'">
        <van-button type="info" block @click="save(getItemData)">保存</van-button>
      </van-col>
      <van-col :span="24" v-show="$route.query.type !== 'edit'">
        <van-button type="info" block @click="save">保存</van-button>
      </van-col>
    </van-row>
  </div>
</template>
<script>
  import request from '@/utils/request'
  import ListEmptyDataCell from '@/components/common/ListEmptyDataCell'
  import EmployeeSelectorCell from '@/components/common/EmployeeSelectorCell'
  import userImage from '@/components/common/user_image'
  import DeptSelectorDropdown from '@/components/common/DeptSelectorDropdown'

  import Vue from 'vue'
  import { Empty, Picker, DropdownMenu, DropdownItem, DatetimePicker ,Form } from 'vant'
  Vue.use(Empty).use(Picker).use(DropdownMenu).use(DropdownItem).use(DatetimePicker).use(Form)

  export default {
    // 数据
    data(){
      return {
        title: '自定义分组B分排名',
        list: [],
        filter: {
          page: 1,
          page_size: 10,
          dept_id: '0',
          sort: 'DESC'
        },
        loading: true,
        employee_list: [],
        group_name: '',
        employees: [],
        getItemData:{}
      }
    },
    // 组件
    components: {
      ListEmptyDataCell,EmployeeSelectorCell,userImage
    },
    watch:{
      employee_list(val){
        this.employees = []
        if(val !== undefined && val.length > 0){
          val.forEach(element => {
            this.employees.push(element.id)
          });
        }else{
          this.employees = []
        }
      }
    },
    // 方法
    methods:{
      save(item){
        let self = this
        if(!self.group_name){
          self.$notify({ type: 'danger', message: '请输入分组名称' });
          return false
        }
        if (self.group_name.length > 10) {
          self.$notify({ type: 'danger', message: '分组名称不能大于10个字符' });
          return false
        }
        if (self.employees == null && self.employees.length == 0) {
          self.$notify({ type: 'danger', message: "请选择员工" });
          return false
        }
        self.showLoading()
        let data = {}
        if (item.id) {
          data = {group_name: self.group_name, employees: self.employees, group_id: item.id}
        }else{
          data = {group_name: self.group_name, employees: self.employees}
        }
        request(item.id?'POST':'PUT','/api/integral/statistics/groups',data).then(res => {
          if (res.data.code === 1) {
            self.$keep_alive_update(item.id?'updateCustomBRankItem':'addCustomBRankItem', res.data.data);
            self.$toast(res.data.msg)
            setTimeout(() => {
              self.$route_back()
            }, 1000);
          } else {
            self.$toast(res.data.msg)
          }
        }).catch(e => console.error(e)).finally(() => {})
      },
      del(item){
        let self = this
        let data = {group_id: item.id}
        self.$dialog.confirm({
          title: '提示',
          message: '您确定永久删除此项?',
        }).then(() => {
          self.showLoading()
          request('DELETE','/api/integral/statistics/groups',data).then(res => {
            self.$toast.clear()
            if (res.data.code === 1) {
              self.$keep_alive_update('delCustomBRankItem', data)
              self.$toast(res.data.msg)
              setTimeout(() => {
                self.$route_back()
              }, 1000);
            } else {
              self.$toast(res.data.msg)
            }
          }).catch(e => console.error(e)).finally(() => {
            self.$toast.clear()
          })
        }).catch(() => {
          return false
        });
      },
      // 加载
      showLoading () {
        this.$toast.loading({
          loadingType: "spinner",
          message: '正在处理'
        })
      },

      getData(id) {
        this.showLoading()
        request('get','/api/integral/statistics/groups/info',{group_id: id}).then(res => {
          if (res.data.code === 1) {
            this.getItemData = res.data.data
            this.group_name = res.data.data.name
            this.employee_list = res.data.data.employees
            this.employees = []
            if (res.data.data.list !== undefined) {
              res.data.data.employees.forEach(element => {
                this.employees.push(element.id)
              });
            }
          } else {
            this.$toast(res.data.msg)
          }
        }).catch(e => console.error(e)).finally(() => {
          this.dataLoading = false
          this.$toast.clear()
        })
      },
    },
    // 组件挂载完成
    mounted() {
      if (this.$route.query.type == "edit") {
        this.getData(this.$route.query.id)
      }
    },
  };
</script>
<style scoped lang="less">
  .body_com{height: calc(100% - 2rem); position: relative;}
  .dropdown-menu__item {
    position: relative;
    display: flex;
    flex: 1;
    min-width: 0;
    font-size: 0.3rem;
    color: #323233;
    align-items: center;
    justify-content: center;
    cursor: pointer;

    & > span {
      position: relative;
      box-sizing: border-box;
      max-width: 100%;
      padding: 0 0.16rem;
      color: #323233;
      font-size: 0.3rem;
      line-height: 0.36rem;

      &:after {
        position: absolute;
        top: 50%;
        right: -0.08rem;
        margin-top: -0.1rem;
        border: 0.06rem solid;
        border-color: transparent transparent currentColor currentColor;
        transform: rotate(-45deg);
        opacity: .8;
        content: '';
      }

      &.asc-order:after {
        margin-top: -0.02rem;
        transform: rotate(135deg);
      }
    }
  }
  .tableHeader{
    font-size: 0.28rem;
    color: #969799;
    padding: 0.1rem 0.32rem;
  }
  .rank-item{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    padding-right: 0.32rem;
    width: 0.64rem;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    & .rank-item__icon{
      width: 0.64rem;
    }
  }
  .text-red{
    color: rgb(245, 108, 108);
  }
  .text-blue{
    color: #26A2FF;
  }
  .formTitle{
    padding: 0.24rem 0.32rem 0.1rem;
    color: #969799;
    font-size: 0.2rem;
  }
  /deep/ .employee_cell{
    .van-cell__title{
      color: #26A2FF;
    }
  }
</style>