<template>
  <div class="category">
    <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="filter-container addressSelectBox" ref="filter-container">
      <div class="city" @click="showAddress">{{provinceCity}}<span :class="isCityActive?'arrow-top':'arrow-bottom'"></span></div>
      <div class="cityBage" v-show="index==1"></div>
      <div class="price" @click="showPrice">
        {{this.listQuery.priceStart?this.listQuery.priceStart:'股价'}}
        <span :class="isPriceActive?'arrow-top':'arrow-bottom'">
          <div class="bage" v-show="index==2"></div>
        </span>
      </div>
    </div>
    <div class="shoppings main-container" style="background:#fff" :class="{'addressActive':addressShow }">
      <div class="shoppings" style="background:#fff;margin-top: 90px;">
        <div class="all">
          <div class="goods">
            <div v-infinite-scroll="loadMore" infinite-scroll-disabled="busy" infinite-scroll-distance="0">
              <div class="order-item" v-for="item in list" :key="item.key" @click="view(item.companyBaseId, item.id, item.companyName)">
                <div class="item-right-p flex-jcc-aic">
                  <div style="width: 95px;height: 75px;">
                    <img :src="item.cover" style="width: 100%;height:100%;border-radius: 10px;"/>
                  </div>
                  <div style="padding-left: 10px;width: 100%;justify-content: space-between;flex-flow: column;display: -webkit-box;display: flex;height: 75px;">
                    <div style="line-height: 20px;font-size:15px;color:#171413" class="ellipsis2">{{item.companyName}}</div>
                    <div class="ft20">￥<span style="font-size:20px;color:#F9615C">{{item.price}}</span>万/股</div>
                  </div>
                </div>
                <div class="flex-jcb-aic">
                  <div style="position: relative;background: #EBEBEB;height: 3px;width:calc(100% - 40px)">
                    <div :style="{width:item.width}" class="last-css"></div>
                    <img v-if="item.width.substring(0,item.width.length-1)>0" src="../../../../static/images/mark.png" style="position: relative;width: 10.1px;top: -13px" :style="{left:(item.width.substring(0,item.width.length-1)-2)+'%'}" alt="">
                  </div>
                  <div class="ft12">余{{item.balance}}股</div>
                </div>
              </div>
              <div v-show="!loading" style="color: #999;justify-content: center;text-align: center;" v-if="list.length<=0">---暂无数据---</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>
        </div>
      </div>
    </div>
    <Address v-on:cancel="cancel" v-on:complete="complete" v-if="addressShow"></Address>
    <pricePick v-on:pricePickcancel="pricePickcancel" v-on:pricePickcomplete="pricePickcomplete" v-if="priceShow"></pricePick>
  </div>
