<!--
 * @Description: 新加坡CAC-form
 * @Version: 2.0
 * @Author: Viborder
 * @Date: 2023-07-17 10:41:00
 * @LastEditors: fangdeqiang fangdeqiang@vdi.com
 * @LastEditTime: 2025-05-09 14:51:50
 * @company: NUCTECH
 * @Mailbox: nuctech@nuctech.com
 * @FilePath: /src/components/common/form.vue
-->
<template>
  <el-form
    :model="formRule.model ? formRule.model : ''"
    :rules="formRule.rule"
    :class="fromClass.form"
    :size="fromClass.formSize"
    :ref="formRule.refName"
    @submit.native.prevent
  >
    <el-form-item v-for="(item, index) in searchIpt" :class="fromClass.formItem" :key="index" :prop="item.ruleProp">
      <div class="pack" v-if="!item.hidden">
        <label class="el-form-item__label" :class="fromClass.label" :title="item.getLabel">{{ item.getLabel }}</label>
        <div v-if="item.type == 'empty'" :class="fromClass.iptClass"></div>
        <!--文本输入-->
        <el-input
          v-if="item.type == 'text'"
          @blur="item.blur ? item.blur() : none()"
          @focus="item.focus ? item.focus() : none()"
          @change="item.change ? item.change(item.models) : none()"
          :name="item.name"
          v-model="item.models"
          v-bind:placeholder="item.placeHolder"
          :class="fromClass.iptClass"
          :disabled="item.disabled"
          :maxlength="item.maxlength"
          :suffix-icon="item.endIcon"
          :prefix-icon="item.StartIcon"
          :readonly="item.readonly"
          :autofocus="item.autofocus"
          clearable
        ></el-input>
        <!--密码输入-->
        <el-input
          v-if="item.type == 'password'"
          @blur="item.blur ? item.blur() : none()"
          @focus="item.focus ? item.focus() : none()"
          @change="item.change ? item.change(item.models) : none()"
          :name="item.name"
          v-model="item.models"
          v-bind:placeholder="item.placeHolder"
          :class="fromClass.iptClass"
          :disabled="item.disabled"
          :maxlength="item.maxlength"
          :suffix-icon="item.endIcon"
          :prefix-icon="item.StartIcon"
          type="password"
        ></el-input>
        <!--文本域textarea-->
        <el-input
          v-if="item.type == 'textarea'"
          type="textarea"
          v-model="item.models"
          :maxlength="item.maxlength"
          v-bind:placeholder="item.placeHolder"
          :class="fromClass.areaClass"
          @blur="item.blur ? item.blur() : none()"
          @focus="item.focus ? item.focus() : none()"
          @change="item.change ? item.change(item.models) : none()"
          :name="item.name"
          :resize="item.resize"
          :disabled="item.disabled"
        ></el-input>
        <!-- 颜色选择框 -->
        <el-color-picker
          v-else-if="item.type == 'color'"
          :predefine="colorPredefine"
          :size="item.size"
          v-model="item.models"
          class="colorStyle"
          :class="fromClass.colorClass"
          @change="item.change ? item.change(item.models) : none()"
          @activeChange="item.activeChange ? item.activeChange() : none()"
        ></el-color-picker>
        <!-- 音频选择框 -->
        <div class="selectAudio" v-else-if="item.type == 'selectAudio'" :class="fromClass.iptClass">
          <el-select
            v-model="item.models"
            v-bind:placeholder="item.placeHolder"
            :name="item.name"
            @clear="item.clear ? item.clear() : none()"
            @blur="item.blur ? item.blur() : none()"
            @focus="item.focus ? item.focus() : none()"
            @change="selectAudioChange()"
            :disabled="item.disabled"
            :clearable="item.clearable"
            :filterable="item.filterable"
          >
            <el-option
              v-for="(items, key) in item.option"
              v-bind:label="items.label"
              v-bind:value="items.value"
              :disabled="items.disabled"
              :key="key"
            ></el-option>
          </el-select>
          <audio id="select_audio_id__vit" :src="selectAudio.path"></audio>
          <el-button type="info" icon="el-icon-service" circle class="selectAudioButton" @click="playAudio()"></el-button>
        </div>
        <!--选择单选-->
        <el-select
          v-model="item.models"
          v-bind:placeholder="item.placeHolder"
          :name="item.name"
          @clear="item.clear ? item.clear() : none()"
          @blur="item.blur ? item.blur() : none()"
          @focus="item.focus ? item.focus() : none()"
          @change="item.change ? item.change(item.models) : none()"
          v-else-if="item.type == 'select'"
          :class="fromClass.iptClass"
          :disabled="item.disabled"
          :clearable="item.clearable"
          :filterable="item.filterable"
          :allow-create="item.allowCreate"
        >
          <el-tooltip v-for="(items, key) in item.option" :key="key" effect="dark" :open-delay="800" :content="items.label" placement="top-start">
            <el-option v-bind:label="items.label" v-bind:value="items.value" :disabled="items.disabled" :key="key"></el-option>
          </el-tooltip>
        </el-select>
        <!--选择多选-->
        <el-select
          v-model="item.models"
          v-bind:placeholder="item.placeHolder"
          v-else-if="item.type == 'select2'"
          multiple
          collapse-tags
          :class="fromClass.iptClass"
          @blur="item.blur ? item.blur() : none()"
          @focus="item.focus ? item.focus() : none()"
          @change="item.change ? item.change(item.models) : none()"
          @remove-tag="item.removeTag"
          :name="item.name"
          :filterable="item.filterable"
          :allow-create="item.allowCreate"
        >
          <el-option
            v-for="(items, key) in item.option"
            v-bind:label="items.label"
            v-bind:value="items.value"
            :disabled="items.disabled"
            :key="key"
          ></el-option>
        </el-select>
        <!--日期选择-->
        <el-date-picker
          v-if="item.type == 'datetime' || item.type == 'week' || item.type == 'month' || item.type == 'year'"
          :name="item.name"
          :type="item.type"
          v-model="item.models"
          v-bind:placeholder="item.placeHolder"
          :class="fromClass.iptClass"
          :format="item.format"
          :readonly="item.readonly"
          :editable="false"
          :disabled="item.disabled"
          :clearable="item.clearable"
          @blur="item.blur ? item.blur() : none()"
          @focus="item.focus ? item.focus() : none()"
          @change="item.change ? item.change(item.models) : none()"
          :value-format="item.valueFormat"
          :unlink-panels="true"
        >
        </el-date-picker>
        <!-- 日期范围 daterange-->
        <el-date-picker
          v-if="item.type == 'daterange'"
          :default-time="['00:00:00', '23:59:59.999']"
          :name="item.name"
          type="daterange"
          v-model="item.models"
          v-bind:placeholder="item.placeHolder"
          :class="fromClass.iptClass"
          :format="item.format"
          :readonly="item.readonly"
          :disabled="item.disabled"
          :editable="false"
          :clearable="item.clearable"
          @blur="item.blur ? item.blur() : none()"
          @focus="item.focus ? item.focus() : none()"
          @change="item.change ? item.change(item.models) : none()"
          :value-format="item.valueFormat"
          :picker-options="pickerOptions0"
          :unlink-panels="true"
        >
        </el-date-picker>
        <!--日期范围选择-->
        <el-date-picker
          v-if="item.type == 'datetimerange'"
          :default-time="['00:00:00', '23:59:59.999']"
          :range-separator="item.rangeSeparator"
          type="datetimerange"
          :name="item.name"
          v-model="item.models"
          :class="fromClass.iptClass"
          :format="item.format"
          :readonly="item.readonly"
          :disabled="item.disabled"
          :editable="false"
          :clearable="item.clearable"
          @blur="item.blur ? item.blur() : none()"
          @focus="item.focus ? item.focus() : none()"
          @change="item.change ? item.change(item.models) : none()"
          :value-format="item.valueFormat"
          :start-placeholder="item.startPlace"
          :end-placeholder="item.endPlace"
          :unlink-panels="true"
        >
        </el-date-picker>
        <!--时间选择-->
        <el-time-picker
          v-if="item.type == 'timepicker'"
          is-range
          v-model="item.models"
          v-bind:placeholder="item.placeHolder"
          :class="fromClass.iptClass"
          :readonly="item.readonly"
          :disabled="item.disabled"
          :clearable="item.clearable"
          @blur="item.blur ? item.blur() : none()"
          @focus="item.focus ? item.focus() : none()"
          @change="item.change ? item.change(item.models) : none()"
          :name="item.name"
          :value-format="item.valueFormat"
          :picker-options="item.pickerOptions"
          :format="item.format"
          :start-placeholder="item.startPlace"
          :end-placeholder="item.endPlace"
        >
        </el-time-picker>
        <!-- 单选 -->
        <el-radio-group
          v-model="item.models"
          v-if="item.type == 'radio'"
          :class="fromClass.iptClass"
          :disabled="item.disabled"
          @change="item.change ? item.change(item.models) : none()"
        >
          <el-radio
            v-for="(items, key) in item.option"
            v-bind:label="items.value"
            :name="item.name"
            :disabled="items.disabled"
            @change="item.change ? item.change(item.models) : none()"
            :key="key"
            >{{ items.label }}</el-radio
          >
        </el-radio-group>
        <!-- 多选框 -->
        <el-checkbox-group
          v-model="item.models"
          v-if="item.type == 'checkbox'"
          :class="fromClass.iptClass"
          @change="item.change ? item.change(item.models) : none()"
          :min="item.min"
          :max="item.max"
        >
          <el-checkbox
            v-for="items in item.option"
            v-bind:label="items.label"
            :key="items.value"
            :disabled="items.disabled"
            :checked="items.checked"
            :name="items.name"
            @change="item.change ? item.change(item.models) : none()"
          ></el-checkbox>
        </el-checkbox-group>
        <el-input
          v-if="item.type == 'treeInput'"
          :id="item.treeIptId"
          :suffix-icon="item.endIcon"
          :prefix-icon="item.StartIcon"
          :name="item.name"
          v-model="item.models"
          v-bind:placeholder="item.placeHolder"
          :class="fromClass.iptClass"
          :disabled="item.disabled"
          :readonly="item.readonly"
        ></el-input>
        <el-tree
          v-if="item.type == 'treeInput'"
          :expand-on-click-node="flagfalse"
          :id="item.treeDataId"
          v-show="item.treeView"
          :data="item.treedata"
          :props="item.TreeProps ? item.TreeProps : treeProp"
          @node-click="item.treeClick"
          :class="fromClass.treeClass"
        ></el-tree>
        <el-tree
          v-if="item.type == 'treeCheck'"
          :ref="item.Refname"
          node-key="id"
          :default-checked-keys="item.models"
          default-expand-all
          show-checkbox
          :id="item.treeDataId"
          :data="item.treedata"
          :props="item.TreeProps ? item.TreeProps : treeProp"
          @node-click="item.treeClick ? item.treeClick() : none()"
          @check="getCheck()"
          :class="fromClass.treeClass"
          :empty-text="item.EmptyText"
        ></el-tree>
        <ip-address-input v-if="item.type == 'ip'" ref="ipSet" v-model="item.models"></ip-address-input>
      </div>
    </el-form-item>
    <el-form-item :class="fromClass.buttonClass">
      <el-button type="primary" size="large" @click="query(searchFunc.query)">{{ searchFunc.queryText }}</el-button>
      <el-button size="large" @click="reset(searchFunc.close)">{{ searchFunc.resetText }}</el-button>
    </el-form-item>
  </el-form>
