<template>
  <view class="h-full py-20vh">
    <view class="mb-10 px-15 text-lg font-semibold text-center">{{ survey.name }}</view>
    <scroll-view :scroll-y="true" class="h-40vh">
      <view class="text-sm text-gray px-15 text-center leading-normal">
        {{ survey.description || '' }}
      </view>
    </scroll-view>
    <view v-if="customerName" class="my-4 text-center text-base">
      <text class="text-gray">客户：</text>
      <text class="font-semibold">{{ customerName }}</text>
    </view>
    <view
      class="mx-auto answer-btn h-12 text-base flex items-center justify-center text-white text-center rounded-full bg-primary"
      @click="answer()">
      开始答题
    </view>
  </view>
</template>
<script setup>
defineProps({
  customerName: { type: String, default: '' },
  survey: { type: Object, default: () => ({}) }
})
const emits = defineEmits(['answer'])

function answer() {
  emits('answer')
}

</script>
<style>
.h-40vh {
  height: 40vh;
}

.py-20vh {
  padding: 20vh 0;
}

.my-4 {
  margin-top: 30rpx;
  margin-bottom: 30rpx;
}

.answer-btn {
  width: 80%;
}

.h-12 {
  height: 96rpx;
}
</style>
