<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="shoppings main-container">
      <div class="filter-container" 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: 70%;margin-right: 10px;" v-model="listQuery.addrProvince"
                       placeholder="请选择省份（直辖市）" @change='getValue'>
              <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" v-model="listQuery.addrCity" placeholder="请选择城市">
              <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 v-for="item in allStockPrice" :key="item.id" :label="item.name" :value="item"></el-option>
            </el-select>
            <el-select class="filter-item" v-model="listQuery.priceEnd" placeholder="结束股价" @change='getEndValue'>
              <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="first">
        <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">
            <img :src="item.companyPic" style="width: 130px;height:90px;border-radius: 10px;"/>
            <div style="height: 90px;padding-left: 10px;width: 100%;">
              <div style="height: 30px;">{{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}}/股</div>
            </div>
          </div>
        </div>
        <div class="tip-css" v-if="nodata">
          暂无数据
        </div>
        <div v-if="nomore" class="tip-css">
          已加载全部
        </div>
      </div>
    </div>
  </div>
</template>

<style>
  .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>

<script>
  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
    },
    name: 'stockCrowd',
    data() {
      return {
        nodata: false,
        nomore: false,
        allStockPrice: null,
        list: null,
        total: null,
        listLoading: true,
        listQuery: {
          page: 1,
          limit: 5,
          priceStart: undefined,
          priceEnd: undefined,
          addrProvince: undefined,
          addrCity: undefined,
          addrTown: undefined
        },
        inline: true,
      }
    },
    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);
      }
    },
    created() {
      this.getList();
      this.getAllStockPrice();//获取股价列表
      this.$nextTick(() => {
        window.addEventListener('scroll', this.scroll)
      });
    },
    mounted() {    // 滚动加载更多   
    },
    methods: {
      scrollBottom() {
        //当前页面是否存在id = list-box
        const element = document.getElementById("list-box");
        //当前页面不否存在id =list-box或没有下一页时结束
        if (element == null || !this.pageStatus) {
          return false;
        }
        //浮动框变化的高度
        const height1 =
          document.documentElement.scrollTop || document.body.scrollTop;
        //屏幕的高度
        const height2 =
          document.documentElement.clientHeight || document.body.clientHeight;
        //id=list-box的高度（列表信息放在这个标签里）
        const height3 =
          document.getElementById("list-box").scrollHeight ||
          document.documentElement.clientHeight ||
          document.body.clientHeight;
        //id=header-box的高度（列表信息外的其他高度）
        const height4 = document.getElementById("header-box").scrollHeight || 100;
        if (height1 + height2 > height3 + height4 && this.pageSum > 0) {
          // 请求的数据未加载完成时，滚动到底部不再请求前一天的数据
          this.loading = true;
          let pageNumber = pageSum;
          if (this.pageSum != 0) {
            pageNumber = pageNumber + 1;
          }
          if (this.pageNum < pageNumber) {
            this.pageNum += 1;
            this.pageStatus = false;
          } else {
            this.tips = "没有数据可加载了";
            this.pageStatus = false;
            return false;
          }
          this.tips = "数据正在加载中...";
          const data = {
            pageNum: this.pageNum
          };
          this.$store
            .dispatch("getMyList", data)
            .then(resp => {
              if (resp.data.code == "00") {
                const newList = resp.data.data.list;
                for (var i = 0; i < newList.length; i++) {
                  this.myList.push(newList[i]);
                }
                // 请求的数据执行完成后
                this.$nextTick(() => {
                  this.loading = false;
                  this.pageStatus = true;
                });
              } else {
                alert(resp.data.msg);
              }
            })
            .catch(() => {
              this.tips = "连接失败，请稍后重试";
            });
        }
      },
      //获取股价列表
      getAllStockPrice() {
        let that = this;
        getAllStockPrice()
          .then(response => {
            that.allStockPrice = response.data;
          });

      },
      /**
       * 滚动事件
       */
      scroll() {
        let isLoading = false;
        window.onscroll = () => {
          // 距离底部200px时加载一次
          let ss = document.documentElement.offsetHeight - document.documentElement.scrollTop - window.innerHeight;
          console.log(ss);
          let bottomOfWindow = document.documentElement.offsetHeight - document.documentElement.scrollTop - window.innerHeight <= 0;
          if (bottomOfWindow) {
            this.getListReachBottom();
          }
        }
      },
      //返回按钮
      goBack() {
        console.log(this.optionName);
        let that = this;
        this.$router.push({path: '/companyInfo'})
      },
      /**
       * 选择省份
       * @param e
       */
      getValue(e) {
        this.listQuery.addrCity = undefined;
      },
      /**
       * 选择股价开始价格
       * @param target
       */
      getStartValue() {
        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;
        }
      },
      view(id, name) {
        //众筹详情页
        console.log(id + "----" + name);
        this.$router.push({path: '/stockCrowdDetail?id=' + id + "&name=" + name})
      },
      /**
       * 触底加载更多数据
       * @returns {boolean}
       */
      getListReachBottom: function () {
        var that = this;
        if (this.nomore) {
          return false
        }
        let allList = this.list;
        this.nomore = false;
        this.nodata = false;
        stockSearchPage(this.listQuery)
          .then(res => {
            if (res.code == 1) {
              res.data.list.forEach(function (item) {
                item.price = item.price / 1000 + ",000";
                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);
              });
              this.lastPage = res.data.lastPage;
              this.list = allList;
              if (allList.length == this.listQuery.page * this.listQuery.limit) {
                this.listQuery.page++
              } else if (allList.length < this.listQuery.page * this.listQuery.limit) {
                this.nomore = true;
                localStorage.setItem("isMore", true);
              } else if (allList.length == 0) {
                this.nodata = true;
              }
            }
          });
      },
      /**
       * 获取股权列表数据
       */
      getList: function () {
        var that = this;
        this.nomore = false;
        this.nodata = false;
        this.list = [];
        this.listQuery.page = 1;
        let allList = this.list;
        stockSearchPage(this.listQuery)
          .then(res => {
            if (res.code == 1) {
              res.data.list.forEach(function (item) {
                item.price = item.price / 1000 + ",000";
                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);
              });
              this.list = allList;
              this.lastPage = res.data.lastPage;
              if (allList.length == this.listQuery.page * this.listQuery.limit) {
                this.listQuery.page++
              } else if (allList.length < this.listQuery.page * this.listQuery.limit) {
                this.nomore = true;
                localStorage.setItem("isMore", true);
              } else if (allList.length == 0) {
                this.nodata = true;
              }
            }
          });
      },
    }
  }
</script>
