<script setup lang="ts">
import { shallowRef ,ref} from "vue";
import { mapKey } from "./config/apis"

const visible = shallowRef(false);

const data = ref([]);

function handleClose() { 
  data.value = [];
  visible.value = false;
}

defineExpose({
  onDisplay(row) { 
    visible.value = true;

    Object.keys(row.after_info).forEach(key => data.value.push({ 
      key,
      label: mapKey[key],
      before:row.before_info[key],
      after: row.after_info[key]
    }))
  }
})
</script>


<template>
  <ElDialog v-model="visible" title="产品修改差异对比" :width="'1040px'" center @close="handleClose">
    <ElTable size="small" border :data="data" max-height="400px">
      <ElTableColumn label="修改字段名称" prop="label" width="120px" showOverflowTooltip>
        <template #="{ row }">
          <template v-if="row.key === 'supplierName'">供应商名称</template>
          <template v-else-if="row.label === ''">--</template>
          <template v-else>{{row.label}}</template>
        </template>
      </ElTableColumn>
      <ElTableColumn label="修改字段" prop="key" width="120px" showOverflowTooltip />
      <ElTableColumn label="修改前" prop="before" showOverflowTooltip>
        <template #="{ row }">
          <div class="flex" v-if="row.key === 'good_img' || row.key === 'good_thumb_img' || row.key === 'good_info_img'">
            <ElImage v-for="src in row.before.split(',')" :src="src" :previewSrcList="[src]" style="height:20px;width:20px ;margin-right: 5px" />
          </div>

          <span v-else>
            {{row['before']}}
          </span>
        </template>        
      </ElTableColumn>
      <ElTableColumn label="修改后" prop="after" showOverflowTooltip>
        <template #="{ row }">
          <div class="flex" v-if="row.key === 'good_img' || row.key === 'good_thumb_img' || row.key === 'good_info_img'">
            <ElImage v-for="src in row.after.split(',')" :src="src" :previewSrcList="[src]" style="height:20px;width:20px ;margin-right: 5px" />
          </div>

          <span v-else>
            {{row['after']}}
          </span>
        </template>  
      </ElTableColumn>
    </ElTable>
  </ElDialog>
</template>
