<template>
  <div class="custom-detail-list">
    <div class="model-table">
      <common-table :table-header="table?.header" :table-data="table?.data">
        <template #custom="scope">
          <ipu-popconfirm
            :btn-icon="'Delete'"
            :title="'确认删除自定义属性吗？'"
            @confirm="confirmEvent(scope.row)"
          ></ipu-popconfirm>
        </template>
      </common-table>
    </div>
    <div class="model-footer">
      <common-pagination :page="table[active]?.page"></common-pagination>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue';

const props = defineProps({
  attrDatas: {
    type: Array,
    default: () => []
  }
});
const table = ref({
  header: [
    { label: 'ID', name: 'id', width: '80', fixed: 'left' },
    { label: '名称', name: 'name', width: '100' },
    { label: '类型', name: 'type', width: '100' },
    { label: '最小', name: 'min', 'min-width': '100' },
    { label: '最大', name: 'max', 'min-width': '100' },
    { label: '小于', name: 'more', 'min-width': '100' },
    { label: '大于', name: 'less', 'min-width': '100' },
    { label: '等于', name: 'equal', 'min-width': '100' },
    { label: '不等于', name: 'unequal', 'min-width': '100' },
    { label: '表达式', name: 'expression', 'min-width': '100' },
    { label: '是否允许为空', name: 'nullable', 'min-width': '100' },
    { label: '小数刻度', name: 'precision', 'min-width': '180' },
    { label: '小数精度', name: 'precision', 'min-width': '180' },
    {
      label: '操作',
      name: 'custom',
      type: 'custom',
      fixed: 'right',
      width: '100'
    }
  ],
  // eslint-disable-next-line no-use-before-define
  data: fomateData()
});

// 数据格式化
function fomateData() {
  const data = [];
  props.attrDatas.forEach((item) => {
    data.push({
      ...item,
      ...item.validateRules
    });
  });
  return data;
}

// function deleteRow(item) {}

function confirmEvent(row) {
  console.log(row);
  table.value.data.forEach((item, index) => {
    if (item.id === row.id) {
      // eslint-disable-next-line vue/no-mutating-props
      props.attrDatas.splice(index, 1);
      table.value.data = fomateData();
    }
  });
}
</script>

<style scoped lang="scss">
.custom-detail-list {
}
</style>