<template>
  <div>
    <div class="header-css">
      <!--@click="$router.push({name:'mypoints'})"-->
      <!--<img @click="goBack()" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAAfCAYAAADqUJ2JAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTM4IDc5LjE1OTgyNCwgMjAxNi8wOS8xNC0wMTowOTowMSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTcgKFdpbmRvd3MpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjU0OTNGQTA2QTEwNTExRTg4M0E3OUI4RkYwRDg3RUU4IiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjU0OTNGQTA3QTEwNTExRTg4M0E3OUI4RkYwRDg3RUU4Ij4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6NTQ5M0ZBMDRBMTA1MTFFODgzQTc5QjhGRjBEODdFRTgiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6NTQ5M0ZBMDVBMTA1MTFFODgzQTc5QjhGRjBEODdFRTgiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz4bKBAsAAAAzklEQVR42qzWWQrCMBDG8VzCtVb01ZuIFJUq4nU8l+AlXEsFXz2CC+iXB2EYgjBL4P/6o4Qk0xD0q4G2aBSMyB590F2LNQkSe6OFFGmhA0PWUqSNjgxZWZEXWkqRDjpZkS46E+Sp2diIXAjyQKUUyRLIXIr0UMWQmQapGTKVInkCKaTIAF0ZMtEgN4aMNZdwR5DYRvskuH1RXEOPPfqtfgIrtFjucY5cTza9a5X1rv27uKUWc3mPXF9I+ma7YuYp4jrXXCet6+xP/o18BRgA2Nl6bmmSdvgAAAAASUVORK5CYII=" size="25" style="width: 15px; height: 20px; margin: 10px">-->
      <span class="header-title">营地列表</span>
    </div>
    <div class="main-container">
      <!--营地分布图-->
      <company-map v-on:headCallBack="headCall"  v-on:getAddrCity="getAddrCity" v-if="toList" :toSonData="type" :provinceName="provinceName"></company-map>
      <!--营地数据-->
      <div style="border-radius:5px 5px 0 0;background: #fff;position: absolute;bottom: 0px;width:100%;">
        <div style="text-align:center;padding:5px 0" @click="move">
          <img style="width: 10%;" :src="Height>=306?'../../../../static/images/top.png':'../../../../static/images/bottom.png'" alt="">
        </div>
        <div class="moveBox" id="moveDiv">
          <div class="moveBoxLeft" v-if="!otherProvince">
            <div class="moveBoxItem" :class="index==1?'active':''" @click.stop="quanguo">全国<div class="bage" v-show="index==1"></div></div>
            <div class="moveBoxItem" :class="index==2?'active':''" @click.stop="currentProvince">当前省<div class="bage" v-show="index==2"></div></div>
            <div class="moveBoxItem" :class="index==3?'active':''" @click.stop="currentCity">当前市<div class="bage" v-show="index==3"></div></div>
          </div>
          <div style="color:#999;font-size:13px" v-if="!otherProvince" @click.stop="showAddress">其他省市<span class="arrow-bottom"></span></div>
          <div class="moveBoxLeft" v-if="otherProvince" style="justify-content: space-between;">
            <div style="color:#171413;font-size:15px">{{provinceCity}}</div>
            <img width="15" src="../../../../static/images/close.png" alt="" @click.stop="close">
          </div>
        </div>
        <div v-infinite-scroll="loadMore" infinite-scroll-disabled="busy" infinite-scroll-distance="0" :style="{ height: 'calc(100vh - '+Height+'px)'}" style="overflow:hidden;overflow-y:scroll;">
          <div class="shoppings company-list" v-for="item in list" :key="item.key">
            <div class="item-right-p company-item" @click="gotoDeatil(item)">
              <img class="companyImg" :src="item.logo" alt="" srcset="">
              <div class="companyInforBox">
                <div class="company-name ellipsis2">{{item.name}}</div>
                <div class="companyInfor">
                  <div class="companyInforLeft">
                    <div>总经理：{{item.concat}}</div>
                    <div>电话：{{item.phone}}</div>
                  </div>
                  <a :href="'tel:'+item.phone" class="companyInforRight">拨打电话</a>
                </div>
              </div>
            </div>
            <div class="addressBox">
              <div class="addressLeft">
                <img width="11" height="16" style="margin-right:5px" src="../../../../static/images/local.png" alt="" srcset="">
                <div class="ellipsis" style="color:#666;font-size:11px;vertical-align: 2px;width:200px">{{item.address}}</div>
              </div>
              <div class="addressRight" @click="openAddress(item)">
                <img width="15" src="../../../../static/images/go.png" alt="" srcset="">
                <span style="color:#666;font-size:11px;padding-left:5px;vertical-align: 2px;">到这去</span>
              </div>
            </div>
          </div>
          <infinite-loading v-show="loading" spinner="spiral" style="margin-top:2em" ref="sroller">
          </infinite-loading>
          <div v-if="nomore && !loading" style="text-align: center;color: #999;padding: 10px;color:#999;font-size:12px">
            没有更多啦~~
          </div>
          <div v-if="toList && !loading && list.length == 0" style="text-align: center;color: #999;padding: 10px;">
            <img src="../../../../static/images/noThing.png" alt="" srcset="" style="width:50%">
            <div style="color:#999;font-size:12px">当前地区暂无营地</div>
          </div>
        </div>
      </div>
    </div>
    <Address v-on:cancel="cancel" v-on:complete="complete" v-if="addressShow"></Address>
  </div>
