<template>
  <div class="display-inline">
    <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="选择B分事件" left-text="取消" right-text="确定" @click-right="confirm" @click-left="visible_ = false"></van-nav-bar>
      <van-search v-model="filter.keyword" placeholder="请输入姓名或事件内容搜索"/>
      <div class="body_com has_header">
        <scroller ref="scroller" :on-refresh="refresh" :on-infinite="infinite">
          <van-cell-group>
            <van-cell @click="confirm1(item)" v-for="(item, index) in list" :key="index" :title="item.remark">
              <template slot="right-icon">

                <span class="point_text"
                      :class="{color_red: item.point > 0,color_green:item.point < 0}"
                >
                <span v-show="item.point > 0">+</span>
                {{item.point}}
              </span>
              </template>
              <template slot="label">
                <span>{{item.event_time}}</span>　　<span v-show="false" v-if="employee_map[item.employee_id]">{{employee_map[item.employee_id].name}}</span> 　　

                <span style="float: right;
    position: absolute; color:#4BD964;
    right: 0.32rem;" v-if="data_item != null && data_item.id == item.id"><van-icon name="success" /></span>
              </template>
            </van-cell>
          </van-cell-group>
        </scroller>
      </div>
    </van-popup>
  </div>
</template>

<script>
  import Vue from 'vue'
  import {Search} from 'vant'

  Vue.use(Search)
  import request from '@/utils/request'

  export default {
    name: 'EventSelector',
    props: {
      title: {
        type: String,
        default: '选择事件'
      },
      point_type: {
        type: String,
        default: 'BF'
      }
    },
    watch: {
      'filter.keyword': function (val) {
        this.refresh(function () {

        })
      },
      visible_: function (val) {
        if (val) {
          this.$nextTick(() => {
            if (this.$refs.scroller) {
              this.$refs.scroller.finishInfinite(false)
            }
          })
        }
      }
    },
    data () {
      let pt_id = 0
      let types = this.$store.getters.point_types
      for (let i in types) {
        if (this.point_type == types[i].code) {
          pt_id = types[i].id
        }
      }
      return {
        employee_map: this.$store.getters.employee_map,
        com_height: '100%',
        visible_: false,
        list: [],
        data_item: null,
        filter: {
          pt_id: pt_id,
          keyword: '',
          page_size: 30,
          page: 1
        }
      }
    },
    created () {
      if (this.point_type == 'all') {
        delete this.filter.pt_id
      }
    },
    mounted () {
      this.$nextTick(() => {
        if (this.$refs.scroller) {
          this.$refs.scroller.finishInfinite(false)
        }
      })
      if (document.documentElement.style.height) {
        this.com_height = document.documentElement.style.height
      }
    },
    methods: {
      confirm1 (item) {
        this.data_item = item
      },
      confirm () {
        this.$emit('confirm', this.data_item)
        this.visible_ = false
      },
      getContainer () {
        return document.querySelector('body')
      },
      get_list (done) {
        let self = this
        request( 'get','/api/integral/statistics/integral',self.filter).then((res) => {
          done()
          if (res.data.code === 1) {
            self.$refs.scroller.finishInfinite(res.data.data.list.length != 30)
            for (let i in res.data.data.list) {
              self.list.push(res.data.data.list[i])
            }
            self.filter.page++
          } else {
            self.$refs.scroller.finishInfinite(true)
          }
        })
      },
      refresh (done) {
        let self = this
        setTimeout(() => {
          this.filter.page = 1
          this.get_list(function () {
            self.list = []
            done()
          })
        }, 100)
      },
      infinite (done) {
        this.get_list(done)
      }
    },
    keep_alive_update: {
      //运用缓存更新方法来完成返回后的更新
      update_demo_list: function (vm, data) {
        for (let i in vm.list) {
          if (vm.list[i].id == data.id) {
            vm.list[i].name = data.name
          }
        }
      }
    },
  }
</script>

<style scoped>
  .body_com {
    height: calc(100% - 2rem);
    position: relative;
  }

  /deep/ .body_com .van-hairline--top-bottom:after {
    border: none;
  }

  /deep/ .body_com .van-hairline-unset--top-bottom:after {
    border: none;
  }

  .employee_selector_popup {
    background-color: rgb(245, 245, 245);
  }

  .btn {
    font-size: 0.32rem;
    color: #238dfa;
  }

  .display-inline {
    display: inline;
  }
</style>

