<template>
    <div>
        <i-page-header title="门店列表" ></i-page-header>
        <Card :bordered="false" dis-hover class="ivu-mt">
            <Form ref="formValidate" :model="formValidate">
				<Row type="flex" :gutter="12">
					<Col>
					    <FormItem style="width: 180px"  label="用户UID：" label-for="uid">
					        <Input placeholder="用户UID" v-model="formValidate.uid"/>
					    </FormItem>
					</Col>
					<Col>
					    <FormItem style="width: 180px" label="绑定手机号：" label-for="mobile">
					        <Input  placeholder="绑定手机号" v-model="formValidate.mobile"/>
					    </FormItem>
					</Col>
					<Col>
					    <FormItem style="width: 180px" label="状态：" label-for="is_show">
					        <div style="width: 180px;height: 33px;"></div>
					        <div>
					            <el-col >
					                <el-select v-model="formValidate.is_show" placeholder="请选择状态">
					                    <el-option label="全部"   value=""></el-option>
										<el-option label="开启" value="1"></el-option>
										<el-option label="关闭" value="0"></el-option>
					                  </el-select>
					            </el-col>
					        </div>
					    </FormItem>
					</Col>
					<Col>
					    <FormItem style="width: 180px" label="门店名称：" label-for="name">
					        <Input  placeholder="门店名称" v-model="formValidate.name"/>
					    </FormItem>
					</Col>
					<Col class="ivu-text-right userFrom">
					    <FormItem style="margin-top: 30px">
					        <Button type="primary" icon="ios-search" label="default" class="mr15"  @click="getSearch">搜索</Button>
					    </FormItem>
					</Col>
					
				</Row>
            </Form>
            <div class="muser-order-container clearfix">
                <el-table :data="listData" height="500px" v-loading="isLoad" :stripe="true" :border="true" >
					<el-table-column  align="center"  width="100"  label="ID" prop="id"></el-table-column>
					<el-table-column  align="center"  width="200"  label="名称"     prop="name"> </el-table-column>
					<el-table-column  align="center"  width="200"  label="联系电话" prop="tel"> </el-table-column>
					<el-table-column  align="center"  width="200"  label="联系人"   prop="lx_name"> </el-table-column>
					<el-table-column  align="center"  label="地址"   prop="address"> </el-table-column>
					<el-table-column  align="center"  label="经度"   prop="longitude"> </el-table-column>
					<el-table-column  align="center"  label="纬度"   prop="latitude"> </el-table-column>
					
                    <el-table-column  align="center"  width="200"   label="用户"       prop="uid">
						<template slot-scope="scope">
							<div v-if="scope.row.uid">
								<div>{{scope.row.nickname}}[UID:{{scope.row.uid}}]</div>
							</div>
							<span v-else>--</span>
						</template>
					</el-table-column>
					<el-table-column  align="center"  minwidth="150"      label="添加时间"   prop="time"></el-table-column>
					<el-table-column  align="center"  width="80"       label="状态"       prop="is_show" >
					    <template slot-scope="scope">
					        <el-tag v-if="scope.row.is_show == 0"  type="warning">关闭</el-tag>
					        <el-tag v-if="scope.row.is_show == 1"  type="success">开启</el-tag>
					    </template>
					</el-table-column>
					<el-table-column  align="center"  minwidth="100"   label="操作"   prop="handle" >
					    <template slot-scope="scope">
							<el-button plain size="mini" @click="tapEdit(scope.row)">编辑</el-button>
					    </template>
					</el-table-column>
                </el-table>
                <div style="margin-top: 10px;">
                    <Page :total="page.count" :page-size="page.pageSize" show-total show-elevator @on-change="pageChange"/>
                </div>
            </div>
        </Card>
        <ui-loading :text="loadText" v-if="isLoading"></ui-loading>
		
		
		<Modal v-model="dialogVisible" :title="title" @on-cancel="editClose">
			<el-form ref="form" :model="form" label-width="120px">
				<el-form-item label="是否开启">
					<el-radio-group v-model="form.is_show">
						<el-radio :label="1">开启</el-radio>
						<el-radio :label="0">关闭</el-radio>
					</el-radio-group>
				</el-form-item>
				<el-form-item label="门店名称" :rules="[{ required: true, message: '请输入门店名称'}]">
				    <el-input placeholder="请输入门店名称！" v-model="form.name"></el-input>
				</el-form-item>
				<el-form-item label="联系电话" :rules="[{ required: true, message: '请输入门店联系电话'}]">
				    <el-input placeholder="请输入门店联系电话！" v-model="form.tel"></el-input>
				</el-form-item>
				<el-form-item label="联系人" :rules="[{ required: true, message: '请输入门店联系人'}]">
				    <el-input placeholder="请输入门店联系人！" v-model="form.lx_name"></el-input>
				</el-form-item>
				<el-form-item label="详细地址" :rules="[{ required: true, message: '请输入门店详细地址'}]">
				    <el-input placeholder="请输入门店详细地址！" v-model="form.address"></el-input>
				</el-form-item>
				<el-form-item label="经度定位">
				    <el-input placeholder="请输入门店经度定位！" v-model="form.longitude"></el-input>
				</el-form-item>
				<el-form-item label="纬度定位">
				    <el-input placeholder="请输入门店纬度定位！" v-model="form.latitude"></el-input>
				</el-form-item>
			</el-form>
			<span slot="footer" class="dialog-footer">
				<el-button @click="dialogVisible = false">取 消</el-button>
				<el-button type="primary" @click="subAdmin">确 定</el-button>
		    </span>
		</Modal>
		
		
		
    </div>
