<template>
  <div class="select-manager-wrap">
    <div class="third-step">
      <el-form
        ref="formComponent"
        class="form-component"
        label-width="150px"
        :model="formComponent"
        :rules="rulesComponent"
      >
        <el-form-item label="选择组件：" prop="component">
          <el-col :span="10">
            <el-select
              v-model:value="formComponent.component"
              multiple
              collapse-tags
              filterable
              style="width: 350px"
              placeholder="请选择组件"
              @change="changeValue"
              :disabled="disabled"
            >
              <el-option
                v-for="item in optionsComponent"
                :key="item.value"
                :label="item.label"
                :value="item.value"
                :disabled="item.disabled"
              ></el-option>
            </el-select>
          </el-col>
        </el-form-item>

        <el-form-item label="已选择：" class="check-component">
          <el-col :span="20" class="tags-list">
            <el-tag
              v-bind:class="{ 'tags-component-online': tag.disabled === true }"
              class="tags-component"
              v-for="tag in tagsComponent"
              :key="tag.value"
              closable
              :type="tag.type"
              style="margin-left: 10px"
              @close="handleCloseComponent(tag)"
              >{{ tag.name }}</el-tag
            >
          </el-col>
        </el-form-item>

        <el-form-item required label="学习时长：" class="time-contrl">
          <el-col :span="10">
            <el-radio-group
              class="el-time-ctr"
              v-model:value="formComponent.courseRequire"
              :disabled="disabled"
            >
              <el-radio :label="1"
                >是（必须达到课程配置的观看时长要求才算通过）</el-radio
              >
              <el-radio :label="0">否</el-radio>
            </el-radio-group>
          </el-col>
        </el-form-item>
      </el-form>

      <el-form
        ref="formExam"
        label-width="150px"
        :model="formExam"
        class="achievement"
      >
        <el-form-item
          required
          label="项目通过标准"
          :class="customError.standard.className"
        >
          <el-select
            v-model:value="formExam.passType"
            placeholder="请选择"
            style="width: 350px"
            @change="updateCertificateType"
            :disabled="disabled"
          >
            <el-option
              v-for="item in certificateTypeList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
          <div
            class="el-form-item__error"
            v-if="customError.standard.error != ''"
          >
            {{ customError.standard.error }}
          </div>
        </el-form-item>

        <el-form-item
          required
          label="累计学习时长大于等于:"
          v-show="formExam.passType == 3"
          :class="customError.passTotalLearnTime.className"
        >
          <el-input
            placeholder="请输入"
            :disabled="disabled"
            v-model:value="formComponent.passTotalLearnTime"
            style="width: 200px"
            @input="focusFun($event, 'passTotalLearnTime')"
          >
            <template v-slot:append>分钟</template>
          </el-input>
          <div
            class="el-form-item__error"
            v-if="customError.passTotalLearnTime.error != ''"
          >
            {{ customError.passTotalLearnTime.error }}
          </div>
        </el-form-item>

        <!--add 选择平均分展示-->
        <div v-show="formExam.passType == 2">
          <div class="mleft60" v-show="formExam.passType == 2">
            <div class="mini-source" style="overflow: hidden">
              <el-form-item
                label="项目中最高"
                label-width="80px"
                style="float: left"
                :class="customError.passExamCount.className"
                class="min-label"
              >
                <div class="source-item">
                  <el-input
                    placeholder="请输入数字"
                    :disabled="disabled"
                    size="mini"
                    v-model:value="formComponent.passExamCount"
                    style="width: 150px"
                    @input="focusFun($event, 'passExamCount')"
                  >
                    <template v-slot:append>门</template>
                  </el-input>
                </div>
                <div
                  class="el-form-item__error"
                  v-if="customError.passExamCount.error != ''"
                >
                  {{ customError.passExamCount.error }}
                </div>
              </el-form-item>
              <div
                style="
                  float: left;
                  padding: 0 5px;
                  line-height: 26px;
                  font-size: 12px;
                  color: #606266;
                "
              >
                考试成绩的平均分大于等于
              </div>
              <el-form-item
                label=""
                label-width="0px"
                style="float: left"
                :class="customError.passAverageScore.className"
                class="min-label"
              >
                <div class="source-item">
                  <el-input
                    placeholder="请输入数字"
                    :disabled="disabled"
                    size="mini"
                    v-model:value="formComponent.passAverageScore"
                    style="width: 150px"
                    @input="focusFun($event, 'passAverageScore')"
                  >
                    <template v-slot:append>分</template>
                  </el-input>
                </div>
                <div
                  class="el-form-item__error"
                  v-if="customError.passAverageScore.error != ''"
                >
                  {{ customError.passAverageScore.error }}
                </div>
              </el-form-item>
              <div
                style="
                  float: left;
                  padding: 0 5px;
                  line-height: 26px;
                  font-size: 12px;
                  color: #606266;
                "
              >
                则项目通过
              </div>
            </div>
          </div>
        </div>

        <el-form-item required label="配置证书：">
          <el-col :span="10">
            <el-radio-group
              class="el-configure"
              v-model:value="formComponent.configure"
              :disabled="disabled"
            >
              <el-radio :label="1">是</el-radio>
              <el-radio :label="2">否</el-radio>
            </el-radio-group>
          </el-col>
        </el-form-item>

        <!--edit 选择配置证书展示-->
        <div
          v-show="formComponent.configure == 1 && formExam.passType == 2"
          v-for="(item, index) in formExam.exam"
          :key="index"
        >
          <div class="mleft60">
            <div class="soure-configure">
              <div class="configure-item">
                <el-form-item
                  label="平均分:"
                  label-width="65px"
                  style="float: left"
                  :class="item.minClass"
                  class="min-label"
                >
                  <el-col :span="5">
                    <el-input
                      :disabled="disabled"
                      placeholder="请输入数字"
                      size="mini"
                      v-model:value="item.rangeMin"
                      style="width: 215px"
                      @input="focusFun($event, 'rangeMin', index)"
                    >
                      <template v-slot:append>分</template>
                    </el-input>
                  </el-col>
                  <div class="el-form-item__error" v-if="item.minError">
                    {{ item.minError }}
                  </div>
                </el-form-item>
                <div style="float: left; padding: 0 5px; line-height: 26px">
                  ~
                </div>
                <el-form-item
                  label-width="0"
                  style="float: left; margin-left: 0px"
                  :class="item.maxClass"
                  class="min-label"
                >
                  <el-col :span="5">
                    <el-input
                      :disabled="disabled"
                      placeholder="请输入数字"
                      size="mini"
                      v-model:value="item.rangeMax"
                      style="width: 215px"
                      @input="focusFun($event, 'rangeMax', index)"
                    >
                      <template v-slot:append>分</template>
                    </el-input>
                  </el-col>
                  <div class="el-form-item__error" v-if="item.maxError">
                    {{ item.maxError }}
                  </div>
                </el-form-item>
              </div>
              <div class="configure-item">
                <el-form-item
                  label="发放证书:"
                  style="margin-left: -85px"
                  :class="item.certClass"
                >
                  <el-select
                    v-model:value="item.certificateId"
                    placeholder="请选择证书"
                    size="mini"
                    style="width: 450px"
                    @change="updateCertificate(index)"
                    :disabled="disabled"
                    filterable
                  >
                    <el-option
                      v-for="item in optionsCertificate"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    ></el-option>
                  </el-select>
                  <div class="el-form-item__error" v-if="item.certError">
                    {{ item.certError }}
                  </div>
                </el-form-item>
              </div>
              <div class="configure-option">
                <el-button
                  size="mini"
                  @click="addCertificate"
                  icon="el-icon-plus"
                  circle
                  :disabled="disabled"
                ></el-button>
                <el-button
                  size="mini"
                  @click="reduceCertificate(index)"
                  icon="el-icon-minus"
                  circle
                  :disabled="disabled"
                ></el-button>
              </div>
            </div>
          </div>
        </div>

        <el-form-item
          required
          v-show="
            formComponent.configure == 1 &&
            (formExam.passType == 1 || formExam.passType == 3)
          "
          label="发放证书"
          :class="customError.certificate.className"
        >
          <el-select
            v-model:value="formComponent.certificate"
            placeholder="请选择证书"
            style="width: 350px"
            :disabled="disabled"
            filterable
          >
            <el-option
              v-for="item in optionsCertificate"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
          <div
            class="el-form-item__error"
            v-if="customError.certificate.error != ''"
          >
            {{ customError.certificate.error }}
          </div>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import { openLoading, closeLoading } from '../../../utils/utils'
