<template>
  <!--头部导航-->
  <div v-if="$route.path !== '/login'">
    <div class="header">
      <div style="display: flex" class="top">
        <div class="left" @click="goHome">
          <div class="logo">
            <img :src="siteLogo" alt />
          </div>
          <p>{{ siteName }}</p>
        </div>
        <div class="center">
          <div class="ipt">
            <el-input v-model="keyword" placeholder="请输入商品名称" clearable></el-input>
            <div class="btn">
              <img src="../assets/index/search.png" alt @click="searchGoods" />
            </div>
          </div>
          <ul>
            <p>
              <img src="../assets/index/hot.png" alt srcset />
              热门搜索词：
            </p>
            <li v-for="(item, index) in hotList" :key="index" @click="hotHTML(item)">
              {{ item }}
            </li>
          </ul>
        </div>
        <!-- 未登录 -->
        <div class="right" v-if="!isSignin" @click="login">登录 | 注册</div>
        <!-- 已登录 -->
        <div class="rights" v-else>
          <!-- <el-badge :value="cartnumber" :hidden="cartnumber == 0 ? true : false"> -->
          <div class="card" @click="goShopping">
            <img src="~assets/images/cards.png" alt />
            <div class="text">购物车</div>
          </div>
          <!-- </el-badge> -->
          <el-dropdown @command="handleCommand">
            <span class="userInfo">
              <div class="img">
                <img :src="imgUrl + userInfo.headimg" alt v-if="userInfo.headimg" />
                <img src="@/assets/images/default_headimg.png" alt v-else />
              </div>
              <span>{{ userInfo.nickname }}</span>
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item command="/user">个人中心</el-dropdown-item>
              <el-dropdown-item command="/login">退出登录</el-dropdown-item>
              <el-dropdown-item command="isTheme">我的主题</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
          <!--   placement="right"
  width="400"
          trigger="click"-->
          <!-- <el-popover placement="bottom" width="230" trigger="click">
            <div class="zbcx" >
              <div class="titleMgs">
                <img src="~assets/images/msg.png" alt />
                <span>消息</span>
              </div>
              <ul>
                <li v-for="(item, index) in msglist" :key="index">{{ item }}</li>
                <li class="more" v-if="typeI == 0" @click="clickMore">
                  查看更多
                  <i class="el-icon-arrow-right"></i>
                </li>
              </ul>
              <div class="cjlq" v-if="typeI == 0">
                <div @click="goLuckDraw">
                  <img src="~assets/images/cj.png" alt srcset />
                  <p>抽奖转盘</p>
                </div>
                <div @click="goCoupon">
                  <img src="~assets/images/lq.png" alt srcset />
                  <p>领券中心</p>
                </div>
              </div>
            </div>

            <i class="el-icon-bell" slot="reference"></i>
          </el-popover>-->
        </div>
      </div>
    </div>
    <div
      class="nav min_wrapper_1200"
      v-if="$route.path !== '/goods_search' && $route.path !== '/goods_search/'"
    >
      <div class="navCon wrapper_1200 acea-row row-between-wrapper">
        <div class="textPic acea-row row-middle">
          <div class="icon" @click="goHome">
            <img src="../assets/index/type.png" />
            商品类型
          </div>

          <div class="list">
            <div
              @click="clickTab(item)"
              class="item"
              :class="{ 'url-color': item.url === $route.path }"
              v-for="(item, index) in headerList"
              :key="index"
            >
              <span>
                <span>{{ item.name }}</span>
              </span>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 企业资质 -->
    <dialogSlot
      width="40%"
      :dialogSlotShow.sync="qualifications"
      cancelText="返回"
      tipsText="企业资质"
      :confirmBtnShow="false"
    >
      <template v-slot:contentSlot>
        <div v-for="(item, index) in qyzzimgUrlList" :key="index">
          <img style="height: 400px; width: 100%" :src="imgUrl + item" alt />
        </div>
      </template>
    </dialogSlot>
    <!-- 切换主题 -->

    <dialogSlot
      width="25%"
      :dialogSlotShow.sync="isTheme"
      tipsText="页面主题设置"
      @clickConfirm="clickConfirmIsTheme"
    >
      <template v-slot:contentSlot>
        <div class="theme_Box">
          <div class="selectTheme">
            <el-radio-group v-model="radioTheme">
              <el-radio label="#F33B50">
                <div class="theme_danger theme_item"></div>
              </el-radio>
              <el-radio label="#00BEF9">
                <div class="theme_primary theme_item"></div>
              </el-radio>
              <el-radio label="#F08433">
                <div class="theme_warning theme_item"></div>
              </el-radio>
            </el-radio-group>
          </div>
        </div>
      </template>
    </dialogSlot>

    <!-- 找药服务 -->
    <dialogSlot
      width="310px"
      :dialogSlotShow.sync="dialogSlotShow"
      cancelText="返回"
      tipsText="找药服务"
      @clickConfirm="clickConfirm"
    >
      <template v-slot:contentSlot>
        <div>
          <el-input
            type="textarea"
            :rows="3"
            placeholder="请输入您要反馈的内容"
            v-model="pjForm.textarea"
          ></el-input>
          <div class="tj">
            <UploadImage1
              @input="uploadSccess($event, '1')"
              :value="pjForm.license"
              :limit="6"
            >
              <template v-slot:upload>
                <div class="upload">
                  <img src="~assets/images/downloadIMG.png" />

                  <span>上传照片</span>
                </div>
              </template>
            </UploadImage1>
            <p>
              <span>最多上传6张相关的这图片</span>
            </p>
          </div>
          <el-input placeholder="请留下您的联系方式" v-model="pjForm.textarea"></el-input>
        </div>
      </template>
    </dialogSlot>
  </div>
