<template>
  <div class="partner-list" v-if="list.length!==0">
    <van-list
      class="container"
      v-model="isLoading"
      :finished="isFinished"
      finished-text="没有更多了"
      @load="onLoad"
      :immediate-check="false"
    >
      <Card
        class="card"
        v-for="(item,index) in list"
        :key="index"
        @click.native="handleClick(item.accountId)"
      >
        <img
          :src="item.headImg"
          alt=""
          class="left img-round"
        >
        <div class="right">
          <div class="info">
            <span class="name">{{item.name}}</span>
            <span class="phone">{{item.mobile}}</span>
          </div>
          <van-icon
            name="arrow"
            class="arrow-right"
          />
          <div class="data">
            <span>当月{{text}}: </span>
            <span>{{item.sameMonthPrice | getPrice}}</span>
            <span>历史{{text}}: </span>
            <span>{{item.historyPrice | getPrice}}</span>
          </div>
        </div>
      </Card>
    </van-list>
  </div>
</template>

<script>
import Card from '../common/Card'
import { addShare } from '../../api/ShortVideo/ShortVideo'
export default {
  name: "partnerList",
  components: {
    Card
  },
  props: {
    list: {
      type: Array,
      required: true
    },
    loading: {
      type: Boolean,
      default: false,
      required: true
    },
    finished: {
      type: Boolean,
      default: false,
      required: true
    },
    text: {   // 当月销售或者当月收益
      type: String,
      required: true
    }
  },
  data() {
    return {
      isLoading: this.loading,
      isFinished: this.finished,
    }
  },
  methods: {
    handleClick(AccountId) {
      this.$emit('handleClick', AccountId)
    },
    onLoad() {
      this.$emit('emitOnLoad')
    }
  },
  mounted() {
  },

  watch: {
    loading(newValue, oldValue) {
      this.isLoading = newValue
    },

    finished(newValue, oldValue) {
      this.isFinished = newValue
    }
  }
}
</script>

<style lang="less">
.container {
  margin: 0.2rem;
  .card {
    display: flex;
    align-items: center;
    padding: 0.3rem 0.2rem;
    margin-top: 0.2rem;
  }
  .left {
    width: 0.96rem;
    height: 0.96rem;
    margin-right: 0.2rem;
  }

  .right {
    display: flex;
    flex: 1;
    flex-direction: column;
    align-items: flex-start;
    .info {
      .name {
        font-size: 0.34rem;
        color: #333333;
        margin-right: 0.2rem;
      }

      .phone {
        font-size: 0.28rem;
      }
    }

    .arrow-right {
      align-self: flex-end;
      font-size: 0.36rem;
      margin-bottom: 0.1rem;
    }
    .data {
      display: flex;
      width: 100%;
      span {
        color: #333333;
        font-size: 0.28rem;
        margin-right: 0.1rem;
        &:nth-child(2) {
          color: #478bfb;
          font-size: 0.32rem;
          margin-right: 0.3rem;
        }

        &:nth-child(4) {
          color: #f93232;
          font-size: 0.32rem;
        }
      }
    }
  }
}
</style>