<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">
                <el-switch
                  v-model="mallMsg.IsShowIcon"
                  :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"
                          v-if="mallMsg.IsShowIcon === 1"
                        >
                          <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="图标" v-if="mallMsg.IsShowIcon === 1">
          <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="选择状态图标" v-if="mallMsg.IsShowIcon === 1">
          <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: [], //底部导航标签栏
        IsShowIcon: 1,
      },
      //显示弹窗
      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;
          }
          if (res.data.data) {
            this.mallMsg.IsShowIcon = res.data.data.IsShowIcon;
          }
          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>
