<template>
  <div class="vote">
    <div class="box">
      <div class="user">
        <img :src="detail.photo" />
        {{ `${detail.num}号：${detail.name}` }}
      </div>
    </div>
    <div class="box" v-html="detail.describe" v-if="detail.describe"></div>
    <div class="box" v-else>
      <p v-for="item in fields" :key="item.code">
        <b>{{ item.label }}：</b>
        <span>
          <template v-if="item.computed">{{ item.computed(detail[item.code]) }}</template>
          <template v-else>{{ detail[item.code] }}</template>
        </span>
      </p>
      <div class="vote-button" @click="$router.back()">返回</div>
    </div>
  </div>
</template>

<script>
import * as api from '@/api/vote'
export default {
  metaInfo: { title: '投票' },
  data() {
    return {
      detail: {},
      fields: [
        {
          label: '性别',
          code: 'gender',
          computed(value) {
            const map = { 0: '女', 1: '男' }
            return map[value]
          }
        },
        { label: '省份', code: 'province' },
        { label: '城市', code: 'city' },
        { label: '班级', code: 'class' },
        { label: '所属项目', code: 'project' },
        { label: '目前工作单位', code: 'company' },
        { label: '职务', code: 'job' },
        { label: '个人曾获得的社会荣誉列举', code: 'honor' },
        { label: '自荐说明', code: 'recommend' }
      ]
    }
  },
  computed: {
    pid() {
      return this.$route.params.id
    }
  },
  methods: {
    getVoteItem() {
      api.getVoteItem(this.pid).then(response => {
        this.detail = response
      })
    }
  },
  beforeMount() {
    this.getVoteItem()
  }
}
</script>

<style scoped src="../../assets/css/vote.css"></style>
<style lang="scss" scoped>
.vote {
  padding: 0.2rem;
  height: auto;
  min-height: 100vh;
}
.box {
  margin-bottom: 0.1rem;
  padding: 0.2rem;
  background-color: #fff;
  box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.05);
  border-radius: 0.04rem;
  p {
    margin-bottom: 5px;
    line-height: 24px;
  }
  b {
    font-weight: bold;
  }
}
.user {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.15rem;
  font-weight: 600;
  color: #222;

  img {
    width: 0.4rem;
    height: 0.4rem;
    border-radius: 50%;
    overflow: hidden;
    margin-right: 0.1rem;
    object-fit: cover;
  }
}
</style>