<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>
					    <FormItem label="订单号：" prop="order_id" label-for="order_id">
							<Input style="width: 200px" v-model="orderData.order_id" placeholder="请输入订单编号" />
					    </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> -->
			
			<el-tabs v-model="orderData.status" @tab-click="tabsHandleClick">
			    <el-tab-pane :label="'全部订单('+orderTotal.orderCount  + ')'"      name="all"></el-tab-pane>
			    <el-tab-pane :label="'待支付('  +orderTotal.waitPayCount + ')'"     name="0"></el-tab-pane>
			    <el-tab-pane :label="'已支付('  +orderTotal.waitSendCount  + ')'"   name="1"></el-tab-pane>
			    <el-tab-pane :label="'已关闭('  +orderTotal.closeCount  + ')'"      name="-1"></el-tab-pane>
			</el-tabs>
            <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="show_template_imgs">
					<img v-if="row.show_template_imgs.length>0" v-lazy="row.show_template_imgs[0]" :src="row.show_template_imgs[0]" v-image-preview style="width: 60px;cursor: pointer"/>
				</template>
                <template slot-scope="{ row, index }" slot="status">
                    <Tag v-if="row.status == 0">待付款</Tag>
                    <Tag color="primary" v-if="row.status == 1">已付款</Tag>
					<Tag color="error" v-if="row.status == -1">已关闭</Tag>
                </template>
                <template slot-scope="{ row, index }" slot="mark">
                    <!-- <div v-html="row.mark" class="pt5"></div> -->
                </template>
                <template slot-scope="{ row, index }" slot="action">
					<div style="text-align: left;">
						<el-button plain size="mini" @click="showOrderInfo(row)">订单详情</el-button>
						<Divider type="vertical"/>
						<el-button plain size="mini" @click="showOrderLog(row)">操作记录</el-button>
					</div>
					<div style="margin-top: 10px;text-align: left;">
						<el-button plain size="mini" @click="addMono(row)" v-if="row.status>0">添加备注</el-button>
					</div>
                </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>
        <!-- 详情 -->
        <ShowTemplateOrderDetails ref="detailss" :orderDatalist="orderDatalist" :orderId="orderId"></ShowTemplateOrderDetails>
        <!--日志-->
        <ShowTemplateOrderRecord ref="record" ></ShowTemplateOrderRecord>
        <!-- 备注 -->
        <ShowTemplateOrderRemark ref="remarks" :orderId="orderId" @submitFail="submitFail"></ShowTemplateOrderRemark>
    </div>
</template>
<script>
    import expandRow from './tableExpand.vue';
    import IPageHeader from "../../../layouts/system/page-header/index";
    import {SystemShowTemplateOrderList,SystemShowTemplateOrderTotal,SystemShowTemplateOrderInfo} from "../../../api/system/order";
    import ShowTemplateOrderDetails from "./handle/ShowTemplateOrderDetails";
    import ShowTemplateOrderRecord from "./handle/ShowTemplateOrderRecord";
    import ShowTemplateOrderRemark from "./handle/ShowTemplateOrderRemark";
    export default {
        name: "index",
        components: {ShowTemplateOrderRemark,ShowTemplateOrderRecord,ShowTemplateOrderDetails,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];
                            }
                        }
                    ]
                },
				orderTotal: {
					orderCount  : 0,
					waitPayCount : 0,
					waitSendCount  : 0,
					closeCount  : 0,
				},
                orderData: {
					uid             : "",
                    status          : "all",
                    time            : [],
                    order_id        : "",
					mobile          : "",
					show_template_id:"",
                },
                columns: [
					{
					    title: 'ID',
					    align: 'center',
					    key: 'id',
					    width: 70,
					    align:'center'
					},
                    {
                        title: '订单号',
                        align: 'center',
                        slot: 'order_id',
                        width: 180,
                        align:'center'
                    },

                    {
                        title: '用户',
                        slot: 'uid',
                        width: 150,
                        align:'center'
                    },
					{
					    title: '模板主图',
					    align: 'center',
					    slot: 'show_template_imgs',
						width:80,
					    align:'center'
					},
					{
					    title: '模板标题',
					    align: 'center',
					    key: 'show_template_title',
					    align:'left'
					},
					{
					    title: '订单金额',
						key: 'total_money',
					    width: 60,
					    align:'center'
					},
					{
					    title: '实付金额',
						key: 'pay_money',
					    width: 60,
					    align:'center'
					},
					{
					    title: '下单时间',
					    key: 'time',
					    width: 80,
					    align:'center'
					},
					{
					    title: '支付时间',
					    key: 'pay_time',
					    width: 80,
					    align:'center'
					},
                    {
                        title: '订单状态',
                        slot: 'status',
                        width: 80,
                        align:'center'
                    },
                    {
                        title: '操作',
                        slot: 'action',
                        fixed: 'right',
                        width: 200,
                        align: 'right'
                    }
                ],
                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);
			}
			if(this.$route.query.order_id){
				this.orderData.order_id = this.$route.query.order_id;
			}
            this.initView();
        },
        methods: {
            /**
             * 基本数据
             */
            initView: function () {
                this.getTotal();
                this.getData();
            },
			tabsHandleClick:function(tab, event){
				this.page.page = 1;
				this.getTotal();
				this.getData();
			},
            /**
             * total
             */
            getTotal: function () {
                SystemShowTemplateOrderTotal(this.orderData).then(res => {
                    if (res.code == 200) {
						this.orderTotal = {
							orderCount :res.data.orderCount,
							waitPayCount:res.data.waitPayCount,
							waitSendCount :res.data.waitSendCount,
							waitAcceptCount : res.data.waitAcceptCount,
							okCount:res.data.okCount,
							closeCount :res.data.closeCount,
						};
                    }
                }).catch(err => {
                });
            },
            orderSearch:function(){
                this.page.page = 1;
                this.getTotal();
                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
                };
                SystemShowTemplateOrderList(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("网络繁忙，加载失败，请稍等片刻在尝试!", '系统提示');
                    });
            },
			/**
			 * 查看订单详情
			 * @param {Object} row
			 */
			showOrderInfo:function(row){
				this.orderId = row.id;
				SystemShowTemplateOrderInfo({id:row.id})
				    .then(res => {
				        if(res.code == 200) {
				            this.$refs.detailss.modals = true;
				            this.orderDatalist = res.data;
				        } else {
				            this.$Message.error(res.msg);
				        }
				    })
				    .catch(res => {
				    this.$Message.error(res.msg);
				});
			},
			showOrderLog:function(row){
				this.orderId = row.id;
				this.$refs.record.modals = true;
				this.$refs.record.getList(row.id);
			},
			addMono:function(row){
				this.orderId = row.id;
				this.$refs.remarks.modals = true;
			},
            submitFail () {
                this.getTotal();
                this.getData();
            },
            /**
             *  格式数据
             *  @filterVal  格式头
             *  @tableData  用来格式的表格数据
             */
            formatJson (filterVal, tableData) {
                return tableData.map(v => {
                        return filterVal.map(j => {
                            return v[j]
                        })
                    }
                )
            },
        }
    }
</script>
<style scoped>

</style>
