<template>
  <div class="yqrange-index-wrapper">
    <!--<bread-crumb :curmbFirst="curmbFirst" :curmbSecond="curmbSecond"></bread-crumb>-->
    <div class="yqrange-index-content" id="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 slot-scope="scope">
            <span>{{ scope.row.type | circleTypeFilter }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="diseaseTags" label="疾病标签" min-width="100" align="center">
          <template slot-scope="scope">
            <span>{{ scope.row.diseaseTags | tagsFilter }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="deptTags" label="科室标签" min-width="100" align="center">
          <template slot-scope="scope">
            <span>{{ scope.row.deptTags | tagsFilter }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="subjectTags" label="学科标签" min-width="100" align="center">
          <template slot-scope="scope">
            <span>{{ scope.row.subjectTags | tagsFilter }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="createdTime" label="添加时间" min-width="100" align="center">
          <template slot-scope="scope">
            <span>{{ scope.row.createdTime | liveDateFilter }}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" min-width="300" align="center">
          <template slot-scope="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"
        :visible.sync="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;height: 32px;line-height: 32px;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;height: 32px;line-height: 32px;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;height: 32px;line-height: 32px;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>
        <div slot="footer" class="dialog-footer" style="text-align: center;">
          <el-button type="default" size="small" @click="cancle()" left>取消</el-button>
          <el-button type="primary" size="small" @click="savePlaza()" right>确定</el-button>
        </div>

      </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);
      },
      //弹出直播链接弹窗
      liveLink(row) {
        this.dialogLivelinkVisible = true;
        this.scope = row.scope;
        this.liveStatus = row.liveStatus;
        this.streamType = row.streamType;
        console.log(
          "liveLink() : scope = " +
          this.scope +
          ", liveStatus = " +
          this.liveStatus
        );

        vm.GET("rtc/liveAdmin/url/" + row.id, "").then(res => {
          if (res.code == "000000") {
          this.lecturerUrl = res.data.lecturerUrl;
          this.guestUrl = res.data.guestUrl;
          this.audienceUrl = res.data.audienceUrl;
          this.dialogLivelinkVisible = true;
        } else {
          //
        }
      });
      },
      //关闭直播链接弹窗
      handleClose() {
        vm.dialogVisible = false;
      },

      // // 查询回放信息
      // getPlayback(){
      //
      // }


      //设置回放
      setPlayback(row) {
        vm.dialogLivePlaybackVisible = true;

        const rtcId = row.id;

        vm.streamType = row.streamType;


        // 拉流直播不显示选择区域
        if(vm.streamType == 2){
          vm.selectFlag = false;
          vm.uploadFlag = true;
          vm.downloadVideoFlag = false;
        }
        else {
          vm.selectFlag = true;

        }

        openLoading(this);
        getPlayback({rtcId}).then((res) => {
          closeLoading(this);
        if(res.code == "000000") {
          vm.playbackForm = res.data;
          if(vm.playbackForm.playbackUrls != null){
            // if(vm.playbackForm.playbackUrls.originalUrls != null){

            vm.playbackForm.videoSource = String(vm.playbackForm.videoSource);

            // if(vm.playbackForm.videos != null && vm.playbackForm.videos.length > 0){
            //   vm.playbackForm.videos[0].videoSize = vm.videoSize(vm.playbackForm.videos[0].videoSize, 1);
            // }



            // 拉流直播 不显示两个选择按钮；只显示①上传回放视频
            if(vm.streamType == 2){
              vm.playbackForm.videoSource = "2";
              vm.selectFlag = false;
              vm.downloadVideoFlag = false;
            }
            // 网页直播
            else {
              // 存在多个原视频,如果直播原视频有大于1段，不显示两个选择按钮，而显示“存在..直播原视频，请下载合并后上传”
              if(vm.playbackForm.playbackUrls.downloadUrls.length > 1){
                vm.uploadFlag = true;
                vm.selectFlag = false;
                vm.numberShowFlag = true;
                vm.videoNumber = this.playbackForm.playbackUrls.downloadUrls.length;
                vm.playbackForm.videoSource = "2";
                vm.downloadVideoFlag = true;
              }
              else {
                vm.selectFlag = true;
                vm.changeVideoSource();
                vm.numberShowFlag = false;

                // 当选择第二个按钮“上传回放视频”时，显示①下载②上传
                if(vm.playbackForm.videoSource == "2"){
                  vm.downloadVideoFlag = true;
                }

              }
            }
            // 如果回放视频有，则显示删除，不显示上传
            if(vm.playbackForm.videos != null && vm.playbackForm.videos.length > 0){


              // 当选择第二个按钮“上传回放视频”时，显示①下载②上传,如果videoSource等于1，原视频直播，要显示上传，不显示删除
              if(vm.playbackForm.videoSource == "1"){
                vm.fileFlag = true;
                vm.deleteFileFlag = false;
              }
              // 当选择第二个按钮“上传回放视频”时，显示①下载②上传,如果videoSource等于2，回放视频，要显示删除，不显示上传
              else {
                vm.fileFlag = false;
                vm.deleteFileFlag = true;

              }

            }

            // // 初始化
            // vm.uploadProgress1 = Number("0.00");
            // vm.uploadProgress = Number("0.00");
            // if(row.streamType == 1){
            //
            //   vm.downloadVideoFlag = true;
            //   vm.changeVideoSource();
            // }
            // else {
            //   vm.playbackForm.videoSource = "2";
            // }

            // }
          }
        }
      }).catch((error) => {
          vm.$message({
          message: "请重试",
          type: 'error'
        });
      })

      },


      savePlaza(){
        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") {
            this.$message.success("添加成功");
            vm.dialogVisible = false;
            vm.getPlazaList("", "");
          } 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;
          }
          // for (let i = 0; i < res.data.pageContents.length; i++) {
          //   let obj = {
          //     // liveName: res.data.pageContents[i].name,
          //     // liveScope: res.data.pageContents[i].scope,
          //     // liveStatus: res.data.pageContents[i].liveStatus,
          //     // streamType: res.data.pageContents[i].streamType,
          //     // playbackSetFlag: res.data.pageContents[i].playbackSetFlag,
          //     // canPlayback: res.data.pageContents[i].canPlayback,
          //     // createTime: res.data.pageContents[i].createdTime,
          //     // startTime: res.data.pageContents[i].openTime,
          //     // endTime: res.data.pageContents[i].endTime,
          //     // rtcId: res.data.pageContents[i].id,
          //     // isSign: res.data.pageContents[i].isSign
          //   };
          //   listData.push(obj);
          // }
          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;
  }
  /*.el-select__tags {*/
    /*margin-top: 15px;*/
  /*}*/
  .required-label .el-form-item__label::before {
    content: '*';
    color: #F56C6C;
    margin-right: 4px;
  }
</style>
