<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">
      <div class="shoppings main-container">
        <div class="filter-container" ref="filter-container">
          <el-form :rules="rules4Query" ref="queryForm" style="display: flex;" :inline="inline" :model="listQuery">
            <el-select class="filter-item" style="width: 45%" v-model="listQuery.addrProvince" placeholder="请选择省份（直辖市）" @change='getValue'>
              <el-option :key="undefined" label="全部" :value="undefined"></el-option>
              <el-option v-for="item in provinceRegions" :key="item.id" :label="item.name" :value="item.id"></el-option>
            </el-select>
            <el-select class="filter-item" style="width: 45%;margin-left: 10px;" v-model="listQuery.addrCity" placeholder="请选择城市"  @change='getCompanyList'>
              <el-option :key="undefined" label="全部" :value="undefined"></el-option>
              <el-option v-for="item in cityRegions4Query" :key="item.id" :label="item.name" :value="item.id"></el-option>
            </el-select>
          </el-form>
        </div>
      </div>
      <!--营地分布图-->
      <company-map v-on:headCallBack="headCall"  v-if="toList" :toSonData="list" :provinceName="provinceName"></company-map>
      <!--营地数据-->
      <div v-infinite-scroll="loadMore" infinite-scroll-disabled="busy" infinite-scroll-distance="0">
        <div class="shoppings company-list"
             v-for="item in list"
             :key="item.key"
        >
          <div class="item-right-p company-item">
            <div class="ellipsis company-name">{{item.name}}</div>
            <p class="ellipsis">负责人：{{item.leader}}</p>
            <p>地址： {{item.address + item.addrDetail}}</p>
            <p class="ellipsis">电话：{{item.leaderContactInfo}}</p>
          </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;">
          ---暂无更多数据---
        </div>
        <div v-if="toList && !loading && list.length == 0" style="text-align: center;color: #999;padding: 10px;">
          ---暂无数据---
        </div>
      </div>
    </div>
  </div>
</template>
<style>
  .header-title {
    text-align: center;
    width: 100%;
  }
  .company-name{
    font-size: 16px;
    color: #333;
    font-weight: 600;
  }
  .company-item{
    border-bottom: 1px solid #ccc;
    padding: 5px 0;
  }
  .company-item p{
    font-size: 13px;
    color: #666;
    padding-left: 0 !important;
  }
</style>
<script>

  /*引入postcss-px2rem 通过require的形式*/
  //  var px2rem = require('postcss-px2rem');
  import {
    page
  } 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'

  export default {
    name: 'campsite',
    directives: {
      infiniteScroll
    },
    components: {
      BmMap,
      InfiniteLoading,
      companyMap},
    data() {
      return {
        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() {
      this.branchCompany_btn_edit = this.elements['branchCompany:btn_edit'];
      this.branchCompany_btn_del = this.elements['branchCompany:btn_del'];
      this.branchCompany_btn_add = this.elements['branchCompany:btn_add'];
    },
    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: {
      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();
      },
      /**
       * 深拷贝
       */
      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;
        page(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 = regions[0].name + ' ' + regions[1].name + ' ' + regions[2].name + ' ';
              }
              getRegionByCodes([...allRegions]);
            }
            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>
