<template>
  <view class="content">
      <!-- 顶部筛选菜单 -->
      <view class="uni-flex ai-center screen-box menu-list">
          <view class="menu" v-for="(item,index) in menuList" :key="index" @click="handleClick(item)">
              <view class="menu-image round" style="height:75rpx;width:75rpx;padding: 18rpx;"
                    :style="activeType==item.id ? 'background:#f0f7fe;' : 'background:#f6f7f8;'">
                  <image :src="activeType==item.id? item.active: item.src" mode="aspectFit" style="height:100%;">
                  </image>
              </view>
              <view class="menuName" :style="activeType==item.id ? 'color:#5B96E9' :'color:#808D97'">{{item.name}}
              </view>
          </view>
      </view>
      <view v-if="pageList.length>0">
          <list-unit v-for="(item,index) in pageList" :key="index" :item="item" :i="index" @goDetail="goDetail"></list-unit>
      </view>
      <!-- 无数据时的页面显示 -->
      <view v-else-if="pageData.isLoading===false">
          <noFound :nodata="pageList.length>0 ? false : true" :text="searchTime[1]+'无数据，'">
              <text name="other">请选择其它日期进行查询。</text>
          </noFound>
      </view>
      <!-- 底部提示 -->
      <view class="load-more" v-if="pageList.length>0">
          <text>{{!pageData.isEnd ? '正在加载,请稍后...':'——— 我是有底线的 ———'}}</text>
      </view>
      <UniPop :show="showPop" @hidePopup="closePop" type="bottom" @touchmove.prevent round="true">
          <view class="pop">
              <p class="title">服务区名称</p>
              <picker class="title-clock" mode="selector" @change="pickerChange" :value="pickerIndex"
                      range-key="label" :range="severpartList">
                  <view class="box-center-title">{{severpartList[pickerIndex].label}}</view>
              </picker>
              <p class="title" style="margin-top: 20px">日期</p>
              <view class="selectTime">
                  <picker class="time" mode="date" @change="handlechangeTime($event,0)">
                      <text>{{'请选择开始时间'}}</text>
                  </picker>
                  -
                  <picker class="time" style="text-align: right" mode="date" @change="handlechangeTime($event,1)">
                      <text>{{'请选择结束时间'}}</text>
                  </picker>
              </view>
              <view class="popbtn" @click="reloadList">确定</view>
          </view>
      </UniPop>
  </view>
