<template>
  <view class="listPage" :class="{ popupShow: popupShow }">
    <view class="fixedheader">
      <headers :showBack="true" :themeType="true">
        <view class="headerName"> 应急信息 </view>
      </headers>
      <view class="searchBox">
        <form>
          <view class="uni-form-item">
            <view class="screen" @click="$refs.typeTree._show()">筛选</view>
            <view class="screen" style="margin-top: 3px; margin-left: 5px">
              <image src="/static/screenIcon.png" style="width: 15px; height: 15px"> </image>
            </view>
          </view>
        </form>
      </view>
    </view>
    <view class="content" :style="{ paddingTop: mobileTopHeight + 100 + 'px' }">
      <view class="item" v-if="listData.length > 0" v-for="(item, index) in listData" :key="index" @click="goDetails(item)">
        <view class="item_title">
          {{ item.scenariosName }}
        </view>
        <view class="item_content">预案类型：{{ item.typeName }}</view>
        <view class="item_content mt">编制时间: {{ item.createTime }}</view>
        <view class="item_content mt">组织名称: {{ item.groupName }}</view>
      </view>
      <view class="noData" v-if="listData.length == 0">
        <image class="noDataImg" src="../../../static/noData.png"></image>
        <view>暂无数据</view>
      </view>
      <tki-tree
        style="z-index: 9999"
        cancelText="清空"
        ref="typeTree"
        @cancel="resettingBtn()"
        @confirm="val => searchItem(val)"
        idKey="id"
        :range="typeList"
        rangeKey="name"
        confirmColor="#4e8af7"
        :selectParent="true"
      />
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      mobileTopHeight: 0,
      popupShow: false,
      listData: [],
      condition: {
        pageNo: 1,
        pageSize: 10,
        search: '', //搜索字段
        typeId: ''
      },
      checkItem: undefined,
      teach: true,
      typeList: [],
      userInfo: ''
    }
  },
  onLoad(option) {
    this.userInfo = JSON.parse(uni.getStorageSync('userInfo'))
    this.getSelectData()
  },
  mounted() {
    var that = this
    uni.getSystemInfo({
      success(res) {
        that.mobileTopHeight = res.statusBarHeight ? res.statusBarHeight : 0
        uni.setStorageSync('systemInfo', res)
        console.log(res)
      }
    })
    console.log('this.mobileTopHeight', this.mobileTopHeight)
  },
  onShow() {
    this.listData = []
    this.condition.pageNo = 1
    this.condition.pageSize = 10
    this.getListData()
  },
  //上拉触底时间
  onReachBottom() {
    if (this.teach) {
      this.condition.pageNo = this.condition.pageNo + 1
      // this.condition.pageNo = this.condition.pageNo;
      this.getListData()
    }
  },
  methods: {
    //重置
    resettingBtn() {
      this.listData = []
      this.condition.pageNo = 1
      this.condition.pageSize = 10
      this.getListData()
    },
    //点击筛选项
    searchItem(item, index) {
      let that = this
      that.condition.typeId = (item && item[0].id) || ''
      this.sendRequest({
        url: 'xmgl/urgentEventInfo/page',
        method: 'post',
        data: that.condition,
        success: res => {
          that.listData = []
          that.listNum = res.result.total
          let arr = JSON.parse(JSON.stringify(that.listData))
          if (res.result.records.length > 0) {
            let newArr = arr.concat(res.result.records)
            if (res.result.records.length < 10) {
              that.teach = false
            } else {
              that.teach = true
            }
            that.listData = newArr
          } else {
            that.teach = false
          }
        }
      })
    },
    //获取筛选数据
    getSelectData() {
      this.sendRequest({
        url: 'xmgl/urgentEventType/tree',
        method: 'post',
        data: {
          pageNo: -1,
          sn: JSON.parse(uni.getStorageSync('userInfo')).headquartersSn
        },
        success: res => {
          if (res.code == 200) {
            this.typeList = res.result.records
          }
        }
      })
    },
    //获取列表数据
    getListData() {
      let that = this
      this.sendRequest({
        url: 'xmgl/urgentEventInfo/page',
        method: 'post',
        data: that.condition,
        success: res => {
          that.listNum = res.result.total
          let arr = JSON.parse(JSON.stringify(that.listData))
          if (res.result.records.length > 0) {
            let newArr = arr.concat(res.result.records)
            if (res.result.records.length < 10) {
              that.teach = false
            } else {
              that.teach = true
            }
            that.listData = newArr
          } else {
            that.teach = false
          }
        }
      })
    },
    goDetails(obj) {
      uni.navigateTo({
        url: './details?id=' + obj.id + '&scenariosName=' + obj.scenariosName
      })
    }
  }
}
</script>

<style lang="scss">
.fixedheader {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 2;
  .headerName {
    z-index: 1;
  }
}
.line {
  width: 100%;
  height: 1px;
  background-color: #ccc;
  margin-top: 3%;
}