</template>
<script>
  import infiniteScroll from 'vue-infinite-scroll'
  import InfiniteLoading from 'vue-infinite-loading'
  import {
    stockSearchPage,
    creatCrowd,
    getAllStockPrice
  } from 'api/base_info/branch_company';
  import {
    getSonRegionByCodes,
    getRegionByCodes,
  } from 'api/base_info/region/';

  import {mapGetters} from 'vuex';
  import ElForm from "../../../../node_modules/element-ui/packages/form/src/form.vue";
  import ElFormItem from "../../../../node_modules/element-ui/packages/form/src/form-item.vue";
  import ElButton from "../../../../node_modules/element-ui/packages/button/src/button.vue";
  import Address from "../../../components/address/index.vue";
  import pricePick from "../../../components/pricePick/index.vue";
  export default {
    components: {
      ElButton,
      ElFormItem,
      ElForm,
      InfiniteLoading,
      Address,
      pricePick
    },
    name: 'stockCrowd',
    directives: {
      infiniteScroll
    },
    computed: {
      ...mapGetters([
        'elements',
        'companyStatusAndCode'
      ]),
      provinceRegions() {
        return getSonRegionByCodes(1);
      },
      cityRegions() {
        if (!this.$utils.isInteger(this.form.addrProvince)) {
          return null;
        }
        return getSonRegionByCodes(this.form.addrProvince);
      },
      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);
      }
    },
    data() {
      return {
        isCityActive:false,
        isPriceActive:false,
        index:0,
        priceShow:false,
        provinceCity:'省-市',
        addressShow:false,
        inline: true,
        page: 1,
        loading: false,
        list: [],
        allStockPrice: null,
        listQuery: {
          limit: 6,
          priceStart: undefined,
          priceEnd: undefined,
          addrProvince: undefined,
          addrCity: undefined,
          addrTown: undefined
        },
        nomore: false
      }
    },
    created() {
      this.getAllStockPrice();//获取股价列表
    },
    methods: {
      showPrice(){
        this.index=2
        this.isCityActive = false
        this.isPriceActive = true
        this.addressShow = false
        this.priceShow = true
      },
      showAddress(){
        this.index=1
        this.isCityActive = true
        this.isPriceActive = false
        this.priceShow = false
        this.addressShow = true
      },
      cancel(){
        this.addressShow = false
        this.isCityActive = false
      },
      pricePickcancel(){
        this.priceShow = false
        this.isPriceActive = 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.isCityActive = false
        this.getList();
      },
      pricePickcomplete(e){
        console.log(e)
        this.listQuery.priceStart = e
        this.priceShow = false
        this.isPriceActive = false
        this.getList();
      },
      //获取股价列表
      getAllStockPrice() {
        let that = this;
        getAllStockPrice()
          .then(response => {
            let arr = [];
            response.data.map(function(item){
              item = item / 10000+"万";
              arr.push(item);
            });
            that.allStockPrice = arr;
          });

      },
      /**
       * 选择省份
       * @param e
       */
      getValue(e) {
        this.listQuery.addrCity = undefined;
      },
      /**
       * 选择股价开始价格
       * @param target
       */
      getStartValue() {
        this.listQuery.priceEnd = this.listQuery.priceStart;
//        if(this.listQuery.priceStart){
//          this.listQuery.priceEnd = this.listQuery.priceStart.substring(0,this.listQuery.priceStart.length-1)*10000;
//          this.listQuery.priceStart = this.listQuery.priceStart.substring(0,this.listQuery.priceStart.length-1)*10000;
//        } else {
//          this.listQuery.priceEnd = this.listQuery.priceStart;
//        }

        // if (this.listQuery.priceStart >= this.listQuery.priceEnd) {
        //   this.listQuery.priceEnd = undefined;
        // }
      },
      /**
       * 选择股价结束价格
       * @param target
       */
      getEndValue() {
        if (this.listQuery.priceStart >= this.listQuery.priceEnd) {
          this.listQuery.priceStart = undefined;
        }
      },
      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;
        }
        this.busy = true;
        this.loading = true;
        let params = this.objDeepCopy(this.listQuery);//深拷贝
        if(this.listQuery.priceStart){
          params.price = that.listQuery.priceStart.substring(0,that.listQuery.priceStart.length-1);
          // params.priceEnd = that.listQuery.priceStart.substring(0,that.listQuery.priceStart.length-1)*10000;
        }
        params.page = this.page++;
        stockSearchPage(params)
          .then(res => {
            this.loading = false;
            let allList = [];
            res.data.data.forEach(function (item) {
              // item.price = item.price / 10000;
              item.width = (item.total - item.balance) / item.total * 100 + "%";
              // item.companyPic = "https://mgmt.dfangche.com/vehicle/branchCompany/stock/download/companyPic?realFileRelPath=" + item.companyPic;
              allList.push(item);
            });
            if(res.data.data.length< this.listQuery.limit && allList.length>0){
              //已加载全部
              this.nomore = true;
            }
            this.list = [...this.list, ...allList];
          });
        this.busy = false;
      },
      view(id, stockRightId, name) {
         this.$router.push({path: '/companyDetail?id=' + id+'&showFixedBox=1&stockRightId='+stockRightId})
        // this.$router.push({path: '/stockCrowdDetail?id=' + id})
      },
      search: function() {
        this.goods = false
      },
      shop: function() {
        this.goods = true
      },
      /**
       * 获取股权列表数据
       */
      infiniteHandler: async function($state) {
      }
    }
  }
</script>
<style>
  .header-title {
    text-align: center;
    width: 100%;
  }
  .last-css {
    position: relative;
    background: #C0A170;
    height: 3px;
  }

  .flex-jcc-aic {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    width: 100%
  }

  .flex-jcb-aic {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    margin-top: 8px;
  }

  .ft20 {
    margin-top: 10px;
    font-size: 12px;
    color: #666666;
  }

  .ft12 {
    font-size: 12px;
    color: #999999;
  }

  .order-item {
    /* display: flex; */
    align-items: center;
    padding: 15px;
    width: 100%;
    border-radius: 5px;
    box-shadow:0px 5px 15px rgba(153,153,153,0.3);
    margin-bottom: 15px
  }

  .el-form--inline .el-form-item__content {
    display: flex;
    margin-bottom: 0 !important;
  }
  .goods{padding: 0 15px}
  .cityBage{position: absolute;width: 18px;height: 3px;border-radius: 5px;background: #C1A170;left: 21%;bottom: -1px}
  .bage{position: absolute;width: 18px;height: 3px;border-radius: 5px;background: #C1A170;left: 50%;transform: translateX(-100%);bottom: -11px}
  .city{position: relative;flex:1;overflow: hidden;white-space: nowrap;text-overflow:ellipsis;word-wrap:break-word;word-break:break-all;color:#333;font-size:15px;}
  .price{position: relative;flex:1;border-left:1px solid #e1e1e1;color:#333;font-size:15px}
  .addressActive{overflow: hidden;}
  .addressSelectBox{position: fixed;top: 42px;background: #fff;z-index: 999;width:100%;padding:10px 0;display:flex;align-items: center;text-align: center;border-bottom:1px solid #e1e1e1}
  .arrow-top{margin-left: 5px;vertical-align: 6px;font-size: 0;line-height: 0;border-width: 4px;border-color: #333;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: #333;border-bottom-width: 0;border-style: dashed;border-top-style: solid;border-left-color: transparent;border-right-color: transparent;}
</style>
