<template>
    <div style="background-color: white;"> 
        <!-- 查询和其他操作 -->
        <div class="filter-container" style="padding: 10px">
            <el-form :inline="true" size="small" v-model="listQuery">
                <el-form-item label="销售时间">
                    <el-date-picker v-model="timeArray" type="daterange" value-format="yyyy-MM-dd" format="yyyy-MM-dd"
                        class="filter-item" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"
                        :picker-options="pickerOptions" />
                </el-form-item>
                <!-- <el-form-item label="订单状态">
                    <el-select v-model="listQuery.orderStatusMap" multiple style="width: 250px" class="filter-item"
                        clearable placeholder="请选择订单状态">
                        <el-option v-for="(key, value) in statusMap" :key="key" :label="key" :value="value" />
                    </el-select>
                </el-form-item> -->
                <el-form-item>
                    <el-button class="filter-item" type="primary" icon="el-icon-search"
                        @click="getSalesList(false)">查找</el-button>
                    <el-button :loading="listLoading" class="filter-item" type="primary" icon="el-icon-download"
                        @click="getSalesList(true)">导出</el-button>
                </el-form-item>
            </el-form>
        </div>

        <!-- 查询结果 -->
        <el-table :data="list" element-loading-text="正在查询中。。。" border fit highlight-current-row>  
            <el-table-column align="center" label="城市" prop="city" />
            <el-table-column align="center" label="订购商品" prop="goodsName" /> 
            <el-table-column align="center" label="订单渠道" prop="orderChannel" />
            <el-table-column align="center" label="下单时间" prop="createTime" /> 
            <el-table-column align="center" label="支付金额" prop="price" />
            <el-table-column align="center" label="订单状态" prop="status" />
            <el-table-column align="center" label="需服务次数" prop="serviceTime" />
            <el-table-column align="center" label="已服务次数" prop="servicedTime" /> 
        </el-table>

        <pagination v-show="total > 0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit"
            @pagination="getSalesList(false)" />

    </div>
</template>

<script>
import Pagination from "./../common/Pagination";
import service from "../../script/api/service";
import moment from "moment";

export default {
    name: "KaoSales",
    components: { Pagination },
    data() {
        return {
            orderChannelMap: [],
            statusMap: {
                101: '未付款',
                102: '用户取消',
                103: '系统取消',
                201: '已付款',
                202: '申请退款',
                203: '已退款',
                207: '已取消(美团)',
                301: '服务中',
                401: '服务已完成',
                402: '服务已完成(系统)'
            },
            listLoading: false,
            cityList: [],
            timeArray: [
                this.formateDay(new Date(new Date() - 3600 * 1000 * 24 * 7)),
                this.formateDay(new Date()),
            ],
            list: [],
            total: 0,
            listQuery: {
                page: 1,
                limit: 20,
                order: "desc",
                provider: "",
                goodsId: '',
                goodsName: ''
            },
            pickerOptions: {
                shortcuts: [
                    {
                        text: "最近一周",
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                            picker.$emit("pick", [start, end]);
                        },
                    },
                    {
                        text: "最近一个月",
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                            picker.$emit("pick", [start, end]);
                        },
                    },
                    {
                        text: "最近三个月",
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
                            picker.$emit("pick", [start, end]);
                        },
                    },
                ],
            },
        };
    },
    computed: {},
    created() {
    },
    methods: {
        getSalesList(isExport) {
            console.info(this.timeArray); 
            if (this.timeArray && this.timeArray.length === 2) {
                this.listQuery.startTime = this.timeArray[0];
                this.listQuery.endTime = this.timeArray[1];
            } else {
                this.listQuery.startTime = null;
                this.listQuery.endTime = null;
                this.$message.warning("请先选择日期范围再进行查询");
                return false;
            }
            this.listQuery.isExport = isExport;
            this.listLoading = true;
            let params = {
                page: this.listQuery.page,
                limit: this.listQuery.limit,
                startTime: this.listQuery.startTime,
                endTime: this.listQuery.endTime 
            }

            if (isExport == false) {
                let days = moment(this.timeArray[1]).diff(moment(this.timeArray[0]), "days");
                if (days > 31) {
                    this.$message.warning("请调整日期范围，不能超过30天");
                    return;
                }
                service
                    .$axiosGetKaoSales(params)
                    .then((response) => {
                        this.list = response.data.data.list;
                        this.total = response.data.data.total;
                        this.listLoading = false;
                    })
                    .catch(() => {
                        this.list = [];
                        this.total = 0;
                        this.listLoading = false;
                    });
            }
            else {
                service.$axiosGetKaoSalesExport(params);
                this.listLoading = false;
            }

        },
        handleFilter() {
            this.listQuery.page = 1;
            this.getSalesList();
        },
    },
};
</script>

<style>
.detail-container {
    width: 80%;
    padding: 20px 20px 20px 20px;
    margin: 20px auto;
}

.panel-group {
    display: flex;
    flex-flow: wrap;
}

.panel-group .card-panel {
    min-height: 130px;
    border-radius: 6px;
    padding: 10px 10px 0px;
    cursor: pointer;
    font-size: 12px;
    position: relative;
    overflow: hidden;
    color: #666;
    background: #fff;
    -webkit-box-shadow: 2px 2px 10px rgb(0 0 0 / 10%);
    box-shadow: 2px 2px 10px rgb(0 0 0 / 10%);
    border-color: rgba(0, 0, 0, .05);
    margin: 10px
}

.card-title {
    font-size: 16px;
    font-weight: 600;
    border-bottom: 1px solid #ccc;
    /*dashed*/
    padding: 10px 0;
}

.card-data {
    display: flex;
    flex-direction: column;
    padding-top: 10px;
}

.card-item {
    display: flex;
    line-height: 20px;
    font-size: 13px;
}

.card-sub-item {
    margin-right: 20px;
    border-right: 1px dashed #ccc;
    width: 150px;
}

.card-sub-item .title {
    font-weight: 600;
}

.card-footer {
    height: 40px;
    line-height: 40px;
    border-top: 1px dashed #ccc;
    text-align: center;
    margin-top: 10px;
    color: #36a3f7;
}
</style>