<template>
    <div class="page-body">
        <div class="page-search row items-center">
            <div class="text-h5">企业客户标签</div>
            <div class="col row wrap q-mr-lg q-col-gutter-md">

            </div>
        </div>
        <div style="color: #787878;">企业标签由企业统一配置，配置后，企业成员可以对客户打企业标签</div>


        <div class="page-content">


            <q-table :pagination="msg" :loading="loading" no-data-label="暂无相关数据" flat
                class="sticky-column-table no-bottom-table" separator="none" title="" :data="dataList"
                :columns="columns" row-key="name">
                <template v-slot:top="props">
                    <div class="col-2 q-table__title"></div>
                    <q-space />
                    <q-btn color="accent" style="float:right;margin-right:10px;" size="sm" class="q-mr-md"
                        @click="synchronisation()">
                        <i class="iconfont icon-tongbu"></i>
                        <div style="margin-left: 5px;">同步企业微信标签</div>
                    </q-btn>
                    <q-btn color="accent" style="float:right;margin-right:0;" size="sm" class="q-mr-md" icon="add"
                        label="添加标签组" @click="EditCategory()"></q-btn>
                </template>

                <template v-slot:body-cell-Name="props">
                    <q-td :props="props">
                        <div style="display: flex;flex-wrap: wrap;">
                            <span>{{props.row.Name}}</span>
                            <i class="iconfont icon-xiugai" style="font-size: 13px;color: #3FC4FF;margin-left: 5px;"
                                @click="getParent(props.row,1)"></i>
                        </div>

                    </q-td>
                </template>
                <template v-slot:body-cell-ChildList="props">
                    <q-td :props="props">
                        <div style="display: flex;flex-wrap: wrap;max-width: 1200px;">
                            <div v-for="(x,y) in props.row.ChildList" :key='y' style="margin: 5px;">
                                <q-btn-group>

                                    <q-btn-dropdown auto-close rounded :label="x.Name" split>
                                        <!-- dropdown content goes here -->
                                        <q-list padding
                                            style="width: 100px;display: flex;align-items: center;background-color: #3FC4FF;justify-content: center;">
                                            <!-- <q-btn flat style="color: #3FC4FF" icon="edit" @click="getParent(x,2)" size="xs" />
                                                <q-btn flat style="color: #FF0080" icon="delete"   @click="goDetailed(x)" size="xs"/> -->
                                            <q-btn flat style="color: white" icon="edit" @click="getParent(x,2)"
                                                size="xs" />
                                            <q-btn flat style="color: white" icon="delete" @click="goDetailed(x)"
                                                size="xs" />
                                        </q-list>
                                    </q-btn-dropdown>

                                </q-btn-group>
                            </div>
                            <q-btn flat size="sm" icon="add" style="font-weight:400;color: #3FC4FF;margin-top: 10px;"
                                label="添加标签" @click="getParent(props.row,3)" />
                        </div>

                    </q-td>
                </template>

                <template v-slot:bottom>
                    <!-- <q-pagination class="full-width justify-end" v-model="msg.PageIndex" color="primary"
                        :max="msg.PageCount" :input="true" @input="changePage" /> -->
                </template>


                <template v-slot:body-cell-optioned="props">
                    <q-td :props="props">

                        <q-btn flat size="xs" icon="delete" color="negative" class="q-mr-xs" label="删除"
                            @click="goDetailed(props.row)" />
                    </q-td>
                </template>

            </q-table>
        </div>
        <q-dialog v-model="isShow" persistent>
            <q-card style="width: 600px; max-width: 80vw;">
                <q-card-section class="row items-center q-pb-none">
                    <div class="text-h6">新增标签组</div>
                    <q-space />
                    <q-btn icon="close" flat round dense v-close-popup />
                </q-card-section>
                <q-separator />
                <q-card-section class="q-pt-none" style="margin-top: 15px;padding: 20px;">

                    <q-input filled clearable standout="bg-primary text-white" v-model="addMsg.Name" label="标签组名称"
                        :rules="[val => !!val || '请输入分组名称']" ref="Name" />
                    <q-input filled clearable standout="bg-primary text-white" v-model="addMsg.Sort" label="标签组排序"
                        :rules="[val => !!val || '请输入分组排序']" ref="Sort" />
                    <div style="color: #787878;">*注:标签组/标签,排序值越大,排序越靠前！</div>
                    <div style="width: 100%;" v-if="addMsg.ChildList && addMsg.ChildList.length>0">
                        <div class="col row wrap q-mr-lg q-col-gutter-md" v-for="(x,y) in addMsg.ChildList" :key='y'
                            style="margin-top: 0px;">
                            <div class="col-7">
                                <q-input filled clearable standout="bg-primary text-white" v-model="x.Name"
                                    label="输入标签名称" maxlength="20" />
                            </div>
                            <div class="col-3">
                                <q-input filled standout="bg-primary text-white" v-model="x.Sort" label="输入排序"
                                    maxlength="20" type="number" />
                            </div>
                            <div class="col-2">
                                <q-btn flat icon="delete" color="negative" class="q-mr-xs" label=""
                                    @click="addMsg.ChildList.splice(y,1)" />
                            </div>
                        </div>

                    </div>
                    <q-btn flat size="sm" icon="add" style="font-weight:400;color: #3FC4FF;margin-top: 10px;"
                        label="添加标签" @click="addbiaoqian()" />
                </q-card-section>
                <q-separator />
                <q-card-actions align="right" class="bg-white">
                    <q-btn class="q-mr-md" label="取消" @click="isShow = false" />
                    <q-btn color="accent" class="q-mr-md" label="确定" @click="submit()" :loading="btnloading" />
                </q-card-actions>
            </q-card>
        </q-dialog>
        <!-- 修改标签组名称 -->
        <q-dialog v-model="isParent" persistent>
            <q-card style="width: 600px; max-width: 80vw;">
                <q-card-section class="row items-center q-pb-none">
                    <div class="text-h6">修改标签信息</div>
                    <q-space />
                    <q-btn icon="close" flat round dense v-close-popup />
                </q-card-section>
                <q-separator />
                <q-card-section class="q-pt-none" style="margin-top: 15px;padding: 20px;">

                    <q-input filled clearable standout="bg-primary text-white" v-model="addMsg.Name" label="标签组名称"
                        :rules="[val => !!val || '请输入分组名称']" ref="eName" />
                    <q-input filled clearable standout="bg-primary text-white" v-model="addMsg.Sort" label="标签组排序"
                        :rules="[val => !!val || '请输入分组排序']" ref="eSort" />
                    <div style="color: #787878;">*注:标签组/标签,排序值越大,排序越靠前！</div>
                </q-card-section>
                <q-separator />
                <q-card-actions align="right" class="bg-white">
                    <q-btn class="q-mr-md" label="取消" @click="isParent = false" />
                    <q-btn color="accent" class="q-mr-md" label="确定" @click="submitParent()" :loading="btnloading" />
                </q-card-actions>
            </q-card>
        </q-dialog>
    </div>
