<template>
    <div class="page-container">
        <div class="flex-wrap search-box">
            <div class="search-item">
                <a-select
                    v-model="searchOptionValue"
                    class="label-option"
                >
                    <a-select-option
                        v-for="(item, index) in selectOption"
                        :key="index"
                        :value="item.title"
                        >{{ item.label }}
                    </a-select-option>
                </a-select>
            </div>
            <div class="search-item">
                <a-select
                    v-model="conditionOptionValue"
                    class="condition-option"
                >
                    <a-select-option
                        v-for="item in conditionOption"
                        :key="item.value"
                        :value="item.value"
                    >
                        {{ item.label }}
                    </a-select-option>
                </a-select>
            </div>
            <div class="search-item">
                <a-input-search
                    placeholder="请输入"
                    :max-length="100"
                    @search="onSearch"
                    v-model="searchString"
                />
            </div>
            <div class="search-item">
                <a-button @click="refresh">
                    <a-icon type="reload"/>
                </a-button>
            </div>
            <div class="search-item">
                <a-button type="primary" @click="addTable">
                    添加
                </a-button>
            </div>
        </div>
        <a-table
            :columns="columns"
            :rowKey="(record, index) => {return index}"
            :loading="loading"
            :dataSource ="listdata"
            :pagination="pager"
            :scroll="{ x: 800, y: 500 }"
            @change="tableChange"
        >
            <template slot="operation" slot-scope="text, record">
                <a @click="addTable(record)">编辑</a> <a-divider type="vertical" />
                <a-popconfirm
                    title="确定删除该信息吗"
                    ok-text="确定"
                    cancel-text="取消"
                    @confirm="() => handleDelete(record)"
                >
                    <a class="danger" @click.stop="">
                        删除
                    </a>
                </a-popconfirm>
            </template>
        </a-table>
        <a-modal
            v-model="isVisible"
            :width='600'
            centered
            :title="title"
            @ok="handleOk('form')"
            @cancel="closeAddTable"
        >
            <a-form-model
                ref="form"
                :model="form"
                :rules="rules"
            >
                <a-form-model-item label="数据表名称" prop="name">
                    <a-input v-model="form.name" type="text" placeholder="请输入"/>
                </a-form-model-item>
                <a-form-model-item label="数据表别名">
                    <a-input v-model="form.alias" type="text" placeholder="请输入"/>
                </a-form-model-item>
                <a-form-model-item label="排序">
                    <a-input-number v-model="form.listorder" :min="1"/>
                    <!-- <a-input v-model="form.listorder" type="text" placeholder="请输入"/> -->
                </a-form-model-item>
                <a-form-model-item label="描述">
                    <a-textarea v-model="form.description" type="text" placeholder="请输入"/>
                </a-form-model-item>
            </a-form-model>
        </a-modal>
    </div>
</template>

