<template>
    <view class="container">
        <view class="search-user flex-y-center ">
            <view class="search-content flex-y-center">
                <icon type="search" size="18" />
                <input confirm-type="search" v-model="seTval" @confirm="confirm" @input="getSearch" class="flex-grow-1"
                    type="text" placeholder-style="font-size:26rpx" placeholder="请输入订单编号" />
                <view class="flex-center" style="margin-left: 10rpx;" @click.stop="onDel" v-if="seTval">
                    <icon type="clear" size="18" />
                </view>
            </view>
            <view class="search-btn" @click="search">
                搜索
            </view>
        </view>

        <view class="box-pack-between headerScreen flex-y-center ">
            <view class="flex-y-center flex-grow-1 ft26 header-text">

                <view style="width: 50%;" class="flex-grow-1 flex-center " data-text="1" :class="act_index==1?'act':''"
                    @click="onTopBtnTap(1)">
                    <view class="text-1" style="width: auto; max-width: 300rpx;">
                        {{level_text}}
                    </view>
                    <view class="d3"></view>
                </view>

                <view style="width: 50%;" class="flex-grow-1 flex-center text-1" data-text="2"
                    :class="act_index==2?'act':''" @click="onTopBtnTap(2)">
                    <view class="text-1" style="width: auto; max-width: 300rpx;">
                        {{type_text}}
                    </view>
                    <view class="d3"></view>
                </view>

            </view>
        </view>
        <view class="header-hg200"></view>
        <uni-popup-top ref="popup" type="top" :top="top" :maskClass="maskClass">
            <view class="showpay">
                <block v-if='act_index==1'>
                    <view class="box-li" :class="store_id==0?'active':''" @click="Onlevel(0,'全部')" data-text='全部'>全部
                    </view>
                    <scroll-view scroll-y="true" style="height: 400rpx;">
                        <view class="box-li" v-for="(item,index) of tableTypeList" :key='index'
                            :class="item.id==store_id?'active':''" @click="Onlevel(item.id,item.title)">
                            {{item.title}}
                        </view>
                    </scroll-view>
                </block>
                <block v-if='act_index==2'>
                    <view class="box-li" :class="status==0?'active':''" @click="onStatus(0,'全部')" data-text='全部'>全部
                    </view>
                    <view class="box-li" :class="status==1?'active':''" @click="onStatus(1,'微信')" data-text='微信'>微信
                    </view>
                    <view class="box-li" :class="status==2?'active':''" @click="onStatus(2,'支付宝')" data-text='支付宝'>支付宝
                    </view>
                </block>
            </view>
        </uni-popup-top>
        <no-none v-if='list.length<=0'></no-none>
        <view class="list" v-else>
            <view class="item" style="border: none;" v-for="(item,index) in list" :key="index">
                <view class="box-pack-between">
                    <view class="name box-pack-between flex-grow-1">
                        <text>{{item.order_no}}</text>
                        <view class="flex-center ft28" style="padding-right: 20rpx;color: #247EFF;">
                            {{item.pay_type==1?'微信':item.pay_type==2?'支付宝':'银联二维码'}}
                        </view>
                    </view>
                </view>
                <view class="content">
                    <view class="flex flex-y-center">
                        <view class="cell flex flex-y-center">
                            <view class="title">支付金额：</view>
                            <view class="desc">{{item.pay_price}}</view>
                        </view>
                    </view>
                    <view class="flex flex-y-center" style="margin-top: 16rpx;">
                        <view class="cell flex flex-y-center " style="width:100%">
                            <view class="title">退款金额：</view>
                            <view class="desc">{{item.refund_price}}</view>
                        </view>
                    </view>
                    <view class="flex flex-y-center" style="margin-top: 16rpx;">
                        <view class="cell flex flex-y-center " style="width:100%">
                            <view class="title">所属门店：</view>
                            <view class="desc">{{item.title}}</view>
                        </view>
                    </view>
                    <view class="flex flex-y-center" style="margin-top: 16rpx;">
                        <view class="cell flex flex-y-center " style="width:100%">
                            <view class="title">退款时间：</view>
                            <view class="desc">{{item.pay_time}}</view>
                        </view>
                    </view>
                    <view class="flex flex-y-center" style="margin-top: 16rpx;">
                        <view class="cell flex flex-y-center " style="width:100%">
                            <view class="title"> 下单时间：</view>
                            <view class="desc">{{item.pay_time}}</view>
                        </view>
                    </view>
                </view>
            </view>
        </view>
    </view>
