<template>
  <div class="item">
    <div class="left">
      <div class="title">
        <span class="point"></span> {{ item.servicepackageName }}
      </div>
      <div class="detail" @click="$router.push(item.detailUrl)">
        <img :src="eyes" alt="" />点击查看体检套餐详情
        <!-- {{item.fileList[0].url}} -->
      </div>
    </div>
    <div class="right">
      <a-button
        v-if="listType == 2"
        style="background: #ffcc00; color: white; border: none; width: 86px"
        @click="handleReadDetail"
        >查看</a-button
      >
      <a-button
        v-else
        style="background: #3f7ffb; color: white; border: none; width: 86px"
        @click="handleSubmit"
        >立即预约</a-button
      >
      <div class="date">
       {{ listType == 1 ? (' 有效期至：'+item.validityEnd ): ('预约体检日期：'+item.customerAppDate) }}
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'item',
  components: {},
  props: {
    listType: {
      type: String,
      default: '',
    },
    id: {
      type: String | Number,
      default: '',
    },
    item: {
      type: Object,
      default: () => {},
    },
  },
  data() {
    return {
      eyes: require('@/assets/imgs/index/eyes.png'),
    }
  },
  methods: {
    // 立即预约
    handleSubmit() {
      console.log('立即预约~', this.item.chooseList)

      // 本地存储数据-该产品下可选择的体检套餐
      window.localStorage.setItem('reservedInfo', JSON.stringify(this.item))
      this.$router.push({
        name: 'Flow',
        query: {
          id: this.id, //客户id
          servicepackageId: this.item.id, //产品id
        },
      })
    },
    // 查看-预约详情
    handleReadDetail() {
      this.$router.push({
        name: 'Detail',
        query: {
          id: this.id,
        },
      })
    },
  },
}
</script>

<style lang="less" scoped>
.item {
  display: flex;
  justify-content: space-between;
  background: #fafafa;
  padding: 14.5px 12px;
  border-radius: 8px;
  margin-top: 12px;
  .right {
    text-align: right;
    .date {
      color: #999999;
      font-size: 14px;
      margin-top: 12px;
    }
  }
  .left {
    .title {
      color: #333333;
      font-size: 14px;
      font-weight: bold;
    }
    .detail {
      font-size: 14px;
      color: #999999;
      line-height: 30px;
      margin-top: 12px;
      cursor: pointer;
      img {
        position: relative;
        top: -2px;
        margin-right: 3px;
      }
    }
  }
}
</style>
