<template>
  <div class="xd-search">
    <div class="xd-search__main" v-if="uiMainFilter.length > 0">
      <el-tabs
        v-model="uiMainFilterIndex"
        :type="mainFilterType"
        :stretch="mainFilterStretch"
        @tab-click="handleTabClick"
      >
        <template v-for="item in uiMainFilter">
          <el-tab-pane :name="item.value">
            <span slot="label">
              <el-tooltip v-if="item.notice&&item.notice.length > 0" class="item" effect="dark" placement="top-end">
                <i class="el-icon-question" style="font-size:16px; color:#aaa;position:absolute;right:0px;top:0px"></i>
                <div slot="content">
                  <div v-for="(sItem,sIndex) in item.notice" :key="sIndex">
                    <span>{{sItem}}</span>
                  </div>
                </div>
            </el-tooltip>
              {{item.label}}
            </span>
          </el-tab-pane>
        </template>
      </el-tabs>
    </div>
    <el-form
      v-if="uiList.length > 0 && formStatus "
      class="xd-search__form"
      :model="form"
      :label-width="labelWidth"
      :key="xdSearchKey"
      @submit.native.prevent
    >
      <el-form-item
        :label="item['label']"
        v-for="(item,index) in uiList"
        :key="index"
        :class="[item.extendClass,item.ele === 'slot'?`c_${uiMainFilterIndex}__${item.slot}`:'']"
      >
        <template v-if="item.ele === 'el-input'">
          <div class="el-input-box">
            <el-input
              v-if="item['enter']"
              v-model="form[item['valueKey']]"
              :disabled="item['disabled'] === undefined ? false: item['disabled']"
              :placeholder="item['placeholder']"
              :size="size"
              clearable
              @keydown.native="handleEnter"
            ></el-input>
            <el-input
              v-else
              v-model="form[item['valueKey']]"
              :placeholder="item['placeholder']"
              :disabled="item['disabled'] === undefined ? false: item['disabled']"
              :size="size"
              clearable
            ></el-input>
            <el-tooltip
              v-if="item['tips']"
              effect="dark"
              :content="item['tips']"
              placement="top"
            >
              <i class="el-icon-info"></i>
            </el-tooltip>
          </div>
        </template>
        <template v-else-if="item.ele === 'xd-input-range'">
          <div slot="label" v-if="item.labelSlot">
            <div style="display: flex;justify-content: end;">
              <el-tooltip class="item" effect="light" :content="item.labelSlot" placement="top-end">
                <i class="el-icon-question"></i>
              </el-tooltip>
              <span>{{ item.label }}</span>
            </div>
          </div>
          <xd-input-range
            v-model="form[item['valueKey']]"
            :disabled="item['disabled'] === undefined ? false: item['disabled']"
            :placeholder="item['placeholder']"
            :default-value="item['value']"
            :setting="item['setting']"
            :size="item['size']"
            :maps="item['maps']"
            :list="item['list']"
            :class="item['className'] || ''"
          ></xd-input-range>
        </template>
        <template v-else-if="item.ele === 'xd-select-list'">
          <xd-select-list
            :clearable="true"
            v-model="form[item['valueKey']]"
            :disabled="item['disabled'] === undefined ? false: item['disabled']"
            :placeholder="item['placeholder']"
            :default-value="item['value']"
            :size="size"
            :list="item['list']"
            :multiple="item['multiple']"
            :width="item['width']"
            :collapse-tags="true"
            :style="{width: item['multiple'] === true ? '300px': 'auto'}"
          ></xd-select-list>
        </template>
        <template v-else-if="item.ele === 'xd-select-remote'">
          <xd-select-list
            is-remote
            v-model="form[item['valueKey']]"
            :clearable="true"
            :collapse-tags="item['multiple']"
            :placeholder="item['placeholder']"
            :default-value="item['value']"
            :size="size"
            :list="item['list']"
            :multiple="item['multiple']"
            @onSearch="(query, cb)=>{handleRemoteSearch(query, cb, item)}"
            :width="item['width']"
          ></xd-select-list>
        </template>
        <template v-else-if="item.ele === 'xd-select-status'">
          <xd-select-status
            :default-value="item['value']"
            v-model="form[item['valueKey']]"
            :placeholder="item['placeholder']"
            :type="item['list']"
            :is-all="item['isall'] || item['isAll']"
            :type-value="item['backValueType']"
            :size="size"
          ></xd-select-status>
        </template>
        <template v-else-if="item.ele === 'xd-remote-select-list'">
          <xd-remote-select-list
            v-model="form[item['valueKey']]"
            :placeholder="item['placeholder']"
            :default-value="item['value']"
            :setting="item['setting']"
            :size="item['size']"
            :use-custom-rule="item['useCustomRules']"
            :handle-custom="item['handleCustom']"
            :list="item['list']"
            :class="item['className'] || ''"
            :collapse-tags="true"
          ></xd-remote-select-list>
        </template>
        <template v-else-if="item.ele === 'xd-range'">
          <xd-range
            v-model="form[`xdRange__${item['valueKey'].join('__')}`]"
            :placeholder="item['placeholder']"
            :size="size"
            :width="item['width']"
          ></xd-range>
        </template>
        <template v-else-if="item.ele === 'slot'">
          <slot :name="item.slot" :item="item"></slot>
        </template>
        <template v-else-if="item.ele === 'xd-date'">
          <el-date-picker
            v-model="form[`xdDate__${item['valueKey'].join('__')}`]"
            type="datetimerange"
            class="xd-search__datetimerange"
            :picker-options="pickerOptions"
            range-separator="至"
            :start-placeholder="item['placeholder'][0]"
            :end-placeholder="item['placeholder'][1]"
            :value-format="item['formatValue']"
            :format="item['format']"
            align="right"
          >
          </el-date-picker>
        </template>
        <template v-else-if="item.ele === 'xd-date-filter'">
          <div class="xd-search__filter">
            <template v-for="(child) in item.children">
              <xd-select-list
                v-if="child.ele === 'xd-select-list'"
                :clearable="true"
                v-model="form[child['valueKey']]"
                :placeholder="child['placeholder']"
                :default-value="child['value']"
                :size="size"
                style="width: 30%"
                :list="child['list']"
              ></xd-select-list>
              <el-date-picker
                v-if="child.ele === 'xd-date'"
                v-model="form[`xdDate__${child['valueKey'].join('__')}`]"
                type="datetimerange"
                :picker-options="pickerOptions"
                range-separator="至"
                :start-placeholder="child['placeholder'][0]"
                :end-placeholder="child['placeholder'][1]"
                :value-format="child['formatValue']"
                :format="child['format']"
                align="right"
              >
              </el-date-picker>
            </template>
          </div>
        </template>
        <template v-else-if="item.ele === 'xd-date-one'">
          <div class="xd-search__filter">
            <el-date-picker
              v-model="form[`xdOneDate__${item['valueKey']}`]"
              type="datetime"
              :placeholder="item['placeholder']"
              :value-format="item['formatValue']"
              :format="item['format']"
            >
            </el-date-picker>
          </div>
        </template>
        <template v-else-if="item.ele === 'xd-remote-select'">
          <xd-remote-input
            collapse-tags
            :class="{'xd-remote-select-multiple':item['multiple']}"
            v-model="form[item['valueKey']]"
            :placeholder="item['placeholder']"
            :width="item['width'] || '30%'"
            :default-value="item['value']"
            :multiple="item['multiple']"
            :remote-search="item['remoteSearch']"
          ></xd-remote-input>
        </template>
        <template v-else-if="item.ele === 'xd-cascade'">
          <xd-cascade
            v-model="form[item['valueKey']]"
            :class="{'xd-cascade-multiple':item.setting['multiple']}"
            :placeholder="item['placeholder']"
            :default-value="item['value']"
            :setting="item['setting']"
            :handle-custom="item['handleCustom']"
            :list="item['list']"
          ></xd-cascade>
        </template>
        <template v-else-if="item.ele === 'xd-remote-cascade'">
          <el-cascader
            collapse-tags
            :props="item['props']"
            v-model="form[item['valueKey']]"
            :placeholder="item['placeholder']"
          ></el-cascader>
        </template>

      </el-form-item>
      <el-form-item>
        <div class="xd-search__btn">
          <el-button :size="size" @click="reset()">重置</el-button>
          <el-button
            :size="size"
            @click="search('search')"
            type="primary"
            icon="el-icon-search"
            v-preventReClick="10"
          >搜索</el-button>
        </div>
      </el-form-item>
    </el-form>
  </div>

