<template>
    <div>
        <Tabs active-key="key1" @on-click="onTabClick">
            <Tab-pane label="待审核" key="key1">
                <Row class="search-row">
                    <i-col span="24" class="search-col">
                        <Row class="row-style">
                            <i-input placeholder="请输入推广员姓名或手机号" class="search-select" v-model="searchShop"/>
                            <span class="search-span">选择日期</span>
                            <DatePicker v-model="date" class="left-15 date-picker" type="date"
                                placement="bottom-start"
                                split-panels placeholder="请选择日期">
                            </DatePicker>
                            <span class="search-span">零售公司</span>
                            <Select v-model="companyId" filterable class="search-select" @on-change="companySelect">
                                <Option v-for="(item,index) in companyList" :value="item.id" :key="index + item.id">{{ item.name }}</Option>
                            </Select>
                            <span class="search-span">店铺</span>
                            <Select v-model="selectedStore" filterable class="search-select">
                                <Option v-for="(item,index) in shopList" :value="item.id" :key="index + item.id">{{ item.name }}</Option>
                            </Select>
                            <Button type="primary" @click="searchCustomerDataBtnClick" class="search-btn">查询</Button>

                        </Row>
                    </i-col>
                </Row>
                <Table ref="table" :loading="loading" :columns="columns1" :data="data1" class="table-store" size="small"                       @on-row-dblclick="onDblClickRowLister">
                   
                    <template slot="action" slot-scope="{row}">
                        <i-col span="12">
                            <Button type="success" class="router-btn" 
                                    @click="() => {stop(row)}">审核通过</Button>
                        </i-col>
                        <i-col span="12">
                            <Button type="error" class="router-btn"
                                    @click="() => {show(row)}">审核不通过</Button>
                        </i-col>
                    </template>
                    
                </Table>
            </Tab-pane>
            <Tab-pane label="通过审核" key="key2">
                <Row class="search-row">
                    <i-col span="24" class="search-col">
                        <Row class="row-style">
                            <i-input placeholder="请输入推广员姓名或手机号" class="search-select" v-model="searchShop"/>
                            <span class="search-span">选择日期</span>
                            <DatePicker v-model="date" class="left-15 date-picker" type="date"
                                placement="bottom-start"
                                split-panels placeholder="请选择日期">
                            </DatePicker>
                            <span class="search-span">零售公司</span>
                            <Select v-model="companyId" filterable class="search-select" @on-change="companySelect">
                                <Option v-for="(item,index) in companyList" :value="item.id" :key="index + item.id">{{ item.name }}</Option>
                            </Select>
                            <span class="search-span">店铺</span>
                            <Select v-model="selectedStore" filterable class="search-select">
                                <Option v-for="(item,index) in shopList" :value="item.id" :key="index + item.id">{{ item.name }}</Option>
                            </Select>
                            <Button type="primary" @click="searchCustomerDataBtnClick" class="search-btn">查询</Button>

                        </Row>
                    </i-col>
                </Row>
            <Table ref="table" :loading="loading" :columns="columns2" :data="data2" class="table-store" size="small"                          @on-row-dblclick="onDblClickRowLister">
                    
                </Table>
            </Tab-pane>
            <Tab-pane label="审核未通过" key="key3">
                <Row class="search-row">
                    <i-col span="24" class="search-col">
                        <Row class="row-style">
                            <i-input placeholder="请输入推广员姓名或手机号" class="search-select" v-model="searchShop"/>
                            <span class="search-span">选择日期</span>
                            <DatePicker v-model="date" class="left-15 date-picker" type="date"
                                placement="bottom-start"
                                split-panels placeholder="请选择日期">
                            </DatePicker>
                            <span class="search-span">零售公司</span>
                            <Select v-model="companyId" filterable class="search-select" @on-change="companySelect">
                                <Option v-for="(item,index) in companyList" :value="item.id" :key="index + item.id">{{ item.name }}</Option>
                            </Select>
                            <span class="search-span">店铺</span>
                            <Select v-model="selectedStore" filterable class="search-select">
                                <Option v-for="(item,index) in shopList" :value="item.id" :key="index + item.id">{{ item.name }}</Option>
                            </Select>
                            <Button type="primary" @click="searchCustomerDataBtnClick" class="search-btn">查询</Button>

                        </Row>
                    </i-col>
                </Row>
                <Table ref="table" :loading="loading" :columns="columns3" :data="data3" class="table-store" size="small"                              @on-row-dblclick="onDblClickRowLister">
                   
                </Table>
            </Tab-pane>
        </Tabs>
        
        <!-- 拒绝 -->
        <Modal
                v-model="isShow"
                :title="showStoreName"
                :footer-hide="true"
                width="600"
                class-name="vertical-center-modal"
                @on-ok="ok">
            <div slot="header">
                <p>审核不通过原因</p>
            </div>
            <div>
                <i-input type="textarea" :rows="4" placeholder="请填写审核不通过原因"></i-input>
            </div>
            <div style="margin-top:20px;text-align: center;">
                <Button ghost type="primary" @click="refuse(rowData)">确定</Button>
            </div>
        </Modal>
       
        <Page :total="total" :current="pageNum" :page-size="pageSize" show-elevator show-total
            placement="top" @on-change="handlePage" class-name="ks-page"></Page>
    </div>
