<!-- 
 * @name    formitem组件  
 * @authors pen (you@example.org)
 * @date    2022-06-15
 * @version 1.0.0
 -->
 <template>
  <div class="form_item">
    <!-- 输入框 input   v-d-input-point2="item.inputPoint2"-->
    <el-input
      v-if="['input', 'textarea'].includes(item.type)"
      @change="value => updateForm(value, item)"
      @keyup.enter.native="e => enterEvent(e)"
      @click.native="itemClick"
      @focus="focusEvent(item)"
      :style="item.inputStyle ? item.inputStyle : inputStyle"
      v-model="item.value"
      :type="
        item.inputType
          ? item.inputType
          : item.type == 'input'
          ? 'text'
          : item.type
      "
      :size="inputSize"
      :name="item.prop"
      :disabled="item.disabled"
      :readonly="item.readonly"
      :placeholder="item.placeholder"
      :suffix-icon="item.suffixIcon"
      :prefix-icon="item.prefixIcon"
      :clearable="item.clearable === undefined ? true : item.clearable"
      :maxlength="item.maxlength"
      :minlength="item.minlength"
      :max="item.max"
      :min="item.min"
      :step="item.step"
      :resize="item.resize"
      :autofocus="item.autofocus"
      :form="item.form"
      :label="item.label"
      :tabindex="item.tabindex"
      :show-password="item.showPassword"
      :show-word-limit="item.showWordLimit"
      :autocomplete="item.autocomplete"
      :validate-event="item.validateEvent"
      :rows="item.rows || 1"
    >
      <template :slot="item.slotName" v-if="item.slotData">{{
        item.slotData
      }}</template>
    </el-input>
    <!-- 选择器 select-->
    <el-select
      v-if="item.type == 'select'"
      @change="value => updateForm(value, item)"
      @focus="focusEvent(item)"
      :style="item.inputStyle ? item.inputStyle : inputStyle"
      v-model="item.value"
      :multiple="item.multiple"
      :disabled="item.disabled"
      :value-key="item.valueKey"
      :size="inputSize"
      :clearable="item.clearable === undefined ? true : item.clearable"
      :collapse-tags="item.collapseTags"
      :multiple-limit="item.multipleLimit"
      :autocomplete="item.autocomplete"
      :placeholder="item.placeholder"
      :filterable="item.filterable ? item.filterable : true"
      :allow-create="item.allowCreate"
      :filter-method="item.filterMethod"
      :remote="item.remote"
      :remote-method="value => remoteMethod(value, item)"
      :loading="item.loading"
      :loading-text="item.loadingText"
      :no-match-text="item.noMatchText"
      :no-data-text="item.noDataText"
      :popper-class="item.popperClass"
      :reserve-keyword="item.reserveKeyword"
      :default-first-option="item.defaultFirstOption"
      :popper-append-to-body="item.popperAppendToBody"
      :readonly="item.readonly"
      :automatic-dropdown="item.automaticDropdown"
    >
      <el-option
        v-for="(ele, index) in item.options"
        :label="ele.label"
        :value="ele.value"
        :key="index"
      ></el-option>
    </el-select>
    <!-- 级联选择器 cascader-->
    <el-cascader
      v-if="item.type == 'cascader'"
      v-model="item.value"
      :options="item.options"
      :props="item.props"
      :size="inputSize"
      :placeholder="item.placeholder"
      :disabled="item.disabled"
      :style="item.inputStyle ? item.inputStyle : inputStyle"
      :clearable="item.clearable === undefined ? true : item.clearable"
      :show-all-levels="item.showAllLevels"
      :collapse-tags="item.collapseTags"
      :separator="item.separator"
      :filterable="item.filterable ? item.filterable : true"
      :filter-method="item.filterMethod"
      :debounce="item.debounce"
      :before-filter="item.beforeFilter"
      :popper-class="item.popperClass"
      @change="value => updateForm(value, item)"
      @focus="focusEvent(item)"
    ></el-cascader>
    <!-- 匹配类型输入框  matchInput-->
    <el-input
      v-if="item.type == 'matchInput'"
      @click.native="itemClick"
      @change="value => updateForm(value, item)"
      @keyup.enter.native="e => enterEvent(e)"
      @focus="focusEvent(item)"
      class="query_form_match_input"
      v-model="item.value"
      :style="item.inputStyle ? item.inputStyle : inputStyle"
      :size="inputSize"
      :name="item.prop"
      :disabled="item.disabled"
      :readonly="item.readonly"
      :placeholder="item.placeholder"
      :suffix-icon="item.suffixIcon"
      :prefix-icon="item.prefixIcon"
      :clearable="item.clearable === undefined ? true : item.clearable"
      :maxlength="item.maxlength"
      :minlength="item.minlength"
      :max="item.max"
      :min="item.min"
      :step="item.step"
      :resize="item.resize"
      :autofocus="item.autofocus"
      :form="item.form"
      :label="item.label"
      :tabindex="item.tabindex"
      :show-password="item.showPassword"
      :show-word-limit="item.showWordLimit"
      :autocomplete="item.autocomplete"
      :validate-event="item.validateEvent"
    >
      <el-select
        slot="prepend"
        v-if="item[MATCH_TYPE]"
        @focus="focusEvent(item[MATCH_TYPE])"
        @change="value => updateForm(item[MATCH_TYPE].value, item)"
        :placeholder="item[MATCH_TYPE].placeholder"
        :clearable="item[MATCH_TYPE].clearable"
        :disabled="item[MATCH_TYPE].disabled"
        :readonly="item[MATCH_TYPE].readonly"
        :size="inputSize"
        :filterable="
          item[MATCH_TYPE].filterable ? item[MATCH_TYPE].filterable : true
        "
        :remote="item[MATCH_TYPE].remote"
        :remote-method="value => remoteMethod(value, item[MATCH_TYPE])"
        :loading="item[MATCH_TYPE].loading"
        :style="
          item[MATCH_TYPE].inputStyle ? item[MATCH_TYPE].inputStyle : inputStyle
        "
        v-model="item[MATCH_TYPE].value"
        :multiple="item[MATCH_TYPE].multiple"
        :value-key="item[MATCH_TYPE].valueKey"
        :collapse-tags="item[MATCH_TYPE].collapseTags"
        :multiple-limit="item[MATCH_TYPE].multipleLimit"
        :autocomplete="item[MATCH_TYPE].autocomplete"
        :allow-create="item[MATCH_TYPE].allowCreate"
        :filter-method="item[MATCH_TYPE].filterMethod"
        :loading-text="item[MATCH_TYPE].loadingText"
        :no-match-text="item[MATCH_TYPE].noMatchText"
        :no-data-text="item[MATCH_TYPE].noDataText"
        :popper-class="item[MATCH_TYPE].popperClass"
        :reserve-keyword="item[MATCH_TYPE].reserveKeyword"
        :default-first-option="item[MATCH_TYPE].defaultFirstOption"
        :popper-append-to-body="item[MATCH_TYPE].popperAppendToBody"
        :automatic-dropdown="item[MATCH_TYPE].automaticDropdown"
      >
        <el-option
          v-for="(ele, index) in MATCH_TYPE_OPTION || item[MATCH_TYPE].options"
          :label="ele.label"
          :value="ele.value"
          :key="index"
        ></el-option>
      </el-select>
    </el-input>
    <!-- 单选框 radio -->
    <el-radio-group
      v-model="item.value"
      v-if="item.type == 'radio'"
      :style="item.inputStyle ? item.inputStyle : inputStyle"
      @change="value => updateForm(value, item)"
      :size="inputSize"
      :disabled="item.disabled"
      :text-color="item.textColor"
      :readonly="item.readonly"
      :fill="item.fill"
    >
      <el-radio
        v-for="(ele, index) in item.radioItems"
        :key="index"
        :label="ele.value"
        :disabled="ele.disabled"
        :border="ele.border"
        :size="ele.size"
        :name="ele.name"
        >{{ ele.label }}</el-radio
      >
    </el-radio-group>
    <!-- 多选框 checkbox-->
    <el-checkbox-group
      v-model="item.value"
      v-if="item.type == 'checkbox'"
      :style="item.inputStyle ? item.inputStyle : inputStyle"
      :size="inputSize"
      :disabled="item.disabled"
      :min="item.min"
      :max="item.max"
      :text-color="item.textColor"
      :fill="item.fill"
    >
      <el-checkbox
        v-for="(ele, idx) in item.checkboxItems"
        :key="idx"
        :label="ele.value"
        :true-label="ele.trueLabel"
        :false-label="ele.falseLabel"
        :disabled="ele.disabled"
        :border="ele.border"
        :size="ele.size"
        :name="ele.name"
        :checked="ele.checked"
        :indeterminate="ele.indeterminate"
        @change="value => updateForm(value, item)"
        >{{ ele.label }}</el-checkbox
      >
    </el-checkbox-group>
    <!-- 开关 switch -->
    <el-switch
      v-if="item.type == 'switch'"
      @change="value => updateForm(value, item)"
      :style="item.inputStyle ? item.inputStyle : inputStyle"
      v-model="item.value"
      :disabled="item.disabled"
      :readonly="item.readonly"
      :width="item.width"
      :active-icon-class="item.activeIconClass"
      :inactive-icon-class="item.inactiveIconClass"
      :active-text="item.activeText"
      :inactive-text="item.inactiveText"
      :active-value="item.activeValue"
      :inactive-value="item.inactiveValue"
      :active-color="item.activeColor"
      :inactive-color="item.inactiveColor"
      :name="item.name"
      :validate-event="item.validateEvent"
    >
    </el-switch>
    <!-- 日期 date daterange datetime-->
    <el-date-picker
      v-if="
        ['date', 'daterange', 'datetime', 'datetimerange'].includes(item.type)
      "
      @change="value => updateForm(value, item)"
      @focus="focusEvent(item)"
      v-model="item.value"
      :type="item.dateType || item.type"
      :style="item.inputStyle ? item.inputStyle : inputStyle"
      :readonly="item.readonly"
      :disabled="item.disabled"
      :editable="item.editable"
      :clearable="item.clearable === undefined ? true : item.clearable"
      :size="inputSize"
      :placeholder="item.placeholder"
      :start-placeholder="
        item.dateHolder && item.dateHolder.start
          ? item.dateHolder.start
          : '开始日期'
      "
      :end-placeholder="
        item.dateHolder && item.dateHolder.end
          ? item.dateHolder.end
          : '结束日期'
      "
      :format="item.format"
      :align="item.align"
      :popper-class="item.popperClass"
      :picker-options="item.pickerOptions"
      :range-separator="item.rangeSeparator"
      :default-value="item.defaultValue"
      :default-time="item.defaultTime"
      :value-format="
        item.valueFormat === undefined ? 'timestamp' : item.valueFormat
      "
      :name="item.name"
      :unlink-panels="item.unlinkPanels"
      :prefix-icon="item.prefixIcon"
      :clear-icon="item.clearIcon"
      :validate-event="item.validateEvent"
      :append-to-body="item.appendToBody"
    ></el-date-picker>
    <!-- 时间选择器（固定时间点） timeSelect -->
    <el-time-select
      v-if="item.type === 'timeSelect'"
      @focus="focusEvent(item)"
      @change="value => updateForm(value, item)"
      v-model="item.value"
      :readonly="item.readonly"
      :disabled="item.disabled"
      :editable="item.editable"
      :clearable="item.clearable === undefined ? true : item.clearable"
      :size="inputSize"
      :placeholder="item.placeholder"
      :start-placeholder="
        item.dateHolder && item.dateHolder.start
          ? item.dateHolder.start
          : '开始日期'
      "
      :end-placeholder="
        item.dateHolder && item.dateHolder.end
          ? item.dateHolder.end
          : '结束日期'
      "
      :align="item.align"
      :popper-class="item.popperClass"
      :picker-options="item.pickerOptions"
      :range-separator="item.rangeSeparator"
      :value-format="
        item.valueFormat === undefined ? 'timestamp' : item.valueFormat
      "
      :default-value="item.defaultValue"
      :name="item.name"
      :prefix-icon="item.prefixIcon"
      :clear-icon="item.clearIcon"
      :start="item.start"
      :end="item.end"
      :step="item.step"
      :minTime="item.minTime"
      :maxTime="item.maxTime"
    >
    </el-time-select>
    <!-- 时间选择器(任意时间点) timePicker -->
    <el-time-picker
      v-if="item.type === 'timePicker'"
      @focus="focusEvent(item)"
      @change="value => updateForm(value, item)"
      v-model="item.value"
      :readonly="item.readonly"
      :disabled="item.disabled"
      :editable="item.editable"
      :clearable="item.clearable === undefined ? true : item.clearable"
      :size="inputSize"
      :placeholder="item.placeholder"
      :start-placeholder="
        item.dateHolder && item.dateHolder.start
          ? item.dateHolder.start
          : '开始日期'
      "
      :end-placeholder="
        item.dateHolder && item.dateHolder.end
          ? item.dateHolder.end
          : '结束日期'
      "
      :is-range="item.isRange"
      :arrow-control="item.arrowControl"
      :align="item.align"
      :popper-class="item.popperClass"
      :picker-options="item.pickerOptions"
      :range-separator="item.rangeSeparator"
      :value-format="
        item.valueFormat === undefined ? 'timestamp' : item.valueFormat
      "
      :default-value="item.defaultValue"
      :name="item.name"
      :prefix-icon="item.prefixIcon"
      :clear-icon="item.clearIcon"
      :selectableRange="item.selectableRange"
      :format="item.format"
    >
    </el-time-picker>
    <!--滑块 slider -->
    <el-slider
      v-if="item.type == 'slider'"
      @change="value => updateForm(value, item)"
      @input="value => updateForm(value, item)"
      v-model="item.value"
      :min="item.min"
      :max="item.max"
      :disabled="item.disabled"
      :step="item.step"
      :show-input="item.showInput"
      :show-input-controls="item.showInputControls"
      :input-size="item.inputSize"
      :show-stops="item.showStops"
      :show-tooltip="item.showTooltip"
      :format-tooltip="item.formatTooltip"
      :range="item.range"
      :vertical="item.vertical"
      :height="item.height"
      :label="item.label"
      :debounce="item.debounce"
      :tooltip-class="item.tooltipClass"
      :marks="item.marks"
    ></el-slider>
    <picker-option-date
      v-if="item.type == 'pickerOptionDate'"
      :item="item"
      @change="value => updateForm(value, item)"
    ></picker-option-date>
    <!-- textarea -->
    <!-- <el-input
      v-model="item.value"
      v-if="item.type == 'textarea'"
      :placeholder="item.placeholder"
      :size="inputSize"
      type="textarea"
      :clearable="item.clearable === undefined ? true : item.clearable"
      :rows="item.rows || 1"
      @change="value => updateForm(value, item)"
      :style="item.inputStyle ? item.inputStyle : inputStyle"
      @focus="focusEvent(item)"
      :disabled="item.disabled"
      :readonly="item.readonly"
    ></el-input> -->
    <!-- 计数器 inputNumber -->
    <el-input-number
      v-if="item.type == 'inputNumber'"
      @keyup.enter.native="e => enterEvent(e)"
      @change="value => updateForm(value, item)"
      @focus="focusEvent(item)"
      class="form_number"
      v-model="item.value"
      :clearable="item.clearable === undefined ? true : item.clearable"
      :size="inputSize"
      :min="item.min"
      :max="item.max"
      :step="item.step"
      :step-strictly="item.stepStrictly"
      :label="item.label"
      :style="item.inputStyle ? item.inputStyle : inputStyle"
      :controls="item.controls === undefined ? item.controls : false"
      :controls-position="item.controlsPosition"
      :name="item.name"
      :precision="item.precision"
      :disabled="item.disabled"
      :placeholder="item.placeholder"
    >
    </el-input-number>
    <!-- 混合输入框 mixInput-->
    <el-input
      v-if="item.type == 'mixInput'"
      v-model="item.value"
      @keyup.enter.native="e => enterEvent(e)"
      :placeholder="item.placeholder"
      :type="item.inputType ? item.inputType : 'text'"
      :clearable="item.clearable === undefined ? true : item.clearable"
      @change="value => updateForm(value, item)"
      :style="item.inputStyle ? item.inputStyle : inputStyle"
      :size="inputSize"
      @click.native="itemClick"
      :name="item.prop"
      :disabled="item.disabled"
      :readonly="item.readonly"
      @focus="focusEvent(item)"
      :suffix-icon="item.suffixIcon"
      :prefix-icon="item.prefixIcon"
      :maxlength="item.maxlength"
      :minlength="item.minlength"
      :max="item.max"
      :min="item.min"
      :step="item.step"
      :resize="item.resize"
      :autofocus="item.autofocus"
      :form="item.form"
      :label="item.label"
      :tabindex="item.tabindex"
      :show-password="item.showPassword"
      :show-word-limit="item.showWordLimit"
      :autocomplete="item.autocomplete"
      :validate-event="item.validateEvent"
    >
      <el-button
        @click="mixInputButtonEvent(item)"
        slot="append"
        :icon="item.appendIcon"
        :disabled="item.buttonDisabled"
        :size="item.size"
        :type="item.type"
        :plain="item.plain"
        :round="item.round"
        :circle="item.circle"
        :loading="item.loading"
        :autofocus="item.autofocus"
        :native-type="item.nativeType"
        >{{ item.appendText }}</el-button
      >
    </el-input>
    <!-- 范围输入框 rangeInput-->
    <div v-if="item.type == 'rangeInput'" class="query_form_range_input">
      <el-input
        v-if="item[RANGE_OPTION].length"
        v-model="item[RANGE_OPTION][0].value"
        @keyup.enter.native="e => enterEvent(e)"
        @change="updateForm(item[RANGE_OPTION])"
        :type="
          item[RANGE_OPTION][0].inputType
            ? item[RANGE_OPTION][0].inputType
            : 'text'
        "
        :style="
          item[RANGE_OPTION][0].inputStyle
            ? item[RANGE_OPTION][0].inputStyle
            : inputStyle
        "
        :size="inputSize"
        @click.native="itemClick"
        :name="item[RANGE_OPTION][0].prop"
        :disabled="item[RANGE_OPTION][0].disabled"
        :readonly="item[RANGE_OPTION][0].readonly"
        :placeholder="item[RANGE_OPTION][0].placeholder"
        :suffix-icon="item[RANGE_OPTION][0].suffixIcon"
        :prefix-icon="item[RANGE_OPTION][0].prefixIcon"
        :clearable="
          item[RANGE_OPTION][0].clearable === undefined
            ? true
            : item[RANGE_OPTION][0].clearable
        "
        :show-password="item[RANGE_OPTION][0].showPassword"
        @focus="focusEvent(item[RANGE_OPTION][0])"
        :maxlength="item[RANGE_OPTION][0].maxlength"
        :minlength="item[RANGE_OPTION][0].minlength"
        :max="item[RANGE_OPTION][0].max"
        :min="item[RANGE_OPTION][0].min"
        :step="item[RANGE_OPTION][0].step"
        :resize="item[RANGE_OPTION][0].resize"
        :autofocus="item[RANGE_OPTION][0].autofocus"
        :form="item[RANGE_OPTION][0].form"
        :label="item[RANGE_OPTION][0].label"
        :tabindex="item[RANGE_OPTION][0].tabindex"
        :show-word-limit="item[RANGE_OPTION][0].showWordLimit"
        :autocomplete="item[RANGE_OPTION][0].autocomplete"
        :validate-event="item[RANGE_OPTION][0].validateEvent"
      >
      </el-input>
      <span style="padding: 0 10px"> - </span>
      <el-input
        v-if="item[RANGE_OPTION].length"
        v-model="item[RANGE_OPTION][1].value"
        @keyup.enter.native="e => enterEvent(e)"
        @change="updateForm(item[RANGE_OPTION])"
        :type="
          item[RANGE_OPTION][1].inputType
            ? item[RANGE_OPTION][1].inputType
            : 'text'
        "
        :style="
          item[RANGE_OPTION][1].inputStyle
            ? item[RANGE_OPTION][1].inputStyle
            : inputStyle
        "
        :size="inputSize"
        @click.native="itemClick"
        :name="item[RANGE_OPTION][1].prop"
        :disabled="item[RANGE_OPTION][1].disabled"
        :readonly="item[RANGE_OPTION][1].readonly"
        :placeholder="item[RANGE_OPTION][1].placeholder"
        :suffix-icon="item[RANGE_OPTION][1].suffixIcon"
        :prefix-icon="item[RANGE_OPTION][1].prefixIcon"
        :clearable="
          item[RANGE_OPTION][1].clearable === undefined
            ? true
            : item[RANGE_OPTION][1].clearable
        "
        :show-password="item[RANGE_OPTION][1].showPassword"
        @focus="focusEvent(item[RANGE_OPTION][1])"
        :maxlength="item[RANGE_OPTION][1].maxlength"
        :minlength="item[RANGE_OPTION][1].minlength"
        :max="item[RANGE_OPTION][1].max"
        :min="item[RANGE_OPTION][1].min"
        :step="item[RANGE_OPTION][1].step"
        :resize="item[RANGE_OPTION][1].resize"
        :autofocus="item[RANGE_OPTION][1].autofocus"
        :form="item[RANGE_OPTION][1].form"
        :label="item[RANGE_OPTION][1].label"
        :tabindex="item[RANGE_OPTION][1].tabindex"
        :show-word-limit="item[RANGE_OPTION][1].showWordLimit"
        :autocomplete="item[RANGE_OPTION][1].autocomplete"
        :validate-event="item[RANGE_OPTION][1].validateEvent"
      >
      </el-input>
    </div>
  </div>
