<template>
  <div class="yqrange-index-wrapper">
    <bread-crumb :curmbFirst="curmbFirst"></bread-crumb>
    <!--<bread-crumb :curmbFirst="curmbFirst" :curmbSecond="curmbSecond"></bread-crumb>-->
    <div class="yqrange-index-content screenSet">
      <div class="header-title">广场管理</div>
      <el-form
        ref="searchForm"
        :model="searchForm"
        label-width="75px"
        label-suffix=":"
        :inline="true"
      >
        <el-row :gutter="30" type="flex" style="margin-top: 10px">
          <el-col :span="9">
            <el-form-item label="专区名称">
              <el-input
                v-model="searchForm.squareName"
                size="small"
                placeholder="请输入专区名称"
                style="margin-left: 20px; height: 32px; line-height: 32px"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="9" style="padding-left: 0px">
            <el-form-item label="疾病标签">
              <el-select
                multiple
                :multiple-limit="5"
                v-model="searchForm.diseaseIdList"
                id="statusSelector"
                placeholder="请选择疾病标签"
                filterable
                clearable
                style="margin-left: 20px; height: 32px; line-height: 32px"
              >
                <el-option
                  v-for="item in diseaseList"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="30" type="flex" style="margin-top: 10px">
          <el-col :span="9">
            <el-form-item label="科室标签">
              <el-select
                multiple
                :multiple-limit="5"
                v-model="searchForm.deptIdList"
                id="statusSelector"
                placeholder="请选择科室标签"
                clearable
                filterable
                style="margin-left: 20px; height: 32px; line-height: 32px"
              >
                <el-option
                  v-for="item in deptList"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="9">
            <el-form-item label="学科标签">
              <el-select
                multiple
                :multiple-limit="5"
                v-model="searchForm.subjectIdList"
                id="statusSelector"
                placeholder="请选择学科标签"
                filterable
                clearable
                style="margin-left: 20px; height: 32px; line-height: 32px"
              >
                <el-option
                  v-for="item in subjectList"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="7" style="text-align: right">
            <el-button type="primary" size="small" @click="search"
              >搜索</el-button
            >
            <el-button
              type="default"
              size="small"
              @click="resetForm"
              style="margin-left: 0"
              >取消搜索</el-button
            >
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24" style="text-align: right">
            <el-button type="primary" size="small" @click="createPlaza"
              >添加专区</el-button
            >
          </el-col>
        </el-row>
      </el-form>
      <el-table
        :data="tableData"
        class="item-table"
        style="width: 100%; margin-top: 10px"
      >
        <el-table-column
          prop="squareName"
          label="专区名称"
          min-width="100"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="type"
          label="专区类型"
          min-width="100"
          align="center"
        >
          <template v-slot="scope">
            <span>{{ $filters.circleTypeFilter(scope.row.type) }}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="diseaseTags"
          label="疾病标签"
          min-width="150"
          align="center"
        >
          <template v-slot="scope">
            <span>{{ $filters.tagsFilter(scope.row.diseaseTags) }}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="deptTags"
          label="科室标签"
          min-width="150"
          align="center"
        >
          <template v-slot="scope">
            <span>{{ $filters.tagsFilter(scope.row.deptTags) }}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="subjectTags"
          label="学科标签"
          min-width="150"
          align="center"
        >
          <template v-slot="scope">
            <span>{{ $filters.tagsFilter(scope.row.subjectTags) }}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="createdTime"
          label="添加时间"
          min-width="70"
          align="center"
        >
          <template v-slot="scope">
            <span>{{ $filters.liveDateFilter(scope.row.createdTime) }}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" min-width="100" align="center">
          <template v-slot="scope">
            <el-button @click="editPlaza(scope.row)" type="text" size="small"
              >编辑</el-button
            >
            <el-button @click="delPlaza(scope.row)" type="text" size="small"
              >移除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <div class="pagination">
        <el-pagination
          background
          @size-change="handleSizeChange"
          @current-change="handleNumChange"
          :current-page="searchForm.pageNo"
          :page-sizes="[10, 30, 50, 100, 200]"
          :page-size="searchForm.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="totalRows"
        ></el-pagination>
      </div>

      <el-dialog
        :title="title"
        v-model="dialogVisible"
        width="700px"
        :close-on-click-modal="false"
        @close="handleClose"
        center
      >
        <el-form
          ref="plazaForm"
          :model="plazaForm"
          :rules="rules"
          label-suffix=":"
        >
          <el-form-item
            label="专区名称"
            class="required-label"
            prop="businessId"
          >
            <el-col :span="20">
              <el-select
                v-model="plazaForm.businessId"
                id="statusSelector"
                placeholder="请选择专区名称"
                filterable
                clearable
                style="
                  margin-left: 20px;
                  height: 32px;
                  line-height: 32px;
                  width: 450px;
                "
                :disabled="editFlag"
              >
                <el-option
                  v-for="item in selectPlazaList"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                ></el-option>
              </el-select>
            </el-col>
          </el-form-item>

          <el-form-item label="疾病标签" class="required-label">
            <el-col :span="20">
              <el-select
                multiple
                :multiple-limit="5"
                v-model="plazaForm.diseaseIdList"
                id="statusSelector"
                placeholder="请选择疾病标签"
                filterable
                clearable
                style="margin-left: 20px; width: 450px"
              >
                <el-option
                  v-for="item in diseaseList"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                ></el-option>
              </el-select>
            </el-col>
          </el-form-item>

          <el-form-item label="科室标签" class="required-label">
            <el-col :span="20">
              <el-select
                multiple
                :multiple-limit="5"
                v-model="plazaForm.deptIdList"
                id="statusSelector"
                placeholder="请选择科室标签"
                filterable
                clearable
                style="margin-left: 20px; width: 450px"
              >
                <el-option
                  v-for="item in deptList"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                ></el-option>
              </el-select>
            </el-col>
          </el-form-item>

          <el-form-item label="学科标签" class="required-label">
            <el-col :span="25">
              <el-select
                multiple
                :multiple-limit="5"
                v-model="plazaForm.subjectIdList"
                id="statusSelector"
                placeholder="请选择学科标签"
                filterable
                clearable
                style="margin-left: 20px; width: 450px"
              >
                <el-option
                  v-for="item in subjectList"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                ></el-option>
              </el-select>
            </el-col>
          </el-form-item>
        </el-form>
        <template v-slot:footer>
          <div class="dialog-footer" style="text-align: center">
            <el-button type="default" @click="cancle()" left>取消</el-button>
            <el-button type="primary" @click="savePlaza()" right
              >确定</el-button
            >
          </div>
        </template>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import { openLoading, closeLoading } from '../../utils/utils'
