<template>
  <div class="title">
    批量操作
    <div class="close-button" @click="emits('closemergeSourceModal')"></div>
  </div>
  <div class="modal-content">
    <div class="cue-span">检测到以下数据存在冲突：</div>
    <div class="comparison-div">
      <div style="flex: 1;padding-right: 10px;" >
        <div class="table-title">原数据</div>
        <a-table rowKey="Id" ref="oldTable" :row-selection="oldRowSelection" :dataSource="props.originData" :columns="columns"
          :scroll="{ y: 472 }" :footer="null"  />
      </div>
      <div style="flex: 1;padding-left: 10px;" >
        <div class="table-title">新数据</div>
        <a-table rowKey="Id" ref="newTable" :row-selection="newRowSelection" :dataSource="props.nowData" :columns="columns"
          :scroll="{ y: 472 }" :footer="null"  />
      </div>
    </div>
    <div class="footer">
      <a-button type="primary" v-if="!openSelectSave" class="operation-button" @click="openSelectSave = true">手动修改</a-button>
      <a-button type="primary" v-if="!openSelectSave" class="operation-button" @click="saveOldValue">保留原数据</a-button>
      <a-button type="primary" v-if="!openSelectSave" class="operation-button" @click="saveNewValue">使用新数据覆盖</a-button>
      <a-button v-if="openSelectSave" class="operation-button" @click="openSelectSave = false">取消</a-button>
      <a-button type="primary" v-if="openSelectSave" class="operation-button" @click="saveSelect">保存</a-button>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, nextTick, onMounted, onUnmounted, defineEmits, defineProps, computed } from "vue"
import { UpdateTableOriginalData} from '@/api/demo/BatchProcessingModal'
import { message } from "ant-design-vue"
const emits = defineEmits(['closemergeSourceModal'])
const props = defineProps(['nowData','originData','tableColumn','tableName'])
const oldTable = ref()
const newTable = ref()
const openSelectSave = ref(false)
const selectOldValue = ref([])
const selectNewValue = ref([])
const columns = computed(() => {
  return props.tableColumn.map(item => {
    return {
      title: item.label.match(/[(（](.*?)[)）]/)[1],
      dataIndex: item.value,
    }
  })
})
onMounted(() => {
  nextTick(() => {
    const oldTableBody = oldTable.value?.$el.querySelector('.ant-table-body')
    const newTableBody = newTable.value?.$el.querySelector('.ant-table-body')
    if (oldTableBody && oldTableBody) {
      oldTableBody.addEventListener('scroll', (e) => {
        newTableBody.scrollTop = e.target.scrollTop
      })
      newTableBody.addEventListener('scroll', (e) => {
        oldTableBody.scrollTop = e.target.scrollTop
      })
    }
  })
})
const saveNewValue = () => {
  let resultParams = {
    tableName: props.tableName,
    list: []
  }
  if(props.nowData.length > 0){
    resultParams.list = props.nowData
  }
  UpdateTableOriginalData(resultParams).then(lastResult => {
    message.success('更新成功')
    emits('closemergeSourceModal')
  })
}
const saveOldValue = () => {
  let resultParams = {
    tableName: props.tableName,
    list: []
  }
  if(props.originData.length > 0){
    resultParams.list = props.originData
  }
  UpdateTableOriginalData(resultParams).then(lastResult => {
    message.success('更新成功')
    emits('closemergeSourceModal')
  })
}
const newRowSelection = computed(() => {
  if(openSelectSave.value){
    return {
      onChange: (selectedRowKeys, selectedRows) => {
        console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
        selectNewValue.value = selectedRows
      },
    }
  }
  return false
})

const oldRowSelection = computed(() => {
  if(openSelectSave.value){
    return {
      onChange: (selectedRowKeys, selectedRows) => {
        console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
        selectOldValue.value = selectedRows
      },
    }
  }
  return false
})

const saveSelect = () => {
  let resultParams = {
    tableName: props.tableName,
    list: [...selectOldValue.value, ...selectNewValue.value]
  }
  UpdateTableOriginalData(resultParams).then(lastResult => {
    message.success('更新成功')
    emits('closemergeSourceModal')
  })
}
onUnmounted(() => {

})

</script>

<style lang="scss" scoped>
.title{
  height: 86px;
  padding-left: 43px;
  padding-right: 43px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: PingFangSC-Regular;
  font-weight: 400;
  font-size: 36px;
  color: #1E1E20;
  line-height: 50px;
  user-select: none;
  border-bottom: 1px solid #E4E4E7;
  .close-button{
    width: 30px;
    height: 30px;
    background-image: url('/public/components/BatchProcessingModal/close_icon.png');
    background-size: 100% 100%;
    cursor: pointer;
  }
}
.modal-content{
  width: 100%;
  height: 790px;
  padding: 28px 44px 27px 34px;
  .cue-span{
    font-size: 20px;
    margin-bottom: 10px;
  }
  .comparison-div{
    display: flex;
    .table-title{
      font-size: 20px;
      margin-bottom: 10px;
    }
    :deep(.ant-table-body){
      height: 472px;
    }
  }
  .footer{
    width: 100%;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: end;
    .operation-button{
      width: 220px;
      height: 60px;
      margin-right: 16px;
      font-family: PingFangSC-Regular;
      font-weight: 400;
      font-size: 24px;
      line-height: 33px;
    }
  }
}
</style>
