<template>
  <!-- 上传交付物 -->
  <view class="box shadow-lg">
  <view class="px-3 py-6 bg-white">
    <u-input :auto-height="autoHeight" :border="border" :height="height" :type="type" placeholder="输入备注" v-model="remark" />
    <view class="flex flex-row-reverse text-xs text-gray-400 mt-2">{{ wordNum }}/140</view>
    <!-- 评分 -->
    <view class="flex justify-between mt-3">
      <slider :value="score" @change="sliderChange" max="100" min="0" show-value style="width: 60%" />
      <u-input :border="border" :type="type1" @input="changeNumber" maxlength="100" placeholder="输入分数" v-model="score" />
    </view>

    <view class="flex flex-col justify-center mt-5">
      <u-button @click="submit" size="medium" type="primary">提交</u-button>
      <u-button @click="$emit('closeScore')" class="mt-2" size="medium">取消</u-button>
    </view>
  </view>
  </view>
</template>

<script setup>
import { reactive, watchEffect } from 'vue';

const data = reactive({
  remark: '',
  type: 'textarea',
  border: true,
  height: 100,
  autoHeight: true,
  wordNum: 0,
  score: 0,
  type1: 'number',
});

const emit = defineEmits(['submit']);

watchEffect(() => {
  if (remark) {
    data.wordNum = remark.value.length;
  }

  if (score) {
    data.score1 = score.value;
  }
});

// 提交交付物
function submit() {
  emit('submit', this.remark, this.score);
}

function sliderChange(e) {
  data.score = e.detail.value;
}

function changeNumber(e) {
  if (e > 100) {
    data.score = 100;
  }
}
</script>

<style scoped lang="scss">
  .box{
    border-radius: 8px;
    background: #fff;
    padding: 16px;
    overflow: hidden;
  }
</style>
