<template>
    <div class="page-container">
        <div class="flex-wrap search-box">
            <div class="search-item">
                <a-select v-model="tableOptionUid" @change="getList" class="label-option">
                    <a-select-option
                        v-for="(item, index) in tableOption"
                        :key="index"
                        :value="item.uid"
                        >{{ item.name }}
                    </a-select-option>
                </a-select>
            </div>
            <div class="search-item">
                <a-select v-model="searchOptionValue" class="condition-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="700"
            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-number v-model="form.listorder" :min="1" />
                </a-form-model-item>
                <a-form-model-item label="满足条件">
                    <a-select v-model="outerOptionValue">
                        <a-select-option
                            v-for="item in option"
                            :key="item.value"
                            :value="item.value"
                            >{{ item.label }}
                        </a-select-option>
                    </a-select>
                </a-form-model-item>
                <a-form-model-item label="条件设置">
                    <div
                        class="flex-wrap search-box"
                        v-for="(item, index) in conditionArr"
                        :key="index"
                    >
                        <div class="flex-column">
                            <div
                                v-for="(child, key) in item.condition"
                                :key="key"
                            >
                                <div class="setting-item">
                                    <a-select
                                        placeholder="请选择"
                                        v-model="child[0]"
                                        class="condition-option"
                                    >
                                        <a-select-option
                                            v-for="(ele, idx) in settingOption"
                                            :key="idx"
                                            :value="ele.value"
                                            >{{ ele.label }}
                                        </a-select-option>
                                    </a-select>
                                </div>
                                <div class="setting-item">
                                    <a-select
                                        v-model="child[1]"
                                        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="setting-item">
                                    <a-input
                                        placeholder="请输入"
                                        v-model="child[2]"
                                        class="condition-option"
                                    />
                                </div>
                            </div>
                        </div>
                        <div class="search-item">
                            <a-button @click="addInner(index)">
                                <a-icon type="plus" />
                            </a-button>
                        </div>
                        <div class="search-item">
                            <a-button @click="deleteInner(index)">
                                <a-icon type="minus" />
                            </a-button>
                        </div>
                        <div class="select-item">
                            <a-select v-model="item.opt" class="select-option">
                                <a-select-option
                                    v-for="opt in option"
                                    :key="opt.value"
                                    :value="opt.value"
                                    >{{ opt.label }}
                                </a-select-option>
                            </a-select>
                        </div>
                        <div class="search-item">
                            <a-button @click="addOuter(item)">
                                <a-icon type="plus" />
                            </a-button>
                        </div>
                        <div class="search-item">
                            <a-button @click="deleteOuter()">
                                <a-icon type="minus" />
                            </a-button>
                        </div>
                    </div>
                </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: "添加条件",
            form: {
                name: "",
                alias: "",
                listorder: 100,
                description: "",
                setting: {}
            },
            rules: {
                name: [
                    {
                        required: true,
                        message: "请输入条件名称",
                        trigger: "blur",
                    },
                ],
                setting: [
                    {
                        required: true,
                        message: "请输入条件设置",
                        trigger: "",
                    },
                ],
            },
            columns: [
                {
                    title: "排序",
                    dataIndex: "listorder",
                    width: 100,
                    key: "listorder",
                },
                {
                    title: "条件编号",
                    dataIndex: "uid",
                    width: 150,
                    key: "uid",
                },
                {
                    title: "条件名称",
                    key: "name",
                    dataIndex: "name",
                    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" },
                },
            ],
            tableOption: [],
            selectOption: [
                {
                    label: "条件编号",
                    title: "uid",
                },
                {
                    label: "条件名称",
                    title: "name",
                },
            ],
            conditionOption: [
                { label: "包含", value: "like" },
                { label: "等于", value: "=" },
                { label: "不等于", value: "!=" },
                { label: "小于", value: "<" },
                { label: "小于等于", value: "<=" },
                { label: "大于", value: ">" },
                { label: "大于等于", value: ">=" },
            ],
            option: [
                { label: "所有", value: "and" },
                { label: "任一", value: "or" },
            ],
            settingOption: [],
            outerOptionValue: "and",
            tableOptionUid: "",
            searchOptionValue: "uid",
            conditionOptionValue: "like",
            searchString: "",
            conditionString: "",
            opt: "and",
            conditionArr: [
                {
                    opt: "and",
                    condition: [
                       ["", 'like', '']
                    ],
                },
            ],
        };
    },
    created() {
        this.getTableList();
    },

    methods: {
        getTableList() {
            this.api.post("table_list", {}).then((res) => {
                if (res.code === 200) {
                    this.tableOption = res.result.data;
                    this.tableOptionUid = res.result.data[0].uid;
                    this.getList();
                } else {
                    this.$message.error(res.msg);
                }
            });
        },
        onSearch () {
            this.pager.current = 1;
            this.getList();
        },
        getList() {
            this.getFieldList();
            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,
                    ],
                    ["table_id", '=', this.tableOptionUid]
                ];
                data.where_and = condition;
            }
            this.loading = true;
            this.api.post("condition_list", data).then((res) => {
                if (res.code === 200) {
                    this.loading = false;
                    this.listdata = res.result.data;
                } else {
                    this.$message.error(res.msg);
                }
            });
        },
        initModal () {
            this.form = {
                name: "",
                alias: "",
                listorder: 100,
                description: "",
            };
            this.conditionArr = [
                {
                    opt: "and",
                    condition: [
                       ["", 'like', '']
                    ],
                },
            ]
        },
        addTable(record) {
            this.isVisible = true;
            if (record.uid) {
                this.title = "编辑条件";
                this.api.post("condition_item", { uid: record.uid }).then((res) => {
                    if (res.code === 200) {
                        this.form = res.result;
                        this.outerOptionValue = res.result.setting.opt;
                        this.conditionArr = res.result.setting.condition;
                    } else {
                        this.$message.error(res.msg);
                    }
                });
            } else {
                this.title = "添加条件";
            }
        },
        closeAddTable() {
            this.isVisible = false;
            this.initModal();
        },
        addInner(params) {
            this.conditionArr[params].condition.push(new Array(3))
        },
        deleteInner(params) {
            if (this.conditionArr[params].condition.length > 1) {
                this.conditionArr[params].condition.pop();
            }
        },
        addOuter(item) {
            this.conditionArr.push({
                opt: item.opt,
                condition: [new Array(3)],
            });
        },
        deleteOuter() {
            if (this.conditionArr.length > 1) {
                this.conditionArr.pop();
            }
        },
        handleOk(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    this.form.setting = {
                        opt: this.outerOptionValue,
                        condition: this.conditionArr,
                    }
                    let data = {
                        ...this.form,
                        table_id: this.tableOptionUid
                    };
                    if (this.title === "添加条件") {
                        this.api.post("condition_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("condition_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("condition_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.getTableList();
        },
        tableChange(pagination, filters, sorter, { currentDataSource }) {
            this.pager.current = pagination.current;
            this.pager.pageSize = pagination.pageSize;
            this.getList();
        },
        getFieldList(){
            let params = {
                where_and: [["table_id", '=', this.tableOptionUid]],
                select: ['id','name', 'alias']
            };
            this.settingOption = [];
            this.api.post("field_list", params).then((res) => {
                if (res.code === 200) {
                    let num = res.result.data.length;
                    if (num > 0) {
                        for (let i = 0; i < num; i++) {
                            this.settingOption.push(
                                {
                                    label: res.result.data[i].name,
                                    value: res.result.data[i].alias
                                }
                            )
                        }
                    }
                } else {
                    this.$message.error(res.msg);
                }
            });
        }
    },
};
</script>

<style lang="scss" scoped>
.main-list {
    height: 100%;
}
.ant-card-bordered {
    height: 100%;
}
</style>
