<template>
  <div class="main d-flex align-center flex-column">
    <div class="text-center text-h3 text--indigo mb-5 title">检测结果</div>
    <div color="#26c6da" class="d-flex justify-space-around box">
      <v-card class="text-center pa-3 card" hover v-for="face in items" :key="face.name" width="500" @click="handlePutOn(face)">
        <img class="faceType" :src="require(`@/assets/face/${face.name}.jpg`)" alt="">
        <div class="text--indigo text">
          {{ faceType[face.name]?.face }}
          相似度 {{ face.similarity.toFixed(2) }}%
        </div>
        <div class="d-flex align-center justify-center glass">
          <div v-for="item in faceType[face.name].items" :key="item.type" class="text--indigo pa-3" style="flex: 1">
            <img :src="item.img" width="100%">
          </div>
        </div>
        <div class="d-flex align-center justify-center">
          <v-btn text color="primary">试戴体验</v-btn>
        </div>
      </v-card>
    </div>

    <div class="d-flex mt-3">
      <!-- <button class="btn mr-3 _primary" @click="handlePutOn">眼镜试戴</button> -->
      <button class="btn" @click="handleReTake">重拍</button>
    </div>
  </div>
</template>

<script>
import programType from '@/utils/program'
import { selectGlasses } from '@/api/glass'
export default {
  name: 'm-feature',
  props: {
    items: {
      type: Array,
      default: () => []
    }
  },
  data () {
    return {
    }
  },
  computed: {
    faceType () {
      return programType.reduce((res, item) => {
        res[item.value] = item
        return res
      }, {})
    }
  },
  methods: {
    async handlePutOn (item) {
      try {
        const { data } = await selectGlasses({ name: item.name })
        if (!data || !data.length) {
          this.$emit('error', '当前脸型没有适配镜框')
          return
        }
        this.$emit('click:try', { ...item, items: data })
      } catch (error) {
        this.$emit('error', error.message)
      }
    },
    handleReTake () {
      this.$emit('reTake')
    }
  }
}
</script>

<style lang="scss" scoped>
.main {
  width: 100%;
  height: 100%;
  font-size: 14px;
  justify-content: space-around;
  .content {
    margin: 0 auto;
    max-width: 600px;
    height: 100%;
  }
}
.btn {
  -webkit-tap-highlight-color: transparent;
  width: 100px;
  height: 40px;
  border-radius: 20px;
  background: #eee;
  color: #666;
  border: none;
  outline: none;
  cursor: pointer;
}
._primary {
  background: #141e8c;
  color: #fff;
}
.faceType {
  width: 300px;
}
.card {
  cursor: pointer;
}
.text {
  font-size: 18px;
}
@media screen and (max-width: 600px) {
  .faceType {
    width: 200px;
  }
  .box {
    flex-direction: column;
  }
  .glass {
    padding: 0 80px;
    justify-content: space-around;
  }
  .title {
    font-size: 32px !important;
  }
}
</style>