.screenDialog {
  position: absolute;
  // top: 11%;
  height: 95%;
  /* background: pink; */
  background: white;
  width: 100%;
  border-radius: 20px;
  margin-left: -4%;
  background-color: white;
  /* 设置为半透明的灰色 */
  z-index: 9;
  /* 设置一个较大的 z-index 值，保证遮罩层在最上层 */

  .closeIcon {
    float: right;
    font-size: 25px;
    color: gray;
    margin-right: 3%;
  }

  .screenTitle {
    text-align: center;
    margin-top: 4%;
    font-size: 18px;
    font-weight: 500;
  }

  .uni-popup__wrapper-box {
    height: 70vh;
    overflow: scroll;
    position: fixed;
    bottom: 0;
  }

  .screenContent {
    width: 100vw;
    height: 70%;
    // width: 90%;
    // margin: -65% 0%;
    overflow: scroll;
    // position: relative;
    // margin-top: 180%;
    border-radius: 20px 20px 0 0;
    // margin-left: -4%;
    background-color: white;
    // padding-left: 10%;
    position: fixed;
    left: 0;
    bottom: 0;

    .titleItem {
      font-size: 14px;

      .regionText {
        display: inline-block;
        margin-left: 16%;
        width: 190px;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
      }
    }
  }

  .screenItem {
    display: flex;
    flex-wrap: wrap;

    .screenI {
      width: 100px;
      font-size: 12px;
      height: 30px;
      background: #f7f8fa;
      border-radius: 15px;
      text-align: center;
      line-height: 30px;
      color: gray;
      margin: 5% 0;
    }

    .screenText {
      width: 90px;
      font-size: 12px;
      height: 30px;
      background: #f7f8fa;
      border-radius: 15px;
      text-align: center;
      line-height: 30px;
      color: #000;
      margin: 5% 5% 5% 0%;
    }

    .active {
      width: 90px;
      font-size: 12px;
      height: 30px;
      background: #edf2fe;
      border-radius: 15px;
      text-align: center;
      line-height: 30px;
      color: #000;
      margin: 5% 5% 5% 0%;
      border: 1px solid #5181f6;
    }

    .screenTextClose {
      width: 90px;
      font-size: 12px;
      height: 30px;
      text-align: center;
      line-height: 30px;
      color: #000;
      margin: 5% 5% 5% 0%;
    }
  }

  .footerBtn {
    display: flex;
    text-align: center;
    line-height: 40px;
    margin-top: 2%;
    margin-left: 6%;
    margin-right: 6%;
    .btn {
      width: 100%;
      background: #5181f6;
      height: 40px;
      border-radius: 20px;
      color: #fff;
    }
  }
}

.searchBox {
  background-color: white;
}

.uni-form-item {
  position: relative;
  display: flex;
  justify-content: flex-end;
  padding: 0 32rpx;
  font-size: 14px;
  /* .search-icon{
			position: absolute;
			top: 50%;
			right: 50rpx;
			transform: translateY(-50%);
		} */
}

.uni-input {
  border-radius: 20px;
  margin: 10px 10px;
  background-color: #f7f8fa;
  height: 35px;
  line-height: 30px;
  padding: 0 20px;
  font-size: 14px;
  width: 70%;
}

.screen {
  line-height: 50px;
  color: gray;
}

.picker {
  margin-bottom: 15px;
  margin-left: 100px;
  width: 164px;
  border: 1px solid #ccc;
  height: 30px;
  border-radius: 10px;
}

.flex {
  display: flex;
  align-items: center;
}

.flex2 {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.content {
  padding: 0px 30rpx 0;
  box-sizing: border-box;
  width: 100vw;
}

.item {
  // height: 160px;
  width: 100%;
  padding: 12px 30rpx;
  box-sizing: border-box;
  box-shadow: 0 0 10px rgba(194, 194, 194, 0.5);
  border-radius: 4px;
  margin-bottom: 15px;
  color: rgba(51, 51, 51, 1);
  font-size: 32rpx;
  font-family: PingFangSC-Medium;
}
.item_title {
  font-weight: 600;
  margin-bottom: 2px;
}

.item_content {
  width: 100%;
  font-size: 28rpx;
  color: rgba(51, 51, 51, 1);
  font-family: PingFangSC-Regular;
  line-height: 28px;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  color: #999;
  // &.mt {
  // 	margin-top: 16rpx;
  // }
}

.noData {
  text-align: center;
  font-size: 32rpx;
  margin-top: 120px;
  color: #bed0fb;
}

.noDataImg {
  width: 125px;
  height: 98px;
}

::v-deep .tki-tree-cnt {
  z-index: 99999;
  border-radius: 20px;
}

::v-deep .tki-tree-bar {
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
}

::v-deep .placeholder {
  padding-left: 40px;
}

.popupShow {
  overflow: hidden;
  position: fixed;
}
</style>
