<template>
  <div>
    <van-nav-bar title="管理者权限" left-text="返回" @click-left="$route_back" left-arrow right-text="编辑" @click-right="edit"></van-nav-bar>
    <div class="body_com has_header">
      <scroller>

         <van-cell-group>
          <van-cell>
           <template slot="icon">
              <van-image  src="static/images/e66f.jpg" round width="1rem" height="1rem" style="margin-right: 0.12rem;" type="contain"  />
            </template>
            <div class="centerTitle" slot="title">
              姓名
            </div>
            <div class="centerRight" slot="default">
              右侧
            </div>

          </van-cell>
            <van-row  type="flex" justify="center" gutter="50">
            <van-col class="tasknum" span="8">
              <div style="color:#303133;font-size:0.44rem;padding-bottom:0.1rem;">33</div>
              <div style="color:#909399;font-size:0.28rem">A分</div>
            </van-col>
            <van-col class="tasknum" span="8">
              <div style="color:#303133;font-size:0.44rem;padding-bottom:0.1rem;">44</div>
              <div style="color:#909399;font-size:0.28rem">B分</div>
            </van-col>
            <van-col class="tasknum" span="8">
              <div style="color:#303133;font-size:0.44rem;padding-bottom:0.1rem;">22</div>
              <div style="color:#909399;font-size:0.28rem">绩效分</div>
            </van-col>
          </van-row>
        </van-cell-group>

       <van-cell title-class="scopeClass" style="background: none;padding: 0.1rem 0 0 0.32rem;" title="管理范围"  />
        
       <van-cell-group>
         <van-collapse v-model="activeName">
            <van-collapse-item title="标题1" name="1">
              <div slot="default">
                  <van-cell>
                  <template slot="icon">
                      <van-image  src="static/images/e66f.jpg" round width="1rem" height="1rem" style="margin-right: 0.12rem;" type="contain"  />
                    </template>
                    <div class="centerTitle" slot="title">
                      姓名
                    </div>
                  </van-cell>
              </div>
            </van-collapse-item>
         </van-collapse>
        </van-cell-group>

      </scroller>
    </div>
  </div>
</template>

<script>
  import request from '@/utils/request'
  import Vue from 'vue';
  import { Panel ,Image, Collapse, CollapseItem } from 'vant';

  Vue.use(Panel).use(Image).use(Collapse).use(CollapseItem);
  export default {
    name: "manager_detail",
    data(){
      return {
          activeName: [1],
          id: 0,
          name: '',
          start_time: '',
          end_time: '',
          employee_ids: '',
          manager_ids: '',
          employee_id: 0,
          leader_can_record: ''
      }
    },
    methods: {
      edit(){
        this.$router.push({name: 'edit_user_power', query: {employee_id: this.employee_id}})
      },
      get_data(){
        let self = this
        self.$toast.loading({
          message: '正在加载'
        })
        request('get','/api/integral/pk/info', {pk_id: this.id}).then(res => {
          self.$toast.clear()
          this.data = res.data.data
        }).catch(e => {

        })
      }
    },
    created(){
      if(this.$route.query.employee_id){
        this.employee_id = this.$route.query.employee_id
      }
      this.get_data()
    }
  }
</script>

<style scoped>
  .body_com {
    height: calc(100% - 0.92rem);
    position: relative;
  }
   .tasknum {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0.26rem 0 0.24rem 0;
  }
  .scopeClass span {
    font-size: 0.28rem;
    
  }
  .centerTitle {
    height: 100%;
    display: flex;
    align-items: center;
  }
  .centerRight {
    height: 100%;
    display: flex;
    align-items: center;
    text-align: right;
    flex-direction: row-reverse
  }
  .van-cell__right-icon {
    display: none;
  } 
</style>
