<template>
  <div class="content">
    <div @click="checkModel(1)">
      <img :src="coverBlack">
      <p>主题一 (黑色)</p>
      <div>
        <img v-if="check === 1" :src="checked" alt>
        <img v-if="check === 2" :src="unchecked" alt>
      </div>
    </div>
    <div @click="checkModel(2)">
      <img :src="coverRed">
      <p>主题二 (红色)</p>
      <div>
        <img v-if="check === 2" :src="checked" alt>
        <img v-if="check === 1" :src="unchecked" alt>
      </div>
    </div>
    <span class="btn" @click="submit">确定</span>
  </div>
</template>

<script>
import coverBlack from '@/common/icon/coverBlack.jpg'
import coverRed from '@/common/icon/coverRed.jpg'
import checked from '@/common/icon/checked.png'
import unchecked from '@/common/icon/unchecked.png'
export default {
  data () {
    return {
      coverBlack,
      coverRed,
      unchecked,
      checked,
      check: 1
    }
  },
  methods: {
    checkModel (type) {
      this.check = type
    },
    submit () {
      this.$router.push({ name: 'making', query: { type: this.check } })
    }
  }
}
</script>

<style lang="scss" scoped>
.content {
  display: flex;
  height: 100%;
  align-items: center;
  > div {
    flex: 1;
    padding: 0.12rem;
    box-sizing: border-box;
    position: relative;
    > img {
      width: 100%;
    }
    p{
      font-size: .14rem;
      font-weight: bold;
      text-align: center;
      margin-top: .05rem;
    }
    div {
      position: absolute;
      right: 0.2rem;
      top: 0.2rem;
      width: 0.3rem;
      height: 0.3rem;
      img {
        width: 100%;
        height: 100%;
      }
    }
  }
  .btn {
    display: block;
    position: fixed;
    width: 3rem;
    height: 0.4rem;
    bottom: 0.2rem;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
    line-height: 0.4rem;
    font-size: 0.16rem;
    color: #fff;
    background-color: #fc6243;
    border-radius: 0.2rem;
  }
}
</style>
