<template>
  <view class="new_students">
    <view class="search_frame">
      <input
        type="text"
        placeholder="请输入学员姓名搜索，支持拼音首字母"
        placeholder-style="color:#999;"
        v-model="query"
        @input="getData()"
      >
      <text class="iconfont iconsearch _search_icon"></text>
    </view>
    <scroll-view
      class="students_list"
      scroll-y
    >
      <view
        class="list_item"
        v-for="(item, index) in initData"
        :key="index"
      >
        <view class="item_header">
          <image :src="item.classFullCover"></image>
          <text class="student_name">{{item.name}}</text>
          <text
            class="_icon_new"
            v-if="item.isNew === 1"
          >NEW</text>
          <text
            class="status_apply"
            v-if="item.status === '1'"
            style="color: #09bb07;"
          >待付款</text>
          <text
            class="status_apply"
            style="color: #333333;"
            v-if="item.status === '2'"
          >已报名</text>
        </view>
        <view class="item_main">
          <image :src="item.classFullCover"></image>
          <view class="student_text">
            <view class="_class">{{item.className}}</view>
            <view class="class_odd">单号：{{item.orderSn}} </view>
            <view class="class_odd">日期：{{item.applyTime.length > 10 ? item.applyTime.substr(0, 10) : item.applyTime}}</view>
          </view>
          <view class="price">¥985.80</view>
        </view>
      </view>
    </scroll-view>
  </view>
</template>

<script>
import { pxApplyList } from '@/api/px-apply/index'
export default {
  data () {
    return {
      initData: [],
      query: ''
    }
  },
  mounted () {
    this.getData()
  },
  methods: {
    getData () {
      console.log(1111)
      pxApplyList({ name: this.query }).then(res => {
        console.log('res===>', res)
        this.initData = res.data.list
      }).catch(err => { console.log(err) })
    }
  }
}
</script>

<style lang="scss" scoped>
.new_students {
  .search_frame {
    padding: 20upx 0;
    position: relative;
    & > input {
      width: 90vw;
      height: 60upx;
      margin: 0 auto;
      background: #f0f2f6;
      border-radius: 30px;
      padding-left: 60upx;
    }
    & > ._search_icon {
      position: absolute;
      top: 52%;
      left: 8%;
      transform: translateY(-50%);
      font-size: 30upx;
      color: #999;
    }
  }
  .students_list {
    padding-top: 20upx;
    background: #f0f2f6;
    .list_item {
      background-color: #fff;
      margin-bottom: 20upx;
      & > .item_header {
        padding: 25upx 30upx 0;
        & > image {
          display: inline-block;
          vertical-align: middle;
          width: 50px;
          height: 50px;
          // background: #f0f2f6;
          border: 1px solid #dddddd;
          border-radius: 25px;
        }
        & > .student_name {
          display: inline-block;
          vertical-align: middle;
          font-size: 32upx;
          margin-left: 20upx;
          color: #333;
          font-weight: 600;
        }
        & > ._icon_new {
          width: 64upx;
          height: 26upx;
          margin-left: 20upx;
          vertical-align: middle;
          background: #3385ff;
          border-radius: 4px;
          color: #fff;
        }
        & > .status_apply {
          font-size: 24px;

          line-height: 50upx;
          float: right;
        }
      }
      & > .item_main {
        padding: 30upx;
        & > image {
          vertical-align: middle;
          display: inline-block;
          background: #eeeeee;
          width: 150upx;
          height: 150upx;
        }
        & > .student_text {
          vertical-align: middle;
          display: inline-block;
          width: 55%;
          height: 150upx;
          // background-color: green;
          margin-left: 20upx;
          & > ._class {
            margin: 10upx 0 20upx;
            font-size: 28upx;
            color: #333333;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
          }
          & > .class_odd {
            font-size: 26upx;
            color: #999;
            line-height: 38upx;
          }
        }
        & > .price {
          display: inline-block;
          color: #333333;
          font-size: 30px;
          font-weight: 600;
          vertical-align: bottom;
        }
      }
    }
  }
}
</style>