<template>
  <div class="yqrange-index-wrapper">
    <bread-crumb :curmbFirst="curmbFirst" :curmbSecond="curmbSecond"></bread-crumb>
    <div class="yqrange-index-content screenSet" 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="10">
            <el-form-item label="直播名称">
              <el-input v-model="searchForm.liveName" size="small" placeholder="请输入直播名称"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="10">
            <el-form-item label="直播状态">
              <el-select
                v-model="searchForm.liveStatus"
                id="statusSelector"
                placeholder="请选择发布状态"
                clearable
                style="margin-left:20px;"
              >
                <el-option
                  v-for="item in statusList"
                  :key="item.value"
                  :label="item.label"
                  :value="item.label"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="4" 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="createLive">新建直播</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="liveName" label="直播名称" min-width="100" align="center"></el-table-column>
        <el-table-column prop="liveStatus" label="直播状态" min-width="100" align="center">
          <template slot-scope="scope">
            <span>{{ scope.row.liveStatus | liveStatusFilter }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="createTime" label="创建时间" min-width="100" align="center"></el-table-column>
        <el-table-column prop="startTime" label="开始时间" min-width="100" align="center"></el-table-column>
        <el-table-column prop="endTime" label="结束时间" min-width="100" align="center"></el-table-column>
        <el-table-column label="操作" min-width="300" align="center">
          <template slot-scope="scope">
            <!-- <el-button @click="reviewLive(scope.row)" type="text" size="small">设置回放</el-button> -->
            <el-button @click="setPlayback(scope.row)" type="text" size="small">设置回放</el-button>
            <el-button @click="closePlayback(scope.row)" type="text" size="small">关闭回放</el-button>

            <el-button
              @click="liveLink(scope.row)"
              type="text"
              size="small"
              v-if="!(scope.row.liveStatus==4 && scope.row.liveScope==1)">直播链接</el-button>

            <el-button
              @click="updatelive(scope.row)"
              type="text"
              size="small"
              v-if="scope.row.liveStatus==2 && scope.row.streamType==2">结束直播</el-button>
            <el-button
              @click="countLive(scope.row)"
              type="text"
              size="small"
              v-if="scope.row.liveStatus==4">数据统计</el-button>
            <el-button @click="editLive(scope.row)" type="text" size="small">编辑</el-button>
            <!--<el-button @click="setPlayback(scope.row)" type="text" size="small" v-if="scope.row.playbackSetFlag == 1">设置回放</el-button>-->

            <!--<el-button @click="setPlayback(scope.row)" type="text" size="small" v-if="scope.row.playbackSetFlag == 1">关闭回放</el-button>-->
            <!-- <el-button @click="deleteLive(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]"
          :page-size="searchForm.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="totalRows"
        ></el-pagination>
      </div>

      <el-dialog
        title="数据统计"
        :visible.sync="dialogStatisticsVisible"
        width="500px"
        :close-on-click-modal="false"
        @close="handleStatisticsClose"
        center
      >
        <el-table :data="dialogStatisticsData" align="center">
          <el-table-column property="peopleNum" label="观看人数" align="center"></el-table-column>
          <el-table-column property="liveDuration" label="直播时长（分钟）" align="center"></el-table-column>
        </el-table>
      </el-dialog>

      <el-dialog
        title="直播链接"
        :visible.sync="dialogLivelinkVisible"
        width="600px"
        :close-on-click-modal="false"
        @close="handleLivelinkClose"
        center
      >
        <input type="text" id="copyInput" class="hidden-input" />

        <div class="live_url_style" v-if="this.liveStatus==1 || this.liveStatus==2">
          <div class="href_style">讲师链接 {{lecturerUrl}}</div>
          <el-col class="href_outer_border">
            <el-link type="primary" @click="copyTxt(1)" size="small" class="href_button_style">复制</el-link>
            <el-link type="primary">|</el-link>
            <el-link type="primary" @click="jumpUrl(1)" size="small">进入直播</el-link>
          </el-col>
        </div>

        <div class="live_url_style" v-if="this.liveStatus==1 || this.liveStatus==2">
          <el-col class="href_style">嘉宾链接 {{guestUrl}}</el-col>
          <el-col class="href_outer_border">
            <el-link type="primary" @click="copyTxt(2)" size="small" class="href_button_style">复制</el-link>
            <el-link type="primary">|</el-link>
            <el-link type="primary" @click="jumpUrl(2)" size="small">进入直播</el-link>
          </el-col>
        </div>

        <div class="live_url_style" v-if="this.liveScope==2">
          <div class="href_style">观众链接 {{audienceUrl}}</div>
          <el-col class="href_outer_border">
            <el-link type="primary" @click="copyTxt(3)" size="small" class="href_button_style">复制</el-link>
          </el-col>
        </div>
      </el-dialog>

      <el-dialog
        title="设置回放"
        :visible.sync="dialogLivePlaybackVisible"
        width="500px"
        :close-on-click-modal="false"
        @close="handleLivePlaybackClose"
        center>

        <el-form :model="playbackForm">
        <!--<input type="text" id="copyInput" class="hidden-input" />-->

        <div class="live_url_style" v-if="selectFlag">
          <el-radio-group size="small" style="line-height: 30px;" v-model="playbackForm.videoSource" @change="changeVideoSource">
            <el-radio label="1">使用直播原视频播放</el-radio>
            <el-radio label="2">上传回放视频（下载原视频编辑后上传）</el-radio>
          </el-radio-group>
        </div>

        <div v-if="uploadFlag">
          <div v-if="numberShowFlag">
            <span>存在"{{videoNumber}}段"直播原视频，请下载合并后上传</span>
          </div>
          <div style="margin-left:30px;">
          <span>①下载原视频</span>

          <!--<el-col :span="1">-->
              <!--<img style="vertical-align: middle" src="../../assets/image/icon_download.png" />-->
            <!--</el-col>-->
          <el-button @click="download('model')" style="margin-left: 190px;" size="small" type="text">下载</el-button>
          </div>

        <div style="margin-left:30px;">
          <span>②上传回放视频</span>
          <el-upload style="float:right;"
            v-model="playbackUrl"
            action="#"
            accept="*/*"
            :limit="1"
            :before-upload="beforeVideoUpload">
            <!--<el-col :span="1">-->
              <!--<img style="vertical-align: middle" src="../../assets/image/icon_upload.png" />-->
            <!--</el-col>-->
            <el-button type="text" size="small" v-if="fileFlag">上传（仅支持mp4）</el-button>
            <!--<video class="video-mg-url" controls preload :src="cleatBroadcast.liveInfo.mgUrl"></video>-->
            <!-- <img v-if="!cleatBroadcast.liveInfo.mgUrl" class="video-bg-img" src="../../../static/img/small.png"> -->
          </el-upload>
          <el-progress
            :text-inside="true"
            :stroke-width="16"
            :percentage="uploadProgress1"
            status="success"
            v-show="uploadProgress1 > 0 && uploadProgress1 < 100">
          </el-progress>
          <div v-if="deleteFileFlag">
            <span>{{fileName}}({{fileSize}}M)</span>
            <el-button @click="delVideo" style="margin-left: 190px;" size="small" type="text">删除</el-button>
          </div>
          <!--<div v-if="fileFlag">-->
            <!---->
            <!--<el-progress-->
              <!--:text-inside="true"-->
              <!--:stroke-width="16"-->
              <!--:percentage="uploadProgress1"-->
              <!--status="success"-->
              <!--v-show="uploadProgress1 > 0 && uploadProgress1 < 100">-->
            <!--</el-progress>-->

          <!--</div>-->


        </div>
        </div>

        </el-form>

        <div slot="footer" class="dialog-footer" style="text-align: right;">
          <el-button type="primary" @click="submitPlayback(1)" right>开启回放</el-button>
        </div>


      </el-dialog>
      <!--<el-dialog-->
        <!--title="关闭回放"-->
        <!--:visible.sync="closePlaybackVisible"-->
        <!--width="500px"-->
        <!--:close-on-click-modal="false"-->
        <!--@close="handleLivePlaybackClose"-->
        <!--center>-->


        <!--<div slot="footer" class="dialog-footer" style="text-align: right;">-->
          <!--<el-button @click="closePlaybackVisible = false">取 消</el-button>-->
          <!--<el-button type="primary" @click="submitPlayback(0)" right>结束回放</el-button>-->
        <!--</div>-->


      <!--</el-dialog>-->



    </div>
  </div>
</template>
<script>
import {openLoading} from "../../utils/utils";

let vm = null;
import BreadCrumb from "@/components/breadcrumb.vue";
import { getPlayback, postPlayback, updateLiveStatus } from "../../utils/yqrange/yqrangeApi";
import { doUpload, getFilePath } from "../../utils/qiniu-util";
export default {
  components: {
    BreadCrumb
  },
  data() {
    return {
      curmbFirst: "云鹊小圈",
      curmbSecond: "直播管理",
      dialogStatisticsVisible: false,
      dialogLivelinkVisible: false,
      dialogLivePlaybackVisible: false,
      // closePlaybackVisible: false,
      playbackSetFlag: 1,
      canPlayback: "1",
      uploadFlag: false,
      selectFlag: true,
      numberShowFlag: false,
      videoNumber: 0,
      playbackUrl: "",
      searchForm: {
        liveName: "",
        liveStatus: "",
        pageNo: 1,
        pageSize: 10
      },
      totalRows: 0,
      statusList: [
        {
          value: "1",
          label: "预告"
        },
        {
          value: "2",
          label: "直播中"
        },
        {
          value: "4",
          label: "已结束"
        }
      ],
      tableData: [
        // {
        //   liveName: "浙江医学大会第二场",
        //   liveScope: 1, //直播范围 1-非公开 2-公开
        //   liveStatus: 1, //直播状态 1-未开始 2-直播中 3-暂停中 4-已结束 5-回放中目前只能用到1，2，4
        //   createTime: "",
        //   startTime: "",
        //   endTime: "",
        //   rtcId: 0
        // }
      ],
      dialogStatisticsData: [
        {
          peopleNum: 234,
          liveDuration: "38分钟"
        }
      ],
      liveScope: 1,
      liveStatus: 1,

      lecturerUrl: "https://dev.yunxin.163.com/",
      guestUrl: "https://www.cnblogs.com/",
      audienceUrl: "https://www.soho.com",
      playbackForm: {
        canPlayback: 0,
        playbackUrls: {
          downloadUrls: [],
          originalUrls: [],
        },
        rtcId: "",
        videoSource: 1,
        videos: [{
          seqNo: "",
          videoName: "",
          videoSize: "",
          videoSource: "",
          videoType: "",
          videoUrl: ""
        }]
      },
      videoNumber: 0,
      uploadProgress1: 0,
      fileName: "",
      fileSize: 0,
      fileFlag: true,
      deleteFileFlag: false,
      circleId: null
    };
  },
  created() {
    vm = this;
    this.circleId = this.$route.query.id;
    vm.getLiveList("", "");
  },
  methods: {
    // 搜索按钮
    search(){
      this.searchForm.pageNo = 1;
      this.searchList();
    },

    searchList() {
      console.log("查询");
      var searchStatusString;
      var searchStatusInt;
      searchStatusString = this.searchForm.liveStatus;
      if (searchStatusString == "预告") {
        searchStatusInt = 1;
      } else if (searchStatusString == "直播中") {
        searchStatusInt = 2;
      } else if (searchStatusString == "已结束") {
        searchStatusInt = 4;
      } else {
        searchStatusInt = null;
      }
      console.log("searchList() : searchStatusInt = " + searchStatusInt);
      this.getLiveList(this.searchForm.liveName, searchStatusInt);
    },
    resetForm() {
      console.log("重置alex");
      // this.$router.push({
      //   path: '/role-manage',
      // })
      this.searchForm.liveName = "";
      this.searchForm.liveStatus = "";
      this.search();
    },
    //新建直播
    createLive() {
      this.$router.push({
        path: "/create-live",
        query: {
          circleId: this.circleId
        }
      });
    },
    //弹出直播链接弹窗
    liveLink(row) {
      this.dialogLivelinkVisible = true;
      this.liveScope = row.liveScope;
      this.liveStatus = row.liveStatus;
      console.log(
        "liveLink() : liveScope = " +
          this.liveScope +
          ", liveStatus = " +
          this.liveStatus
      );

      vm.GET("rtc/liveAdmin/url/" + row.rtcId, "").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 {
          //
        }
      });
    },
    //关闭直播链接弹窗
    handleLivelinkClose() {
      this.dialogLivelinkVisible = false;
    },

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


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

      const rtcId = row.rtcId;

      getPlayback({rtcId}).then((res) => {
        if(res.code == "000000") {
          this.playbackForm = res.data;
           if(this.playbackForm.playbackUrls != null){
             if(this.playbackForm.playbackUrls.originalUrls != null){
               // 存在多个原视频
               if(this.playbackForm.playbackUrls.originalUrls.length > 1){
                 this.selectFlag = false;
                 this.numberShowFlag = true;
                 this.videoNumber = this.playbackForm.playbackUrls.originalUrls.length;
               }
               else {
                 this.selectFlag = true;
                 this.numberShowFlag = false;
               }
             }
           }
        }
      }).catch((error) => {
        this.$message({
          message: error,
          type: 'error'
        });
      })

    },
    //关闭设置回放弹窗
    handleLivePlaybackClose() {
      this.dialogLivePlaybackVisible = false;
      this.uploadFlag = false;
    },

    // 设置回放方式
    changeVideoSource(){
      if(this.playbackForm.videoSource == 2){
        this.uploadFlag = true;
      }
      else {
        this.uploadFlag = false;
      }
    },

    // 下载
    download(type){
        let downloadUrl = "";
        if (type == "model") {
          if(vm.numberShowFlag){
            for(let i=0;i< vm.playbackForm.playbackUrls.originalUrls.length;i++) {
              vm.downloadVideo(vm.playbackForm.playbackUrls.downloadUrls[i]);
            }
          }
          else {
            // downloadUrl = "http://1302268825.vod2.myqcloud.com/22ae71e7vodcq1302268825/317cf9115285890804733258933/f0.mp4";
            downloadUrl = vm.playbackForm.playbackUrls.downloadUrls[0];
            console.log("下载", type, downloadUrl);
            setTimeout(() => {
              vm.downloadVideo(downloadUrl);

            }, 500);
          }

        } else if (type == "fail") {
          // downloadUrl = vm.failExcelUrl;
        }




    },


    downloadVideo(downloadUrl){
      if(downloadUrl == null || downloadUrl == ""){
        vm.$message.warning("下载地址不正确");
        return;
      }

      var link = document.createElement("a");
      link.download = "f0.mp4";
      var url = downloadUrl;
      link.href = url;
      if(navigator.appName == "Microsoft Internet Explorer" && navigator.appVersion .split(";")[1].replace(/[ ]/g,"")=="MSIE9.0" ||
        navigator.appName == "Microsoft Internet Explorer" && navigator.appVersion .split(";")[1].replace(/[ ]/g,"")=="MSIE10.0"){
        window.open(url,'blank')
      }else if (navigator.userAgent.indexOf("Firefox/") > -1){
        window.open(url,'blank')
      } else{
        // link.click();
        window.open(url,'blank')
      }
    },


    // // 上传
    // upload(){
    //
    // },

    // 上传视频
    beforeVideoUpload(file){
      vm.fileFlag = true;
      vm.fileName = file.name;
      if(file.size != null){
        vm.fileSize = (file.size / 1024 / 1024).toFixed(1);
      }
      else {
        vm.fileSize = file.size;
      }
      vm.$message.success('开始上传')
      doUpload(vm,file, getFilePath(file,null), 'preview4', 'uploadProgress1', '').then(function (path) {
        vm.playbackForm.videos = [{
          seqNo: 0,
          videoName: vm.fileName,
          videoSize: file.size,
          videoSource: 2,
          videoType: 1,
          videoUrl: path.fullPath
        }];
        // vm.playbackForm.videos[0].seqNo = 0;
        // vm.playbackForm.videos[0].videoName = vm.fileName;
        // vm.playbackForm.videos[0].videoSize = file.size();
        // vm.playbackForm.videos[0].videoSource = 2;
        // vm.playbackForm.videos[0].videoType = 1;
        // vm.playbackForm.videos[0].videoUrl = path.fullPath;
        vm.fileFlag = false;

        vm.deleteFileFlag = true;

        vm.$message.success('上传成功')
      });
    },

    // 删除视频
    delVideo(){
      vm.fileFlag = true;
      vm.deleteFileFlag = false;
      vm.playbackForm.videos = [];
    },

    // 开启回放/结束回放
    submitPlayback(canPlayback){
      openLoading(this);

      if(vm.uploadFlag && canPlayback == 1){
        if(vm.playbackForm.videos == null || vm.playbackForm.videos.length == 0){
          this.$message.warning("请上传回放视频");

        }
      }

      // 开启回放
      this.playbackForm.canPlayback = canPlayback;

      let params = this.playbackForm;

      postPlayback(params).then((res) => {
        closeLoading(this);
        if(res.code == "000000") {

          if(canPlayback == 0){
            this.$message.error("开启成功");
          }
          else {
            this.$message.error("关闭成功");
          }

        } else {
          if(canPlayback == 0){
            this.$message.error("开启失败，请重试");
          }
          else {
            this.$message.error("关闭失败，请重试");
          }

        }
      }).catch((error) => {
        this.$message.error("请重试");
      })
    },

    // 关闭回放
    closePlayback(){
      this.$confirm(`确定关闭回放吗？`, "", {
        confirmButtonText: "关闭回放",
        cancelButtonText: "取消",
        type: "warning"
        // customClass: 'range-make-box',
      })
        .then(() => {
          openLoading(this);
          //  confirm
          let params = {rtcId: row.rtcId, canPlayback: 0};

          updateLiveStatus(params).then((res) => {
            closeLoading(this);
            if(res.code == "000000") {

              if(canPlayback == 0){
                this.$message.success("关闭成功");
              }

            } else {

              this.$message.error("关闭失败，请重试");

            }
          }).catch((error) => {
            this.$message.error("请重试");
          })


        })
        .catch(() => {});

    },

    // 结束直播
    updatelive(row){


      this.$confirm(`确定结束直播吗？`, "", {
        confirmButtonText: "结束直播",
        cancelButtonText: "取消",
        type: "warning"
        // customClass: 'range-make-box',
      })
        .then(() => {
          openLoading(this);
          //  confirm
          let params = {rtcId: row.rtcId,liveStatus: 4};

          updateLiveStatus(params).then((res) => {
            closeLoading(this);
            if(res.code == "000000") {

              if(canPlayback == 0){
                this.$message.success("结束成功");
              }

            } else {

                this.$message.error("结束失败，请重试");

            }
          }).catch((error) => {
            this.$message.error("请重试");
          })


        })
        .catch(() => {});





    },

    //数据统计
    countLive(row) {
      this.dialogStatisticsVisible = true;
      console.log("getStatisticsData() : this.circleId = " + this.circleId);
      vm.GET("rtc/liveAdmin/data/" + row.rtcId, "").then(res => {
        if (res.code == "000000") {
          let listData = [];
          let obj = {
            peopleNum: res.data.viewedPersonTime,
            liveDuration: res.data.liveDuration
          };
          listData.push(obj);
          this.dialogStatisticsData = listData;
        } else {
          this.dialogStatisticsData = [];
        }
      });
    },
    handleStatisticsClose() {
      this.dialogStatisticsVisible = false;
    },
    //编辑直播
    editLive(row) {
      this.$router.push({
        path: "/create-live",
        query: {
          // rtcId: "1"
          rtcId: row.rtcId,
          circleId: this.circleId
        }
      });
    },
    //删除直播
    deleteLive(row) {
      this.$confirm(`确定删除“${row.liveName}”吗？`, "", {
        confirmButtonText: "删除",
        cancelButtonText: "取消",
        type: "warning"
        // customClass: 'range-make-box',
      })
        .then(() => {
          //  confirm
          let req = {
            rtcId: row.rtcId
          };
          vm.DELETE("rtc/liveAdmin", req).then(res => {
            if (res.code == "000000") {
              vm.$message({
                type: "success",
                message: "删除成功"
              });
              this.getLiveList("", "");
            } else {
              vm.$message({
                type: "success",
                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();
    },
    //查询直播列表
    getLiveList(name, status) {
      let req = {
        circleId: this.circleId,
        name: name,
        liveStatus: status,
        pageNo: this.searchForm.pageNo,
        pageSize: this.searchForm.pageSize
      };
      console.log("alex name = " + name + ", status = " + status);
      vm.POST("rtc/liveAdmin/list", req).then(res => {
        if (res.code == "000000") {
          // console.log(res);
          let listData = [];
          if (res.data.pageContents == 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,
              createTime: res.data.pageContents[i].createdTime,
              startTime: res.data.pageContents[i].openTime,
              endTime: res.data.pageContents[i].endTime,
              rtcId: res.data.pageContents[i].id
            };
            listData.push(obj);
          }
          this.tableData = listData;

          this.totalRows = res.data.totalRows;
        } 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;
      }
      txt.select(); //选择对象
      document.execCommand("copy");

      vm.$message({
        type: "success",
        message: "分享链接已复制，快分享给好友吧"
      });
    },
    jumpUrl(type) {
      var url;
      if (type == 1) {
        url = this.lecturerUrl;
      } else if (type == 2) {
        url = this.guestUrl;
      }
      window.open(url);
    }
  }
};
</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;
}
</style>
