<template>
    <div class="content">
        <div class="header">
            <u-navbar
                :is-back="false"
                :background="{ backgroundColor: '#ffcb57' }"
                :border-bottom="false"
                title="首页"
                title-color="#472d21"
            ></u-navbar>
            <div class="overlook">
                <div class="block">
                    <span class="title">账号信息</span>
                    <span class="name">{{ curUserinfo.name }}</span>
                    <span class="phone">{{ curUserinfo.phone }}</span>
                    <u-button
                        :custom-style="{ marginTop: '6rpx', backgroundColor: '#ffcb57', color: '472d21' }"
                        size="mini"
                        hover-class="defaultBtnhover"
                        @click="seeAccount"
                        >账号信息</u-button
                    >
                </div>
                <div class="line"></div>
                <div class="block">
                    <span class="title">账号余额</span>
                    <span class="amount">{{ curUserinfo.balance }}</span>
                    <u-button
                        :custom-style="{ marginTop: '6rpx', backgroundColor: '#ffcb57', color: '472d21' }"
                        size="mini"
                        hover-class="defaultBtnhover"
                        @click="rechargeAmount"
                        >充值余额</u-button
                    >
                </div>
            </div>
        </div>
        <div class="card">
            <u-card title="全部订单" sub-title="查看全部订单" :foot-border-top="false" @head-click="goOrders('0')">
                <view slot="body" class="orderBd">
                    <view class="order-item" @click="goOrders('1')">
                        <u-badge type="error" :count="orderCounts.count1" :offset="[0, 16]"></u-badge>
                        <view class="avatarImg">
                            <view class="inner">
                                <img src="/static/images/common/4.png" alt srcset />
                            </view>
                        </view>
                        <view class="order-item-title">待报价</view>
                    </view>
                    <view class="order-item" @click="goOrders('2')">
                        <u-badge type="error" :count="orderCounts.count2" :offset="[0, 16]"></u-badge>
                        <view class="avatarImg">
                            <view class="inner">
                                <img src="/static/images/common/4.png" alt srcset />
                            </view>
                        </view>
                        <view class="order-item-title">待雇佣</view>
                    </view>
                    <view class="order-item" @click="goOrders('3')">
                        <u-badge type="error" :count="orderCounts.count3" :offset="[0, 16]"></u-badge>
                        <view class="avatarImg">
                            <view class="inner">
                                <img src="/static/images/common/4.png" alt srcset />
                            </view>
                        </view>
                        <view class="order-item-title">待预约</view>
                    </view>
                    <view class="order-item" @click="goOrders('4')">
                        <u-badge type="error" :count="orderCounts.count4" :offset="[0, 16]"></u-badge>
                        <view class="avatarImg">
                            <view class="inner">
                                <img src="/static/images/common/4.png" alt srcset />
                            </view>
                        </view>
                        <view class="order-item-title">施工中</view>
                    </view>
                    <view class="order-item" @click="goOrders('5')">
                        <u-badge type="error" :count="orderCounts.count5" :offset="[0, 16]"></u-badge>
                        <view class="avatarImg">
                            <view class="inner">
                                <img src="/static/images/common/4.png" alt srcset />
                            </view>
                        </view>
                        <view class="order-item-title">待验收</view>
                    </view>
                    <view class="order-item" @click="goOrders('7')">
                        <u-badge type="error" :count="orderCounts.count6" :offset="[0, 16]"></u-badge>
                        <view class="avatarImg">
                            <view class="inner">
                                <img src="/static/images/common/4.png" alt srcset />
                            </view>
                        </view>
                        <view class="order-item-title">待结算</view>
                    </view>
                    <view class="order-item" @click="goOrders('8')">
                        <u-badge type="error" :count="orderCounts.count7" :offset="[0, 16]"></u-badge>
                        <view class="avatarImg">
                            <view class="inner">
                                <img src="/static/images/common/4.png" alt srcset />
                            </view>
                        </view>
                        <view class="order-item-title">已完成</view>
                    </view>
                    <view class="order-item" @click="goOrders('11')">
                        <u-badge type="error" :count="orderCounts.count8" :offset="[0, 16]"></u-badge>
                        <view class="avatarImg">
                            <view class="inner">
                                <img src="/static/images/common/4.png" alt srcset />
                            </view>
                        </view>
                        <view class="order-item-title">已取消</view>
                    </view>
                </view>
            </u-card>
            <view class="mc-btn">
                <u-button
                    :custom-style="{ margin: '16rpx 32rpx', backgroundColor: '#ffcb57', color: '#472d21' }"
                    hover-class="defaultBtnhover"
                    @click="placeOrder"
                    >发布订单</u-button
                >
            </view>
        </div>
        <u-picker
            mode="region"
            v-model="showRegion"
            :params="paramsRegion"
            @confirm="changeRegion"
            confirm-color="#ffcb57"
        ></u-picker>
        <u-picker
            mode="selector"
            v-model="showCategories"
            :range="categorylist"
            range-key="label"
            @confirm="changeCategory"
            confirm-color="#ffcb57"
        ></u-picker>
        <u-popup v-model="showService" mode="bottom" length="35%">
            <div class="sScontent">
                <u-checkbox-group @change="checkboxGroupChange" wrap active-color="#ffcb57">
                    <u-checkbox
                        v-model="item.checked"
                        v-for="(item, index) in services"
                        :key="index"
                        :name="item.name"
                        >{{ item.name }}</u-checkbox
                    >
                </u-checkbox-group>
            </div>
            <div class="sSfooter">
                <u-button
                    size="medium"
                    :custom-style="{ marginTop: '6rpx', backgroundColor: '#ffcb57', color: '#472d21' }"
                    hover-class="defaultBtnhover"
                    @click="changeServices"
                    >确定</u-button
                >
            </div>
        </u-popup>
        <u-popup v-model="showAuth" mode="center" border-radius="15" :mask-close-able="false">
            <div class="auContent">
                <view class="title">授权登录</view>
                <u-avatar
                    class="avatar"
                    src="http://pic2.sc.chinaz.com/Files/pic/pic9/202002/hpic2119_s.jpg"
                ></u-avatar>
                <view class="productname">京台服务客户版</view>
                <view class="companyname">靖靖智能科技（上海）有限公司</view>
                <u-button
                    size="medium"
                    :custom-style="{ marginTop: '32rpx', backgroundColor: '#ffcb57', color: '472d21' }"
                    hover-class="defaultBtnhover"
                    open-type="getUserInfo"
                    @getuserinfo="getUserInfo"
                    >授权登录</u-button
                >
                <u-button
                    size="medium"
                    :custom-style="{ margin: '18rpx 0 16rpx 0', backgroundColor: '#ffffff', color: '472d21' }"
                    hover-class="defaultBtnhover"
                    >暂不登录</u-button
                >
                <u-radio-group v-model="protocol" active-color="#ffcb57">
                    <u-radio name="agree" :disabled="false" shape="circle" label-size="24">
                        我已查看并同意以下
                        <u-link href="http://www.uviewui.com" font-size="24">《用户协议》</u-link>
                    </u-radio>
                </u-radio-group>
            </div>
        </u-popup>
        <u-popup v-model="showPassModal" mode="center" border-radius="15" :mask-close-able="false">
            <div class="auContent">
                <u-avatar
                    class="avatar"
                    src="http://pic2.sc.chinaz.com/Files/pic/pic9/202002/hpic2119_s.jpg"
                ></u-avatar>
                <view class="productname">京台服务客户版</view>
                <view class="companyname">靖靖智能科技（上海）有限公司</view>
                <view class="pass-title"
                    >请耐心等待企业管理员处理你的申请，如有任何问题可以关注公众号京台服务寻求客服帮助</view
                >
                <view class="mc-btn">
                    <u-button
                        size="medium"
                        :custom-style="{ marginTop: '32rpx', backgroundColor: '#ffcb57', color: '#472d21' }"
                        hover-class="defaultBtnhover"
                        @click="confirmClose"
                        >确定</u-button
                    >
                </view>
            </div>
        </u-popup>
        <u-popup v-model="showRefuseModal" mode="center" border-radius="15" :mask-close-able="false">
            <div class="auContent">
                <u-avatar
                    class="avatar"
                    src="http://pic2.sc.chinaz.com/Files/pic/pic9/202002/hpic2119_s.jpg"
                ></u-avatar>
                <view class="productname">京台服务客户版</view>
                <view class="companyname">靖靖智能科技（上海）有限公司</view>
                <view class="refuse-title">您的申请被拒绝</view>
                <view class="mc-btn">
                    <u-button
                        size="medium"
                        :custom-style="{ marginTop: '32rpx', backgroundColor: '#ffcb57', color: '#472d21' }"
                        hover-class="defaultBtnhover"
                        open-type="getUserInfo"
                        @getuserinfo="registerAgain"
                        >重新注册</u-button
                    >
                </view>
            </div>
        </u-popup>
        <u-popup v-model="showForbidModal" mode="center" border-radius="15" :mask-close-able="false">
            <div class="auContent">
                <u-avatar
                    class="avatar"
                    src="http://pic2.sc.chinaz.com/Files/pic/pic9/202002/hpic2119_s.jpg"
                ></u-avatar>
                <view class="productname">京台服务客户版</view>
                <view class="companyname">靖靖智能科技（上海）有限公司</view>
                <view class="refuse-title">您的账户已被禁用，请联系客服！</view>
                <view class="mc-btn">
                    <u-button
                        size="medium"
                        :custom-style="{ marginTop: '32rpx', backgroundColor: '#ffcb57', color: '#472d21' }"
                        hover-class="defaultBtnhover"
                        open-type="contact"
                        >联系客服</u-button
                    >
                </view>
            </div>
        </u-popup>
        <u-popup v-model="showPasswordTips" mode="center" border-radius="15" :mask-close-able="false">
            <div class="auContent">
                <u-avatar
                    class="avatar"
                    src="http://pic2.sc.chinaz.com/Files/pic/pic9/202002/hpic2119_s.jpg"
                ></u-avatar>
                <view class="productname">京台服务客户版</view>
                <view class="companyname">靖靖智能科技（上海）有限公司</view>
                <view class="pass-title">您还未设置支付密码，请先设置您的支付密码</view>
                <view class="mc-btn">
                    <u-button
                        size="medium"
                        :custom-style="{ marginTop: '32rpx', backgroundColor: '#ffcb57', color: '#472d21' }"
                        hover-class="defaultBtnhover"
                        @click="goSetPsw"
                        >立即设置</u-button
                    >
                </view>
            </div>
        </u-popup>
        <u-toast ref="uToast" />
    </div>
