<template>
  <div style="background-color: #f5f5f5;">

    <van-nav-bar v-if="this.getRole_noe" title="个人信息" left-text="返回" @click-left="$route_back" :right-text="'编辑'" @click-right="edit_employee_info" left-arrow>
    </van-nav-bar>
    <van-nav-bar v-else title="个人信息" left-text="返回" @click-left="$route_back" left-arrow>
  </van-nav-bar>
    <div class="body_com has_header">
      <scroller>
        <van-cell-group class="info_conten_group">
          <div class="avatar_bg">
            <van-row type="flex" justify="center">
              <van-col span="8">
                <userImage :id="parseInt(get_id)" :user_name="employee_info.name" width="2rem" height="2rem"></userImage>
              </van-col>
            </van-row>
            <div class="avater_name" style="text-align:center; margin-top: 01.rem;">{{employee_info.name}}</div>
            <van-tag plain type="warning" v-for="(item,index) in role_list" :key="index" v-if="item.name != 'employee' " >{{item.remark}}</van-tag>
             <van-tag plain type="success" v-if="employee_info.post" >{{employee_info.post?employee_info.post:''}}</van-tag>
          </div>
        </van-cell-group>

        <van-cell-group class="info_conten_group">
           <van-panel title="" desc="部门">
            <div class="info_conten" :class="dept_arr?'':'disabled'">{{dept_arr?dept_arr:'暂无部门'}}</div>
          </van-panel>
          <van-panel title="" desc="手机">
            <div class="info_conten" :class="employee_info.tel?'':'disabled'">
              {{employee_info.tel?employee_info.tel:'暂无手机'}}
              <a :href="'tel:'+employee_info.tel" v-if="employee_info.tel"><van-icon color="#238dfa" size="0.45rem" style="vertical-align: middle;" name="phone-o" /></a>
            </div>
          </van-panel>
          <van-panel title="" desc="工号">
            <div class="info_conten" :class="employee_info.company_id?'':'disabled'">{{employee_info.company_id?employee_info.company_id:'工号'}}</div>
          </van-panel>

          <van-panel title="" desc="职位">
            <div class="info_conten" :class="employee_info.post?'':'disabled'">{{employee_info.post?employee_info.post:'暂无职位'}}</div>
          </van-panel>
            <van-panel title="" desc="入职时间">
            <div class="info_conten">{{employee_info.accedence_time}}</div>
          </van-panel>
          <van-panel title="" desc="状态">
            <div class="flex-box" style="padding: 0.2rem 0.32rem;font-size: 0.32rem;padding-top:0;">
              <div class="flex-1">{{employee_info.status_remark}}</div>
              <div class="color-blue" v-if="this.getRole_noe && employee_info.status == 0" @click="invite">邀请他加入</div>
              <div class="color-blue" v-if="this.getRole_noe && employee_info.status == 3" @click="invite2">再次邀请</div>
            </div>
          </van-panel>

        </van-cell-group>

        <div style="height:0.5rem"></div>
      </scroller>
    </div>

  </div>
</template>

