<template>
  <div class="display-inline"  style="display: inline-block;">
    <a href="javascript:void(0);" @click="visible_ = true" class="btn">{{title}}</a>
    <van-popup
      :duration="0.2"
      :overlay="false"
      class="employee_selector_popup"
      v-model="visible_"
      position="bottom"
      :style="'height:'+com_height"
      :get-container="getContainer"
    >
      <van-nav-bar title="引用绩效" left-text="取消" @click-left="visible_ = false"></van-nav-bar>
       <YearMonthPicker v-model="filter.date"></YearMonthPicker>
      <div class="body_com has_header">
        <scroller ref="my_scroller" :on-refresh="refresh" :on-infinite="infinite">
          <div style="padding: 0.34rem 0.24rem 0.08rem; background: #F5F7FA; font-size: 0.28rem;" class="color_ccc">选择你要引用的绩效工作</div>
           <van-cell-group v-show="list.length != 0">
            <van-cell  v-for="(item, index) in list " :key="index" class="detail_list" title-class="cell_title" @click="confirm(item)"  :title="item.task_name" >
              <template slot="icon">
                <van-circle
                  v-model="num"
                  :rate="item.progress"
                  :speed="100"
                  size="1rem"
                  color="#26A2FF"
                  :text="item.progress+ '%'"
                  style="margin-right:0.16rem;"
                />
              </template>
              <template slot="label">
                <span style="color:#26A2FF;margin-right:0.16rem; font-size: 0.44rem;">{{item.base_point}}</span><span style="font-size:0.28rem;">权重 {{((item.base_point)/base_point*100).toFixed(0)}}%</span>
              </template>
            </van-cell>
          </van-cell-group>
           <noTask v-if="list.length == 0"  src='static/images/nodata.png' detail_text="暂无绩效详情可以引用哦" />
        </scroller>
      </div>
    </van-popup>
  </div>
</template>

<script>
import Vue from 'vue'
import { Tab, Tabs, Col, Row, Image, Circle } from 'vant'

import noTask from '@/components/common/noTask'

import YearMonthPicker from '@/components/common/YearMonthPicker'
import request from '@/utils/request'
import moment from 'moment'
Vue.use(Tab)
Vue.use(Tabs).use(Col).use(Row).use(Image).use(Circle)
export default {
  components: {YearMonthPicker, noTask},
  name: '',
  props: {
    title: {
      type: String,
      default: '选择事件'
    },
    base_point: {
      type: Number,
      default: 100
    }
  },
  data () {
    return {
      filter: { date: moment().subtract('month', 1).format('YYYY-MM')},
      com_height: '100%',
      list: [],
      visible_: false,
      total: this.$route.query.total,
      num: 0
    }
  },
  watch: {
    'filter.date': function (val) {
      this.get_my_cation(function () {})
      let self = this
      this.$toast.loading({
        message: '正在加载'
      })
      this.refresh(function () {
        self.$toast.clear()
      })
    }
  },
  created () {
    if (document.documentElement.style.height) {
      this.com_height = document.documentElement.style.height
    }
    this.$nextTick(() => {
      if (this.$refs.my_scroller) {
        this.$refs.my_scroller.finishInfinite(false)
      }
    })
  },
  methods: {
    // 回传item
    confirm (item) {
      this.$emit('confirm', item)
      this.visible_ = false
    },
    getContainer () {
      return document.querySelector('body')
    },
    get_my_cation (done) {
      let self = this
      let params = {}
      params.month = this.filter.date
      params.employee_id = this.$route.query.employee_id
      request('get', '/api/integral/performance/info', params).then(res => {
        self.$toast.clear()
        done()
        if (res.data.code == 1) {
          self.$refs.my_scroller.finishInfinite(false)
          self.list = res.data.data.work_list
        } else {
          self.$refs.my_scroller.finishInfinite(true)
        }
      })
    },

    refresh (done) {
      let self = this
      this.$toast.loading({
        loadingType: 'spinner',
        message: '正在处理'
      })
      self.get_my_cation(done)
    },
    infinite (done) {
      this.get_my_cation(done)
    }

  },
  mounted () {
    if (document.documentElement.style.height) {
      this.com_height = document.documentElement.style.height
    }
  }
}
</script>

<style scoped>
  .body_com {
    height: calc(100% - 1.8rem);
    position: relative;
  }
  .tasknum {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0.26rem 0 0.24rem 0;
  }
  .department {
    color: #fff;
  }

  .performance_list_box /deep/ .no-data-text{
    font-size:0.28rem;
  }
  .performance_list_box /deep/ .van-cell-group .van-row{
    margin-left:0.15rem !important;
    margin-right:0.15rem !important;
  }
  .van-cell-group{
    margin-top: 0;
  }
  .detail_list .van-cell__label{
    margin-top: 0.16rem;
  }
  .cell_title.van-cell__title span{
    font-size: 0.36rem;
  }
 .nolist .c  .van-col--24 {
    text-align: center;
  }
</style>