</template>

<script>
import { mapGetters, mapActions } from 'vuex';
import request from '../../common/service';

export default {
    data() {
        return {
            showRegion: false,
            showCategories: false,
            showService: false,
            showAuth: false,
            protocol: 'agree',
            paramsRegion: {
                province: true,
                city: true,
                area: true,
            },
            region: null,
            categorylist: [
                {
                    value: 'xxxxx',
                    label: '淋浴房',
                },
                {
                    value: 'yyyyy',
                    label: '汽车用品',
                },
            ],
            category: null,
            services: [
                {
                    name: '拆旧',
                    checked: false,
                    disabled: false,
                },
                {
                    name: '安装',
                    checked: false,
                    disabled: false,
                },
                {
                    name: '测量',
                    checked: false,
                    disabled: false,
                },
            ],
            chooseServices: null,
            confirmServices: null,
            orderCounts: {
                count1: 0,
                count2: 0,
                count3: 0,
                count4: 0,
                count5: 0,
                count6: 0,
                count7: 0,
                count8: 0,
            },
            showPassModal: false,
            showRefuseModal: false,
            showPasswordTips: false,
            showForbidModal: false,
        };
    },
    computed: {
        ...mapGetters({
            login: 'user/login',
            wxDetail: 'user/wxDetail',
            isRegister: 'user/isRegister',
            curUserinfo: 'user/displayUserInfo',
        }),
        displayRegion() {
            if (!this.region) {
                return '省份/市/区';
            }
            const { area, city, province } = this.region;
            return `${province.label}/${city.label}/${area.label}`;
        },
        displayCategory() {
            if (!this.category) {
                return '请选择类目';
            }
            return `${this.category.label}`;
        },
        displayServices() {
            if (!this.confirmServices || this.confirmServices.length === 0) {
                return '请选择类型';
            }
            return this.confirmServices.join(',');
        },
        changeProtocol() {},
    },
    onLoad() {},
    onShow() {
        this.init();
    },
    onShareAppMessage(res) {
        if (res.from === 'button') {
            // 来自页面内分享按钮
            console.log(res.target);
        }
        return {
            title: '京台分享更多精彩',
            path: '/pages/index/index',
            imageUrl: '/static/images/share/WechatIMG96.png'
        };
    },
    methods: {
        ...mapActions({
            handleLogin: 'user/login',
            updateRegisterStatus: 'user/updateRegisterStatus',
            updateWXInfo: 'user/updateWXInfo',
            updateCurrentStatus: 'order/updateCurrentStatus',
        }),
        showRegionPicker() {
            this.showRegion = true;
        },
        changeRegion(region) {
            this.region = region;
        },
        showCategoryPicker() {
            this.showCategories = true;
        },
        changeCategory(e) {
            this.category = this.categorylist[e[0]];
        },
        showServicePopup() {
            this.showService = true;
        },
        checkboxGroupChange(e) {
            this.chooseServices = e;
        },
        changeServices() {
            this.confirmServices = this.chooseServices;
            this.showService = false;
        },
        seeAccount() {
            this.$u.route('/pages/account/index');
        },
        rechargeAmount() {
            this.$u.route('/pages/recharge/index');
        },
        goSetPsw() {
            this.showPasswordTips = false;
            this.$u.route('/pages/password/pay/index');
        },
        placeOrder() {
            this.$u.route('/pages/place/index');
        },
        goOrders(num) {
            this.updateCurrentStatus(num).then(() => {
                this.$u.route({
                    type: 'switchTab',
                    url: '/pages/orders/index',
                });
            });
        },
        init() {
            const _t = this;
            uni.login({
                success(ev) {
                    request
                        .post('/api/Validation', {
                            code: ev.code,
                        })
                        .then((res) => {
                            if (res.code === 0) {
                                const { isRegister, isForbid, result, token } = res.result;
                                uni.setStorageSync('token', token);
                                if (isRegister) {
                                    const userDetail = JSON.parse(result);
                                    _t.handleLogin({
                                        userDetail: userDetail,
                                        isRegister,
                                    }).then(() => {
                                        _t.getOrdersStatus();
                                        if (userDetail.FPayPassword === ' ' || !userDetail.FPayPassword) {
                                            _t.showPasswordTips = true;
                                        }
                                    });
                                    return;
                                }
                                // 未审核状态
                                if (!isRegister && result === '您的申请还未通过审核') {
                                    _t.showPassModal = true;
                                    uni.hideTabBar();
                                    return;
                                }
                                // 拒绝加入
                                if (!isRegister && result === '您的申请被拒绝') {
                                    _t.showRefuseModal = true;
                                    uni.hideTabBar();
                                    return;
                                }
                                // 拒绝加入
                                if (!isRegister && isForbid) {
                                    _t.showForbidModal = true;
                                    uni.hideTabBar();
                                    return;
                                }
                                _t.showAuth = true;
                                uni.hideTabBar();
                            }
                        });
                },
            });
        },
        getUserInfo(ev) {
            this.updateWXInfo(ev.detail).then(() => {
                this.showAuth = false;
                uni.showTabBar();
                this.$u.route('/pages/register/index');
            });
        },
        getPolicy() {
            request.get('/api/BaseData/UserAgreement').then((res) => {
                console.log(res);
            });
        },
        getOrdersStatus() {
            request.get('/api/Order/GetOrderTypeQty').then((res) => {
                const { code, message, result } = res;
                if (code === 0) {
                    this.orderCounts = {
                        count1: result[0].qty,
                        count2: result[2].qty,
                        count3: result[6].qty,
                        count4: result[1].qty,
                        count5: result[5].qty,
                        count6: result[3].qty,
                        count7: result[12].qty,
                        count8: result[10].qty,
                    };
                } else {
                    this.$refs.uToast.show({
                        title: message,
                    });
                }
            });
        },
        confirmClose() {
            this.showPassModal = false;
        },
        registerAgain(ev) {
            this.updateWXInfo(ev.detail).then(() => {
                this.showRefuseModal = false;
                uni.showTabBar();
                this.$u.route('/pages/register/index');
            });
        },
    },
};
</script>

