<template>
  <div>
    <div class="page">
      <div class="page-content">
        <div class="p-title">大赛信息</div>
        <el-form label-width="170px"
                 label-suffix=":"
                 size="small"
                 :disabled="!editing && form.id !== ''">
          <el-form-item label="竞赛封面（选填）">
            <el-upload class="avatar-uploader"
                       accept=".jpg,.png,.jpeg,.gif"
                       :on-remove="handleRemove"
                       :on-error="uploadError"
                       :before-remove="beforeRemove"
                       :limit="1"
                       :on-exceed="handleExceed"
                       action=""
                       :http-request="handleRequest">
              <img v-if="form.coverUrl"
                   :src="form.coverUrl"
                   class="avatar">
              <div class="uploader-default"
                   v-else>
                <i class="el-icon-plus"></i>
                <p>上传封面</p>
              </div>
              <div slot="tip"
                   class="el-upload__tip">
                <p>展示宽度为220，高度140，JPG/PNG/GIF，3MB以内</p>
              </div>
            </el-upload>
          </el-form-item>
          <el-form-item label="竞赛封面长图（选填）">
            <el-upload class="avatar-uploader avatar-uploader-lg"
                       accept=".jpg,.png,.jpeg,.gif"
                       :on-remove="handleLgRemove"
                       :on-error="uploadError"
                       :before-remove="beforeRemove"
                       :limit="1"
                       :on-exceed="handleExceed"
                       action=""
                       :http-request="handleRequestLg">
              <img v-if="form.carouselUrl"
                   :src="form.carouselUrl"
                   class="avatar-lg">
              <div class="uploader-default"
                   v-else>
                <i class="el-icon-plus"></i>
                <p>上传封面</p>
              </div>
              <div slot="tip"
                   class="el-upload__tip">
                <p>展示宽度为1920，高度300，JPG/PNG/GIF，3MB以内</p>
              </div>
            </el-upload>
          </el-form-item>
          <el-form-item class="req"
                        label="竞赛名称">
            <div class="d-inline-block">
              <el-input placeholder="请输入竞赛名称"
                        v-model="form.name"
                        clearable></el-input>
            </div>
          </el-form-item>
          <el-form-item class="req"
                        label="主办方">
            <div class="inline-input">
              <div class="input-wrap"
                   v-for="(item,index) in sponsorList"
                   :key="index">
                <el-input placeholder="主办方名称"
                          v-model="sponsorList[index]"></el-input>
                <i v-if="sponsorList.length > 1"
                   class="remove"
                   @click="delSponsor(index)"></i>
                <button v-if="index == 0"
                        class="add-btn"
                        type="button"
                        :disabled="!editing && form.id !== ''"
                        @click="addSponsor">
                  <i class="el-icon-plus"></i>
                  <span>添加</span>
                </button>
              </div>
            </div>
          </el-form-item>
          <el-form-item label="承办方（选填）">
            <div class="inline-input">
              <div class="input-wrap"
                   v-for="(item,index) in undertakerList"
                   :key="index">
                <el-input placeholder="承办方名称"
                          v-model="undertakerList[index]"></el-input>
                <i v-if="undertakerList.length > 1"
                   class="remove"
                   @click="delOrganizer(index)"></i>
                <button v-if="index == 0"
                        class="add-btn"
                        type="button"
                        :disabled="!editing && form.id !== ''"
                        @click="addOrganizer">
                  <i class="el-icon-plus"></i>
                  <span>添加</span>
                </button>
              </div>
            </div>
            <button v-if="!undertakerList.length"
                    class="add-btn"
                    type="button"
                    @click="addOrganizer">
              <i class="el-icon-plus"></i>
              <span>添加</span>
            </button>
          </el-form-item>
          <el-form-item class="req"
                        label="报名时间">
            <el-date-picker v-model="signupTime"
                            value-format="yyyy-MM-dd HH:mm:ss"
                            type="datetimerange"
                            range-separator="-"
                            start-placeholder="开始日期"
                            end-placeholder="结束日期"
                            :picker-options="pickerOptions"></el-date-picker>
          </el-form-item>
          <el-form-item class="req"
                        label="竞赛时间">
            <el-date-picker v-model="playTime"
                            value-format="yyyy-MM-dd HH:mm:ss"
                            type="datetimerange"
                            range-separator="-"
                            start-placeholder="开始日期"
                            end-placeholder="结束日期"
                            :picker-options="pickerOptions"></el-date-picker>
          </el-form-item>
          <el-form-item class="req"
                        label="比赛范围">
            <div v-if="form.id">
              <el-radio v-model="form.competitionScope"
                        :label="0"
                        disabled>本校内</el-radio>
            </div>
            <div>
              <el-radio v-model="form.competitionScope"
                        :label="1">全平台</el-radio>
            </div>
            <div>
              <el-radio v-model="form.competitionScope"
                        :label="2">指定区域、院校</el-radio>
              <el-button v-if="form.competitionScope === 2"
                         type="primary"
                         size="mini"
                         @click="showRange">选择院校</el-button>
              <span style="margin-left: 20px">{{ rangeName }}</span>
            </div>
          </el-form-item>
          <el-form-item class="req"
                        label="竞赛类型">
            <el-radio v-model="form.completeCompetitionSetup.competitionType"
                      :label="0">个人赛</el-radio>
            <el-radio v-model="form.completeCompetitionSetup.competitionType"
                      :label="1">团队赛</el-radio>
          </el-form-item>
          <el-form-item class="req"
                        v-if="!form.completeCompetitionSetup.competitionType"
                        label="报名人数上限">
            <div class="input-center">
              <el-input placeholder="请输入人数"
                        v-model.number="form.completeCompetitionSetup.quantityLimit"
                        type="number"></el-input> 人
            </div>
          </el-form-item>
          <template v-if="form.completeCompetitionSetup.competitionType">
            <el-form-item class="req"
                          label="报名团队数上限">
              <div class="input-center">
                <el-input placeholder="请输入团队数"
                          v-model.number="form.completeCompetitionSetup.quantityLimit"
                          type="number"></el-input> 队
              </div>
            </el-form-item>
            <el-form-item class="req"
                          label="团队人数">
              <div class="input-center"
                   style="width: 250px;">
                <el-input v-model.number="form.completeCompetitionSetup.minTeamSize"
                          type="number"></el-input> 至
                <el-input style="margin-left: 5px;"
                          v-model.number="form.completeCompetitionSetup.maxTeamSize"
                          type="number"></el-input> 人/队
              </div>
            </el-form-item>
          </template>
          <el-form-item class="req"
                        label="报名邀请码">
            <div class="input-center"
                 style="width: 550px;">
              <el-radio v-model="form.completeCompetitionSetup.isNeedCode"
                        :label="0">不需要</el-radio>
              <el-radio v-model="form.completeCompetitionSetup.isNeedCode"
                        :label="1">需要</el-radio>
              <el-input style="width: 250px"
                        placeholder="请输入4位邀请码或点击随机生成"
                        v-model="form.completeCompetitionSetup.invitationCode"
                        :disabled="form.completeCompetitionSetup.isNeedCode === 0"></el-input>
              <el-button v-if="form.completeCompetitionSetup.isNeedCode === 1"
                         @click="randomInv">随机</el-button>
            </div>
          </el-form-item>
          <el-form-item class="req"
                        label="竞赛详情">
            <quill v-if="quillShow"
                   :border="true"
                   v-model="form.description"
                   :height="400"
                   :readonly="!editing && form.id !== ''" />
          </el-form-item>
          <el-form-item label="附件">
            <Upload :limit="5"
                    :file-list.sync="fileList"
                    :on-remove="handleAnnexRemove"
                    @onSuccess="uploadAnnexSuccess" />
          </el-form-item>
        </el-form>
      </div>
    </div>

    <el-dialog title="请勾选院校"
               :visible.sync="rangeVisible"
               width="580px"
               custom-class="range-dia"
               :close-on-click-modal="false">
      <div class="range-wrap">
        <el-cascader ref="range"
                     class="range-cas"
                     key="range"
                     v-model="range"
                     :props="props"
                     :show-all-levels="false"
                     clearable
                     filterable
                     :before-filter="beforeFilter"
                     :options="rangeList"
                     @change="rangeChange"
                     @visible-change="rangeViChange"
                     @input.native="rangeSearch"></el-cascader>
        <el-tag v-for="(tag, i) in rangeChecked"
                :key="tag.value"
                class="range-check"
                closable
                :disable-transitions="false"
                @close="val => closeRange(i)">
          {{tag.label}}
        </el-tag>
      </div>

      <span slot="footer"
            class="dialog-footer">
        <el-button size="small"
                   @click="rangeVisible = false">取 消</el-button>
        <el-button size="small"
                   type="primary"
                   @click="rangeSubmit">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import util from "@/libs/util";
