<template>
  <view>
    <view class="t-title" v-show="titleFlag">
      <img src="@/static/title.png" />
    </view>
    <view class="t-login">
      <u-form :model="form" ref="uForm" :border-bottom="false">
        <view class="login-box">
          <u-form-item class="t-input modal1"
            ><u-input
              v-model="form.location"
              placeholder="全部辖区"
              type="select"
              placeholder-style="color: #8DB4FB;"
              :select-open="actionSheetShow"
              @click="actionSheetShow = true"
              :custom-style="inputCustom"
          /></u-form-item>
          <u-form-item
            :rightIconStyle="{ color: '#3874FA', fontSize: '28rpx' }"
            right-icon="search"
            class="t-input"
          >
            <u-input
              placeholder="请输入机构名称查询"
              v-model="form.name"
              disabled
              placeholder-style="color: #8DB4FB;"
              :custom-style="inputCustom"
              @click="openModal"
            ></u-input>
          </u-form-item>
        </view>
      </u-form>
      <view class="t-button">
        <u-button
          @click="submit"
          :ripple="true"
          type="primary"
          :custom-style="customStyle"
          class="btn-search"
          >查询</u-button
        >
      </view>
      <u-select
        v-model="actionSheetShow"
        :list="actionSheetList"
        @confirm="confirm"
      ></u-select>
      <u-popup
        v-model="show"
        mode="center"
        :closeable="false"
        height="100%"
        width="100%"
      >
        <view class="bg">
          <img src="@/static/bg.png" class="modalImg" :style="ngHeight" />
          <view class="search-box">
            <u-search
              shape="round"
              v-model="keyword"
              :clearabled="false"
              action-text="取消"
              @custom="clear"
              @search="searchVal"
              placeholder="请输入机构名称"
              placeholder-color="#8DB4FB"
              color="#3773FD"
              hover-class="none"
              bg-color="#eef4fe"
              search-icon-color="#3874fa"
              :action-style="keywordColor"
              :adjust-position="false"
            ></u-search>
          </view>

          <DynamicScroller
            :items="organList"
            :min-item-size="54"
            class="virScroll"
            :style="{ height: windowHeight - 150 + 'px' }"
          >
            <template v-slot="{ item, index, active }">
              <DynamicScrollerItem
                :item="item"
                :active="active"
                :size-dependencies="[item.message]"
                :data-index="index"
              >
                <view @tap="click" class="organBox">
                  <image src="@/static/organ.png" class="organImg"> </image>
                  <view class="organText">{{ item.name }}</view>
                </view>
              </DynamicScrollerItem>
            </template>
          </DynamicScroller>
          <!-- <scroll-view
            :style="{ height: windowHeight - 150 + 'px' }"
            class="cell-box"
            v-if="searchFlag"
            scroll-y
          >
            <view
              :index="index"
              v-for="(item, index) in organList"
              :key="index"
              class="organBox"
              @tap="click"
              :id="index"
            >
              <image src="@/static/organ.png" class="organImg"> </image>
              <view class="organText">{{ item.name }}</view>
            </view>
          </scroll-view> -->
          <!-- <view v-else class="nodata">暂无数据</view> -->
        </view>
      </u-popup>
    </view>
    <epx-panel v-show="showModal" @getIsScroll="getIsScroll">
      <view class="img-logo"></view>
      <view class="stick-box">
        <view class="company-title">
          <view class="title-left"> </view>
          <view class="title-center">
            {{ orgDetail.name }}
          </view>
          <view class="title-right"> </view>
        </view>
        <view>
          <view class="title-header">
            <u-cell-item
              center
              :is-link="true"
              label="本年度累计记分"
              @click="click"
              :arrow="false"
              :value="orgDetail.totalScore"
            >
            </u-cell-item>
            <u-cell-item
              center
              :is-link="true"
              label="所在辖区"
              @click="click"
              :arrow="false"
              :value="orgDetail.district"
            >
            </u-cell-item>
            <u-cell-item
              center
              :is-link="true"
              label="机构地址"
              @click="click"
              :arrow="false"
              :value="orgDetail.address"
            >
            </u-cell-item>
          </view>
        </view>
      </view>
      <scroll-view
        @scrolltolower="scrollMytrip"
        :style="{ height: scrollHeight + 'px' }"
        :scroll-y="isScroll"
        v-show="list.length > 0"
        scroll-anchoring
        class="modal-scroll"
      >
        <view class="content-box">
          <view class="news-li" v-for="items in list" :key="items.id">
            <view class="content-title"> 序号{{ items.id }} </view>
            <view class="content-item">
              <view class="item-first">
                违反条例
              </view>
              <view class="item-second">
                {{ items.violationRegulations }}
              </view>
            </view>
            <view class="content-item">
              <view class="item-first">
                检查日期
              </view>
              <view class="item-second">{{
                items.checkTime | formatDate
              }}</view>
            </view>
            <view class="content-item">
              <view class="item-first">
                本次记分
              </view>
              <view class="item-second">{{ items.currentScore }}</view>
            </view>
            <u-gap height="2" bg-color="#bbb" margin-top="20"></u-gap>
          </view>
          <u-loadmore :status="status" v-show="list.length > 0" />
        </view>
      </scroll-view>
      <!-- <view class="wrapper">
        <view class="news-li" v-for="items in list" :key="items.id">
          <view class="content-title"> 序号{{ items.id }} </view>
          <view class="content-item">
            <view class="item-first">
              违反条例
            </view>
            <view class="item-second">
              {{ items.violationRegulations }}
            </view>
          </view>
          <view class="content-item">
            <view class="item-first">
              检查日期
            </view>
            <view class="item-second">{{ items.checkTime | formatDate }}</view>
          </view>
          <view class="content-item">
            <view class="item-first">
              本次记分
            </view>
            <view class="item-second">{{ items.currentScore }}</view>
          </view>
          <u-gap height="2" bg-color="#bbb" margin-top="20"></u-gap>
        </view>
        <u-loadmore :status="status" v-show="list.length > 0" />
      </view> -->
    </epx-panel>
    <u-toast ref="uToast" />
  </view>
