<template>
  <div class="app-container">
    <div v-if="videoData">
      <video width="1400" controls name="media">
        <source :src="videoData" type="video/mp4" />
      </video>
    </div>
    <div v-else>加载中...</div>
    <div class="upv">
      <el-upload
        ref="upload"
        :action="uploadUrl"
        :before-upload="handleBeforeUpload"
        :on-success="
          (res, file) => {
            handleUploadSuccess(res, file, 'video');
          }
        "
        :on-error="handleUploadError"
        name="file"
        :show-file-list="false"
        :headers="headers"
        accept=".mp4"
      >
        <el-button size="small">
          选择视频
          <i class="el-icon-upload el-icon--right"></i>
        </el-button>
        <div slot="tip" class="el-upload__tip">只能上传.mp4文件</div>
      </el-upload>
    </div>
    <el-divider content-position="left">欢迎语句编辑</el-divider>
    <el-row :gutter="20">
      <el-col :span="8">
        <el-input
          v-model="welcomeStr"
          type="textarea"
          :autosize="{ minRows: 2 }"
          placeholder="请输入欢迎语句"
        ></el-input>
      </el-col>
      <el-col :span="8">
        <el-button type="primary" @click="submitForm">保存</el-button>
      </el-col>
    </el-row>
  </div>
</template>
<script>
import { getToken } from "@/utils/auth";
import { listVideo, addVideo } from "@/api/tyler/mainVideo";
import { welcomeQuery, welcomeEdit } from "@/api/tyler/screen";

export default {
  name: "mainVideo",
  data() {
    return {
      previewUrl: process.env.VUE_APP_API_TARGET,
      uploadUrl: process.env.VUE_APP_API_TARGET + "/business/screen/homePage",
      uploadUrl1: process.env.VUE_APP_API_TARGET + "/common/upload",
      headers: {
        Authorization: "Bearer " + getToken(),
      },
      baseURL: process.env.VUE_APP_API_TARGET,
      // 表单参数
      form: {
        id: null,
        name: null,
        videoPath: null,
      },
      videoData: null,
      fileSize: 1024,
      show: false,
      welcomeStr: "",
    };
  },
  created() {
    this.getList();
    welcomeQuery().then((res) => {
      this.welcomeStr = res.rows[0].title;
    });
  },
  mounted() {
    this.initvideoPlayer();
  },
  methods: {
    submitForm() {
      welcomeEdit({
        title: this.welcomeStr,
      }).then((res) => {
        this.$modal.msgSuccess("成功");
      });
    },

    initvideoPlayer() {
      this.player = new WebRtcStreamer("player", "http://127.0.0.1:8000");
    },
    videoPlayer() {
      this.player.connect(
        "rtsp://192.168.10.150:8604/EUrl/3IRr6GG?params=eyJwcm90b2NvbCI6InJ0c3AiLCJ1c2VySWQiOiJhcGkiLCJ0IjoxLCJhIjoiNWQ4MGYxZjg5N2ZkNGZjOGJkZDc2ZTVhY2NlNzVmN2R8MHwwfDF8b3Blbl9hcGkifQ=="
      );
    },
    getList() {
      this.videoData = null;
      listVideo().then((res) => {
        this.videoData = this.previewUrl + res.data;
        this.$nextTick(() => {
          this.$forceUpdate();
        });
      });
    },
    //上传图片
    // 上传前校检格式和大小
    handleBeforeUpload(file) {
      // 校检文件大小
      if (this.fileSize) {
        const isLt = file.size / 1024 / 1024 < this.fileSize;
        if (!isLt) {
          this.$message.error(`上传文件大小不能超过 ${this.fileSize} MB!`);
          return false;
        }
      }
      return true;
    },
    handleUploadSuccess(response, file, type) {
      let that = this;

      // 如果上传成功
      if (response.code === 200) {
        if (type === "pic") {
          that.form.image = response.fileName;
          addVideo(that.form).then((res) => {
            this.$modal.msgSuccess("成功");
            this.getList();
          });
        }

        if (type === "video") {
          this.$modal.msgSuccess("成功");
          this.getList();
          // that.form.videoPath = response.fileName;
          // that.form.name = response.newFileName;
          // addVideo(that.form).then(res => {
          //   this.$modal.msgSuccess("成功");
          //   this.getList();
          // })
        }
        // 获取光标所在位置
      } else {
        this.$message.error("上传失败");
      }
    },
    handleUploadError() {
      this.$message.error("上传失败");
    },
    removeElementAtIndex(arr, index) {
      arr.splice(index, 1);
      return arr;
    },
    moveElementToStart(arr, index) {
      let element = arr.splice(index, 1)[0];
      arr.unshift(element);
      return arr;
    },
    // 删除图片
    delPic(index) {
      let that = this;
      this.removeElementAtIndex(that.form.websiteMiningImage, index);
    },
    asIndex(index) {
      let that = this;
      this.moveElementToStart(that.form.websiteMiningImage, index);
    },
  },
  beforeDestroy() {
    this.webRtcServer.disconnect();
    this.webRtcServer = null;
  },
};
</script>
<style scoped lang="scss">
.upv {
  display: flex;
  gap: 20px;
}
</style>