import quill from "@/components/quill";
import Upload from '@/components/upload';
import Oss from '@/components/upload/upload.js'
export default {
  props: ['editing'],
  data () {
    const that = this
    return {
      form: {
        id: this.$route.query.id || '',
        platformSource: 0, // 平台来源(0:中台，1：职站)
        ztOpen: 0, // 中台是否开启(0开启 1未开启 默认0)
        name: '',
        sponsor: '',
        undertaker: '',
        competitionScope: 1, // 大赛范围(0:本校内 1:全平台 2:指定区域、院校)
        competitionRangeList: [], // 大赛范围选择
        competitionAnnexList: [], // 赛事附件
        coverUrl: '',
        carouselUrl: '',
        publishStatus: 0,
        signUpStartTime: '',
        signUpEndTime: '',
        playStartTime: '',
        playEndTime: '',
        description: '',
        releaseType: 0,
        completeCompetitionSetup: {
          competitionType: 0,
          invitationCode: '',
          isNeedCode: 0,
          maxTeamSize: '',
          minTeamSize: '',
          quantityLimit: '',
        }
      },
      fileName: '',
      signupTime: [],
      playTime: [],
      sponsorList: [""],
      undertakerList: [""],
      fileList: [],
      pickerOptions: {
        disabledDate: time => {
          return this.$route.query.id ? false : time.getTime() < new Date().getTime() - 86400000
        }
      },
      rangeVisible: false,
      range: [],
      rangeInit: [],
      rangeName: '',
      rangeChecked: [],
      schools: [],
      rangeList: [],
      rangeTimer: null,
      // 选择区域懒加载
      props: {
        multiple: true,
        checkStrictly: true,
        lazy: true,
        lazyLoad (node, resolve) {
          // 如果是在模糊搜索中，则不再用懒加载请求数据
          const input = document.querySelector('.el-cascader__search-input')
          const checked = that.rangeChecked

          if (input && input.value.trim()) {
            const val = input.value.trim()
            return that.schools.filter(e => e.label.includes(val))
          }

          const { level, value } = node
          // 省份
          if (!level) {
            that.$get(that.api.queryProvince).then(({ list }) => {
              const data = []
              list.map(e => {
                e.value = e.provinceId
                e.label = e.provinceName
                e.children = []
                e.disabled = !!checked.find(n => n.provinceId == e.provinceId && !n.cityId)
                data.push(e)
              })
              resolve(data)
            }).catch(res => { })
          } else if (level === 1) {
            // 城市
            that.$get(that.api.queryCity, {
              provinceId: value
            }).then(({ list }) => {
              const data = []
              list.map(e => {
                e.value = e.cityId
                e.label = e.cityName
                e.children = []
                e.disabled = !!checked.find(n => n.cityId == e.cityId && n.provinceId == e.provinceId && !n.schoolId)
                data.push(e)
              })
              resolve(data)
            }).catch(res => { })
          } else if (level === 2) {
            // 学校
            that.$get(that.api.getSchoolsByProvince, {
              provinceId: node.data.provinceId,
              cityId: value,
              schoolName: ''
            }).then(({ list }) => {
              const data = []
              list.map(e => {
                e.value = e.schoolId
                e.label = e.schoolName
                e.leaf = true
                e.disabled = !!checked.find(n => n.schoolId == e.schoolId && n.cityId == e.cityId && n.provinceId == e.provinceId)
                data.push(e)
              })
              resolve(data)
            }).catch(res => { })
          } else {
            resolve([])
          }
        }
      },
      submiting: false,
      updateTime: 0,
      quillShow: true
    };
  },
  components: {
    quill,
    Upload
  },
  watch: {
    editing: function (val) {
      this.quillShow = false
      this.$nextTick(() => {
        this.quillShow = true
      })
    },
    // 监听信息是否有更改,有的话页面离开的时候要询问是否要保存
    form: {
      handler () {
        this.updateTime++
      },
      deep: true
    },
    signupTime: function (val) {
      const { form } = this
      if (val) {
        form.signUpStartTime = val[0];
        form.signUpEndTime = val[1];
      } else {
        form.signUpStartTime = ''
        form.signUpEndTime = ''
      }
    },
    playTime: function (val) {
      const { form } = this
      if (val) {
        form.playStartTime = val[0]
        form.playEndTime = val[1]
      } else {
        form.playStartTime = ''
        form.playEndTime = ''
      }
    }
  },
  mounted () {
    this.getData()
    this.getSchool()
  },
  methods: {
    getData () {
      const { id } = this.form
      id && this.$post(`${this.api.getCompetition}?competitionId=${id}`).then(({ competition }) => {
        this.$parent.publishStatus = competition.publishStatus
        this.$parent.releaseType = competition.releaseType
        this.$parent.setupId = competition.completeCompetitionSetup.setupId
        if (competition.signUpStartTime) this.signupTime = [competition.signUpStartTime, competition.signUpEndTime]
        if (competition.playStartTime) this.playTime = [competition.playStartTime, competition.playEndTime]
        this.sponsorList = competition.sponsor.split(",")
        this.undertakerList = competition.undertaker.split(",")
        // 附件
        const fileList = competition.competitionAnnexList
        if (fileList) {
          const files = []
          fileList.map(e => {
            files.push({
              id: e.id,
              name: e.fileName,
              url: e.filePath
            })
          })
          this.fileList = files
        } else {
          competition.competitionAnnexList = []
        }

        // 选择范围
        const ranges = competition.competitionRangeList
        if (ranges) {
          const range = []
          ranges.map(e => {
            const item = [+e.provinceId]
            e.cityId && item.push(+e.cityId)
            e.schoolId && item.push(+e.schoolId)
            range.push(item)
          })
          this.range = range
        }

        // 选择范围name
        const rangeName = competition.competitionRangeRespList
        if (rangeName) {
          const range = []
          rangeName.map(e => {
            const name = e.type ? (e.cityName || e.provinceName) : e.schoolName
            range.push(name)
          })
          this.rangeName = range.join('，')
        }
        this.form = competition
        this.$parent.resumeData()
        this.$nextTick(() => {
          this.updateTime = 0
        })
      }).catch(err => { })
    },
    // 选择范围
    showRange () {
      this.rangeVisible = true
    },
    // 范围勾选回调
    rangeChange (val, e) {
      const checked = this.$refs.range.getCheckedNodes()
      const name = []
      const { rangeChecked } = this
      checked.map(e => {
        rangeChecked.find(n => n.value === e.value && n.label == e.label) || name.push(e.data) // 未勾选的，则push
      })
      this.rangeChecked.push(...name)
    },
    // 范围展开收缩回调
    rangeViChange (e) {
      // 展开的时候清空搜索结果
      if (e) {
        this.rangeList = []
      }
    },
    // 获取学校列表
    getSchool () {
      this.$get(this.api.querySchoolData).then(({ list }) => {
        const result = []
        list.map(e => {
          e.value = e.schoolId
          e.label = e.schoolName
          e.leaf = true
          result.push(e)
        })
        this.schools = result
      }).catch(res => { })
    },
    // 范围模糊查询前置钩子
    beforeFilter () {
      return false
    },
    // 范围筛选
    rangeSearch (el) {
      const val = el.target.value.trim()
      const checked = this.rangeChecked
      if (!val) {
        this.rangeList = []
        return false
      }
      clearTimeout(this.rangeTimer)
      this.rangeTimer = setTimeout(() => {
        let result = this.schools.filter(e => {
          if (e.label.includes(val)) {
            e.disabled = !!checked.find(n => n.schoolId == e.schoolId)
            return e
          }
        }) // 用学校列表做比对
        this.rangeList = result
      }, 100)
    },
    closeRange (i) {
      this.rangeChecked.splice(i, 1)
    },
    // 范围确定
    rangeSubmit () {
      // 处理提交需要的id
      const data = []
      const checked = this.rangeChecked
      checked.map(e => {
        data.push({
          provinceId: e.provinceId || '',
          cityId: e.cityId || '',
          schoolId: e.schoolId || '',
          type: e.schoolId ? 0 : 1
        })
      })
      this.form.competitionRangeList = data

      // 处理显示的name
      const name = []
      checked.map(e => {
        name.push(e.label)
      })
      this.rangeName = name.join('、')

      this.rangeVisible = false
    },
    handleExceed (files, fileList) {
      util.warningMsg(`当前限制选择 1 个文件，如需更换，请删除上一个文件再重新选择！`);
    },
    // 封面自定义上传
    async handleRequest ({ file }) {
      Oss.upload(file).then(res => {
        this.form.coverUrl = res.url
      })
    },
    // 封面自定义上传
    async handleRequestLg ({ file }) {
      Oss.upload(file).then(res => {
        this.form.carouselUrl = res.url
      })
    },
    // 附件上传成功
    uploadAnnexSuccess (file) {
      const { id } = this.form
      const data = {
        competitionId: id || '',
        fileName: file.name,
        filePath: file.url
      }
      this.form.competitionAnnexList.push(data)
      // 编辑的时候需要调新增附件接口
      id && this.$post(this.api.saveComAnnex, data).then(res => { }).catch(res => { })
    },
    uploadError (err, file, fileList) {
      this.$message({
        message: "上传出错，请重试！",
        type: "error",
        center: true
      })
    },
    beforeRemove (file, fileList) {
      return this.$confirm(`确定移除 ${file.name}？`);
    },
    handleRemove () {
      Oss.del(this.form.coverUrl)
      this.form.coverUrl = ''
    },
    handleLgRemove () {
      Oss.del(this.form.carouselUrl)
      this.form.carouselUrl = ''
    },
    handleAnnexRemove (file, fileList) {
      Oss.del(file.url)
      const { id } = file
      id && this.$post(`${this.api.delComAnnex}?id=${id}`).then(res => { }).catch(res => { })
    },
    // 随机邀请码
    randomInv () {
      let result = ''
      for (let i = 0; i < 4; i++) {
        result += Math.floor(Math.random() * 10);
      }
      this.form.completeCompetitionSetup.invitationCode = result
    },
    /**
     * @description 提交
     * status 0：草稿，1发布
     * next 0：返回，1：不做任何操作，2：下一步
     * releaseType 发布类型（0发布信息，1完整比赛）
     * */
    save (status, next = 0, releaseType = 0) {
      const form = JSON.parse(JSON.stringify(this.form))
      form.sponsor = this.sponsorList.filter(d => d).join();
      form.undertaker = this.undertakerList.filter(d => d).join();
      if (!form.name) return util.warningMsg("请填写竞赛名称");
      // 下一步需要校验
      if (next === 2) {
        if (form.competitionScope == 2 && (!form.competitionRangeList || !form.competitionRangeList.length)) return util.warningMsg('请选择区域、院校')
        if (!form.sponsor) return util.warningMsg("请填写主办方");
        if (!form.signUpStartTime) return util.warningMsg("请选择报名时间");
        let now = new Date().getTime();
        let signUpStartTime = new Date(form.signUpStartTime).getTime();
        let signUpEndTime = new Date(form.signUpEndTime).getTime();
        let playStartTime = new Date(form.playStartTime).getTime();
        if (!form.playStartTime) return util.warningMsg("请选择竞赛时间");
        if (playStartTime && signUpEndTime && playStartTime < signUpEndTime) return util.warningMsg("竞赛时间不能早于报名结束时间");
        const { competitionType, quantityLimit, minTeamSize, maxTeamSize, isNeedCode, invitationCode } = form.completeCompetitionSetup
        // 团队
        if (competitionType) {
          if (quantityLimit === '') return util.warningMsg('请填写报名团队数上限')
          if (quantityLimit < 0) return util.warningMsg('报名团队数上限不得小于0')
          if (minTeamSize === '') return util.warningMsg('请填写团队人数下限')
          if (minTeamSize < 2) return util.warningMsg('团队人数下限不得小于2')
          if (maxTeamSize === '') return util.warningMsg('请填写团队人数上限')
          if (minTeamSize > maxTeamSize) return util.warningMsg('团队人数上限不得小于下限')
        } else { // 个人
          if (quantityLimit === '') return util.warningMsg('请填写报名人数上限')
          if (quantityLimit < 0) return util.warningMsg('报名人数上限不得小于0')
        }
        if (isNeedCode && (!invitationCode || invitationCode.length !== 4)) return util.warningMsg('请填写四位数邀请码')
        if (!form.description) return util.warningMsg("请填写竞赛详情");
      } else {
        if (form.competitionScope == 2 && (!form.competitionRangeList || !form.competitionRangeList.length)) form.competitionScope = 1
      }
      this.$parent.showLoad()
      // delete form.publishStatus
      // if (status === 1) form.publishStatus = 1
      form.publishStatus = status
      form.ztOpen = form.id ? form.ztOpen : (status ? 0 : 1) // 保存则禁用，发布则启用
      form.releaseType = releaseType
      form.id = this.$route.query.id
      if (form.id) {
        this.$post(this.api.editCompetition, form).then(res => {
          this.$parent.hideLoad()
          this.updateTime && util.successMsg("修改成功");
          this.updateTime = 0
          this.$emit('next', next)
        }).catch(err => {
          this.$parent.hideLoad()
        });
      } else {
        this.$post(this.api.addCompetition, form).then(({ competitionId, setupId }) => {
          this.updateTime = 0
          this.$parent.hideLoad()
          util.successMsg("创建成功");
          this.$emit('next', next, setupId, competitionId)
        }).catch(err => {
          this.$parent.hideLoad()
        });
      }
    },
    // 预览
    preview () {
      util.local.set('match', this.form)
      window.open(this.$router.resolve('/matchPreview').href)
    },
    addSponsor () {
      this.sponsorList.push("");
    },
    delSponsor (index) {
      this.sponsorList.splice(index, 1);
    },
    addOrganizer () {
      this.undertakerList.push("");
    },
    delOrganizer (index) {
      this.undertakerList.splice(index, 1);
    }
  }
};
</script>

