<template>
    <div class="content">
        <div class="header">
            <u-navbar
                :background="{backgroundColor: '#ffcb57'}"
                :border-bottom="false"
                title="账号信息"
                title-color="#472d21"
            ></u-navbar>
        </div>
        <div class="card">
            <u-card :show-head="false" padding="0" margin="30rpx 30rpx 15rpx 30rpx">
                <view slot="body">
                    <u-cell-group>
                        <u-cell-item title="用户类型" :value="curUserinfo.userType" :arrow="false"></u-cell-item>
                        <u-cell-item title="企业名称" :arrow="false" v-if="userDetail.FUserType == 2">
                            <span>{{companyName}}</span>
                        </u-cell-item>
                        <u-cell-item title="真实姓名" :arrow="false">
                            <u-input
                                v-model="userRealName"
                                type="text"
                                :clearable="false"
                                height="48"
                                input-align="right"
                                placeholder="请输入真实姓名"
                            />
                        </u-cell-item>
                        <u-cell-item title="联系地址" :arrow="false">
                            <u-input
                                v-model="address"
                                type="text"
                                :clearable="false"
                                height="48"
                                input-align="right"
                                placeholder="请输入联系地址"
                            />
                        </u-cell-item>
                        <u-cell-item title="电子邮箱" :arrow="false">
                            <u-input
                                v-model="mail"
                                type="text"
                                :clearable="false"
                                height="48"
                                input-align="right"
                                placeholder="请输入电子邮箱"
                            />
                        </u-cell-item>
                    </u-cell-group>
                </view>
            </u-card>
            <view class="mc-btn">
                <u-button
                    :custom-style="{margin: '16rpx 30rpx',backgroundColor: '#ffcb57',color: '#472d21'}"
                    hover-class="defaultBtnhover"
                    @click="save"
                >保存</u-button>
            </view>
        </div>
        <u-toast ref="uToast" />
    </div>
</template>

<script>
import { mapGetters, mapActions } from 'vuex';
import request from '../../common/service';
export default {
    data() {
        return {
            userType: '个人',
            userNickname: null,
            address: null,
            mail: null,
            userRealName: null,
            companyName: ''
        };
    },
    computed: {
        ...mapGetters({
            userDetail: 'user/userDetail',
            curUserinfo: 'user/displayUserInfo',
        }),
    },
    onLoad() {
        this.getAccountInfo();
        console.log(this.userDetail)
    },
    methods: {
        ...mapActions({
            updateUserDetail: 'user/updateUserDetail'
        }),
        getAccountInfo() {
            request.get('/api/Business/View').then((res) => {
                const { code, message, result } = res;
                if (code === 0) {
                    const detail = JSON.parse(result.result);
                    console.log(detail)
                    this.userNickname = detail.FCustBusinessMember[0].FNickName.replace(/\s+/g, '');
                    this.address = detail.FCustBusinessMember[0].FAdress.replace(/\s+/g, '');
                    this.mail = detail.FCustBusinessMember[0].FEmail.replace(/\s+/g, '');
                    this.userRealName = detail.FCustBusinessMember[0].FRealName.replace(/\s+/g, '');
                    this.companyName = detail.Name[0].Value;
                    this.updateUserDetail(detail);
                } else {
                    this.$refs.uToast.show({
                        title: message,
                    });
                }
            });
        },
        save() {
            const { address, mail, userRealName } = this;
            if (!userRealName || !address || !mail) {
                this.$refs.uToast.show({
                    title: '请完善信息后再提交！',
                });
                return;
            }
            request
                .post('/api/Business/edit', {
                    FID: this.userDetail.Id,
                    Adress: address,
                    Email: mail,
                    RealName: userRealName
                })
                .then((res) => {
                    const { code, message } = res;
                    if (code === 0) {
                        this.$refs.uToast.show({
                            title: '修改成功！',
                            isTab: true,
                            url: '/pages/index/index',
                        });
                    } 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;
    }
    .card {
        .u-body-item {
            font-size: 32rpx;
            color: #333;
            padding: 0rpx 10rpx;
            .right {
                display: flex;
                justify-content: flex-end;
                align-items: center;
                width: 400rpx;
                flex: 0 0 400rpx;
                height: 120rpx;
                border-radius: 8rpx;
                margin-left: 12rpx;
                .extra-content {
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                }
            }
        }
    }
    .defaultBtnhover {
        color: '#472d21';
    }
}
</style>
