<template>
  <div class="approval_list_box">
    <van-nav-bar :title="title" left-text="返回" @click-left="$route_back" left-arrow right-text="批量审批" @click-right="openBatch()"></van-nav-bar>
    <van-search v-model="filter.keyword" placeholder="搜索姓名或内容"/>

    <TabsList
      ref="tabsList"
      :top="2.1"
      :tabsOption="tabsOption"
      :enablePullUpRefresh='true'
      @onRefresh="onRefresh"
      @onInfinite="onInfinite"
      @onTabChange="onTabChange"
      :list="list"
      :cancel_buttons="'block'"
      :isSameContent="true"
    >
      <div slot="filter">
        <noData style="background-color:rgb(245, 245, 245);margin-top: 2rem;" v-show="screen_list.length == 0" :list="screen_list"/>
        <div v-show="screen_list.length > 0" class v-for="(item,index) in screen_list" :key="index">
          <van-cell
            v-for="(o,index) in item.list"
            :key="index"
            :title="o.name"
            @click="onselect(item,o)"
          >
            <template #right-icon>
              <van-icon
                name="success"
                size="0.4rem"
                :color="filter[item.mapping] === o.id ? '#26A2FF': 'transparent'"
              />
            </template>
          </van-cell>
        </div>
      </div>

      <div slot="content">
        <van-cell-group v-show="list.length != 0" :border="false">
          <div
            v-for="(item,index) in list"
            :key="index"
            @click="detail(item)"
            class="task_list"
            :class="{cell_padding_bottom: item.status != 0}">
            <div class="task-item__header">
              <userImage  :user_name="item.employee_name" v-if="item.source_type == 1 || item.source_type == 4" width="0.72rem" height="0.72rem"/>
              <userImage  :user_name="item.employee_name" v-if="item.source_type == 2 || item.source_type == 3" width="0.72rem" height="0.72rem"/>
              <div class="task-title__bar">
                <!-- <span class="title" v-show="item.source_type == 1">{{item.employee_name}}的积分任务</span>
                <span class="title" v-show="item.source_type == 2">{{item.employee_name}}的积分申请</span>
                <span class="title" v-show="item.source_type == 3">{{item.employee_name}}的积分奖扣</span>
                <span class="title" v-show="item.source_type == 4">{{item.employee_name}}的绩效工作</span> -->
                <span class="title">
                  <Wxopendata type="userName" :openid="item.employee_name"></Wxopendata>
                  {{item.source_type == 1?'的积分任务':item.source_type == 2?'的积分申请':item.source_type == 3?'的积分奖扣':item.source_type == 4?'':''}}
                </span>
                <!-- <span class="title" v-show="item.source_type == 4">{{item.employee_name}}提交的绩效工作包</span> -->
                <span v-if="filter.type === 'reviewed' && item.status !== 0 &&   item.status !== 2 ">
                  <span class="task-item__point green" v-if="item.review_point >= 0">+{{ item.review_point }} {{$isPt_id(item.pt_id)}}</span>
                  <span class="task-item__point" v-else>{{ item.review_point }} {{$isPt_id(item.pt_id)}}</span>
                </span>
              </div>
            </div>

            <div class="task-remark__content"><span>{{item.remark.customize}}</span></div>
            <div class="task-item__bottom" v-if="item.status == 0">
              <span class="task-item__date">{{item.event_time}}</span>
              <span class="task-item__toolbar" v-if="item.status === 0">
                  <span v-show="item.source_type != 4" @click.stop="reject(item)">驳回</span>
                  <div class="divider"></div>
                  <span v-if="item.source_type == '1'" @click.stop="$router.push({ name: 'integral_approval_integral', query: { review_id: item.id } })">通过</span>
                  <span v-if="item.source_type == '2'" @click.stop="$router.push({ name: 'integral_approval_integral', query: { review_id: item.id } })">通过</span>
                  <span v-if="item.source_type == '3'" @click.stop="$router.push({ name: 'integral_approval_integral', query: { review_id: item.id } })">通过</span>
                  <span v-if="item.source_type == '4'" @click.stop="$router.push({ name: 'integral_approval_performance', query: { review_id: item.id }})">通过</span>
              </span>
              <span class="task-item__toolbar" v-else>
                  <span v-if="item.status === 1" class="approl-success">审批通过</span>
                  <span v-else class="approl-reject">审批驳回</span>
                </span>
            </div>
            <div class="task-item__bottom" v-else>
              <span class="task-item__date">{{item.event_time}}</span>
              <span class="task-item__toolbar">
                  <span class="color_green" v-if="item.status == 1">审批通过</span>
                  <span class="color_red" v-if="item.status == 2">审批驳回</span>
                </span>
            </div>
          </div>
        </van-cell-group>
        <!-- <van-empty v-show="!hasData" description="暂无审批数据..."/> -->
        <noData style="background-color:rgb(245, 245, 245);margin-top: 2rem;" :list="list"  detail_text="暂无内容" />
      </div>
    </TabsList>

    <van-dialog
      v-model="show"
      title="确认驳回"
      class="reject_popup"
      show-cancel-button
      :beforeClose="save_btn"
    >
      <van-cell-group>
        <van-field
          v-model="reject_text"
          rows="2"
          autosize
          type="textarea"
          maxlength="50"
          placeholder="请输入审批意见"
          show-word-limit
          v-validate="'required'"
          name="审批意见"
        />
      </van-cell-group>
    </van-dialog>

  </div>