<style scoped lang="scss">
$upload-width: 220px;
$upload-height: 140px;
$upload-lg-height: 150px;
/deep/ .avatar-uploader {
    .el-upload {
        position: relative;
        width: $upload-width;
        height: $upload-height;
        border: 1px dashed #d9d9d9;
        border-radius: 6px;
        cursor: pointer;
        overflow: hidden;

        &:hover {
            border-color: #cb221c;
        }

        .uploader-default {
            display: flex;
            height: $upload-height;
            flex-direction: column;
            justify-content: center;
            text-align: center;
            background: rgba(0, 0, 0, 0.04);

            i {
                font-size: 20px;
                font-weight: bold;
                color: #8c939d;
            }

            p {
                margin-top: 10px;
                font-size: 14px;
                color: rgba(0, 0, 0, 0.65);
                line-height: 1;
            }
        }
    }

    &.avatar-uploader-lg {
        .el-upload {
            width: 100%;
            max-width: 960px;
            height: $upload-lg-height;

            .uploader-default {
                height: $upload-lg-height;
            }
        }
    }

    .avatar {
        display: block;
        width: $upload-width;
        height: $upload-height;
    }

    .avatar-lg {
        display: block;
        width: 100%;
        height: $upload-lg-height;
    }

    .el-upload__tip {
        margin-top: 0;

        p {
            font-size: 14px;
            color: rgba(0, 0, 0, 0.45);
            line-height: 1;

            &:first-child {
                margin-bottom: 5px;
            }
        }
    }
}