<script>
import pager from "../../../config/pagination.conf"
export default {
    name: "list",
    components: {},
    data() {
        return {
            pager: {
                ...pager
            },
            listdata: [],
            loading: false,
            isVisible: false,
            title: '添加数据表',
            labelCol: { span: 4 },
            wrapperCol: { span: 18 },
            form: {
                name: '',
                alias: '',
                listorder: '',
                description: ''
            },
            rules: {
                name: [{required: true, message: "请输入数据表名称", trigger: "blur"},],
            },
            columns: [
                {
                    title: '排序',
                    dataIndex: 'listorder',
                    width: 100,
                    key: 'listorder',
                },
                {
                    title: '数据表编号',
                    dataIndex: 'uid',
                    width: 150,
                    key: 'uid',
                },
                {
                    title: '数据表名称',
                    key: 'name',
                    dataIndex: 'name',
                    width: 150,
                },
                {
                    title: '数据表别名',
                    key: 'alias',
                    dataIndex: 'alias',
                    width: 150,
                },
                {
                    title: '描述',
                    key: 'description',
                    dataIndex: 'description',
                    width: 150,
                },
                {
                    title: '创建时间',
                    key: 'created',
                    dataIndex: 'created',
                    width: 150,
                    scopedSlots: {customRender: 'action'},
                },
                {
                    title: "操作",
                    width: 180,
                    dataIndex: "operation",
                    key: "operation",
                    fixed: 'right',
                    scopedSlots: {customRender: "operation"},
                },
            ],
            selectOption: [
                {
                    label: "数据表编号",
                    title: "uid",
                },
                {
                    label: "数据表名称",
                    title: "name",
                },
                {
                    label: "数据表别名",
                    title: "alias",
                },
            ],
            conditionOption: [
                { label: "包含", value: "like" },
                { label: "等于", value: "=" },
                { label: "不等于", value: "!=" },
                { label: "小于", value: "<" },
                { label: "小于等于", value: "<=" },
                { label: "大于", value: ">" },
                { label: "大于等于", value: ">=" },
            ],
            searchOptionValue: "uid",
            conditionOptionValue: "like",
            searchString: "",
        };
    },

    created() {
        this.getList();
    },
    methods: {
        onSearch () {
            this.pager.current = 1;
            this.getList();
        },
        getList () {
            let data = {
                page_index: this.pager.current,
                page_size: this.pager.pageSize,
            };
            let search = {
                searchOptionValue: this.searchOptionValue,
                conditionOptionValue: this.conditionOptionValue,
                searchString: this.searchString.trim(),
            };
            if (search) {
                let searchString = search.searchString;
                if (search.conditionOptionValue === 'like') {
                    searchString = '%' + searchString + '%';
                }
                let condition = [
                    [
                        search.searchOptionValue,
                        search.conditionOptionValue,
                        searchString
                    ]
                ];
                if (this.searchString) {
                    data.where_and = condition;
                }
            }
            this.loading = true;
            this.api.post("table_list", data).then((res) => {
                if (res.code === 200) {
                    this.loading = false;
                    this.listdata = res.result.data;
                    this.pager.current = parseInt(res.result.page_index);
                    this.pager.total = parseInt(res.result.total_records);
                } else {
                    this.$message.error(res.msg);
                }
            });
        },
        addTable (record) {
            this.isVisible = true;
            if (record.uid) {
                this.title = '编辑数据表';
                this.api.post("table_item", {uid: record.uid}).then((res) => {
                    if (res.code === 200) {
                        this.form = res.result;
                    } else {
                        this.$message.error(res.msg);
                    }
                });
            } else {
                this.title = '添加数据表';
            }
        },
        closeAddTable () {
            this.isVisible = false;
            this.form = {};
        },
        handleOk (formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    let data = {
                        ...this.form,
                    };
                    if (this.title === '添加数据表') {
                        this.api.post("table_create", data).then((res) => {
                            if (res.code === 200) {
                                this.closeAddTable();
                                this.$message.success(res.msg);
                                this.getList();
                            } else {
                                this.$message.error(res.msg);
                            }
                        });
                    } else {
                        this.api.post("table_update", data).then((res) => {
                            if (res.code === 200) {
                                this.closeAddTable();
                                this.$message.success(res.msg);
                                this.getList();
                            } else {
                                this.$message.error(res.msg);
                            }
                        });
                    }

                }
            });
        },
        handleDelete (record) {
            this.api.post("table_delete", {uid: record.uid}).then((res) => {
                if (res.code === 200) {
                    this.$message.success(res.msg);
                    this.getList();
                } else {
                    this.$message.error(res.msg);
                }
            });
        },
        refresh() {
            this.searchOptionValue = 'uid';
            this.conditionOptionValue = 'like';
            this.searchString = '';
            this.pager.current = 1;
            this.pager.pageSize = 10;
            this.getList();
        },
        tableChange(pagination, filters, sorter, {currentDataSource}) {
            this.pager.current = pagination.current;
            this.pager.pageSize = pagination.pageSize;
            this.getList();
        }
    },
};
</script>

<style lang="scss" scoped>

</style>
