<template>
  <view class="report">
    <view v-if="showPage">
      <view>

        <view class="title">

          <view
            :class="'titleSel ' + (idx == currentIndex ? 'active' : '')"
            @click="onBindTabChange(tab, idx)"
            :data-idx="idx"
            v-for="(tab, idx) in tabList"
            :key="idx"
          >

    
            <text>{{ tab.tabName }} </text>

            <view
              :class="idx == currentIndex ? 'headerLineSel' : 'headerLineUnsel'"
            ></view>
          </view>
          <!-- <view>
            <image
              mode="scaleToFill"
              src="/static/data/images/index/pos.png"
              class="pos"
              @click="toMap"
              v-if="showType === 'list'"
            />
            <image
              mode="scaleToFill"
              src="/static/data/images/index/list.png"
              class="list"
              @click="toList"
              v-if="showType === 'map'"
            />
          </view> -->
        </view>
        <view v-if="currentIndex == 2" class="close">
          <text
            :class="closeType == 1 ? 'close-active' : ''"
            @click="onCloseTab(1,'final')"
            data-type="1"
            data-status="final"
            >已结案</text
          >
          <text
            :class="closeType == 2 ? 'close-active' : ''"
            @click="onCloseTab(2,'closed')"
            data-type="2"
            data-status="closed"
            >已关闭</text
          >
          <text
            :class="closeType == 3 ? 'close-active' : ''"
            @click="onCloseTab(3,'noneed')"
            data-type="3"
            data-status="noneed"
            >无需解决</text
          >
        </view>
      </view>

      <view class="report-content">
        <view v-if="showType === 'list'">
          <view
            class="block"
            v-if="currentIndex == 0"
            style="margin-top: 100rpx"
          >
            <block v-if="votingLength > 0">
              <view
                class="block-content"
                @click="toDetail(item)"
                :data-value="item"
                v-for="(item, index) in votingList"
                :key="index"
              >
                <view class="block-title">
                  {{ item.issueTitle }}
                </view>

                <view class="time">
                  {{ item.issuePublishTime }}
                </view>

                <view class="block-item-content">
                  {{ item.suggestion }}
                </view>

                <block v-if="item.sourceType === 'resi_topic'">
                  <view
                    class="block-question"
                    v-if="item.topicContent || item.topicImgs.length > 0"
                  >
                    <view class="question-content">
                      <view class="topic-tag">
                        <image src="/static/data/images/index/tag.png" />
                        <text>话题</text>
                      </view>
                      <view>
                        {{ item.topicContent }}
                      </view>
                    </view>
                    <view class="block-image" v-if="item.topicImgs.length > 0">
                      <image
                        :src="img"
                        v-for="(img, index1) in item.topicImgs"
                        :key="index1"
                      >
                      </image>
                    </view>
                  </view>
                </block>

                <block v-if="item.sourceType === 'ic_event'">
                  <view
                    class="block-question"
                    v-if="item.icEventInfo.eventContent"
                  >
                    <view class="question-content">
                      <view class="topic-tag">
                        <image src="/static/data/images/index/event.png" />
                        <text>事件</text>
                      </view>
                      <view>
                        {{ item.icEventInfo.eventContent }}
                      </view>
                    </view>
                  </view>
                </block>
              </view>
            </block>
            <block v-if="votingLength == 0">
              <view style="margin-top: 250rpx; text-align: center">
                <image
                  src="/static/data/images/empty.png"
                  style="width: 464rpx; height: 480rpx"
                />
                <view style="text-align: center; color: #999"></view>
              </view>
            </block>
          </view>
          <view
            class="block"
            v-if="currentIndex == 1"
            style="margin-top: 100rpx"
          >
            <block v-if="processingLength > 0">
              <view
                class="block-content"
                @click="toDetail(item)"
                :data-value="item"
                v-for="(item, index) in processingList"
                :key="index"
              >
                <view class="block-title">
                  {{ item.issueTitle }}
                </view>

                <view class="time">
                  {{ item.issueShiftedTime }}
                </view>

                <view class="block-item-content">
                  当前处理部门：
                  <text
                    v-for="(dItem, dIndex) in item.currentHandleDepartMent"
                    :key="dIndex"
                    >{{ dIndex === 0 ? "" : "、" }}{{ dItem }}</text
                  >
                </view>

                <block v-if="item.issueSourceType === 'resi_topic'">
                  <view
                    class="block-question"
                    v-if="item.topicContent || item.topicImgs.length > 0"
                  >
                    <view class="question-content">
                      <view class="topic-tag">
                        <image src="/static/data/images/index/tag.png" />
                        <text>话题</text>
                      </view>
                      <view>
                        {{ item.topicContent }}
                      </view>
                    </view>
                    <view class="block-image" v-if="item.topicImgs.length > 0">
                      <image
                        :src="img"
                        v-for="(img, index1) in item.topicImgs"
                        :key="index1"
                      >
                      </image>
                    </view>
                  </view>
                </block>

                <block v-if="item.issueSourceType === 'ic_event'">
                  <view
                    class="block-question"
                    v-if="item.icEventInfo.eventContent"
                  >
                    <view class="question-content">
                      <view class="topic-tag">
                        <image src="/static/data/images/index/event.png" />
                        <text>事件</text>
                      </view>
                      <view>
                        {{ item.icEventInfo.eventContent }}
                      </view>
                    </view>
                  </view>
                </block>
              </view>
            </block>
            <block v-if="processingLength == 0">
              <view style="margin-top: 250rpx; text-align: center">
                <image
                  src="/static/data/images/empty.png"
                  style="width: 464rpx; height: 480rpx"
                />
                <view style="text-align: center; color: #999"></view>
              </view>
            </block>
          </view>
          <view class="block" v-if="currentIndex == 2">
            <block v-if="closeLength > 0">
              <view
                class="block-content"
                @click="toDetail(item)"
                :data-value="item"
                v-for="(item, index) in closeList"
                :key="index"
              >
                <view class="block-title">
                  {{ item.issueTitle }}
                </view>

                <view class="time" v-if="closeType == 1 || closeType == 3">
                  {{ item.closedTime }}
                </view>

                <view class="time" v-if="closeType == 2">
                  {{ item.issueClosedTime }}
                </view>

                <view class="block-item-content">
                  <text v-if="status == 'final'"
                    >结案说明：{{ item.publicReply }}</text
                  >
                  <text v-if="status == 'closed'">{{ item.solution }}</text>
                  <text v-if="status == 'noneed'">{{ item.solution }}</text>
                </view>

                <block
                  v-if="
                    item.issueSourceType === 'resi_topic' ||
                    item.sourceType === 'resi_topic'
                  "
                >
                  <view
                    class="block-question"
                    v-if="item.topicContent || item.topicImgs.length > 0"
                  >
                    <view class="question-content">
                      <view class="topic-tag">
                        <image src="/static/data/images/index/tag.png" />
                        <text>话题</text>
                      </view>
                      <view>
                        {{ item.topicContent }}
                      </view>
                    </view>
                    <view class="block-image" v-if="item.topicImgs.length > 0">
                      <image
                        :src="img"
                        v-for="(img, index1) in item.topicImgs"
                        :key="index1"
                      >
                      </image>
                    </view>
                  </view>
                </block>

                <block
                  v-if="
                    item.issueSourceType === 'ic_event' ||
                    item.sourceType === 'ic_event'
                  "
                >
                  <view
                    class="block-question"
                    v-if="item.icEventInfo.eventContent"
                  >
                    <view class="question-content">
                      <view class="topic-tag">
                        <image src="/static/data/images/index/event.png" />
                        <text>事件</text>
                      </view>
                      <view>
                        {{ item.icEventInfo.eventContent }}
                      </view>
                    </view>
                  </view>
                </block>
              </view>
            </block>
            <block v-if="closeLength == 0">
              <view style="margin-top: 250rpx; text-align: center">
                <image
                  src="/static/data/images/empty.png"
                  style="width: 464rpx; height: 480rpx"
                />
                <view style="text-align: center; color: #999"></view>
              </view>
            </block>
          </view>
        </view>

        <view v-if="showType === 'map'">
          <map
            id="myMap3"
            :setting="setting"
            :show-location="true"
            :markers="markers"
            @onCalloutTap="handleTapMarker"
            :longitude="iniCenterPoint.longitude"
            :latitude="iniCenterPoint.latitude"
          ></map>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import mapList from "@/components/mapList/mapList";
