<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="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="list.length === 0 && !showLoading"
                ></u-empty>
                <u-card
                    v-for="item in list"
                    :key="item.Id"
                    :title="item.FRealName"
                    :thumb="item.FUserImage"
                >
                    <view slot="body">
                        <view class="line">
                            <span class="title">手机：</span>
                            <span class="content">{{item.FPHONE}}</span>
                        </view>
                        <view class="line">
                            <span class="title">备注：</span>
                            <span class="content">{{item.FNote || '无'}}</span>
                        </view>
                    </view>
                    <view slot="foot">
                        <u-button
                            size="mini"
                            type="error"
                            hover-class="defaultBtnhover"
                            @click="deleteMember(item)"
                        >删除</u-button>
                    </view>
                </u-card>
            </view>
        </view>
        <u-toast ref="uToast" />
    </div>
</template>

<script>
import { mapActions } from 'vuex';
import request from '../../common/service';
export default {
    data() {
        return {
            list: [],
            showLoading: false,
        };
    },
    computed: {},
    onLoad() {},
    onShow() {
        this.getAccountInfo();
    },
    methods: {
        ...mapActions({
            updateUserDetail: 'user/updateUserDetail',
        }),
        getAccountInfo() {
            this.showLoading = true;
            request
                .get('/api/Business/View')
                .then((res) => {
                    const { code, message, result } = res;
                    this.showLoading = false;
                    if (code === 0) {
                        let detail = JSON.parse(result.result);
                        this.updateUserDetail(detail);
                        this.list = detail.FCustBusinessMember.filter(x => !x.FIsManager);
                    } else {
                        this.$refs.uToast.show({
                            title: message,
                        });
                    }
                })
                .catch(() => {
                    this.showLoading = false;
                });
        },
        deleteMember(data) {
            request
                .post('/api/Business/BusinessMemberDelete', {
                    FEntryID: data.Id,
                })
                .then((res) => {
                    const { code, message, result } = res;
                    if (code === 0) {
                        this.$refs.uToast.show({
                            title: '已删除',
                        });
                        this.getAccountInfo();
                    } 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;
        }
        .swiper-box {
            flex: 1;
        }
        .swiper-item {
            height: 100%;
        }
        .gdtemplate {
            display: flex;
            align-items: flex-start;
            .left {
                margin-right: 20rpx;
                image {
                    width: 200rpx;
                    height: 200rpx;
                    border-radius: 10rpx;
                }
            }
            .right {
                .title {
                    font-size: 28rpx;
                    line-height: 50rpx;
                }
                .type {
                    margin: 10rpx 0;
                    font-size: 24rpx;
                    color: $u-tips-color;
                }
                .extra {
                    .exitem {
                        .title {
                            color: #595959;
                            font-size: 24rpx;
                        }
                    }
                }
            }
        }
        .action {
            display: flex;
            justify-content: flex-end;
            align-items: center;
            /deep/.u-btn {
                margin-left: 12rpx;
            }
        }
    }
    .fixed-bottom-button {
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: #ffcb57;
        font-size: 28rpx;
        color: #472d21;
        padding-top: 24rpx;
        padding-bottom: 24rpx;
        padding-bottom: constant(safe-area-inset-bottom);
        padding-bottom: calc(env(safe-area-inset-bottom) + 24rpx);
    }
    .fixBtn {
        position: fixed;
        display: flex;
        justify-content: center;
        align-items: center;
        right: 32rpx;
        bottom: 180rpx;
        width: 100rpx;
        height: 100rpx;
        border-radius: 50%;
        background-color: #ffcb57;
        color: #472d21;
        box-shadow: 0 0 6rpx #595959;
        z-index: 200000;
    }
    .line {
        margin-bottom: 12rpx;
        &:last-child {
            margin-bottom: 0;
        }
        .title {
            display: inline-block;
            width: 120rpx;
        }
    }
}
</style>