</template>
<script>
import touchSlide from "@/components/epx-panel/epx-panel.vue";
// import BScroll from "@better-scroll/core";
export default {
  data() {
    return {
      status: "loadmore",
      orgId: null,
      form: {
        location: null,
        name: null,
      },
      isScroll: false,
      orgDetail: {},
      titleFlag: true,
      focusFlag: false,
      show: false,
      showModal: false,
      keyword: "",
      customStyle: {
        marginLeft: 120,
        marginRight: 120,
      },
      keywordColor: {
        color: "#fff",
      },
      inputCustom: {
        color: "#3874fa",
      },
      ngHeight: {
        height: "600px",
      },
      actionSheetList: [],
      actionSheetShow: false,
      screenHeight: "",
      list: [],
      scrollHeight: 0,
      windowTop: 0,
      organList: [],
      page: 0,
      total: 0,
      searchFlag: true,
      iskc: false,
    };
  },
  // beforeCreate() {
  //   document
  //     .querySelector("body")
  //     .setAttribute("style", "overscroll-behavior-y: none; ");
  // },
  onLoad() {
    let that = this;
    let info = uni.getSystemInfoSync();
    this.screenHeight = info.windowHeight;
    this.windowTop = info.windowTop;
    this.windowHeight = info.windowHeight;
    this.ngHeight.height = info.windowHeight;
    let url = window.location.pathname;
    if (!url.includes("kc")) {
      uni.request({
        url:
          "/supervision/h5/api/v3/unsecure/misbehaviour/organization/select/district",
        data: {},
        header: {
          "content-type": "application/json",
        },
        method: "GET",
        success: (res) => {
          if (res.data.success) {
            let data = res.data.data;
            data.map((item) => {
              (item["value"] = item.id), (item["label"] = item.name);
            });
            data.unshift({
              value: null,
              label: "全部辖区",
            });
            that.actionSheetList = data;
          } else {
          }
        },
        fail: function(error) {
          console.log(error);
        },
      });
    } else {
      that.actionSheetList.push({
        value: 999,
        label: "柯城区",
      });
      this.form.location = "柯城区";
    }
    uni.request({
      url:
        "/supervision/h5/api/v3/unsecure/misbehaviour/organization/view/count",
      data: {},
      header: {
        "content-type": "application/json",
      },
      method: "GET",
      success: (res) => {},
      fail: function(error) {
        console.log(error);
      },
    });
    // this.setViewport(`width=device-width, initial-scale=1.0, viewport-fit=cover`);
  },
  // mounted() {
  //   this.initScroll();
  // },
  // watch: {
  //   list() {
  //     this.$nextTick(() => {
  //       this.refresh();
  //     });
  //   },
  // },
  // beforeUnmount() {
  //   this.scroll.destroy();
  // },
  methods: {
    // initScroll() {
    //   this.$nextTick(() => {
    //     this.scroll = new BScroll(".wrapper", {
    //       startY: true,
    //     }); //初始化BScroll
    //   });
    // },
    // refresh() {
    //   this.scroll && this.scroll.refresh();
    // },
    getIsScroll(e) {
      this.isScroll = e;
    },
    fixScroll() {
      let u = navigator.userAgent;
      let isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
      if (isiOS) {
        window.scrollTo(0, 0);
      }
    },
    showToast(title) {
      this.$refs.uToast.show({
        title: title,
        type: "warning",
        position: "top",
      });
    },
    async scrollMytrip() {
      try {
        // 判断是否还有数据需要加载
        if (this.list.length < this.total) {
          this.status = "loadmore";
          const newPage = this.page + 1;
          this.page = newPage;
          this.mySchedulde(newPage);
        } else {
          this.status = "nomore";
        }
      } catch (e) {
        this.status = "nomore";
        console.log("scrollMytrip执行异常:", e);
      }
    },
    submit() {
      let that = this;
      this.total = 0;
      this.list = [];
      this.page = 0;
      if (this.form.name) {
        setTimeout(() => {
          let view = uni.createSelectorQuery().select(".stick-box");
          view
            .fields(
              {
                size: true,
              },
              (data) => {
                this.scrollHeight = this.windowHeight - data.height - 60;
              }
            )
            .exec();
        }, 1000);
        uni.request({
          url: `/supervision/h5/api/v3/unsecure/misbehaviour/organization/${this.orgId}`,
          data: {
            id: this.orgId,
          },
          header: {
            "content-type": "application/json",
          },
          method: "GET",
          success: (res) => {
            if (res.data.success) {
              let data = res.data.data;
              this.orgDetail = data;
              this.showModal = true;
            } else {
              this.showToast(res.data.message);
            }
          },
          fail: function(error) {
            console.log(error);
          },
        });
        this.mySchedulde();
      } else {
        this.showToast("机构名称不能为空");
      }
    },
    async mySchedulde(page = 0) {
      try {
        uni.request({
          url: `/supervision/h5/api/v3/unsecure/misbehaviour/organization/scoring/record/ls`,
          data: {
            organizationId: this.orgId,
            offset: page,
            limit: 8,
          },
          header: {
            "content-type": "application/json",
          },
          method: "GET",
          success: (res) => {
            if (res.data.success) {
              let data = res.data.data;
              data.map((item) => {
                this.list.push(item);
              });
              this.total = res.data.totalCount;
            } else {
              this.showToast(res.data.message);
            }
          },
          fail: function(error) {
            console.log(error);
          },
        });
      } catch (e) {
        console.log("mySchedulde执行异常:", e);
      }
    },
    openModal() {
      this.show = true;
      this.keyword = "";
      this.ngHeight.height = this.screenHeight + "px";
      this.fixScroll();
      // setTimeout(() => {
      //   this.focusFlag = true;
      // }, 1000);
    },

    searchVal(value) {
      uni.showLoading();
      uni.request({
        url: "/supervision/h5/api/v3/unsecure/misbehaviour/organization/select",
        data: {
          name: value,
          district:
            this.form.location === "全部辖区" ? null : this.form.location,
          offset: 1,
          limit: 9999,
        },
        header: {
          "content-type": "application/json",
        },
        method: "GET",
        success: (res) => {
          if (res.data.success) {
            let data = res.data.data;
            if (data.length > 0) {
              this.searchFlag = true;
            } else {
              this.searchFlag = false;
            }
            let list = document.querySelector(".virScroll");
            list.addEventListener(
              "touchmove",
              (e) => e.stopPropagation(),
              false
            );
            this.organList = data;
            uni.hideLoading();
          } else {
            this.showToast(res.data.message);
            uni.hideLoading();
          }
        },
        fail: function(error) {
          console.log(error);
        },
      });
    },
    clear() {
      this.keyword = "";
      this.organList = [];
      this.show = false;
    },
    confirm(e) {
      this.form.location = null;
      e.map((val, index) => {
        this.form.location = val.label;
      });
      this.form.name = null;
      this.orgId = null;
      this.showModal = false;
      this.page = 0;
      this.total = 0;
      this.list = [];
    },
    click(e) {
      let id = Number(e.currentTarget.id);
      this.orgId = this.organList[id].id;
      this.show = false;
      this.showModal = false;
      this.form.name = this.organList[id].name;
      this.organList = [];
    },
  },
  //时间戳的处理
  filters: {
    formatDate: function(value) {
      var date = new Date();
      var month = date.getMonth() + 1;
      var time = date.getFullYear() + "." + month + "." + date.getDate();
      return time;
    },
  },
};
</script>
<style>
page {
  height: 100%;
  width: 100%;
  background-image: url("@/static/bg.png");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  position: fixed;
}
.virScroll {
  -webkit-overflow-scrolling: touch;
}
/* .wrapper {
  overflow: hidden;
} */
.nodata {
  color: #fff;
  padding: 40rpx 0;
  text-align: center;
}
.img-logo {
  height: 10rpx;
  width: 60rpx;
  position: absolute;
  background-color: #ccc;
  top: 16rpx;
  left: 50%;
  z-index: 100;
  border-radius: 6rpx;
  transform: translate(-50%, 0);
}
.organBox {
  display: flex;
  border-bottom: 1px #fff solid;
  padding: 20rpx;
  align-items: center;
}
.organBox:active {
  background-color: #8db4fb !important;
}
.organImg {
  width: 40rpx;
  height: 40rpx;
  flex: 0 0 40rpx;
}
.organText {
  color: #fff;
  margin-left: 10rpx;
}
.content-title {
  margin-top: 20rpx;
  margin-left: 30rpx;
  color: #3874fa;
  font-size: 30rpx;
  font-weight: bold;
}
.content-item {
  margin: 20rpx 30rpx 0 30rpx;
  display: flex;
}
.item-first {
  flex: 0 0 20%;
  color: #333;
  font-size: 24rpx;
  font-weight: bold;
}
.item-second {
  flex: 1;
  color: #666;
  font-size: 24rpx;
}
.stick-box {
  position: sticky;
  z-index: 1000000;
  top: 0;
}
.btn-search:active {
  color: #3874fa;
  background-color: #fff;
}
.title-header >>> .u-cell__label {
  color: #333 !important;
  margin-right: 18rpx;
}
.title-header >>> .u-cell__value {
  color: #333 !important;
}
.content-box {
}
.company-title {
  display: flex;
  align-items: center;
  justify-content: center;
}
.title-left {
  width: 50rpx;
  flex: 0 0 50rpx;
  height: 6rpx;
  background: repeating-linear-gradient(90deg, #eff4ff, #77a0fc, #3874fa);
}
.title-center {
  color: #3874fa;
  margin: 0 20rpx;
  text-align: center;
}
.title-right {
  width: 50rpx;
  flex: 0 0 50rpx;
  height: 6rpx;
  background: repeating-linear-gradient(90deg, #3874fa, #77a0fc, #eff4ff);
}
.modal-scroll {
  -webkit-overflow-scrolling: touch;
  overflow-y: auto;
}
.cell-box {
  overflow: hidden;
}
.cell-box >>> .u-cell-item-box {
  background: rgba(0, 0, 0, 0);
}
.cell-box >>> .u-cell__label {
  color: #fff;
}
.cell-box >>> .u-cell-hover {
  background-color: #8db4fb !important;
}
.modalImg {
  position: absolute;
  width: 100%;
  top: 0;
  right: 0;
  z-index: -1;
}
.t-title {
  display: flex;
  align-items: center;
  justify-content: center;
  padding-top: 80rpx;
}
.t-title img {
  width: 88%;
}
.login-box {
  position: relative;
  border-radius: 13rpx;
  padding: 80rpx 20rpx 100rpx 20rpx;
  width: 100%;
}
.u-form .login-box {
  padding: 20rpx 120rpx 80rpx 120rpx;
  display: flex;
  flex-direction: column;
}
.login-box .u-border-bottom:after {
  border-bottom: 0;
}
.t-input >>> .u-flex {
  background-color: #eef4fe;
  padding: 0 16rpx;
  border-radius: 6rpx;
}
.u-input >>> .uicon-arrow-down-fill {
  color: #3874fa !important;
}
.t-button {
  padding: 0 120rpx;
}
.action-my {
  height: 200px;
  top: unset;
}
.action-my >>> .u-drawer-content {
  height: 200px !important;
}
.search-box {
  padding: 30rpx 10rpx;
}
</style>
