<template>
  <view class="h-full flex flex-col">
    <view class="flex-shrink-0 px-10 pt-5 text-base font-semibold text-center truncate">{{ survey.name }}</view>
    <view v-if="survey.description"
      class="flex-shrink-0 px-10 mt-10 text-sm leading-normal text-gray line-clamp-2 text-center">
      {{ survey.description }}
    </view>
    <view class="flex items-center text-gray text-sm px-10 mt-10">
      <view v-if="survey.enableScore">
        当前得分：<text class="text-primary text-base font-semibold min-w-5 inline-block">{{ allScore }}
        </text>
      </view>
      <view class="ml-auto">
        客户：<text class="text-black text-base font-semibold min-w-5 inline-block">{{ customerName }} </text>
      </view>
    </view>
    <view class="flex-grow relative">
      <scroll-view :scroll-y="true" class="absolute inset-0">
        <view v-for="(quesiton, index) in list" :key="quesiton.id">
          <view v-if="quesiton" class="my-4 text-base px-10 leading-normal">
            <text v-if="quesiton.require" class="text-base text-red-500">*</text> {{ index + 1 }}、{{ quesiton.title }}
          </view>
          <view class="px-10">
            <template v-if="quesiton.type === 'radio'">
              <view v-for="(opt, idx) in quesiton.options" :key="opt.value" class="flex py-15 border-b"
                :class="idx === 0 ? 'border-t' : ''">
                <view class="flex-grow pl-4 text-gray leading-normal"
                  :class="quesiton.value && quesiton.value === opt.value ? 'text-primary' : ''">
                  {{ opt.label }}
                  <text v-if="survey.enableScore && opt.score >= 0">
                    （ {{ opt.score }}分）
                  </text>
                </view>
                <uni-icons v-if="quesiton.value && quesiton.value === opt.value" class="ml-1 text-primary flex-shrink-0"
                  color=" " type="checkbox-filled" size="24"></uni-icons>
              </view>
            </template>
            <view v-else-if="quesiton.type === 'input'"
              class="my-4 p-10 text-base leading-normal border rounded">
              {{ quesiton.value || '' }}
            </view>
          </view>
        </view>
      </scroll-view>
    </view>

  </view>
</template>
<script>
export default {
  name: 'Question',
  props: {
    customerName: { type: String, default: '' },
    list: { type: Array, default: () => ([]) },
    survey: { type: Object, default: () => ({}) }
  },
  computed: {
    allScore() {
      return this.list.reduce((score, item) => {
        if (item.type === 'radio') {
          const opt = item.options.find(i => i.value && i.value === item.value && item.value)
          if (opt && opt.score >= 0) {
            score = Math.floor(score * 100 + opt.score * 100) / 100
          }
        }
        return score
      }, 0)
    }
  },
  methods:{
    logScore() {
      console.log(this.survey)
      console.log(this.allScore)
    }
  }
}
</script>
<style lang="scss" scoped>
.min-w-5 {
  min-width: 40rpx
}

.pt-5 {
  padding-top: 40rpx;
}

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

.border-t {
  border-top: 1px solid #eee;
}

.pl-4 {
  padding-left: 30rpx;
}
</style>
