<template>
  <div active-title-bar class="mb-10px">处方</div>
  <el-table :data="wines" style="width: 100%">
    <el-table-column prop="name" label="序号" align="center" width="60">
      <template #default="{ $index }">
        {{ $index + 1 }}
      </template>
    </el-table-column>

    <el-table-column prop="name" label="中药饮片名称" />
    <el-table-column prop="details" label="药材">
      <template #default="{ row }">
        <el-tooltip effect="dark" :content="row.details" placement="top-start">
          <div class="truncate">{{ row.details }}</div>
        </el-tooltip>
      </template>
    </el-table-column>
    <!-- <el-table-column prop="effect" label="功效">
      <template #default="{ row }">
        <el-tooltip effect="dark" :content="row.efficacy" placement="top-start">
          <div class="truncate">{{ row.efficacy }}</div>
        </el-tooltip>
      </template>
    </el-table-column> -->
    <el-table-column label="数量" width="180">
      <template #default="{ row, $index }">
        <el-input-number :model-value="row.quantity" :min="1" :max="99"
          @update:model-value="handleQuantityChange($event, $index)" />
      </template>
    </el-table-column>
    <el-table-column align="center" label="发药单位" prop="unit" width="120" />
    <el-table-column label="操作" width="100">
      <template #default="{ row }">
        <el-button type="text" @click="handleCopy(row)">复制</el-button>
      </template>
    </el-table-column>
  </el-table>
</template>

<script setup>
import { useCopy } from '@/utils/index'
const props = defineProps({
  wines: {
    type: Array,
    default: () => []
  }
});

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

const handleQuantityChange = (quantity, index) => {
  emit('change', { quantity, index });
};

function handleCopy(row) {
  const txt = `
  【名称】：${row.name}
  【药材】：${row.details}
  【用途】：${row.efficacy}
  【数量】：${row.quantity}${row.unit||''}
  `
  useCopy(txt)
}

</script>

<style scoped>
/* 可根据需要添加样式 */
</style>