<template>
  <view class="textarea-row py-12 px-15">
    <view class="flex justify-between items-center" @click="addRow()">
      <view class="form-row__label text-base">
        {{ name || '阳性发现' }}<text v-if="required" class="form-cell--required"></text>
      </view>
      <view class="pl-5">
        <uni-icons type="plus" size="20" color="#0074ff"></uni-icons>
      </view>
    </view>
    <view v-for="(i, idx) in value" :key="idx" class="pt-12" :class="idx > 0 ? 'mt-12 border-t' : ''">
      <view class="flex justify-between items-center">
        <view class="text-base text-dark">{{ idx + 1 }}、阳性发现</view>
        <view class="pl-5" @click="remove(idx)">
          <uni-icons type="minus" size="20" color="#f87171"></uni-icons>
        </view>
      </view>
      <view class="border p-10 mt-12 rounded-sm">
        <textarea v-model="i.category" :auto-height="true" class="w-full h-full"></textarea>
      </view>
      <view class="text-base mt-12 text-dark">处理意见</view>
      <view class="border p-10 mt-12 rounded-sm">
        <textarea v-model="i.opinion" :auto-height="true" class="w-full h-full"></textarea>
      </view>
    </view>
  </view>
</template>
<script setup>
import { computed } from 'vue';

const emits = defineEmits(['change']);
const props = defineProps({
  form: {
    type: Object,
    default: () => ({})
  },
  name: {
    default: ''
  },
  required: {
    type: Boolean,
    default: false
  },
  title: {
    default: ''
  },
  disableChange: {
    type: Boolean,
    default: false
  }
})
const value = computed(() => Array.isArray(props.form[props.title]) ? props.form[props.title] : [])

function addRow() {
  if (props.disableChange) return;
  const len = value.value.length;
  if (len === 0) {
    return change([{ category: '', opinion: '' }])
  }
  const last = value.value[len - 1];
  const category = last.category || '';
  const opinion = last.opinion || '';
  if (category === '' && opinion === '') {
    return;
  }
  change([...value.value, { category: '', opinion: '' }])
}

function remove(idx) {
  if (props.disableChange) return;
  change(value.value.filter((i, j) => j !== idx));
}

function change(e) {
  emits('change', {
    title: props.title,
    value: e
  })
}

</script>

<style>
@import '../cell-style.css';

.border-t {
  border-top: 1px solid #eee;
}
</style>