<!-- 页脚 -->
<template>
  <div class="footer">
    <div class="box">
      <div class="top">
        <ul>
          <li v-for="(item, index) in sverList" :key="index">
            <!-- <div class="none"></div>
            <div class="left">
              <div class="img">
                <img :src="item.img" alt />
              </div>
              <div class="text">
                <p class="title">{{ item.title }}</p>
                <p class="name">{{ item.name }}</p>
              </div>
            </div>
            <div class="right">
              <span></span>
            </div> -->
          </li>
        </ul>
      </div>
      <div class="cont">
        <div class="left">
          <!-- <ul>
            <li v-for="(item, index) in contList" :key="index">
              <div class="title">{{ item.title }}</div>
              <p
                class="text"
                v-for="(item2, index2) in item.list"
                :key="index2"
                @click="clickItem(item2)"
              >
                {{ item2 }}
              </p>
            </li>
          </ul> -->
        </div>
        <div class="right">
          <!-- <div class="title">合作伙伴</div>
          <div class="hzhb">
            <div
              v-for="(item, index) in 5"
              :key="index"
              @click="clickItem('中国工商银行')"
            >
              <div class="img">
                <img src="../assets/index/bank.png" alt />
              </div>
              <p>中国工商银行</p>
            </div>
          </div> -->
        </div>
      </div>

      <div class="certificate">
        Copyright 安国市菁彤网络科技有限公司 All Rights Reserved | 冀ICP备2023010208号
      </div>
    </div>
    <div class="floatWindow">
      <div class="list">
        <!-- <div class="item" @click="goCustomer">
          <div class="iconfont">
            <img src="../assets/index/yh.png" alt />
          </div>
          <div>客服消息</div>
        </div> -->

        <!-- <div>
          <el-tooltip effect="light" placement="left" manual :value="dhflag">
            <div slot="content" style="line-height: 20px">
              <div>
                <p>
                  <b>专属业务员</b>
                </p>
                <p>张三 13456754567</p>
              </div>

              <div style="margin-top: 5px">
                <p>
                  <b>其他联系方式</b>
                </p>
                <p>张三 13456754567</p>
                <p>张三 13456754567</p>
              </div>
            </div>
            <div class="item" @click="replyContentdh">
              <div class="iconfont">
                <img src="../assets/index/dh.png" alt />
              </div>
              <div>联系电话</div>
            </div>
          </el-tooltip>
        </div> -->

        <!-- <div class="item" @mouseleave="wxCodeHide">
          <div @mouseenter="wxCode">
            <div class="iconfont icon-weixin4"></div>
            <div>关注微信</div>
          </div>
          <div class="itemCon" v-if="iScode">
            <div class="ewm">
              <div class="pictrue">
                <div class="arrow"></div>
                <img :src="codeUrl" class="bicode" />
              </div>
              <div class="tip">扫码关注公众号</div>
            </div>
          </div>
        </div>-->
        <div class="item" @click="goCart">
          <div class="iconfont">
            <img src="../assets/index/card.png" alt />
          </div>
          <div>购物车</div>
        </div>

        <div>
          <!-- <el-tooltip effect="light" manual :value="xzflag" placement="left"> -->
          <!-- <div slot="content">
              <div>
                <img style="width: 100px; height: 100px; padding: 5px" src alt />
              </div>
            </div> -->
          <a :href="appDownloadUrl">
            <div class="item">
              <div class="iconfont">
                <img src="../assets/index/xz.png" alt />
              </div>
              <div>下载APP</div>
            </div>
          </a>
          <!-- </el-tooltip> -->
        </div>

        <div>
          <el-tooltip effect="light" manual :value="fkflag" placement="left">
            <div slot="content" class="opinion_tooltip">
              <!-- 意见反馈form表单 -->
              <div class="opinion_form">
                <el-form
                  ref="opinionForm"
                  :model="opinionForm"
                  refs="opinionForm"
                  :rules="rules"
                >
                  <el-form-item prop="content">
                    <el-input
                      type="textarea"
                      v-model="opinionForm.content"
                      placeholder="请输入您要反馈的内容"
                    ></el-input>
                  </el-form-item>
                  <el-form-item prop="phone">
                    <el-input
                      v-model="opinionForm.phone"
                      placeholder="请留下您的联系方式"
                      size="small"
                    ></el-input>
                  </el-form-item>
                  <el-form-item prop="image">
                    <UploadImage1
                      UploadImage1Url="/upload/otherImage"
                      @input="uploadSccess($event, 'image')"
                      :value="opinionForm.image"
                      :limit="1"
                    >
                      <template v-slot:upload>
                        <div class="upload_BOX">
                          <div class="upload">
                            <img src="~assets/images/downloadIMG.png" alt />
                            <span>上传图片</span>
                          </div>
                        </div>
                      </template>
                    </UploadImage1>
                    <!-- <div class="tipt">最多上传6张相关的这图片</div> -->
                  </el-form-item>
                </el-form>
                <el-button
                  style="float: right"
                  size="small"
                  type="primary"
                  @click="opinionClose('opinionForm')"
                  >确定</el-button
                >
              </div>
            </div>
            <div class="item" @click="replyContentfk">
              <div class="iconfont">
                <img src="../assets/index/fk.png" alt />
              </div>
              <div>意见反馈</div>
            </div>
          </el-tooltip>
        </div>
      </div>
    </div>
    <chat-room
      v-show="chatOptions.show"
      :chat-options="chatOptions"
      @chat-close="chatClose"
      @socket-open="socketOpen"
      @socket-error="socketError"
    ></chat-room>
  </div>
