<template>
    <div class="content">
        <div class="header">
            <u-navbar
                back-icon-name="search"
                back-icon-size="46"
                back-text="搜索"
                :background="{ backgroundColor: '#ffcb57' }"
                :border-bottom="false"
                title="订单管理"
                title-color="#472d21"
                :custom-back="handleSearch"
            ></u-navbar>
        </div>
        <view class="wrap">
            <view class="u-tabs-box">
                <view class="pl">
                    <u-tabs-swiper
                        activeColor="#ffcb57"
                        font-size="26"
                        ref="tabs"
                        :list="list"
                        :current="current"
                        @change="change"
                    ></u-tabs-swiper>
                </view>
            </view>
            <swiper
                class="swiper-box"
                :current="swiperCurrent"
                @transition="transition"
                @animationfinish="animationfinish"
            >
                <swiper-item class="swiper-item" v-for="(tablist, index) in tabLists" :key="index">
                    <scroll-view scroll-y style="height: 100%; width: 100%">
                        <view class="page-box">
                            <view class="u-flex u-row-center u-margin-top-24" v-show="showLoading">
                                <u-loading mode="flower"></u-loading>
                            </view>
                            <u-empty
                                text="没有找到您的订单"
                                mode="list"
                                margin-top="80"
                                v-if="tablist.length === 0 && !showLoading"
                            ></u-empty>
                            <u-card
                                v-for="item in tablist"
                                :key="item.Id"
                                @head-click="seeDetail(item)"
                                @body-click="seeDetail(item)"
                                :show-foot="
                                    ['DGY', 'DYY', 'DFW', 'DYS', 'DPJ', 'TKZ', 'YWC', 'YTK', 'DBJ'].includes(
                                        item.FStatus
                                    ) ||
                                    (item.FStatus === 'DJS' && item.FPayWay === '2')
                                "
                            >
                                <view slot="head" class="orderHd">
                                    <div class="addres">
                                        <view class="left">
                                            <u-image
                                                src="/static/images/common/local.png"
                                                height="36rpx"
                                                width="36rpx"
                                            ></u-image>
                                            <view class="contact">
                                                <view class="line"
                                                    >{{ item.FCustomerName }}，{{ item.FCustomerPhone }}</view
                                                >
                                                <view class="line">
                                                    {{ `${item.FPROVINCE}${item.FCity}${item.FCOUNTY}${item.FAdress}` }}
                                                </view>
                                            </view>
                                        </view>
                                        <view class="right">
                                            <view class="status">{{ item.FStatus | formatStatus }}</view>
                                        </view>
                                    </div>
                                    <view class="process">
                                        <u-tag
                                            v-if="['DGY', 'DBJ'].includes(item.FStatus) && item.FPayWay != 2"
                                            text="匹配师傅中"
                                            mode="plain"
                                            shape="circle"
                                            type="info"
                                        />
                                    </view>
                                    <view class="extraNote">
                                        <view class="title">备注信息</view>
                                        <view class="content">{{ item.FCustomerNote }}</view>
                                    </view>
                                </view>
                                <view slot="body" class="orderBd">
                                    <view class="item" v-for="good in item.CustOrderGoodsMould" :key="good.Id">
                                        <view class="left">
                                            <view class="pre-box">
                                                <u-image
                                                    :width="160"
                                                    :height="160"
                                                    v-for="(img, j) in good.OrderBanners"
                                                    :key="j"
                                                    :src="img"
                                                    border-radius="5"
                                                ></u-image>
                                            </view>
                                        </view>
                                        <view class="content">
                                            <view class="title u-line-2">
                                                {{
                                                    good.FGoodsType && good.FGoodsType.Name
                                                        ? good.FGoodsType.Name[0].Value
                                                        : '无'
                                                }}
                                            </view>
                                            <view class="type">
                                                {{
                                                    good.FServiceTypeID && good.FServiceTypeID.Name
                                                        ? good.FServiceTypeID.Name[0].Value
                                                        : '无'
                                                }}
                                            </view>
                                            <!-- <view
                                                class="delivery-time"
                                            >规格：{{ good.FGoodsSpecs || '无' }}</view> -->
                                        </view>
                                        <view class="right">
                                            <view class="number">{{ `x${good.FGoodsQty}` }}</view>
                                        </view>
                                    </view>
                                    <view class="workmans">
                                        <span class="mtitle">订单编号：</span>
                                        <span class="number"
                                            >{{ item.BillNo
                                            }}<u-button
                                                size="mini"
                                                :custom-style="{ marginLeft: '8rpx' }"
                                                @click="copyBtn(item.BillNo)"
                                                >复制</u-button
                                            ></span
                                        >
                                    </view>
                                    <view class="workmans">
                                        <span class="mtitle">下单时间：</span>
                                        <span class="number">{{ item.FDatetime }}</span>
                                    </view>
                                    <view class="workmans">
                                        <span class="mtitle">付费方式：</span>
                                        <span class="number">{{ item.FPayWay | formatPayway }}</span>
                                    </view>
                                    <view class="workmans" v-if="!['1', '3'].includes(String(item.FPayWay))">
                                        <span class="mtitle">报价师傅：</span>
                                        <span class="number">{{ item.FSFQuotedPriceEntity.length }}人报价</span>
                                    </view>
                                </view>
                                <view slot="foot" class="orderFt">
                                    <view class="actions">
                                        <!-- <u-button
                                            size="mini"
                                            hover-class="defaultBtnhover"
                                            v-if="['YQX'].includes(item.FStatus)"
                                            @click="changeToDGY(item)"
                                        >xxx</u-button>-->
                                        <u-button
                                            type="success"
                                            size="mini"
                                            hover-class="defaultBtnhover"
                                            v-if="['DGY', 'DBJ'].includes(item.FStatus) && item.FPayWay !== '1'"
                                            @click="cancelOrder(item)"
                                            >取消订单</u-button
                                        >
                                        <!-- <u-button
                                            type="success"
                                            size="mini"
                                            hover-class="defaultBtnhover"
                                            v-if="['DGY', 'DYY'].includes(item.FStatus)"
                                            @click="payAgain(item)"
                                            >再次下单</u-button
                                        > -->
                                        <u-button
                                            type="success"
                                            size="mini"
                                            hover-class="defaultBtnhover"
                                            @click="hireMan(item)"
                                            v-if="['DGY'].includes(item.FStatus) && item.FPayWay == 2"
                                            >雇佣师傅</u-button
                                        >
                                        <u-button
                                            type="success"
                                            size="mini"
                                            hover-class="defaultBtnhover"
                                            @click="changeWorker(item)"
                                            v-if="['DYY'].includes(item.FStatus)"
                                            >换师傅</u-button
                                        >
                                        <u-button
                                            type="success"
                                            size="mini"
                                            hover-class="defaultBtnhover"
                                            v-if="
                                                ['DFW'].includes(item.FStatus) ||
                                                (['DGY', 'DBJ'].includes(item.FStatus) && item.FPayWay === '1')
                                            "
                                            @click="handleRefund(item)"
                                            >申请退款</u-button
                                        >
                                        <u-button
                                            type="success"
                                            size="mini"
                                            hover-class="defaultBtnhover"
                                            v-if="['DYS'].includes(item.FStatus)"
                                            @click="handleShowVerifyCode(item)"
                                            >确认验收</u-button
                                        >
                                        <!-- <u-button
                                            type="success"
                                            size="mini"
                                            hover-class="defaultBtnhover"
                                            v-if="['DPJ', 'TKZ', 'YWC', 'YTK'].includes(item.FStatus)"
                                            >申请售后</u-button
                                        > -->
                                        <u-button
                                            type="success"
                                            size="mini"
                                            hover-class="defaultBtnhover"
                                            v-if="['DJS'].includes(item.FStatus) && item.FPayWay === '2'"
                                            @click="paying(item)"
                                            >结算</u-button
                                        >
                                    </view>
                                </view>
                            </u-card>
                        </view>
                    </scroll-view>
                </swiper-item>
            </swiper>
        </view>
        <u-toast ref="uToast" />
        <u-modal
            title="完工验证码"
            v-model="showVerifyCode"
            :content="verifyCode"
            @confirm="handleAcceptance"
            :content-style="{
                fontSize: '48rpx',
                fontWeight: 600,
                color: '#000',
                letterSpacing: '18rpx',
            }"
            confirm-color="#ffcb57"
        ></u-modal>
    </div>