import {
  votinglist,
  processing,
  closedlist,
  closedproject,
  unreslovedlist,
} from "../../utils/api/customerApi.js";
import * as userTools from "../../utils/user";
import formatYYMMDDDate from "../../utils/date";
import { getLocation } from "../../utils/location";
import { nextTick } from "../../utils/tools";
const app = getApp();
export default {
  components: {
    mapList,
  },
  data() {
    return {
      userInfo: null,
      gridInfo: null,
      showPage: false,
      votingList: [],
      votingLength: null,
      processingList: [],
      processingLength: null,
      closeList: [],
      closeListLength: null,
      currentIndex: 0,

      tabList: [
        {
          tabName: "表决中",
          status: "vote",
        },
        {
          tabName: "处理中",
          status: "processing",
        },
        {
          tabName: "已完成",
          status: "closed_case",
        },
      ],

      closeType: 1,
      pageNo: 1,
      pageSize: 20,
      status: "final",
      showType: "list",

      //显示类型，map 地图  list 列表

      mapId: "myMap",

      mapCtx: null,

      setting: {
        enable3D: true,
      },

      iniCenterPoint: {
        longitude: 0,
        latitude: 0,
      },

      includePoints: {
        padding: [50, 20, 50, 20],
        points: [],
      },

      markers: [],
      list: [],
      closeLength: "",
      iniLoaded: false,

      tab: {
        tabName: "",
      },

      img: "",
      dIndex: 0,
      dItem: "",
    };
  },
  onLoad() {},
  onShow() {
    function getIframeQueryParams() {
      // 使用URLSearchParams解析查询参数
      function getStringAfterQuestionMark(str) {
        return str.split("?").pop();
      }
      var result = getStringAfterQuestionMark(window.location.href);
      var params = new URLSearchParams(result);
      // 创建一个对象来存储解析后的参数
      var queryParams = {};
      // 遍历所有查询参数并存储到对象中
      params.forEach((value, key) => {
        queryParams[key] = value;
      });

      return queryParams;
    }
    const query = getIframeQueryParams();
    const token =
      process.env.NODE_ENV == "development"
        ? "eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzUxMiJ9.eyJhcHAiOiJyZXNpIiwiY2xpZW50IjoibGFuX3R1IiwiZXhwIjoxODA3OTMyMTM0LCJ1c2VySWQiOiIxNTUwMDA2MTc2ODI0MTcyNTQ1IiwiaWF0IjoxNzEzMzI0MTM0fQ.xHIy-gC0QRSgDGfgDxneQwKPyeBe3i1krKmCiIxjFaSLxr09O1mXdflkRa4WuiJbkpxUrvYH4H7J--VEFXeOpw"
		: query.token;
    const gridId =
      process.env.NODE_ENV == "development"
        ? "32a5f0dd-f7c9-11ee-96cf-fa163ef15b63"
        : query.gridId;
    userTools.setStoreUserInfo(
      JSON.stringify({
        gridId: gridId,
        authorization: token,
        customerId: "1535072605621841922",
        epmetUserId: "1535072605621841922",
      })
    );
    userTools.setStoreGridInfo(
      JSON.stringify({
        gridId: gridId,
      })
    );
    // 获取缓存信息
    this.setData({
      userInfo: {
        gridId: gridId,
        authorization: token,
        customerId: "1535072605621841922",
      },
      gridInfo: {
        gridId: gridId,
      },
      showPage: true,
    });
    this.init();
  },
  async onPullDownRefresh() {
    this.setData({
      pageNo: 1,
      votingList: [],
      processingList: [],
      closeList: [],
    });
    await this.indexListFun();
    this.stopPullDownRefresh();
  },
  //上拉加载
  onReachBottom() {
    let page = (this.pageNo += 1);
    this.setData({
      pageNo: page,
    });
    this.indexListFun();
  },
  methods: {
    init() {
      this.setData({
        pageNo: 1,
        votingList: [],
        processingList: [],
        closeList: [],
      });
      this.indexListFun();
    },

    // 表决中列表接口
    async indexListFun() {
      let indexData = {
        gridId: this.userInfo.gridId || this.gridInfo.gridId,
        pageNo: this.pageNo,
        pageSize: this.pageSize,
      };
      // 表决中列表
      uni.showLoading();
      if (this.currentIndex === 0) {
        const { data } = await votinglist(indexData);
        let oldData = data;
        data.forEach((e, index) => {
          let time = formatYYMMDDDate.formatYYMMDDDate(e.issuePublishTime);
          oldData[index].issuePublishTime = time;
        });
        uni.hideLoading();
        this.setData({
          votingList: this.votingList.concat(oldData),
        });
        this.setData({
          votingLength: this.votingList.length,
          list: this.votingList,
        });
        await this.noticeFun(data);
      }
      // 处理中列表
      if (this.currentIndex === 1) {
        const { data } = await processing(indexData);
        let oldData = data;
        data.forEach((e, index) => {
          let time = formatYYMMDDDate.formatYYMMDDDate(e.issueShiftedTime);
          oldData[index].issueShiftedTime = time;
        });
        this.setData({
          processingList: this.processingList.concat(oldData),
        });
        this.setData({
          processingLength: this.processingList.length,
          list: this.processingList,
        });
        await this.noticeFun(data);
      }
      // 已完成中的列表
      if (this.currentIndex === 2) {
        if (this.closeType == 1) {
          const { data } = await closedproject(indexData);
          let oldData = data;
          data.forEach((e, index) => {
            let time = formatYYMMDDDate.formatYYMMDDDate(e.closedTime);
            oldData[index].closedTime = time;
          });
          this.setData({
            closeList: this.closeList.concat(oldData),
          });
          this.setData({
            closeLength: this.closeList.length,
            list: this.closeList,
          });
          await this.noticeFun(data);
        }
        if (this.closeType == 2) {
          const { data } = await closedlist(indexData);
          let oldData = data;
          data.forEach((e, index) => {
            let time = formatYYMMDDDate.formatYYMMDDDate(e.issueClosedTime);
            oldData[index].issueClosedTime = time;
          });
          this.setData({
            closeList: this.closeList.concat(oldData),
          });
          this.setData({
            closeLength: this.closeList.length,
            list: this.closeList,
          });
          await this.noticeFun(data);
        }
        if (this.closeType == 3) {
          const { data } = await unreslovedlist(indexData);
          let oldData = data;
          data.forEach((e, index) => {
            let time = formatYYMMDDDate.formatYYMMDDDate(e.closedTime);
            oldData[index].closedTime = time;
          });
          this.setData({
            closeList: this.closeList.concat(oldData),
          });
          this.setData({
            closeLength: this.closeList.length,
            list: this.closeList,
          });
          await this.noticeFun(data);
        }
      }
      if (this.showType === "map") {
        this.mapInit();
      }
    },

    async toMap() {
      this.setData({
        showType: "map",
      });
      this.mapInit();
    },

    async toList() {
      this.setData({
        showType: "list",
      });
    },

    // 无内容提示
    noticeFun(value) {
      if ((Array.isArray(value) && value.length == 0) || !value) {
        uni.showToast({
          icon: 'none',
          title: "暂时没有更多内容了！",
          duration: 1000,
        });
      }
    },

    // 页面tab切换
    onBindTabChange(e, idx) {
      this.setData({
        currentIndex: idx,
        pageNo: 1,
        votingList: [],
        processingList: [],
        closeList: [],
      });
      this.indexListFun();
    },

    // 已完成中选项切换
    onCloseTab(type, status) {
      this.setData({
        pageNo: 1,
        closeType: type,
        closeList: [],
        status,
      });
      this.indexListFun();
    },

    stopPullDownRefresh() {
      uni.stopPullDownRefresh({
        complete(res) {
          console.log(res, new Date());
        },
      });
    },

    // 跳转详情页
    async toDetail(value) {
      uni.navigateTo({
        url: "/pages/detail/detail?issueId=" + value.issueId,
      });
    },

    shuffle(str) {
      if (typeof str != "string" && str !== "") {
        return str;
      } else {
        return str
          .split("")
          .sort(() => Math.random() - 0.5)
          .join("");
      }
    },

    async mapInit() {
      this.setData({
        mapId: "map" + this.shuffle("abcdefg1234567890"),
      });
      const { list } = this;
      this.setData({
        list: list.filter((item) => item.longitude && item.latitude),
      });
      await this.iniMap();
      console.log(this.list);
      this.addMarker();
      this.setData({
        iniLoaded: true,
      });
      await nextTick();
      // let mapCtx = this.createSelectorQuery().select("#myMap");
      let mapCtx = uni.createMapContext(this.mapId);
      console.log(this.mapId);
      // if (
      //   this.data.includePoints.points &&
      //   this.data.includePoints.points.length > 0
      // ) {
      //   mapCtx.includePoints(this.data.includePoints);
      // }
      mapCtx.updateComponents({
        command: {
          markerAnim: [
            {
              markerId: 0,
              type: 0,
            },
          ],
        },
      });
      this.setData({
        mapCtx,
      });
    },

    async iniMap() {
      const { list } = this;
      this.setData({
        "includePoints.points": list.map((item) => {
          return {
            latitude: item.latitude,
            longitude: item.longitude,
          };
        }),
      });
      const { msg, data } = await getLocation(true);
      if (msg === "success") {
        this.setData({
          iniCenterPoint: {
            longitude: data.longitude,
            latitude: data.latitude,
          },
        });
      } else {
        this.setData({
          iniCenterPoint: {
            longitude: app.globalData.longitude,
            latitude: app.globalData.latitude,
          },
        });
      }
    },

    handleTapMarker(e) {
      const { markerId } = e;
      uni.navigateTo({
        url: "/pages/detail/detail?issueId=" + this.list[markerId].issueId,
      });
    },

    addMarker() {
      const { list } = this;
      if (!Array.isArray(list) || list.length == 0) {
        return;
      }
      let markers = [];
      for (let i = 0; i < list.length; i++) {
        let item = list[i];
        console.log(item);
        markers.push({
          id: i,
          title: item.issueTitle,
          latitude: item.latitude,
          longitude: item.longitude,
          iconPath: "/static/data/images/index/poi.png",
          width: 25,
          height: 28,
          alpha: 0.8,
        });
      }
      this.setData({
        markers,
      });
    },
  },
};
</script>
<style>
.title {
  width: 100%;
  background: white;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  /* justify-content: space-around; */
  position: fixed;
  top: 0;
  z-index: 99;
  padding: 0 40rpx;
  box-sizing: border-box;
}

