<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" style="position: fixed;padding-left:10px;top: 42px;padding-top:10px;background: #fff;z-index: 999;" ref="filter-container">
      <el-form ref="queryForm" :inline="inline" :model="listQuery">
        <el-form-item style="margin-bottom: 3px;">
          <el-select class="filter-item" style="width: 45%;margin-right: 10px;" 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%;" v-model="listQuery.addrCity" placeholder="请选择城市">
            <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-item>
        <el-form-item style="margin-bottom: 3px;">
          <el-select class="filter-item" style="width: 70%;margin-right: 10px;" v-model="listQuery.priceStart"
                     placeholder="股价" @change='getStartValue'>
            <el-option :key="undefined" label="全部" :value="undefined"></el-option>
            <el-option v-for="item in allStockPrice" :key="item.id" :label="item.name" :value="item"></el-option>
          </el-select>
          <el-button @click="getList()" style="height: 35px;margin-left: 10px;">搜索</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="shoppings main-container">

      <div class="shoppings" style="margin-top: 155px;">
        <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.id, item.companyName)"
              >
                <div class="item-right-p flex-jcc-aic">
                  <div style="width: 178px;height: 100px;">
                    <img :src="item.companyPic" style="width: 100%;height:100%;border-radius: 10px;"/>
                  </div>
                  <div style="height: 100px;padding-left: 10px;width: 100%;">
                    <div style="line-height: 20px;" class="ellipsis2">{{item.companyName}}</div>
                    <div class="flex-jcb-aic">
                      <div
                        style="position: relative;background: #ccc;border-radius: 10px;height: 10px;width: 100px;margin-right: 20px;">
                        <div :style="{width:item.width}" class="last-css"></div>
                      </div>
                      <div class="ft12">剩余:{{item.balance}}股</div>
                    </div>
                    <div class="ft20">￥{{item.price}}w/股</div>
                  </div>
                </div>
              </div>
              <div class="order-item" v-show="!loading" style="color: #999;justify-content: 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>
  </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";
  export default {
    components: {
      ElButton,
      ElFormItem,
      ElForm,
      InfiniteLoading
    },
    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 {
        inline: true,
        page: 1,
        loading: false,
        list: [],
        allStockPrice: null,
        listQuery: {
          limit: 5,
          priceStart: undefined,
          priceEnd: undefined,
          addrProvince: undefined,
          addrCity: undefined,
          addrTown: undefined
        },
        nomore: false
      }
    },
    created() {
      this.getAllStockPrice();//获取股价列表
    },
    methods: {
      //获取股价列表
      getAllStockPrice() {
        let that = this;
        getAllStockPrice()
          .then(response => {
            let arr = [];
            response.data.map(function(item){
              item = item / 10000+"w";
              arr.push(item);
            });
            that.allStockPrice = arr;
          });

      },
      /**
       * 选择省份
       * @param e
       */
      getValue(e) {
        this.listQuery.addrCity = undefined;
      },
      /**
       * 选择股价开始价格
       * @param target
       */
      getStartValue() {
        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;
        // 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();
      },
      loadMore: function() {
        if(this.nomore){
          return;
        }
        this.busy = true;
        this.loading = true;
        let params = this.listQuery;
//        this.listQuery.priceStart = this.listQuery.priceStart/10000+"w";
        params.page = this.page++;
        stockSearchPage(params)
          .then(res => {
            this.loading = false;
            let allList = [];
            res.data.list.forEach(function (item) {
              item.price = item.price / 10000;
              item.width = (item.total - item.balance) / item.total * 100 + "px";
              item.companyPic = "https://xxfcmgmt.upyuns.com/vehicle/branchCompany/stock/download/companyPic?realFileRelPath=" + item.companyPic;
              allList.push(item);
            });
            if(res.data.list.length< this.listQuery.limit && allList.length>0){
              //已加载全部
              this.nomore = true;
            }
            this.list = [...this.list, ...allList];
          });
        this.busy = false;
      },
      view(id, name) {
        //众筹详情页
        console.log(id + "----" + name);
        this.$router.push({path: '/stockCrowdDetail?id=' + id + "&name=" + name})
      },
      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: #f25b5b;
    border-radius: 10px;
    height: 10px;
  }

  .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: 95%
  }

  .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: 20px;
    color: #f25b5b;
  }

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

  .order-item {
    display: flex;
    align-items: center;
    padding: 10px 0;
    width: 100%;
  }

  .el-form--inline .el-form-item__content {
    display: flex;
    margin-bottom: 0 !important;
  }

</style>
