{include file="/shopro/common/script" /}

<style>
    .user-detail .title {
        height: 32px;
        line-height: 32px;
        font-size: 16px;
        color: var(--sa-subtitle);
        margin-bottom: 8px;
    }

    .user-detail .bottom {
        padding: 16px;
        background: var(--sa-table-header-bg);
        border-radius: 8px;
        margin-bottom: 20px;
    }

    .user-detail .left {
        height: 12px;
        line-height: 12px;
        font-size: 12px;
        font-weight: 500;
        color: var(--sa-subfont);
        margin-bottom: 8px;
    }

    .user-detail .right {
        line-height: 32px;
        font-size: 14px;
        font-weight: 400;
        color: var(--sa-subtitle);
    }

    .user-detail .info {
        padding: 16px 16px 0;
        background: var(--sa-background-assist);
        border-radius: 4px;
    }

    .user-detail .info .el-col {
        margin-bottom: 16px;
    }

    .user-detail .log .bottom {
        padding: 0;
        background: var(--sa-background-assist);
    }

    .user-detail .el-tabs__nav-wrap::after {
        height: 0;
    }

    .user-detail .third-oauth .provider-platform {
        flex-shrink: 0;
        width: 32px;
        height: 32px;
    }

    .user-detail .third-oauth .provider-item {
        margin-bottom: 20px;
    }

    .user-detail .third-oauth .provider-item:last-of-type {
        margin-bottom: 0;
    }

    /* 新增标签选择器样式 */
    .user-detail .tag-selector {
        width: 100%;
    }

    .user-detail .tag-selector .el-select__tags {
        flex-wrap: wrap;
    }
</style>