</template>

<script>
    export default {
        name: "",
        data() {
            return {
                tabIndex:0,
                searchShop:null,
                date:"",
                companyId:0,                
                isShow: false,
                showStoreName: '',
                rowData:{},
                //零售公司list
                companyList: [],
                selectedStore: 0,
                shopList: [],
                loading:false,
                total: 0,
                pageSize: 10,
                pageNum: 1,
                columns1: [
                    {
                        title: '序号',
                        key: 'number',
                        width:60
                    },
                    {
                        title: '推广员姓名',
                        key: 'shopName',
                        width:120
                    },
                    {
                        title: '推广员手机号',
                        key: 'shopPhone',
                        width:120
                    },
                    {
                        title: '身份证号码',
                        key: 'shopCode',
                        width:160
                    },
                    {
                        title: '银行卡号',
                        key: 'bankCard',
                        width:150
                    },
                    {
                        title: '零售公司',
                        key: 'companyName',
                        width:150
                    },
                    {
                        title: '零售公司编号',
                        key: 'companyCode',
                        width:80
                    },
                    {
                        title: '店铺',
                        key: 'storeName',
                        width:160
                    },
                    {
                        title: '店铺编号',
                        key: 'storeNO',
                        width:80
                    },
                    {
                        title: '发展人',
                        key: 'fissionNum',
                        width:80
                    },
                    {
                        title: '提交时间',
                        key: 'submitDate',
                        width:120
                    },
                    {
                        title: '操作',
                        slot: 'action',
                        width:250
                    }
                ],
                data1:[
                    {
                        shopName:'张继军',
                        shopPhone:'13819890111',
                        shopCode:'110001199010018171',
                        bankCard:'62210199918822121',
                        companyName:'上海零售公司',
                        companyCode:'601',
                        storeName:'上海波司登',
                        storeNO:'1001',
                        fissionNum:'王超看',
                        submitDate:'2020/05/21'
                    }
                ],
                columns2: [
                    {
                        title: '序号',
                        key: 'number',
                        width:60
                    },
                    {
                        title: '推广员姓名',
                        key: 'shopName',
                        width:120
                    },
                    {
                        title: '推广员手机号',
                        key: 'shopPhone',
                        width:120
                    },
                    {
                        title: '身份证号码',
                        key: 'shopCode',
                        width:160
                    },
                    {
                        title: '银行卡号',
                        key: 'bankCard',
                        width:150
                    },
                    {
                        title: '零售公司',
                        key: 'companyName',
                        width:150
                    },
                    {
                        title: '零售公司编号',
                        key: 'companyCode',
                        width:80
                    },
                    {
                        title: '店铺',
                        key: 'storeName',
                        width:160
                    },
                    {
                        title: '店铺编号',
                        key: 'storeNO',
                        width:80
                    },
                    {
                        title: '导购',
                        key: 'salesName',
                        width:80
                    },
                    {
                        title: '提交时间',
                        key: 'submitDate',
                        width:120
                    },
                    {
                        title: '审核时间',
                        key: 'checkDate',
                        width:120
                    },
                ],
                data2:[
                    {
                        shopName:'张继军',
                        shopPhone:'13819890111',
                        shopCode:'110001199010018171',
                        bankCard:'62210199918822121',
                        companyName:'上海零售公司',
                        companyCode:'601',
                        storeName:'上海波司登',
                        storeNO:'1001',
                        salesName:'王超看',
                        submitDate:'2020/05/21',
                        checkDate:'2020/05/21',
                    }
                ],
                columns3: [
                    {
                        title: '序号',
                        key: 'number',
                        width:60
                    },
                    {
                        title: '推广员姓名',
                        key: 'shopName',
                        width:120
                    },
                    {
                        title: '推广员手机号',
                        key: 'shopPhone',
                        width:120
                    },
                    {
                        title: '身份证号码',
                        key: 'shopCode',
                        width:160
                    },
                    {
                        title: '银行卡号',
                        key: 'bankCard',
                        width:150
                    },
                    {
                        title: '零售公司',
                        key: 'companyName',
                        width:150
                    },
                    {
                        title: '零售公司编号',
                        key: 'companyCode',
                        width:80
                    },
                    {
                        title: '店铺',
                        key: 'storeName',
                        width:160
                    },
                    {
                        title: '店铺编号',
                        key: 'storeNO',
                        width:80
                    },
                    {
                        title: '导购',
                        key: 'salesName',
                        width:80
                    },
                    {
                        title: '提交时间',
                        key: 'submitDate',
                        width:120
                    },
                    {
                        title: '审核时间',
                        key: 'checkDate',
                        width:120
                    },
                    {
                        title: '审核不通过原因',
                        key: 'refuseInfo',
                        width:120
                    },
                ],
                data3:[
                    {
                        shopName:'张继军',
                        shopPhone:'13819890111',
                        shopCode:'110001199010018171',
                        bankCard:'62210199918822121',
                        companyName:'上海零售公司',
                        companyCode:'601',
                        storeName:'上海波司登',
                        storeNO:'1001',
                        salesName:'王超看',
                        submitDate:'2020/05/21',
                        checkDate:'2020/05/21',
                        refuseInfo:'信息不完善'
                    }
                ],
            }
        },
        mounted: function () {
            
        },
        methods: {
            //零售公司选择
            companySelect: function () {
                //加载店铺
                this.downShopData(this.companyId);
                this.selectedStore = 0;
            },
            downCompanyChange: function (formValidate) {
                this.downShopData(formValidate.departIds);
            },            
            searchCustomerDataBtnClick: function () {
                this.pageNum = 1;
                this.getCheckList();
            },
            // 双击row跳转详情页面
            onDblClickRowLister: function (row) {
                this.$router.push({path:'/shop/increase/manager/staff',query:{storeId:row.id}});
            },
            //切页处理
            handlePage: function (value) {
                this.pageNum = value;
                this.getCheckList();
            },
            getCheckList() {
                let that = this;
                this.loading = true;

                let request = {
                    userId: that.userId,
                    regionId: that.changeData(that.regionId),
                    companyId: that.changeData(that.companyId),
                    storeId: that.changeData(that.selectedStore),
                    pageNum: that.pageNum,
                    pageSize: that.pageSize,
                    code: that.searchShop
                };
                http.checkList(request, function (data) {
                    data = data.data;
                    that.loading = false;
                    if (data.code == "0000") {
                        that.data1 = [];
                        let datas = data.results;
                        //总页数
                        if (datas.total == null) {
                            that.total = 0;
                        } else {
                            that.total = datas.total;
                        }
                        if (datas.list == null) {
                            datas.list = [];
                        }
                        that.data1 = datas.list;
                    }
                }, function (error) {
                    that.loading = false;
                });
            },
            onTabClick(e){
                this.tabIndex = e;
                console.log('tabIndex',this.tabIndex);
            },
            ok() {
                this.isShow = false;
            },
            // 拒绝审核
            refuse(index) {
                console.log(123);                
                this.isShow = false;
            },
            show(index) {
                this.isShow = true;
                this.rowData = index;
            },
        }
    }
</script>

<style scoped>

    .table-store {
        margin-top: 20px;
    }
    .search-btn{
        margin-left: 40px;
    }
</style>