</template>

<script>
import Utils from "../assets/js/util.js";
import Setting from "~/setting";

export default {
  components: {},
  name: "headers",

  data() {
    return {
      showPopover: true,
      imgUrl: Setting.uplodBaseURL,
      cartnumber: 0,
      // 是否登录
      isSignin: localStorage.getItem("token") ? true : false,
      userInfo: JSON.parse(localStorage.getItem("userInfo")),
      dialogSlotShow: false,
      pjForm: {},
      typeI: 0,
      msglist: [],
      hotList: [],
      headerList: [
        {
          name: "首页",
          url: "/",
        },
        {
          name: "商品",
          url: "/goods_cate",
        },
        {
          name: "秒杀",
          url: "/goods_seckill",
        },
        {
          name: "团购",
          url: "/goods_presell",
        },
        {
          name: "积分礼品",
          url: "/integral",
        },
        {
          name: "订单",
          url: "/order",
        },
        {
          name: "行业资讯",
          url: "/information",
        },
        {
          name: "质保查询",
          url: "/inspect",
        },
        {
          name: "企业资质",
          url: 1,
        },
      ],
      keyword: "",

      service_num: "",
      qualifications: false,
      isTheme: false,
      radioTheme: "#00BEF9",
      navName: "",
      // 企业资质
      qyzzimgUrlList: [],

      siteName: "",
      siteLogo: "",
    };
  },
  computed: {},
  //监听属性 类似于data概念
  watch: {
    "$store.state.typeI"(newVal, oldVal) {
      this.typeI = newVal;
      //对数据执行操作
      // console.log(newVal, oldVal, "--");
    },
  },
  created() {
    // 根据登录状态显示企业资质
    if (!this.isSignin) {
      this.headerList = this.headerList.filter((item) => item.name !== "企业资质");
    } else {
      this.gainCount();
    }
    this.getHot(); //获取热词
    this.getCopyright();
    this.radioTheme = localStorage.getItem("--themeColor");
    if (this.$auth.loggedIn) {
      this.service_num = this.$auth.user.service_num;
      this.$store.commit("serviceNum", this.$auth.user.service_num);
    }
    // console.log(this.userInfo);
    this.init();
  },
  mounted() {},
  methods: {
    getCopyright() {
      this.msglist = [];
      this.$axios.post("/config/copyright").then((res) => {
        console.log(res, "copyright");
      });
    },
    //获取热词
    getHot() {
      this.$axios.post(`/goods/hotSearchWords`).then((res) => {
        this.hotList = res.data.words.split(",");
        // console.log(this.hotList);
      });
    },
    // 点击热词在搜索框中显示并搜索
    hotHTML(val) {
      this.keyword = val;
    },
    // 顶部搜索栏
    searchGoods() {
      this.$router.push({ path: "goods_cate" });
      Utils.$emit("demo", this.keyword);
    },

    // 主题切换
    clickConfirmIsTheme() {
      localStorage.setItem("--themeColor", this.radioTheme);
      let root = document.documentElement;
      root.style.setProperty(`--themeColor`, `${this.radioTheme}`);
      this.isTheme = false;
    },
    // 确定找药服务
    clickConfirm() {},
    handleCommand(e) {
      if (e == "isTheme") {
        this.radioTheme = localStorage.getItem("--themeColor");
        this.isTheme = true;
      } else if (e == "/login") {
        this.$confirm("确认退出登录, 是否继续?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
          .then(() => {
            this.login();
          })
          .catch((err) => {
            this.$message.error(err);
          });
      } else {
        this.$router.push({ path: e });
      }
    },
    login() {
      // localStorage.clear();
      localStorage.removeItem("auth.strategy");
      localStorage.removeItem("auth._token.local1");
      localStorage.removeItem("token");
      localStorage.removeItem("userInfo");
      this.$router.push({ path: "/login" });
    },
    clickMore() {
      this.$router.push({ path: "/message" });
    },
    clickTab(item) {
      this.navName = item.name;

      if (item.name == "企业资质") {
        this.$axios
          .post(`/config/getLicenseInfo`)
          .then((res) => {
            console.log(res);
            this.qyzzimgUrlList = res.data.license;
            this.qualifications = true;
          })
          .catch((err) => {
            console.log(err);
          });
      } else {
        this.$router.push({ path: item.url });
      }
    },
    goHome() {
      // this.$router.push({
      //   path: "/",
      // });
    },
    goLuckDraw() {
      this.$router.push({
        path: "/luck_draw",
      });
    },
    goCoupon() {
      this.$router.push({
        path: "/coupon",
      });
    },
    goShopping() {
      this.$router.push({
        path: "/shopping_cart",
      });
    },

    gainCount() {
      let that = this;
      that.$axios
        .post("/cart/count")
        .then((res) => {
          this.cartnumber = res.data;
        })
        .catch((err) => {
          this.$message.error(err);
        });
    },
    submit() {
      if (this.search.trim() !== "") {
        this.$router.push({
          path: "/goods_search",
          query: {
            title: this.keyword.trim(),
          },
        });
        this.keyword = "";
      } else {
        this.$message.error("请输入要搜索的内容");
      }
    },
    init() {
      this.$axios.get(`/config/init`).then((res) => {
        console.log(res, "res");
        const { site_info } = res.data;
        this.siteName = site_info.site_name;
        this.siteLogo = site_info.logo_square;
        // this.hotList = res.data.words.split(",");
        console.log(site_info, "site_infosite_infosite_infosite_info");
        localStorage.setItem("logo", this.siteLogo);
      });
    },
  },
};
</script>

<style scoped lang="scss">
.tj {
  margin: 20px 0 10px;
  display: flex;

  p {
    margin: 0 0 10px 12px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;

    span {
      font-size: 14px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #999999;
    }
  }

  .upload {
    width: 74px;
    height: 74px;
    background: #ffffff;
    border-radius: 4px;
    border: 1px dashed #dcdcdc;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    img {
      width: 22px;
      height: 22px;
    }

    span {
      font-size: 12px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #999999;
      margin-top: 5px;
    }
  }
}