</template>


<script>
    import IPageHeader from "../../../layouts/system/page-header/index";
    import {SystemUserShopList,SystemUserShopSave} from "../../../api/system/user";
    import UiLoading from "../../../ui/loading/index";
    export default {
        name: "SystemShopList",
        components: {UiLoading, IPageHeader},
        computed: {},
        data() {
            return {
                listData:[],
                isLoad : true,
                loadText:"",
                isLoading:false,
                dialogVisible:false,
                title:"",
                form:{
                	id:"",
                	name:"",
                	address:"",
                	tel:"",
					lx_name:"",
                	longitude:"",
                	latitude:"",
                	is_show:0
                },
				options: {
				    shortcuts: [
				        {
				            text: '今天',
				            value() {
				                const end = new Date();
				                const start = new Date();
				                start.setTime(new Date(new Date().getFullYear(), new Date().getMonth(), new Date().getDate()));
				                return [start, end];
				            }
				        },
				        {
				            text: '昨天',
				            value() {
				                const end = new Date();
				                const start = new Date();
				                start.setTime(start.setTime(new Date(new Date().getFullYear(), new Date().getMonth(), new Date().getDate() - 1)));
				                end.setTime(end.setTime(new Date(new Date().getFullYear(), new Date().getMonth(), new Date().getDate())));
				                return [start, end];
				            }
				        },
				        {
				            text: '最近7天',
				            value() {
				                const end = new Date();
				                const start = new Date();
				                start.setTime(start.setTime(new Date(new Date().getFullYear(), new Date().getMonth(), new Date().getDate() - 6)));
				                return [start, end];
				            }
				        },
				        {
				            text: '最近30天',
				            value() {
				                const end = new Date();
				                const start = new Date();
				                start.setTime(start.setTime(new Date(new Date().getFullYear(), new Date().getMonth(), new Date().getDate() - 29)));
				                return [start, end];
				            }
				        },
				        {
				            text: '本月',
				            value() {
				                const end = new Date();
				                const start = new Date();
				                start.setTime(start.setTime(new Date(new Date().getFullYear(), new Date().getMonth(), 1)));
				                return [start, end];
				            }
				        },
				        {
				            text: '本年',
				            value() {
				                const end = new Date();
				                const start = new Date();
				                start.setTime(start.setTime(new Date(new Date().getFullYear(), 0, 1)));
				                return [start, end];
				            }
				        }
				    ]
				},
                formValidate: {
					is_show   : '',
					uid		  : '',
					mobile    : '',
					name      : '',
                },
                // 搜索区域
                grid: {
                    xl: 7,
                    lg: 7,
                    md: 12,
                    sm: 24,
                    xs: 24
                },
                //订单分页
                page : {
                    count : 0,
                    pageSize : 0,
                    page : 1
                }
            }
        },

        created() {
            this.initView();
        },
        methods: {
            initView:function(){
                this.getData();
            },
            getData:function () {
                var post = {...this.formValidate, page : this.page.page};
                this.isLoad = true;
                SystemUserShopList(post)
                    .then(res=>{
                        this.isLoad = false;
                        if(res.code == 200) {
                            this.listData = res.data.list;
                            this.page.pageSize = res.data.pageSize;
                            this.page.count = res.data.pageCount;
                        } else {
                            this.$alert(res.msg);
                        }
                    })
                    .catch(err=>{
                        this.isLoad = false;
                        this.listData = [];
                        this.$alert("网络繁忙，加载失败，请稍等片刻在尝试!", '系统提示');
                    });
            },
            pageChange: function (index) {
                this.page.page = index;
                this.getData();
            },
            //搜索
            getSearch () {
                this.page.page = 1;
                this.getData();
            },
			tapEdit:function(row){
				this.form = JSON.parse(JSON.stringify(row));
				this.form.is_show = this.form.is_show?this.form.is_show:0
				this.dialogVisible = true;
				this.title = "编辑";
			},
			//关闭
			editClose:function(){
			    this.dialogVisible = false;
			},
			/**
			 * 修改数据
			 */
			subAdmin:function(e){
			    this.$refs['form'].validate((valid) => {
			        if (valid) {
			            let loading = this.$loading("提交数据中...");
			            var data = {};
			            for(var i in this.form) {
			                data[i] = this.form[i];
			            }
			            SystemUserShopSave(data).then(res => {
			                loading.close();
			                if (res.code == 200) {
			                    this.dialogVisible = false;
			                    this.$Message.success("操作成功");
			                    this.getData();
			                } else {
			                    this.$alert(res.msg, '系统提示');
			                }
			            }).catch(err => {
			                loading.close();
			                this.$alert("网络繁忙，加载失败，请稍等片刻在尝试!", '系统提示');
			            });
			        }
			    });
			},
			

        }
    }
