<template>
    <div>
        <Row style="margin-top: 20px;width: 100%;background-color: #F7F8FA;">
            <i-col span="24" style="text-align: left;padding-left: 10px;">
                <Row class="row-style">
                    <i-col span="1" style="text-align: right;">
                        <span class="region">区域选择</span>
                    </i-col>
                    <i-col span="4" style="padding-left: 10px;">
                        <Select v-model="selectedRegion" filterable style="width: 200px;">
                            <Option v-for="item in regionList" :value="item.value" :key="item.value">{{ item.label }}</Option>
                        </Select>
                    </i-col>
                    <i-col span="1" style="text-align: right;">
                        <span class="region">店铺选择</span>
                    </i-col>
                    <i-col span="4" style="padding-left: 10px;">
                        <Select v-model="selectedStore" filterable style="width: 200px;">
                            <Option v-for="item in storeList" :value="item.value" :key="item.value">{{ item.label }}</Option>
                        </Select>
                    </i-col>
                    <i-col span="2">
                        <Button type="primary">查询</Button>
                    </i-col>
                    <i-col span="12" style="text-align: right;padding-right: 20px;">
                        <Button type="primary" style="margin-right: 10px;">批量下载</Button>
                        <Button type="primary" style="margin-right: 10px;">批量开通</Button>
                    </i-col>
                </Row>
            </i-col>
        </Row>

        <Table :columns="columns1" :data="data1" style="margin-top: 20px;">
            <template slot-scope="{ row, index }" slot="qrCodeAction">
                <Button ghost type="primary" size="small" style="margin-right: 5px" @click="show(index)">预览</Button>
                <Button ghost type="primary" size="small" @click="download(index)">下载</Button>
            </template>

            <template slot-scope="{ row, index }" slot="action">
                <Button ghost type="primary" size="small" style="margin-right: 5px" @click="open(index)">开通门店企微号</Button>
                <Button ghost type="error" size="small" @click="remove(index)">删除微信号</Button>
            </template>
        </Table>
    </div>
</template>

<script>
    export default {
        name: "IncreaseStoreManager",
        data () {
            return {
                selectedRegion: null,
                regionList: [],
                selectedStore: null,
                storeList: [],
                columns1: [
                    {
                        title: '序号',
                        key: 'id',
                        width: 100
                    },
                    {
                        title: '门店名称',
                        key: 'storeName'
                    },
                    {
                        title: '门店企业号',
                        key: 'storeWx'
                    },
                    {
                        title: '员工数',
                        key: 'staffNum',
                    },
                    {
                        title: '客户数',
                        key: 'customerNum',
                        width: 100
                    },
                    {
                        title: '推广码',
                        slot: 'qrCodeAction',
                        width: 150
                    },
                    {
                        title: '操作',
                        slot: 'action',
                    }
                ],
                data1: [
                    {
                        id: 1,
                        storeName: '店铺1',
                        storeWx: 'D1',
                        staffNum: 10,
                        customerNum: 999
                    },
                    {
                        id: 2,
                        storeName: '店铺2',
                        storeWx: 'D2',
                        staffNum: 10,
                        customerNum: 999
                    },
                    {
                        id: 3,
                        storeName: '店铺3',
                        storeWx: 'D3',
                        staffNum: 10,
                        customerNum: 999
                    },
                    {
                        id: 4,
                        storeName: '店铺4',
                        storeWx: 'D4',
                        staffNum: 10,
                        customerNum: 999
                    }
                ]
            }
        },
        methods: {
            onChangeDateLister: function () {

            },
            show: function () {

            },
            download: function () {

            },
            open: function () {

            },
            remove: function () {

            }
        }
    }
</script>

<style scoped>
    .region {
        font-size: 14px;
        line-height: 32px;
    }
    .row-style {
        padding-top: 20px;
        padding-bottom: 20px;
    }
</style>