</template>
<script>
    import uniPopupTop from '@/components/zx-uni-popup/uni-popup-top.vue'
    export default {
        components: {
            uniPopupTop
        },
        data() {
            return {
                act_index: 1,
                type_text: '支付方式',
                level_text: '门店',
                store_id: "",
                admin_id: '',
                list: [],
                page: 1,
                is_bottom: false,
                keywords: "",
                status: 0,
                type: 2,
                tableTypeList: [],
                top: "200rpx",
                maskClass: {
                    'position': 'fixed',
                    'bottom': 0,
                    'top': "100rpx",
                    'left': 0,
                    'right': 0,
                    'backgroundColor': 'rgba(0, 0, 0, 0.4)'
                },
            }
        },

        onLoad(e) {
            this.type = e.type || 2;
            this.store_id = uni.getStorageSync("store_id");
            this.admin_id = uni.getStorageSync("admin_id");
            this.shop_store_index();
        },

        onShow() {
            this.getData(1)
        },

        onReachBottom() {
            if (!this.is_bottom) {
                this.getData(this.page + 1)
            }
        },

        methods: {

            shop_store_index() {
                let storeinfo = uni.getStorageSync("storeinfo");
                this.request({
                    url: 'Smdcshop/shop_store_index',
                    data: {
                        admin_id: this.admin_id,
                    }
                }).then(res => {
                    if (res.code == 200) {
                        if (res.data.length > 0) {
                            this.tableTypeList = res.data;
                        } else {

                            this.tableTypeList = [{
                                title: storeinfo.title,
                                id: storeinfo.id,
                            }];

                        }
                    }
                })
            },

            onStatus(e, text) {
                this.status = e;
                this.type_text = text;
                this.list = [];
                this.getData(1);
                this.$refs.popup.close();
            },


            Onlevel(e, text) {
                this.store_id = e;
                this.level_text = text;
                this.list = [];
                this.getData(1);
                this.$refs.popup.close();
            },

            getSearch(e) {
                if (!e.detail.value) {
                    this.page = 1;
                    this.list = [];
                    this.keywords = "";
                    this.getData(1);
                }
                this.keywords = e.detail.value;
            },

            onDel() {
                this.seTval = '';
                this.page = 1;
                this.list = [];
                this.keywords = "";
                this.getData(1);
            },

            confirm(e) {
                this.page = 1;
                this.list = [];
                this.keywords = e.detail.value;
                this.getData(1);
            },

            search(e) {
                this.page = 1;
                this.list = [];
                this.getData(1);
            },

            onTopBtnTap(e) {
                this.act_index = e;
                this.$refs.popup.open();
            },

            getData(page) {
                if (page == 1) {
                    this.list = []
                    this.page = 1
                    this.is_bottom = false
                }
                this.request({
                    url: 'Smdcshop/refundLog',
                    data: {
                        page,
                        limit: 10,
                        pay_type: this.status,
                        keywords: this.keywords,
                        admin_id: this.admin_id,
                        store_id: this.store_id
                    }
                }).then(res => {
                    if (res.code == 200 && res.data.length) {
                        this.list = this.list.concat(res.data)
                        this.page = page
                    } else {
                        this.is_bottom = true
                    }
                })
            }
        }
    }
</script>

<style>
    @import url("../static/css/common.css");

    page {
        background-color: #F4F5F7;
    }

    .list {
        padding: 10rpx 25rpx;
    }

    .list .item {
        border-radius: 8rpx;
        overflow: hidden;
        padding-left: 30rpx;
        border-left: 8rpx solid #247EFF;
        background-color: #fff;
        margin-bottom: 30rpx;
    }

    .list .item .name {
        height: 80rpx;
        border-bottom: 1rpx solid #f5f5f5;
        font-size: 30rpx;
        line-height: 80rpx;
        font-weight: bold;
    }

    .list .item .content {
        padding: 20rpx 0 24rpx;
    }

    .list .item .content .cell {
        /* flex: none; */
        /* width: 50%; */
        box-sizing: border-box;
        padding-right: 30rpx;
        font-size: 26rpx;
        line-height: 37rpx;
        color: #666;
    }

    .list .item .content .cell .title {
        color: #99A0AD;
    }

    .headerScreen {
        height: 100rpx;
        position: fixed;
        top: 100rpx;
        width: 100%;
        z-index: 999;
        background: #fff;
        border-bottom: 1rpx solid #F1F1F1;
    }

    .header-hg200 {
        height: 210rpx;
    }

    .header-text {
        text-align: center;
    }

    .d3 {
        width: 0;
        height: 0;
        border-width: 12rpx;
        border-style: solid;
        border-color: #000 transparent transparent transparent;
        margin-top: 14rpx;
        margin-left: 6rpx;
    }

    .showpay {
        width: 100%;
        z-index: 10;
        background: #FFFFFF;
    }

    .search-user {
        z-index: 999;
        position: fixed;
        left: 0;
        width: 100%;
        height: 100rpx;
        background: #FFFFFF;
        padding-left: 15rpx;
        margin: 0;
    }

    .search-user .search-content {
        width: 83%;
        height: 70rpx;
        background: #F1F1F1;
        border-radius: 100rpx;
        padding: 0 20rpx;

    }

    .search-user .search-content icon {
        margin-right: 10rpx;
    }

    .search-user .search-btn {
        margin-left: 20rpx;
        font-size: 28rpx;
    }

    .box-li {
        background-color: #fff;
        text-align: center;
        border-bottom: 1rpx solid #f1f1f1;
        height: 80rpx;
        line-height: 80rpx;
        font-size: 26rpx;
    }

    page .active {
        color: #007AFF;
    }
</style>
