<template>
  <transition name="slide">
    <div>
      <div class="index-container">
        <!--标题-->
        <mt-header class="header" title="布防撤防" fixed>
          <div slot="left">
            <mt-button icon="back" @click="$router.back(-1)"></mt-button>
          </div>
        </mt-header>
        <!--数据查询框-->
        <div class="search-div">
          <span class="search-select" @click="chooseBfzt">
            <span class="select-text">{{bfzt}}</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" ></Loading>
          <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,index) 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" :style="{color:item.bfzt=='0'?red:green}">{{item.bfztName}}</span>
                    </div>
                    <div class="card-position">
                      <span>{{item.position}}</span>
                    </div>
                  </div>
                  <div class="card-right">
                    <mt-button v-if="item.bfzt=='0'" size="small" class="bfbtn" @click.stop="bf(index,item.id)">布防</mt-button>
                    <mt-button v-if="item.bfzt=='1'" size="small" class="cfbtn" @click.stop="cf(index,item.id)">撤防</mt-button>
                    <mt-button type="default" size="small" @click.stop="goToMap(item)" plain>前往</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="bfztShow"
          popup-transition="popup-fade"
          :modal="showPopupModel"
          position="top">
          <ul>
            <li v-for="bfzt in bfztList" @click="search(bfzt)">
              {{bfzt.name}}
            </li>
          </ul>
        </mt-popup>
      </div>
    </div>
  </transition>
</template>

<script>
  import {MessageBox, Indicator, Toast} from 'mint-ui'
  import { getWellList, dict, bfcf } from '@/api/well'
  import { openMapWindow } from '@/utils/common'
  import Loading from '@/components/Loading'
  let isFromDetail = false
  export default {
    name: "WellBfcf",
    components: {Loading},
    data() {
      return {
        listQuery: {
          keywords: '',
          bfzt: '',
          offset: 1,
          limit: 10,
          sort: 'id',
          order: 'asc'
        },
        bfzt: '全部',
        bfztList: [],
        bfztShow: false,//是否显示选择窨井类型的popup
        showPopupModel: false, //是否显示模态框
        list: [],
        total: 50,
        isLoading: true,
        loadConf: {
          loadTopConf: {
            isFinish: false,  // 是否完成下拉
            topPullText: '下拉刷新',
            topDropText: '松开刷新',
            topLoadingText: '刷新中'
          },
          loadBottomConf: {
            isFinish: false,  // 是否完成上拉
            bottomPullText: '',
            bottomDropText: '释放获取内容',
            bottomLoadingText: '加载中',
            count: 1, // 模拟次数
          }
        },
        red:'#b8b8b8',
        green:'#13ad00'
      }
    },
    beforeRouteEnter(to, from, next) {
      if(from.name) {
        if (from.name.indexOf('wellDetail') == -1) {
          isFromDetail = false
        } else {
          isFromDetail = true
        }
      }else{
        isFromDetail = false
      }
      next()
    },
    mounted() {
      if(this.$route.query && this.$route.query.bfzt){
        this.listQuery.bfzt = this.$route.query.bfzt
        this.bfzt = this.$route.query.bfztName
      }
      this.fetchBfzt()
      this.loadTop()
    },
    activated(){
      console.log('activated')
      if (isFromDetail) { // 来自详情页面
        this.$refs.wrapper.scrollTop = this.$store.getters.pageYOffset;
      } else { // 滚动到最顶，数据初始化
        if(this.$route.query){
          if(this.listQuery.bfzt!=this.$route.query.bfzt){
            this.listQuery.bfzt = this.$route.query.bfzt
            this.bfzt = this.$route.query.bfztName
          }
        }
        this.loadTop()
      }
      this.bfztShow = false
    },
    methods: {
      loadTop() {
        this.bfztShow = false
        console.log('wellBfcfloadTop')
        this.isLoading = true
        this.$refs.loadmore.onTopLoaded()
        this.listQuery.offset=1
        this.loadConf.loadBottomConf.isFinish = false
        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() {
        this.bfztShow = false
        console.log('loadBottom')
        if (this.list.length >= this.total ) {
          this.loadConf.loadBottomConf.isFinish = true
          this.$refs.loadmore.onBottomLoaded();
        } else {
          getWellList(this.listQuery).then(response => {
            this.isLoading = false
            this.listQuery.offset+=1
            this.list = this.list.concat(response.data.rows)
            this.total = parseInt(response.data.total)
            this.$refs.loadmore.onBottomLoaded();
          })
        }

      },
      chooseBfzt() {
        this.bfztShow = !this.bfztShow
      },
      search(bfzt) {
        this.bfztShow = false
        this.listQuery.bfzt = bfzt.value
        this.bfzt = bfzt.name
        this.loadTop()
      },
      searchKeyWords(){
        this.bfztShow = false
        document.activeElement.blur();
        this.loadTop()
      },
      toWellDetail(wellInfo){
        this.bfztShow = false
        const id = wellInfo.id
        this.$store.commit('SET_PAGE_OFFSET', this.$refs.wrapper.scrollTop);
        this.$router.push({
          path :`/wellDetail/${id}`
        })
      },
      goToMap(wellInfo){
        this.bfztShow = false
        openMapWindow(wellInfo.lngGaode,wellInfo.latGaode,wellInfo.wellName)
      },
      bf(index, id){
        this.bfztShow = false
        MessageBox.confirm('确定将该井布防吗?').then(action => {
          if(action=='confirm'){
            bfcf(id,'1').then(response => {
              if(response.code==200){
                Toast({
                  message: '布防成功',
                  position: 'bottom',
                })
                this.list[index].bfzt = '1'
                this.list[index].bfztName='布防'
              }
            })
          }
        });
      },
      cf(index, id){
        this.bfztShow = false
        MessageBox.confirm('确定将该井撤防吗?').then(action => {
          if(action=='confirm'){
            bfcf(id,'0').then(response => {
              if(response.code==200){
                Toast({
                  message: '撤防成功',
                  position: 'bottom',
                })
                this.list[index].bfzt = '0'
                this.list[index].bfztName='撤防'
              }
            })
          }
        });
      },
      // 获取布防状态
      fetchBfzt() {
        dict("bfzt").then(response => {
          this.bfztList = response.data
          this.bfztList.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
      padding-bottom 10px
      padding 10px 2vw
      overflow: scroll;
      height: calc( 100vh - 90px  );
    }
    .list-li {
      margin-top 1vw;
      border 1px solid #f0f0f0
      background-color #ffffff
      min-height 90px
    }
    .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;
        .bfbtn {
          color: #ffffff;
          background-color: #13ad00;
          border 1px solid #13ad00

        }
        .cfbtn {
          color: #ffffff;
          background-color: #ff6f70;
          border 1px solid #ff6f70
        }
        .mint-button{
          margin-top: 10px
          margin-right:5px
        }
        .mint-button--default.is-plain{
          border: 1px solid #d9d9d9;
        }
      }
    }
    .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>
