<template>
    <div class="tag-man-page">
        <!-- 固定顶部导航栏 -->
        <NavBar class="nav-bar" />

        <!-- 内容区域 -->
        <div class="content">
            <div class="tag" v-for="(tag, index) in tags" :key="index">
                <van-tag :color="tag.tagBgColor" :text-color="tag.tagColor" size="large">{{ tag.tagName }}</van-tag>
                <div class="btn">
                    <van-button type="primary" size="mini" round @click="editTag(tag)">编辑</van-button>
                    <van-button type="danger" size="mini" round @click="deleteTag(tag)">删除</van-button>
                </div>
            </div>
            <div style="height: 300px;" v-if="tags.length > 10"></div>
            <div class="addTag">
                <van-button type="primary" @click="addNewTag" block>新增标签</van-button>
            </div>
        </div>
        <!-- 固定底部TabBar -->
        <ManTabBar class="tab-bar" />


        <van-popup v-model="showPopup" closeable position="bottom" style="height: 80vh; " lazy-render
            :close-on-click-overlay="false">
            <div class="tagModify">
                <van-tag :color="editTagInfo.tagBgColor" :text-color="editTagInfo.tagColor" size="large">{{
                    editTagInfo.tagName }}</van-tag>
            </div>
            <div class="popup-content">
                <van-field label="标签名" v-model="editTagInfo.tagName" placeholder="请输入标签名" />
                <div class="colorChoose">
                    <van-field label="字色" v-model="editTagInfo.tagColor" type="color" />
                    <van-field label="背景色" v-model="editTagInfo.tagBgColor" type="color" />
                </div>

                <van-button type="primary" @click="saveChange" block>确认修改</van-button>
            </div>

        </van-popup>
        <van-popup v-model="showaddPopup" closeable position="bottom" style="height: 80vh; " lazy-render
            :close-on-click-overlay="false">
            <div class="tagModify">
                <van-tag :color="editTagInfo.tagBgColor" :text-color="editTagInfo.tagColor" size="large">{{
                    editTagInfo.tagName }}</van-tag>
            </div>
            <div class="popup-content">
                <van-field label="标签名" v-model="editTagInfo.tagName" placeholder="请输入标签名" />
                <div class="colorChoose">
                    <van-field label="字色" v-model="editTagInfo.tagColor" type="color" />
                    <van-field label="背景色" v-model="editTagInfo.tagBgColor" type="color" />
                </div>

                <van-button type="primary" @click="saveAdd" block>确认新增</van-button>
            </div>

        </van-popup>

    </div>
</template>

<script>
import NavBar from '@/components/NavBar.vue';
import ManTabBar from '@/components/ManTabBar.vue';
import { Dialog } from 'vant';
export default {
    name: 'TagManPage',
    components: {
        ManTabBar,
        NavBar
    },
    props: {},
    data() {
        return {
            tags: [],
            showPopup: false,
            editTagInfo: { tagName: '', tagBgColor: '', tagColor: '' },
            showaddPopup: false,
        };
    },
    watch: {},
    computed: {},
    methods: {
        getAllTags() {
            this.$axios.get('/tagInfo/getAll').then(res => {
                console.log(res);
                if (res.code === 200) {
                    this.tags = res.data;
                } else {
                    this.$toast.fail('获取标签失败');
                }
            }).catch(() => {
                this.$toast.fail('网络错误，请稍后再试');
            });
        },
        addTag() {
            if (this.newTagName) {
                this.$axios.post('/tagInfo/add', {
                    tagName: this.newTagName,
                    tagBgColor: '#f2826a',
                    tagColor: '#fff'
                }).then(res => {
                    console.log(res);
                    if (res.code === 200) {
                        this.$toast.success('添加标签成功');
                    } else {
                        this.$toast.fail('添加标签失败');
                    }
                }).catch(() => {
                    this.$toast.fail('网络错误，请稍后再试');
                });
            }
        },
        editTag(tag) {
            this.editTagInfo = JSON.parse(JSON.stringify(tag));
            this.showPopup = true;
        },
        deleteTag(tag) {
            Dialog.confirm({
                title: '确认删除标签',
                message: '点击取消可继续编辑',
            }).then(() => {
                console.log(tag);
                this.$axios.post('/tagInfo/deleteById', null, {
                    params: {
                        id: tag.id
                    }
                }).then(res => {
                    console.log(res);
                    if (res.code === 200) {
                        this.$toast.success('删除标签成功');
                        this.getAllTags();
                    }
                    else {
                        this.$toast.fail('删除标签失败');
                    }
                }).catch(() => {
                    this.$toast.fail('网络错误，请稍后再试');
                });

            })
                .catch(() => {

                })
            console.log(tag);
        },
        saveChange() {
            Dialog.confirm({
                title: '确认保存修改',
                message: '点击取消可继续编辑',
            }).then(() => {
                console.log(this.editTagInfo);
                this.$axios.post('/tagInfo/updateById', this.editTagInfo).then(res => {
                    console.log(res);
                    if (res.code === 200) {
                        this.$toast.success('修改标签成功');
                        this.showPopup = false;
                        this.getAllTags();
                    }
                    else {
                        this.$toast.fail('修改标签失败');
                    }
                }).catch(() => {
                    this.$toast.fail('网络错误，请稍后再试');
                    this.showPopup = false;

                });

            })
                .catch(() => {
                    // on cancel
                });
        },
        addNewTag() {
            this.editTagInfo = { tagName: '标签', tagBgColor: '#f2826a', tagColor: '#fff' };
            this.showaddPopup = true;
        },
        saveAdd() {
            Dialog.confirm({
                title: '确认新增标签',
                message: '点击取消可继续编辑',
            }).then(() => {
                console.log(this.editTagInfo);
                this.$axios.post('/tagInfo/save', this.editTagInfo).then(res => {
                    console.log(res);
                    if (res.code === 200) {
                        this.$toast.success('新增标签成功');
                        this.showaddPopup = false;
                        this.getAllTags();
                    }
                    else {
                        this.$toast.fail('新增标签失败');
                    }
                }).catch(() => {
                    this.$toast.fail('网络错误，请稍后再试');
                    this.showaddPopup = false;

                });

            })
                .catch(() => {
                    // on cancel
                });
        },

    },
    created() { },
    mounted() {
        this.getAllTags();
    }
};
</script>
<style lang="less" scoped>
.tag-man-page {
    padding: 10px;
    height: 100vh;
    overflow: hidden;

    .content {
        overflow-y: auto;
        height: calc(100vh - 110px);

        .tag {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 20px;
            padding: 10px;

            .btn {
                display: flex;
            }
        }
    }

    .tagModify {
        display: flex;
        justify-content: center;
        align-items: center;
        margin-bottom: 50px;
        margin-top: 50px;
    }

    .colorChoose {
        display: flex;
        justify-content: space-between;
        margin-bottom: 20px;
    }
}
</style>