</template>
<script>
import {
    mapState,
    mapGetters,
    mapMutations
} from 'vuex'
import ListUnit from "./components/listUnit.vue";
import UniPop from '@/components/uni-popup.vue'
export default {
    components: {ListUnit,UniPop},
    data() {
        let stime = ''
        let etime = ''
        return {
            menuList: [
            { //列表头部菜单选项标签
                name: '全部',
                src: 'https://eshangtech.com/ShopICO/ahyd-BID/expense/type/yifq.png',
                active: 'https://eshangtech.com/ShopICO/ahyd-BID/expense/type/yifqz.png',
                id: 0
            }, {
                name: '待切换',
                src: 'https://eshangtech.com/ShopICO/ahyd-BID/expense/type/shenp.png',
                active: 'https://eshangtech.com/ShopICO/ahyd-BID/expense/type/shenpz.png',
                id: 1
            }, {
                name: '已切换',
                src: 'https://eshangtech.com/ShopICO/ahyd-BID/expense/type/yichl.png',
                active: 'https://eshangtech.com/ShopICO/ahyd-BID/expense/type/yichlz.png',
                id: 2
            }, {
                name: '更多筛选',
                src: 'https://eshangtech.com/ShopICO/ahyd-BID/expense/type/shaix.png',
                active: 'https://eshangtech.com/ShopICO/ahyd-BID/expense/type/shaixz.png',
                id: 99
            } ],
            activeType: 0, // 选中的延期类型
            showPop: false,
            pageList:[],
            severpartList:[],// 服务区列表
            pickerIndex: 0,
            searchTime: [stime, etime],
            pageData: {
                pageIndex: 1,
                pageSize: 10,
                isEnd: false,
                isLoading: true,
                endDate: etime
            },
            pushInto:false,// 是否为推送进来
            TotalCount: '',
        }
    },
    computed: { //监听属性 类似于data概念
        ...mapGetters({
            reloading: 'shouldReLoadingList'
        }),
        ...mapState({
            user: (state) => {
                return state.userData
            },
        }),
    },
    onLoad(query){
        if(query){
            this.pushInto = true
        }
      this.getSeverpart()
    },
    onShow(){
        this.pageData.pageIndex = 1
        this.handleGetList()
        this.pageData.isEnd = false
    },
    onReachBottom () {
        if (!this.pageData.isEnd){
            this.pageData.pageIndex+=1
            this.handleGetList()
        }
    },
    //页面关闭
    onUnload() {
      this.$util.addUserBehaviorNew()
    },
    methods:{
        ...mapMutations(['shouldReLoadingList']),
        // 拿到列表数据
        handleGetList(){
            let data = {}
            if (this.pushInto){
                data = {
                    searchModel:{
                        QueryType: 0 , //这里设置查询方式，0：模糊查询；1：精准查询
                        SearchParameter:{
                            PROJECTWARNING_ID :'',// 预警表内码
                            BUSINESSPROJECTSPLIT_ID:'',// 经营项目应收拆分表内码
                            BUSINESSPROJECT_NAME:'',// 经营项目名称
                            SHOPROYALTY_ID:'',// 门店提成营收内码
                            SERVERPART_ID:'',// 服务区内码
                            SERVERPART_IDS:this.severpartList[this.pickerIndex].value,// 服务区内码(查询条件)
                            // SERVERPART_IDS:'',// 服务区内码(查询条件)
                            SERVERPART_NAME:'',// 服务区名称
                            SERVERPARTSHOP_NAME:'',// 门店名称
                            BUSINESS_TYPE:'',// 经营模式
                            STARTDATE: '',// 开始时间
                            ENDDATE: '',// 结束时间
                            MINTURNOVER:'',//  保底租金
                            ROYALTY_PRICE:'',// 业主分润
                            ROYALTY_RATE:'',// 切换前比例
                            ROYALTY_CRATE:'',// 切换后比例
                            EXPIREDAYS:'',// 预估到期天数
                            WARNING_DATE:'',// 提醒日期
                            WARNING_DATE_Start:this.searchTime[0],// 提醒日期(查询条件)
                            WARNING_DATE_End:this.searchTime[1],// 提醒日期(查询条件)
                            PROJECTWARNING_STATE:'',// 审批状态
                            PROJECTWARNING_STATES:this.activeType===1?'1000,2000':this.activeType===2?'9000':'',// 审批状态(查询条件)
                            RECORD_DATE:'',// 记录时间
                            PROJECTWARNING_DESC:'',// 备注说明
                            REVENUE_AMOUNT:'',// 营收金额
                            SUBROYALTY_PRICE:'',// 商家分润
                            TICKET_FEE:'',// 手续费
                            BUSINESSDAYS:'',// 营业天数
                            REVENUEDAILY_AMOUNT:'',// 当日营业额
                        },
                        keyWord:{
                            Key:'',//  字段
                            Value:'',//  值
                        },
                        PageIndex: this.pageData.pageIndex,// 查询页码数
                        PageSize: this.pageData.pageSize,// 页显示数量
                        SortStr:'DealMark,PROJECTWARNING_STATE,EXPIREDAYS,WARNING_DATE desc',// 排序条件
                    }
                }
            }else{

            }
            this.$request.$webPost("EShangApiMain/BusinessProject/GetPROJECTWARNINGList", data.searchModel).then(res=>{
                if (!res.Result_Code || res.Result_Code !== 100) {
                    this.pageData.isLoading = false
                    this.pageList = []
                } else {
                    //筛选数据（请根据实际业务修改）
                    let list = res.Result_Data.List.filter(p => {
                      if (p.SWITCH_DATE){
                        const date = new Date(p.SWITCH_DATE)
                        const y = date.getFullYear()
                        let m = date.getMonth() + 1
                        let d = date.getDate()
                        if (m<10){
                          m = '0'+m
                        }
                        if (d<10){
                          d = '0'+d
                        }
                        p.CHANG_DATE = `${y}-${m}-${d}`
                      }
                        if (this.activeType === 1) {
                            return p.PROJECTWARNING_STATE === 1000 || p.PROJECTWARNING_STATE === 2000
                        } else if (this.activeType === 2) {
                            return p.PROJECTWARNING_STATE === 9000
                        } else {
                            return true
                        }

                    })
                  console.log('list',list)
                    if (list.length > 0) {
                        this.TotalCount = res.Result_Data.TotalCount
                        if (this.pageData.pageIndex === 1) {
                            this.pageList = list
                            if (list.length<this.TotalCount){

                            }else{
                              this.pageData.isEnd = true
                            }
                        } else {
                            if (this.pageList.length<this.TotalCount){
                                this.pageList = this.pageList.concat(list)
                            }else{
                                this.pageData.isEnd = true
                            }
                        }
                    }else{
                        this.pageData.isEnd = true
                    }
                    this.$forceUpdate()
                }
                uni.hideLoading()
                let _this = this
                setTimeout(function() {
                    _this.pageData.isLoading = false
                }, 500)
            })
        },
        //服务区列表
        getSeverpart() {
            const _this = this
            this.$request.$webGet('EShangApiMain/Logging/GetPassportInfoById', {
                UserIdEncrypted: this.user.UserIdEncrypted
            }).then(res => {
                if (!res.Result_Code || res.Result_Code != '100') {
                    _this.severpartList = []
                } else {
                    this.$request.$webGet('EShangApiMain/BaseInfo/GetServerpartDDL', {
                        ServerpartCodes: res.Result_Data.CityAuthority,
                        ServerpartType: 1000,
                        StatisticsType: '1000,2000'
                    }).then(res => {
                        _this.severpartList = res.Result_Data.List
                        _this.severpartList.unshift({label:'全部服务区',value:''})
                        this.handleGetList()
                    })
                }
            })
        },
        // 选择开始时间
        handlechangeTime(e, index){
            if (index===1){
                let startTime = new Date(this.searchTime[0]).getTime()
                let endTime = new Date(e.detail.value).getTime()
                if (startTime>endTime){
                    uni.showToast({
                      title: '结束时间不能小于开始时间',
                      icon: 'none',
                    })
                }else{
                    this.searchTime[index] = e.detail.value
                    this.$forceUpdate()
                }
            }else{
                this.searchTime[index] = e.detail.value
                this.$forceUpdate()
            }
        },
        pickerChange(e) {
            this.pickerIndex = e.detail.value
            this.pageData.pageIndex = 1
        },
        reloadList() {
            let startTime = new Date(this.searchTime[0]).getTime()
            let endTime = new Date(this.searchTime[1]).getTime()
            if (startTime>=endTime){
                uni.showToast({
                    title: '结束时间不能小于等于开始时间',
                    icon: 'none',
                })
            }else{
                this.showPop = false
                this.pageData.pageIndex = 1
                uni.showLoading({
                    title: '正在加载'
                })
                this.pageData.isLoading = true
                this.pageData.isEnd = false
                this.pageList = []
                this.handleGetList()
                this.$forceUpdate()
            }
        },
        handleClick(item) { //顶部菜单标签点击事件
            if (item.id === 99) { //标签 id=99 代表点击了更多筛选
                this.showPop = true
            } else {
                this.activeType = item.id
                this.reloadList()
            }
        },
        goDetail(item){
            this.$util.toNextRoute('navigateTo', `/pages/projectWarning/detail?id=${item.PROJECTWARNING_ID}&type=no`)
        },
        closePop(){
            this.showPop = false
        }
    }
}
</script>