::v-deep {
  .ipt {
    .el-input__inner {
      height: 35px;
      border: 1px solid #d6d6d6;
      padding: 0 10px;
      border-radius: 0px;
    }
  }
}

.zbcx {
  .titleMgs {
    display: flex;
    align-items: center;
    margin-bottom: 20px;

    img {
      width: 15px;
      height: 18px;
      margin-right: 6px;
    }

    span {
      font-size: 16px;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
      color: #222222;
      line-height: 22px;
    }
  }

  ul {
    li {
      font-size: 14px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #666666;
      line-height: 20px;
      margin-bottom: 15px;
      cursor: pointer;
    }

    .more {
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 14px;
      margin: 20px 0 5px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #666666;
      line-height: 20px;
      cursor: pointer;

      .el-icon-arrow-right {
        font-size: 16px;
      }
    }
  }

  .cjlq {
    border-top: 1px solid #efefef;
    margin-top: 2px;
    margin-bottom: 10px;
    padding-top: 27px;
    display: flex;
    justify-content: space-between;

    div {
      cursor: pointer;
    }

    img {
      width: 88px;
      height: 88px;
    }

    p {
      font-size: 16px;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
      color: #222222;
      line-height: 22px;
      text-align: center;
      margin-top: 15px;
    }
  }
}

