<template>
    <el-drawer :title="titleMap[mode]" :append-to-body="true" v-model="visible" :size="1000" destroy-on-close :close-on-click-modal="false" @closed="$emit('closed')" :with-header="false">
        <el-container class="flex-column" v-loading="loading">
            <div class="drawer-detail-main">
                <div class="drawer-detail-header">
                    <div class="drawer-detail-header-body">
                        <div class="drawer-detail-header-left">{{ titleMap[mode] }} <span class="tips">{{ formData.truename }}</span></div>
                        <div class="drawer-detail-header-left">
                            <el-button type="default" icon="el-icon-close" @click="visible=false"></el-button>
                        </div>
                    </div>
                </div>
            </div>
            <div class="table-search">
                <search @success="handleSuccess"></search>
                <optionBtn @success="handleSuccess" :agent="formData" :dataSelect="dataSelect" :dataSelectFull="dataSelectFull" ></optionBtn>
            </div>
            <el-main>
                <scTable ref="table" :apiObj="list.apiObj" :params="searchKey" @selectionChange="selectionChange" row-key="id" border>
                    <el-table-column type="selection" width="50" fixed="left"></el-table-column>
                    <el-table-column label="登录账号" prop="truename" width="150" fixed="left">
                        <template #default="scope">
                            <span v-if="scope.row.username">{{ scope.row.username }}</span>
                            <span class="status-danger" v-else>未设置</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="账号ID" prop="user_id" width="150"></el-table-column>
                    <el-table-column label="账号名称" prop="truename" width="200">
                        <template #default="scope">
                            <span v-if="scope.row.truename">{{ scope.row.truename }}</span>
                            <span class="status-danger" v-else>未设置</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="手机号码" prop="mobile" width="150">
                        <template #default="scope">
                            <span v-if="scope.row.mobile">{{ scope.row.mobile }}</span>
                            <span class="status-danger" v-else>-</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="类型" prop="type" width="120" align="center">
                        <template #default="scope">
                            <div class="status-success" v-if="scope.row.type==3 && formData.store_id == scope.row.user_id"><sc-status-indicator type="success"></sc-status-indicator> 主账号</div>
                            <div class="status-success" v-if="scope.row.type==3 && formData.store_id !== scope.row.user_id"><sc-status-indicator type="success"></sc-status-indicator> 子账号</div>
                        </template>
                    </el-table-column>
                    <el-table-column label="状态" prop="status" width="120" align="center">
                        <template #default="scope">
                            <div class="status-success" v-if="scope.row.status==1"><sc-status-indicator type="success"></sc-status-indicator> 正常</div>
                            <div class="status-danger" v-if="scope.row.status==2"><sc-status-indicator type="danger"></sc-status-indicator> 已冻结</div>
                        </template>
                    </el-table-column>
                    <el-table-column label="创建时间" prop="create_at" width="180"></el-table-column>
                    <el-table-column label="操作" width="120" align="right" fixed="right">
                        <template #default="scope">
                            <el-button-group>
                                <el-button text type="warning" size="small" @click="table_edit(scope.row)">编辑</el-button>
                                <el-popconfirm title="确定删除吗？" @confirm="table_del(scope.row, scope.$index)">
                                    <template #reference>
                                        <el-button text type="danger" size="small">删除</el-button>
                                    </template>
                                </el-popconfirm>                    
                            </el-button-group>
                        </template>
                    </el-table-column>
                </scTable>
            </el-main>
            <el-footer>
                <el-button @click="visible=false">关 闭</el-button>
            </el-footer>
        </el-container>
    </el-drawer>
    <formMain ref="formMain" @success="handleSuccess"></formMain>
</template>

<script>
import search from '@/views/manage/user/merchant/user/search';
import optionBtn from '@/views/manage/user/merchant/user/option';
import formMain from './user_form';
export default{
    components: {
        search,optionBtn,formMain
    },
    data(){
        return {
            loading: false,
            mode:"add",
            visible: false,
            titleMap:{
                add:"门店名下用户",
                edit:"门店名下用户"
            },
            list: {
                apiObj: this.$API.user.list
            },
            formData:{},
            searchKey:{},
            dataSelect:[],
            dataSelectFull:[],
        }
    },
    methods:{
        async table_del(data){
            var resp = await this.$API.user.del.post({"id":data.id});
            if (resp.code == 0) {
                return this.$message.warning(resp.msg);
            }
            this.$message.success(resp.msg);
            this.$refs.table.refresh()
        },
        table_edit(row){
            this.$nextTick(() => {
                this.$refs.formMain.open("edit").setData(row)
            })
        },
        open(mode = 'add'){
            this.mode = mode;
            this.visible = true;
            return this
        },
        //表单注入数据
        setData(data){
            this.formData = data;
            this.searchKey.store = data.store_id;
        },
        selectionChange(event){
            this.dataSelect = [];
            var arr = [];
            var arrCompany = [];
            event.forEach(function(val,index){
                arr[index] = val.id;
                arrCompany[index] = val;
            });
            this.dataSelectFull = arrCompany;
            this.dataSelect = arr;
        },
        refresh(){
            this.$refs.table.refresh()
        },
        upData(data){
            this.$refs.table.upData(data)
        },
        handleSuccess(data){
            this.$refs.table.upData(data)
        },
    }
}
</script>