<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: 20px 0;
    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;
    float: left;
  }

  .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:mallMsg.TopNavWordColor,backgroundColor:mallMsg.TopNavBgColor}">这里是标题
            </div>
            <div class="Label_foot" :style="{backgroundColor:mallMsg.BottomNavBgColor}">
              <div v-for="(item,index) in mallMsg.BottomTagList" :key="index" @click="getChecked(item)"
                style="cursor:pointer;">
                <div>
                  <img class="nav-icon" v-if="item.IsActive" :src="item.CheckedIcon" alt="">
                  <img class="nav-icon" v-else :src="item.DefaultIcon" alt="">
                </div>
                <div v-if="item.IsActive" :style="{color:item.CheckedColor}">
                  {{item.TagName}}
                </div>
                <div v-else :style="{color:item.DefaultColor}">
                  {{item.TagName}}
                </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="mallMsg.TopNavWordType" @change="changeColor">
                  <el-radio :label="0">白色</el-radio>
                  <el-radio :label="1">黑色</el-radio>
                </el-radio-group>
              </el-form-item>
              <el-form-item label="背景颜色" size="small">
                <el-color-picker size="small" v-model="mallMsg.TopNavBgColor" @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="mallMsg.BottomNavBgColor" @change="getBtmBgColor">
                </el-color-picker>
              </el-form-item>
              <el-form-item label="导航阴影效果" size="small">
                <el-switch v-model="mallMsg.BottomNavIsShadow" :active-value="1" :inactive-value="0"></el-switch>
              </el-form-item>
              <el-form-item label="底部导航图标" size="small">
                <div class="nav_Main">
                  <div class="nav_IconContent">
                    <draggable v-model="mallMsg.BottomTagList">
                      <div class="bottom-icon" v-for="(item,index) in mallMsg.BottomTagList" :key="index">
                        <div class="Btm_ImgIcon">
                          <img class="btm_icon" :src="item.DefaultIcon" alt="">
                        </div>
                        <div class="btnCenter">{{item.TagName}}</div>
                        <div class="nav_Action">
                          <span style="background: rgba(64, 158, 255, 0.9);" @click="EditInfo(item,index)">编辑</span>
                          <span style="background: rgba(245, 108, 108, 0.9);" @click="delItem(index,item)">删除</span>
                        </div>
                      </div>
                    </draggable>
                  </div>

                  <div class="nav_Add" v-if="mallMsg.BottomTagList.length<5" @click="addIconList">
                    <i class="el-icon-plus nav-add-icon"></i>
                  </div>
                </div>
              </el-form-item>
            </el-form>
          </div>
          <el-button size="small" type="primary" @click="saveMsg()">保存</el-button>
          <el-button size="small" @click="resetInfo()">恢复默认</el-button>
        </div>
      </div>
    </div>
    <!-- 导航菜单编辑 -->
    <el-dialog title="导航菜单编辑" :visible.sync="isShowDialog" width="800px">
      <el-form :model="addMsg" :rules="rules" ref="addMsg" label-width="120px">
        <!--prop="icon" HK 0428去掉-->
        <el-form-item label="图标">
          <div>
            <el-tooltip class="item" effect="dark" content="建议尺寸:64*64" placement="top-start">
              <el-button size="small" @click="choicImg=true,checkIndex=1">选择文件</el-button>
            </el-tooltip>
          </div>
          <div class="labelBarIconImg">
            <img v-if="addMsg.DefaultIcon" :src="addMsg.DefaultIcon" alt="" />
            <img v-else src="../../assets/img/default.png" alt="" />
          </div>
        </el-form-item>
        <!--prop="checkedIcon" HK 0428去掉-->
        <el-form-item label="选择状态图标">
          <div>
            <el-tooltip class="item" effect="dark" content="建议尺寸:64*64" placement="top-start">
              <el-button size="small" @click="choicImg=true,checkIndex=2">选择文件</el-button>
            </el-tooltip>
          </div>
          <div class="labelBarIconImg">
            <img v-if="addMsg.CheckedIcon" :src="addMsg.CheckedIcon" alt="" />
            <img v-else src="../../assets/img/default.png" alt="" />
          </div>
        </el-form-item>
        <el-form-item label="名称" prop="TagName">
          <el-input type="text" v-model="addMsg.TagName" size="small" class="w400" maxlength="100" />
        </el-form-item>
        <el-form-item label="文字颜色">
          <el-color-picker size="small" v-model="addMsg.DefaultColor"></el-color-picker>
        </el-form-item>
        <el-form-item label="选中文字颜色">
          <el-color-picker size="small" v-model="addMsg.CheckedColor"></el-color-picker>
        </el-form-item>
        <el-form-item label="导航链接" prop="TagLink">
          <el-input v-model="addMsg.TagLink" class="w400" size="small" maxlength="100" :disabled="true" />
          <el-button plain size="small" @click="isShowLink=true">选择链接</el-button>
        </el-form-item>
        <el-form-item label="类型" prop="TagType">
          <el-select v-model="addMsg.TagType">
            <el-option label="通用" :value="0">
            </el-option>
            <el-option label="电商" :value="1">
            </el-option>
            <el-option label="教育" :value="2">
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button size="small" @click="isShowDialog = false,clearAddmsg()">取 消</el-button>
        <el-button size="small" type="primary" @click="submitForm('addMsg')">提交</el-button>
      </span>
    </el-dialog>
    <el-dialog title="选择链接" :visible.sync="isShowLink" width="800px">
      <chooseMenu ref="chooseMenu">
      </chooseMenu>
      <span slot="footer" class="dialog-footer">
        <el-button size="small" @click="isShowLink=false">取 消</el-button>
        <el-button size="small" type="danger" @click="getMenu()">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 选择图片文件 -->
    <el-dialog title="选择文件" :visible.sync="choicImg" width="1240px">
      <ChooseImg @SelectId="SelectId"></ChooseImg>
    </el-dialog>
  </div>