/deep/ .d-inline-block {
    width: 216px;

    .el-select,
    .el-input {
        width: 100%;
    }
}
.inline-input {
    .input-wrap {
        display: flex;
        align-items: center;
        margin-bottom: 10px;

        .el-input {
            display: inline-block;
            width: 216px;
            margin-right: 8px;
        }

        .remove {
            width: 16px;
            height: 16px;
            background: url('../../../assets/img/close.png') 0 0 / cover no-repeat;
            cursor: pointer;
        }
    }

    .add-btn {
        margin-left: 32px;
    }
}

.add-btn {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 216px;
    line-height: 32px;
    font-size: 14px;
    color: rgba(0, 0, 0, 0.65);
    background-color: transparent;
    border: 1px dashed rgba(0, 0, 0, 0.15);
    border-radius: 4px;
    cursor: pointer;

    i {
        margin-right: 8px;
        font-size: 14px;
        font-weight: bold;
    }
}
.range-check {
    display: inline-block;
    margin: 0 0 10px 10px;
}
/deep/.range-cas {
    .el-tag {
        display: none;
    }
}
.input-center {
    display: flex;
    align-items: center;
    width: 216px;
    white-space: nowrap;
    .el-input {
        margin-right: 5px;
    }
}
.el-steps {
    justify-content: center;
}
/deep/.req {
    .el-form-item__label {
        &:before {
            content: '*';
            margin-right: 5px;
            font-size: 18px;
            vertical-align: middle;
            color: #f00;
        }
    }
}
</style>