<template>
    <div style="padding-top: 10px;">
		<i-page-header :title="pageTitle"></i-page-header>
        <Card :bordered="false" dis-hover class="ivu-mt">
            <Form ref="orderData" :model="orderData">
                <Row :gutter="24" type="flex">
					<Col>
					    <FormItem label="UID：" label-for="uid">
					        <Input placeholder="用户UID" v-model="orderData.uid"/>
					    </FormItem>
					</Col>
					<Col>
					    <FormItem label="绑定手机：" label-for="mobile">
					        <Input placeholder="绑定手机号码" v-model="orderData.mobile"/>
					    </FormItem>
					</Col>
					<Col>
					    <FormItem label="购买时间：">
					        <DatePicker v-model="orderData.time" format="yyyy/MM/dd HH:mm:ss" type="datetimerange" placement="bottom-start" placeholder="自定义时间" style="width: 300px;" class="mr20" :options="options"></DatePicker>
					    </FormItem>
					</Col>
					<Col>
					    <Button label="default" type="primary" icon="ios-search"  class="mr15" style="margin-top: 32px;" @click="orderSearch()">搜索</Button>
					</Col>
                </Row>
            </Form>
            <!-- <Col>
                <Button class="export" icon="ios-share-outline" @click="exports">导出</Button>
            </Col> -->
			

            <Table :columns="columns"  :data="orderList" ref="table" :loading="loading" highlight-row no-data-text="暂无数据" no-filtered-data-text="暂无筛选结果"  class="orderData mt25">
                <template slot-scope="{ row, index }" slot="order_id">
                    <span v-text="row.order_id" style="display: block;"></span>
                </template>
				<template slot-scope="{ row, index }" slot="uid">
					<div>{{row.nickname}}[UID:{{row.uid}}]</div>
					<div>{{row.mobile}}</div>
				</template>
				<template slot-scope="{ row, index }" slot="imgs">
					<img v-if="row.imgs.length>0" v-lazy="row.imgs[0]" :src="row.imgs[0]" v-image-preview style="width: 60px;cursor: pointer"/>
				</template>
				
				<template slot-scope="{ row, index }" slot="is_default">
					<el-tag type="success" size="mini" v-if="row.is_default == 1">默认模板</el-tag>
				</template>
				
				
				
            </Table>
            <div class="acea-row row-right page">
                <Page :total="page.count" show-elevator show-total @on-change="tapPage" :page-size="page.pageSize"/>
            </div>
        </Card>
       
    </div>
</template>
<script>
    import IPageHeader from "../../../layouts/system/page-header/index";
    import {SystemShowTemplateList} from "../../../api/system/user";

    export default {
        name: "SystemUserShowTemplateList",
        components: {SystemShowTemplateList,IPageHeader},
        computed: {},
        data() {
            return {
				pageTitle:"用户模板",
                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];
                            }
                        }
                    ]
                },

                orderData: {
					uid             : "",
                    status          : "all",
                    time            : [],
					mobile          : "",
					show_template_id:"",
                },
                columns: [
					{
					    title: 'ID',
					    align: 'center',
					    key: 'id',
					    align:'center'
					},

                    {
                        title: '用户UID',
						key: 'uid',
                        align:'center'
                    },
					{
					    title: '用户昵称',
					    key: 'nickname',
					    align:'center'
					},
					{
					    title: '用户手机',
					    key: 'mobile',
					    align:'center'
					},
					{
					    title: '模板主图',
					    align: 'center',
					    slot: 'imgs',
					    align:'center'
					},
					{
					    title: '模板标题',
					    align: 'center',
					    key: 'title',
					    align:'left'
					},
					{
					    title: '购买时间',
					    align: 'center',
					    key: 'start_time',
					    align:'left'
					},
                    {
                        title: '是否默认',
                        slot: 'is_default',
                        align:'center'
                    }
                ],
                loading:false,
                orderList:[],
                orderDatalist:{},
                orderId : 0,
                page: {
                    total: 0, // 总条数
                    page: 1, // 当前页
                    pageSize: 10 // 每页显示条数
                },
            }
        },

        created() {
			if(this.$route.query.title){
				this.pageTitle = this.$route.query.title;
			}
			if(this.$route.query.uid){
				this.orderData.uid = parseInt(this.$route.query.uid);
			}
			if(this.$route.query.show_template_id){
				this.orderData.show_template_id = parseInt(this.$route.query.show_template_id);
			}
            this.initView();
        },
        methods: {
            /**
             * 基本数据
             */
            initView: function () {
                this.getData();
            },
			tabsHandleClick:function(tab, event){
				this.page.page = 1;
				this.getData();
			},
            orderSearch:function(){
                this.page.page = 1;
                this.getData();
            },
            /**
             * 分页
             */
            tapPage:function(index){
                this.page.page = index;
                this.getData();
            },
            /**
             * 获取数据
             */
            getData:function () {
				var that =this;
                this.loading = true;
                var data = {
                    page :that.page.page,
                    ...that.orderData
                };
                SystemShowTemplateList(data)
                    .then(res=>{
                        that.loading = false;
                        if(res.code == 200) {
                            that.orderList = res.data.list;
                            that.page.pageSize = res.data.pageSize;
                            that.page.count = res.data.pageCount;
                        } else {
                            that.$alert(res.msg);
                        }
                    })
                    .catch(err=>{
                        that.loading = false;
                        that.$alert("网络繁忙，加载失败，请稍等片刻在尝试!", '系统提示');
                    });
            },

        }
    }
</script>
<style scoped>

</style>