import DownloadJS from '@/utils/download/download4'

let vm = null
import BreadCrumb from '@/components/breadcrumb.vue'
import {
  getDiseaseList,
  getDeptList,
  getSubjectList,
  getPlazaList,
  savePlaza,
  delPlaza,
  getPlaza,
  getSelectPlazaList,
} from '../../utils/plaza/plazaApi'
import { doUpload, getFilePath, unsubscribe } from '../../utils/qiniu-util'
import QRCode from 'qrcodejs2'
import ElLink from 'element-ui/packages/link/src/main'
export default {
  components: {
    ElLink,
    BreadCrumb,
    QRCode,
  },
  data() {
    return {
      rtcId: null,
      curmbFirst: '广场管理',
      // curmbSecond: "直播管理",
      dialogStatisticsVisible: false,
      dialogLivelinkVisible: false,
      dialogLivePlaybackVisible: false,
      // closePlaybackVisible: false,
      playbackSetFlag: 1,
      canPlayback: '1',
      uploadFlag: false,
      selectFlag: true,
      numberShowFlag: false,
      videoNumber: 0,
      playbackUrl: '',
      searchForm: {
        squareName: '',
        deptIdList: [],
        diseaseIdList: [],
        subjectIdList: [],
        pageNo: 1,
        pageSize: 10,
      },
      totalRows: 0,
      tableData: [
        // {
        //   liveName: "浙江医学大会第二场",
        //   scope: 1, //直播范围 1-非公开 2-公开
        //   liveStatus: 1, //直播状态 1-未开始 2-直播中 3-暂停中 4-已结束 5-回放中目前只能用到1，2，4
        //   createTime: "",
        //   startTime: "",
        //   endTime: "",
        //   rtcId: 0
        // }
      ],
      dialogStatisticsData: [
        {
          peopleNum: 0,
          liveDuration: '',
          signNum: 0,
        },
      ],
      scope: 1,
      liveStatus: 1,

      lecturerUrl: '',
      guestUrl: '',
      audienceUrl: '',
      plazaForm: {
        id: '',
        businessId: '',
        diseaseTagIds: [],
        deptTagIds: [],
        subjectTagIds: [],
      },
      disabledOpenFlag: false, // 开启回放是否可点
      downloadVideoFlag: true, // 拉流直播不显示下载
      videoNumber: 0,
      uploadProgress1: 0,
      fileName: '',
      fileSize: 0,
      fileFlag: true,
      deleteFileFlag: false,
      circleId: null,
      streamType: 1,
      downloadSuccessStatus: 1,
      videoSize: 0,
      link: '', //预览的链接
      qrcodeBox: null,
      dialogVisible: false,
      isSign: 0, // 是否签到

      diseaseList: [],
      deptList: [],
      subjectList: [],
      selectPlazaList: [],
      editFlag: false,
      title: '',
      rules: {
        businessId: [
          { required: true, message: '请输入专区名称', trigger: 'blur' },
        ],
      },
    }
  },
  props: {
    circleName: {
      type: String,
    },
  },
  created() {
    vm = this
    this.circleId = this.$route.query.id
    console.log('circleName: ' + this.circleName)
    vm.getDiseaseList()
    vm.getDeptList()
    vm.getSubjectList()
    vm.getPlazaList('', '')
  },
  methods: {
    // 搜索按钮
    search() {
      this.searchForm.pageNo = 1
      this.searchList()
    },

    getDiseaseList() {
      getDiseaseList().then((res) => {
        if (res.code == '000000') {
          vm.diseaseList = res.data
        }
      })
    },

    getDeptList() {
      getDeptList().then((res) => {
        if (res.code == '000000') {
          vm.deptList = res.data
        }
      })
    },

    getSubjectList() {
      getSubjectList().then((res) => {
        if (res.code == '000000') {
          vm.subjectList = res.data
        }
      })
    },

    getSelectPlazaList(businessId) {
      let params = {
        businessId: businessId,
      }
      getSelectPlazaList(params).then((res) => {
        if (res.code == '000000') {
          vm.selectPlazaList = res.data
        }
      })
    },

    searchList() {
      console.log('查询')
      this.getPlazaList('', '')
    },
    resetForm() {
      vm.searchForm.squareName = ''
      vm.searchForm.deptIdList = []
      vm.searchForm.diseaseIdList = []
      vm.searchForm.subjectIdList = []
      this.search()
    },
    //添加专区
    createPlaza() {
      vm.plazaForm.businessId = ''
      vm.dialogVisible = true
      vm.title = '添加专区'
      vm.editFlag = false
      ;(vm.plazaForm = {
        id: '',
        businessId: '',
        diseaseTagIds: [],
        deptTagIds: [],
        subjectTagIds: [],
      }),
        vm.getSelectPlazaList(0)
    },

    //关闭直播链接弹窗
    handleClose() {
      vm.dialogVisible = false
    },

    checkBusinessId() {
      if (vm.plazaForm.businessId == '') {
        this.$message.warning('请选择专区名称！')
        return false
      }
      return true
    },

    checkDiseaseIdList() {
      if (
        vm.plazaForm.diseaseIdList == '' ||
        vm.plazaForm.diseaseIdList.length == 0
      ) {
        this.$message.warning('请选择疾病标签！')
        return false
      }
      return true
    },

    checkDeptIdList() {
      if (
        vm.plazaForm.deptIdList == '' ||
        vm.plazaForm.deptIdList.length == 0
      ) {
        this.$message.warning('请选择科室标签！')
        return false
      }
      return true
    },
    checkSubjectIdList() {
      if (
        vm.plazaForm.subjectIdList == '' ||
        vm.plazaForm.subjectIdList.length == 0
      ) {
        this.$message.warning('请选择学科标签！')
        return false
      }
      return true
    },

    // 保存
    savePlaza() {
      if (!vm.checkBusinessId()) {
        return
      }

      if (!vm.checkDiseaseIdList()) {
        return
      }

      if (!vm.checkDeptIdList()) {
        return
      }

      if (!vm.checkSubjectIdList()) {
        return
      }

      let params = {
        id: vm.plazaForm.id,
        businessId: vm.plazaForm.businessId,
        diseaseIdList: vm.plazaForm.diseaseIdList,
        deptIdList: vm.plazaForm.deptIdList,
        subjectIdList: vm.plazaForm.subjectIdList,
      }
      openLoading(this)
      savePlaza(params)
        .then((res) => {
          closeLoading(this)
          if (res.code == '000000') {
            if (vm.editFlag) {
              this.$message.success('编辑成功！')
            } else {
              this.$message.success('添加成功！')
            }
            vm.dialogVisible = false
            vm.resetForm()
          } else {
            this.$message.error('添加失败，请重试')
          }
        })
        .catch((error) => {
          this.$message.error('请重试')
        })
    },

    cancle() {
      vm.dialogVisible = false
    },

    //编辑专区
    editPlaza(row) {
      vm.editFlag = true
      vm.plazaForm.id = row.id
      let params = {
        id: row.id,
      }
      openLoading(this)
      getPlaza(params)
        .then((res) => {
          closeLoading(this)
          if (res.code == '000000') {
            vm.dialogVisible = true
            vm.plazaForm = res.data
            vm.title = '编辑专区'
            vm.getSelectPlazaList(vm.plazaForm.businessId)
          } else {
            this.$message.error('添加失败，请重试')
          }
        })
        .catch((error) => {
          this.$message.error('请重试')
        })
    },
    //删除专区
    delPlaza(row) {
      this.$confirm(
        `移除专区后，用户将无法在广场中看到，但不会删除专区本身，确定移除？`,
        '',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
          // customClass: 'range-make-box',
        }
      )
        .then(() => {
          let params = {
            id: row.id,
          }
          //  confirm
          delPlaza(params).then((res) => {
            if (res.code == '000000') {
              vm.$message({
                type: 'success',
                message: '删除成功',
              })
              this.getPlazaList('', '')
            } else {
              vm.$message({
                type: 'warning',
                message: res.message,
              })
            }
          })
        })
        .catch(() => {})
    },
    // //编辑直播
    // editLive(row) {
    //   this.$router.push({
    //     path: "/create-live",
    //     query: {
    //       // rtcId: "16"
    //       rtcId: row.id,
    //
    //     }
    //   });
    // },
    handleSizeChange(val) {
      this.searchForm.pageSize = val
      this.searchForm.pageNo = 1
      this.searchList()
    },
    handleNumChange(val) {
      this.searchForm.pageNo = val
      this.searchList()
    },
    //查询直播列表
    getPlazaList(name, status) {
      let req = {
        squareName: vm.searchForm.squareName,
        deptIdList: vm.searchForm.deptIdList,
        diseaseIdList: vm.searchForm.diseaseIdList,
        subjectIdList: vm.searchForm.subjectIdList,
        pageNo: this.searchForm.pageNo,
        pageSize: this.searchForm.pageSize,
      }
      getPlazaList(req).then((res) => {
        if (res.code == '000000') {
          // console.log(res);
          let listData = []
          if (res.data.list == null) {
            return
          }
          this.tableData = res.data.list

          this.totalRows = res.data.total
        } else {
          this.tableData = []
        }
      })
    },
    copyTxt(type) {
      let txt = document.getElementById('copyInput')
      if (type == 1) {
        txt.value = this.lecturerUrl
      } else if (type == 2) {
        txt.value = this.guestUrl
      } else {
        txt.value = this.audienceUrl
      }
      // if (navigator.userAgent.match(/(iPhone|iPod|iPad|Mac);?/i)) {
      if (
        navigator.userAgent.indexOf('Safari') > -1 &&
        navigator.userAgent.indexOf('Chrome') < 1
      ) {
        var el = document.createElement('input')
        el.value = txt.value //要复制的内容
        el.style.opacity = '0'
        document.body.appendChild(el)
        var editable = el.contentEditable
        var readOnly = el.readOnly
        el.contentEditable = true
        el.readOnly = false
        const range = document.createRange()
        range.selectNodeContents(el)
        var sel = window.getSelection()
        sel.removeAllRanges()
        sel.addRange(range)
        el.setSelectionRange(0, 999999)
        el.contentEditable = editable
        el.readOnly = readOnly
        var ret = document.execCommand('copy')
        el.blur()
      } else {
        txt.select() //选择对象
        document.execCommand('copy')
      }

      vm.$message({
        type: 'success',
        message: '分享链接已复制，快分享给好友吧',
      })
    },

    //预览二维码
    previewQrcode() {
      vm.link = this.audienceUrl

      vm.dialogVisible = true
      vm.$nextTick(() => {
        vm.qrcode()
      })
    },
    //  生成二维码
    qrcode() {
      if (vm.qrcodeBox) {
        vm.qrcodeBox.makeCode(vm.link)
        return
      }
      vm.qrcodeBox = new QRCode('qrcode', {
        width: 400,
        height: 400,
        text: vm.link, // 二维码内容
        // render: 'canvas' ,   // 设置渲染方式（有两种方式 table和canvas，默认是canvas）
        // background: '#f0f',   // 背景色
        // foreground: '#ff0'    // 前景色
      })
    },

    // 关闭预览弹框
    handleClose() {
      vm.dialogVisible = false
    },

    downlodExcel() {
      let params = {
        rtcId: this.rtcId,
        // rtcId: 372
      }
      downloadSigninfo(params)
        .then((res) => {
          // vm.GET(`rtc/liveAdmin/download/signInfo/` + params.rtcId, { responseType: 'blob' }).then((res) => {
          closeLoading(this)
          // const aLink = document.createElement("a");
          // let blob = new Blob([res], {type: "application/vnd.ms-excel;charset=utf-8"});
          // // let downloadUrl = URL.createObjectURL(blob);
          // // window.location.href = downloadUrl;
          // aLink.href = URL.createObjectURL(blob);
          // aLink.setAttribute('download', '123' + '.xlsx'); // 设置下载文件名称
          // aLink.click();
          // this.$refs.loadElement.appendChild(aLink);

          // setTimeout(() => {
          //   window.open(downloadUrl);
          // }, 500);

          if (res.code == '000000') {
            this.downloadExcelFile(res.data)
            this.$message.success('下载成功')
            // vm.getLiveList("", "");
          } else {
            this.$message.error('下载失败，请重试')
          }
        })
        .catch((error) => {
          this.$message.error('请重试')
        })
    },

    /* 文件下载*/
    downloadExcelFile(base64) {
      let a = document.createElement('a')
      vm.uploadHref = 'data:application/xls;base64,' + base64
      a.setAttribute('href', vm.uploadHref)
      a.setAttribute(
        'download',
        '签到人数统计' + new Date().getTime() + '.xlsx'
      )
      // if (flag && flag == 2) {
      //   a.setAttribute('download',vm.exportFileName);
      // } else {
      //   a.setAttribute('download',vm.uploadFileName);
      // }
      a.click()
    },

    jumpUrl(type) {
      var url
      if (type == 1) {
        url = this.lecturerUrl
      } else if (type == 2) {
        url = this.guestUrl
      }
      window.open(url)
    },
    /*
     * 使用download.js 强制浏览器下载图片、视频等文件
     * @param {any} url url链接地址
     * @param {any} strFileName 文件名
     * @param {any} strMimeType 文件类型
     */
    downloadfile(url, strFileName, strMimeType) {
      let xmlHttp = null
      if (window.ActiveXObject) {
        // IE6, IE5 浏览器执行代码
        xmlHttp = new ActiveXObject('Microsoft.XMLHTTP')
      } else if (window.XMLHttpRequest) {
        // IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
        xmlHttp = new XMLHttpRequest()
      }
      //2.如果实例化成功，就调用open（）方法：
      if (xmlHttp != null) {
        xmlHttp.open('get', url, true)
        xmlHttp.responseType = 'blob' //关键
        xmlHttp.send()
        xmlHttp.onreadystatechange = doResult //设置回调函数
      }
      vm.downloadSuccessStatus = 3 // 下载中...

      function doResult() {
        if (xmlHttp.readyState == 4) {
          //4表示执行完成

          if (xmlHttp.status == 200) {
            //200表示执行成功
            DownloadJS(xmlHttp.response, strFileName, strMimeType)
            vm.downloadSuccessStatus = 5 // 下载成功
            vm.$message.success('下载成功')
            vm.downloadSuccessStatus = 1 // 重置
          }
          // else {
          //   vm.$message.error("下载失败");
          // }
        }
      }
    },

    getFileName(url) {
      const urlArray = url.split('/')
      const length = urlArray.length
      const fileName = urlArray[length - 1]

      return fileName
    },

    getFileType(fileName) {
      // 后缀获取
      let suffix = ''
      // 获取类型结果
      let result = ''
      try {
        const flieArr = fileName.split('.')
        suffix = flieArr[flieArr.length - 1]
      } catch (err) {
        suffix = ''
      }
      // fileName无后缀返回 false
      if (!suffix) {
        return false
      }
      suffix = suffix.toLocaleLowerCase()
      // 图片格式
      const imglist = ['png', 'jpg', 'jpeg', 'bmp', 'gif']
      // 进行图片匹配
      result = imglist.find((item) => item === suffix)
      if (result) {
        return 'image'
      }
      // 匹配txt
      const txtlist = ['txt']
      result = txtlist.find((item) => item === suffix)
      if (result) {
        return 'txt'
      }
      // 匹配 excel
      const excelist = ['xls', 'xlsx']
      result = excelist.find((item) => item === suffix)
      if (result) {
        return 'excel'
      }
      // 匹配 word
      const wordlist = ['doc', 'docx']
      result = wordlist.find((item) => item === suffix)
      if (result) {
        return 'word'
      }
      // 匹配 pdf
      const pdflist = ['pdf']
      result = pdflist.find((item) => item === suffix)
      if (result) {
        return 'pdf'
      }
      // 匹配 ppt
      const pptlist = ['ppt', 'pptx']
      result = pptlist.find((item) => item === suffix)
      if (result) {
        return 'ppt'
      }
      // 匹配 视频
      const videolist = [
        'mp4',
        'm2v',
        'mkv',
        'rmvb',
        'wmv',
        'avi',
        'flv',
        'mov',
        'm4v',
      ]
      result = videolist.find((item) => item === suffix)
      if (result) {
        return 'video'
      }
      // 匹配 音频
      const radiolist = ['mp3', 'wav', 'wmv']
      result = radiolist.find((item) => item === suffix)
      if (result) {
        return 'radio'
      }
      // 其他 文件类型
      return 'other'
    },
  },
}
</script>

