<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="mstatus">
                <view class="title">{{ currentOrder.FStatus | formatStatus }}</view>
            </view>
            <u-card :show-head="false" margin="-130rpx 30rpx 15rpx 30rpx">
                <view slot="body">
                    <view class="address">
                        <view class="icon">
                            <u-icon name="map-fill" size="50" color="#ffcb57"></u-icon>
                        </view>
                        <view class="content">
                            <view class="line">
                                <span class="name">{{ currentOrder.FCustomerName }}</span>
                                <span class="phone">{{ currentOrder.FCustomerPhone }}</span>
                                <u-button size="mini" @click="handlePhoneCall" :custom-style="{ marginLeft: '16rpx' }"
                                    ><u-icon name="phone-fill" :custom-style="{ marginRight: '8rpx' }"></u-icon
                                    >拨打电话</u-button
                                >
                            </view>
                            <view class="line" @longpress.stop="copyAddress">{{
                                `${currentOrder.FPROVINCE}${currentOrder.FCity}${currentOrder.FCOUNTY}${currentOrder.FAdress}`
                            }}</view>
                        </view>
                    </view>
                    <view class="process">
                        <u-tag
                            v-if="['DGY', 'DBJ'].includes(currentOrder.FStatus) && currentOrder.FPayWay != 2"
                            text="匹配师傅中"
                            mode="plain"
                            shape="circle"
                            type="info"
                        />
                    </view>
                    <view class="extraNote">
                        <view class="title">备注信息</view>
                        <view class="content">{{ currentOrder.FCustomerNote }}</view>
                    </view>
                    <!-- <view class="action">
                        <u-button size="mini">修改客户信息</u-button>
                    </view>-->
                </view>
            </u-card>
            <u-card title="商品信息" margin="20rpx 30rpx 15rpx 30rpx">
                <view slot="body">
                    <view class="gooditem" v-for="good in currentOrder.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"
                                    @click="previewImg(img)"
                                ></u-image>
                            </view>
                        </view>
                        <view class="content">
                            <view class="title u-line-2">{{ `${good.FGoodsType.Name[0].Value}` }}</view>
                            <view class="type">{{ good.FServiceTypeID.Name[0].Value }}</view>
                            <view class="type">{{ good.FTools }}</view>
                            <!-- <view class="delivery-time">规格：{{good.FGoodsSpecs || '无'}}</view> -->
                        </view>
                        <view class="right">
                            <view class="number">{{ `x${good.FGoodsQty}` }}</view>
                        </view>
                    </view>
                </view>
                <view slot="foot">
                    <view class="total">
                        <span>共{{ currentOrder.CustOrderGoodsMould | computedCount }}件商品</span>
                        <!-- <span class="amount">合计：¥ 20</span> -->
                    </view>
                </view>
            </u-card>
            <u-card title="订单评价" margin="20rpx 30rpx 15rpx 30rpx" v-if="currentOrder.FIsEvaluate">
                <view slot="body">
                    <view class="paydetail">
                        <view class="line">
                            <view class="title">客户评价：</view>
                            <view class="content">{{ currentOrder.FEvaluate === 'HP' ? '好评' : '差评' }}</view>
                        </view>
                        <view class="line">
                            <view class="title">详细评价：</view>
                            <view class="content">{{ currentOrder.FEvaluateDetail }}</view>
                        </view>
                    </view>
                </view>
            </u-card>
            <u-card
                title="完工效果图"
                margin="20rpx 30rpx 15rpx 30rpx"
                v-if="currentOrder.FFinishImagesEntity.length > 0"
            >
                <view slot="body">
                    <view class="ywg-imgs">
                        <u-image
                            :width="160"
                            :height="160"
                            v-for="(img, j) in ywgImgs"
                            :key="j"
                            :src="img"
                            border-radius="5"
                            @click="previewImg(img)"
                        ></u-image>
                    </view>
                </view>
            </u-card>
            <u-card :show-head="false" margin="20rpx 30rpx 15rpx 30rpx">
                <view slot="body">
                    <view class="paydetail">
                        <view class="line">
                            <view class="title">订单编号：</view>
                            <view class="content"
                                >{{ currentOrder.BillNo
                                }}<u-button
                                    size="mini"
                                    :custom-style="{ marginLeft: '8rpx' }"
                                    @click="copyBtn(currentOrder.BillNo)"
                                    >复制</u-button
                                ></view
                            >
                        </view>
                        <view class="line">
                            <view class="title">下单时间：</view>
                            <view class="content">{{ currentOrder.FCreateDate }}</view>
                        </view>
                        <view class="line">
                            <view class="title">付费方式：</view>
                            <view class="content">{{ currentOrder.FPayWay | formatPayway }}</view>
                        </view>
                        <!-- 应付信息费，已付信息费，平台应付费用，现场应收费用 -->
                        <view class="line">
                            <view class="title">已付费用：</view>
                            <view class="content">{{ currentOrder.FSHSAmount }}元</view>
                        </view>
                        <view class="line">
                            <view class="title">应付费用：</view>
                            <view class="content">{{ currentOrder.FSHAmount }}元</view>
                        </view>
                        <view class="line" v-if="currentOrder.FAppointmentDateTime">
                            <view class="title">预约上门时间：</view>
                            <view class="content">{{ currentOrder.FAppointmentDateTime }}元</view>
                        </view>
                        <!-- <view class="line">
                            <view class="title">现场用户应付：</view>
                            <view class="content">{{ currentOrder.FSFYAmount }}元</view>
                        </view> -->
                        <view class="line">
                            <view class="title">制单人：</view>
                            <view class="content">{{ currentOrder.FDocumentMakerName || '无' }}</view>
                        </view>
                        <!-- <view class="line">
                            <view class="title">付款时间：</view>
                            <view class="content">2020-07-10 23:12:00</view>
                        </view>-->
                    </view>
                </view>
            </u-card>
            <view
                class="actions"
                v-if="
                    ['DGY', 'DYY', 'DFW', 'DYS', 'DPJ', 'TKZ', 'YWC', 'YTK', 'DBJ'].includes(currentOrder.FStatus) ||
                    (currentOrder.FStatus === 'DJS' && currentOrder.FPayWay === '2')
                "
            >
                <u-button
                    type="success"
                    size="mini"
                    hover-class="defaultBtnhover"
                    v-if="['DGY', 'DBJ'].includes(currentOrder.FStatus) && currentOrder.FPayWay !== '1'"
                    >取消订单</u-button
                >
                <!-- <u-button type="success" size="mini" hover-class="defaultBtnhover" v-if="['DGY', 'DYY'].includes(currentOrder.FStatus)"
                    >再次下单</u-button
                > -->
                <u-button
                    type="success"
                    size="mini"
                    hover-class="defaultBtnhover"
                    @click="hireMan"
                    v-if="['DGY'].includes(currentOrder.FStatus) && currentOrder.FPayWay == 2"
                    >雇佣师傅</u-button
                >
                <u-button
                    type="success"
                    size="mini"
                    hover-class="defaultBtnhover"
                    @click="changeWorker"
                    v-if="['DYY'].includes(currentOrder.FStatus)"
                    >换师傅</u-button
                >
                <u-button
                    type="success"
                    size="mini"
                    hover-class="defaultBtnhover"
                    v-if="
                        ['DFW'].includes(currentOrder.FStatus) ||
                        (['DGY', 'DBJ'].includes(currentOrder.FStatus) && currentOrder.FPayWay === '1')
                    "
                    @click="handleRefund"
                    >申请退款</u-button
                >
                <u-button
                    type="success"
                    size="mini"
                    hover-class="defaultBtnhover"
                    v-if="['DYS'].includes(currentOrder.FStatus)"
                    @click="() => (this.showVerifyCode = true)"
                    >确认验收</u-button
                >
                <!-- <u-button
                    type="success"
                    size="mini"
                    hover-class="defaultBtnhover"
                    v-if="['DPJ', 'TKZ', 'YWC', 'YTK'].includes(currentOrder.FStatus)"
                    >申请售后</u-button
                > -->
                <u-button
                    type="success"
                    size="mini"
                    hover-class="defaultBtnhover"
                    v-if="['DJS'].includes(currentOrder.FStatus) && currentOrder.FPayWay === '2'"
                    @click="paying"
                    >结算</u-button
                >
            </view>
            <u-card
                :show-head="false"
                margin="20rpx 30rpx 15rpx 30rpx"
                padding="0"
                :body-style="{ backgroundColor: '#f4f4f5' }"
                v-if="['DBJ','DGY'].includes(currentOrder.FStatus) && currentOrder.FPayWay === '2'"
            >
                <view slot="body">
                    <u-alert-tips
                        type="warning"
                        title="温馨提示"
                        description="预先支付费用，享受VIP人工专属客服跟单服务，保质保量省心省时"
                    ></u-alert-tips>
                    <u-button
                        type="primary"
                        :custom-style="{ margin: '24rpx 0 0 0' }"
                        hover-class="defaultBtnhover"
                        @click="handlePay"
                        >立即支付</u-button
                    >
                </view>
            </u-card>
            <view class="mc-btn">
                <u-button
                    :custom-style="{ margin: '16rpx 30rpx', backgroundColor: '#ffcb57', color: '#472d21' }"
                    hover-class="defaultBtnhover"
                    open-type="contact"
                    >联系客服</u-button
                >
            </view>
        </view>
        <u-modal v-model="showAcceptanceTips" content="已验收！" confirm-color="#ffcb57"></u-modal>
        <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>
        <u-modal
            v-model="showModal"
            content="您的余额不足，请充值"
            confirm-text="去充值"
            confirm-color="#ffcb57"
            :show-title="false"
            @confirm="goRecharge"
        ></u-modal>
        <u-modal
            v-model="showPswModal"
            content="请先设置支付密码"
            confirm-color="#ffcb57"
            :show-title="false"
            @confirm="goChangePsw"
        ></u-modal>
        <u-modal v-model="showPswTips" content="请联系企业管理员设置支付密码" confirm-color="#ffcb57"></u-modal>
        <u-keyboard
            default
            ref="uKeyboard"
            mode="number"
            :mask="true"
            :mask-close-able="true"
            :dot-enabled="false"
            v-model="showPay"
            :safe-area-inset-bottom="true"
            :tooltip="false"
            @change="onChange"
            @backspace="onBackspace"
        >
            <view>
                <view class="u-flex u-row-center u-m-t-48">
                    <u-message-input
                        mode="box"
                        :maxlength="6"
                        :dot-fill="true"
                        v-model="password"
                        :disabled-keyboard="true"
                        @finish="finish"
                    ></u-message-input>
                </view>
                <view class="u-text-center u-padding-top-10 u-padding-bottom-20 tips">支付键盘</view>
            </view>
        </u-keyboard>
        <u-modal
            :show-title="false"
            v-model="showPayPswError"
            content="密码有误！"
            :show-cancel-button="true"
            confirm-text="重新支付"
            @confirm="payAgain"
            confirm-color="#ffcb57"
        ></u-modal>
        <u-toast ref="uToast" />
    </div>
