<template>
  <div class="currenForm">
    <!-- @submit.native.prevent 阻止form只有一个input输入框回车触发提交事件 -->
    <el-form
      ref="form"
      :size="size"
      :label-position="labelPosition"
      :inline="inline"
      :label-width="labelWidth"
      :rules="rules"
      :model="searchData"
      @submit.native.prevent
    >
      <el-row :gutter="40">
        <el-col
          :span="item.colSpan"
          v-for="(item, index) in searchForm"
          :key="index"
        >
          <el-form-item
            :label="item.label"
            :prop="item.showProp ? item.prop + '.' + item.showProp : item.prop"
            v-if="!hide ? true : false"
          >
            <!-- 输入框 onkeyup: 正则表达式，用于前端输入校验工作-->
              <!-- :onkeyup="item.onkeyup" -->
            <el-input
              v-if="item.type === 'input'"
              v-model="searchData[item.prop]"
              :maxlength="item.maxlength"
              :onkeyup="itemOnKeyUp(item,searchData[item.prop])"
              clearable
              :disabled="Boolean(item.disabled)"
              :placeholder="item.placeholder || '请输入' + item.label"
              :prefix-icon="item.icon"
              :show-password="item.showPassword"
              @change="changeInput(item.prop,$event)"
              @clear="clearInput(item.prop,$event)"
              @blur="
                inputPlaceholder($event, item, 'blur',searchData)
              "
              @focus="inputPlaceholder($event, item, 'focus')"
            ></el-input>
            <!-- 输入框(有上下增加按钮框) onkeyup: 正则表达式，用于前端输入校验工作-->
            <el-input-number
              v-if="item.type === 'number'"
              v-model="searchData[item.prop]"
              :onkeyup="item.onkeyup"
              :disabled="Boolean(item.disabled)"
              @change="changeInput(item.prop,$event)"
              @clear="clearInput(item.prop,$event)"
              :min="item.min"
              :max="item.max"
              @blur="
                inputPlaceholder($event, item, 'blur',searchData)
              "
              @focus="inputPlaceholder($event, item, 'focus')"
            ></el-input-number>
            <!-- 输入框(只能输入数字) onkeyup: 正则表达式，用于前端输入校验工作-->
              <!-- oninput="value=value.replace(/[^\d]/g,'')" -->
            <el-input
              v-if="item.type === 'inputNumber'"
              v-model="searchData[item.prop]"
              :maxlength="item.maxlength"
              :onkeyup="typeNumberOnkeyup(item,searchData[item.prop])"
              clearable
              :disabled="Boolean(item.disabled)"
              :placeholder="item.placeholder || '请输入' + item.label"
              :prefix-icon="item.icon"
              :show-password="item.showPassword"
              @change="changeInput(item.prop,$event)"
              @clear="clearInput(item.prop,$event)"
              @blur="
                inputPlaceholder($event, item, 'blur',searchData)
              "
              @focus="inputPlaceholder($event, item, 'focus')"
            ></el-input>
            <!-- 对象输入框 -->
            <el-input
              v-if="item.type === 'objectInput'"
              v-model="searchData[item.prop][item.showProp]"
              :maxlength="item.maxlength"
              clearable
              :disabled="Boolean(item.disabled)"
              :placeholder="item.placeholder || '请输入' + item.label"
              :prefix-icon="item.icon"
              :show-password="item.showPassword"
              @blur="
                inputPlaceholder($event, item, 'blur',searchData)
              "
              @focus="inputPlaceholder($event, item, 'focus')"
            ></el-input>
            <!-- 对象富文本框 -->
            <el-input
              v-if="item.type === 'objectTextarea'"
              type="textarea"
              v-model="searchData[item.prop][item.showProp]"
              :placeholder="item.placeholder || '请输入' + item.label"
            ></el-input>
            <!--查询下拉-->
            <el-autocomplete
              v-if="item.type === 'autocomplete'"
              class="inline-input"
              style="width: 100%"
              v-model="searchData[item.prop]"
              :disabled="Boolean(item.disabled)"
              :fetch-suggestions="
                (queryString, cb) => {
                  querySearch(queryString, cb, item);
                }
              "
              :placeholder="item.placeholder || '请输入' + item.label"
              @select="handleSelect($event, item)"
            >
              <el-button
                slot="append"
                icon="el-icon-search"
                v-if="item.click"
                @click="item.click(item)"
                style="color: #1890ff; background-color: #ffffff"
              ></el-button>
            </el-autocomplete>
            <!--对象查询下拉-->
            <el-autocomplete
              v-if="item.type === 'objectAutocomplete'"
              class="inline-input"
              style="width: 100%"
              v-model="searchData[item.prop][item.showProp]"
              :fetch-suggestions="
                (queryString, cb) => {
                  querySearch(queryString, cb, item);
                }
              "
              :placeholder="item.placeholder || '请输入' + item.label"
              @select="handleSelect($event, item)"
            >
              <el-button
                slot="append"
                icon="el-icon-search"
                v-if="item.click"
                @click="item.click(item)"
                style="color: #1890ff; background-color: #ffffff"
              ></el-button>
            </el-autocomplete>
            <!-- 文本框 -->
            <el-input
              v-if="item.type === 'textarea'"
              :type="item.type"
              v-model="searchData[item.prop]"
              :rows="item.rows"
              :placeholder="item.placeholder || '请输入' + item.label"
              :maxlength="item.maxlength"
              show-word-limit
            ></el-input>
            <!-- 下拉框 -->
            <el-select
              v-if="item.type === 'select'"
              v-model="searchData[item.prop]"
              :loading="selectLoading"
              :clearable="item.clearable"
              :multiple="item.multiple"
              :disabled="Boolean(item.disabled)"
              :filterable="item.filterable"
              :allow-create="item.allowCreate"
              style="width: 100%"
              :placeholder="item.placeholder || '请输入' + item.label"
              @change="changeSelect(item.prop,$event)"
            >
              <el-option
                v-for="(op, index) in selectOptions(item.options) ||
                searchOptions['options']"
                :label="op[item.optionsLabel] || op.label"
                :value="op[item.optionsValue] || op.value"
                :key="index"
              ></el-option>
            </el-select>
            <!-- 链接接口filter下拉框 -->
            <filterSelect
              v-if="item.type === 'filterSelect'"
              :selectModel="searchData[item.prop]"
              :selectItem="item"
              @filterOptionSelectHandle="filterOptionSelectHandle"
              @filterClearHandle="filterClearHandle(item)"
            ></filterSelect>
            <!--对象下拉框 -->
            <el-select
              v-if="item.type === 'objectSelect'"
              v-model="searchData[item.prop][item.showProp]"
              :loading="selectLoading"
              :clearable="item.clearable"
              :multiple="item.multiple"
              :disabled="Boolean(item.disabled)"
              :filterable="item.filterable"
              :allow-create="item.allowCreate"
              style="width: 100%"
              :placeholder="item.placeholder || '请输入' + item.label"
            >
            <el-option
              v-for="(op, index) in selectOptions(item.options) ||
              searchOptions['options']"
              :label="op[item.optionsLabel] || op.label"
              :value="op[item.optionsValue] || op.value"
              :key="index"
            ></el-option>
            </el-select>
            <!-- 下拉框多选 -->
            <el-select
              v-if="item.type === 'selectArray'"
              v-model="searchData[item.prop]"
              multiple
              :placeholder="item.placeholder || '请选择' + item.label"
              style="width: 100%"
            >
            <el-option
              v-for="(op, index) in selectOptions(item.options) ||
              searchOptions['options']"
              :label="op[item.optionsLabel] || op.label"
              :value="op[item.optionsValue] || op.value"
              :key="index"
            ></el-option>
            </el-select>
            <!-- 单选 -->
            <el-radio-group
              v-if="item.type === 'radio'"
              v-model="searchData[item.prop]"
              :disabled="Boolean(item.disabled)"
               @change="radioChange(item.prop,$event)"
            >
              <el-radio
                v-for="ra in searchOptions[item.radio]"
                :label="ra.id"
                :key="ra.value"
                >{{ ra.label }}</el-radio
              >
            </el-radio-group>
            <!-- 单选按钮 -->
            <el-radio-group
              v-if="item.type === 'radioButton'"
              v-model="searchData[item.prop]"
              @change="item.change && item.change(searchData[item.prop])"
            >
              <el-radio-button
                v-for="ra in searchOptions[item.radios]"
                :label="ra.value"
                :key="ra.value"
                >{{ ra.label }}</el-radio-button
              >
            </el-radio-group>
            <!-- 复选框 -->
            <el-checkbox v-if="item.type === 'checkbox'" :indeterminate="indeterminate" v-model="item.checkAll" @change="handleCheckAllChange($event,item)">全选</el-checkbox>
            <el-checkbox-group
              v-if="item.type === 'checkbox'"
              v-model="searchData[item.prop]"
              @change="handleCheckedCitiesChange($event,item)"
            >
              <el-checkbox
                v-for="ch in searchOptions[item.checkboxs]"
                :label="ch"
                :key="ch"
                >{{ ch }}</el-checkbox
              >
            </el-checkbox-group>
            <!-- 日期 -->
            <el-date-picker
              v-if="item.type === 'date'"
              v-model="searchData[item.prop]"
              style="width: 100%"
              :disabled="Boolean(item.disabled)"
              :placeholder="item.placeholder || '选择日期'"
              value-format="yyyy-MM-dd"
            ></el-date-picker>
            <!-- 时间 -->
            <el-time-picker
              v-if="item.type === 'time'"
              v-model="searchData[item.prop]"
              :placeholder="item.placeholder || '选择时间'"
              style="width: 100%"
              :picker-options="{
                selectableRange: '00:00:00 - 23:59:00',
              }"
              :disabled="Boolean(item.disabled)"
              format="HH:mm"
              value-format="yyyy-MM-ddTHH:mm:ss"
            ></el-time-picker>
            <!-- 日期时间 -->
            <el-date-picker
              v-if="item.type === 'dateTime'"
              type="datetime"
              v-model="searchData[item.prop]"
              :placeholder="item.placeholder || '选择日期时间'"
              style="width: 100%"
              format="yyyy-MM-dd HH:mm:ss"
              value-format="yyyy-MM-ddTHH:mm:ss"
              :disabled="Boolean(item.disabled)"
            ></el-date-picker>
            <!-- 日期时间 日期有限制 选择范围：当前天及以后-->
            <el-date-picker
              v-if="item.type === 'dateTimelimit'"
              type="datetime"
              v-model="searchData[item.prop]"
              :placeholder="item.placeholder || '选择日期时间'"
              style="width: 100%"
              format="yyyy-MM-dd HH:mm:ss"
              value-format="yyyy-MM-ddTHH:mm:ss"
              :disabled="Boolean(item.disabled)"
              :pickerOptions="endDateTimeLimitPickerOptions()"
            ></el-date-picker>
            <!-- 对象日期时间 -->
            <el-date-picker
              v-if="item.type === 'objectDateTime'"
              type="datetime"
              v-model="searchData[item.prop][item.showProp]"
              :placeholder="item.placeholder || '选择日期'"
              style="width: 100%"
              value-format="yyyy-MM-ddTHH:mm:ss"
              :disabled="Boolean(item.disabled)"
            ></el-date-picker>
            <!--开始时间结束时间-->
            <div
              class="RangeDateTime"
              v-if="item.type === 'rangeDateTime'"
              style="width: 100%; height: 100%"
            >
              <el-col :span="10">
                <el-form-item :prop="item.prop + '.' + item.startDate">
                  <el-date-picker
                    type="datetime"
                    :placeholder="item.placeholder || '开始日期'"
                    v-model="searchData[item.prop][item.startDate]"
                    style="width: 100%"
                    :disabled="Boolean(item.disabled)"
                    value-format="yyyy-MM-ddTHH:mm:ss"
                    :pickerOptions="
                      startPickerOptions(searchData[item.prop][item.endDate])
                    "
                  ></el-date-picker>
                </el-form-item>
              </el-col>
              <el-col class="line" :span="4">-</el-col>
              <el-col :span="10">
                <el-form-item :prop="item.prop + '.' + item.endDate">
                  <el-date-picker
                    type="datetime"
                    :placeholder="item.placeholder || '结束日期'"
                    v-model="searchData[item.prop][item.endDate]"
                    style="width: 100%"
                    :disabled="Boolean(item.disabled)"
                    value-format="yyyy-MM-ddTHH:mm:ss"
                    :pickerOptions="
                      endPickerOptions(searchData[item.prop][item.startDate])
                    "
                  ></el-date-picker>
                </el-form-item>
              </el-col>
            </div>
            <!-- 开关 -->
            <el-switch
              v-if="item.type === 'switch'"
              v-model="searchData[item.prop]"
            ></el-switch>
            <!--文件上传-->
            <currenUpload
              v-if="item.type === 'upload'"
              :limit="item.limit"
              :beforeUpload="beforeAvatarUpload"
              :searchData="searchData[item.prop]"
              @httpRequestfiles="httpRequestfiles($event, item.prop)"
              @handleRemove="handleRemove($event, item.prop)"
            >
            </currenUpload>
            <!--文件上传——列表形式-->
            <currenUploadList
              v-if="item.type === 'uploadList'"
              :limit="item.limit"
              :picExt="item.picExt"
              :searchData="searchData[item.prop]"
              @uploadListView="uploadListView"
              @changeUpload="changeUpload($event, item)"
              @handleRemove="handleRemove($event, item.prop)"
            >
            </currenUploadList>
            <!-- 缩略图上传 -->
            <currenUploadPictureCard
              v-if="item.type === 'uploadPictureCard'"
              :limit="item.limit"
              :multiple="item.multiple"
              :picExt="item.picExt"
              :searchData="searchData[item.prop]"
              @changeUpload="changeUpload($event, item)"
              @handleRemove="handleRemove($event, item.prop)"
            >
            </currenUploadPictureCard>
            <el-button 
              v-if="item.type === 'button'"
              type="primary" 
              size="mini"
              @click="item.click(item)"
            >
            {{item.buttonText}}
            </el-button>
          </el-form-item>
        </el-col>
      </el-row>
      <slot></slot>
    </el-form>
    <div v-if="isHandle" class="formButton">
        <!-- :style="{float:item.float}" 自定义按钮显示位置 -->
        <el-button
        v-for="(item, index) in searchHandle"
        :key="item.label"
        :type="item.type"
        :size="item.size || size"
        :loading="loading"
        :style="{float:item.float}"
        @click="submitForm(index,item)"
        >{{ item.label }}</el-button
      >
    </div>
  </div>