</template>

<script>
import Setting from "@/setting";
import ChatRoom from "@/components/ChatRoom";
import appChat from "@/mixins/appChat";
export default {
  name: "footers",
  components: {
    ChatRoom,
  },
  mixins: [appChat],
  data() {
    return {
      appDownloadUrl: Setting.app_download,
      copyrightInfo: {},
      userInfo: JSON.parse(localStorage.getItem("userInfo")),
      // 是否登录
      isSignin: localStorage.getItem("token") ? true : false,
      companyInfo: {},
      codeUrl: "",
      iScode: false,
      webInfo: {},
      sverList: [
        {
          img: require("../assets/index/d.png"),
          title: "品类齐全",
          name: "轻松购物",
        },

        {
          img: require("../assets/index/k.png"),
          title: "多仓直发",
          name: "极速配送",
        },
        {
          img: require("../assets/index/h.png"),
          title: "正品行货",
          name: "精致服务",
        },
        {
          img: require("../assets/index/s.png"),
          title: "天天低价",
          name: "畅选无忧",
        },
      ],
      contList: [
        {
          title: "关于我们",
          list: ["公司简介", "企业文化", "加入我们"],
        },
        {
          title: "联系方式",
          list: [
            "电话：13458978657",
            "邮箱：293747@qq.com",
            "地址：山西省忻州市五台县长寿大道254号",
          ],
        },
      ],
      // 下载app是否显示二维码
      xzflag: false,
      // 是否显示联系电话
      dhflag: false,
      // 是否显示意见反馈
      fkflag: false,
      opinion_success: false,
      // 意见反馈表单
      opinionForm: {
        content: "",
        phone: "",
        image: "",
      },
      rules: {
        content: {
          required: true,
          message: "请输入您要反馈的内容",
          trigger: "blur",
        },
        phone: {
          required: true,
          message: "请留下您的联系方式",
          trigger: "blur",
        },
        image: {
          required: true,
          message: "请上传图片",
          trigger: "change",
        },
      },
    };
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //生命周期 - 创建完成（可以访问当前this实例）
  head() {
    return {
      meta: [
        {
          hid: "keywords",
          name: "keywords",
          content: this.companyInfo.site_keywords,
        },
        {
          hid: "description",
          name: "description",
          content: this.companyInfo.site_description,
        },
      ],
    };
  },
  created() {
    // this.getCompanyInfo();
    // this.wechatCode();
    this.getCopyright();
  },
  //方法集合
  methods: {
    getCopyright() {
      this.$axios
        .post(`/config/copyright`)
        .then((res) => {
          // console.log(res.data, `copyright`);
        })
        .catch((err) => {
          this.$message.error(err);
        });
    },
    clickItem(v) {
      this.$router.push({ path: "/about", query: { title: v } });
    },
    goTop() {
      (function n() {
        var t = document.documentElement.scrollTop || document.body.scrollTop;
        if (t > 0) {
          document.body.scrollTop = 0;
          document.documentElement.scrollTop = 0;
        }
      })();
    },
    wxCode() {
      this.iScode = true;
    },
    wxCodeHide() {
      this.iScode = false;
    },
    goCart() {
      // 已登录跳转
      if (this.isSignin) {
        this.$router.push({
          path: "/shopping_cart",
        });
      }
      //未登录跳转，登录页
      else {
        this.$message.error("请先登录！");
        this.$router.push({ path: "/login" });
      }
    },
    wechatCode() {
      this.$axios
        .get("/pc/get_wechat_qrcode")
        .then((res) => {
          this.codeUrl = res.data.wechat_qrcode;
          console.log(this.codeUrl, "数据");
        })
        .catch((err) => {
          this.$message.error(err);
        });
    },
    getCompanyInfo() {
      this.$axios
        .get("/pc/get_company_info")
        .then((res) => {
          this.companyInfo = res.data;

          this.$store.commit("logo", res.data.logoUrl);
          this.$cookies.set("logo", res.data.logoUrl);
          // this.$store.commit("titles", res.data.site_name);
          // this.$cookies.set("titles", res.data.site_name);
          this.$store.commit("titles", "药厂");
          this.$cookies.set("titles", "药厂");
        })
        .catch((err) => {
          this.$message.error(err);
        });
    },
    openLink(url) {
      window.open(url);
    },
    goCustomer() {
      // 已登录跳转
      if (this.isSignin) {
        this.$router.push({ path: "/customer_news" });
      }
      //未登录跳转，登录页
      else {
        this.$message.error("请先登录！");
        this.$router.push({ path: "/login" });
      }
    },
    // 下载app是否显示二维码
    replyContentxz() {
      this.xzflag = !this.xzflag;
    },
    // 是否显示联系电话
    replyContentdh() {
      this.dhflag = !this.dhflag;
    },
    // 是否显示意见反馈
    replyContentfk() {
      this.fkflag = !this.fkflag;
    },
    opinionClose(formname) {
      this.$refs[formname].validate((valid) => {
        if (valid) {
          let { content, phone, image } = { ...this.opinionForm };
          let obj = {
            name: this.userInfo.nickname,
            content,
            phone,
            image,
          };
          this.$axios
            .post(`/config/findServiceContent`, obj)
            .then((res) => {
              this.$message.success(res.message);
              this.opinionForm = {};
              this.fkflag = false;
            })
            .catch((err) => {
              this.$message.error(err);
            });
        }
      });
    },
    uploadSccess(e, key) {
      this.opinionForm[key] = e;
      this.$refs.opinionForm.validateField(key);
    },
  },
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
};
</script>
<style lang="scss" scoped>
.floatWindow {
  position: fixed;
  right: 1%;
  bottom: 15%;
  width: 80px;
  z-index: 99;
  cursor: pointer;
  background-color: #fff;
  box-shadow: 0 3px 20px rgba(0, 0, 0, 0.06);

  .list {
    padding: 5px 14px;
    width: 80px;
    border: 1px solid #d8d8d8;
    .item:last-child {
      border: 0;
    }
    .item {
      width: 100%;
      height: 90px;
      text-align: center;
      font-size: 12px;
      color: #5c5c5c;
      border-bottom: 1px solid #f5f5f5;
      display: flex;
      flex-direction: column;
      justify-content: center;
      &:hover {
        color: #e93323;
      }
      div {
        font-size: 12px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #999999;
      }
      .iconfont {
        margin-bottom: 5px;
        img {
          width: 30px;
          height: 30px;
          margin: auto;
        }
      }

      .itemCon {
        right: 100%;
        position: absolute;
        top: 0;
        padding-right: 20px;
        .ewm {
          width: 140px;
          border: 1px solid #eeeeee;
          background-color: #fff;
          padding: 8px 6px;
          .tip {
            font-size: 14px;
            color: #666;
            margin-top: 6px;
          }
          .pictrue {
            width: 126px;
            height: 126px;
            vertical-align: middle;
            position: relative;
            img {
              width: 100%;
              height: 100%;
            }
            .arrow {
              position: absolute;
              right: -16px;
              top: 10px;
              width: 0px;
              height: 0px;
              border: 8px solid transparent;
              border-left-color: #eee;
              &:before {
                position: absolute;
                left: -8px;
                top: -7px;
                content: "";
                width: 0px;
                height: 0px;
                border: 7px solid transparent;
                border-left-color: #fff;
              }
            }
          }
        }
      }
    }
  }
}
.footer {
  width: 100%;
  background: #323232;
  // background:var(--themeColor);

  .box {
    // width: 1200px;
    // margin: 0 auto;
  }
  .top {
    width: 1200px;
    margin: 0 auto;
    border-bottom: 1px solid #4a4a4a;
    ul {
      height: 110px;
      padding: 0;
      display: flex;
      justify-content: space-between;
      box-sizing: border-box;
      li:nth-child(1) {
        flex: 5;
        justify-content: space-between;
        .none {
          display: none;
        }
      }
      li:last-child {
        flex: 5;
        justify-content: flex-end;

        .right {
          display: none;
        }
      }
      li {
        flex: 8;
        display: flex;
        align-items: center;
        justify-content: space-between;
        .left {
          display: flex;

          .img {
            width: 47px;
            height: 47px;
            margin-right: 10px;
            img {
              width: 100%;
              height: 100%;
            }
          }
          .text {
            .title,
            .name {
              height: 25px;
              font-size: 18px;
              font-family: PingFangSC-Medium, PingFang SC;
              font-weight: 500;

              color: #927356;
              line-height: 25px;
            }
          }
        }
        .right {
          span {
            display: inline-block;
            width: 1px;
            height: 25px;
            background: #525252;
            border-radius: 2px;
          }
        }
      }
    }
  }
  .cont {
    display: flex;
    justify-content: space-between;
    padding: 20px 0;
    width: 1200px;
    margin: 0 auto;

    .left {
      ul {
        padding: 0;
        display: flex;

        li {
          margin-right: 118px;

          .title {
            height: 22px;
            font-size: 16px;
            font-family: PingFangSC-Medium, PingFang SC;
            font-weight: 500;
            color: #e3e3e3;
            line-height: 22px;
            text-align: left;
          }
          .text {
            text-align: left;

            height: 20px;
            font-size: 14px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #878787;
            line-height: 20px;
            margin-top: 10px;
            cursor: pointer;
          }
        }
      }
    }
    .right {
      width: 50%;

      .title {
        height: 22px;
        font-size: 16px;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: #e3e3e3;
        line-height: 22px;
        text-align: left;
      }
      .hzhb {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-top: 10px;
        .img {
          width: 60px;
          height: 60px;
          border-radius: 15px;
          overflow: hidden;
          margin: auto;
          img {
            width: 100%;
            height: 100%;
          }
        }
        p {
          font-size: 13px;
          font-family: PingFangSC-Medium, PingFang SC;
          font-weight: 500;
          color: #e3e3e3;
          line-height: 20px;
          text-align: center;
          margin-top: 10px;
        }
      }
    }
  }

  .certificate {
    padding: 16px 0;
    height: 50px;
    font-size: 12px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #e3e3e3;
    text-align: center;
    line-height: 17px;
    background-color: #2c2c2c;
  }
}
.opinion_tooltip {
  .opinion_form {
    /deep/.el-form-item {
      .el-form-item__content {
        display: flex;
        .upload_BOX {
          width: 70px;
          height: 70px;
          border-radius: 4px;
          border: 1px solid #dddddd;
          text-align: center;
          .upload {
            margin: 10px auto;
            color: #ccc;
            img {
              margin: auto;
              width: 22px;
              height: 20px;
            }
          }
        }
        .tipt {
          width: 90px;
          width: 92px;
          height: 40px;
          font-size: 14px;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #c0c4cc;
          line-height: 20px;
          margin: 15px auto;
        }
      }
    }
  }
}
</style>
