<template>
    <div class="content">
        <div class="header">
            <u-navbar
                :background="{ backgroundColor: '#ffcb57' }"
                :border-bottom="false"
                title="搜索"
                title-color="#472d21"
            ></u-navbar>
        </div>
        <view class="wrap">
            <view class="search">
                <u-search
                    placeholder="客户姓名/手机号/订单号"
                    shape="square"
                    bg-color="#ffffff"
                    v-model="searchText"
                    @search="handleSearch"
                    :disabled="showLoading"
                    @custom="handleSearch"
                ></u-search>
            </view>
            <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 mode="search" 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">
                            <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>
                        </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 }}</span>
                            </view>
                            <view class="workmans">
                                <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
                                    size="mini"
                                    hover-class="defaultBtnhover"
                                    v-if="['DGY', 'DBJ'].includes(item.FStatus) && item.FPayWay !== '1'"
                                    @click="cancelOrder(item)"
                                    >取消订单</u-button
                                >
                                <u-button
                                    size="mini"
                                    hover-class="defaultBtnhover"
                                    v-if="['DGY', 'DYY'].includes(item.FStatus)"
                                    @click="payAgain(item)"
                                    >再次下单</u-button
                                >
                                <u-button
                                    size="mini"
                                    hover-class="defaultBtnhover"
                                    @click="hireMan(item)"
                                    v-if="['DGY'].includes(item.FStatus)"
                                    >雇佣师傅</u-button
                                >
                                <u-button
                                    size="mini"
                                    hover-class="defaultBtnhover"
                                    @click="changeWorker(item)"
                                    v-if="['DYY'].includes(item.FStatus)"
                                    >换师傅</u-button
                                >
                                <u-button
                                    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
                                    size="mini"
                                    hover-class="defaultBtnhover"
                                    v-if="['DYS'].includes(item.FStatus)"
                                    @click="handleShowVerifyCode(item)"
                                    >确认验收</u-button
                                >
                                <!-- <u-button
                                    size="mini"
                                    hover-class="defaultBtnhover"
                                    v-if="['DPJ', 'TKZ', 'YWC', 'YTK'].includes(item.FStatus)"
                                    >申请售后</u-button
                                > -->
                                <u-button
                                    size="mini"
                                    hover-class="defaultBtnhover"
                                    v-if="['DJS'].includes(item.FStatus) && item.FPayWay === '2'"
                                    @click="paying(item)"
                                    >结算</u-button
                                >
                            </view>
                        </view>
                    </u-card>
                    <!-- <u-loadmore :status="loadStatus[0]" bgcolor="#f2f2f2"></u-loadmore> -->
                </view>
            </scroll-view>
        </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 } from 'vuex';
import request from '../../../common/service';
export default {
    data() {
        return {
            searchText: '',
            showLoading: false,
            tablist: [],
            showVerifyCode: false,
            verifyCode: '',
            currentOrder: null,
            list: [],
        };
    },
    onLoad() {
        this.getOrderList();
    },
    computed: {},
    filters: {
        formatStatus(value) {
            const status = {
                DBJ: '待报价',
                DGY: '待雇佣',
                DYY: '待预约',
                DFW: '待服务/施工中',
                DYS: '待验收',
                DPJ: '待评价',
                DJS: '待结算',
                YWC: '已完成',
                TKZ: '退款中',
                YTK: '已退款',
                YQX: '已取消',
            };
            return status[value];
        },
    },
    methods: {
        ...mapActions({
            updateCurrentOrder: 'order/updateCurrentOrder',
        }),
        getOrderList() {
            const _t = this;
            const { list, current } = this;
            this.showLoading = true;
            request
                .get('/api/Order/SHView', {
                    status: '',
                })
                .then(async (res) => {
                    const { code, message, result } = res;
                    if (code === 0) {
                        const resList = Object.values(result).filter((x) => x !== null);
                        const arr = [];
                        resList.forEach((subArr) => {
                            arr.push(...subArr);
                        });
                        for (let j = 0; j < arr.length; j++) {
                            const order = arr[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(
                                        `https://www.jtfw8.com/WXXCX/FileService/${imgInfo.FGoodsImage}.jpg`
                                    );
                                }
                            }
                        }
                        this.list = arr;
                    } else {
                        this.$refs.uToast.show({
                            title: message,
                        });
                    }
                    this.showLoading = false;
                });
        },
        handleSearch() {
            this.showLoading = true;
            this.tablist = this.list.filter((x) => {
                if (
                    x.FCustomerName.includes(this.searchText) ||
                    x.FCustomerPhone.includes(this.searchText) ||
                    x.BillNo.includes(this.searchText)
                ) {
                    return true;
                }
            });
            this.showLoading = false;
        },
        seeDetail(data) {
            this.updateCurrentOrder(data).then(() => {
                this.$u.route('/pages/orders/detail/index');
            });
        },
        hireMan(data) {
            this.updateCurrentOrder(data).then(() => {
                this.$u.route('/pages/hire/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,
                        });
                    }
                });
        },
        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,
                        });
                    }
                });
        },
    },
    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));
        width: 100%;
        .search {
            padding: 30rpx 16rpx;
        }
        .page-box {
            .orderHd {
                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;
                    }
                }
            }
            .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;
                    }
                }
            }
        }
    }
}
</style>