</template>

<script>
  import XdFontIcon from "@/components/XdFontIcon";
  import XdSelectList from "@/components/XdSelectList";
  import XdSelectStatus from "@/components/XdSelectStatus";
  import XdRange from "@/components/XdRange";
  import XdInputRange from "@/components/formItem/XdInputRange";
  import XdRemoteInput from "@/components/XdRemoteInput";
  import XdCascade from "@/components/formItem/XdCascade";
  import XdRemoteSelectList from "@/components/formItem/XdRemoteSelectList";

  export default {
    name: "XdSearch",
    components: {
      XdRange,
      XdSelectStatus,
      XdSelectList,
      XdFontIcon,
      XdInputRange,
      XdRemoteInput,
      XdCascade,
      XdRemoteSelectList
    },
    props: {
      labelWidth: {type: String, default: '80px'},
      size: {type: String, default: 'medium'}, //medium / small / mini
      list: {type: Array | null, default: null},
      pickerOptions: {
        type: Object,
        default() {
          return {
            shortcuts: [
              {
                text: '最近一周',
                onClick(picker) {
                  const end = new Date();
                  const start = new Date();
                  start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                  picker.$emit('pick', [start, end]);
                }
              },
              {
                text: '最近一个月',
                onClick(picker) {
                  const end = new Date();
                  const start = new Date();
                  start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                  picker.$emit('pick', [start, end]);
                }
              },
              {
                text: '最近三个月',
                onClick(picker) {
                  const end = new Date();
                  const start = new Date();
                  start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
                  picker.$emit('pick', [start, end]);
                }
              },
              {
                text: '最近六个月',
                onClick(picker) {
                  const end = new Date();
                  const start = new Date();
                  start.setTime(start.getTime() - 3600 * 1000 * 24 * 180);
                  picker.$emit('pick', [start, end]);
                }
              }, {
                text: '最近一年',
                onClick(picker) {
                  const end = new Date();
                  const start = new Date();
                  start.setTime(start.getTime() - 3600 * 1000 * 24 * 365);
                  picker.$emit('pick', [start, end]);
                }
              }
            ],
          }
        }
      },
      dateFilter: {
        type: Boolean,
        default: false
      },
      isFilterAll: {
        type: Boolean,
        default: true
      },
      remoteSearch: {
        type: Function,
      },
      timeType: {
        type: Boolean,
        default: false //false=> 毫秒 true=>秒
      },
      isCheckPrice: {
        type: Boolean,
        default: false //false=> 毫秒 true=>秒
      },

      mainInitSearch: {
        type: Boolean,
        default: true //false=> 毫秒 true=>秒
      },

      //主条件
      mainFilter: {
        type: Array | null,
        default() {
          return []
        }
      },

      //主条件的条件键值
      mainFilterKey: {
        type: String,
      },

      //主条件的索引或者先选value值
      mainFilterIndex: {
        type: String | Number,
        default: '',
      },

      //显示类型 card|border-card|''  默认：''
      mainFilterType: {
        type: String,
        default: '',
      },

      //所有选项宽带平均显示
      mainFilterStretch: {
        type: Boolean,
        default: false,
      }
    },

    watch: {
      form: {
        handler(val) {
          this.$emit('input', this.getParams())
        },
        deep: true
      },
    },

    data() {
      return {
        isPC: false,
        formStatus: false,
        timer: null,
        xdSearchKey: 'xdSearchKey',
        enterTimer: null,

        form: {}, //绑定数据字段
        formSource: {},

        uiList: [], //ui列表

        //测试数据 备注；valueKey必须唯一
        testList: [

          //input
          {
            label: '订单号:', //label
            ele: 'el-input', //package 名称
            valueKey: 'order_id', //form[valueKey]
            value: '', //v-model
            placeholder: '输入订单号',

          },

          //多选选择
          {
            label: '加盟商:', //label
            ele: 'xd-select-list', //package 名称
            valueKey: 'product_type_m', //form[valueKey]
            value: [], //v-model
            placeholder: '请选择加盟商',
            multiple: true, //多选
            list: [
              {"label": "万利达集团", "value": 4},
              {"label": "中国联通", "value": 5},
              {"label": "中国移动", "value": 6},
              {"label": "味多美", "value": 7},
            ]
          },

          //远程搜索选择
          {
            label: '远程搜索:', //label
            ele: 'xd-select-remote', //package 名称
            valueKey: 'product_type_remote', //form[valueKey]
            value: [], //v-model //多选为数组 单选为字符串
            placeholder: '输入关键字进行搜索',
            multiple: false, //多选
          },

          //单选选择
          {
            label: '加盟商:', //label
            ele: 'xd-select-list', //package 名称
            valueKey: 'product_type', //form[valueKey]
            value: '', //v-model
            placeholder: '请选择加盟商',
            multiple: false,
            list: [
              {"label": "万利达集团", "value": 4},
              {"label": "中国联通", "value": 5},
              {"label": "中国移动", "value": 6},
              {"label": "味多美", "value": 7},
            ]
          },

          //状态选择
          {
            label: '状态:', //label
            ele: 'xd-select-status', //package 名称
            valueKey: 'status', //form[valueKey]
            value: '', //v-model
            isall: true,
            backValueType: '', //返回值类型 1=>返回（Y,N）2=> [true|false] 3=>[1,0] 4=>[1,2]
            placeholder: '请选择',
            list: 'status', //status=>状态  best=>推荐  associate=>关联 yes=>是否 open=> 是否开启  check=>审核
          },

          //区间输入
          {
            label: '卡号区间:', //label
            ele: 'xd-range', //package 名称
            valueKey: ['start_card', 'end_card'], //form[valueKey]
            value: ['', ''], //v-model
            placeholder: ['开始卡号', '结束卡号'],
            width: 400
          },

          //插槽
          {
            label: '插槽:', //label
            ele: 'slot', //package 名称
            slot: 'time',
          },

          //时间插件
          {
            label: '添加时间:', //label
            ele: 'xd-date', //package 名称
            valueKey: ['start_time', 'end_time'], //form[valueKey]
            value: [], //v-model
            format: 'yyyy/MM/dd HH:mm:ss',//时间显示格式
            formatValue: 'timestamp', //输出时间格式
            placeholder: ['开始时间', '结束时间'],
          },

          //组合时间组合
          {
            label: '时间筛选:', //label
            ele: 'xd-date-filter',
            children: [
              {
                ele: 'xd-select-list', //package 名称
                valueKey: 'order_type', //form[valueKey]
                value: '', //v-model
                placeholder: '选择下单时间',
                list: [
                  {"label": "万利达集团", "value": 4},
                  {"label": "中国联通", "value": 5},
                  {"label": "中国移动", "value": 6},
                  {"label": "味多美", "value": 7},
                ]
              },
              {
                ele: 'xd-date', //package 名称
                valueKey: ['fitler_start_time', 'fitler_end_time'], //form[valueKey]
                value: [], //v-model
                format: 'yyyy/MM/dd HH:mm:ss',//时间显示格式
                formatValue: 'timestamp', //输出时间格式
                placeholder: ['开始时间', '结束时间'],
              },
            ],
          }

        ],

        /**
         * @description 主条件
         * @type [{value: any, key:string}]
         */
        uiMainFilter: [],
        uiMainFilterIndex: null,
      }
    },

    created() {
      this.isPC = this.$xdHelper.isPC();
      this.initMain();
      this.init()
    },


    methods: {
      handleTabClick(index) {
        this.$emit('onTabClick', this.uiMainFilterIndex);
        this.$emit('input', this.getParams());
        this.search('MainFilter');
      },
      handleEnter(e){
        if(e.keyCode !== 13){
          clearTimeout(this.enterTimer);
          this.enterTimer = null;
          return
        }
        if(this.enterTimer) {
          clearTimeout(this.enterTimer);
          this.enterTimer = null;
        }
        this.enterTimer = setTimeout(()=>{
          this.search('search');
        }, 500)

      },
      getParams() {
        let form = this.$xdHelper.cloneDeep(this.form);
        let temp = {};

        //设置主条件查询
        if (this.uiMainFilter.length > 0) {
          if (this.mainFilterKey) {
            temp[this.mainFilterKey] = this.uiMainFilterIndex;
          } else {
            throw new Error(`主条件键值：mainFilterKey不能为空`)
          }
        }

        Object.keys(form).map(key => {
          //区间输入值
          if (/^(xdRange__|xdDate)(.*)$/.test(key)) {
            let range = key.split('__');
            range.splice(0, 1);
            if (form[key] && form[key].length === 2) {
              temp[range[0]] = form[key][0];
              temp[range[1]] = form[key][1];
            } else {
              temp[range[0]] = '';
              temp[range[1]] = '';
            }

            //时间毫秒转秒处理
            if (/^(xdDate)(.*)$/.test(key) && this.timeType) {
              if (form[key] && form[key].length === 2) {
                temp[range[0]] = form[key][0] ? Math.floor(form[key][0] / 1000) : form[key][0];
                temp[range[1]] = form[key][1] ? Math.floor(form[key][1] / 1000) : form[key][1];
              } else {
                temp[range[0]] = '';
                temp[range[1]] = '';
              }

            };

            //处理价格区间
            if(/^(xdRange__)(.*)$/ && this.isCheckPrice) {
              if(this.formSource[key].label.indexOf('价格') !== -1) {
                if (temp[range[0]]) temp[range[0]] = this.$xdHelper.multiplyFloatNumber(Number(temp[range[0]]), 100);
                if (temp[range[1]]) temp[range[1]] = this.$xdHelper.multiplyFloatNumber(Number(temp[range[1]]), 100);
              }
            }
          }
          else if(/^(xdOneDate)(.*)$/.test(key)) {
            let range = key.split('__');
            temp[range[1]] = form[key];
            if(form[key] && this.timeType) {
              temp[range[1]] = Math.floor(form[key] / 1000);
            }
          }
          else {
            if (this.$xdHelper.checkVarType(form[key]) === 'array' && this.dateFilter) {
              if (form[key].length > 0) {
                temp[key] = form[key];
              }
            }
            else {
              temp[key] = form[key];
            }
          }
        });

        //不过滤all值
        if(this.dateFilter && this.isFilterAll ===false) {
          Object.keys(temp).map(key=>{
            if (temp[key] === '' || temp[key] === null || temp[key] === undefined) {
              delete temp[key];
            }
          })
          return temp;
        }

        //去掉特殊字符头尾空白符，空白符包括：空格、制表符 tab、换行符等其他空白符
        Object.keys(temp).map(key=>{
          if(this.$xdHelper.checkVarType(temp[key]) === 'string') temp[key] = temp[key].trim();
        });


        if (this.dateFilter) {
          if (this.$xdHelper.isEmpty(temp)) {
            return temp
          } else {
            return this.$xdHelper.deleteParamEmptyKey(temp);
          }
        }
        else return temp
      },

      initMain() {
        let index = 0; //首次选择索引值
        let isFindFag = false;

        //[]处理
        if (this.mainFilter !== null && this.mainFilter.length === 0) {
          this.uiMainFilter = [];
          return;
        }

        /**@type [{value: any, key:string}]**/
        let uiMainFilter = [];
        if (this.mainFilter === null) {
          uiMainFilter = [
            {label: 'Tab1', value: 'Tab1'},
            {label: 'Tab2', value: 'Tab2'},
            {label: 'Tab3', value: 'Tab3'},
            {label: 'Tab4', value: 'Tab4'},
            {label: 'Tab5', value: 'Tab5'},
            {label: 'Tab6', value: 'Tab6'},
            {label: 'Tab7', value: 'Tab7'},
            {label: 'Tab8', value: 'Tab8'},
            {label: 'Tab9', value: 'Tab9'},
          ]
        } else {
          uiMainFilter = this.mainFilter;
        }

        //检查值相等，设置选择索引
        uiMainFilter.map((item, idx) => {
          if (item.value === this.mainFilterIndex) {
            isFindFag = true;
            index = idx;
          }
        });

        //值不相等，设置索引
        if (isFindFag === false) {
          if (uiMainFilter[this.mainFilterIndex] === undefined) index = 0;
          else index = this.mainFilterIndex;
        }

        this.uiMainFilterIndex = uiMainFilter[index].value;
        this.uiMainFilter = uiMainFilter;
      },

      init(type = true) {
        if (this.list === null) {
          this.uiList = this.testList;
        } else this.uiList = this.list;

        //初始化form表单
        this.uiList.map(item => {
          if (item.ele === 'xd-range') {
            this.$set(this.form, `xdRange__${item['valueKey'].join('__')}`, item['value'])
            this.formSource[`xdRange__${item['valueKey'].join('__')}`] = item;
          } else if (item.ele === 'xd-date') {
            this.$set(this.form, `xdDate__${item['valueKey'].join('__')}`, item['value']);
            this.formSource[`xdDate__${item['valueKey'].join('__')}`] = item;
          } else if (item.ele === 'xd-date-one') {
            this.$set(this.form, `xdOneDate__${item['valueKey']}`, item['value']);
            this.formSource[`xdOneDate__${item['valueKey']}`] = item;
          }
          else if (item.ele === 'xd-date-filter') {
            item.children.map(child => {
              if (child.ele === 'xd-date') {
                this.$set(this.form, `xdDate__${child['valueKey'].join('__')}`, child['value']);
                this.formSource[`xdDate__${child['valueKey'].join('__')}`] = item;
              } else {
                this.$set(this.form, child['valueKey'], child['value'])
                this.formSource[child['valueKey']] = item;
              }
            })
          } else {
            this.$set(this.form, item['valueKey'], item['value'])
            this.formSource[item['valueKey']] = item;
          }
        });

        this.formStatus = true;

        if (type) {
          this.$nextTick(() => {
            //有主条件，无辅助条件处理
            if (this.uiMainFilter.length > 0 && this.uiList.length === 0) {
              this.$emit('input', this.getParams());
            } else {
              this.$emit('onDone', {form: this.getParams(), action: 'init'});
            }

          })
        }
      },

      handleRemoteSearch({query}, resolve, item) {
        if (typeof this.remoteSearch !== "function") {
          throw new Error('请实现远程搜索方法')
        }
        if (this.timer) clearTimeout(this.timer);
        this.timer = setTimeout(() => {
          this.remoteSearch({query, prop: item}, (res) => {
            resolve(res)
          })
        }, 400);
      },

      reset() {
        this.init(false);
        this.xdSearchKey = this.$xdHelper.randomChar(20);
        this.$nextTick(() => {
          this.$emit('onSearch', {action: 'reset', form: this.getParams()});
        })
      },

      search(action) {
        this.$emit('onSearch', {action: action, form: this.getParams()});
      }
    }
  }