<script>
import request from '@/utils/request'
import Vue from 'vue'
import userImage from '@/components/common/user_image'
import {getRole_noe} from '@/utils/auth'
import {Image, Panel, Tag} from 'vant'
Vue.use(Image).use(Panel).use(Tag)
export default {
  data () {
    return {
      getRole_noe: '', // 权限判断
      employee_info: {},
      employee_detail: {},
      dept_arr: '',
      get_id: this.$route.query.id,
      role_list: []
    }
  },
  mounted () {
    this.get_employee_info(this.$route.query.id)
  },
  components: {userImage},
  methods: {
    edit_employee_info () {
      if (!this.getRole_noe) {
        return false
      }
      this.$router.push({name: 'employee_edit', query: {id: this.$route.query.id}})
    },
    showLoading () {
      this.$toast.loading({
        message: '正在处理'
      })
    },
    // 再次邀请
    invite2 () {
      this.$toast.loading({
        message: '正在处理'
      })
      request('post', '/api/invite/again', {site_id: this.employee_info.site_id, employee_id: this.employee_info.id}).then(res => {
        this.$toast.clear()
        if (res.data.code == 1) {
          this.$toast.success(res.data.msg)
          this.get_employee_info(this.employee_info.id)
        } else {
          this.$toast(res.data.msg)
        }
      }).catch(e => {

      })
    },
    // 邀请
    invite () {
      this.$toast.loading({
        message: '正在处理'
      })
      request('post', '/api/invite/create', {id: this.employee_info.id}).then(res => {
        this.$toast.clear()
        if (res.data.code == 1) {
          this.$toast.success(res.data.msg)
          this.get_employee_info(this.employee_info.id)
        } else {
          this.$toast(res.data.msg)
        }
      }).catch(e => {

      })
    },
    get_employee_info (id) {
      let self = this
      self.showLoading()
      request('get', '/api/employee/info', {id: id}).then((res) => {
        if (res.data.code == 1) {
          self.employee_info = res.data.data
          self.role_list = res.data.data.employee_detail.role_list
          self.employee_detail = res.data.data.employee_detail
          if (res.data.data.employee_detail.dept_list.length != 0) {
            let arr = []
            for (let i = 0; i < self.employee_info.employee_detail.dept_list.length; i++) {
              arr.push(res.data.data.employee_detail.dept_list[i].dept_name)
            }
            self.dept_arr = arr.join(',')
          }
        } else {
          this.$toast(res.data.msg)
        }
      }).finally(() => {
        this.$toast.clear()
      })
    },
    set_power () {
      this.$router.push({name: 'edit_user_power', query: {id: this.get_id}})
    }
  },
  keep_alive_update: {
    employee_list: function (vm, data) {
      vm.employee_info = data
    },
    quit_employee: function (vm, data) {
      vm.get_employee_info(vm.get_id)
    },
    del_employee: function (vm, data) {
      vm.get_employee_info(vm.get_id)
    }
  },
  created () {
		 this.getRole_noe = getRole_noe()
  }
}
</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% - 1rem); position: relative;}
  .avatar_bg{
    display: block;
    text-align: center;
    background-color: #fff;
    width: 100vw;
    margin-top: -0.2rem;
    padding: 0.48rem 0 0.32rem
  }
  .avatar_bg .avatar_box{
    width:1.6rem !important;
    height:1.6rem;
    overflow:hidden;
  }
  .avatar_bg .avater_name{
    font-size:0.38rem;
    letter-spacing:0.005rem ;
    padding:0.12rem 0 0.24rem;
  }
  .avatar_bg .avater_supervisor{
    display:inline-block;
    text-align: center;
    height:0.44rem;
    line-height:0.44rem;
    font-size:0.24rem;
    color:#FFCC00;
    padding:0.02rem 0.08rem;
    border:0.02rem #FFCC00 solid;
    border-radius: 0.1rem;
  }
  .avatar_bg .avater_position{
    display:inline-block;
    text-align: center;
    width:0.64rem;
    height:0.44rem;
    line-height:0.44rem;
    font-size:0.24rem;
    color:#4BD964;
    padding:0.02rem 0.08rem;
    border:0.02rem #4BD964 solid;
    border-radius: 0.1rem;
  }
  .avatar_bg .avatar_box img{
    width:100%;
    height:auto;
  }
  .info_conten_group{
    .van-cell{
      padding: 0.2rem 0.32rem 0.1rem;
      &:after{
        display: none;
      }
    }
  }
  .info_conten{
    padding: 0.2rem 0.32rem;
    padding-top: 0;
    font-size:0.32rem;
    color: #323233;
    &.disabled{
      color: #959595;
    }
  }
  .info_conten_group{
    .van-cell-group{
      margin-top: 0;
    }

  }
</style>