</template>
<script>
import formMixin from '../../mixins/formMixin.js'
import pickerOptionDate from './pickerOptionDate.vue'
export default {
  name: 'form-item-view',
  mixins: [formMixin],
  components: {
    pickerOptionDate
  },
  props: {
    item: {
      type: Object
    },
    inputStyle: Object
  },
  data() {
    return {
      MATCH_TYPE: 'matchType',
      RANGE_OPTION: 'rangeOptions',
      MATCH_TYPE_OPTION: [
        {
          label: '精准匹配',
          value: 'equals'
        },
        {
          label: '模糊匹配',
          value: 'like'
        }
      ]
    }
  },
  methods: {
    updateForm(value, item) {
      this.$emit('update-form', value, item)
    }
  }
}
</script>
<style>
.query_form_match_input .el-input {
  width: 90px;
  font-size: 12px;
}
.query_form_match_input .el-input__inner {
  border-radius: 0 6px 6px 0 !important;
  padding-right: 0px;
}
.query_form_match_input .el-input-group__prepend {
  background-color: #fafafa;
  border-top-left-radius: 6px;
  border-bottom-left-radius: 6px;
}
.query_form_range_input {
  display: flex;
  align-items: baseline;
}
.query_form_range_input .el-input__inner {
  padding-right: 0px;
}
</style>
<style lang="less" scoped>
.form_number {
  width: 100%;
}
.form_item {
  // .el-date-editor--daterange.el-input,
  // .el-date-editor--daterange.el-input__inner,
  // .el-date-editor--timerange.el-input,
  // .el-date-editor--timerange.el-input__inner {
  //   width: 100%;
  // }
  // .el-date-editor.el-input,
  // .el-date-editor.el-input__inner {
  //   width: 100%;
  // }
  // /deep/ .el-input__inner {
  //   border-radius: 6px;
  //   height: 32px;
  //   // line-height: 0;
  //   user-select: text;
  // }
  // /deep/ .el-select {
  //   width: 100%;
  // }
  // /deep/ .el-cascader {
  //   width: 100%;
  // }
  // formview的样式
  // 文本框禁用背景颜色
  // /deep/ .el-textarea.is-disabled .el-textarea__inner {
  //   background-color: #f5f5f5;
  // }
  // /deep/ .el-range-editor.is-disabled {
  //   background-color: #f5f5f5;
  // }
  // /deep/ .el-switch__core {
  //   background-color: #f5f5f5;
  // }
  // /deep/ .el-switch.is-checked .el-switch__core {
  //   background-color: #fc6510;
  // }
  // /deep/ .el-textarea__inner {
  //   border-radius: 6px;
  //   user-select: text;
  // }
  // /deep/ .el-input-group--append {
  //   .el-input__inner {
  //     border-radius: 6px 0 0 6px;
  //     user-select: text;
  //   }
  // }
  // /deep/ .el-input-group__append .el-input-group__prepend {
  //   border-radius: 6px;
  //   background-color: #f5f5f5;
  // }
  // /deep/ .el-input-group__append,
  // .el-input-group__prepend {
  //   background-color: #f5f5f5;
  // }
  // /deep/ .el-input.is-disabled .el-input__inner {
  //   background-color: #f5f5f5;
  // }
  // /deep/ .el-input-group--prepend {
  //   .el-input__inner {
  //     border-radius: 0 6px 6px 0;
  //     user-select: text;
  //   }
  // }
  // /deep/ .el-input-group__prepend .el-input-group__prepend {
  //   border-radius: 6px;
  //   background-color: #f5f5f5;
  // }
  // /deep/ .el-input-group__prepend,
  // .el-input-group__prepend {
  //   background-color: #f5f5f5;
  // }
  // /deep/  .el-select .el-input .el-select__caret{
  //     color:#333;
  //     font-size:12px;
  // }
}
</style>
