<style>
    .labelBar .LB_content{
        margin-top:10px;
    }
    .labelBar .LB_divInner{
        display: flex;
        color:#303133;
    }
    .labelBar .Label_mobile{
        width: 404px;
        height: 736px;
        border-radius: 30px;
        background-color: #fff;
        padding: 33px 12px;
        margin-right: 10px;
    }
    .labelBar .Label_Screen{
        border: 2px solid #F3F5F6;
        height: 670px;
        width: 380px;
        margin: 0 auto;
        position: relative;
        background-color: #F7F7F7;
    }
    .labelBar .Label_Head{
        position: absolute;
        top: 0;
        left: 0;
        width: 376px;
        height: 60px;
        line-height: 60px;
        font-size: 18px;
        font-weight: bolder;
        text-align: center;
    }
    .labelBar .Label_foot{
        position: absolute;
        bottom: 0;
        left: 0;
        width: 376px;
        height: 45px;
        display: flex;
        flex-direction: row;
    }
    .labelBar .Label_foot>div{
        display: flex;
        align-items: center;
        flex-grow:1;
        flex-direction: column;
    }
    .Label_Screen .Label_foot .nav-icon {
        height: 20px;
        width: 20px;
    }
    .labelBar .Label_Right{
        width:100%;
    }
    .Label_RightTop{
        background-color: #fff;
    }
    .labelBar .Label_title{
        padding: 18px 20px;
        border-bottom: 1px solid #F3F3F3;
    }
    .labelBar .Label_RightBtm{
        margin-top:20px;
        background-color: #fff;
    }
    .labelBar .nav_Main{
        display: flex;
        justify-content: flex-start;
    }
    .labelBar .nav_IconContent{
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-start;
    }
    .labelBar .nav_Add{
        display: flex;
        border:1px dashed #eeeeee;
        cursor: pointer;
        width: 80px;
        height: 80px;
        margin-right: 10px;
        align-items: center;
        justify-content: center;
    }
    .labelBar .nav-add-icon {
        font-size: 50px;
        color: #eeeeee;
    }
    .labelBar .bottom-icon {
        width: 80px;
        height: 80px;
        margin-right: 10px;
        border: 1px solid #eeeeee;
        cursor: move;
        position: relative;
        display: flex;
        flex-direction: column;
    }
    .labelBar .btm_icon {
        width: 30px;
        height: 30px;
    }
    .Btm_ImgIcon,.btnCenter{
        flex-grow: 1;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .labelBar .nav_Action{
        display:flex;
        position: absolute;
        width:100%;
        height:26px;
        bottom:0;
        visibility: hidden;
        cursor: pointer!important;
    }
    .nav_Action span{
        display: flex;
        flex-grow: 1;
        align-items: center;
        justify-content: center;
    }
    .bottom-icon:hover .nav_Action{
        visibility: visible;
    }
    .labelBar .labelBarIconImg {
        width: 80px;
        height: 80px;
    }
    .labelBar .labelBarIconImg img{
        width:100%;
        height:100%;
    }
</style>
<template>
    <div class="labelBar">
        <div class="CommonHeader">标签栏设置</div>
        <div class="LB_content">
            <div class="LB_divInner">
                <div class="Label_mobile">
                    <div class="Label_Screen">
                        <div class="Label_Head" :style="{color:TextColor,backgroundColor:BackColor}">这里是标题</div>
                        <div class="Label_foot" :style="{backgroundColor:btmBackground}">
                            <div v-for="(item,index) in msg.navObj" :key="index" @click="getChecked(item)">
                                <div>
                                    <img class="nav-icon" v-if="item.isActive" :src="domainManager().ImageUrl+'/Static/'+item.checkedIcon" alt="">
                                    <img class="nav-icon" v-else :src="domainManager().ImageUrl+'/Static/'+item.icon" alt="">
                                </div>
                                <div v-if="item.isActive" :style="{color:item.ckedTextColor}">
                                    {{item.name}}
                                </div>
                                <div v-else :style="{color:item.textColor}">
                                    {{item.name}}
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="Label_Right">
                    <div class="Label_RightTop">
                        <div class="Label_title">顶部标题栏</div>
                        <el-form label-width="120px" style="padding:20px 0;">
                            <el-form-item label="文字颜色" size="small">
                                <el-radio-group v-model="msg.textColor" @change="changeColor">
                                    <el-radio label="1">白色</el-radio>
                                    <el-radio label="2">黑色</el-radio>
                                </el-radio-group>
                            </el-form-item>
                            <el-form-item label="背景颜色" size="small">
                                  <el-color-picker size="small" v-model="msg.titleBgColor" @change="getTopBgColort"></el-color-picker>
                            </el-form-item>
                        </el-form>
                    </div>
                    <div class="Label_RightBtm">
                        <div class="Label_title">底部标签栏</div>
                        <el-form label-width="120px" style="padding:20px 0;">
                            <el-form-item label="背景颜色" size="small">
                                  <el-color-picker size="small" v-model="msg.btmBgColor" @change="getBtmBgColor"></el-color-picker>
                            </el-form-item>
                            <el-form-item label="导航阴影效果" size="small">
                                <el-switch v-model="msg.isShadow"></el-switch>
                            </el-form-item>
                            <el-form-item label="底部导航图标" size="small">
                                <div class="nav_Main">
                                    <div class="nav_IconContent">
                                        <div class="bottom-icon" v-for="(item,index) in msg.navObj" :key="index">
                                            <div class="Btm_ImgIcon">
                                                <img class="btm_icon" :src="domainManager().ImageUrl+'/Static/'+item.icon" alt="">
                                            </div>
                                            <div class="btnCenter">{{item.name}}</div>
                                            <div class="nav_Action">
                                                <span style="background: rgba(64, 158, 255, 0.9);" @click="EditInfo(item)">编辑</span>
                                                <span style="background: rgba(245, 108, 108, 0.9);" @click="delItem(index)">删除</span>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="nav_Add" @click="addIconList">
                                        <i class="el-icon-plus nav-add-icon"></i>
                                    </div>
                                </div>
                            </el-form-item>
                        </el-form>
                    </div>
                </div>
            </div>  
        </div>

        <!-- 导航菜单编辑 -->
        <el-dialog title="导航菜单编辑" :visible.sync="isShowDialog" width="800px">
            <el-form :model="addMsg" :rules="rules" ref="addMsg" label-width="120px">
                <el-form-item label="图标" prop="icon">
                    <div>
                        <el-tooltip class="item" effect="dark" content="建议尺寸:64*64" placement="top-start">
                            <el-button size="small" @click="UploadIcon">选择文件</el-button>
                        </el-tooltip>
                    </div>
                    <div class="labelBarIconImg">
                        <img v-if="addMsg.icon" :src="domainManager().ImageUrl+'/Static/'+addMsg.icon" alt="" />
                        <img v-else src="../../assets/img/default.png" alt="" />
                    </div>
                </el-form-item>
                <el-form-item label="选择状态图标" prop="checkedIcon">
                    <div>
                        <el-tooltip class="item" effect="dark" content="建议尺寸:64*64" placement="top-start">
                            <el-button size="small" @click="UploadCkedIcon">选择文件</el-button>
                        </el-tooltip>
                    </div>
                    <div class="labelBarIconImg">
                        <img v-if="addMsg.checkedIcon" :src="domainManager().ImageUrl+'/Static/'+addMsg.checkedIcon" alt="" />
                        <img v-else src="../../assets/img/default.png" alt="" />
                    </div>
                </el-form-item>
                <el-form-item label="名称" prop="name">
                    <el-input type="text" v-model="addMsg.name" size="small" class="w400" maxlength="100" />
                </el-form-item>
                <el-form-item label="文字颜色" prop="textColor">
                    <el-color-picker size="small" v-model="addMsg.textColor"></el-color-picker>
                </el-form-item>
                <el-form-item label="选中文字颜色" prop="ckedTextColor">
                    <el-color-picker size="small" v-model="addMsg.ckedTextColor"></el-color-picker>
                </el-form-item>
                <el-form-item label="导航链接" prop="Url">
                    <el-input v-model="addMsg.Url" class="w400" size="small" maxlength="100" />
                    <el-button plain size="small">选择链接</el-button>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button size="small" @click="isShowDialog = false">取 消</el-button>
                <el-button size="small" type="primary" @click="submitForm('addMsg')">提交</el-button>
            </span>
        </el-dialog>

    </div>
</template>
<script>
  export default {
    data() {
      let validataIcon = (rule, value, callback) => {
        if (this.addMsg.icon == '') {
          return callback(new Error('请选择图标'));
        } else {
          callback();
        }
      }
      let validataCkedIcon = (rule, value, callback) => {
        if (this.addMsg.checkedIcon == '') {
          return callback(new Error('请选择选中状态图标'));
        } else {
          callback();
        }
      }
      return {
         //文字颜色
         TextColor:'',
         BackColor:'rgb(255, 255, 255)',
         //底部颜色
         btmBackground:'rgb(255, 255, 255)',

        //显示弹窗
         isShowDialog:false,
         msg:{
            //文字颜色
            textColor: '2',
            //选择的顶部背景色
            titleBgColor:'#FFFFFF',
            //底部背景色
            btmBgColor:"#FFFFFF",
            //是否导航阴影效果
            isShadow:false,
            navObj:[{
                name:'我',
                icon:'nav-icon-user.png',
                checkedIcon:'nav-icon-user.active.png',
                textColor:'rgb(136, 136, 136)',
                ckedTextColor:'rgb(255, 69, 68)',
                isActive:true
            },{
                name:'首页',
                icon:'nav-icon-index.png',
                checkedIcon:'nav-icon-index.active.png',
                textColor:'rgb(136, 136, 136)',
                ckedTextColor:'rgb(255, 69, 68)',
                isActive:false
            },{
                name:'购物车',
                icon:'nav-icon-cart.png',
                checkedIcon:'nav-icon-cart.active.png',
                textColor:'rgb(136, 136, 136)',
                ckedTextColor:'rgb(255, 69, 68)',
                isActive:false
            },{
                name:'分类',
                icon:'nav-icon-cat.png',
                checkedIcon:'nav-icon-cat.active.png',
                textColor:'rgb(136, 136, 136)',
                ckedTextColor:'rgb(255, 69, 68)',
                isActive:false
            }]
         },
         addMsg:{
             icon:'',
             checkedIcon:'',
             name:'',
             textColor:'rgb(136, 136, 136)',
             ckedTextColor:'rgb(255, 69, 68)',
             Url:''   
         },
         rules:{
            icon: [{
                required: true,
                validator:validataIcon,
                trigger: "blur"
            }],
            checkedIcon: [{
                required: true,
                validator:validataCkedIcon,
                trigger: "blur"
            }],
            name:[{
                required: true,
                message: "请输入导航名称",
                trigger: "blur"
            }],
            textColor:[{
                required: true,
                message: "",
                trigger: "blur"
            }],
            ckedTextColor:[{
                required: true,
                message: "",
                trigger: "blur"
            }],
            Url:[{
                required: true,
                message: "请选择导航链接",
                trigger: "blur"
            }],
         }
      };
    },
    created() {

    },
    methods: {
        //点击切换
        getChecked(item){
            this.msg.navObj.forEach(x=>{
                x.isActive=false;
            })
            item.isActive=!item.isActive;
        },
        //切换文字颜色
        changeColor(val){
            console.log(val,'val')
            if(val==1){
                this.TextColor="#fff"
            }else{
                this.TextColor="rgb(0, 0, 0)"
            }
        },
        //切换顶部背景色
        getTopBgColort(val){
            this.BackColor=val;
        },
        //切换底部背景色
        getBtmBgColor(val){
            this.btmBackground=val;
        },
        //删除底部图标
        delItem(index){
            this.msg.navObj.splice(index,1);
        },
        //上传图标
        UploadIcon(){
        },
        //上传选中图标
        UploadCkedIcon(){
        },
        //点击添加图标
        addIconList(){
            this.isShowDialog=true;
            this.addMsg.icon='';
            this.addMsg.checkedIcon='';
            this.addMsg.name='';
            this.addMsg.textColor='rgb(136, 136, 136)';
            this.addMsg.ckedTextColor='rgb(255, 69, 68)';
            this.addMsg.Url='';
        },
        //点击编辑
        EditInfo(item){
            this.addMsg = JSON.parse(JSON.stringify(item));
            this.isShowDialog=true;
        },
        //提交数据
        submitform(addMsg) {
            //提交创建、修改表单
            this.$refs[addMsg].validate(valid => {
                if (valid) {
                    this.saveMsg();
                } else {
                    return false;
                }
            });
        },
    },
    mounted() {

    }
  };
</script>