<template>
  <div>
    <base-dialog v-model="show" :title="props.title || '零售清单'">
      <base-table
        :option="props.option"
        border
        :showToolsBar="false"
        @tableUpdate="tableUpdate">
        <template #toolsBar>
          总金额：
          <span style="font-size: 18px; font-weight: bold"
            >{{ totalNum }}元</span
          >
        </template>
        <template #colunm>
          <el-table-column
            type="index"
            label="序号"
            width="80"
            align="center" />
          <el-table-column
            prop="name"
            label="名称"
            width="150"
            align="center" />
          <el-table-column prop="unit" label="单位" width="60" align="center" />
          <el-table-column
            prop="quantity"
            label="数量"
            width="80"
            align="center" />
          <el-table-column prop="price" label="金额" width="120" align="center">
            <template #default="{ row }"> {{ row.price }} 元 </template>
          </el-table-column>
          <el-table-column prop="remark" label="备注" align="center" />
        </template>
      </base-table>
    </base-dialog>
  </div>
</template>

<script lang="ts" setup>
import { tableOptionType } from "@/types/table";
import { computed, ref } from "vue";

let show = defineModel({ default: false });

let props = defineProps<{
  option: tableOptionType;
  title?: string;
}>();
let tableData = ref([]);

let totalNum = computed(() => {
  let value = 0.0;
  if (tableData.value.length) {
    tableData.value.forEach((item) =>
      (value = value + Number(item.price).toFixed(2) * item.quantity).toFixed(2)
    );
  }

  return value.toFixed(2);
});

function tableUpdate(data) {
  tableData.value = data;
}
</script>
<style lang="scss" scoped></style>