</template>

<script>
/* eslint-disable */
import ipAddressInput from './components/ipAddressInput'
export default {
  name: 'SgpForm',
  data() {
    // const intervalTime = async (rule, value, callback) => {
    //   let d1 = value[0].substring(0, 10)
    //   let d2 = value[1].substring(0, 10)
    //   let tmp = d1.split('-')
    //   let date1 = new Date(tmp[0], tmp[1] - 1, tmp[2])
    //   tmp = d2.split('-')
    //   let date2 = new Date(tmp[0], tmp[1] - 1, tmp[2])
    //   if ((date2.getTime() - date1.getTime()) > 365 * 24 * 60 * 60 * 1000) {
    //     callback(new Error(this.$t('ViBorder.IC.oneYearInterval')))
    //   } else {
    //     callback()
    //   }
    // }
    return {
      pickerOptions0: {
        disabledDate(time) {
          // 控制时间范围
          // return time.getTime() < -6816297943000
          return time.getTime() <= -28800000
        }
      },
      flag: true,
      flagfalse: false,
      treeProp: {
        children: 'children',
        label: 'label'
      },
      colorPredefine: [
        // 颜色框的预定义
        '#ff4500',
        '#ff8c00',
        '#ffd700',
        '#90ee90',
        '#00ced1',
        '#1e90ff',
        '#c71585',
        '#2D15C7'
      ],
      selectAudio: {},
      palyFlag: false,
      endTimeStr: `23:59:59.999`
    }
  },
  mounted() {
    for (let k = 0; k < this.$props.searchIpt.length; k++) {
      if (this.$props.searchIpt[k].type === 'treeInput') {
        document.body.addEventListener('click', (e) => {
          if (e.target.id === this.$props.searchIpt[k].treeIptId || e.target.id === this.$props.searchIpt[k].treeDataId) {
            this.$props.searchIpt[k].treeView = true
          } else {
            this.$props.searchIpt[k].treeView = false
          }
        })
      } else if (this.$props.searchIpt[k].type === 'daterange') {
        // 将datetimerange格式转化为element相同的时间格式
        this.$props.searchIpt[k].models = this.initDate()
      } else if (this.$props.searchIpt[k].type === 'datetimerange') {
        this.$props.searchIpt[k].models = this.initDate()
      }
      // watch监听未生效，在mounted中添加处理方法
      let item = this.$props.searchIpt[k]
      if (item.type !== 'treeInput') {
        // this.$props.formRule.model[item.ruleProp] = item.models
        this.$set(this.$props.formRule.model, item.ruleProp, item.models)
      }
      if (item.type === 'treeCheck') {
        if (this.$refs[item.Refname] !== undefined) {
          const KEYS = this.$refs[item.Refname][0].getCheckedKeys()
          // this.$props.formRule.model[item.ruleProp] = KEYS
          this.$set(this.$props.formRule.model, item.ruleProp, KEYS)
        }
      }
      if (item.type === 'selectAudio') {
        for (let i in item.option) {
          if (item.option[i].value === item.models) {
            this.$data.selectAudio.path = item.option[i].path
            // this.$set(this.$data.selectAudio, 'path', item.option[i].path)
          }
        }
      }
    }
    // if (
    //   this.$router.currentRoute.path.indexOf('/ic/') !== -1 ||
    //   this.$router.currentRoute.path.indexOf('/recheckAnalysisSystem/') !== -1 ||
    //   this.$router.currentRoute.path.indexOf('/imageAnalysisSystem/') !== -1
    // ) {
    //   // IC模块中选择时间的校验,时间间隔不超过一年
    //   // 全局处理：增加输入框的长度校验， 默认36个字符
    //   this.searchIpt.forEach((item) => {
    //     if (item.type === 'text' && !this.formRule.rule[item.ruleProp]) {
    //       this.formRule.rule[item.ruleProp] = [
    //         {
    //           max: 36,
    //           message: this.$t('ViBorder.IC.common.overLength'),
    //           trigger: 'blur'
    //         }
    //       ]
    //     }
    //   })
    //   let intervalTime = async (rule, value, callback) => {
    //     let d1 = value[0].substring(0, 10)
    //     let d2 = value[1].substring(0, 10)
    //     let tmp = d1.split('-')
    //     let date1 = new Date(tmp[0], tmp[1] - 1, tmp[2])
    //     tmp = d2.split('-')
    //     let date2 = new Date(tmp[0], tmp[1] - 1, tmp[2])
    //     if (date2.getTime() - date1.getTime() >= 365 * 24 * 60 * 60 * 1000) {
    //       callback(new Error(this.$t('ViBorder.IC.common.oneYearInterval')))
    //     } else {
    //       callback()
    //     }
    //   }
    //   let emptyintervalTime = async (rule, value, callback) => {
    //     // 这里是历史车辆查询中扫描开始时间的校验
    //     if (value) {
    //       let d1 = value[0].substring(0, 10)
    //       let d2 = value[1].substring(0, 10)
    //       let tmp = d1.split('-')
    //       let date1 = new Date(tmp[0], tmp[1] - 1, tmp[2])
    //       tmp = d2.split('-')
    //       let date2 = new Date(tmp[0], tmp[1] - 1, tmp[2])
    //       if (date2.getTime() - date1.getTime() >= 365 * 24 * 60 * 60 * 1000) {
    //         callback(new Error(this.$t('ViBorder.IC.common.oneYearInterval')))
    //       } else {
    //         callback()
    //       }
    //     } else {
    //       callback()
    //     }
    //   }
    //   this.formRule.rule.time = [{ validator: intervalTime, trigger: 'change' }]
    //   this.formRule.rule.operationTime = [{ validator: intervalTime, trigger: 'change' }]
    //   this.formRule.rule.checkTime = [{ validator: intervalTime, trigger: 'change' }]
    //   this.formRule.rule.scanInTime = [{ validator: intervalTime, trigger: 'change' }]
    //   this.formRule.rule.emptyscanInTime = [{ validator: emptyintervalTime, trigger: 'change' }]
    //   this.formRule.rule.duration = [
    //     {
    //       pattern: /^[0-9]+$/,
    //       message: this.$t('ViBorder.IC.common.onlyNumber')
    //     }
    //   ]
    //   this.formRule.rule.duration2 = [
    //     {
    //       pattern: /^[0-9]+$/,
    //       message: this.$t('ViBorder.IC.common.onlyNumber')
    //     }
    //   ]
    // }
  },
  methods: {
    initDate() {
      let timeStr = []
      let pre = new Date()
      let setStr = ''
      if (window.location.href.includes('ic')) {
        setStr = new Date(pre.setMonth(pre.getMonth() - 3))
      } else {
        // setStr = new Date(pre.setFullYear(pre.getFullYear() - 1))
        setStr = new Date(pre.setMonth(pre.getMonth() - 1))
      }
      let arr = [`${setStr}`, `${new Date()}`]
      arr.forEach((e, idx) => {
        let date = this.formatDateTime(e)
        let ymdArr = date.split(' ')[0].split('-')
        let ymd = `${ymdArr[2]}-${ymdArr[1]}-${ymdArr[0]} `
        if (idx === 0) {
          ymd = ymd + `00:00:00`
        } else {
          ymd = ymd + this.endTimeStr
        }
        timeStr.push(ymd)
      })
      return timeStr
    },
    resetDate() {
      for (let k = 0; k < this.$props.searchIpt.length; k++) {
        if (this.$props.searchIpt[k].type === 'datetimerange' || this.$props.searchIpt[k].type === 'daterange') {
          // 将datetimerange格式转化为element相同的时间格式
          this.$props.searchIpt[k].models = this.initDate()
        }
      }
    },
    formatDateTime(inputTime, symbol = '-') {
      if (inputTime) {
        let date = new Date(inputTime)
        let y = date.getFullYear()
        let m = date.getMonth() + 1
        m = m < 10 ? '0' + m : m
        let d = date.getDate()
        d = d < 10 ? '0' + d : d
        let h = date.getHours()
        h = h < 10 ? '0' + h : h
        let minute = date.getMinutes()
        let second = date.getSeconds()
        minute = minute < 10 ? '0' + minute : minute
        second = second < 10 ? '0' + second : second
        // return `${y}${symbol}${m}${symbol}${d} ${h}:${minute}:${second}`
        return `${d}${symbol}${m}${symbol}${y} ${h}:${minute}:${second}`
      }
      return null
    },
    getCheck() {
      for (let k = 0; k < this.$props.searchIpt.length; k++) {
        if (this.$props.searchIpt[k].type === 'treeCheck') {
          this.$props.searchIpt[k].count = Math.random()
        }
      }
    },
    // promise (func) {
    //   return new Promise(function (resolve, reject) {
    //     func()
    //   })
    // },
    query(func) {
      let loadingInstance
      let close = () => {
        setTimeout(() => {
          loadingInstance.close()
        }, 500)
      }
      if (this.$props.formRule.rule !== '{}') {
        this.$refs[this.$props.formRule.refName].validate((valid) => {
          if (valid) {
            loadingInstance = this.$loading({
              lock: true,
              text: 'Loading',
              spinner: 'el-icon-loading',
              background: 'rgba(0, 0, 0, 0.7)'
            })
            let promise = new Promise(function (resolve, reject) {
              func()
              resolve(close)
              reject(close)
            })
            promise.then(
              (close) => {
                close()
              },
              (close) => {
                close()
              }
            )
          }
        })
      } else {
        let promise = new Promise(function (resolve, reject) {
          func()
          resolve(close)
          reject(close)
        })
        promise.then(
          (close) => {
            close()
          },
          (close) => {
            close()
          }
        )
      }
      // this.selectAudioChange()
    },
    reset(fn) {
      // console.log('Resetin')
      if (fn) {
        fn()
      }
      this.$props.formRule.flag = false
      for (let i = 0; i < this.$props.searchIpt.length; i++) {
        if (this.$props.searchIpt[i].type === 'select2' || this.$props.searchIpt[i].type === 'treeCheck') {
          this.$props.searchIpt[i].models = []
        } else if (this.$props.searchIpt[i].type === 'checkbox') {
          this.$props.searchIpt[i].models = []
          for (let k = 0; k < this.$props.searchIpt[i].option.length; k++) {
            this.$props.searchIpt[i].option[k].checked = false
          }
        } else if (this.$props.searchIpt[i].type !== 'datetimerange' || this.$props.searchIpt[i].type !== 'daterange') {
          // 除了datetimerange以外其他清空
          this.$props.searchIpt[i].models = ''
        }
      }
      this.way(this.$props.formRule.model)
      this.$refs[this.$props.formRule.refName].resetFields()
      this.resetDate()
      this.selectAudioChange()
      // console.log(this.$props.formRule.model)
    },
    isObject(val) {
      return Object.prototype.toString.call(val) === '[object Object]'
    },
    way(value) {
      for (var key in value) {
        if (this.isObject(value[key])) {
          let childrenObj = value[key]
          this.way(childrenObj)
        } else if (Array.isArray(value[key])) {
          value[key].forEach((element) => {
            if (this.isObject(element)) {
              this.way(element)
            } else {
              value[key] = []
            }
          })
        } else {
          value[key] = ''
        }
      }
    },
    none() {
      return false
    },
    playAudio() {
      // 音频试听
      let dom = document.getElementById('select_audio_id__vit')
      if (this.$data.playFlag) {
        this.$data.playFlag = false
        dom.pause()
      } else {
        this.$data.playFlag = true
        dom.play()
      }
    },
    selectAudioChange() {
      let dom = document.getElementById('select_audio_id__vit')
      if (dom) {
        dom.pause()
      }
    },
    // changeDateRange (val) {
    //   let beginDateStr = val[0]
    //   let endDateStr = [val[1].split(' ')[0], ` ${this.endTimeStr}`].join('')
    //   let dateArr = [beginDateStr, endDateStr]
    //   console.log('dateArr', dateArr)
    //   for (let k = 0; k < this.$props.searchIpt.length; k++) {
    //     if (this.$props.searchIpt[k].type === 'datetimerange' || this.$props.searchIpt[k].type === 'daterange') { // 将datetimerange格式转化为element相同的时间格式
    //       console.log('我进来了')
    //       this.$props.searchIpt[k].models = dateArr
    //     }
    //   }
    // }
    setTime(time) {
      return time.getTime() > new Date().getTime() || time.getTime() > new Date().getTime()
    }
  },
  watch: {
    searchIpt: {
      handler(oldValue, newValue) {
        for (let k = 0; k < newValue.length; k++) {
          if (newValue[k].type !== 'treeInput') {
            this.$props.formRule.model[newValue[k].ruleProp] = newValue[k].models
          }
          if (newValue[k].type === 'treeCheck') {
            //  console.log(this.$refs[newValue[k].Refname])
            if (this.$refs[newValue[k].Refname] !== undefined) {
              const KEYS = this.$refs[newValue[k].Refname][0].getCheckedKeys()
              this.$props.formRule.model[newValue[k].ruleProp] = KEYS
            }
          }
          if (newValue[k].type === 'selectAudio') {
            for (let i in newValue[k].option) {
              if (newValue[k].option[i].value === newValue[k].models) {
                this.$data.selectAudio.path = newValue[k].option[i].path
              }
            }
          }
        }
      },
      deep: true
    }
  },
  props: {
    searchIpt: {
      required: false
    },
    searchFunc: {
      required: false
    },
    fromClass: {
      type: Object,
      default: function () {
        return {
          form: 'search-form',
          formItem: 'search-form-item',
          label: 'search-form-label',
          iptClass: 'search-form-input',
          buttonClass: 'search-form-btn'
        }
      }
    },
    formRule: {
      required: false
    }
  },
  components: {
    ipAddressInput,
  },
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style>
.el-radio-group {
  line-height: 40px;
}

.colorStyle .el-color-picker__trigger {
  width: 100%;
}

.el-color-picker {
  top: 8px;
  width: 100%;
}

.selectAudio .el-button.is-circle {
  padding: 6px;
}

.el-date-editor .el-range-input {
  width: 45%;
}
</style>
