<template>
  <view
    class="her-scoller"
    :style="{
      'background-color': goodsInfo.backgroundColor,
      'background-image': goodsInfo.backgroundPicUrl,
      'border-color': goodsInfo.goodsStyle == 2 ? 'rgb(226, 226, 226)' : '',
    }"
  >
    <view
      class="good-five"
      @click="openGood(item)"
      v-for="(item, gli) in goodList"
      :key="gli"
      :style="{
        border: goodsInfo.goodsStyle == 2 ? '1px solid rgb(226, 226, 226)' : '',
        background:
          goodsInfo.goodsStyle == 1 || goodsInfo.goodsStyle == 2 ? '#FFF' : '',
      }"
    >
      <view class="list-box">
        <view class="img-box">
          <image
            style="width: 100%; height: 100%; border-radius: 50%"
            mode="aspectFill"
            :src="item.picUrl"
          />
        </view>
        <view
          class="textone"
          style="font-size: 14px; font-weight: bold; margin: 5px 0"
          >{{ item.name }}</view
        >
        <view
          style="
            display: flex;
            align-items: center;
            margin-top: 5px;
            margin-bottom: 14px;
          "
        >
          <image
            style="width: 23px; height: 15px; margin-right: 5px"
            mode="aspectFill"
            :src="item.foreignersUrl"
          />
          <text>{{ item.nationality }}</text>
        </view>
        <view class="textone">
          <text
            v-for="(x, y) in item.lableNameList"
            :key="y"
            v-if="item.lableNameList != null && item.lableNameList.length > 0"
          >
            {{ x }}{{ item.lableNameList.length == y + 1 ? "" : "、" }}
          </text>
          <text
            v-if="item.lableNameList == null || item.lableNameList.length == 0"
          >
            教育
          </text>
        </view>
      </view>
    </view>
    <good-sku
      v-if="showSku"
      :option-type="2"
      borderRadius="20"
      v-model="showSku"
      :good="sku"
    ></good-sku>
    <auth
      v-if="showAuth"
      @changeuserinfo="reloadUserinfo"
      @gbAuth="gbAuth"
    ></auth>
  </view>
</template>
<script>
import goodSku from "../goods/goodsku";
import auth from "@/components/auth/index.vue";
export default {
  components: {
    goodSku,
    auth,
  },
  props: ["goodList", "goodsInfo"],
  data() {
    return {
      mainColor: "",
      activeKey: 0,
      showSku: false,
      sku: {},
      showAuth: false,
      u: {},
    };
  },
  created() {
    this.mainColor = this.$uiConfig.mainColor;
  },
  methods: {
    openGood(item) {
      uni.navigateTo({ url: "/pages/school/teacherDetails?ID=" + item.id });
    },
  },
};
</script>

<style scoped>
.her-scoller {
  overflow-x: auto !important;
  padding: 12px;
  /* display: flex; */
  white-space: nowrap;
}
/* .her-scoller::after {
  clear: both;
  content: " ";
  display: block;
} */
.her-scoller .good-five {
  position: relative;
  margin-right: 12px;
  width: 120px;
  border: 1rpx solid transparent;
  border-radius: 10rpx;
  padding: 10px;
  display: inline-block;
  box-shadow: 0 5px 10upx rgba(0, 0, 0, 0.1);
  background: #fff;
  /* float: left; */
}
.her-scoller .good-five .img-box {
  width: 40px;
  height: 40px;
  border-radius: 50%;
}

.list-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  font-size: 12px;
  color: #333f53;
}
.textone {
  width: 100%;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  text-align: center;
}
</style>
