<template>
  <div :id='elId' class="selectBoxPlus" style='width:100%;height:100%;'>
    <div class="contarnBox" style='width:100%;height:100%;'>
        <div class="selectTitle" v-show='configData.title'>{{configData.title}}</div>
         <div class="selectCurr" style='width:80%;height:100%;'>
            <template  v-if='elInfo.el=="hsDatePicker"'>
               <el-date-picker
                  size='mini'
                  v-model="value_inner"
                  :type="configData.type"
                  :value-format="configData.valueFormat"
                  :placeholder="configData.placeholder"
                  :range-separator="configData.rangeSeparator"
                  :start-placeholder="configData.startPlaceholder"
                  :end-placeholder="configData.endPlaceholder">
              </el-date-picker>
          </template>
        </div>
    </div>
    <jsoneditor v-model='jsoneditorVisible'
                :elInfo='elInfo'
                :layout='layout'
                :jsoneditorCloseAfter='jsoneditorCloseAfter'
                :jsoneditorOpenAfter='jsoneditorOpenAfter'
                >
    </jsoneditor>
  </div>
</template>
<script>
import jsoneditor from '../common/jsoneditor'
import ucComponent from '../ucClass/uc_component'
export default {
  mixins: [ucComponent],
  components: {
    jsoneditor
  },
  name: 'hsDatePicker',
  props: {
    elInfo: {
      type: Object,
      default() {
        return {}
      }
    },
    allSourceData: {
      type: Object,
      default() {
        return {}
      }
    },
    value: '',
    layout: {},
    jsoneditorCloseAfter: {
      type: Function
    },
    jsoneditorOpenAfter: {
      type: Function
    }
  },
  watch: {
    allSourceData: {
      handler: function(newVal, oldVal) {
        const { config } = newVal
        this.initConfig(config)
      },
      deep: true
    },
    value(val) {
      this.value_inner = val
    },
    value_inner(val) {
      this.$emit('input', val)
    }
  },
  data() {
    return {
      elId: '',
      value_inner: '',
      jsoneditorVisible: false,
      configData: {}
    }
  },
  mounted() {
    const { config } = this.allSourceData
    this.initConfig(config)
  },
  methods: {
    initConfig(config) {
      if (!config) return
      this.configData = config
    }
  }
}
</script>
<style scoped>
.hsInputBox{
  padding: 1px;
  width:100%;
  height:100%;
  display: flex;
}
.hsInputInner{
  height: 80%;
  width: 80%;
}
.inputTitle{
  flex:1;
  display: flex;
  justify-content: center;
  align-items: center;
}
.inputCurr{
  flex:1;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
}
.contarnBox{
  display: flex;
}
.selectTitle{
  flex:1;
  display: flex;
  justify-content: center;
  align-items: center;
}
.selectCurr{
  flex: 3;
  display: flex;
  justify-content: center;
  align-items: center;
}
.selectBoxPlus>>> .el-select>.el-input{
    height: 100%;
}
.selectBoxPlus>>>.el-select .el-input__inner{
  height: 100%;
}
</style>