import * as commonUtil from '../../../utils/utils'
import * as operationData from '../../../utils/operation'
import Sortable from 'sortablejs'

let vm = null
export default {
  props: {
    openTemplateId: {
      type: String | Number,
      deault: 0,
    },
    messageObj: {
      type: Object,
      default: () => {
        return null
      },
    },
    isEditor: {
      type: Boolean,
      default: true,
    },
    newBuild: {
      type: Boolean,
      default: true,
    },
  },
  data() {
    let checkNormalInt = (rule, value, callback) => {
      const val = parseFloat(value)
      const isInteger = Number.isInteger(val)
      if (!value || (isInteger && val >= 0 && val <= 100)) {
        callback()
      } else {
        callback(new Error(`请输入0~100正整数`))
      }
    }
    return {
      customError: {
        standard: {
          className: '',
          error: '',
        },
        certificate: {
          className: '',
          error: '',
        },
        passTotalLearnTime: {
          className: '',
          error: '',
        },
        passExamCount: {
          className: '',
          error: '',
        },
        passAverageScore: {
          className: '',
          error: '',
        },
      },
      //选择项目组件 数据
      optionsComponent: [],
      optionsCertificate: [],
      formComponent: {
        component: [],
        configure: 2,
        certificate: '',
        courseRequire: 0, //模板内课程的完成是否受学习时长控制：0否1是
        passExamCount: '', //模板中最高考试门数限制：passType=2时有值
        passAverageScore: '', //门数限制下考试成绩的平均分限制：passType=2时有值
        passTotalLearnTime: '',
      },
      tagsComponent: [],
      projectStatus: '',
      status4Flag: '',
      showStorage: false,
      //考试数据
      formExam: {
        certificateType: 1, //模板证书类型：1单证书2多证书
        passType: 1, //模板通过标准类型：1所有组件通过，2根据平均分设定，3根据项目内学习时长设定
        exam: [
          {
            examCount: 1,
            rangeMin: '',
            rangeMax: '',
            certificateId: '',
            certificateName: '',
          },
        ],
      },
      certificateTypeList: [
        {
          label: '所有组件通过',
          value: 1,
        },
        {
          label: '根据平均分设定',
          value: 2,
        },
        {
          label: '根据项目内学习时长设定',
          value: 3,
        },
      ],
      organizationContent: '',
      //校验工具 数据
      rulesComponent: {
        component: [
          { required: true, message: '请选择组件', trigger: 'change' },
        ],
        certificate: [
          { required: true, message: '请选择证书', trigger: 'change' },
        ],
        visitTime: [
          { required: false, trigger: 'change', validator: checkNormalInt },
        ],
        showRules1: [
          { required: true, message: '请输入门数', trigger: 'blur' },
        ],
      },
      disabled: false,
    }
  },
  computed: {
    ...mapGetters(['_token']),
  },
  created() {
    vm = this

    vm.getComponentInfo()
    if (!vm.newBuild && !vm.isEditor) {
      this.disabled = true
    } else {
      this.disabled = false
    }
  },
  // 挂载到Dom完成时
  mounted: function () {
    commonUtil.resizeHeight()
  },
  methods: {
    // 输入校验
    focusFun(ev, parm, index) {
      console.log('=================focusFun')
      if (index != undefined) {
        if (parseInt(ev) < 0 || !this.checkIntFun(ev)) {
          console.log(typeof index)
          this.formExam.exam[index][parm] = ''
        }
        if (parm == 'rangeMax' && parseInt(ev) > 100) {
          this.formExam.exam[index][parm] = '100'
        }
        if (ev != '') {
          if (parm == 'rangeMax') {
            this.formExam.exam[index].maxClass = ''
            this.formExam.exam[index].maxError = ''
          }
          if (parm == 'rangeMin') {
            this.formExam.exam[index].minClass = ''
            this.formExam.exam[index].minError = ''
          }
        }
      } else {
        if (parseInt(ev) < 0 || !this.checkIntFun(ev)) {
          this.formComponent[parm] = ''
        }
        if (parm == 'passAverageScore' && parseInt(ev) > 100) {
          this.formComponent[parm] = '100'
        }
        if (ev != '') {
          this.customError[parm] = {
            className: '',
            error: '',
          }
        }
      }
    },
    // add 校验输入是否为整数
    checkIntFun(str) {
      console.log('=================checkIntFun')
      let r = /^\+?[0-9]*$/
      return r.test(str)
    },
    //查询组件证书信息
    getComponentInfo() {
      console.log('=================getComponentInfo')
      vm.GET('portal/openTemplate/getAllComponent').then((res) => {
        if (res.code == '000000') {
          //console.log(res);
          let componentList = res.data.componentList
          let certificateList = res.data.certificateList
          let optionsComponent = [],
            optionsCertificate = []
          for (let index = 0; index < componentList.length; index++) {
            optionsComponent[index] = {}
            optionsComponent[index].value = componentList[index].id
            optionsComponent[index].label = componentList[index].name
            optionsComponent[index].name = componentList[index].name
          }
          for (let index = 0; index < certificateList.length; index++) {
            optionsCertificate[index] = {}
            optionsCertificate[index].value = certificateList[index].id
            optionsCertificate[index].label = certificateList[index].name
            optionsCertificate[index].name = certificateList[index].name
          }
          this.optionsComponent = optionsComponent
          this.optionsCertificate = optionsCertificate
          this.organizationContent = res.data.creatorOrganizationName
          if (!vm.newBuild) {
            vm.status4Flag = 1
            vm.setEditData(this.messageObj)
          }
        }
      })
    },
    //项目组件信息 暂存/完成  1暂存2保存3发布
    componentDraft(type) {
      console.log('=================componentDraft')
      let param = {
        // componentIds: this.formComponent.component,
        componentIds: operationData.getComponent(vm.tagsComponent),
        // certificateId: this.formComponent.certificate,
        certificateId: [],
        openTemplateId: this.openTemplateId,
        type: type,
        status: this.projectStatus,
        certificateType: this.formExam.passType == 2 ? 2 : 1,
        getCertificateRule: [],
        courseRequire: this.formComponent.courseRequire,
        passType: this.formExam.passType,
      }
      if (this.formExam.passType == 2) {
        param.passAverageScore = this.formComponent.passAverageScore
        param.passExamCount = this.formComponent.passExamCount
      }
      if (this.formExam.passType == 3) {
        param.passTotalLearnTime = this.formComponent.passTotalLearnTime
      }
      // console.log('排序后',vm.tagsComponent,'param',param);
      if (this.formComponent.configure == 1) {
        //  2.多证书有规
        if (this.formExam.passType == 2) {
          let ruleData = vm.formExam.exam
          for (let o = 0; o < ruleData.length; o++) {
            if (
              ruleData[o].certificateId != '' &&
              ruleData[o].certificateId != null
            ) {
              param.certificateId[o] = ruleData[o].certificateId
            }
            param.getCertificateRule[o] = {
              certificateId: ruleData[o].certificateId,
              certificateName: ruleData[o].certificateName,
              examCount: ruleData[o].examCount,
              openTemplateId: this.openTemplateId,
              rangeMax: ruleData[o].rangeMax,
              rangeMin: ruleData[o].rangeMin,
            }
          }
        } else {
          // 1.单证书无规则
          if (
            this.formComponent.certificate != '' &&
            this.formComponent.certificate != null
          ) {
            param.certificateId[0] = this.formComponent.certificate
          }
        }
      }
      vm.POST('portal/openTemplate/componentDraft', param).then((res) => {
        console.log(res)
        vm.$message({
          message: res.message,
          type: 'info',
        })
        if (res.code == '000000') {
          //notify
          if (type == 3) {
            let query = {}
            if (this.$route.query.pageNum) {
              query = { pageNum: this.$route.query.pageNum }
            }
            this.$router.push({ path: 'template-manager', query: query })
            // this.$router.push("item-manager?pageNum="+this.$route.query.pageNum);
          }
        }
      })
    },
    //选择项目组件
    //改变组件选择情况
    changeValue(value) {
      console.log('=================changeValue')
      this.tagsComponent = []
      let len = 0
      for (let i = 0; i < value.length; i++) {
        for (let j = 0; j < this.optionsComponent.length; j++) {
          if (value[i] == this.optionsComponent[j].value) {
            this.tagsComponent[len] = {}
            this.tagsComponent[len] = this.optionsComponent[j]
            this.tagsComponent[len].value = this.optionsComponent[j].value
            this.tagsComponent[len].name = this.optionsComponent[j].label
            len++
          }
        }
      }
      //console.log('this.tagsComponent',this.tagsComponent);
    },
    // 如有数据时  初始化
    setEditData(editData) {
      //设置选择项目组件页
      let componentEdit = []
      let certificateEdit = 0
      for (let i = 0; i < editData.componentData.length; i++) {
        componentEdit.push(editData.componentData[i].relevanceId)
      }
      this.formComponent.component = componentEdit
      this.initTags(componentEdit)
      if (editData.certificateData.length > 0) {
        this.formComponent.configure = 1
        this.formComponent.certificate = editData.certificateData[0].relevanceId
      }
      if (editData.certificateRule.length > 0) {
        this.formComponent.configure = 1
      }
      // 初始化学习时间长
      this.formComponent.courseRequire =
        editData.portalOpenTemplateModel.courseRequire
      //初始化考试平均分配置数据
      this.formExam.certificateType =
        editData.portalOpenTemplateModel.certificateType
      this.formExam.passType = editData.portalOpenTemplateModel.passType
      this.formExam.exam = editData.certificateRule
      if (this.formExam.exam.length > 0) {
        for (let k = 0; k < this.formExam.exam.length; k++) {
          this.formExam.exam[k].certClass = ''
          this.formExam.exam[k].certError = ''
          this.formExam.exam[k].minClass = ''
          this.formExam.exam[k].minError = ''
          this.formExam.exam[k].maxClass = ''
          this.formExam.exam[k].maxError = ''
        }
      }
      console.log(this.formExam.exam)
      this.formComponent.passAverageScore =
        editData.portalOpenTemplateModel.passAverageScore > 0
          ? editData.portalOpenTemplateModel.passAverageScore
          : ''
      this.formComponent.passExamCount =
        editData.portalOpenTemplateModel.passExamCount > 0
          ? editData.portalOpenTemplateModel.passExamCount
          : ''
      this.formComponent.passTotalLearnTime =
        editData.portalOpenTemplateModel.passTotalLearnTime
      if (this.formExam.exam.length == 0) {
        this.formExam.exam = [
          {
            examCount: 1,
            rangeMin: '',
            rangeMax: '',
            certificateId: '',
            certificateName: '',
            minClass: '',
            minError: '',
            maxClass: '',
            maxError: '',
            certClass: '',
            certError: '',
          },
        ]
      }
    },
    initTags(value) {
      console.log('value', value, 'optionsComponent', this.optionsComponent)
      this.tagsComponent = []
      let len = 0
      for (let i = 0; i < value.length; i++) {
        for (let j = 0; j < this.optionsComponent.length; j++) {
          if (value[i] == this.optionsComponent[j].value) {
            this.tagsComponent[len] = {}
            this.tagsComponent[len].value = this.optionsComponent[j].value
            this.tagsComponent[len].name = this.optionsComponent[j].label
            // 不可编辑
            if (vm.status4Flag == 1) {
              this.optionsComponent[j].disabled = true
              this.tagsComponent[len].disabled = true
            }
            len++
          }
        }
      }
      console.log('this.optionsComponent值：', this.optionsComponent)
    },
    //关闭已选择组件
    handleCloseComponent(tag) {
      console.log('=================handleCloseComponent')
      if (tag.disabled == true) {
        return
      }
      // if (this.projectStatus == 1 || this.projectStatus == 2) {
      this.tagsComponent.splice(this.tagsComponent.indexOf(tag), 1)
      this.formComponent.component = []
      for (let j = 0; j < this.tagsComponent.length; j++) {
        this.formComponent.component[j] = this.tagsComponent[j].value
      }
      // }
    },
    // 增加配置证书
    addCertificate() {
      console.log('=================addCertificate')
      if (vm.formExam.exam.length == 5) {
        return vm.$message('最多配置5个证书')
      }
      let obj = {
        examCount: 1,
        rangeMin: '',
        rangeMax: '',
        certificateId: '',
        certificateName: '',
        minClass: '',
        minError: '',
        maxClass: '',
        maxError: '',
        certClass: '',
        certError: '',
      }
      vm.formExam.exam.push(obj)
    },
    // 减少配置证书
    reduceCertificate(index) {
      console.log('=================reduceCertificate')
      if (vm.formExam.exam.length > 1) {
        vm.formExam.exam.splice(index, 1)
      } else {
        vm.$message('至少配置1个证书')
      }
    },
    // 选择证书
    updateCertificate(index) {
      // console.log('optionsCertificate',vm.optionsCertificate,'index',index,'item',vm.formExam.exam[index])
      for (let i = 0; i < vm.optionsCertificate.length; i++) {
        if (
          vm.optionsCertificate[i].value ==
          vm.formExam.exam[index].certificateId
        ) {
          vm.formExam.exam[index].certificateName =
            vm.optionsCertificate[i].label
          break
        }
      }
      vm.formExam.exam[index].certClass = ''
      vm.formExam.exam[index].certError = ''
    },
    //更新项目成绩评定条件
    updateCertificateType() {
      console.log('=================updateCertificateType')
      console.log('更新certificateType', vm.formExam.certificateType)
      if (vm.formExam.passType == 2) {
        vm.formExam.exam = [
          {
            examCount: 1,
            rangeMin: '',
            rangeMax: '',
            certificateId: '',
            certificateName: '',
            minClass: '',
            minError: '',
            maxClass: '',
            maxError: '',
            certClass: '',
            certError: '',
          },
        ]
      } else if (vm.formExam.passType == 1) {
        vm.formComponent.certificate = ''
      }
    },
    setMoreOption(data, type) {
      console.log('=================setMoreOption')
      let option = []
      for (let i = 0; i < data.length; i++) {
        let obj = data[i]
        if (type == 'cities') {
          obj.label = data[i].cityName
          obj.value = data[i].cityId
        } else if (type == 'counties') {
          obj.label = data[i].countyName
          obj.value = data[i].countyId
          // obj.leaf = true;
        } else if (type == 'towns') {
          obj.label = data[i].townName
          obj.value = data[i].townId
          obj.leaf = true
        }
        option.push(obj)
      }
      return option
    },
  },
}
</script>