<style scoped>
.menu-list {
//顶部菜单样式
    width: 100%;
    background-color: #fff;
    flex-wrap: wrap;
}
.menu {
    text-align: center;
    min-width: 185rpx;
    padding: 24rpx 0;
}

.round {
    border-radius: 50%;
}

.menuName {
    color: #120E2B;
    font-size: 24rpx;
    text-align: center;
    margin-top: 16rpx;
}

.menu-image {
    padding: 12rpx 8rpx;
    height: 80rpx;
    box-sizing: border-box;
    margin: 0 auto;
    text-align: center;
}

.menu-image image {
    max-width: 100%;
    max-height: 100%;
}


.screen-box {
    background-color: #fff;
    padding: 0 0rpx;
    position: sticky;
    top: 0;
    z-index: 1;
}
.pop{
    width: 100%;
    box-sizing: border-box;
    padding: 16px;
    text-align: left;
}
.pop .title{
    font-size: 14px;
    font-weight: 600;
}
.pop .title-clock{
    display: inline-block;
}
.pop .selectTime{
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.pop .selectTime .time{
    width: 45%;
}
.pop .popbtn {
    width: 639rpx;
    height: 80rpx;
    line-height: 80rpx;
    color: #fff;
    font-size: 28rpx;
    background: #5b96e9;
    border-radius: 8rpx;
    margin: 48rpx auto 24rpx auto;
    text-align: center;
}
</style>
