<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.buyerName" 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.code}}</text>
                    </view>
                    <view class="lable">买家编码：<text
                        class="value">{{item.buyerCode}}</text>
                    </view>
                    <view class="lable">买家名称：<text
                        class="value">{{item.buyerName}}</text>
                    </view>
                    <view class="lable">保证金缴纳金额：<text
                        class="value">{{item.marginAmount}}</text>
                    </view>
                    <view class="lable">购买商品数量：<text
                        class="value">{{item.orderedQuantity}}</text>
                    </view>

                    <view class="lable">缴纳状态：
                        <view :class="
                        item.marginStatus === 'auditPass'
                        ? 'success flag'
                        : item.marginStatus === 'waitAudit'
                        ? 'danger flag'
                        : item.marginStatus === 'notPass'
                        ? 'warning flag'
                        : 'info flag'
                        ">
                            {{item.marginStatusName}}

                        </view>
                    </view>

                </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 {
    getCentralizedPurchasingRegisterList,
    getSchedule
} from '@/config/api.js'
import {web} from "@/utils/util";
let current_order_key = null;
export default {
    data() {
        return {
            query:{
                buyerName: '',
                id: '',
            },
            icon: web('icon_search.png'),
            list: [],
            total: 0,
            page: 1,
            limit: 10,
            isNoData: false,
            listStatus: 'more',
            loading: false,
            handleList:[],
            statusOptions: [
                {
                    key: "waitAudit",
                    value: "待审核"
                },
                {
                    key: "auditPass",
                    value: "审核通过"
                },
                {
                    key: "notPass",
                    value: "审核拒绝"
                }
            ],

        };
    },
    onLoad() {
        this.query.id = this.$route.query.id
        this.getList()
    },
    onShow(){
        // 如果是提交状态返回isRefresh=1，才刷新页面，从详情过来无需刷新
        let pages = getCurrentPages();
        let currPage = pages[pages.length - 1];
        if(currPage.__data__.isRefresh){
            // 重新获取数据
            this.getList(true)//获取列表数据
            // 每一次需要清除，否则会参数会缓存
            currPage.__data__.isRefresh=false
        }
    },
    methods: {
        getList() {
            getCentralizedPurchasingRegisterList({},
                {
                    params: {
                        page: this.page,
                        rows: this.limit,
                        title:this.query.buyerName,
                        scheduleId:this.query.id
                    }
                }
            ).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'
            }]
            if(row.marginStatus == 'waitAudit'){
                handleList.push(
                    {
                        name:'定金审核',
                        type: 'waitAudit'
                    },
                )
            }
            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){
            console.log(item)
            this.$refs.handPopup.close()
            let _this = this;
            let id = this.list[current_order_key].id
            uni.navigateTo({
                url: `/pages/marginDetail/index?id=${id}&type=${item.type}`
            })

        },
    }
}
</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;
                }
                .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;
                    display: inline-block;
                    &.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;
                    }
                }
            }
        }

        .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;
            }

            &.payed {
                color: #33B345;
                background-color: #FFFFFF;
                border: 1rpx solid #83D18E;
            }

            &.partPay {
                color: #B60001;
                background-color: #E6E7EB;
                border: 1rpx solid #B60001;
            }
        }
    }

    .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>