<div id="detail" class="user-detail" v-cloak>
    <el-container class="panel-block">
        <el-main>
            <el-row :gutter="24">
                <el-col class="sa-col-24" :xs="24" :sm="24" :md="6" :lg="6" :xl="6">
                    <div class="title">基本信息</div>
                    <div class="bottom">
                        <div class="sa-flex sa-row-between mb-3">
                            <div class="sa-flex sa-flex-1">
                                <sa-image :url="state.detail.avatar" size="64" radius="32"></sa-image>
                                <div class="ml-4 sa-flex-1">
                                    <div class="nickname mb-1 sa-table-line-1">
                                        {{ state.detail.nickname }}
                                    </div>
                                    <div class="id">#{{ state.detail.id }}</div>
                                </div>
                            </div>
                            {if $auth->check('shopro/user/user/edit')}
                            <el-button type="primary" @click="onSelectAvatar">更换头像</el-button>
                            {/if}
                        </div>
                        <div class="info">
                            <el-row :gutter="24">
                                <el-col :xs="24" :sm="12" :md="24" :lg="24" :xl="24">
                                    <div class="left">昵称</div>
                                    <div class="right">
                                        <el-input v-model="state.detail.nickname" />
                                    </div>
                                </el-col>
                                <el-col :xs="24" :sm="12" :md="24" :lg="24" :xl="24">
                                    <div class="left">性别</div>
                                    <div class="right">
                                        <el-radio-group v-model="state.detail.gender">
                                            <el-radio :label="0">女</el-radio>
                                            <el-radio :label="1">男</el-radio>
                                        </el-radio-group>
                                    </div>
                                </el-col>
                                <el-col :xs="24" :sm="12" :md="24" :lg="24" :xl="24">
                                    <div class="left">用户名</div>
                                    <div class="right">
                                        <el-input v-model="state.detail.username" placeholder="首位需为字母且不少五位">
                                            <template #suffix>
                                                <span v-html="statusStyle('username')"></span>
                                            </template>
                                        </el-input>
                                    </div>
                                </el-col>
                                <el-col :xs="24" :sm="12" :md="24" :lg="24" :xl="24">
                                    <div class="left">密码</div>
                                    <div class="right">
                                        <el-input v-model="state.detail.password" placeholder="不修改则留空">
                                            <template #suffix>
                                                <span v-html="statusStyle('password')"></span>
                                            </template>
                                        </el-input>
                                    </div>
                                </el-col>
                                <el-col :xs="24" :sm="12" :md="24" :lg="24" :xl="24">
                                    <div class="left">手机号</div>
                                    <div class="right">
                                        <el-input v-model="state.detail.mobile" type="number">
                                            <template #suffix>
                                                <span v-html="statusStyle('mobile')"></span>
                                            </template>
                                        </el-input>
                                    </div>
                                </el-col>
                                <el-col :xs="24" :sm="12" :md="24" :lg="24" :xl="24">
                                    <div class="left">电子邮箱</div>
                                    <div class="right">
                                        <el-input v-model="state.detail.email">
                                            <template #suffix>
                                                <span v-html="statusStyle('email')"></span>
                                            </template>
                                        </el-input>
                                    </div>
                                </el-col>
                                <el-col :xs="24" :sm="12" :md="24" :lg="24" :xl="24">
                                    <div class="left">生日</div>
                                    <div class="right">{{ state.detail.birthday || '-' }}</div>
                                </el-col>

                                <!-- 新增用户标签选择器 -->
                                <el-col :xs="24" :sm="12" :md="24" :lg="24" :xl="24">
                                    <div class="left">用户标签</div>
                                    <div class="right">
                                        <el-select
                                                v-model="state.tags"
                                                multiple
                                                class="tag-selector"
                                                placeholder="请选择用户标签"
                                                @change="onTagsChange"
                                        >
                                            <el-option
                                                    v-for="tag in state.tagOptions"
                                                    :key="tag.code"
                                                    :label="tag.name"
                                                    :value="tag.code"
                                            ></el-option>
                                        </el-select>
                                    </div>
                                </el-col>

                                <el-col :xs="24" :sm="12" :md="24" :lg="24" :xl="24">
                                    <div class="left">状态</div>
                                    <div class="right">
                                        <el-radio-group v-model="state.detail.status">
                                            <el-radio label="normal">正常</el-radio>
                                            <el-radio label="disabled">禁用</el-radio>
                                        </el-radio-group>
                                    </div>
                                </el-col>
                                <el-col :xs="24" :sm="12" :md="24" :lg="24" :xl="24">
                                    <div class="label"></div>
                                    <div class="right sa-flex sa-row-right">
                                        <el-button @click="getDetail">重置</el-button>
                                        {if $auth->check('shopro/user/user/edit')}
                                        <el-button type="primary" @click="onSave">保存</el-button>
                                        {/if}
                                    </div>
                                </el-col>
                            </el-row>
                        </div>
                    </div>
                </el-col>
                <el-col class="sa-col-24" :xs="24" :sm="24" :md="18" :lg="18" :xl="18">
                    <el-row :gutter="24">
                        <el-col class="sa-col-24" :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
                            <div class="title">账户信息</div>
                            <div class="bottom">
                                <div class="info">
                                    <el-row>
                                        <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
                                            <div class="left">推荐人</div>
                                            <div class="right sa-flex">
                                                <sa-user-profile type="agent" :user="state.detail.parent_user"
                                                    :id="state.detail.parent_user_id"></sa-user-profile>
                                                {if $is_pro}
                                                <el-button class="ml-2" type="primary" link @click="onChangeParentUser">
                                                    更换</el-button>
                                                {/if}
                                            </div>
                                        </el-col>
                                        <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
                                            <div class="left">佣金</div>
                                            <div class="right">{{ state.detail.commission }}</div>
                                        </el-col>
                                        <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
                                            <div class="left">余额</div>
                                            <div class="right sa-flex">
                                                {{ state.detail.money }}
                                                {if $auth->check('shopro/user/user/recharge')}
                                                <el-button class="ml-2" type="primary" link
                                                    @click="onRecharge('money')">充值</el-button>
                                                {/if}
                                            </div>
                                        </el-col>
                                        <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
                                            <div class="left">上次登录时间</div>
                                            <div class="right">{{ state.detail.logintime }}</div>
                                        </el-col>
                                        <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
                                            <div class="left">积分</div>
                                            <div class="right sa-flex">
                                                {{ state.detail.score }}
                                                {if $auth->check('shopro/user/user/recharge')}
                                                <el-button class="ml-2" type="primary" link
                                                    @click="onRecharge('score')">充值</el-button>
                                                {/if}
                                            </div>
                                        </el-col>
                                        <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
                                            <div class="left">登录IP</div>
                                            <div class="right">{{ state.detail.loginip }}</div>
                                        </el-col>
                                        <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
                                            <div class="left">总计消费</div>
                                            <div class="right">
                                                {{ state.detail.total_consume }}
                                            </div>
                                        </el-col>
                                        <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
                                            <div class="left">注册时间</div>
                                            <div class="right">{{ state.detail.createtime }}</div>
                                        </el-col>
                                    </el-row>
                                </div>
                            </div>
                        </el-col>
                        <el-col v-if="state.detail.third_oauth?.length>0" class="third-oauth sa-col-24" :xs="24"
                            :sm="24" :md="12" :lg="12" :xl="12">
                            <div class="title">第三方账号</div>
                            <div class="bottom">
                                <el-row class="info">
                                    <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
                                        <div class="provider-item sa-flex sa-row-between"
                                            v-for="item in state.detail.third_oauth" :key="item.id">
                                            <div class="sa-flex">
                                                <img class="provider-platform"
                                                    :src="`/assets/addons/shopro/img/user/${item.provider}/${item.platform}.png`" />
                                                <span class="ml-2">
                                                    {{ platform[item.provider][item.platform] }}
                                                </span>
                                            </div>
                                            <el-popover popper-class="sa-popper" placement="top-start" trigger="hover">
                                                <div>
                                                    <div class="item sa-flex">
                                                        <div class="left">登录次数：</div>
                                                        <div class="right">{{ item.login_num }}</div>
                                                    </div>
                                                    <div class="item sa-flex">
                                                        <div class="left">Openid：</div>
                                                        <div class="right">{{ item.openid }}</div>
                                                    </div>
                                                    <div v-if="item.unionid" class="item sa-flex">
                                                        <div class="left">Unionid：</div>
                                                        <div class="right">{{ item.unionid }}</div>
                                                    </div>
                                                    <div class="item sa-flex">
                                                        <div class="left">更新时间：</div>
                                                        <div class="right">{{ item.updatetime }}</div>
                                                    </div>
                                                </div>
                                                <template #reference>
                                                    <div class="sa-flex">
                                                        <sa-image :url="item.avatar" size="32"></sa-image>
                                                        <span class="name ml-2">
                                                            {{ item.nickname }}
                                                        </span>
                                                    </div>
                                                </template>
                                            </el-popover>
                                        </div>
                                    </el-col>
                                </el-row>
                            </div>
                        </el-col>
                        <el-col class="log sa-col-24" :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
                            <div class="title sa-flex"> 用户动态 </div>
                            <div class="bottom">
                                <el-tabs v-model="log.tabActive" @tab-change="onChangeTab">
                                    <el-tab-pane label="余额记录" name="money"></el-tab-pane>
                                    <el-tab-pane label="积分记录" name="score"></el-tab-pane>
                                    <el-tab-pane label="佣金记录" name="commission"></el-tab-pane>
                                    <el-tab-pane label="订单记录" name="order"></el-tab-pane>
                                    <el-tab-pane label="分享记录" name="share"></el-tab-pane>
                                    <el-tab-pane label="优惠券明细" name="coupon"></el-tab-pane>
                                </el-tabs>
                                <el-table
                                    v-if="log.tabActive=='money' || log.tabActive=='score' || log.tabActive=='commission'"
                                    height="520" class="sa-table" :data="log.data" stripe>
                                    <el-table-column prop="createtime" label="交易时间" width="172">
                                    </el-table-column>
                                    <el-table-column prop="amount" label="变动余额" min-width="120">
                                    </el-table-column>
                                    <el-table-column prop="before" label="变更前" min-width="120">
                                    </el-table-column>
                                    <el-table-column prop="after" label="剩余余额" min-width="120">
                                    </el-table-column>
                                    <el-table-column label="操作人" min-width="160">
                                        <template #default="scope">
                                            <sa-user-profile type="oper" :user="scope.row.oper" :id="scope.row.oper_id">
                                            </sa-user-profile>
                                        </template>
                                    </el-table-column>
                                    <el-table-column label="备注" min-width="160">
                                        <template #default="scope">
                                            {{ scope.row.event_text }}{{ scope.row.memo ? ':' + scope.row.memo : '' }}
                                        </template>
                                    </el-table-column>
                                </el-table>
                                <el-table v-if="log.tabActive=='order'" height="520" class="sa-table" :data="log.data"
                                    stripe>
                                    <el-table-column prop="createtime" label="下单时间" min-width="172"></el-table-column>
                                    <el-table-column prop="order_sn" label="订单号" min-width="280"></el-table-column>
                                    <el-table-column prop="platform_text" label="订单来源" min-width="120">
                                    </el-table-column>
                                    <el-table-column prop="type_text" label="订单类型" min-width="100"></el-table-column>
                                    <el-table-column prop="order_amount" label="订单总金额" min-width="140">
                                    </el-table-column>
                                    <el-table-column prop="total_discount_fee" label="优惠减免" min-width="140">
                                    </el-table-column>
                                    <el-table-column prop="pay_fee" label="实付金额" min-width="140"></el-table-column>
                                    <el-table-column prop="status_text" label="订单状态" min-width="100"></el-table-column>
                                </el-table>
                                <el-table v-if="log.tabActive=='share'" height="520" class="sa-table" :data="log.data"
                                    stripe>
                                    <el-table-column prop="createtime" label="分享时间" width="172"></el-table-column>
                                    <el-table-column label="被分享用户" min-width="180">
                                        <template #default="scope">
                                            <sa-user-profile :user="scope.row.user" :id="scope.user_id">
                                            </sa-user-profile>
                                        </template>
                                    </el-table-column>
                                    <el-table-column prop="from_text" label="分享类型" min-width="120"></el-table-column>
                                    <el-table-column label="分享信息" min-width="180" show-overflow-tooltip>
                                        <template #default="scope">
                                            <div v-if="scope.row.ext" class="sa-flex">
                                                <sa-image :url="scope.row.ext.image" size="32"></sa-image>
                                                <div class="sa-table-line-1 ml-2">{{ scope.row.ext.memo}}</div>
                                            </div>
                                            <div v-else>-</div>
                                        </template>
                                    </el-table-column>
                                    <el-table-column prop="platform_text" label="平台" min-width="130"></el-table-column>
                                </el-table>
                                <el-table v-if="log.tabActive=='coupon'" height="520" class="sa-table" :data="log.data"
                                    stripe>
                                    <el-table-column label="优惠券名称" min-width="160">
                                        <template #default="scope">
                                            <div class="sa-line-1">{{ scope.row.coupon?.name || '-' }}</div>
                                        </template>
                                    </el-table-column>
                                    <el-table-column label="优惠券面额" min-width="120">
                                        <template #default="scope">
                                            <div class="sa-line-1">{{ scope.row.coupon?.amount || '-' }}</div>
                                        </template>
                                    </el-table-column>
                                    <el-table-column prop="status_text" label="优惠券状态" min-width="120"></el-table-column>
                                    <el-table-column prop="createtime" label="领取时间" width="172"></el-table-column>
                                    <el-table-column prop="use_time" label="使用时间" width="172"></el-table-column>
                                </el-table>
                                <el-footer class="sa-flex sa-row-right">
                                    <sa-pagination v-model="pagination" @pagination-change="getLog">
                                    </sa-pagination>
                                </el-footer>
                            </div>
                        </el-col>
                    </el-row>
                </el-col>
            </el-row>
        </el-main>
    </el-container>
</div>