<script setup lang="ts">import { inject, onMounted, ref, watch } from 'vue'
import { dialogMap } from '@/components/Map/dialogMap'

interface Props {
  initAction: Function;
  confirmAction:Function;
  openAction:Function;
  showData:any;
}
const isShow = inject('isShow')
const name = inject('name')
const props = defineProps<Props>();
const dialogOverflowVisible = ref<boolean>(isShow as boolean);
const emits = defineEmits(['closeDialog'])
const handleClick = (confirm: boolean) => {
  // 直接调用props.action，并传递dialogOverflowVisible和一个布尔值
  if(confirm){
    props.confirmAction.apply(this);
    dialogOverflowVisible.value = false;
  }else {
    dialogOverflowVisible.value = false;
  }
};
const data = ref([])
watch(() => props.showData, (newValue) => {
  if(newValue.records){
    // console.log('这是records类型的详情')
    // console.log(newValue.records)
    newValue.records.forEach((item:any)=>{
      const map = new Map()
      for (let itemKey in item) {
        if(itemKey == 'id') continue;
        if(dialogMap.get(itemKey) == '录入时间'){
          map.set(dialogMap.get(itemKey),item[itemKey]?.split('T')[0])
          continue;
        }
        if(dialogMap.get(itemKey) == '统计时间'){
          map.set(dialogMap.get(itemKey),item[itemKey]?.split('T')[0])
          continue;
        }
        if(dialogMap.get(itemKey) == '许可决定日期'){
          map.set(dialogMap.get(itemKey),item[itemKey]?.split('T')[0])
          continue;
        }
        if(dialogMap.get(itemKey) == '有效起始日期'){
          map.set(dialogMap.get(itemKey),item[itemKey]?.split('T')[0])
          continue;
        }
        if(dialogMap.get(itemKey) == '有效截至日期'){
          map.set(dialogMap.get(itemKey),item[itemKey]?.split('T')[0])
          continue;
        }
        if(dialogMap.get(itemKey) == '立案时间'){
          map.set(dialogMap.get(itemKey),item[itemKey]?.split('T')[0])
          continue;
        }
        if(dialogMap.get(itemKey) == '处罚决定日期'){
          map.set(dialogMap.get(itemKey),item[itemKey]?.split('T')[0])
          continue;
        }
        if(dialogMap.get(itemKey) == '处罚有效期'){
          map.set(dialogMap.get(itemKey),item[itemKey]?.split('T')[0])
          continue;
        }
        if(dialogMap.get(itemKey) == '法定代表人证件号码'){
          map.set(dialogMap.get(itemKey),'**************')
          continue;
        }
        map.set(dialogMap.get(itemKey),item[itemKey])
      }
      data.value.push(map);
    })

  }
})
const clearData = ()=>{
  emits('closeDialog')
  data.value = []
}
onMounted(()=>{
  props.initAction.apply()
})
</script>

<template>
  <el-dialog
    v-model="dialogOverflowVisible"
    :title="name"
    width="800"
    draggable
    overflow
    destroy-on-close
    center
    @open="props.openAction.apply()"
    @close="clearData"
  >
    <div>
      <div v-for="(item,index) in data" :key="index" class="h-300px overflow-auto mt-20px">
        <div v-for="(k,i) in item" :key="i" class="flex border-solid border-2 border-gray p-10px">
          <div class="w-20%">
            {{k[0]}}：
          </div>
          <div class="w-80%">
            {{k[1]}}
          </div>
        </div>
      </div>
    </div>
    <template #footer>
      <div class="dialog-footer">
        <!-- 传递dialogOverflowVisible和false给handleClick -->
        <el-button @click="handleClick(false)">关闭</el-button>
        <!-- 传递dialogOverflowVisible和true给handleClick -->
        <el-button type="primary" @click="handleClick(true)">
          确认
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<style scoped>
::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-track {
  background-color: transparent;
}

::-webkit-scrollbar-thumb {
  background-color: rgba(0, 0, 0, 0.2);
  border-radius: 4px;
  border: 1px solid rgba(0, 0, 0, 0.5);
  background-clip: content-box;
}

::-webkit-scrollbar-thumb:hover {
  background-color: rgba(0, 0, 0, 0.4);
}

::-webkit-scrollbar-button {
  display: none;
}
</style>