</template>

<script>
    import {
        getWeChatLableList,
        setWeChatLable,
        delWeChatLable,
        setSyncWeChatLable
    } from '../../api/system/wechat';
    import {
        Loading,
        QSpinnerPie
    } from 'quasar'
    const addobj = {
        Id: 0,
        ParentId: 0,
        Name: '',
        Sort: 1,
        ChildList: [{ Name: '', Sort: 1, }],
    }
    export default {
        meta: {
            title: "客户标签"
        },

        data() {
            return {
                msg: {
                    rowsPerPage: 999999
                },
                currentUrl: "",
                dataList: [],
                keyWords: '',
                isShow: false,
                isParent: false,
                loading: true,
                btnloading: false,
                columns: [{
                    name: 'Sort',
                    field: 'Sort',
                    label: '排序',
                    align: 'left'
                },
                {
                    name: 'Name',
                    field: 'Name',
                    label: '标签组名称',
                    align: 'left',
                },
                {
                    name: 'ChildList',
                    field: 'ChildList',
                    label: '标签',
                    align: 'left',
                },

                {
                    name: 'optioned',
                    label: '操作',
                    field: 'DeptId'
                }
                ],

                addMsg: Object.assign({}, addobj),
                edittype: 1,
                isalladopt: true,
            }
        },

        mounted() {
            this.getList()
        },
        methods: {

            addbiaoqian() {//添加标签
                let obj = {
                    Name: '',
                    Sort: 1,
                }
                this.addMsg.ChildList.push(obj)
            },

            goDetailed(item) {
                let delMsg = {
                    LableId: item.Id,
                };
                this.$q.dialog({
                    title: '提示信息',
                    message: '是否确定删除？',
                    cancel: true,
                    persistent: true,
                    ok: "确定",
                    cancel: "取消",
                }).onOk(() => {
                    delWeChatLable(delMsg).then(res => {
                        if (res.Code == 1) {
                            this.$q.notify({
                                icon: 'iconfont icon-chenggong',
                                color: 'accent',
                                timeout: 2000,
                                message: '删除成功！',
                                position: 'top'
                            })
                            this.getList();
                        }
                    })
                }).onCancel(() => {

                });
            },
            //刷新页面
            refreshPage() {
                this.getList();
            },
            //获取课程系列分页列表
            getList() {
                this.loading = true;
                getWeChatLableList({}).then(res => {
                    this.loading = false;
                    this.dataList = res.Data;

                })
            },
            //新增修改课程系列
            EditCategory() {
                this.addMsg = Object.assign({}, addobj)
                this.addMsg.ChildList = [{ Name: '', Sort: 1, }]
                this.isShow = true;
            },
            isChildList() {
                let isName = false;
                let issort = false;
                if (this.addMsg.ChildList.length > 0) {
                    this.addMsg.ChildList.map(x => {
                        if (x.Name == '') {
                            isName = true;
                            return
                        }
                        if (x.Sort == '') {
                            console.log(x.Sort)
                            issort = true;
                            return
                        }
                    })
                }
                if (isName == true) {
                    this.$q.notify({
                        type: 'negative',
                        message: `请填写标签名称`,
                        position: 'top'
                    })
                    this.isalladopt = false
                    return
                }
                if (issort == true) {
                    this.$q.notify({
                        type: 'negative',
                        message: `请填写标签排序`,
                        position: 'top'
                    })
                    this.isalladopt = false
                    return
                }
            },
            submit() {
                this.isalladopt = true
                this.$refs.Name.validate();
                this.$refs.Sort.validate();

                this.isChildList()
                if (!this.$refs.Name.hasError && !this.$refs.Sort.hasError) {
                    if (this.isalladopt == true) {
                        this.setlable(this.addMsg)
                    }

                }
            },
            submitParent() {

                this.$refs.eName.validate();
                this.$refs.eSort.validate();
                if (!this.$refs.eName.hasError && !this.$refs.eSort.hasError) {
                    let msg
                    if (this.edittype == 1) {
                        msg = {
                            Id: this.addMsg.Id,
                            Name: this.addMsg.Name,
                            Sort: this.addMsg.Sort,
                        }
                    } else {
                        msg = {
                            Name: this.addMsg.Name,
                            Sort: this.addMsg.Sort,
                            Id: this.addMsg.Id,
                            ParentId: this.addMsg.ParentId,
                        }
                    }

                    this.setlable(msg)

                }


            },
            setlable(msg) {
                this.btnloading = true
                setWeChatLable(msg).then(res => {
                    this.btnloading = false
                    if (res.Code == 1) {
                        this.$q.notify({
                            icon: 'iconfont icon-chenggong',
                            color: 'accent',
                            timeout: 2000,
                            message: '数据保存成功！',
                            position: 'top'
                        })
                        this.getList()
                        this.addMsg = Object.assign({}, addobj)
                        this.isShow = false;
                        this.isParent = false;
                    }
                })
            },
            getParent(row, type) {
                if (type == 1) {
                    this.addMsg = JSON.parse(JSON.stringify(row))

                } else if (type == 2) {
                    this.addMsg = {
                        ParentId: row.ParentId,
                        Name: row.Name,
                        Id: row.Id,
                        Sort: row.Sort,
                    }
                } else {
                    this.addMsg = {
                        ParentId: row.Id,
                        Name: '',
                        Id: 0,
                        Sort: '1',
                    }
                }
                this.isParent = true;
                this.edittype = type
            },
            synchronisation() {//同步
                Loading.show({
                    message: '数据正在同步中，请稍后进入企业微信查看',
                    spinner: QSpinnerPie
                })
                setSyncWeChatLable({}).then(res => {
                    if (res.Code == 1) {
                        that.$q.notify({
                            icon: 'iconfont icon-chenggong',
                            color: 'accent',
                            timeout: 2000,
                            message: '操作成功',
                            position: 'top'
                        })
                        Loading.hide()
                    }
                })
                    .catch(err => {
                        Loading.hide()

                    })
            },

        }
    }

</script>
<style lang="sass">
    @import url('~assets/css/table.sass')
</style>