<template>
  <transition name="slide">
    <div>
      <div class="index-container">
        <!--标题-->
        <mt-header class="header" title="闸井管理" fixed>
        </mt-header>
        <!--数据查询框-->
        <div class="search-div">
          <span class="search-select" @click="chooseWellType">
            <span class="select-text">{{wellType}}</span>
            <i slot="icon" class="iconfont icon-31xiala"/>
          </span>
              <span>
            <mt-search
              v-model.trim="listQuery.keywords"
              placeholder="闸井编号/位置"
              @keyup.enter.native="searchKeyWords"
            />
          </span>
              <div class="clear-float"></div>
        </div>
        <!--列表主体-->
        <div class="listbody" ref="wrapper">
          <Loading v-show="isLoading"/>
          <mt-loadmore
            :top-method="loadTop"
            :topPullText="loadConf.loadTopConf.topPullText"
            :topDropText="loadConf.loadTopConf.topDropText"
            :topLoadingText="loadConf.loadTopConf.topLoadingText"
            :bottom-method="loadBottom"
            :bottomAllLoaded="loadConf.loadBottomConf.isFinish"
            :bottomPullText="loadConf.loadBottomConf.bottomPullText"
            :bottomDropText="loadConf.loadBottomConf.bottomDropText"
            :bottomLoadingText="loadConf.loadBottomConf.bottomLoadingText"
            ref="loadmore"
            class="loadmore-content"
          >
            <ul class="list-ul">
              <li class="list-li" v-for="item in list" @click="toWellDetail(item)">
                <div class="well-card">
                  <div class="card-left">
                    <div>
                      <span class="card-wellcode">{{item.wellCode}}</span>
                      <span class="card-welltype">{{item.wellTypeName}}</span>
                      <span class="card-bfzt">{{item.bfztName}}</span>
                    </div>
                    <div class="card-position">
                      <span>{{item.position}}</span>
                    </div>
                  </div>
                  <div class="card-right">
                    <mt-button type="primary" size="small" @click.stop="goToMap(item)">前往</mt-button>
                  </div>
                  <div class="clear-float"></div>
                </div>
              </li>
            </ul>
            <div class="no-content" v-show="loadConf.loadBottomConf.isFinish">已经到底了</div>
          </mt-loadmore>
        </div>
        <!--闸井类型弹出框-->
        <mt-popup
          class="welltype-popup"
          v-model="wellTypeShow"
          popup-transition="popup-fade"
          :modal="showPopupModel"
          position="top">
          <ul>
            <li v-for="wellType in wellTypeList" @click="search(wellType)">
              {{wellType.name}}
            </li>
          </ul>
          <!--<mt-button type="default" v-for="wellType in wellTypeList" @click="search(wellType)">-->
            <!--{{wellType.name}}-->
          <!--</mt-button>-->
        </mt-popup>
        <tabbottom activeTabItem="WELL"/>
      </div>
    </div>
  </transition>
</template>