.header {
  background-color: #fff;

  .top {
    width: 1200px;
    height: 165px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 0 auto;
  }

  .left {
    cursor: pointer;
    width: 230px;

    .logo {
      width: 50px;
      height: 50px;
      margin: auto;

      img {
        width: 100%;
        height: 100%;
      }
    }

    p {
      font-size: 24px;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
      color: #222222;
      text-align: center;
    }
  }

  .center {
    width: 604px;
    display: flex;
    flex-direction: column;
    margin: 30px 0px 0 0;

    .ipt {
      width: 100%;
      height: 35px;
      border-radius: 0px 2px 2px 2px;
      box-sizing: border-box;
      display: flex;
      align-items: center;

      .btn {
        width: 60px;
        height: 35px;
        background: var(--themeColor);
        border-radius: 0px 2px 2px 0px;
        border: 1px solid var(--themeColor);
        display: flex;
        align-items: center;
        justify-content: center;
        margin-right: -2px;
        cursor: pointer;

        img {
          width: 24px;
          height: 24px;
        }
      }
    }

    ul {
      margin-top: 10px;
      display: flex;
      align-items: center;
      padding: 0;

      p {
        display: flex;
        font-size: 12px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #999999;

        img {
          width: 16px;
          height: 16px;
          margin-right: 6px;
        }
      }

      li {
        height: 17px;
        font-size: 12px;
        clicktabfont-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #999999;
        line-height: 17px;
        margin-left: 28px;
        cursor: pointer;
      }
    }
  }

  .right {
    width: 98px;
    height: 35px;
    background: #eefbff;
    border-radius: 0px 2px 2px 2px;
    border: 1px solid var(--themeColor);
    font-size: 14px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: var(--themeColor);
    line-height: 35px;
    margin-left: 70px;
    text-align: center;
    cursor: pointer;
  }

  .rights {
    display: flex;
    align-items: center;

    .card {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 91px;
      height: 35px;
      background: #ffffff;
      border-radius: 0px 2px 2px 2px;
      border: 1px solid #d4d4d4;
      cursor: pointer;

      img {
        width: 20px;
        height: 20px;
        margin-right: 5px;
      }

      .text {
        font-size: 14px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #666666;
        line-height: 20px;
      }
    }

    .userInfo {
      display: flex;
      align-items: center;
      margin-left: 30px;
      cursor: pointer;

      span {
        font-size: 16px;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: #222222;
        line-height: 22px;
        margin-left: 10px;
      }

      .img {
        width: 35px;
        height: 35px;
        border-radius: 100%;
        overflow: hidden;

        img {
          width: 100%;
          height: 100%;
        }
      }
    }
  }
}

.nav {
  width: 100%;
  height: 45px;
  background: #ffffff;

  .navCon {
    height: 100%;

    .textPic {
      height: 100%;
      width: 100%;

      .icon {
        height: 100%;
        width: 230px;
        background: var(--themeColor);
        border-radius: 1px;
        display: flex;
        align-items: center;
        justify-content: center;

        img {
          width: 17px;
          height: 17px;
          margin-right: 8px;
        }

        font-size: 18px;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: #ffffff;
        line-height: 25px;
      }

      .list {
        margin-left: 85px;
        height: 100%;
        display: flex;
        align-items: center;

        .item {
          padding: 0px 10px;
          margin-right: 30px;
          color: #282828;
          font-size: 16px;
          height: 45px;
          line-height: 45px;
          font-weight: 400;
          box-sizing: border-box;
          cursor: pointer;

          &:hover {
            color: var(--themeColor);
          }
        }
      }
    }

    .search {
      width: 360px;
      height: 40px;
      border: 1px solid var(--themeColor);
      border-radius: 2px;
      cursor: pointer;

      .text {
        width: 290px;
        padding-left: 14px;
        color: #c1c1c1;

        input {
          width: 250px;
          height: 36px;
          border: none;
          outline: none;
          padding-left: 10px;
          margin-top: -2px;
        }

        .iconfont {
          font-size: 15px;
          margin-right: 5px;
        }
      }

      .bnt {
        width: 64px;
        height: 40px;
        text-align: center;
        line-height: 40px;
        color: #fff;
      }
    }
  }
}

.icon-duoshanghupc-daohuotongzhi {
  font-size: 14px;
  color: #fff;
  padding: 0 5px 0 2px;
  animation: shock 3s infinite ease;
}

@keyframes shock {
  5%,
  25%,
  45% {
    transform: rotate(8deg);
  }

  0%,
  10%,
  30%,
  50% {
    transform: rotate(-8deg);
  }

  15%,
  35%,
  55% {
    transform: rotate(4deg);
  }

  20%,
  40%,
  60% {
    transform: rotate(-4deg);
  }

  65%,
  100% {
    transform: rotate(0deg);
  }
}

.service_num {
  position: absolute;
  transform: scale(0.7);
  top: -6px;
  left: 14px;
  font-size: 10px;
  background-color: #fff;
  border-radius: 10px;
  padding: 0 3px;
  color: rgb(201, 18, 18);
}

.service_color:hover {
  color: #000 !important;
}

.theme_Box {
  // margin: 20px 0;
  .selectTheme {
    /deep/ .el-radio-group {
      display: flex;
      justify-content: space-around;

      .el-radio {
        position: relative;

        .el-radio__input {
          position: absolute;
          left: 50%;
          transform: translate(-50%, 0%);
        }
      }
    }

    .theme_item {
      width: 94px;
      height: 94px;
      border-radius: 8px;
      margin-top: 10px !important;
    }

    .theme_danger {
      background: #f33b50;
    }

    .theme_primary {
      background: #00bef9;
    }

    .theme_warning {
      background: #f08433;
    }
  }

  .el-radio-group {
    display: flex;
    // justify-content: space-around;
    width: 100%;

    .el-radio {
      width: 94px;
      // text-align: center;
      margin: 0;
      transform: rotate(180deg);
    }
  }
}

.el-icon-bell {
  margin-left: 20px;
}
</style>