</template>

<script>
import { mapActions, mapGetters } from 'vuex';
import request from '../../common/service';
export default {
    data() {
        return {
            list: [
                {
                    name: '全部',
                },
                {
                    name: '待报价',
                },
                {
                    name: '待雇佣',
                },
                {
                    name: '待预约',
                },
                {
                    name: '待服务/施工中',
                },
                {
                    name: '待验收',
                },
                {
                    name: '待评价',
                },
                {
                    name: '待结算',
                },
                {
                    name: '已完成',
                },
                {
                    name: '退款中',
                },
                {
                    name: '已退款',
                },
                {
                    name: '已取消',
                },
            ],
            current: 0,
            swiperCurrent: 0,
            tabsHeight: 0,
            dx: 0,
            loadStatus: ['loadmore', 'loadmore', 'loadmore', 'loadmore'],
            tabLists: [[], [], [], [], [], [], [], [], [], [], [], []],
            showLoading: false,
            showVerifyCode: false,
            verifyCode: '',
            currentOrder: null,
        };
    },
    onLoad() {},
    onShow() {
        this.current = this.currentStatus;
        this.swiperCurrent = this.currentStatus;
        this.getOrderList();
    },
    computed: {
        ...mapGetters({
            currentStatus: 'order/currentStatus',
        }),
    },
    filters: {
        formatStatus(value) {
            const status = {
                DBJ: '待报价',
                DGY: '待雇佣',
                DYY: '待预约',
                DFW: '待服务/施工中',
                DYS: '待验收',
                DPJ: '待评价',
                DJS: '待结算',
                YWC: '已完成',
                TKZ: '退款中',
                YTK: '已退款',
                YQX: '已取消',
                YZF: '待确认',
            };
            return status[value];
        },
        formatPayway(value) {
            switch (String(value)) {
                case '1':
                    return '下单支付';
                case '2':
                    return '验收完成支付';
                case '3':
                    return '业主现场支付';
            }
        },
    },
    methods: {
        ...mapActions({
            updateCurrentOrder: 'order/updateCurrentOrder',
            updateCurrentStatus: 'order/updateCurrentStatus',
        }),
        // 页面数据
        getOrderList() {
            const _t = this;
            const { list, current } = this;
            this.showLoading = true;
            request
                .get('/api/Order/SHView', {
                    status: list[current].name === '全部' ? '' : list[current].name,
                })
                .then(async (res) => {
                    const { code, message, result } = res;
                    if (code === 0) {
                        const tempList = Object.values(result).filter((x) => x !== null);
                        for (let i = 0; i < tempList.length; i++) {
                            const subList = tempList[i];
                            for (let j = 0; j < subList.length; j++) {
                                const order = subList[j];
                                for (let k = 0; k < order.CustOrderGoodsMould.length; k++) {
                                    const good = order.CustOrderGoodsMould[k];
                                    good.OrderBanners = [];
                                    const { FGoodsMouldImagesEntity } = good;
                                    for (let l = 0; l < FGoodsMouldImagesEntity.length; l++) {
                                        const imgInfo = FGoodsMouldImagesEntity[l];
                                        const result = await _t.getImageUrl(imgInfo.FGoodsImage);
                                        good.OrderBanners.push(
											result[0].fileurl
                                            // `https://www.jtfw8.com/WXXCX/FileService/${imgInfo.FGoodsImage}.jpg`
                                        );
                                    }
                                }
                            }
                        }
                        this.tabLists[current] =
                            tempList.length > 0
                                ? tempList.reduce((pre, next) => {
                                      return [...pre, ...next];
                                  })
                                : [];
                    } else {
                        this.$refs.uToast.show({
                            title: message,
                        });
                    }
                    this.showLoading = false;
                });
        },
        // tab栏切换
        change(index) {
            this.swiperCurrent = index;
        },
        transition({ detail: { dx } }) {
            this.$refs.tabs.setDx(dx);
        },
        animationfinish({ detail: { current } }) {
            this.$refs.tabs.setFinishCurrent(current);
            this.$refs.tabs.setScrollViewToCenter();
            this.swiperCurrent = current;
            this.current = current;
            this.updateCurrentStatus(current);
            this.getOrderList();
        },
        hireMan(data) {
            this.updateCurrentOrder(data).then(() => {
                this.$u.route('/pages/hire/index');
            });
        },
        async getImageUrl(value) {
            const res = await request.get('/api/UploadAttachments/GetUrl', { fileid: value });
            return res.result;
        },
        seeDetail(data) {
            this.updateCurrentOrder(data).then(() => {
                this.$u.route('/pages/orders/detail/index');
            });
        },
        payAgain(data) {
            this.updateCurrentOrder(data).then(() => {
                this.$u.route('/pages/place/index', { type: 'payAgain' });
            });
        },
        paying(data) {
            this.updateCurrentOrder(data).then(() => {
                this.$u.route('/pages/pay/index');
            });
        },
        handleRefund(data) {
            this.updateCurrentOrder(data).then(() => {
                this.$u.route('/pages/apply-refund/index');
            });
        },
        changeWorker(data) {
            this.updateCurrentOrder(data).then(() => {
                this.$u.route('/pages/change-worker/index');
            });
        },
        cancelOrder(data) {
            request
                .post('/api/Order/save', {
                    Model: {
                        FID: data.Id, //订单内码
                        FStatus: 'YQX', //订单状态
                    },
                })
                .then((res) => {
                    const { code, message } = res;
                    if (code === 0) {
                        this.$refs.uToast.show({
                            title: '取消成功！',
                        });
                    } else {
                        this.$refs.uToast.show({
                            title: message,
                        });
                    }
                });
        },
        changeToDGY(data) {
            request
                .post('/api/Order/save', {
                    Model: {
                        FID: data.Id, //订单内码
                        FStatus: 'DGY', //订单状态
                    },
                })
                .then((res) => {
                    const { code, message } = res;
                    if (code === 0) {
                        this.$refs.uToast.show({
                            title: '取消成功！',
                        });
                    } else {
                        this.$refs.uToast.show({
                            title: message,
                        });
                    }
                });
        },
        handleShowVerifyCode(data) {
            this.currentOrder = data;
            this.verifyCode = data.FFinishCode;
            this.showVerifyCode = true;
        },
        handleAcceptance() {
            this.showVerifyCode = false;
            uni.showLoading({
                title: '提交中',
            });
            request
                .post('/api/Order/CheckAccept', {
                    FID: this.currentOrder.Id,
                    FinishCode: this.currentOrder.FFinishCode,
                })
                .then((res) => {
                    uni.hideLoading();
                    const { code, message } = res;
                    if (code === 0) {
                        this.$refs.uToast.show({
                            title: '已验收',
                        });
                        this.getOrderList();
                    } else {
                        this.$refs.uToast.show({
                            title: message,
                        });
                    }
                });
        },
        handleSearch() {
            this.$u.route('/pages/orders/search/index');
        },
        copyBtn(text) {
            uni.setClipboardData({
                data: text,
            });
        },
    },
    onShareAppMessage(res) {
        if (res.from === 'button') {
            // 来自页面内分享按钮
            console.log(res.target);
        }
        return {
            title: '京台分享更多精彩',
            path: '/pages/index/index',
            imageUrl: '/static/images/share/WechatIMG96.png'
        };
    },
};
</script>