</template>
<script>
  import chooseMenu from "../common/chooseMenu.vue";
  import ChooseImg from "@/components/global/ChooseImg.vue";
  import draggable from "vuedraggable"
  export default {
    data() {
      let validataIcon = (rule, value, callback) => {
        if (this.addMsg.DefaultIcon == '') {
          return callback(new Error('请选择图标'));
        } else {
          callback();
        }
      }
      let validataCkedIcon = (rule, value, callback) => {
        if (this.addMsg.CheckedIcon == '') {
          return callback(new Error('请选择选中状态图标'));
        } else {
          callback();
        }
      }
      return {
        //图标索引
        checkIndex: 0,
        //选择图片
        choicImg: false,
        //是否显示链接弹窗
        isShowLink: false,
        mallMsg: {
          MallBaseId: 0,
          TopNavWordType: 1, //顶部标题文件颜色类型(0-白色，1-黑色)
          TopNavWordColor: "rgb(0, 0, 0)", //顶部标题文字颜色
          TopNavBgColor: "rgb(255, 255, 255)", //顶部导航栏背景颜色
          BottomNavBgColor: "rgb(255, 255, 255)", //底部导航栏背景颜色
          BottomNavIsShadow: 0, //导航底部是否开启阴影效果(0-未开启，1-开启)
          BottomTagList: [], //底部导航标签栏
        },
        //显示弹窗
        isShowDialog: false,
        //默认底部导航列表
        defaultTagList: [{
            TagId: 0, //标签Id
            TenantId: 0, //商户Id
            MallBaseId: 0, //小程序Id
            TagName: '首页',
            DefaultIcon: this.domainManager().ImageUrl + '/Static/nav-icon-index.png',
            CheckedIcon: this.domainManager().ImageUrl + '/Static/nav-icon-index.active.png',
            DefaultColor: 'rgb(136, 136, 136)',
            CheckedColor: 'rgb(255, 69, 68)',
            TagLink: "/pages/index/index", //链接地址
            TagType: 0, //标签模式(0-全部,1-电商,2-教育)
            TagSort: 1, //排序
            IsActive: true
          },
          {
            TagId: 0, //标签Id
            TenantId: 0, //商户Id
            MallBaseId: 0, //小程序Id
            TagName: '分类',
            DefaultIcon: this.domainManager().ImageUrl + '/Static/nav-icon-cat.png',
            CheckedIcon: this.domainManager().ImageUrl + '/Static/nav-icon-cat.active.png',
            DefaultColor: 'rgb(136, 136, 136)',
            CheckedColor: 'rgb(255, 69, 68)',
            TagLink: "/pages/cats/cats?cat_id=", //链接地址
            TagType: 0, //标签模式(0-全部,1-电商,2-教育)
            TagSort: 2, //排序
            IsActive: false
          },
          {
            TagId: 0, //标签Id
            TenantId: 0, //商户Id
            MallBaseId: 0, //小程序Id
            TagName: '购物车',
            DefaultIcon: this.domainManager().ImageUrl + '/Static/nav-icon-cart.png',
            CheckedIcon: this.domainManager().ImageUrl + '/Static/nav-icon-cart.active.png',
            DefaultColor: 'rgb(136, 136, 136)',
            CheckedColor: 'rgb(255, 69, 68)',
            TagLink: "/pages/cart/cart", //链接地址
            TagType: 0, //标签模式(0-全部,1-电商,2-教育)
            TagSort: 3, //排序
            IsActive: false
          },
          {
            TagId: 0, //标签Id
            TenantId: 0, //商户Id
            MallBaseId: 0, //小程序Id
            TagName: '我',
            DefaultIcon: this.domainManager().ImageUrl + '/Static/nav-icon-user.png', //默认图片
            CheckedIcon: this.domainManager().ImageUrl + '/Static/nav-icon-user.active.png', //激活状态图片
            DefaultColor: 'rgb(136, 136, 136)', //默认字体颜色
            CheckedColor: 'rgb(255, 69, 68)', //激活字体颜色
            TagType: 0, //标签模式(0-全部,1-电商,2-教育)
            TagLink: "/pages/user-center/user-center", //链接地址
            TagSort: 4, //排序
            IsActive: false
          }
        ],
        isAdd: true, //是否新加标签
        addMsg: {
          TagId: 0, //标签Id
          TenantId: 0, //商户Id
          MallBaseId: 0, //小程序Id
          TagName: '',
          DefaultIcon: '', //默认图片
          CheckedIcon: '', //激活状态图片
          DefaultColor: 'rgb(136, 136, 136)', //默认字体颜色
          CheckedColor: 'rgb(255, 69, 68)', //激活字体颜色
          TagLink: "", //链接地址
          TagType: 0, //标签模式(0-全部,1-电商,2-教育)
          TagSort: 1, //排序
          IsActive: false
        },
        EditIndex: -1, //编辑的行
        rules: {
          icon: [{
            required: true,
            validator: validataIcon,
            trigger: "blur"
          }],
          checkedIcon: [{
            required: true,
            validator: validataCkedIcon,
            trigger: "blur"
          }],
          TagName: [{
            required: true,
            message: "请输入导航名称",
            trigger: "blur"
          }],
          TagLink: [{
            required: true,
            message: "请选择导航链接",
            trigger: "blur"
          }],
        }
      };
    },
    components: {
      chooseMenu,
      ChooseImg,
      draggable,
    },
    created() {

    },
    methods: {
      //选择图片
      SelectId(msg) {
        if (this.checkIndex == 1) {
          this.addMsg.DefaultIcon = this.getIconLink(msg.url);
        } else if (this.checkIndex == 2) {
          this.addMsg.CheckedIcon = this.getIconLink(msg.url);
        }
        this.choicImg = false;
      },
      getMenu() {
        //调用子组件方法
        var obj = this.$refs.chooseMenu.getChooseMenu();
        this.addMsg.TagLink = obj.PageUrl;
        this.isShowLink = false;
      },
      //点击切换
      getChecked(item) {
        this.mallMsg.BottomTagList.forEach(x => {
          x.IsActive = false;
        })
        item.IsActive = !item.IsActive;
      },
      //切换文字颜色
      changeColor(val) {
        if (this.mallMsg.TopNavWordType == 0) {
          this.mallMsg.TopNavWordColor = "#fff"
        } else {
          this.mallMsg.TopNavWordColor = "rgb(0, 0, 0)"
        }
      },
      //切换顶部背景色
      getTopBgColort(val) {
        this.mallMsg.TopNavBgColor = val;
      },
      //切换底部背景色
      getBtmBgColor(val) {
        this.mallMsg.BottomNavBgColor = val;
      },
      //删除底部图标
      delItem(index, item) {
        if (item.TagId > 0) {
          this.apipost("/api/Tenant/RemoveMiniProgramMallTag", {
            TagId: item.TagId
          }, res => {
            if (res.data.resultCode == 1) {} else {
              this.Info(res.data.message);
            }
          })
        }
        this.mallMsg.BottomTagList.splice(index, 1);
      },
      //点击添加图标
      addIconList() {
        this.isAdd = true;
        this.isShowDialog = true;
        this.clearAddmsg();
      },
      clearAddmsg() {
        this.addMsg.TagId = 0;
        this.addMsg.TenantId = 0;
        this.addMsg.MallBaseId = 0;
        this.addMsg.TagName = '';
        this.addMsg.DefaultIcon = '1';
        this.addMsg.CheckedIcon = '1';
        this.addMsg.DefaultColor = 'rgb(136, 136, 136)';
        this.addMsg.CheckedColor = 'rgb(255, 69, 68)';
        this.addMsg.TagLink = '';
        this.addMsg.TagSort = 1;
        this.addMsg.IsActive = false;
      },
      //点击编辑
      EditInfo(item, index) {
        this.isAdd = false;
        this.EditIndex = index;
        this.addMsg = JSON.parse(JSON.stringify(item));
        this.isShowDialog = true;
      },
      //提交数据
      submitForm(addMsg) {
        //提交创建、修改表单
        this.$refs[addMsg].validate(valid => {
          if (valid) {
            if (this.isAdd) {
              this.mallMsg.BottomTagList.push(JSON.parse(JSON.stringify(this.addMsg)));
              this.clearAddmsg();
            } else {
              this.mallMsg.BottomTagList[this.EditIndex] = JSON.parse(JSON.stringify(this.addMsg));
            }
            this.isShowDialog = false;
          } else {
            return false;
          }
        });
      },
      //获取导航栏设置
      getNavData() {
        var qMsg = {
          isGetNav: 1,
          MallBaseId: this.getLocalStorage().MallBaseId
        };
        this.apipost("/api/Tenant/GetMiniPrograme", qMsg, res => {
          if (res.data.resultCode == 1) {
            this.mallMsg.MallBaseId = res.data.data.MallBaseId;
            if (res.data.data && res.data.data.TopNavWordType) {
              this.mallMsg.TopNavWordType = res.data.data.TopNavWordType;
            }
            if (res.data.data && res.data.data.TopNavWordColor) {
              this.mallMsg.TopNavWordColor = res.data.data.TopNavWordColor;
            }
            if (res.data.data && res.data.data.TopNavBgColor) {
              this.mallMsg.TopNavBgColor = res.data.data.TopNavBgColor;
            }
            if (res.data.data && res.data.data.BottomNavBgColor) {
              this.mallMsg.BottomNavBgColor = res.data.data.BottomNavBgColor;
            }
            if (res.data.data && res.data.data.BottomNavIsShadow) {
              this.mallMsg.BottomNavIsShadow = res.data.data.BottomNavIsShadow;
            }
            this.mallMsg.BottomTagList = res.data.data.BottomTagList;
            if (this.mallMsg.BottomTagList && this.mallMsg.BottomTagList.length == 0) {
              this.mallMsg.BottomTagList = JSON.parse(JSON.stringify(this.defaultTagList))
            }
          } else {
            this.Info(res.data.message);
          }
        })
      },
      //保存数据
      saveMsg() {
        if (this.mallMsg.BottomTagList && this.mallMsg.BottomTagList.length > 0) {
          this.mallMsg.BottomTagList.forEach((item, index) => {
            item.TagSort = Number(index) + 1;
          });
        }
        this.apipost("/api/Tenant/SetMiniProgramMallTag", this.mallMsg, res => {
          if (res.data.resultCode == 1) {
            this.Success("操作成功!");
            this.getNavData();
          } else {
            this.Info(res.data.message);
          }
        })
      },
      //重置
      resetInfo() {
        var that = this;
        if (this.mallMsg.BottomTagList && this.mallMsg.BottomTagList.length > 0) {
          var tagIds = "0,";
          this.mallMsg.BottomTagList.forEach(item => {
            if (item.TagId > 0) {
              tagIds += item.TagId + ",";
            }
          });
          tagIds = tagIds.substring(0, tagIds.lastIndexOf(','));
          this.apipost("/api/Tenant/RemoveMiniProgramMallTag", {
            TagId: tagIds
          }, res => {
            if (res.data.resultCode == 1) {
              that.mallMsg.BottomTagList = [];
              that.mallMsg.TopNavBgColor = '#FFFFFF';
              that.mallMsg.BottomTagList = JSON.parse(JSON.stringify(this.defaultTagList));
              that.saveMsg();
            } else {
              this.Info(res.data.message);
            }
          })
        }
      }
    },
    mounted() {
      this.getNavData();
    }
  };

</script>
