<template>
    <scTable ref="table" :apiObj="list.apiObj" :params="searchKey" @selectionChange="selectionChange" row-key="id">
        <el-table-column type="selection" width="50" fixed="left"></el-table-column>
        <el-table-column label="店铺名称" width="200" fixed="left" prop="poi_name"></el-table-column>
        <el-table-column label="店铺编码" prop="poi_id" width="200"></el-table-column>
        <el-table-column label="到期时间" prop="agent" width="200">
            <template #default="scope">
                <span v-if="scope.row.vip_end">{{ scope.row.vip_end }}</span>
                <span class="status-danger" v-else>未设置</span>
            </template>
        </el-table-column>
        <el-table-column label="营业时间" prop="agent" width="150">
            <template #default="scope">
                <span v-if="scope.row.start_at">{{ scope.row.start_at }}-{{ scope.row.end_at }}</span>
                <span class="status-danger" v-else>未设置</span>
            </template>
        </el-table-column>
        <el-table-column label="可核销时间" prop="agent" width="150">
            <template #default="scope">
                <span v-if="scope.row.order_start">{{ scope.row.order_start }}-{{ scope.row.order_end }}</span>
                <span class="status-danger" v-else>09:00-22:30</span>
            </template>
        </el-table-column>
        <el-table-column label="所属地区" prop="agent" width="200">
            <template #default="scope">
                <span v-if="scope.row.poi_city">{{ scope.row.poi_city }}</span>
                <span class="status-danger" v-else>未设置</span>
            </template>
        </el-table-column>
        <el-table-column label="详细地址" prop="poi_address" width="320">
            <template #default="scope">
                <span v-if="scope.row.poi_address">{{ scope.row.poi_address }}</span>
                <span class="status-danger" v-else>未设置</span>
            </template>
        </el-table-column>
        <el-table-column label="经纬度" prop="poi_address" width="240">
            <template #default="scope">
                <el-link style="font-size: 12px;" icon="el-icon-view" :underline="false" :href="'//uri.amap.com/marker?position='+scope.row.longitude+','+scope.row.latitude+'&name='+scope.row.poi_name+'&src=mypage&coordinate=gaode&callnative=0'" target="_blank">{{ scope.row.longitude }},{{ scope.row.latitude }}</el-link>
            </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="180" align="left" fixed="right">
            <template #default="scope">
                <el-button-group>
                    <el-button type="success" text size="small" @click="table_cate(scope.row)">品类</el-button>
                    <el-button type="primary" text size="small" @click="table_express(scope.row)">快递</el-button>
                    <el-button type="warning" text size="small" @click="table_qrcode(scope.row)">二维码</el-button>
                </el-button-group>
                <el-button-group>
                    <el-button size="small" text @click="table_view(scope.row)">编辑</el-button>
                    <el-button type="danger" text size="small" @click="table_del(scope.row)">删除</el-button>
                </el-button-group>
            </template>
        </el-table-column>
    </scTable>
    <formMain ref="formMain" @success="handleSuccess"></formMain>
    <comboMain ref="comboMain" @success="handleSuccess"></comboMain>
    <categoryMain ref="categoryMain" @success="handleSuccess"></categoryMain>
    <expressMain ref="expressMain" @success="handleSuccess"></expressMain>
    <el-dialog :title="qrcodeData.title" :close-on-click-modal="false" v-model="qrVisible" :width="400" destroy-on-close>
        <div class="qrcode-img">
            <el-image :src="qrcodeData.img"></el-image>
        </div>
    </el-dialog>
</template>

<script>
import formMain from './form';
import comboMain from './combo';
import categoryMain from './category';
import expressMain from './express';
export default {
    components: {
        formMain,comboMain,categoryMain,expressMain
    },
    data(){
        return {
            list: {
                apiObj: this.$API.store.list
            },
            dataSelect:[],
            dataSelectFull:[],
            searchKey:{},
            qrVisible:false,
            qrcodeData:{
                img:"https://washmy.oss-cn-guangzhou.aliyuncs.com/storage/20260511/23627b2cb8f73a8a90b95c31d726e6ecad0cbb9a.png",
                title:"店铺二维码"
            }
        }
    },
    methods: {
        table_express(data){
            this.$nextTick(() => {
                this.$refs.expressMain.open("add").setData(data)
            })
        },
        async table_qrcode(data){
            var loading = this.$loading()
            var resp = await this.$API.store.qrcode.get({id:data.id});
            loading.close()
            if (resp.code == 0) return this.$message.error(resp.msg);
            this.qrVisible = true;
            this.qrcodeData.img = "data:image/png;base64,"+resp.data.qrcode.img;
            this.qrcodeData.title = "店铺【"+data.poi_name+"】二维码";
        },
        table_cate(data){
            this.$nextTick(() => {
                this.$refs.categoryMain.open("add").setData(data)
            })
        },
        table_auth(data){
            this.$nextTick(() => {
                this.$refs.comboMain.open("edit").setData(data)
            })
        },
        table_view(data){
            this.$nextTick(() => {
                this.$refs.formMain.open("edit").setData(data)
            })
        },
        table_del(data){
            this.$confirm(`删除店铺后，所有有关该店铺的门店、订单等信息都将删除，不可恢复，确定要执行删除吗`, '提示', {
                type: 'warning'
            }).then(async ()=>{
                var resp = await this.$API.shop.del.post({"id":data.id});
                if (resp.code == 0) {
                    return this.$message.error(resp.msg);
                }
                this.$message.success(resp.msg);
                this.$emit("success");
            }).catch(()=>{})
        },
        refresh(){
            this.$refs.table.refresh()
        },
        upData(data){
            this.$refs.table.upData(data)
        },
        handleSuccess(){
            this.$refs.table.refresh()
        },
        sortChange(event){
            if (event.order) {
                var data = {
                    "field":event.prop,
                    "order":event.order
                }
                this.$refs.table.upData(data)
            } else {
                this.$refs.table.reload(this.searchKey)
            }
            return ;
        },
        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;
            this.$emit("success",this.dataSelect);
            this.$emit("successFull",this.dataSelectFull);
        },
        table_passwd(row){
            this.$nextTick(() => {
                this.$refs.userPasswd.open("edit").setData(row)
            })
        }
    }
}
</script>
<style>
.tag-flex{display: flex;align-items: center;gap: 5px;}
</style>