<script>
import StaticConstant from "@/common/StaticConstant";

export default {
  name: "npee-index",
  components: {},
  computed: {
    StaticConstant() {
      return StaticConstant
    }
  },
  data() {
    return {
      schoolList: [
        {
          schoolName: '首都师范大学',
          type: '专业学位',
          majorName: '音乐教育'
        },
        {
          schoolName: '首都师范大学',
          type: '专业学位',
          majorName: '美术教育'
        },
        {
          schoolName: '首都体育学院',
          type: '专业学位',
          majorName: '运动训练'
        }
      ]
    }
  }
}
</script>

<template>
  <view class="home">
    <view class="header border-top border-bottom">
      <view class="search-view">
        <view style="display: flex;height: 100rpx;border-bottom: 1px solid #f5f5f5;">
          <view style="width: 90%">
            <uni-search-bar class="uni-mt-10" radius="100" placeholder="请输入院校名称" v-model="schoolName"
                            @clear="clearSchoolInput" cancelButton="none" @confirm="searchSchoolClick"/>
          </view>
          <view style="width: 10%;line-height: 100rpx">
            <text @click="searchSchoolClick">搜索</text>
          </view>
        </view>
      </view>
      <view class="tab-head border-bottom slateGray">
        <view class="th">院校</view>
        <view class="th">考研类别</view>
        <view class="th">专业</view>
      </view>
    </view>
    <scroll-view scroll-y="true" class="schoolList">
      <view class="schoolItem border-bottom" v-for="(item,index) in schoolList" :key="index">
        <view class="td font-weight-550">
          {{ item.schoolName }}
        </view>
        <view class="td">
          {{ item.type }}
        </view>
        <view class="td">
          {{ item.majorName }}
        </view>
      </view>
    </scroll-view>

  </view>
</template>

<style scoped lang="scss">
.home {
  background-color: #ffffff;
  height: 100%;
}

.header {

}

.search-view {
  width: 95%;
  margin: 0 auto;
  border-bottom: 3rpx solid #f6f6f6;
}

.tab-head {
  display: flex;
  flex-direction: row;

  .th {
    width: 33.3%;
    text-align: center;
    line-height: 80rpx;
  }
}

.schoolList {
  height: 85%;
}

.schoolList .schoolItem {
  display: flex;
  flex-direction: row;
  line-height: 90rpx;
}

.schoolList .schoolItem .td {
  width: 33.3%;
  color: #333333;
  text-align: center;
}
</style>