</template>

<script>
import Vue from 'vue'
import {Tab, Tabs, Empty, DropdownMenu, DropdownItem, Search} from 'vant'
import request from '@/utils/request'
import userImage from '@/components/common/user_image'
import TabsList from '@/components/common/TabsList'
import {_debounce} from '@/utils/auth'

Vue.use(Empty).use(Tab).use(Tabs).use(DropdownMenu).use(DropdownItem).use(Search)

export default {
  name: 'integral_application_list',
  data () {
    return {
      confir_qd: '',
      title: '我的审批',
      show: false,
      review_id: '',
      loading: true,
      list: [],
      filter: {
        page: 1,
        pt_id: 0,
        source_type: '0',
        type: 'waiting',
        keyword: ''
      },
      reject_text: '',
      point_type_arr: this.$store.getters.point_types,
      user_info: this.$store.getters.user_info,

      // 0411
      tabsOption: [
        {title: '待我审批', value: 'waiting'},
        {title: '我已审批', value: 'reviewed'}
      ],
      screen_list: [
        {
          title: '任务类型',
          mapping: 'source_type',
          list: [
            {name: '全部', id: '0'},
            {name: '积分申请', id: '2'},
            {name: '积分奖扣', id: '3'},
            {name: '积分任务', id: '1'},
          ]
        }
      ]
    }
  },
  components: {userImage, TabsList},
  watch: {
    'filter.keyword': {
      deep: true,
      handler: _debounce(function () {
        this.$refs.tabsList.triggerPullToRefresh()
      })
    }
  },
  computed: {
    hasData () {
      return this.loading || (Array.isArray(this.list) && this.list.length > 0)
    }
  },
  mounted () {
    if (this.$route.query.type) {
      this.filter.source_type = '4'
    }
  },
  methods: {
    openBatch () {
      this.$router.push({name: 'batchList'})
    },
    // 加载
    showLoading () {
      this.$toast.loading({
        mask: true,
        type: 'spinner',
        message: '加载中...'
      })
    },
    // 修改
    detail (data) {
      this.$router.push({name: 'approval_detail', query: {review_id: data.id}})
    },
    // 驳回
    reject (data) {
      this.show = true
      this.review_id = data.id
    },
    // 选择条件
    onselect (item, subItem) {
      this.filter[item.mapping] = subItem.id
      this.$refs.tabsList.hideSearchBar()
      this.$refs.tabsList.triggerPullToRefresh()
    },
    onTabChange (value) {
      this.loading = true
      this.list = []
      this.filter.type = value.activeTab
      this.$refs.tabsList.triggerPullToRefresh()
    },
    onInfinite (params) {
      this.get_list(params)
    },
    onRefresh (params) {
      this.get_list(params)
    },
    get_list (params) {
      // 需要告诉scroller 组件是否还有数据未加载
      let hasMore = false
      // params.pageIndex 当前页码
      this.loading = true
      this.filter.page = params.pageIndex
      request('get', '/api/integral/review/list', this.filter).then((res) => {
        if (res.data.code == 1) {
          const list = res.data.data.list
          // params.isRefresh  true为下拉刷新 false为下一页刷新
          if (params.isRefresh) {
            this.list = list
          } else {
            this.list = [].concat(this.list, list)
          }
          // 需要告诉scroller 组件是否还有数据未加载 true没有 flase 还有
          hasMore = list.length !== 10
        }
      }).finally(() => {
        this.loading = false
        params.done && params.done(hasMore)
      })
    },

    // 关闭 rule_popup
    colseRules (action, done) {
      let self = this
      if (action == 'confirm') {
        if (self.popup_rules_input) {
          if (self.rules_type == 'edit') {
            self.edit_rule()
          } else {
            self.add_rule(self.get_id)
          }
          done()
        } else {
          self.$notify({type: 'danger', message: '规则不能为空'})
          done(false)
        }
      } else {
        done()
      }
    },
    // 保存
    save_btn (action, done) {
      let self = this
      if (action == 'confirm') {
        self.$validator.validate().then(result => {
          if (!result) {
            self.$notify({type: 'danger', message: self.$validator.errors.items[0].msg})
            done(false)
          } else {
            self.showLoading()
            let data = {
              review_id: self.review_id,
              action: 'refuse',
              remark: self.reject_text,
              ticket_count: 0
            }
            self.list.splice(self.list.findIndex(item => item.id == data.review_id), 1)
            request('POST', '/api/integral/review', data).then((res) => {
              if (res.data.code == 1) {
                self.$toast.clear()
                self.$toast(res.data.msg)
                self.$keep_alive_update('update_approval_list', {})
                console.log(self.keep_alive_update)
                self.reject_text = ''
                done()
              } else {
                self.$toast(res.data.msg)
              }
            })
          }
        })
      } else {
        done()
      }
    }
  },
  keep_alive_update: {
    // 运用缓存更新方法来完成返回后的更新
    update_approval_list: function (vm, data) {
      for (let i in vm.list) {
        if (vm.list[i].id == data.review_id) {
          vm.list.splice(i, 1)
        }
      }
    }
  }
}
</script>

