<template>
    <basic-container>
        <avue-crud :option="option"
                   :table-loading="loading"
                   :data="data"
                   :page.sync="page"
                   :permission="permissionList"
                   :before-open="beforeOpen"
                   v-model="form"
                   ref="crud"
                   @row-update="rowUpdate"
                   @row-save="rowSave"
                   @row-del="rowDel"
                   @search-change="searchChange"
                   @search-reset="searchReset"
                   @selection-change="selectionChange"
                   @current-change="currentChange"
                   @size-change="sizeChange"
                   @refresh-change="refreshChange"
                   @on-load="onLoad">
            <template slot="menuLeft">
            </template>

            <template slot="menu" slot-scope="scope">
<!--                <el-button type="text" size="small" @click="viewOrder(scope.row, 1)" >详情</el-button>-->
                <el-button type="text" size="small" @click="downloadAppointment(scope.row)" >下载履约单</el-button>
            </template>


          <template slot="state" slot-scope="scope">
            <el-tag v-if="scope.row.state === 0">{{ scope.row.$state }}</el-tag>
            <el-tag v-else-if="scope.row.state === 1" type="warning">{{ scope.row.$state }}</el-tag>
            <el-tag v-else-if="scope.row.state === 2" type="success">{{ scope.row.$state }}</el-tag>
          </template>
        </avue-crud>

    </basic-container>
</template>

<script>
import {appointmentAll as getList, exportAppointment} from "@/api/groupon/groupon";
import {mapGetters} from "vuex";
import {getToken} from '@/util/auth';

export default {
    data() {
        return {
            orderDetailBox: false,
            state: 0,
            form: {},
            query: {},
            loading: true,
            page: {
                pageSize: 10,
                currentPage: 1,
                total: 0
            },
            selectionList: [],
            option: {
              height:'auto',
                searchShow: true,
                searchMenuSpan: 6,
                searchIcon: true,
                searchIndex: 3,
                searchLabelWidth: 90,
                menuWidth: 170,
                border: true,
                viewBtn: true,
                editBtn: false,
                delBtn: false,
                selection: false,
                dialogClickModal: false,
                column: [
                    {
                        label: "团购名称",
                        prop: "mainTitle",
                    },
                    {
                        label: "团购开始时间",
                        prop: "grouponStartTime",
                    },
                    {
                        label: "履约单状态",
                        prop: "state",
                        search: true,
                        addDisplay: false,
                        viewDisplay: false,
                        type: "select",
                        slot: true,
                        dicData: [{
                            label: '待发货',
                            value: 0
                        }, {
                            label: '待提货',
                            value: 1
                        }, {
                          label: '已完成',
                          value: 2
                        }],
                        dataType: "number"
                    },
                ]
            },
          detailOption: {
            height:'auto',
            calcHeight: 30,
            tip: false,
            searchShow: true,
            searchMenuSpan: 6,
            searchIcon: true,
            searchIndex: 3,
            searchLabelWidth: 90,
            menuWidth: 170,
            refreshBtn: false,
            columnBtn: false,
            border: true,
            viewBtn: true,
            editBtn: false,
            delBtn: false,
            addBtn: false,
            selection: false,
            menu: false,
            dialogClickModal: false,
            column: [
              {
                label: "顾客昵称",
                prop: "nickname",
              },
              {
                label: "顾客手机号",
                prop: "phone",
              },
              {
                label: "取货码",
                prop: "pickUpCode",
              },
              {
                label: "商品名称",
                prop: "goodsName",
              },
              {
                label: "商品规格",
                prop: "goodsSpec",
              },
              {
                label: "商品编码",
                prop: "goodsNo",
              },
              {
                label: "商品数量",
                prop: "goodsNum",
              },
            ]
          },
            data: []
        };
    },
    computed: {
        ...mapGetters(["permission"]),
        permissionList() {
            return {
                addBtn: this.vaildData(this.permission.order_add, false),
                viewBtn: this.vaildData(this.permission.order_view, false),
                delBtn: this.vaildData(this.permission.order_delete, false),
                editBtn: this.vaildData(this.permission.order_edit, false)
            };
        },
        ids() {
            let ids = [];
            this.selectionList.forEach(ele => {
                ids.push(ele.id);
            });
            return ids.join(",");
        }
    },
    created() {
        this.option.column[5].change = function (value) {
            this.state = value.value;
        }.bind(this);
    },
    methods: {
        rowSave(row, done, loading) {
            add(row).then(() => {
                this.onLoad(this.page);
                this.$message({
                    type: "success",
                    message: "操作成功!"
                });
                done();
            }, error => {
                loading();
                window.console.log(error);
            });
        },
        rowUpdate(row, index, done, loading) {
            update(row).then(() => {
                this.onLoad(this.page);
                this.$message({
                    type: "success",
                    message: "操作成功!"
                });
                done();
            }, error => {
                loading();
                console.log(error);
            });
        },
        rowDel(row) {
            this.$confirm("确定将选择数据删除?", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning"
            })
                .then(() => {
                    return remove(row.id);
                })
                .then(() => {
                    this.onLoad(this.page);
                    this.$message({
                        type: "success",
                        message: "操作成功!"
                    });
                });
        },
        handleDelete() {
            if (this.selectionList.length === 0) {
                this.$message.warning("请选择至少一条数据");
                return;
            }
            this.$confirm("确定将选择数据删除?", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning"
            })
                .then(() => {
                    return remove(this.ids);
                })
                .then(() => {
                    this.onLoad(this.page);
                    this.$message({
                        type: "success",
                        message: "操作成功!"
                    });
                    this.$refs.crud.toggleSelection();
                });
        },
        beforeOpen(done, type) {
            if (["edit", "view"].includes(type)) {
                getDetail(this.form.id).then(res => {
                    this.form = res.data.data;
                });
            }
            done();
        },
        searchReset() {
            this.query = {};
            this.onLoad(this.page);
        },
        searchChange(params, done) {
            this.query = params;
            this.page.currentPage = 1;
            this.onLoad(this.page, params);
            done();
        },
        selectionChange(list) {
            this.selectionList = list;
        },
        selectionClear() {
            this.selectionList = [];
            this.$refs.crud.toggleSelection();
        },
        currentChange(currentPage){
            this.page.currentPage = currentPage;
        },
        sizeChange(pageSize){
            this.page.pageSize = pageSize;
        },
        refreshChange() {
            this.onLoad(this.page, this.query);
        },
        onLoad(page, params = {}) {
            this.loading = true;
            getList(page.currentPage, page.pageSize, Object.assign(params, this.query)).then(res => {
                const data = res.data.data;
                this.page.total = data.total;
                this.data = data.records;
                this.loading = false;
                this.selectionClear();
            });
        },
        viewOrder(row, queryType) {
            this.orderDetailBox = true;
            getDetail({
                grouponId: row.id,
                queryType: queryType,
                state: this.state
            }).then(res => {

            })
        },
        handleClose() {
            this.orderDetailBox = false;
        },
        downloadAppointment(row) {
            window.location.href=`/api/tz/appointment/all/export?${this.website.tokenHeader}=${getToken()}&grouponId=${row.grouponId}
            &grouponName=${row.mainTitle}&stateDesc=${row.$state}&grouponStartTime=${row.grouponStartTime}`
        }
    }
};
</script>

<style>
</style>