<style lang="scss" scoped>
.content {
    .header {
        background-color: #ffcb57;
        .overlook {
            display: flex;
            flex-direction: row;
            justify-content: space-evenly;
            align-items: center;
            padding: 60rpx 0 120rpx 0;
            .block {
                display: flex;
                flex-direction: column;
                align-items: center;
                .title {
                    font-size: 28rpx;
                    color: #472d21;
                }
                .name {
                    margin-top: 6rpx;
                    font-size: 32rpx;
                    color: #303133;
                }
                .phone {
                    margin-top: 4rpx;
                    font-size: 24rpx;
                    color: #606266;
                }
                .amount {
                    position: relative;
                    margin-left: 12rpx;
                    font-size: 48rpx;
                    color: #303133;
                    &::before {
                        content: '¥';
                        position: absolute;
                        display: inline-block;
                        left: -30rpx;
                    }
                }
            }
            .line {
                display: inline-block;
                width: 2rpx;
                height: 170rpx;
                border-left: 1px solid #303133;
            }
        }
    }
    .card {
        margin-top: -100rpx;
        .orderBd {
            display: flex;
            align-items: center;
            justify-content: space-between;
            flex-wrap: wrap;
            .order-item {
                flex: 0 0 25%;
                position: relative;
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: center;
                margin-bottom: 32rpx;
                .order-item-title {
                    margin-top: 6rpx;
                    font-size: 24rpx;
                    color: #472d21;
                }
                .avatarImg {
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    width: 90rpx;
                    height: 90rpx;
                    border-radius: 50%;
                    overflow: hidden;
                    background-color: #f5f5f5;
                    .inner {
                        width: 50rpx;
                        height: 50rpx;
                        ._img {
                            width: 100%;
                            height: 100%;
                        }
                    }
                }
            }
        }
    }
    .defaultBtnhover {
        color: '#472d21';
    }
    .sScontent {
        margin-top: 58rpx;
        padding: 12px 16px;
    }
    .sSfooter {
        display: flex;
        justify-content: center;
    }
    .auContent {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 70rpx;
        .title,
        .productname {
            font-size: 28rpx;
        }
        .companyname {
            margin-top: 6rpx;
            font-size: 24rpx;
            color: #606266;
        }
        .avatar {
            margin: 12rpx 0;
        }
    }
    .pass-title {
        margin: 48rpx 0 24rpx 0;
        max-width: 400rpx;
        font-size: 28rpx;
    }
    .refuse-title {
        margin: 48rpx 0 24rpx 0;
        font-size: 28rpx;
    }
}
</style>
