<template>
<div>
  <div class="relate-stock" v-if="!plus">
    <span>相关股票：</span>
    <div class="box">
      <div
        v-for="item in dataArr"
        :class="item.rise>0?'r':'g'"
        :key="item.stockCode"
      >
        <p class="tit">{{ item.stockName }}</p>
        <p class="chg" :class="item.rise>0?'red':'green'">{{ item.price }} {{ item.rise > 0 ? '+'+item.rise : item.rise }}%</p>
      </div>
    </div>
    <span class="more" v-if="plusData.length > 9 && moreFlag" @click="more">更多>></span>
  </div>
  <div class="relate-stock2" v-if="plus">
    <div class="title">
      <span>相关股票：</span>
      <span class="add" @click="addAllZXG">+一键添加自选</span>
    </div>
    <div class="table">
      <table>
        <tr>
          <th></th>
          <th>证券代码</th>
          <th>名称</th>
          <th>涨幅</th>
          <th>现价</th>
        </tr>
        <tr
          v-for="(item, index) in plusData"
          :key="item.stockCode"
        >
          <td>{{ index+1 }}</td>
          <td>{{ formatCode(item.stockCode) }}</td>
          <td>{{ item.stockName }}</td>
          <td :class="[item.rise>0?'red':'green']">{{ item.rise }}% </td>
          <td :class="[item.rise>0?'red':'green']">{{ item.price }}</td>
        </tr>
      </table>
    </div>
  </div>
</div>
</template>

<script>
export default {
  name: 'RelateStock',
  props: {
    plus: {
      type: Boolean,
      default: false
    },
    stockList: {
      type: Array,
      default: ()=>([])
    }
  },
  data() {
    return {
      dataArr: [],
      moreFlag: true,
      plusData: this.stockList
    }
  },
  watch: {
    stockList: function(newVal, oldVal){
      this.plusData = newVal
      this.getStkRise()
    }
  },
  methods:{
    formatCode (item) {
      return item.substr(2)
    },
    addAllZXG () {
      for(let i=0; i<this.plusData.length; i++){
        let item = this.plusData[i]
        let code = item.stockCode.substr(2)
        let market = (item.stockCode.substr(0,2))=='SZ'?'0':'1'
        setTimeout(()=>{
          window.location.href = 'http://www.treeid/addtozxg_'+market+'#'+code
        }, i*100)
      }
      $(".add").css({"color": "#c2c4cd", "border-color":"#c2c4cd"});
    },
    getStkRise () {
      let _this = this;
      let stkList = [];
      this.plusData.forEach(function(item){
        stkList.push(item.stockCode)
      });
      let param = {
        stklist: stkList
      }
      $.ajax({
        url: 'http://59.36.20.245:8088/batchData/getBatchBaseData',
        type: 'POST',
        contentType: 'application/json',
        data: JSON.stringify(param),
        success: function(res){
          let r = JSON.parse(res)
          if(r.errcode == '0'){
            let hqlist = r.result;
            for(let i=0; i<hqlist.length; i++){
              _this.$set(_this.plusData[i], 'price', hqlist[i].price)
              _this.$set(_this.plusData[i], 'rise', hqlist[i].rise)
            }
            _this.calcDataArr()
          }
        }
      });
    },
    calcDataArr() {
      if(this.plusData.length > 9) {
        this.dataArr = this.plusData.slice(0,7);
      }else{
        this.dataArr = this.plusData
      }
    },
    more() {
      this.moreFlag = false;
      this.dataArr = this.plusData;
    }
  },
  mounted(){
    if(this.plusData != ''){
      this.getStkRise()
    }
  },
}
</script>

<style scoped>
.relate-stock {
  display: flex;
  justify-content: left;
  align-items: baseline;
  /* height: 80px; */
  font-size: 16px;
}
.relate-stock .box {
  flex: 1;
  display: flex;
  width: 990px;
  flex-wrap: wrap;
}
.box > div {
  width: 94px;
  height: 40px;
  font-size: 12px;
  text-align: center;
  border-radius: 3px;
  margin: 15px 6px 0;
}
.box .tit {
  color: #FFFFFF;
  line-height: 20px;
}
.box .chg {
  line-height: 20px;
}
.box .r {
  border: 1px solid #EB333B;
}
.box .r .tit {
  background: #EB333B;
}
.box .r .chg {
  color: #EB333B;
}
.box .g {
  border: 1px solid #1AAE52;
}
.box .g .tit {
  background: #1AAE52;
}
.box .g .chg {
  color: #1AAE52;
}
.relate-stock .more {
  font-size: 16px;
  color: #4A90E2;
  text-align: right;
  line-height: 26px;
  cursor: pointer;
}
.relate-stock .no-auth {
  color: #767C8A;
  line-height: 22px;
  margin-left: 25px;
}


.relate-stock2 .title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 16px;
}
.relate-stock2 .add {
  color: #4A90E2;
  border: 1px solid #4A90E2;
  padding: 5px;
  border-radius: 2px;
  cursor: pointer;
}
.relate-stock2 table {
  width: 100%;
  margin: 25px 0 35px 0;
  border-collapse: collapse;
}
.relate-stock2 table th,td {
  height: 30px;
  text-align: center;
  border-right: 1px solid #1B1D23;
  border-bottom: 1px solid #1B1D23;
}
.relate-stock2 table th {
  background: #2E333D;
  color: #EAEBF0;
}
.relate-stock2 table td {
  background: #21242C;
  color: #C2C4CD;
}
.red{
  color: #ea333b !important; 
}
.green{
  color: #1aae52 !important;
}
</style>