<style scoped lang="less">
  .body_com {
    height: calc(100% - 1.8rem);
    position: relative;
  }

  .approval_list_box {
    .head_img {
      margin-right: 0.16rem;
    }
  }

  .task-item__header {
    display: flex;
    align-items: center;
    flex-direction: row;
  }

  .selected_list {
    span {
      display: inline-block;
      height: 0.72rem;
      background: #f5f7fa;
      border-radius: 0.08rem;
      line-height: 0.72rem;
      touch-action: none;
      padding: 0 0.2rem;
      margin-right: 0.2rem;
      font-size: 0.3rem;

      &.selected {
        color: #26a2ff;
        background: #26a2ff33;
      }
    }
  }

  .reject_popup {
    padding: 0 0.32rem;

    .van-dialog__content {
      padding: 0.2rem;
    }
  }

  .task_list {
    position: relative;
    padding: 0.24rem 0.32rem 0;

    &:not(:last-child)::after {
      position: absolute;
      box-sizing: border-box;
      content: ' ';
      pointer-events: none;
      right: 0;
      bottom: 0;
      left: 0rem;
      border-bottom: 1px solid #ebedf0;
      -webkit-transform: scaleY(0.5);
      transform: scaleY(0.5);
    }

    .title {
      display: flex;
      flex: 1;
      padding-left: 0.16rem;
      font-size: 0.36rem;
      font-weight: 400;
    }

    .task-remark__content {
      display: -webkit-box;
      padding-left: 0.92rem;
      font-size: 0.32rem;
      color: #333;
      text-overflow: ellipsis;
      overflow : hidden;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
    }

    .task-item__bottom {
      display: flex;
      padding-top: 0.24rem;
      padding-bottom: 0.12rem;
      padding-left: 0.92rem;
      align-items: center;
      justify-content: space-between;
    }

    .task-item__date {
      color: #909399;
      font-size: 0.28rem;
    }

    .task-item__toolbar {
      position: relative;
      font-size: 0.32rem;
      color: #26a2ff;
    }
  }

  .color_green {
    font-size: 0.28rem;
    // background-color: #ddf7e1;
    border-radius: 3px;
    padding: 0.06rem
  }

  .color_red {
    font-size: 0.28rem;
    // background-color: #fbe7e7;
    border-radius: 3px;
    padding: 0.06rem
  }

  .divider {
    display: inline-block;
    margin: 0 0.4rem;

    &:after {
      content: ' ';
      position: absolute;
      top: 50%;
      left: 50%;
      width: 0.02rem;
      height: 60%;
      background: #ebeef5;
      transform: translate(-50%, -50%);
    }
  }

  .approl-success {
    display: flex;
    width: 1.44rem;
    height: 0.52rem;
    align-items: center;
    justify-content: center;
    color: #4bd964;
    background: #ddf7e1;
    font-size: 0.28rem;
    border-radius: 0.1rem;
  }

  .approl-reject {
    display: flex;
    width: 1.44rem;
    height: 0.52rem;
    align-items: center;
    justify-content: center;
    color: #ff0000;
    background: #fbe7e7;
    font-size: 0.28rem;
    border-radius: 0.1rem;
  }

  .van-cell-group {
    margin-top: 0;
  }

  .task-title__bar {
    display: flex;
    flex: 1;
    flex-direction: row;
    align-items: center;

    & .task-item__point {
      padding-left: 0.2rem;
      color: #ff0000;

      &.green {
        color: #4bd964;
      }
    }
  }
</style>