.pos {
  width: 32rpx;
  height: 40rpx;
  position: absolute;
  right: 30rpx;
  top: 10rpx;
}

.list {
  width: 40rpx;
  height: 32rpx;
  position: absolute;
  right: 30rpx;
  top: 10rpx;
}

.titleSel {
  color: #484747;
  font-size: 34rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  /* flex: 1; */
  height: 80rpx;
  line-height: 60rpx;
  margin-right: 56rpx;
  letter-spacing: 2rpx;
}

.titleSel:last-child {
  margin-right: 0;
}

.active {
  color: #333;
  font-weight: bold;
  font-size: 34rpx;
}

.titleUnsel {
  color: #858fab;
  font-size: #858fab;
}

.close {
  margin-top: 80rpx;
  height: 90rpx;
  background-color: #fff;
  display: flex;
  align-items: center;
  padding: 0 20rpx;
}

.close text {
  display: block;
  background: #f7f7f7;
  border-radius: 10rpx;
  padding: 6rpx 20rpx;
  box-sizing: border-box;
  text-align: center;
  font-size: 26rpx;
  margin: 0 30rpx;
}

.close .close-active {
  background-color: #22BDF0;
  color: #fff;
}

.headerLineSel {
  background: #22BDF0;
  height: 6rpx;
  width: 50rpx;
  position: relative;
  margin: 10rpx auto 0 auto;
  border-radius: 16rpx;
}