<style lang="scss">
.yqrange-index-wrapper {
  .yqrange-index-content {
    background: #fff;
    padding: 10px;
    .header-title {
      padding: 10px 12px;
      font-size: 12px;
      color: #449284;
      border-bottom: 1px solid #efefef;
    }
  }
  .el-button--text {
    color: #449284;
    font-size: 14px;
    &::after {
      content: '';
      position: relative;
      height: 14px;
      /*border-right: 1px solid #EBEEF5;*/
      border-right: 1px solid #aaaaaa;
      padding-right: 10px;
    }
    &:last-of-type {
      &::after {
        content: '';
        position: relative;
        width: 1px;
        height: 14px;
        border-right: none;
      }
    }
  }
}
.live_url_style {
  display: flex;
  padding: 10px;
}
.href_outer_border {
  margin-top: 10px;
}
.href_style {
  width: 1500px;
  background-color: #d8d8d8;
  padding: 10px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.href_button_style {
  margin-left: 35px;
}
.hidden-input {
  height: 0;
}
.qrcode-wrap {
  width: 400px;
  height: 400px;
  margin: 0 auto;
}
.el-select .el-input__inner {
  height: 32px;
  line-height: 32px;
}
.required-label .el-form-item__label::before {
  content: '*';
  color: #f56c6c;
  margin-right: 4px;
}
</style>