</script>
<style scoped>
    .muser-order-container{background: #ffffff;padding: 20px;margin-bottom: 20px;}

    .muser-order-count-nav{padding: 0px 50px;width:30%;position: relative;}
    .muser-order-count-nav-name{font-size: 14px;color:#9B9B9B;height:20px;line-height: 20px;}
    .muser-order-count-nav-val{display: inline-block;height:42px;line-height: 42px;font-size: 32px;color:#333333;font-weight: 700;}
    .muser-order-count-nav-unit{display: inline-block;height:20px;line-height: 20px;font-size: 14px;color:#333333;}
    .muser-order-count-line{height:72px;width:1px;background: #EEEEEE;}
    a.muser-order-count-a{display: block;position: absolute;top:20px;right:50px;height:32px;line-height: 32px;padding: 0px 20px;border:1px solid #FFB300;border-radius: 20px;color:#FFB300;font-size: 14px;}
    a.muser-order-count-a.muser-afull{background: #FFB300;color:#ffffff}
    .user-show{background: #ffffff;padding: 0px 15px;}
    .user-show-title{height:32px;line-height: 32px;padding-left: 7px;position: relative;font-size: 16px;color:#333333}
    .user-show-title .sline{width: 3px;height: 14px;background: #EA312B;border-radius: 2px;position: absolute;top:9px;left:0px}
    .user-show-content{}

    table.muser-order-table{width:100%;border:1px solid #f0f0f0}
    table.muser-order-table tr:nth-child(odd){background: #F7F7F7;}
    table.muser-order-table tr th{padding: 12px 0px;font-size: 13px;color:#848484;text-align: center;}
    table.muser-order-table tr td{padding: 16px 0px;font-size: 12px;color:#333333;text-align: center;border-top:1px solid #f0f0f0}
    a.muser-order-table-a{font-size: 12px;color:#1492E6;}
    .muser-order-table-line{display: inline-block;height:10px;background: rgba(112,112,112,0.31);width:1px;margin: 0px 4px;}

    .spping{ position: absolute; width: 100%;height: 100%;z-index: 9;top: 0;left: 0; background: rgba(255,255,255,0.5);}

    .muser-tab-continer{border-bottom:1px solid #EEEEEE}
    a.muser-tab-a{display: inline-block;padding: 0px 28px;height:42px;line-height: 42px;border-bottom:3px solid transparent;font-size: 17px;color:#595959;}
    a.muser-tab-a.active{border-bottom:3px solid #EA312B;color:#EA312B}
	
	
	
	.demo-table-expand {
	    font-size: 0;
	  }
	  .demo-table-expand label {
	    width: 90px;
	    color: #99a9bf;
	  }
	  .demo-table-expand .el-form-item {
	    margin-right: 0;
	    margin-bottom: 0;
	    width: 100%;
	  }
	
</style>
