<template>
  <Dialog :show="tempData.show"
          :vue-name="dialogConfig.vueName"
          :height="dialogConfig.height"
          :width="dialogConfig.width"
          :resize="true"
          :header="dialogConfig.header"
          :dialog-type="dialogConfig.type"
          :position="dialogConfig.position">
    <template slot="default">
      <ArriveLeaveQuery ref="DepartureInquiryTemp"
                        :type="tempData.infoData.type"
                        :port-id="tempData.infoData.portId">
      </ArriveLeaveQuery>
    </template>
  </Dialog>
</template>

<script lang="ts">
import {Component, Vue, Watch} from 'vue-property-decorator'
import Dialog from '@/components/dialog/index.vue'
import ArriveLeaveQuery from "@/components/arrive-leave-query/index.vue";

@Component({
  components: {
    Dialog,
    ArriveLeaveQuery
  },
  props: {
    tempData: {
      type: Object,
      required: true,
      default: () => {
        return {}
      }
    }
  }
})
export default class DepartureInquiryTemp extends Vue {
  private menuGroup = 'menu'
  private dialogConfig = {
    vueName: '',
    width: '86.5rem',
    height: '37.5rem',
    header: {
      title: '',
      hasIcon: false,
      iconSrc: '',
      hasMin: true,
      hasMax: false
    },
    position: {
      top: '10rem',
      left: '18.125rem'
    },
    who: ''
  }
  private language = window.localStorage.getItem('language')

  @Watch('tempData', {
    deep: true,
    immediate: true
  })
  dataChange(data: any) {
    const dialogData = data.dialogData
    this.dialogConfig.vueName = dialogData.vueName
    this.languageChange()
  }

  @Watch('language', {deep: true, immediate: true})
  languageChange() {
    const type = this.$props.tempData.infoData.type
    if (type === 'arrive') {
      this.dialogConfig.header.title = `${this.$t('message.PortQuery.arrive')}`
    } else if (type === 'leave') {
      this.dialogConfig.header.title = `${this.$t('message.PortQuery.leave')}`
    } else if (type === 'yj') {
      this.dialogConfig.header.title = `${this.$t('message.PortQuery.yj')}`
    } else if (type === 'crude') {
      this.dialogConfig.header.title = `${this.$t('message.PortQuery.Crude')}`
    }
  }

  public mounted() {
    window.addEventListener("setItemEvent", (e: any) => {
      if (e.key === 'language') {
        this.language = e.newValue
      }
    });
  }
}
</script>

<style scoped lang="scss">
</style>
