<template>
    <div class="page">
        <LayoutTable :data='tableData' :config='tableConfig' notDel />
    </div>
</template>

<script>
import table from "@/assets/mixins/table";

export default {
    mixins: [table],
    methods: {
        // 格式化标签
        formatterTags(row, column, val) {
            const tagsMap = {
                0: "danger",
                1: "success",
            };
            let content = "";
            if (this.tableData.dict && this.tableData.dict["tags"]) {
                const dict = this.tableData.dict["tags"];
                let value = val + "";
                if (value.split(",").length > 1) {
                    let result = [];
                    for (let v of value.split(",")) {
                        let tag = (
                            <span>
                                {" "}
                                <el-tag
                                    type={tagsMap[val] || "info"}
                                    size="mini"
                                >
                                    {dict[v] || v}
                                </el-tag>
                            </span>
                        );
                        result.push(tag);
                    }
                    return result;
                } else {
                    content = dict[val] || val;
                    return (
                        <el-tag type={tagsMap[val] || "info"} size="mini">
                            {content}
                        </el-tag>
                    );
                }
            }
        },
    },
    data() {
        return {
            config: {
                search: [
                    {
                        name: "id",
                        type: "text",
                        label: "ID",
                    },
                    {
                        name: "name",
                        type: "text",
                        label: "名称",
                        fuzzy: true,
                    },
                    {
                        name: "code",
                        type: "text",
                        label: "代码",
                        fuzzy: true,
                    },
                    {
                        name: "tags",
                        type: "select",
                        label: "标签",
                    },
                    {
                        name: "nature",
                        type: "select",
                        label: "性质",
                    },
                    {
                        name: "settlementType",
                        type: "select",
                        label: "结算方式",
                    },
                    {
                        name: "contactsUser",
                        type: "text",
                        label: "联系人",
                        fuzzy: true,
                    },
                    {
                        name: "contactsMobile",
                        type: "text",
                        label: "联系手机",
                        fuzzy: true,
                    },
                ],
                columns: [
                    {
                        label: "ID",
                        prop: "id",
                        formatter: this.formatterString,
                        width: 80,
                    },
                    { label: "名称", prop: "name" },
                    { label: "代码", prop: "code", width: 120 },
                    {
                        label: "标签",
                        prop: "tags",
                        formatter: this.formatterTags,
                        width: 120,
                    },
                    {
                        label: "性质",
                        prop: "nature",
                        formatter: this.formatter,
                        width: 120,
                    },
                    // { label: "行业类别", prop: "trade" },
                    {
                        label: "结算方式",
                        prop: "settlementType",
                        formatter: this.formatter,
                    },
                    { label: "联系人", prop: "contactsUser" },
                    { label: "联系手机", prop: "contactsMobile" },
                    { label: "联系邮箱", prop: "contactsEmail" },
                    {
                        label: "操作",
                        width: 100,
                        formatter: (row) => {
                            return (
                                <table-buttons
                                    row={row}
                                    onEdit={this.toEdit}
                                    onView={this.toView}
                                    noDel
                                />
                            );
                        },
                    },
                ],
            },
        };
    },
};
</script>