<style lang="scss">
.min-label {
  .el-form-item__label {
    line-height: 26px;
  }
  .el-form-item__content {
    line-height: 26px;
  }
}
.select-manager-wrap {
  padding-top: 64px;
  .mleft60 {
    margin-left: 60px;
  }
  .soure-configure {
    background: #f9f9f9;
    padding: 15px;
    width: 550px;
    font-size: 12px;
    color: #606266;
    position: relative;
    margin-bottom: 20px;
    .configure-option {
      position: absolute;
      right: -95px;
      top: 50%;
      margin-top: -15px;
    }
    .mb15 {
      margin-bottom: 15px;
    }
    .configure-item {
      overflow: hidden;
      .configure-item-l {
        display: inline-block;
        width: 60px;
        text-align: right;
      }
    }
  }
  .mini-source {
    background: #f9f9f9;
    width: 650px;
    padding: 15px;
    margin-bottom: 20px;
    .source-item {
      padding-top: 0px;
      font-size: 12px;
      line-height: 28px;
      color: #606266;
    }
  }
  .third-step {
    margin: 30px 0 0px 30px;
    padding-bottom: 30px;
    ::-webkit-scrollbar {
      width: 4px;
      height: 20px;
      background-color: #d8d8d8;
    }
    ::-webkit-scrollbar-thumb {
      background-color: #d8d8d8;
    }
    .el-tag {
      margin-top: 5px;
      display: table;
      background-color: #e6f1fc;
      color: #389efe;
    }
    .el-select {
      .el-tag {
        i {
          display: none;
        }
      }
    }
    .tags-list {
      border: 1px #e8e8e8 solid;
      height: 350px;
      min-width: 280px;
      overflow-y: scroll;
    }
    .tags-component-online {
      color: #9aceff;
      background-color: #f3f8fe;
      border-color: #d5eafe;
    }
    .achievement {
      margin-top: 60px;
    }
    .form-component {
      position: relative;
    }
    .check-component {
      top: 0px;
      right: 5%;
      position: absolute;
      z-index: 999;
    }
    .el-time-ctr {
      .el-radio {
        display: block;
        padding: 10px 0;
      }
    }
    .el-configure {
      width: 200px;
    }
    .time-contrl {
      .el-input__inner {
        padding-right: 0;
      }
      .el-input-group__append {
        padding: 0 8px;
      }
    }
  }
}
.edit-img {
  width: 20px;
}
.popover-content {
  position: relative;
  top: 0;
  left: 0;
}
</style>
