<style>
.quick_top {
  display: flex;
  margin: 10px auto;
}

.quick_slider {
  padding: 5px 17px;
  border-radius: 20px;
  background-color: #ebebeb;
  color: #272727;
  display: inline-block;
  font-size: 12px;
  margin-left: 10px;
  letter-spacing: 2px;
}

.quick_arrow {
  width: 10%;
}

.quick_arrow .u_icon {
  margin-left: 20%;
  line-height: 30px;
  color: #cd9621;
  font-size: 20px;
}

/* .checkedItem {
		background-color: #ff547b;
		color: #fff;
	} */

.quick_arrow .allTags {
  margin: 20px;
}

.allTags_List {
  padding-bottom: 20px;
}

.allTags_List {
  display: flex;
}

.quick_Content {
  width: 100%;
}

.quick_Inner {
  display: flex;
  justify-content: space-between;
  padding: 20px;
}
.quick_Inner:last-child {
  margin: 0px !important;
}
.quick_ImgDiv {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  overflow: hidden;
}

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

.quick_Center {
  position: relative;
  width: 85%;
}

.share_Content {
  position: absolute;
  right: 0;
  top: 0;
  padding: 5px 10px;
  background-color: #faf3e3;
  border-radius: 20px;
  font-size: 12px;
  display: flex;
  min-width: 50px;
  align-items: center;
}

.Quick_Shareicon {
  width: 13px;
  height: 13px;
  margin-right: 5px;
}

.Quick_ImgContent {
  display: flex;
  justify-content: space-between;
}
.quick_page img {
  width: 650rpx;
  height: 700rpx;
}
.quick_page .hotsopt {
  position: absolute;
  background: transparent;
  border: none;
  outline: none;
}
.quick_page .hotsopt::after {
  border: none;
}
.qr_DialogBtn {
  position: absolute;
  bottom: 30px;
  width: 80%;
  background-color: #ff4048;
  color: #fff;
  margin: auto;
  left: 50%;
  margin-left: -40%;
  border-radius: 20px;
}
.qr_Line {
  width: 100%;
  height: 1px;
  background-color: #f4f4f4;
  margin: 10px 0 0 0;
}
</style>
<template>
  <view
    class="quick-box"
    style="height:100vh;"
    :style="{ 'height': `calc(100vh - ${paddingBottm})` }"
  >
    <view class="quick-head">
      <u-tabs
        name="Name"
        :list="dataFirst"
        :is-scroll="false"
        :current="active"
        :bar-width="80"
        :font-size="28"
        :active-color="mainColor"
        @change="getChild"
      ></u-tabs>
      <view
        style="white-space: nowrap;display: flex;margin:10px auto;background-color:#EBEBEB;border-radius:20px;width:95%;overflow:hidden;"
      >
        <view
          @click="getSecond(item,index)"
          style="padding:8px 17px;margin-left:0;flex:1;text-align:center;"
          :style="{ color: index==active2 ? '#fff' : '#272727',backgroundColor:index==active2 ? mainColor:'' }"
          class="quick_slider"
          v-for="(item,index) in dataSecond"
          :key="index"
        >{{item.Name}}</view>
      </view>
      <view class="qr_Line"></view>
      <view class="quick_top" v-if="dataThird.length>0">
        <scroll-view scroll-x="true" style="white-space: nowrap;display: flex;width:90%">
          <view
            @click="getThird(item,index)"
            :style="{ color: index==active3 ? '#fff' : '#272727',backgroundColor:index==active3 ? mainColor:'' }"
            class="quick_slider"
            v-for="(item,index) in dataThird"
            :key="index"
          >{{item.Name}}</view>
        </scroll-view>
        <view class="quick_arrow" v-if="dataThird.length>4">
          <u-icon class="u_icon" name="arrow-up" v-if="show" @click="show=false"></u-icon>
          <u-icon class="u_icon" name="arrow-down" v-else @click="show=true"></u-icon>
          <u-popup v-model="show" mode="top">
            <view class="allTags">全部标签</view>
            <view class="allTags_List">
              <view
                @click="getThird(item,index)"
                :class="{'checkedItem':index==active3}"
                class="quick_slider"
                v-for="(item,index) in dataThird"
                :key="index"
              >{{item.Name}}</view>
            </view>
          </u-popup>
        </view>
      </view>
    </view>
    <scroll-view
      :scroll-y="true"
      style="background-color: #f0f4f7;"
      :enable-back-to-top="true"
      :enable-flex="true"
      @scrolltolower="lower"
      :style="{ 'height': `calc(100% - ${scrollHeight})`}"
    >
      <view class="quick_Content" style="width: 100%;min-height:100%">
        <view
          class="quick_Inner"
          v-for="(item,index) in dataList"
          :key="index"
          style="margin-bottom:10px;background-color:#fff;"
        >
          <view class="quick_ImgDiv">
            <img :src="item.HeadImg" alt />
          </view>
          <view class="quick_Center">
            <view style="margin-bottom:10px;font-weight:bold">{{item.UserName}}</view>
            <view v-html="item.MaterialInfo" @click="goUrl(item)" style="margin-bottom:10px;"></view>
            <view
              v-if="item.LinkUrl!=''"
              @click="goUrl(item)"
              style="color:#b08b38;margin-bottom:10px;"
            >查看详情</view>
            <view v-for="(sItem,i) in imgArr" :key="i">
              <view style="flex-direction:row;display:flex;">
                <!-- 横排布局 -->
                <view
                  v-for="(subItem,index) in item.ImgList"
                  :key="index"
                  style="margin-bottom:3px;"
                >
                  <!-- 遍历数组 -->
                  <view
                    v-if="index>=i*3&&index<3*(i+1)"
                    class="flex-item"
                    style="margin-right:5px;"
                  >
                    <!-- 分段显示 -->
                    <img :src="subItem" style="height:190rpx;width:190rpx;" />
                  </view>
                </view>
              </view>
            </view>
            <view class="share_Content" @click="openShare(item)">
              <image src="@/static/images/icon/icon-share.png" class="Quick_Shareicon" />
              {{item.ShareCount}}
            </view>
          </view>
        </view>
      </view>
      <view style="padding:10px 0;background:#FFF">
        <u-loadmore
          :status="status"
          :load-text="loadText"
          :font-size="24"
          :margin-top="0"
          :margin-bottom="0"
          bg-color="#fff"
        />
      </view>
    </scroll-view>
    <tabbar></tabbar>
    <auth v-if="showAuth" @changeuserinfo="reloadUserinfo" @gbAuth="gbAuth"></auth>
    <u-popup
      v-model="showDialog"
      mode="center"
      :mask-close-able="false"
      custom-style="padding:0;background:none;"
    >
      <view style="position: relative;">
        <img src="@/static/images/qrDialog.png" mode="widthFix" />
        <button class="qr_DialogBtn" @click="showDialog=false">确定</button>
      </view>
    </u-popup>
  </view>
