<template>
  <div
    :style="{width:props.dimensions.width*props.ratioWidth+'px',height:props.dimensions.height*props.ratioHeight+'px'}">
    <NodeResizer @resizeEnd="(e) => $emit('resize', e)" color="#fff" v-if="!props.isView && !props.isHideHandle && props.selected"
                 @resize="resize" />

    <div class="custom-node"
         :style="{width:props.dimensions.width*props.ratioWidth+'px',height:props.dimensions.height*props.ratioHeight+'px',pointerEvents:props.isView?'auto': 'none'}">
      <el-table
        :data="getData(props.inputData.tableData)"
        v-if="scrollShow"
        style="--el-table-border-color:#000"
        :border="true"
        :show-header="false"
        :style="{height: '100%'}"
      >
        <el-table-column v-for="(i,k) in props.data.options.cellNum" :key="k" :align="i.align" prop="date"
                         :label="i.name"
                         :width="i.width">
          <template #default="scope">
            <div>
              <span
                v-if="(scope.row[`cellType${k+1}`] || i.type) === '文本'">{{ setText(scope.row[i.field], scope.row, (scope.row[`cellFormula${k + 1}`] || i.formula))
                }}</span>
              <el-tag type="primary" v-else-if="(scope.row[`cellType${k+1}`] || i.type) === '标签'">
                {{ setText(scope.row[i.field], scope.row, (scope.row[`cellFormula${k + 1}`] || i.formula)) }}
              </el-tag>
              <el-image :preview-src-list="[scope.row[i.field]]"
                        v-else-if="(scope.row[`cellType${k+1}`] || i.type) === '图片'" style="width: 100%;"
                        :style="{height:props.data.options.tdHeight}"
                        :src="setText(scope.row[i.field],scope.row,(scope.row[`cellFormula${k+1}`] || i.formula))"
                        fit="contain" />
              <el-progress v-else-if="(scope.row[`cellType${k+1}`] || i.type) === '进度条'" :text-inside="true"
                           :stroke-width="26"
                           :percentage="parseFloat(setText(scope.row[i.field],scope.row, (scope.row[`cellFormula${k+1}`] || i.formula)))" />
              <span v-else>{{ setText(scope.row[i.field], scope.row, (scope.row[`cellFormula${k + 1}`] || i.formula))
                }}</span>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <Handle v-if="!props.isView" :id="`${props.id}.-t`" type="target" :position="Position.Left" />
  </div>
</template>
<script setup>
import { defineEmits, defineProps, ref } from 'vue';
import { NodeResizer } from '@vue-flow/node-resizer';
import { Handle, Position } from '@vue-flow/core';
import { vue3ScrollSeamless } from 'vue3-scroll-seamless';

