<template>
  <view class="flex card">
    <view class="left">
      <uv-checkbox-group
        v-model="checkboxValue"
        shape="circle"
        @change="onChange"
      >
        <uv-checkbox
          size="36rpx"
          icon-size="36rpx"
          activeColor="#7451DE"
          :name="1"
        ></uv-checkbox>
      </uv-checkbox-group>
    </view>
    <view class="right">
      <view class="flex top">
        <view class="title">健康报告</view>
        <view class="time">{{ $dayjs(data.createTime).format('YYYY-MM-DD') }}</view>
      </view>
      <view class="bottom">
        <reportScoreView :data="data" scoreAlign="left"></reportScoreView>
      </view>
    </view>
  </view>
</template>

<script>
  import reportScoreView from '@/components/report/reportScoreView.vue'

  export default {
    components: {
      reportScoreView,
    },
    props: {
      data: {
        type: Object,
        default() {
          return {}
        }
      }
    },
    data() {
      return {
        checkboxValue : []
      }
    },
    computed: {
      checked: {
        set(val) {
          this.checkboxValue = val ? [1] : []

          if (this.data.selected == val) {
            return
          }
          this.$emit('select', val)
        },
        get() {
          return this.checkboxValue[0] == 1 ? true : false
        }
      }
    },
    watch: {
      data: {
        handler(val) {
          this.checked = val.selected
        },
        immediate: true,
        deep: true,
      }
    },
    methods: {
      onChange(arr) {
        this.checked = arr[0] == 1 ? true : false
      },
      jumpToReport() {
        console.log('data', this.data)
        this.$utils.navigateTo(`/pages_order/report/result/index?id=${this.data.id}`)
      },
      jumpToContinueAnswer() {
        // todo
      },
    },
  }
</script>

<style scoped lang="scss">
.card {
  margin-top: 32rpx;
  padding: 32rpx;
  background-image: linear-gradient(#FAFAFF, #F3F3F3);
  border: 2rpx solid #FFFFFF;
  border-radius: 32rpx;
  column-gap: 32rpx;
}

.right {
  flex: 1;
}

.top {
  justify-content: space-between;

  .title {
    font-size: 36rpx;
    font-weight: 600;
    line-height: 1.2;
    font-family: PingFang SC;
    color: #252545;
  }

  .time {
    margin-top: 4rpx;
    font-size: 28rpx;
    font-weight: 400;
    line-height: 1.4;
    font-family: PingFang SC;
    color: #393939;
  }
}

.bottom {
  margin-top: 24rpx;
}
</style>