.headerLineUnsel {
  background: #fff;
  height: 6rpx;
  width: 40rpx;
  position: relative;
  margin-top: 10rpx;
}

.report-content {
  width: 100vw;
}

.block {
  margin-bottom: 10rpx;
  padding: 20rpx;
}

.block-content {
  background-color: #fff;
  position: relative;
  margin-bottom: 20rpx;
  padding: 15rpx;
  border-radius: 10rpx;
}

.block-title {
  width: 100%;
  font-size: 32rpx;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin: 20rpx 0;
  font-weight: bold;
}

.time {
  font-size: 26rpx;
  color: #999;
  display: flex;
  align-items: center;
}

.time text {
  display: inline-block;
  width: 20rpx;
  height: 20rpx;
  border-radius: 20rpx;
  background-color: #22BDF0;
  margin-left: 10rpx;
}

.block-item-content {
  width: 100%;
  font-size: 32rpx !important;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  margin: 20rpx 0;
}

.block-image {
  width: 100%;
  padding: 20rpx 10rpx;
  box-sizing: border-box;
}

.block-image image {
  width: 30%;
  height: 200rpx;
  margin: 0 10rpx;
}

.block-question {
  border: 1px solid #eeeeee;
  border-radius: 10rpx;
}

.block-question .question-content {
  display: flex;
  align-items: center;
  padding: 20rpx;
}

.block-question .question-content image {
  width: 30rpx;
  height: 30rpx;
  margin: 0 20rpx;
}

.block-question .question-content view {
  width: 90%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.block-question .question-content .topic-tag {
  position: relative;
  top: 4rpx;
  width: 66rpx;
  height: 47rpx;
  text-align: center;
  font-size: 24rpx;
  font-family: Source Han Serif SC;
  font-weight: 400;
  color: #fff;
  line-height: 40rpx;
  text-align: center;
  display: block;
  margin-right: 10rpx;
}

.block-question .question-content .topic-tag image {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  z-index: 0;
  display: block;
  width: 100%;
  height: 100%;
}

.topic-tag text {
  display: block;
  position: relative;
  width: 100%;
  z-index: 1;
}
</style>