<script>
  import { getWellList, getWellType } from '@/api/well'
  import { openMapWindow } from '@/utils/common'
  import Loading from '@/components/Loading'
  let isFromDetail = false

  export default {
    name: "WellManage",
    components: {Loading},
    data() {
      return {
        listQuery: {
          keywords: '',
          wellType: '',
          offset: 1,
          limit: 10,
          sort: 'id',
          order: 'asc'
        },
        wellType: '全部',
        wellTypeList: [],
        wellTypeShow: false,//是否显示选择闸井类型的popup
        showPopupModel: false, //是否显示模态框
        list: [],
        total: 50,
        loadConf: {
          loadTopConf: {
            isFinish: false,  // 是否完成下拉
            topPullText: '下拉刷新',
            topDropText: '松开刷新',
            topLoadingText: '刷新中'
          },
          loadBottomConf: {
            isFinish: false,  // 是否完成上拉
            bottomPullText: '',
            bottomDropText: '释放获取内容',
            bottomLoadingText: '加载中',
            count: 1, // 模拟次数
          }
        },
        isLoading:true,
        isFromDetail: false,
        bigImageVisible:false,//是否显示大图
        bigImageSrc:'',//大图图片路径
      }
    },
    mounted() {
      this.fetchWellType()
      this.loadTop()
    },
    beforeRouteEnter(to, from, next) {
      if(from.name) {
        if (from.name.indexOf('wellDetail') == -1) {
          isFromDetail = false
        } else {
          isFromDetail = true
        }
      }else{
        isFromDetail = false
      }
      next()
    },
    activated(){
      if (isFromDetail) { // 来自详情页面
        this.$refs.wrapper.scrollTop = this.$store.getters.pageYOffset;
      } else { // 滚动到最顶，数据初始化
        this.list = []
        this.isLoading = true
        this.loadTop()
        this.$refs.wrapper.scrollTop = 0
      }
      this.wellTypeShow = false
    },
    methods: {
      loadTop() {
        console.log('wellManageloadTop')
        this.$refs.loadmore.onTopLoaded();
        this.loadConf.loadBottomConf.isFinish = false
        this.isLoading = true
        this.listQuery.offset=1
        getWellList(this.listQuery).then(response => {
          this.listQuery.offset += 1
          this.list = response.data.rows
          this.total = parseInt(response.data.total)
          this.isLoading = false
          if (this.list.length >= this.total) {
            this.loadConf.loadBottomConf.isFinish = true
            this.$refs.loadmore.onBottomLoaded();
          }
        })
      },
      loadBottom() {
        console.log('loadBottom')
        this.wellTypeShow = false
        if (this.list.length >= this.total ) {
          this.loadConf.loadBottomConf.isFinish = true
          this.$refs.loadmore.onBottomLoaded();
        } else {
          getWellList(this.listQuery).then(response => {
            this.listQuery.offset+=1
            this.list = this.list.concat(response.data.rows)
            this.total = parseInt(response.data.total)
            this.$refs.loadmore.onBottomLoaded()
            this.isLoading = false
          })
        }
      },
      chooseWellType() {
        this.wellTypeShow = !this.wellTypeShow
      },
      search(wellType) {
        this.wellTypeShow = false
        this.wellTypeShow = false
        this.listQuery.wellType = wellType.value
        this.wellType = wellType.name
        this.loadTop()
      },
      searchKeyWords(){
        this.wellTypeShow = false
        document.activeElement.blur();
        this.loadTop()
      },
      toWellDetail(wellInfo){
        this.wellTypeShow = false
        const id = wellInfo.id
        this.$store.commit('SET_PAGE_OFFSET', this.$refs.wrapper.scrollTop);
        this.$router.push({
          path :`/wellDetail/${id}`
        })
      },
      goToMap(wellInfo){
        this.wellTypeShow = false
        openMapWindow(wellInfo.lngGaode,wellInfo.latGaode,wellInfo.wellName)
      },
      // 获取闸井类型
      fetchWellType() {
        getWellType(this.listQuery).then(response => {
          this.wellTypeList = response.data
          this.wellTypeList.unshift({name:'全部',value:''})
        })
      }

    }
  }
</script>
<style lang="stylus" rel="stylesheet/stylus" scoped>
  .index-container {
    .search-div {
      position: fixed
      z-index: 100
      top: 40px
      .search-select {
        float left
        width: 22vw
        height: 50px
        line-height: 50px
        text-align center
        background-color #d9d9d9
        .select-text {
          margin-left 5px
        }
      }
      .mint-search {
        float left
        width 78vw
        height 50px
        .mint-searchbar {
          padding 3px 5px
        }
      }
      .mint-search .mint-searchbar {
        padding: 3px 5px
      }
      .mint-searchbar-inner {
        height fit-content
      }
    }
    .listbody {
      margin-top 95px
      margin-bottom 50px
      padding 10px 2vw
      overflow: scroll;
      height: calc( 100vh - 135px  );
    }
    .list-li {
      margin-top 1vw;
      border 1px solid #f0f0f0
      background-color #ffffff
      min-height 80px
    }
    .well-card {
      .card-left {
        width 70%
        float left
        padding 10px 15px
        .card-wellcode {
          margin-top 5px
          font-size: 1.2rem
          font-weight 600
        }
        .card-welltype {
          margin-left 10px
          font-size: 0.8rem
        }
        .card-bfzt {
          margin-left 10px
          font-size 0.8rem
          color #13ad00
        }
        .card-position {
          margin-top 10px
          font-size 0.8rem
          line-height 1.1rem
          color #646464
        }
      }
      .card-right {
        height: 100%
        width 20%
        padding-top: 23px
        float: left
        text-align right
        .mint-button{
          /*margin-top: 10px*/
          margin-right:5px
        }
      }
    }
    .welltype-popup {
      top: 90px
      width 90px
      left:50px
      background-color rgba(0, 0, 0, 0.7)
      border-radius 5px
      color: #ffffff
      ul{
        li{
          margin:0px 0px 0px 0px
          padding:15px 0px 15px 15px
        }
      }
      .mint-button {
        margin: 0.8rem 0.5rem
        font-size: 0.9rem
        height: 1.8rem
      }
    }
    .no-content {
      text-align center
      height 40px
      line-height 40px
    }
  }

</style>