<template>
    <view class="container">
        <block>
            <view class="serch-box">
                <view class="condition-box">
                    <view class="search-box">
                        <image :src="icon" class="icon"></image>

                        <input class="uni-input" v-model="query.name" confirm-type="search"
                               :placeholder="$t('index.enter')+'专场名称'" @keyup.enter.native="onSearch" placeholder-style="color:#B9B9B9" />
                    </view>
                    <view class="btn-box">
                        <button class="btn" @click="onSearch">搜索</button>
                    </view>
                </view>

            </view>
        </block>

        <view class="list-box" v-for="(item, index) in list" :key="item.orderNum">
            <view class="content-detail">
                <view class="left">
                    <view class="lable">专场名称：<text class="value">{{item.name}}</text>
                    </view>
                    <view class="lable">专场开始时间：<text
                        class="value">{{item.specialStartTime || $t('index.none')}}</text></view>
                    <view class="lable">专场结束时间：<text
                        class="value">{{item.specialEndTime}}</text>
                    </view>
                    <view class="lable">报名截止时间：<text
                        class="value">{{item.signEndDate}}</text>
                    </view>
                    <view class="lable">添加商品：<text
                        class="value">{{item.productNum}}</text>
                    </view>
                    <view class="lable">参与买家：<text
                        class="value">{{item.joinBuyerNum}}</text>
                    </view>

                </view>
            </view>
            <view class="flag-box">

                <view :class="
                      item.releaseStatus
                ? 'success flag'
                :  'danger flag'

                ">
                    {{item.releaseStatus? '上架' : '下架'}}

                </view>
            </view>
            <view class="handle-box" @click="openHandle(item, index)">
                <view class="handle">
                    <view class="icon">
                        <uni-icons type="more-filled" size="20" color="#333"></uni-icons>
                    </view>
                </view>
            </view>
            <no-data :show="isNoData"></no-data>
        </view>
        <uni-load-more :status="listStatus"></uni-load-more>

        <uni-popup backgroundColor="white"  ref="handPopup" type="bottom" @change="handPopupChange"
                   :safe-area="false">
            <view class="handle-list">
                <view class="handle" v-for="(item,index) in handleList" :key="index" @click="onHandleDetail(item)">
                    {{item.name}}
                </view>
                <view style="border-bottom: none;border-top: 4px solid #f6f7f8;" class="handle cancel" @click="$refs.handPopup.close()">取消</view>
            </view>
        </uni-popup>
    </view>
</template>

<script>
import {
    getSchedule, scheduleUpdateStatus, scheduleDelete, auctionSpecialPage, auctionSpecialUpdateStatus
} from '@/config/api.js'
import {web} from "@/utils/util";
let current_order_key = null;
export default {
    data() {
        return {
            query:{
                title: '',
            },
            icon: web('icon_search.png'),
            list: [],
            total: 0,
            page: 1,
            limit: 10,
            isNoData: false,
            listStatus: 'more',
            loading: false,
            handleList:[]

        };
    },
    created() {
        this.getList()
    },
    methods: {
        getList() {
            auctionSpecialPage({},
                {
                    params: {
                        page: this.page,
                        rows: this.limit,
                        title:this.query.name
                    }
                }
            ).then(res => {
                if (res.content.content.length === 0) {
                    this.isNoData = true
                }
                if (this.page === 1) {
                    this.list = res.content.content
                } else {
                    this.list = [...this.list, ...res.content.content]
                }
                this.total = res.content.totalElements
                this.loading = false
                if (this.page >= res.content.totalPages) {
                    this.listStatus = 'noMore'
                } else {
                    this.page++
                    this.listStatus = 'more'
                }
            })
        },
        onReachBottom() {
            if (this.listStatus === 'noMore') return
            this.listStatus = 'loading'
            this.getList()
        },
        onSearch() {
            this.page = 1
            this.getList()
        },
        openHandle(row,index){
            let handleList = []
            handleList = [{
                name: this.$t('index.detail'),
                type: 'detail'
            },
                {
                    name:'买家审核',
                    type: 'onVerifyBuyer'
                },
                {
                    name:'店铺审核',
                    type: 'onVerifySeller'
                },

            ]
            if(row.releaseStatus ){
                handleList.push(
                    {
                        name:'下架',
                        type: 'updateEnable'
                    }
                )
            }else {
                handleList.push(
                    {
                        name:'上架',
                        type: 'updateEnable'
                    },
                    // {
                    //     name:'编辑',
                    //     type: 'addgetlist'
                    // }
                )
            }
            current_order_key = index
            this.handleList = handleList
            this.$nextTick(() => {
                this.$refs.handPopup.open()
            })
        },

        handPopupChange(e) {
            if (e.show) {
                wx.hideTabBar()
            } else {
                wx.showTabBar()
            }
        },
        onHandleDetail(item){
            this.$refs.handPopup.close()
            let _this = this;
            let id = this.list[current_order_key].id
            let status = this.list[current_order_key].releaseStatus
            switch (item.type) {
                case 'detail':
                    uni.navigateTo({
                        url: `/pages/detail/index?id=${id}&type=${item.type}`
                    })
                    break;
                case 'onVerifyBuyer':
                    uni.navigateTo({
                        url: `/pages/verify/buyer?id=${id}`
                    })
                    break;
                case 'onVerifySeller':
                    uni.navigateTo({
                        url: `/pages/verify/seller?id=${id}`
                    })
                    break;
                case 'updateEnable':
                    this.updateEnable(id,status)
                    break;
                case 'handleDelete':
                    this.handleDelete(id)
                    break;

            }

        },
        updateEnable(id,status){
            const param =
                status == 1
                    ? {
                        msg: "下架成功",
                        value: false,
                        id: id
                    }
                    : {
                        msg: "上架成功",
                        value: true,
                        id: id
                    };
            auctionSpecialUpdateStatus(param).then(res => {
                this.page =1
                this.getList();

                setTimeout(() => {
                    uni.showToast({
                        title: param.msg,
                        icon: "none"
                    });

                }, 500)

            })
        },
        handleDelete(id){
            scheduleDelete(id).then(res => {
                this.page =1
                this.getList();
                setTimeout(() => {
                    uni.showToast({
                        title: '删除成功！',
                        icon: "none"
                    });

                }, 500)
            })
        },
        scheduleFilter(value) {
            if (value == '0') {
                return "待发布";
            }
            if (value == '1') {
                return "已上架";
            }
            if (value == '2') {
                return "已过期";
            }
            if (value == '3') {
                return "已下架";
            }
            if (value == '4') {
                return "已完成";
            }
        }
    }
}
</script>