</template>
<script>
import currenUpload from "@/components/currenUpload";
import currenUploadList from "@/components/currenUploadList";
import currenUploadPictureCard from "@/components/currenUploadPictureCard";
import filterSelect from "@/components/filterSelect"
import { getMatchRegConformValue } from "@/utils/index"
export default {
  name: "currenForm",
  components: {
    currenUpload,
    currenUploadList,
    currenUploadPictureCard,
    filterSelect
  },
  props: {
    loading: {
      type: Boolean,
      default: false,
    },
    labelPosition: {
      type: String,
      default: "right",
    },
    isHandle: {
      type: Boolean,
      default: true,
    },
    inline: {
      type: Boolean,
      default: false,
    },
    labelWidth: {
      type: String,
      default: "140px",
    },
    size: {
      type: String,
      default: "mini",
    },
    searchForm: {
      type: Array,
      default: () => {
        return [];
      },
    },
    searchHandle: {
      type: Array,
      default: () => {
        return [];
      },
    },
    searchData: {
      type: Object,
      default: () => {
        return {};
      },
    },
    searchOptions: {
      type: Object,
      default: () => {
        return {};
      },
    },
    rules: {
      type: Object,
      default: () => {
        return {};
      },
    },
    formSpan: {
      type: Number,
      default: 24,
    },
    hide: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      restaurants: [],
      indeterminate: false,
      selectLoading: false,
    };
  },
  computed: {
    startPickerOptions() {
      return function (val) {
        return {
          disabledDate(time) {
            if (val) {
              return (
                // time.getTime() > Date.now() ||
                // time.getTime() > new Date(that.CreateFormData.endDate).getTime()
                time.getTime() > val
              );
            }
            // return time.getTime() > Date.now(); //实现1效果
          },
        };
      };
    },
    endPickerOptions() {
      //   const that = this;
      return function (val) {
        return {
          disabledDate(time) {
            if (val) {
              return (
                // time.getTime() > Date.now() ||
                // time.getTime() < new Date(that.CreateFormData.startDate).getTime()
                time.getTime() < val
              );
            }
            // return time.getTime() > Date.now(); //实现1效果
          },
        };
      };
    },
    // 日期时间组件，选择范围：当前天及以后
    endDateTimeLimitPickerOptions() {
      return function () {
        return {
          disabledDate(time) {
              return (
                time.getTime() < Date.now() - 8.64e7
              );
          },
        };
      };
    },
    selectOptions() {
      return (val) => {
        if (val) {
          let options = this.$staticOptions[val];
          if (options) {
            return options();
          } else {
            return [];
          }
        } else {
          return false;
        }
      };
    },
  },
  mounted() {
    // 单选 ， 默认设置
    this.searchForm.forEach(item => {
      if (item.type === 'radio') {
        this.searchData[item.prop] = item.value + ''
      }
      if (item.type === 'checkbox') {
        this.searchData[item.prop].push(item.value)
      }
    })
  },
  methods: {
    // type=input情况下，框实时校验
    itemOnKeyUp(item,value){
      if(item.onkeyup){
        return item.onkeyup()
      }else{
        if(value && item.validType){
          this.searchData[item.prop]=getMatchRegConformValue(item.validType,value,item.pointNumberFixed)
        }
      }
    },
    // 数字类型input框onkeyup最大最小值处理
    typeNumberOnkeyup(item,value){
      if(value){
        let _match = String(value).match(/\d+/)//正整数
        this.searchData[item.prop] = _match?_match[0]:_match
      }
      if(this.searchData[item.prop] > item.max){
        this.searchData[item.prop] = item.max
      }
      if(this.searchData[item.prop] && this.searchData[item.prop] < item.min){
        this.searchData[item.prop] = item.min
      }
      if(item.onkeyup)item.onkeyup()
    },
    //复选框全选
    handleCheckAllChange(val,item) {
        const options = []
        if(val){
          this.searchOptions[item.checkboxs].forEach(items=>{
            options.push(items)
          })
        }
        this.searchData[item.prop] = val ? options : [];
        this.indeterminate = false;
      },
      //取消全选
    handleCheckedCitiesChange(value,item) {
        let checkedCount = value.length;
        item.checkAll = checkedCount === this.searchOptions[item.checkboxs].length;
        this.indeterminate = checkedCount > 0 && checkedCount < this.searchOptions[item.checkboxs].length;
      },
    inputPlaceholder(val, item, type, func) {
      if (item.valueType) {
        if (type == "focus") {
          console.log("focus")
          //影响必填项，2023-1-3 placeholder不处理
          // val.target.placeholder = '0';
          // if (val.target.value != "") {
          //   val.target.placeholder = val.target.value;
          //   val.target.value = "";
          // }
        } else if (type == "blur") {
          console.log("blur")
          //   val.target.value = "0"
          val.target.value = val.target.value.toString().replace(/[^\d.]/g,'')
          // if (val.target.value == "") {
          //   // if (val.target.placeholder.indexOf('请输入') == -1) {
          //   val.target.value = val.target.placeholder;
          //   // }
          // }
          if(item.showProp){
            if(val.target.value != ""){func[item.prop][item.showProp]= Number(val.target.value)}
          }else{
            if(val.target.value != ""){func[item.prop]= Number(val.target.value)}
          }
          // item.valueType
          //   ? (this.searchData[item.prop] = item.valueType(
          //     this.searchData[item.prop]
          //   ))
          //   : () => {
          //     return;
          //   }
        }
      }
    },
    querySearch(queryString, cb, val) {
      const { options, optionsValue, optionsLabel } = val;
      let func = val.focus;
      let data = {};
      if (queryString) {
        data.filter = [
          {
            logic: "And",
            column: optionsValue,
            action: "Like",
            value: queryString,
          },
          // {
          //   logic: "Or",
          //   column: optionsLabel,
          //   action: "Like",
          //   value: queryString
          // }
        ];
      }
      func(data).then((res) => {
        var restaurants = this.searchOptions["options"];
        var results = queryString
          ? restaurants.filter(
              this.createFilter(queryString, optionsValue, optionsLabel)
            )
          : restaurants;
        results.forEach((key) => {
          if (typeof optionsValue === "string") {
            key.value = key[optionsValue] + "----" + key[optionsLabel];
          } else {
            key.value =
              key[optionsValue[0]][optionsValue[1]] +
              "----" +
              key[optionsLabel];
          }
        });
        // 调用 callback 返回建议列表的数据
        cb(results);
      });
    },
    createFilter(queryString, optionsValue, optionsLabel) {
      return (restaurant) => {
        if (typeof optionsValue === "string") {
          restaurant.value =
            restaurant[optionsValue] + "----" + restaurant[optionsLabel];
        } else {
          restaurant.value =
            restaurant[optionsValue[0]][optionsValue[1]] +
            "----" +
            restaurant[optionsLabel];
        }
        return (
          restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) !=
          -1
        );
      };
    },
    handleSelect(item, val) {
      let data = this.searchData;
      if (!val.showProp) {
        if (typeof val.optionsValue === "string") {
          data[val.prop] = item[val.optionsValue];
        } else {
          data[val.prop] = item[val.optionsValue[0]][val.optionsValue[1]];
        }
      } else {
        if (typeof val.optionsValue === "string") {
          data[val.prop][val.showProp] = item[val.optionsValue];
        } else {
          data[val.prop][val.showProp] =
            item[val.optionsValue[0]][val.optionsValue[1]];
        }
      }
      this.$emit("push", item, val);
    },
    // filterSelect点击option事件
    filterOptionSelectHandle(item,props,val){
      this.searchData[props['prop']] = val
      this.$emit("push", item, props);
    },
    // filterSelect点击清除事件
    filterClearHandle(item){
      this.searchData[item['prop']] = ""
      this.$emit("clear",item)
    },
    // selectFocus (val, item) {
    //   this.selectLoading = true;
    //   let func = item.focus
    //   func({}).then(res => {
    //     this.selectLoading = false;
    //   })
    // },
    // dataFilter (query, item) {
    //   const { options, optionsValue, optionsLabel } = item
    //   let func = item.focus
    //   let data = {}
    //   this.selectLoading = true;
    //   if (query) {
    //     data.filter = {
    //       logic: "And",
    //       column: optionsLabel,
    //       action: "Like",
    //       value: query
    //     }
    //   }
    //   setTimeout(() => {
    //     func(data).then(res => {
    //       this.selectLoading = false;
    //     })
    //   }, 200);
    //   // this.options = [];
    // },
    submitForm(val,item) {
      this.$emit("submitForm", val, this.$refs.form,item);
    },
    getDom(){
      return this.$refs.form
    },
    handleClick(val) {
      this.$emit("handleClick", val);
    },
    httpRequestfiles(val, item) {
      this.searchData[item].push(val);
    },
    beforeAvatarUpload(val, data) {
      const repeat = data.filter((item) => {
        return item.name == val.name;
      });
      if (repeat.length != 0) {
        this.$errorMsg("文件重复");
        return false;
      } else {
        return true;
      }
    },
    handleRemove(val, item) {
      this.searchData[item] = val
    },
    changeUpload(val, item){
      // 判断上传文件是否满足类型
      let suffix = val.name.substring(val.name.lastIndexOf('.') + 1)
      if (item.picExt.indexOf(suffix) === -1) {
        this.$warningMsg('上传文件只能是 ' + item.picExt + '格式!')
        this.searchData[item.prop] = []
        return false
      } else {
        this.searchData[item.prop].push(val);
      }
    },
    uploadListView() {
      this.$emit('uploadListView')
    },
    radioChange(prop, val) {
      this.$emit("radioChange", prop, val)
    },
    changeInput(prop, val) {
      this.$emit("changeInput", prop, val)
    },
    clearInput(prop, val) {
      this.$emit("clearInput", prop, val)
    },
    changeSelect(prop, val) {
      this.$emit("changeSelect", prop, val)
    },

    // 单一文件上传输入框——上传文件提示
    // handleExceed (val) {
    //   this.$warningMsg('最多上传1个文件')
    // }
    // //自定义select搜索
    // dataFilter (val, data) {
    //   if (!data) {
    //     return;
    //   } else {
    //     this.$emit(data, val);
    //   }
    // },
  },
};
</script>
<style lang="scss" scoped>
// .formButton {
//   text-align: right;
// }
.el-row {
  ::v-deep .el-form-item__content {
    position: relative;
    font-size: 14px;
  }
  .RangeDateTime {
    ::v-deep .el-col {
      padding: 0 !important;
    }
    .line {
      text-align: center;
    }
  }
}
::v-deep .el-form-item__label{
  color: #999 !important;
  font-weight: normal !important;
}
</style>