<template>
  <div class="inputs ht-custom-dialog-model">
    <custom-mobile-query-view
      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-query-view>
    <custom-query-view
      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"
      :tool-buttons="toolButtons"
      :column-buttons="columnButtons"
      :query-bind-options="queryBindOptions"
      :table-max-height="tableMaxHeight"
      @calacInputSuffixHeight="calacInputSuffixHeight"
      @updateInput="updateInput"
      @exports="exports"
      @toolButtonClick="toolButtonClick"
      @columnBtnClick="columnBtnClick"
    ></custom-query-view>
  </div>
</template>
<script>
  import mobileMode from '@/mixins/mobileMode.js'
  import customQueryView from './customQueryView.vue'
  import customMobileQueryView from './customMobileQueryView.vue'
  import utils from '@/utils'
  import _ from 'lodash'
  export default {
    name: 'HtCustomQueryView',
    components: {
      customQueryView,
      customMobileQueryView,
    },
    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,
      },
      toolButtons: {
        type: Array,
        default: () => [],
      },
      columnButtons: {
        type: Array,
        default: () => [],
      },
      queryBindOptions: {
        type: Object,
        default: null,
      },

      tableMaxHeight: {
        type: [Number, String],
        default: '',
      },
    },
    data() {
      return {
        unWatchList: [],
      }
    },
    computed: {},
    watch: {
      queryBindOptions: {
        handler(newVal) {
          this.addTrigger()
        },
        immediate: true,
        deep: true,
      },
    },
    beforeDestroy() {
      this.unWatchList.forEach((e) => {
        e()
      })
    },
    mounted() {},
    methods: {
      calacInputSuffixHeight() {
        this.$emit('calacInputSuffixHeight')
      },
      updateInput(data) {
        this.$emit('updateInput', data)
      },
      showDialog() {
        if (this.isMobile) {
          this.$refs.customMobileDialogRef.showDialog()
        } else {
          this.reSetBindPathValue()
          this.$refs.customDialogRef &&
            this.$refs.customDialogRef.setQueryBindOptions(
              this.queryBindOptions
            )
          this.$refs.customDialogRef.showDialog()
        }
      },
      exports(that) {
        this.$emit('exports', that)
      },
      toolButtonClick(func, that) {
        this.$emit('toolButtonClick', func, that)
      },
      columnBtnClick(func, that, row) {
        this.$emit('columnBtnClick', func, that, row)
      },
      addTrigger() {
        //数据视图控件
        let _me = this
        if (this.queryBindOptions) {
          const pInst = utils.getOnlineFormInstance(
            this.$parent.$parent.$parent.$parent
          )
          if (
            pInst.data &&
            !pInst.data[this.queryBindOptions.boDefAlias] &&
            this.queryBindOptions.boDefAlias
          ) {
            this.queryBindOptions.boDefAlias = Object.keys(pInst.data)[0]
          }
          //关联查询字段
          let selectList = this.queryBindOptions.selectList
          if (selectList && selectList.length > 0) {
            for (let i = 0; i < selectList.length; i++) {
              if (selectList[i].selectField) {
                const path =
                  'data.' +
                  this.queryBindOptions.boDefAlias +
                  '.' +
                  selectList[i].selectField
                //添加监听
                let watchObj = pInst.$watch(path, function (newVal, oldVal) {
                  _.debounce(() => {
                    if (newVal !== oldVal) {
                      console.log('值变更：' + newVal)
                      _me.queryBindOptions.selectList[i].selectValue = newVal
                      _me.$refs.customDialogRef &&
                        _me.$refs.customDialogRef.setQueryBindOptions(
                          _me.queryBindOptions
                        )
                      _me.$refs.customDialogRef &&
                        _me.$refs.customDialogRef.loadData()
                    }
                  }, 500)()
                })
                this.unWatchList.push(watchObj)
              }
            }
            console.log(this.unWatchList)
          }
        }
      },
      reSetBindPathValue() {
        //数据视图控件
        let _me = this
        if (this.queryBindOptions) {
          const pInst = utils.getOnlineFormInstance(
            this.$parent.$parent.$parent.$parent
          )
          if (
            pInst.data &&
            !pInst.data[this.queryBindOptions.boDefAlias] &&
            this.queryBindOptions.boDefAlias
          ) {
            this.queryBindOptions.boDefAlias = Object.keys(pInst.data)[0]
          }
          //关联查询字段
          let selectList = this.queryBindOptions.selectList
          if (selectList && selectList.length > 0) {
            for (let i = 0; i < selectList.length; i++) {
              if (selectList[i].selectField) {
                const path =
                  'data.' +
                  this.queryBindOptions.boDefAlias +
                  '.' +
                  selectList[i].selectField
                selectList[i].selectValue = this.getPathValue(
                  selectList[i],
                  pInst,
                  path
                )
              }
            }
          }
        }
      },
      getPathValue(selectObj, pInst, path) {
        let value = utils.getValueByPath(pInst, path)
        //获取绑定的类型，判断是否和选择的类型一致，此处针对时间格式和字符串格式匹配的兼容处理
        const selectFieldType = selectObj.selectFieldType
        const bindSelectdType = selectObj.bindSelectdType
        if (
          selectFieldType &&
          bindSelectdType &&
          selectFieldType !== bindSelectdType
        ) {
          if (
            bindSelectdType.includes('date') ||
            selectFieldType.includes('date')
          ) {
            //如果不为日期格式，则给一个空字符串 isNaN(value) && !isNaN(Date.parse(value))
            // 可以判断是个字符串是否是时间格式，取反则表示无法转换成字符串，则改一默认值
            if (!(isNaN(value) && !isNaN(Date.parse(value)))) {
              value = ''
            }
          }
        }
        return value
      },
    },
  }
</script>
<style lang="scss" scoped></style>
