<template>
    <div class="view" id="labelPage" v-loading="load">
        <by-tool :propConfig="tool" class="tool" @clickHandle="clickHandle" id="configTool" />
        <by-table :propConfig="tableConfig" ref="table">
            <template v-slot:ordered="{ row }">
                <span>{{ row.ordered }}</span>
            </template>
        </by-table>
        <add-config ref="addConfig" @handleSuccess="getList" />
    </div>

</template>

<script lang="ts">
import { Component, Prop, Vue, Watch } from "vue-property-decorator";
import { queryOrderTimeConfig, IOrderTimeConfigItem, IOrderTimeConfigRequest, IOrderTimeResponse, delOrderTimeConfig } from '@/api/orderConfig';
import addConfig from './compoments/addConfig.vue';
@Component({ components: { addConfig } })
export default class OrderConfig extends Vue {
    timer: any = null
    isHasOne = false;//是否有一条数据
    userInfo: any = {};
    tool = {
        tools: {
            add: true,
            refresh: true
        },
        audit: {}
    }
    tableConfig: any = {
        attr: {
            size: 'mini',
            align: 'center',
            seq: true
        },
        columns: [{
            title: '超时时间(分钟)',
            field: 'timeout'
        }, {
            title: '创建于',
            field: 'createTime',
            width: 150,
        }, {
            title: '操作',
            action: true,
            width: 200,
            plugins: [{
                name: '删除',
                event: {
                    show: () => {
                        return true;
                    },
                    click: (row: any) => {
                        this.delHandle(row);
                    }
                }
            }, {
                name: '修改',
                event: {
                    show: () => {
                        return true;
                    },
                    click: (row: any) => {
                        this.updateHandle(row);
                    }
                }
            }]
        }]
    }
    time: any;
    timeNum = 0;
    data: Array<any> = []
    load = false;


    async getList() {
        this.load = true;
        const res = await queryOrderTimeConfig({ pageSize: 20, pageNum: 1 }) as IOrderTimeResponse<IOrderTimeConfigItem[]>;
        this.load = false;
        if (res.code != 200) {
            return;
        }
        this.isHasOne = res.rows.length > 0;
        (this.$refs.table as any).setValue(res.rows);
    }
    clickHandle(e: string) {
        if (e == 'onAdd') {
            if (this.isHasOne) {
                this.$message.warning('最多只能添加一条数据');
                return;
            }
            (this.$refs.addConfig as any).setShow(true)
            this.timer = setTimeout(() => {
                (this.$refs.addConfig as any).setValue({ id: 0, timeout: '' });
            }, 100);
        }
        if (e == 'onRefresh') {
            this.getList();
        }
    }
    async delHandle(row: any) {
        const confirm = await this.$confirm('此操作将永久删除, 是否继续?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
        }).catch(() => {
            this.load = false;
        })
        if (!confirm) return;
        this.load = true;
        const res = await delOrderTimeConfig(row.id) as IOrderTimeResponse<string>;
        this.load = false;
        if (res.code != 200) {
            this.$message.error(res.msg);
            return;
        }
        this.getList();
    }

    async updateHandle(row: any) {
        //console.info(row.timeout)
        (this.$refs.addConfig as any).setShow(true);
        this.timer = setTimeout(() => {
            (this.$refs.addConfig as any).setValue({ id: row.id, timeout: row.timeout });
        }, 100)
        //
    }

    created() {
        this.userInfo = this.$store.getters.userInfo;
    }
    mounted() {
        this.$nextTick(() => {
            this.getList()
        })
    }
    unmounted() {
        clearTimeout(this.timer);
    }
}
</script>

<style lang="scss" scoped>
.view {
    width: 100%;
    height: 100%;
    padding: 16px;
    box-sizing: border-box;

    .tool {
        padding-bottom: 16px;
    }
}
</style>