</template>
<script>
import auth from "@/components/auth/index";
import tabbar from "@/components/tabbar/index";
export default {
  data() {
    return {
      show: false,
      pageTitle: "分享",
      loading: true,
      showAuth: false,
      mainColor: "",
      u: {},
      msg: {
        Name: "", //页面名称
        pageIndex: 1,
        pageSize: 10,
      },
      active: 0, //一级
      active2: -1, //二级选中
      active3: -1, //三级选中
      conMsg: {
        CateId: 0,
        QStartDate: "", //开始时间
        QEndDate: "", //结束时间
        KeyWords: "", //页面名称
        pageIndex: 1,
        pageSize: 10,
        total: 0,
      },
      //第一层数据
      dataFirst: [],
      //第二层
      dataSecond: [],
      //第三层
      dataThird: [],

      //内容数据
      dataList: [],
      imgArr: [0, 1, 2],
      showShare: false, // 显示分享
      showAuth: false, //是否登录弹窗
      scrollHeight: 0,
      status: "loadmore",
      pageCount: 1,
      loadText: {
        loadmore: "轻轻上拉，加载更多",
        loading: "努力加载中",
        nomore: "没有更多了",
      },
      goodTitle: "", //名称=>传子组件
      images: [], //图片=>传子组件
      qrHeight: 160,
      showDialog: false,
      paddingBottm: "0px",
    };
  },
  components: {
    auth,
    tabbar,
  },
  created() {
    this.mainColor = this.$uiConfig.mainColor;
  },
  mounted() {
    let currentPages = getCurrentPages();
    let u = "/" + currentPages[currentPages.length - 1].route;
    let pages = wx.getStorageSync("basedata")
      ? wx.getStorageSync("basedata").bar_title
      : [];
    pages.forEach((x) => {
      if (x.value == u) {
        this.pageTitle = x.new_name ? x.new_name : x.name;
      }
    });
    uni.setNavigationBarTitle({
      title: this.pageTitle,
    });
    setTimeout(() => {
      this.getTabsHeight();
      this.getHeadHeight();
    }, 1000);
  },
  onLoad(option) {
    this.getList();
    this.u = uni.getStorageSync("mall_UserInfo");
  },
  methods: {
    getTabsHeight() {
      let that = this;
      const query = uni.createSelectorQuery().in(this);
      query
        .select(".quick-box >>> .tabbarMain")
        .boundingClientRect((data) => {
          that.paddingBottm = data.height + "px";
        })
        .exec();
    },
    getHeadHeight() {
      let that = this;
      const query = uni.createSelectorQuery().in(this);
      query
        .select(".quick-head")
        .boundingClientRect((data) => {
          that.scrollHeight = data.height + "px";
        })
        .exec();
    },
    //点击切换
    changeHandler(i) {
      this.active = i;
    },
    //获取头部数据
    getList() {
      this.request2(
        {
          url: "/api/Share/GetShareCategoryList",
          data: this.msg,
        },
        (res) => {
          var data = res.data;
          this.dataFirst = data;
          if (data && data.length > 0) {
            this.dataSecond = data[0].children;
            // if (data[0].children && data[0].children.length > 0) {
            // 	this.dataThird = data[0].children[0].children
            // }
          }
          if (this.dataFirst.length > 0) {
            this.conMsg.CateId = this.dataFirst[0].Id;
            this.getContent();
          }
        }
      );
    },
    //获取内容
    getContent() {
      this.request2(
        {
          url: "/api/Share/AppGetShareFriendPage",
          data: this.conMsg,
        },
        (res) => {
          if (res.resultCode == 1) {
            this.dataList = this.dataList.concat(res.data.pageData);
            this.pageCount = res.data.pageCount;
          }
        }
      );
    },
    getChang() {
      if (this.dataThird.length == 0) {
        this.qrHeight = 160;
      } else {
        this.qrHeight = 196;
      }
    },
    //点击一级分类
    getChild(index) {
      this.dataList = [];
      this.active = index;
      this.dataSecond = this.dataFirst[index].children;
      this.dataThird = [];
      this.active2 = -1;
      this.active3 = -1;
      this.conMsg.CateId = this.dataFirst[index].Id;
      this.getContent();
      this.getChang();
    },
    //点击二级分类
    getSecond(item, index) {
      this.dataList = [];
      this.active2 = index;
      this.dataThird = item.children;
      this.active3 = -1;
      this.conMsg.CateId = item.Id;
      this.getContent();
      this.getChang();
    },
    //点击三级分类
    getThird(item, index) {
      this.dataList = [];
      this.active3 = index;
      this.show = false;
      this.conMsg.CateId = item.Id;
      this.getContent();
      this.getChang();
    },
    reloadUserinfo() {
      this.u = uni.getStorageSync("mall_UserInfo");
    },
    //关闭登录窗口
    gbAuth() {
      this.showAuth = false;
    },
    closeShare() {
      this.showShare = false;
    },
    //点击分享
    openShare(item) {
      if (this.u) {
        this.request2(
          {
            url: "/api/Share/SetShareCount",
            data: {
              Id: item.Id,
            },
          },
          (res) => {
            if (res.resultCode == 1) {
              item.ShareCount++;
            }
          }
        );
        this.goodTitle = item.MaterialInfo;
        this.images = item.ImgList;
        this.sendQuanHandler();
        this.showShare = true;
      } else {
        this.showAuth = true;
      }
    },
    //滚动加载
    lower(e) {
      if (this.conMsg.pageIndex < this.pageCount) {
        this.conMsg.pageIndex++;
        this.status = "loading";
        this.getContent();
      } else {
        this.status = "nomore";
      }
    },
    //跳转
    goUrl(item) {
      if (item.LinkUrl && item.LinkUrl.length > 0) {
        uni.navigateTo({
          url: item.LinkUrl,
        });
      }
    },
    //分享复制
    sendQuanHandler() {
      this.copyHandler();
      //判断有图片再调用复制图片
      if (this.images.length > 0) {
        setTimeout(() => {
          this.savePicHandler();
        }, 1000);
      }
    },
    //复制文字
    copyHandler() {
      uni.setClipboardData({
        data: this.goodTitle,
      });
    },
    savePicHandler() {
      uni.showLoading({
        title: "正在下载图片",
      });
      let arr = JSON.parse(JSON.stringify(this.images));
      this.downLoadImage(arr);
    },
    downLoadImage(arr) {
      let that = this;
      uni.downloadFile({
        url: arr[0],
        success: (res) => {
          if (res.statusCode === 200) {
            uni.saveImageToPhotosAlbum({
              filePath: res.tempFilePath,
              success: function () {
                arr.splice(0, 1);
                if (arr.length > 0) {
                  that.downLoadImage(arr);
                } else {
                  uni.hideLoading();
                  uni.showToast({
                    title: "下载成功",
                  });
                  that.showDialog = true;
                }
              },
              fail: function (e) {
                uni.hideLoading();
                that.$refs.uTips.show({
                  title: "下载失败，请稍后重试",
                  type: "error",
                  duration: "2300",
                });
              },
            });
          } else {
            uni.hideLoading();
            that.$refs.uTips.show({
              title: "下载失败，请稍后重试",
              type: "error",
              duration: "2300",
            });
          }
        },
      });
    },
  },
};
</script>