</template>

<script>
import { mapGetters, mapActions } from 'vuex';
import request from '../../../common/service';
export default {
    data() {
        return {
            showAcceptanceTips: false,
            showVerifyCode: false,
            verifyCode: '',
            ywgImgs: [],
            showModal: false,
            showPswModal: false,
            showPswTips: false,
            showPay: false,
            password: '',
            showPayPswError: false,
        };
    },
    filters: {
        formatStatus(value) {
            const status = {
                DBJ: '待报价',
                DGY: '待雇佣',
                DYY: '待预约',
                DFW: '待服务/施工中',
                DYS: '待验收',
                DPJ: '待评价',
                DJS: '待结算',
                YWC: '已完成',
                TKZ: '退款中',
                YTK: '已退款',
                YQX: '已取消',
                YZF: '待确认',
            };
            return status[value];
        },
        computedCount(value) {
            return value.reduce(
                (accumulator, currentValue) => {
                    return { FGoodsQty: accumulator.FGoodsQty + currentValue.FGoodsQty };
                },
                { FGoodsQty: 0 }
            ).FGoodsQty;
        },
        formatPayway(value) {
            switch (String(value)) {
                case '1':
                    return '下单支付';
                case '2':
                    return '验收完成支付';
                case '3':
                    return '业主现场支付';
            }
        },
    },
    onLoad() {
        console.log(this.currentOrder);
        this.verifyCode = this.currentOrder.FFinishCode;
        if (this.currentOrder.FFinishImagesEntity.length > 0) {
            this.ywgImgs = this.currentOrder.FFinishImagesEntity.map((x) => {
                return `https://www.jtfw8.com/WXXCX/FileService/${x.FFinishImage_Files[0].FileName}`;
            });
        }
        console.log(this.ywgImgs);
    },
    computed: {
        ...mapGetters({
            currentOrder: 'order/currentOrder',
            curUserinfo: 'user/displayUserInfo',
            userDetail: 'user/userDetail',
        }),
    },
    methods: {
        ...mapActions({
            updateCurrentStatus: 'order/updateCurrentStatus'
        }),
        onChange(val) {
            if (this.password.length < 6) {
                this.password += val;
            }
            if (this.password.length >= 6) {
                if (this.password === this.userDetail.FPayPassword) {
                    this.payForOrder();
                } else {
                    this.showPay = false;
                    this.password = '';
                    this.showPayPswError = true;
                }
            }
        },
        onBackspace(e) {
            if (this.password.length > 0) {
                this.password = this.password.substring(0, this.password.length - 1);
            }
        },
        payAgain() {
            this.showPay = true;
        },
        copyAddress() {
            const { currentOrder } = this;
            const text = `${currentOrder.FPROVINCE}${currentOrder.FCity}${currentOrder.FCOUNTY}${currentOrder.FAdress}`;
            uni.setClipboardData({
                data: text,
            });
        },
        handlePhoneCall() {
            uni.makePhoneCall({
                phoneNumber: this.currentOrder.FCustomerPhone,
            });
        },
        hireMan() {
            this.$u.route('/pages/hire/index');
        },
        changeWorker() {
            this.$u.route('/pages/change-worker/index');
        },
        handleRefund() {
            this.$u.route('/pages/apply-refund/index');
        },
        goChangePsw() {
            this.$u.route('/pages/password/pay/index');
        },
        goRecharge() {
            this.$u.route('/pages/recharge/index');
        },
        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.showAcceptanceTips = true;
                    } else {
                        this.$refs.uToast.show({
                            title: message,
                        });
                    }
                });
        },
        previewImg(url) {
            uni.previewImage({
                current: 0,
                urls: [url],
            });
        },
        paying() {
            this.$u.route('/pages/pay/index');
        },
        copyBtn(text) {
            uni.setClipboardData({
                data: text,
            });
        },
        handlePay() {
            // 未设置支付密码
            if (this.userDetail.FPayPassword === ' ') {
                if (this.curUserinfo.userType === '个人') {
                    this.showPswModal = true;
                    return;
                }
                if (this.curUserinfo.userType === '企业用户' && !this.curUserinfo.isManager) {
                    this.showPswTips = true;
                    return;
                }
                this.showPswModal = true;
                return;
            }
            // 余额不足付款
            if (this.curUserinfo.balance < this.currentOrder.FSHAmount) {
                this.showModal = true;
                return;
            }
            // 输入支付密码
            this.showPay = true;
        },
        payForOrder() {
            uni.showLoading({
                title: '支付中',
            });
            request
                .post('/api/Order/Pay', {
                    FID: this.currentOrder.Id,
                    FSHSAmount: Number(this.currentOrder.FSHAmount).toFixed(2),
                    FStatus: 'DBJ',
                    FPayWay: '1',
                })
                .then((res) => {
                    console.log('订单支付参数：', this.orderId);
                    const { code, message } = res;
                    if (code === 0) {
                        uni.showLoading({
                            title: '支付成功，正在跳转',
                        });
                        this.updateCurrentStatus(1).then(() => {
                            uni.hideLoading();
                            this.$refs.uToast.show({
                                title: '订单支付成功',
                                isTab: true,
                                url: '/pages/orders/index',
                            });
                        });
                    } else {
                        this.$refs.uToast.show({
                            title: message,
                        });
                    }
                    uni.hideLoading();
                });
        },
    },
    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: 100%;
        width: 100%;
        .mstatus {
            background-color: #ffcb57;
            height: 200rpx;
            .title {
                padding-left: 36rpx;
                font-size: 32rpx;
            }
        }
        .address {
            display: flex;
            align-items: flex-start;
            .content {
                padding-left: 12rpx;
                .line {
                    margin-bottom: 8rpx;
                    .name {
                        font-size: 28rpx;
                        color: #595959;
                    }
                    .phone {
                        margin-left: 8rpx;
                        font-size: 28rpx;
                        color: #8c8c8c;
                    }
                }
            }
        }
        .action {
            display: flex;
            justify-content: flex-end;
            padding-top: 24rpx;
        }
        .gooditem {
            position: relative;
            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 0 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;
                }
            }
        }
        .total {
            display: flex;
            justify-content: flex-end;
            align-items: center;
            .amount {
                font-size: 32rpx;
                color: #f5222d;
            }
        }
        .paydetail {
            .line {
                display: flex;
                justify-content: space-between;
                align-items: center;
                margin-bottom: 28rpx;
                .title {
                    font-size: 24rpx;
                    color: #434343;
                }
                .content {
                    font-size: 26rpx;
                    color: #8c8c8c;
                    &.total {
                        font-size: 32rpx;
                        color: #f5222d;
                    }
                }
            }
        }
        .actions {
            display: flex;
            justify-content: flex-end;
            align-items: center;
            margin: 20rpx 32rpx;
            padding: 24rpx 24rpx;
            background-color: #fff;
            border-radius: 15rpx;
            /deep/.u-btn {
                margin-left: 12rpx;
            }
        }
        .ywg-imgs {
            display: flex;
            flex-wrap: wrap;
            /deep/ .u-image {
                margin-right: 12rpx;
                margin-bottom: 12rpx;
            }
        }
    }
    .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;
        }
    }
}
</style>