<style lang="scss" scoped>
.content {
    .header {
        background-color: #ffcb57;
    }
    .wrap {
        display: flex;
        flex-direction: column;
        // height: calc(100vh - var(--window-top));
        height: 100vh;
        width: 100%;
        .page-box {
            .orderHd {
                .addres {
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    .left {
                        display: flex;
                        align-items: center;
                        justify-content: flex-start;
                        /deep/.u-image {
                            margin-right: 12rpx;
                            background-color: #fff;
                        }
                        .contact {
                            .line {
                                font-size: 24rpx;
                                color: #262626;
                            }
                        }
                    }
                    .right {
                        flex: 0 0 72rpx;
                        .status {
                            font-size: 24rpx;
                            color: #434343;
                        }
                    }
                }

                .process {
                    margin-top: 24rpx;
                }

                .extraNote {
                    margin-top: 24rpx;
                    border-top: 1px solid #e8e8e8;
                    padding: 24rpx 0 0 0;
                    .title {
                        font-size: 24rpx;
                    }
                    .content {
                        margin: 12rpx 0;
                        font-size: 24rpx;
                    }
                }
            }
            .orderBd {
                .item {
                    position: relative;
                    // display: flex;
                    margin: 20rpx 0 0;
                    border-bottom: 1rpx dashed #d9d9d9;
                    &::last-child {
                        border-bottom: none;
                    }
                    .left {
                        .pre-box {
                            display: flex;
                            align-items: center;
                            justify-content: flex-start;
                            flex-wrap: wrap;
                            /deep/ .u-image {
                                margin-right: 12rpx;
                                margin-bottom: 12rpx;
                            }
                        }
                    }
                    .content {
                        padding: 16rpx 0 24rpx 0;
                        .title {
                            font-size: 28rpx;
                            line-height: 50rpx;
                        }
                        .type {
                            margin: 10rpx 0;
                            font-size: 24rpx;
                            color: $u-tips-color;
                        }
                        .delivery-time {
                            color: #595959;
                            font-size: 24rpx;
                        }
                    }
                    .right {
                        position: absolute;
                        top: 20rpx;
                        right: 20rpx;
                        text-align: right;
                        .decimal {
                            font-size: 24rpx;
                            margin-top: 4rpx;
                        }
                        .number {
                            color: $u-tips-color;
                            font-size: 24rpx;
                        }
                    }
                }
                .workmans {
                    padding: 12rpx 0;
                    .mtitle {
                        font-size: 24rpx;
                        color: #262626;
                    }
                    .number {
                        font-size: 24rpx;
                        font-weight: 600;
                    }
                }
            }
            .orderFt {
                .actions {
                    display: flex;
                    justify-content: flex-end;
                    align-items: center;
                    /deep/.u-btn {
                        margin-left: 6rpx;
                    }
                }
            }
        }
    }
    .swiper-box {
        flex: 1;
    }
    .swiper-item {
        height: 100%;
    }
}
</style>