</template>
<style>
  .header-title {
    text-align: center;
    width: 100%;
  }
  .company-name{
    font-size: 15px;
    color: #171413;
    font-weight: 500;
  }
  .company-list{
    border-bottom: 1px solid #EEEEEE;
  }
  .company-item{
    padding: 15px 15px 0 15px;
    display: flex;
    display: -webkit-box;
    display: -webkit-flex;
    align-items: center;
  }
  .moveBoxItem{margin-right: 30px;position: relative;}
  .bage{position: absolute;width: 18px;height: 3px;border-radius: 5px;background: #C1A170;left: 50%;transform: translateX(-50%);bottom: -5px}
  .arrow-top{margin-left: 5px;vertical-align: 6px;font-size: 0;line-height: 0;border-width: 4px;border-color: #999;border-top-width: 0;border-style: dashed;border-bottom-style: solid;border-left-color: transparent;border-right-color: transparent;}
  .arrow-bottom{margin-left: 5px;vertical-align: 2px;font-size: 0;line-height: 0;border-width: 4px;border-color: #999;border-bottom-width: 0;border-style: dashed;border-top-style: solid;border-left-color: transparent;border-right-color: transparent;}
  .companyImg{width: 95px;height: 75px;border-radius: 5px;margin-right: 10px}
  .companyInforBox{flex: 1;border-bottom: 1px solid #eee;display: flex;display: -webkit-box;display: -webkit-flex;flex-flow: column;}
  .companyInfor{display: flex;display: -webkit-box;display: -webkit-flex;justify-content: space-between;align-items: center;margin: 10px 0;}
  .companyInforLeft{flex:1;color: #666666;font-size: 12px}
  .companyInforRight{height: 27px;border-radius: 15px;background: #D1B17E;color: #fff;font-size: 12px;line-height: 29px;padding: 0 15px}
  .moveBox{width: 100%;padding: 10px 15px 5px 15px;display: flex;display: -webkit-box;display: -webkit-flex;justify-content: space-between;align-items: center;border-bottom: 1px solid #eee;}
  .moveBoxLeft{flex: 1;display: flex;display: -webkit-box;display: -webkit-flex;font-size: 13px;color: #666;align-items: center}
  .moveBoxLeft .active{font-size: 15px;color: #171413}
  .addressBox{display: flex;justify-content: space-between;align-items: center;padding: 5px 15px}
  .addressLeft{flex: 1;display: flex;}
  a:focus, a:hover{color: #fff}
  /* .addressRight{display: flex;} */
</style>
<script>

  /*引入postcss-px2rem 通过require的形式*/
  //  var px2rem = require('postcss-px2rem');
  import {
    allPage
  } from 'api/base_info/campsite';
  import chinaMap from '../companyInfo/chinaMap';
  import companyMap from "../companyInfo/companyMap";

  import {
    getSonRegionByCodes,
    getRegionByCodes,
  } from 'api/base_info/region/';

  import {mapGetters} from 'vuex';
  import BmMap from "../../../../node_modules/vue-baidu-map/components/map/Map.vue";

  import infiniteScroll from 'vue-infinite-scroll'
  import InfiniteLoading from 'vue-infinite-loading'
  import Address from "../../../components/address/index.vue";
  export default {
    name: 'campsite',
    directives: {
      infiniteScroll
    },
    components: {
      BmMap,
      InfiniteLoading,
      companyMap,
      Address},
    data() {
      return {
        flags: false,
        position: { x: 0, y: 0 },
        nx: '', ny: '', dx: '', dy: '', xPum: '', yPum: '',
        Height:406,
        otherProvince:false,
        provinceCity:'',
        addrCity:undefined,
        addrProvince:undefined,
        addressShow:false,
        index:1,
        isCityActive:false,
        type: "campsite",
        toList: false,
        nodata: false,
        nomore:false,
        loading: false,
        form: {
          id: undefined,
          name: undefined,
          status: undefined,
          addrProvince: undefined,
          addrCity: undefined,
          addrTown: undefined,
          addrDetail: undefined,
          leader: undefined,
          leaderContactInfo: undefined,
          updateTime: undefined
        },
        rules: {
          status: [
            {
              type: 'integer',
              required: true,
              message: '请输名称',
              trigger: 'blur'
            }
          ],
          name: [
            {
              required: true,
              message: '请输名称',
              trigger: 'blur'
            },
            {
              min: 0,
              max: 200,
              message: '长度小于 200 个字符',
              trigger: 'blur'
            }
          ],
          addrDetail: [
            {
              required: true,
              message: '请输入详细地址',
              trigger: 'blur'
            },
            {
              min: 0,
              max: 200,
              message: '长度小于 200 个字符',
              trigger: 'blur'
            }
          ],
          addrProvince: [
            {
              required: true,
              type: 'number',
              message: '请选择省份',
              trigger: 'blur'
            }
          ],
          addrCity: [
            {
              required: true,
              type: 'number',
              message: '请选择城市',
              trigger: 'blur'
            },
            {
              validator: (rule, value, callback) => {
                if (this.$utils.isInteger(this.form.addrProvince) &&
                  value.toString().substr(0, 2) != this.form.addrProvince.toString().substr(0, 2)) {
                  return callback(new Error('请选择省份下相应城市'));
                }
                callback();
              },
              trigger: 'blur'
            }
          ],
          addrTown: [
            {
              required: true,
              type: 'number',
              message: '请选择镇(县)',
              trigger: 'blur'
            },
            {
              validator: (rule, value, callback) => {
                if (this.$utils.isInteger(this.form.addrCity) &&
                  value.toString().substr(0, 4) != this.form.addrCity.toString().substr(0, 4)) {
                  return callback(new Error('请选择城市下相应镇（县）'));
                }
                callback();
              },
              trigger: 'blur'
            }
          ]
        },
        rules4Query: {
          addrCity: [
            {
              validator: (rule, value, callback) => {
                if (this.$utils.isUndefined(value)) {
                  return callback();
                }
                if (this.$utils.isInteger(this.listQuery.addrProvince) &&
                  value.toString().substr(0, 2) !== this.listQuery.addrProvince.toString().substr(0, 2)) {
                  return callback(new Error('请选择省份下相应城市'));
                }
                callback();
              },
              trigger: 'blur'
            }
          ]
        },
        list: [],
        total: null,
        listLoading: true,
        page: 1,
        listQuery: {
          limit: 10,
          addrProvince: undefined,
          addrCity: undefined,
          addrTown: undefined
        },
        inline: true,
        dialogFormVisible: false,
        dialogStatus: '',
        branchCompany_btn_edit: false,
        branchCompany_btn_del: false,
        branchCompany_btn_add: false,
        textMap: {
          update: '编辑',
          create: '创建'
        },
        provinceName: "",
        tableKey: 0,
        send: !1,//是否已发送请求
        nomore: false
      }
    },
    created() {

    },
    computed: {
      ...mapGetters([
        'elements',
        'companyStatusAndCode'
      ]),
      provinceRegions() {
        return getSonRegionByCodes(1);
      },
      cityRegions() {
        if (!this.$utils.isInteger(this.form.addrProvince)) {
          return null;
        }
        return getSonRegionByCodes(this.form.addrProvince);
      },
      townRegions() {
        if (!this.$utils.isInteger(this.form.addrCity)) {
          return null;
        }
        return getSonRegionByCodes(this.form.addrCity);
      },
      cityRegions4Query() {
        if (!this.$utils.isInteger(this.listQuery.addrProvince)) {
          return null;
        }
        return getSonRegionByCodes(this.listQuery.addrProvince);
      },
      townRegions4Query() {
        if (!this.$utils.isInteger(this.listQuery.addrCity)) {
          return null;
        }
        return getSonRegionByCodes(this.listQuery.addrCity);
      }
    },
    methods: {
      gotoDeatil(item){
        window.location.href='https://mgmt.dfangche.com/h5/appHtml/view/campsiteDetail.html?id='+item.id+'&longitude='+item.longitude+'&latitude='+item.latitude
      },
      openAddress(obj){
        window.location.href='http://api.map.baidu.com/marker?location='+obj.latitude+','+obj.longitude+'&title='+obj.address+'&content='+obj.address+'&output=html&src=webapp.baidu.openAPIdemo'
      },
      move(){
        if(this.Height==406){
          this.Height=136
        }else{
          this.Height=406
        }
      },
    //鼠标释放时候的函数
      end(){
        this.flags = false;
      }, 
      close(){
        this.otherProvince = false
        this.quanguo()
      },
      quanguo(){
        this.index=1
        this.listQuery.addrProvince = undefined
        this.listQuery.addrCity = undefined
        this.getList();
      },
      currentProvince(){
        this.index=2
        this.listQuery.addrProvince = this.addrProvince
        this.listQuery.addrCity = undefined
        this.getList();
      },
      currentCity(){
        this.index=3
         this.listQuery.addrProvince = this.addrProvince
        this.listQuery.addrCity = this.addrCity
        this.getList();
      },
      showAddress(){
        this.addressShow = true
      },
      cancel(){
        this.addressShow = false
        this.isCityActive = false
      },
      complete(e){
        console.log(e)
        this.provinceCity = e.provinceName+' - '+e.cityName
        this.listQuery.addrProvince = e.provinceId
        this.listQuery.addrCity = e.cityId
        this.addressShow = false
        this.otherProvince = true
        this.getList();
      },
      getCompanyList(e){
        let that = this;
        this.provinceRegions.map(function(item){
          if(item.id == that.listQuery.addrProvince){
            that.provinceName = item.name;
          }
        });
        this.getList();
      },
      getValue(e){
        let that = this;
        if(!e){
          //全部
          that.provinceName = "兰州";
        }
        this.listQuery.addrCity = undefined;
        this.provinceRegions.map(function(item){
          if(item.id == that.listQuery.addrProvince){
            that.provinceName = item.name;
          }
        });
        this.getList();
      },
      headCall: function (msg) { //回调方法，接收子组件传的参数
        this.listQuery.addrProvince = msg;
        this.getList();
      },
      getStatusName(code) {
        if (!this.$utils.isInteger(code)) {
          return '未知';
        }
        return this.companyStatusAndCode[code].val;
      },
      getList(){
        this.page = 1;
        this.list = [];
        this.nomore = false;
        this.loadMore();
      },
      getAddrCity(e){
        this.addrCity = e
        this.addrProvince = e.substr(0,2)+'0000'
      },
      /**
       * 深拷贝
       */
      objDeepCopy (source) {
        var sourceCopy = source instanceof Array ? [] : {};
        for (var item in source) {
          sourceCopy[item] = typeof source[item] === 'object' ? objDeepCopy(source[item]) : source[item];
        }
        return sourceCopy;
      },
      loadMore: function() {
        let that = this;
        if(this.nomore){
          return;
        }
        if(this.send){
          return;
        }
        this.busy = true;
        this.loading = true;
        let params = this.objDeepCopy(this.listQuery);//深拷贝
        params.page = this.page++;
        this.send = !0;
        allPage(params)
          .then(res => {
            this.loading = false;
            let allList = [];
            let listTemp = res.data.data;
            //一次读入所有涉及地区，防止多次读取
//             if (!this.$utils.isEmpty(listTemp)) {
//               let allRegions = new Set();
//               for (let index in listTemp) {
//                 allRegions.add(listTemp[index].addrProvince);
//                 allRegions.add(listTemp[index].addrCity);
//                 allRegions.add(listTemp[index].addrTown);
//                 let regions = getRegionByCodes([listTemp[index].addrProvince, listTemp[index].addrCity, listTemp[index].addrTown]);
//                 // listTemp[index].address = "";
//                 for(let i = 0; i < regions.length; i++){
//                   listTemp[index].address += regions[i].name + " ";
//                 }
// //                listTemp[index].address = regions[0].name + ' ' + regions[1].name + ' ' + regions[2].name + ' ';
//               }
//               getRegionByCodes([...allRegions]);
//             }
            if(res.data.data){
              res.data.data.forEach(function (item) {
                allList.push(item);
              });
              if(res.data.data.length< this.listQuery.limit && this.list.length>0){
                //已加载全部
                this.nomore = true;
              }
            }
            this.list = [...this.list, ...allList];
            this.send = !1;
            this.toList = true;
          });
        this.busy = false;
      },
      getAddrStr(branchCompany) {
        let regions = getRegionByCodes([branchCompany.addrProvince, branchCompany.addrCity, branchCompany.addrTown]);
        return regions[0].name + ' ' + regions[1].name + ' ' + regions[2].name + ' ';
      },
    },
    mounted() {
    }
  }
</script>
