<template>
    <view class="NeedAudit">
        <scroll-view
          class="scroll-view"
            :style="{height: scrollViewHeight}"
            :scroll-y="true" 
            enable-back-to-top
            refresher-enabled
            :refresher-threshold="100"
            :refresher-triggered="refresherStatus"
            @scrolltolower="scrolltolower"
            @refresherrefresh="onPulling"
          >
            <view class="NeedAudit-list" >
                <view   
                :style="{paddingBottom: index === total - 1  ? '200rpx' : '0rpx'}"
                class="a" 
                v-for="(item,index) in needAuditData" 
                :key="item.id" >
                <a-card  :item="item">
                    <view class="opration-btn">
                        <view class="refuse" @click="passOrRefuseAudit(item.id,index, 2)">
                            拒绝
                        </view>
                        <view class="pass"  @click="passOrRefuseAudit(item.id,index, 1)">
                            通过
                        </view> 
                    </view>
                </a-card>
                </view>
            
            </view>
         </scroll-view>
    </view>
</template>

<script>
import Card from './card.vue'
import { getNeedAudit, passOrRefuseAudit } from '@/api/audit.js'
import Tip from '@/utils/tip.js'
export default {
  name: 'NeedAudit',
  components: {
    ACard:  Card
  },
  props: {
      height: Number
  },
  computed: {
      scrollViewHeight () {
        return  this.$store.state.systemInfo.windowHeight - this.height - 44 + 'px'
      }
  },
  onReady () {
      
      this.getNeedAudit()
  },
  data () {
      return {
          needAuditData: [],
          pegation: {
              page: 1
          },
          total: 0,
          refresherStatus: false,
          _freshing: false
      }
  },
  methods: {
    //   确认or不通过审核
    async passOrRefuseAudit (id, index, state) {
      const result = await Tip.confirm(`确认${state === 1 ? '通过' : '拒绝'}？`)
  
      if (result) {
          const { data, status } = await passOrRefuseAudit(id, state)
            if (status === 200) {
                this.passOrRefuseAuditList(index)
                Tip.success(`已${state === 1 ? '通过' : '拒绝'}`)
            }
      } else {
          Tip.success('已取消')
      }
      
    },
    // 通操作后的园所做数组操作
    passOrRefuseAuditList (index) {
        const { needAuditData } = this
        this.needAuditData.splice(index, 1)
        this.total = this.total - 1
        // this.mulResidueData()
    },
    //   下拉刷新
    onPulling (item) {
        if (this._freshing) return
        this.refresherStatus = true
        this._freshing = true
        this.pegation.page = 1
        setTimeout( async () => {
            this.needAuditData = []
            await this.getNeedAudit()
        }, 1000)
    },
        //   上拉加载
    scrolltolower () {
        this.pegation.page ++ 
        this.getNeedAudit()
    },
    //   需要审核的列表
    async getNeedAudit () {
      const { data, status } = await getNeedAudit({...this.pegation})
 
      if (status === 200) {
          this.refresherStatus = false
          this._freshing = false
          const { total, entityList } = data
            console.log(entityList, 'entityList');
          if (entityList.length === 0) {
              this.pegation.page--
              Tip.error('暂无内容')
              return
          }

          this.total = total
         
          this.needAuditData.push(...Object.freeze(entityList))
      }
    }
  }
}
</script>
<style scoped lang="less">
.NeedAudit {
    height: 100%;
    background-color: #F5F6FA;
    .NeedAudit-list {
        width: 100%;
        // height: 1122rpx;
        // padding-bottom: 400px;
        // box-sizing: border-box;
        .a {
            background-color: #F5F6FA;
        }
    }
}

.opration-btn {
    font-size: 24rpx;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    display: flex;
    justify-content: center;
    align-items: center;
    .refuse {
        width: 120rpx;
        height: 52rpx;
        border-radius: 200rpx;
        border: 2rpx solid #1677FF;
        color: #1677FF;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .pass {
        width: 120rpx;
        height: 52rpx;
        background: #1677FF;
        box-shadow: 0rpx 4rpx 20rpx 0rpx rgba(22, 119, 255, 0.63);
        border-radius: 200rpx;
        color: #FFFFFF;
        display: flex;
        justify-content: center;
        align-items: center;
        margin-left: 40rpx;
    }
}
</style>