<style lang="scss">
.container {

    background: transparent;
}
.btn-box {
    padding: 0  20rpx;
    box-shadow: 0px 1px 8px 0px rgba(22, 119, 255, 0.1);
    border-radius: 10rpx;
    background: #FFFFFF;
    display: flex;
    align-items: center;
    .btn{
        flex: none;
        width: 100%;
        font-size: 28rpx;

    }
}
.serch-box {

    padding: 20rpx 30rpx;
    box-shadow: 0px 1px 8px 0px rgba(22, 119, 255, 0.1);
    border-radius: 0px 0px 10rpx 10rpx;
    background: #FFFFFF;
}
.condition-box {
    display: flex;
    align-items: center;

    .search-box {
        flex: auto;
        position: relative;

        .uni-input {
            font-size: 14px;
            color: #333;
            height: 88rpx;
            line-height: 66rpx;

            border-radius: 12rpx;
            padding-left: 42px;
            padding-right: 10px;
            background: #F3F3F3;
        }

        .icon {
            position: absolute;
            left: 10px;
            top: 10px;
            width: 48rpx;
            height: 48rpx;
            z-index: 1;
        }
    }

    .screen-box {
        flex: none;
        height: 100%;
        display: flex;
        align-items: center;
        margin-left: 30rpx;

        .text {
            font-size: 28rpx;
            color: #99A0AF;
        }

        .image {
            width: 48rpx;
            height: 48rpx;
            margin-left: 5px;
        }
    }
}
.list-box {
    background: #FFFFFF;
    box-shadow: 0px 1px 8px 0px rgba(22, 119, 255, 0.08);
    margin: 30rpx 30rpx 0 30rpx;
    padding: 20rpx 30rpx;
    border: 1rpx solid #D5E2F3;
    position: relative;

    .order-code {
        height: 68rpx;
        display: flex;
        justify-content: space-between;
        align-items: center;

        .code {
            font-size: 28rpx;
            color: #B60001;
        }
    }

    .content-detail {
        display: flex;
        justify-content: space-between;
        align-items: center;

        padding: 10rpx 0;

        .left {
            display: flex;
            flex-direction: column;

            .lable {
                margin: 10rpx 0;
                font-size: 28rpx;
                color: #99A0AF;

                .value {
                    color: #222;
                }

            }
        }

        .right {
            font-size: 12px;
            color: #B60001;

            .price {
                font-size: 40rpx;
                color: #B60001;
            }
        }
    }

    .flag-box {
        height: 86rpx;
        display: flex;
        align-items: center;

        .text {
            font-size: 28rpx;
            color: #99A0AF;
        }

        .flag {
            height: 44rpx;
            line-height: 44rpx;
            text-align: center;
            border-radius: 2rpx;
            font-size: 12px;
            box-sizing: border-box;
            margin-left: 20rpx;
            padding: 0 20rpx;
            &.unPay {
                color: #CE963D;
                background-color: #FFFFFF;
                border: 1rpx solid #E8CDA3;
            }

            &.success {
                border: 1px solid #33B345;
                color: #33B345;
            }
            &.danger{
                border: 1px solid #B60001;
                color: #B60001;
            }
            &.warning{
                border: 1px solid #FFB400;
                color: #FFB400;
            }
            &.info{
                border: 1px solid #99A0AF;
                color: #99A0AF;
            }
            &.primary{
                border: 1px solid #007AFF;
                color: #007AFF;
            }
        }
    }

    .flag:nth-child(1) {
        margin-left: 0;
    }

    .handle-box {
        position: absolute;
        top: 0;
        right: 30rpx;


        .handle {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 88rpx;
            font-size: 0;

            .icon {
                width: 14px;
                height: 14px;
                line-height: 16px;
                text-align: center;
            }

            .text {
                font-size: 28rpx;
                color: #FFFFFF;
                margin-left: 4px;
            }
        }
    }
}
.handle-list {
    background-color: #fff;

    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
    max-height: 70vh;
    // min-height: 40vh;
    overflow-y: auto;

    .handle {
        height: 88rpx;
        line-height: 88rpx;
        text-align: center;
        font-size: 28rpx;
        color: #333;
        border-bottom: 1rpx solid #F6F7F8;

        &.cancel {
            color: #B60001;
        }
    }
}
</style>