</script>

<style scoped lang="scss">
  .el-input-box {
    display: flex;
    align-items: center;
    justify-content: flex-start;


    & > i {
      font-size: 20px;
      margin-left: 5px;
      color: #111;
    }
  }


  .xd-search {
    & ::v-deep .el-form-item__label {
      min-width: 110px;
    }

    & ::v-deep .el-form-item__content {
      margin-left: 110px!important;
    }


    & ::v-deep .el-tabs__content {
      display: none;
    }

    & ::v-deep .el-tabs__item {
      padding: 0 10px !important;
    }

    &__main {
      margin-bottom: 30px;
    }

    &__form {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: flex-start;
      flex-wrap: wrap;
    }


    &__filter {
      display: flex;
      justify-content: flex-start;
      align-items: center;
      flex-wrap: nowrap;

      & ::v-deep .xd-select {
        max-width: 140px;
        flex-shrink: 0;
      }

      & ::v-deep .xd-select .el-input__inner {
        border-radius: 4px 0 0 4px;
        height: 37px;

      }

      & .el-date-editor {
        height: 37px !important;
        border-radius: 0 4px 4px 0;
        border-left: 0;
      }
    }


  }

  ::v-deep .xd-remote-input.xd-remote-select-multiple{
    min-width: 260px;
    max-width: 300px;
    .el-select__tags > span {
      display: flex;
      justify-content: center;
      align-items: flex-start;
      & > span {
        flex-shrink: 0;
        flex-flow: nowrap;
      }
      & > span:first-child {
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 1;
        -webkit-box-orient: vertical;
      }
    }
  }

  ::v-deep .xd-cascade.xd-cascade-multiple {
    min-width: 300px;
    max-width: 320px;

    & .el-input.el-input--medium {
      height: 36px;
    }

    .el-cascader__tags {
      display: flex;
      justify-content: flex-start;
      align-items: center;

      & .el-tag {
        max-width: 150px;
      }

      &> span {
        flex-shrink: 0;
      }

      & > input {
        width: 30px;
        min-width: 30px;
        flex-shrink: 0;
        flex: none;
      }
    }
  }

  @media screen and (max-width: 768px) {
    .xd-search {
      & ::v-deep .el-form-item__label {
        min-width: auto;
      }

      & ::v-deep .el-form-item__content {
        margin-left: 100px !important;
      }

      &__btn {
        margin-bottom: 10px;
        margin-left: 0 !important;

        & > * {
          &:last-child {
            margin-bottom: 0;
          }
        }
      }

      &__main {
        margin-bottom: 10px;
      }

      & .el-form-item {
        width: 100%;
        margin-bottom: 10px;

        & .el-date-editor {
          width: 100%;
        }
      }


    }

    ::v-deep .xd-cascade.xd-cascade-multiple {
      min-width: 100%;
      max-width: 100%;

      & .el-input.el-input--medium, .xd-select__list.el-select--medium {
        height: auto;
        width: 100%;
      }

      .el-cascader__tags {
        display: inline-block;

        & .el-tag {
          max-width: 150px;
        }

        & > span {
          flex-shrink: 0;
        }

        & > input {
          width: 30px;
          min-width: 30px;
          flex-shrink: 0;
          flex: none;
        }
      }
    }
  }
</style>
