<template>
  <div>
    <t-table
      class="dynamic-table"
      ref="tableRef"
      row-key="key"
      :columns="columns"
      :data="tableData"
      bordered
      size="small"
    >
      <template v-if="!readonly" #operate="{ row, rowIndex }">
        <div class="table-operations">
          <t-link theme="primary" hover="color" @click="handleEdit(row)">
            编辑
          </t-link>
          <t-link theme="primary" hover="color" @click="deleteRow(rowIndex)">
            删除
          </t-link>
        </div>
      </template>
      <template #deviceStatus="{ row }">
        <status-tag :value="row.deviceStatus" type="runningStatus"></status-tag>
      </template>
      <template #basePhotoPath="{ row }">
        <!-- <t-image
            v-if="row.basePhotoPath"
            :src="row.basePhotoPath"
            :style="{ width: '80px', height: '80px' }"
          /> -->
        <image-view
          v-if="row.basePhotoPath"
          :width="80"
          :height="80"
          :images="[row.basePhotoPath]"
        ></image-view>
      </template>
    </t-table>
    <t-button
      v-if="!readonly"
      class="m-t-10px"
      theme="primary"
      @click="handleAdd"
    >
      <template #icon><svg-icon name="add-circle" color="#fff" /></template>
      添加
    </t-button>

    <!-- EditColumnDialog -->
    <edit-column-dialog
      v-if="!readonly"
      v-model:visible="showEditColumnDialog"
      :curRow="curRow"
      :isOutType="isOutType"
      @success="columnConfirm"
      :tableData="tableData"
    ></edit-column-dialog>
  </div>
</template>
<script setup name="DEVICEOUTTABLE">
import { computed, ref, watch } from 'vue';
import EditColumnDialog from './edit-column-dialog.vue';

const props = defineProps({
  config: { type: Object },
  modelValue: { type: Array },
});
const emit = defineEmits(['update:modelValue', 'change']);

const tableData = ref([]);
const showEditColumnDialog = ref(false);
const curRow = ref(null);

const isOutType = computed(() => {
  return props.config.code === 'DEVICE_OUT_TABLE';
});
const readonly = computed(() => {
  return !props.config.writable;
});

const columns = [
  {
    title: '序号',
    colKey: 'key',
    align: 'center',
    width: 50,
  },
  {
    title: '设备编号',
    colKey: 'deviceNo',
    width: 120,
  },
  {
    title: '设备序列号',
    colKey: 'serialNo',
    width: 120,
  },
  {
    title: '供应商',
    colKey: 'supplierName',
  },
  {
    title: '运行状态',
    colKey: 'deviceStatus',
    width: 105,
  },
  {
    title: '总扫描量',
    colKey: 'scanCount',
    width: 80,
  },
  {
    title: '当前所在地',
    colKey: 'location',
  },
  {
    title: '发往地',
    colKey: 'address',
  },
  {
    title: '快递单拍照',
    colKey: 'basePhotoPath',
    width: 98,
  },
  {
    title: '操作',
    colKey: 'operate',
    width: 90,
    align: 'center',
  },
];
const resetKeys = () => {
  tableData.value.forEach((item, index) => {
    item.key = index + 1 + '';
  });
};

const handleAdd = () => {
  curRow.value = {
    key: '',
    deviceNo: '',
    supplierName: '',
    deviceStatus: '',
    deviceBrand: '',
    scanCount: '',
    location: '',
    address: '',
    addressArr: ['', '', ''],
    basePhotoPath: '',
  };
  showEditColumnDialog.value = true;
};
const handleEdit = (row) => {
  curRow.value = row;
  showEditColumnDialog.value = true;
};
const deleteRow = (row) => {
  let index = tableData.value.findIndex((item) => item.key == row.key);
  tableData.value.splice(index, 1);
  emitChange();
};

const columnConfirm = (data) => {
  if (data.key) {
    const pos = tableData.value.findIndex((item) => item.key === data.key);
    tableData.value.splice(pos, 1, data);
  } else {
    tableData.value.push(data);
  }
  emitChange();
};

const emitChange = () => {
  resetKeys();
  emit('update:modelValue', tableData.value);
  emit('change', tableData.value);
};

watch(
  () => props.modelValue,
  (val, oldval) => {
    if (val === oldval) return;
    const vals = val || [];
    tableData.value = vals;
  },
  {
    immediate: true,
  }
);
</script>
