<script lang="ts" setup>
let props = defineProps<{
  container?: HTMLElement;
}>()
const show = ref(false)
const ins = ref<HTMLElement | null>(null)
const data = reactive<DisposeRecodeTypes.DisposeRecodeData>({
  id: '',
  origin: '',
  clearingCompany: '',
  licensePlate: '',
  contact: '',
  contactPhone: '',
  inWeight: '',
  outWeight: '',
  suttleWeight: '',
  inTime: '',
  outTime: '',
  disposalSite: '',
})

onMounted(() => {
  let container = props.container
  if (container) {
    container.style.position = 'relative'
  }
})

defineExpose({
  open(detail: DisposeRecodeTypes.DisposeRecodeData) {
    Object.assign(data, detail)
    show.value = true
  }
})

</script>

<template>
  <IxModal ref="ins" v-model:visible="show" :container="container" :mask="false" cancel-text="关闭" class="dispose-recode-detail" draggable header="详情" maskClosable type="default" width="40rem">
    <p class="detail-item"><span>来源地：</span><span>{{ data.origin }}</span></p>
    <p class="detail-item"><span>清运公司：</span><span>{{ data.clearingCompany }}</span></p>
    <p class="detail-item"><span>车牌号：</span><span>{{ data.licensePlate }}</span></p>
    <p class="detail-item"><span>联系人：</span><span>{{ data.contact }}</span></p>
    <p class="detail-item"><span>联系电话：</span><span>{{ data.contactPhone }}</span></p>
    <p class="detail-item"><span>进场磅重（吨）：</span><span>{{ data.inWeight }}</span></p>
    <p class="detail-item"><span>出场磅重（吨）：</span><span>{{ data.outWeight }}</span></p>
    <p class="detail-item"><span>净重（吨）：</span><span>{{ data.suttleWeight }}</span></p>
    <p class="detail-item"><span>进场时间：</span><span>{{ data.inTime }}</span></p>
    <p class="detail-item"><span>出场时间：</span><span>{{ data.outTime }}</span></p>
    <p class="detail-item"><span>消纳场名称：</span><span>{{ data.disposalSite }}</span></p>
    <template #footer="{ cancel:_, ok }">
      <IxButton mode="primary" @click="ok">确定</IxButton>
    </template>
  </IxModal>
</template>

<style lang="stylus" scoped>
.dispose-recode-detail .detail-item:not(:last-child) {
  border-bottom: 1px #E5E7EB dashed;
  padding-bottom: 0.5rem;
}

:deep(.ix-modal-wrapper),
:deep(.ix-mask) {
  position absolute
}

.detail-item {
  display flex
  justify-content start
  align-items center

  span:nth-child(1) {
    flex 10
    font-weight bold
  }

  span:nth-child(2) {
    flex 14
    text-align end
    padding-right 10%
  }


  span {
    display inline-block
    color #1D2129
    font-size 1.25rem
  }
}
</style>
