<template>
    <div>
        <navbar title="业务字典" />
        <div class="flex flex-align-start">
            <div class="container mr-20" style="flex: 1">
                <div class="flex flex-center flex-justify-start">
                    <add-dict @ok="fetchList" type="new" />
                </div>
                <a-table
                    class="mt-20"
                    :columns="columns"
                    :data="list"
                    :pagination="page"
                    @row-click="rowClick"
                    @page-change="pageChange"
                >
                    <template #label="{ record }">
                        <div>{{ record.sort }} {{ record.label }}</div>
                    </template>
                </a-table>
            </div>
            <div class="container" style="flex: 3" v-if="dict">
                <div class="flex flex-center flex-justify-between">
                    <div class="flex flex-center">
                        <h2>{{ dict.label }}</h2>
                        <add-dict class="ml-20" :info="dict" type="edit" @click="fetchDetail" />
                    </div>
                    <add-dict :info="dict" type="add" @ok="fetchDetail" />
                </div>
                <a-table class="mt-20" :columns="columns2" :data="list2">
                    <template #menu="{ record }">
                        <div class="flex flex-center flex-justify-start">
                            <add-dict
                                :info="record"
                                type="edit"
                                @ok="fetchDetail"
                            />
                            <add-dict :info="record" type="addSub" />
                            <a-popconfirm
                                content="确定删除该数据？"
                                @ok="remove(record.id)"
                            >
                                <a-button type="text" size="small"
                                    >删除
                                </a-button>
                            </a-popconfirm>
                        </div>
                    </template>
                </a-table>
            </div>
        </div>
    </div>
</template>

<script>
import navbar from '@/components/navbar/index.vue'
import addDict from '@/views/system/components/add-dict.vue'

export default {
    components: {
        navbar,
        addDict
    },
    data() {
        return {
            page: { page: 1, size: 10, total: 0 },
            list: [],
            list2: [],

            columns: [{ title: '名称', slotName: 'label' }],
            columns2: [
                { title: '名称', dataIndex: 'label' },
                { title: '值', dataIndex: 'value' },
                { title: 'code', dataIndex: 'code' },
                { title: '排序', dataIndex: 'sort' },
                { title: '操作', slotName: 'menu' }
            ],
            dict: null,
            index: 0
        }
    },
    mounted() {
        this.fetchList()
    },
    methods: {
        pageChange(page) {
            this.page.page = page
            this.fetchList()
        },
        fetchList() {
            this.$api.sys.dictPage(this.page).then(res => {
                if (res.code === 200) {
                    this.list = res.data.records
                    this.dict = this.list[this.index]
                    this.fetchDetail()
                    this.page.total = res.data.total
                }
            })
        },
        fetchDetail() {
            this.$api.sys.dict({ code: this.dict.code }).then(res => {
                if (res.code === 200) {
                    this.list2 = res.data
                }
            })
        },
        rowClick(res) {
            this.dict = res
            this.index = this.list.findIndex(sub => sub.id === res.id)
            this.fetchDetail()
        },
        remove(id) {
            this.$api.sys.dictRemove({ id: id }).then(res => {
                if (res.code === 200) {
                    this.fetchList()
                    this.$notification.success(res.msg)
                }
            })
        }
    }
}
</script>

<style lang="scss" scoped></style>
