<template >
  <div class=" inputs ht-custom-dialog-model" v-if="isModelVisible">
    <custom-mobile-dialog
      v-if="isMobile"
      ref="customMobileDialogRef"
      :value="valueCustomData"
      :value-custom-data="valueCustomData"
      :model-name="modelName"
      :custdialog="custdialog"
      :sub-index="subIndex"
      :sun-index="sunIndex"
      :sub-path="subPath"
      :current-sub-data="currentSubData"
      @calacInputSuffixHeight="calacInputSuffixHeight"
      @updateInput="updateInput"
    ></custom-mobile-dialog>
    <custom-dialog
      v-else
      ref="customDialogRef"
      :value="valueCustomData"
      :model-name="modelName"
      :custdialog="custdialog"
      :sub-index="subIndex"
      :sun-index="sunIndex"
      :sub-path="subPath"
      :is-preview="isPreview"
      :current-sub-data="currentSubData"
      @calacInputSuffixHeight="calacInputSuffixHeight"
      @updateInput="updateInput"
      @hideModel="hideModel"
    ></custom-dialog>
  </div>
</template>
<script>
  import mobileMode from '@/mixins/mobileMode.js'
  import customDialog from './customDialog.vue'
  import customMobileDialog from './customMobileDialog.vue'
  export default {
    name: 'HtCustomDialogModel',
    components: {
      customDialog,
      customMobileDialog,
    },
    mixins: [mobileMode],
    props: {
      value: String,
      valueCustomData: String,
      single: {
        type: Boolean,
        default: false,
      },
      custdialog: Object,
      tooltipplacement: Object,
      subIndex: Number,
      sunIndex: Number,
      subPath: String,
      currentSubData: Array,
      modelName: String,
      isSearchSelect: {
        type: Boolean,
        default: false,
      },
      disabled: {
        type: Boolean,
        default: false,
      },
      isValidate: {
        type: Boolean,
        default: false,
      },
      isPreview: {
        type: Boolean,
        default: false,
      },
    },
    data() {
      return {
        isModelVisible: false,
      }
    },
    computed: {},
    mounted() {},
    methods: {
      calacInputSuffixHeight() {
        this.$emit('calacInputSuffixHeight')
      },
      updateInput(data) {
        this.$emit('updateInput', data)
      },
      showDialog() {
        this.isModelVisible = true
        let this_ = this
        this.$nextTick(()=>{
          if (this_.isMobile) {
            this_.$refs.customMobileDialogRef.showDialog()
          } else {
            this_.$refs.customDialogRef.showDialog()
          }
        })
      },
      hideModel(){
        this.isModelVisible = false
      },
    },
  }
</script>
<style lang="scss" scoped></style>
