import { wxNavigateTo, wxRequestPost } from "@utils/promise-wx-api";
import words from "@config/words";
import animeBehavior from "@mixins/anime";
const app = getApp();

Component({
  behaviors: [animeBehavior],
  properties: {
    tagName: {
      type: String,
      value: "",
    },
  },

  data: {
    customerId: "",
    currentGridName: "",
    iniLoaded: false,
    tagsMore: false,
    tagsStatus: false,
    hideMore: false,
    tagsList: [],
    filterTags: [],
    hideMoreBtn: false,
    secondeTags: [],
    releasedUrl: "resi/voice/article/articlelist",
    listParams: {
      gridId: "",
    },
    listIsMock: false,
    tagIdList: [],
    filterHeight: "185rpx",
    tagsHeight: "162rpx",
    scrollTops: 0,
    swiperHeight: "100%",
  },
  async ready() {
    this.computedTagHeight();
  },
  methods: {
    async onShow() {
      // await app.doAfterLogin();
      // this.setData({ tagIdList: [] });
      this.initTags();
    },

    async onLoad() {
      await app.doAfterLogin();
      await this.initTags();
      const { tagName } = this.data;
      if (tagName) {
        this.choiceTag(tagName);
        wx.setNavigationBarTitle({
          title: tagName,
        });
      }
      this.init();
    },

    onReachBottom() {
      console.log("onReachBottom");
      const $list = this.selectComponent("#releasedList");
      $list.getMore();
    },

    async init() {
      const { iniLoaded } = this.data;
      const $loading = this.selectComponent("#loading");

      if (!iniLoaded) {
        $loading.show();
      }

      const { gridId, currentGridName } = app.globalData;
      this.setData({
        listParams: {
          gridId,
        },
        currentGridName,
      });
      let that = this;
      setTimeout(function () {
        that.setData({
          iniLoaded: true,
        });

        $loading.hide();
      }, 1000);
    },

    async initTags() {
      const {
        data: {
          data: { code, data },
        },
        msg,
      } = await wxRequestPost(
        "resi/voice/article/taglist",
        {
          gridId: app.globalData.gridId,
          customerId: app.globalData.customerId,
        },
        {
          isMock: false,
          // isQuiet: true
        }
      );

      if (msg === "success" && code === 0) {
        // let tagIdList = data.map(item => {
        //     return item.tagId
        // })
        this.setData({ tagsList: data });
        // 获取标签撑开容器的高度
        let that = this;
        setTimeout(function () {
          that.getInitTagsHeight();
        }, 1000);
      }
    },

    getInitTagsHeight() {
      let that = this;
      let query = wx.createSelectorQuery().in(this);
      query
        .selectAll(".tags-item-container")
        .boundingClientRect(function (res) {
          //获取标签高度
          if (Array.isArray(res) && res.length > 0) {
            console.log("res7777778887777777", res[0].height);
            let hideMoreBtn = false;
            if (res[0].height <= 35) {
              hideMoreBtn = true;
            }
            that.setData({
              hideMoreBtn,
            });
          }
        })
        .exec();
    },

    handleTagsMore() {
      if (this.data.tagsMore) this.animeFadeOut("tags-mask");
      this.setData({
        scrollTops: 0,
        tagsMore: !this.data.tagsMore,
      });
    },

    async getRelationTag(arr) {
      const {
        data: {
          data: { code, data },
        },
        msg,
      } = await wxRequestPost(
        "resi/voice/article/tagcascadelist",
        {
          customerId: app.globalData.customerId,
          gridId: app.globalData.gridId,
          tagIdList: arr,
        },
        {
          isMock: false,
        }
      );

      if (msg === "success" && code === 0) {
        this.setData({ secondeTags: data });
      }
    },

    // 根据标签过滤
    async handleFilterTag(e) {
      const {
        currentTarget: {
          dataset: { index },
        },
      } = e;
      let { filterTags, tagsList, secondeTags, tagsMore, tagIdList } =
        this.data;
      if (tagsMore) this.setData({ tagsMore: !tagsMore });

      filterTags.push(tagsList[index]);
      tagIdList = filterTags.map((item) => item.tagId);

      this.getRelationTag(tagIdList);
      // const child = this.selectComponent('#releasedList')

      this.setData({ filterTags, tagIdList });

      //await nextTick(500)
      this.computeScrollViewHeight();
      this.computedTagHeight();
    },

    async choiceTag(tagName) {
      let { filterTags, tagsList, tagsMore, tagIdList } = this.data;
      if (tagsMore) this.setData({ tagsMore: !tagsMore });
      let tagItem = tagsList.find((item) => item.tagName == tagName);

      filterTags.push(tagItem);
      tagIdList = filterTags.map((item) => item.tagId);

      this.getRelationTag(tagIdList);

      this.setData({ filterTags, tagIdList });
    },

    // 删除过滤标签
    async handleFilterDel(e) {
      const {
        currentTarget: {
          dataset: { index },
        },
      } = e;
      let { filterTags, secondeTags, tagIdList } = this.data;
      filterTags.splice(index, 1);
      if (filterTags.length < 1) {
        secondeTags = [];
        tagIdList = [];
      }
      tagIdList = filterTags.map((item) => item.tagId);
      this.getRelationTag(tagIdList);

      this.setData({ filterTags, tagIdList });
      //await nextTick(500)
      if (filterTags.length > 0) this.computeScrollViewHeight();
      this.computedTagHeight();
    },

    async handleSecondTag(e) {
      const {
        currentTarget: {
          dataset: { index },
        },
      } = e;
      let { filterTags, secondeTags, tagIdList } = this.data;
      filterTags.push(secondeTags[index]);

      tagIdList = filterTags.map((item) => item.tagId);

      this.getRelationTag(tagIdList);
      this.setData({ filterTags, tagIdList });
      this.computeScrollViewHeight();
      this.computedTagHeight();
    },

    computedTagHeight() {
      let that = this;
      let query = wx.createSelectorQuery().in(this);
      const ress = wx.getSystemInfoSync();
      query
        .selectAll(".tags-item-container, .tags-show, .fixed-h, .tags-height")
        .boundingClientRect(function (res) {
          //获取标签高度
          console.log("res111", res);
          // 这里主要计算 hideMore  和 swiperHeight
          // if (!that.data.hideMore) {
          //   if (res[2].height < res[3].height) {
          //     that.setData({ hideMore: true })
          //   }
          // }
          // that.setData({
          //   swiperHeight: (ress.windowHeight - res[0].height - res[1].height) + 'px'
          // })
          console.log("_height", res);
        })
        .exec();
    },

    computedSwiperHeight() {
      let that = this;
      let query = wx.createSelectorQuery().in(this);
      const ress = wx.getSystemInfoSync();
      query
        .select(".fixed-h")
        .boundingClientRect(function (res) {
          that.setData({
            swiperHeight: ress.windowHeight - res.height + "px",
          });
          console.log("_height", res);
        })
        .exec();
    },

    computeScrollViewHeight() {
      let that = this;
      let query = wx.createSelectorQuery().in(this);
      query
        .select(".tags-filter")
        .boundingClientRect(function (res) {
          //获取标签高度
          let _height = res.height;
          that.setData({
            filterHeight: _height + "px",
          });
        })
        .exec();
    },

    tagScroll(e) {
      const { scrollTop } = e.detail;
      this.setData({ scrollTops: scrollTop });
    },

    // handleTagsMore() {
    //   this.setData({
    //     tagsMore: !this.data.tagsMore
    //   })
    // }
  },
});