const a = {
  'tableData': [
    {
      '生产日期': '2024/8/2',
      '销售订单': 'G-00101',
      '产品名称': '圆珠笔',
      '规格型号': '0.5mm',
      '单位': '个',
      '计划产量': 50,
      '实际产量': 45,
      '不良数量': 10,
      '完成率': '90.00%',
      '用时': '2小时',
      '备注': ''
    },
    {
      '生产日期': '2024/8/3',
      '销售订单': 'G-00110',
      '产品名称': '订书机',
      '规格型号': '小型',
      '单位': '个',
      '计划产量': 100,
      '实际产量': 99,
      '不良数量': 11,
      '完成率': '99.00%',
      '用时': '3小时',
      '备注': ''
    },
    {
      '生产日期': '2024/8/4',
      '销售订单': 'G-00111',
      '产品名称': '笔记本',
      '规格型号': 'A5',
      '单位': '个',
      '计划产量': 150,
      '实际产量': 130,
      '不良数量': 15,
      '完成率': '86.67%',
      '用时': '4小时',
      '备注': ''
    },
    {
      '生产日期': '2024/8/5',
      '销售订单': 'G-00568',
      '产品名称': '笔筒',
      '规格型号': '500mm',
      '单位': '个',
      '计划产量': 200,
      '实际产量': 195,
      '不良数量': 20,
      '完成率': '97.50%',
      '用时': '5小时',
      '备注': ''
    },
    {
      '生产日期': '2024/8/6',
      '销售订单': 'G-00365',
      '产品名称': '毛笔',
      '规格型号': '小楷笔',
      '单位': '个',
      '计划产量': 250,
      '实际产量': 243,
      '不良数量': 22,
      '完成率': '97.20%',
      '用时': '6小时',
      '备注': ''
    },
    {
      '生产日期': '2024/8/7',
      '销售订单': 'G-00486',
      '产品名称': '铅笔',
      '规格型号': '184mm',
      '单位': '个',
      '计划产量': 300,
      '实际产量': 289,
      '不良数量': 21,
      '完成率': '96.33%',
      '用时': '7小时',
      '备注': ''
    },
    {
      '生产日期': '2024/8/8',
      '销售订单': 'G-00321',
      '产品名称': '文件袋',
      '规格型号': '240mm',
      '单位': '个',
      '计划产量': 350,
      '实际产量': 345,
      '不良数量': 25,
      '完成率': '98.57%',
      '用时': '8小时',
      '备注': ''
    },
    {
      '生产日期': '2024/8/9',
      '销售订单': 'G-00462',
      '产品名称': '文件盒',
      '规格型号': '500mm',
      '单位': '个',
      '计划产量': 400,
      '实际产量': 396,
      '不良数量': 26,
      '完成率': '99.00%',
      '用时': '9小时',
      '备注': ''
    },
    {
      '生产日期': '2024/8/10',
      '销售订单': 'G-00466',
      '产品名称': '水墨笔',
      '规格型号': '黑色',
      '单位': '个',
      '计划产量': 450,
      '实际产量': 441,
      '不良数量': 27,
      '完成率': '98.00%',
      '用时': '10小时',
      '备注': ''
    },
    {
      '生产日期': '2024/8/11',
      '销售订单': 'G-00468',
      '产品名称': '橡皮擦',
      '规格型号': '小熊',
      '单位': '个',
      '计划产量': 500,
      '实际产量': 498,
      '不良数量': 100,
      '完成率': '99.60%',
      '用时': '11小时',
      '备注': ''
    },
    {
      '生产日期': '2024/8/12',
      '销售订单': 'G-00500',
      '产品名称': '日历',
      '规格型号': 'A5',
      '单位': '个',
      '计划产量': 550,
      '实际产量': 530,
      '不良数量': 150,
      '完成率': '96.36%',
      '用时': '12小时',
      '备注': ''
    },
    {
      '生产日期': '2024/8/13',
      '销售订单': 'G-00510',
      '产品名称': '双面胶',
      '规格型号': '100m',
      '单位': '个',
      '计划产量': 600,
      '实际产量': 580,
      '不良数量': 35,
      '完成率': '96.67%',
      '用时': '13小时',
      '备注': ''
    },
    {
      '生产日期': '2024/8/14',
      '销售订单': 'G-00511',
      '产品名称': 'A4纸',
      '规格型号': '500张',
      '单位': '个',
      '计划产量': 650,
      '实际产量': 610,
      '不良数量': 50,
      '完成率': '93.85%',
      '用时': '14小时',
      '备注': ''
    },
    {
      '生产日期': '2024/8/15',
      '销售订单': 'G-00515',
      '产品名称': '美工刀',
      '规格型号': '小',
      '单位': '个',
      '计划产量': 700,
      '实际产量': 670,
      '不良数量': 100,
      '完成率': '95.71%',
      '用时': '15小时',
      '备注': ''
    },
    {
      '生产日期': '2024/8/16',
      '销售订单': 'G-00518',
      '产品名称': '剪刀',
      '规格型号': '中',
      '单位': '个',
      '计划产量': 600,
      '实际产量': 500,
      '不良数量': 60,
      '完成率': '83.33%',
      '用时': '16小时',
      '备注': ''
    },
    {
      '生产日期': '2024/8/17',
      '销售订单': 'G-00520',
      '产品名称': '墨水',
      '规格型号': '红色',
      '单位': '个',
      '计划产量': 500,
      '实际产量': 420,
      '不良数量': 80,
      '完成率': '84.00%',
      '用时': '17小时',
      '备注': ''
    },
    {
      '生产日期': '2024/8/18',
      '销售订单': 'G-00525',
      '产品名称': '文具盒',
      '规格型号': '卡通',
      '单位': '个',
      '计划产量': 500,
      '实际产量': 450,
      '不良数量': 100,
      '完成率': '90.00%',
      '用时': '18小时',
      '备注': ''
    }
  ]
};


const scrollShow = ref(true);

const props = defineProps({
  ratioWidth: {
    type: Number,
    required: false,
    default: 1
  },
  ratioHeight: {
    type: Number,
    required: false,
    default: 1
  },
  isView: {
    type: Boolean,
    required: false
  },
  inputData: {
    type: Object,
    required: false
  },
  id: {
    type: String,
    required: true
  },
  isHideHandle: {
    type: Boolean,
    required: false
  },
  selected: {
    type: Boolean,
    required: false
  },
  data: {
    type: Object,
    required: true
  },
  dimensions: {
    type: Object,
    required: true
  }
});
const formulaFun = (row, formula) => {
  let data = formula.replace(/\$\{\s*([^}]+?)\s*\}/g, (_, key) => {
    if (key === 'tableData') {
      return key;
    }
    if (`${row[key]}`?.trim() !== '' && !isNaN(row[key])) {
      return row[key] || 0;
    } else {
      return `"${row[key]}"`;
    }
  });
  let res = 0;
  try {
    const fun = new Function('tableData', `return ${data}`);
    res = fun(getData(props.inputData.tableData));
  } catch (err) {
    res = 0;
  }
  if (`${res}`.trim() !== '' && !isNaN(res)) {
    res = res.toFixed(2);
  }
  return res;
};
const setText = (value, row, formula) => {
  if (!formula) {
    return value;
  } else {
    return formulaFun(row, formula);
  }
};
const getData = (e) => {
  let val = e;
  (props.data.options.tableCellOptions || []).forEach(item => {
    e[item.index][`cellType${item.cellIndex + 1}`] = item.type;
    e[item.index][`cellFormula${item.cellIndex + 1}`] = item.formula;
  });
  return e;
};
watch(() => JSON.parse(JSON.stringify([props.inputData?.tableData || '', props.data.options])), (obj1, obj2) => {
  if (JSON.stringify(obj1) !== JSON.stringify(obj2)) {
    scrollShow.value = false;
    nextTick(() => {
      scrollShow.value = true;
    });
  }
}, { deep: true, immediate: true });
const emit = defineEmits(['resize']);
const resize = (e) => {
  emit('resize', e, props.id);
};
</script>
<style scoped>
.custom-node {
  position: absolute;
}

.scrollTable {
  display: inline-block;
  vertical-align: top;
}
</style>

