<template>
  <div class="app-container">
    <el-row :gutter="6">
      <el-col :xs="24" :md="6">
        <el-card >
          <div slot="header" class="clearfix">
            <span>视频分类</span>
          </div>
          <el-tree
            ref="tree"
            v-loading="treeLoding"
            class="filter-tree"
            :data="typeOptions"
            default-expand-all
            highlight-current
            :expand-on-click-node="false"
            style="margin-top: 10px;max-height:650px;overflow-y: auto;"
            @node-click="handleOrgClick"
          />
        </el-card>
      </el-col>
      <el-col :xs="24" :md="18">
        <el-card class="filterTop">
          <el-button type="primary" icon="el-icon-plus" @click="handleAddVideo"
          >新增</el-button
          >
          <el-input
            v-model="listQuery.search"
            placeholder="关键字"
            style="width: 300px"
            class="filter-item"
            @keyup.enter.native="handleFilter"
          />
          <el-button
            class="filter-item"
            type="primary"
            icon="el-icon-search"
            @click="handleFilter"
          >搜索</el-button
          >
          <el-button
            class="filter-item"
            type="primary"
            icon="el-icon-refresh-left"
            @click="resetFilter"
          >重置</el-button
          >
        </el-card>
        <el-card style="margin-top: 6px">
          <el-table
            v-loading="listLoading"
            :data="
          videoList.results.filter(
            (data) =>
              !search ||
              data.name.toLowerCase().includes(search.toLowerCase()) ||
              data.category_name.toLowerCase().includes(search.toLowerCase())
          )
        "
            border
            fit
            stripe
            highlight-current-row
            :height="tableHeight"
          >
            <el-table-column type="index" width="50" />
            <el-table-column label="名称" prop="name"></el-table-column>
            <el-table-column label="描述" prop="description"></el-table-column>
            <el-table-column label="视频类别">
              <template slot-scope="scope">{{ showTypeOptions[scope.row.category] }}</template>
            </el-table-column>
            <el-table-column label="创建时间" prop="create_time"></el-table-column>
            <el-table-column label="封面地址" prop="coverurl">
              <template #default="scope">
                <el-image
                  style="width: 100px; height: 60px"
                  :src="scope.row.coverurl"
                  fit="contain "></el-image>
                <!--:style="{height: leftHeight+'px'}"-->
              </template>

            </el-table-column>
            <el-table-column
              align="center"
              label="操作"
              width="200px"
              fixed="right"
            >
              <template slot-scope="scope">
                <el-button
                  :disabled="!checkPermission(['video_update'])"
                  type="primary"
                  size="small"
                  icon="el-icon-edit"
                  @click="handleEdit(scope)"
                />
                <el-button
                  :disabled="!checkPermission(['video_delete'])"
                  type="danger"
                  size="small"
                  icon="el-icon-delete"
                  @click="handleDelete(scope)"
                />
              </template>
            </el-table-column>
          </el-table>
          <Pagination
            v-show="videoList.count > 0"
            :total="videoList.count"
            :page.sync="listQuery.page"
            :limit.sync="listQuery.page_size"
            @pagination="getList"
          />
        </el-card>
      </el-col>
    </el-row>
    <!--<el-card style="margin-top: 10px">
      <el-table
        v-loading="listLoading"
        :data="
          videoList.results.filter(
            (data) =>
              !search ||
              data.name.toLowerCase().includes(search.toLowerCase()) ||
              data.category_name.toLowerCase().includes(search.toLowerCase())
          )
        "
        border
        fit
        stripe
        highlight-current-row
        :height="tableHeight"
      >
        <el-table-column type="index" width="50" />
        <el-table-column label="名称" prop="name"></el-table-column>
        <el-table-column label="描述" prop="description"></el-table-column>
        <el-table-column label="视频类别">
          <template slot-scope="scope">{{ typeList[scope.row.category] }}</template>
        </el-table-column>
        <el-table-column label="创建时间" prop="create_time"></el-table-column>
        <el-table-column label="封面地址" prop="coverurl"></el-table-column>
        <el-table-column
          align="center"
          label="操作"
          width="200px"
          fixed="right"
        >
          <template slot-scope="scope">
            <el-button
              :disabled="!checkPermission(['video_update'])"
              type="primary"
              size="small"
              icon="el-icon-edit"
              @click="handleEdit(scope)"
            />
            <el-button
              :disabled="!checkPermission(['video_delete'])"
              type="danger"
              size="small"
              icon="el-icon-delete"
              @click="handleDelete(scope)"
            />
          </template>
        </el-table-column>
      </el-table>
      <Pagination
        v-show="videoList.count > 0"
        :total="videoList.count"
        :page.sync="listQuery.page"
        :limit.sync="listQuery.page_size"
        @pagination="getList"
      />
    </el-card>-->
    <el-dialog
      :visible.sync="dialogVisible"
      :title="dialogType === 'edit' ? '编辑视频信息' : '新增视频信息'"
    >
      <el-form
        ref="Forms"
        :model="VideoContent"
        label-width="80px"
        label-position="right"
        :rules="rule1"
      >
        <el-form-item label="视频名称" prop="name">
          <el-input v-model="VideoContent.name" placeholder="名称" />
        </el-form-item>
        <el-form-item label="视频描述" prop="description">
          <el-input v-model="VideoContent.description" placeholder="名称" />
        </el-form-item>
        <el-form-item label="视频类型" prop="category">
          <el-cascader
            v-model="VideoContent.category"
            :options="typeOptions"
            :props="{ emitPath: false,checkStrictly: true }"
            clearable
            style="width: 100%"
          ></el-cascader>
        </el-form-item>
        <el-form-item label="排序">
          <el-input v-model="VideoContent.sort_str" placeholder="排序" />
          <!--<el-input-number style="width: 100%;" v-model="VideoContent.sort_str" :step="1" :min="0" step-strictly placeholder="排序"></el-input-number>-->
        </el-form-item>
        <form ref="vcExample" v-if="dialogType === 'new'">
          <input
            type="file"
            style="display: none"
            ref="vcExampleVideo"
            @change="setVcExampleVideoName()"
          />
          <input
            type="file"
            style="display: none"
            ref="vcExampleCover"
            @change="setVcExampleCoverName()"
          />
        </form>
        <div class="row" v-if="dialogType === 'new'" style="padding: 10px">
          <el-button type="primary" @click="vcExampleAddVideo">{{
            vcExampleVideoName || "添加视频"
          }}</el-button>
          <el-button type="primary" @click="vcExampleAddCover">{{
            vcExampleCoverName || "添加封面"
          }}</el-button>
          <el-button type="success" @click="vcExampleAddUpload"
            >上传视频和封面</el-button
          >
        </div>

        <div class="row" v-if="dialogType === 'new'" id="resultBox">
          <!-- 上传信息组件	 -->
          <div class="uploaderMsgBox" v-for="uploaderInfo in uploaderInfos">
            <div v-if="uploaderInfo.videoInfo">
              视频名称：{{
                uploaderInfo.videoInfo.name + "." + uploaderInfo.videoInfo.type
              }}； 上传进度：
              <el-progress
                :text-inside="true"
                :stroke-width="24"
                :percentage="Math.floor(uploaderInfo.progress * 100)"
                status="success"
              >
              </el-progress>
              上传结果：{{
                uploaderInfo.isVideoUploadCancel
                  ? "已取消"
                  : uploaderInfo.isVideoUploadSuccess
                  ? "上传成功"
                  : "上传中"
              }}；
              <br />
              地址：{{ uploaderInfo.videoUrl }}；
              <a
                href="javascript:void(0);"
                class="cancel-upload"
                v-if="
                  !uploaderInfo.isVideoUploadSuccess &&
                  !uploaderInfo.isVideoUploadCancel
                "
                @click="uploaderInfo.cancel()"
                >取消上传</a
              ><br />
            </div>

            <div v-if="uploaderInfo.coverInfo">
              封面名称：{{ uploaderInfo.coverInfo.name }}； 上传进度：
              <el-progress
                :text-inside="true"
                :stroke-width="24"
                :percentage="Math.floor(uploaderInfo.coverProgress * 100)"
                status="success"
              >
              </el-progress>
              上传结果：{{
                uploaderInfo.isCoverUploadSuccess ? "上传成功" : "上传中"
              }}；
              <br />
              地址：{{ uploaderInfo.coverUrl }}；
              <br />

              <video
                :src="uploaderInfo.videoUrl"
                style="width: 400px; height: 300px"
                id="video"
                autoplay
              ></video>
            </div>
          </div>
        </div>
      </el-form>
      <div style="text-align: right">
        <el-button type="danger" @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="confirm('Forms')">创建信息</el-button>
      </div>
    </el-dialog>
  </div>
</template>

  <script src="https://cdn-go.cn/cdn/vod-js-sdk-v6/latest/vod-js-sdk-v6.js"></script>

  <script type="text/javascript">
import {
  updatevideo,
  getsignature,
  createVideo,
  getVideoList,
  deletevideo,
} from "@/api/video";

import Pagination from "@/components/Pagination"; // secondary package based on el-pagination
import { getDictList, getDictTypeList } from "@/api/dict";
import TcVod from "vod-js-sdk-v6";
import checkPermission from "@/utils/permission";
import { genTree } from "@/utils";
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
const defaultVideo = {
  name: "",
  description: "",
  category: "",
  mediaurl: "",
  sort_str:null,
};

export default {
  components: { Pagination,Treeselect },

  data() {
    return {
      tableHeight:null,
      dialogVisible: false,
      signature: "",
      treeLoding: false,
      videoList: {
        count: 0,
      },
      typeOptions: [],
      dialogType: "",
      listQuery: {
        page: 1,
        page_size: 20,
        search:''
      },
      search: "",
      VideoContent: defaultVideo,
      uploaderInfos: [],
      vcExampleVideoName: "",
      listLoading: false,
      vcExampleCoverName: "",
      rule1: {
        name: [{ required: true, message: "请输入名称", trigger: "blur" }],
        category: [
          { required: true, message: "请选择视频分类", trigger: "change" },
        ],
      },
      typeList:{48:'政 策',61:'技术方法',49:'质 控',
        50:'内 审', 51:'管 评',52:'人 员', 53:'设 备',
        54:'方法的验证和确认',55:'测量不确定度',
        56:'抽 样',57:'安全&风险',58:'管理体系'},
      showTypeOptions:{},
    };
  },
  computed: {},
  created(){
    getDictList({ type__code: "data_video" }).then((res) => {
      let resData = res.data;
      let obj = new Object();
      resData.forEach(item=>{
        obj[item.id] = item.name;
      })
      this.showTypeOptions = obj;
    });
  },
  mounted() {
    let height1 = document.getElementsByClassName('app-main')[0].clientHeight;
    this.tableHeight = height1-120;
    this.getList();
    this.getTypeAll();
  },
  methods: {
    checkPermission,
    //列表加载
    getList() {
      this.listLoading = true;
      getVideoList(this.listQuery).then((response) => {
        if (response.data) {
          this.videoList = response.data;
        }
        this.listLoading = false;
      });
    },

    //视频类型
    getTypeAll() {
      getDictList({ type__code: "data_video" }).then((res) => {
        let resData = res.data;
        let obj = new Object();
        resData.forEach(item=>{
          obj[item.id] = item.name;
        })
        this.showTypeOptions = obj;
        this.typeOptions = genTree(res.data);
      });
    },

    //筛选
    filterTag(value, row) {
      return row.category === value;
    },
    handleOrgClick(obj, node, vue) {
      debugger;
      this.listQuery.page = 1;
      this.listQuery.category = obj.id;
      this.getList();
    },
    handleFilter(){
      this.getList();
    },
    resetFilter(){
      this.listQuery.search = '';
      this.listQuery.category = '';
      this.getList();
    },
    /*弹出弹窗 */
    handleAddVideo() {
      this.VideoContent = Object.assign({}, defaultVideo);
      this.dialogType = "new";
      this.dialogVisible = true;

      this.$nextTick(() => {
        this.$refs["Forms"].clearValidate();
      });
    },

    //删除视频
    handleDelete(scope) {
      this.$confirm("确认删除?", "警告", {
        confirmButtonText: "确认",
        cancelButtonText: "取消",
        type: "error",
      })
        .then(async () => {
          await deletevideo(scope.row.id);
          this.getList();
          this.$message.success("成功");
        })
        .catch((err) => {
          console.error(err);
        });
    },
    //编辑视频
    handleEdit(scope) {
      // this.$router.push({name: "Index", params: {fileid: scope.row.fileid, id: scope.row.id}})
      this.VideoContent = Object.assign({}, scope.row); // copy obj
      this.dialogType = "edit";
      this.dialogVisible = true;

      this.$nextTick(() => {
        this.$refs["Forms"].clearValidate();
      });
      console.log(scope.row)
      debugger;
    },
    setVcExampleVideoName: function () {
      this.vcExampleVideoName = this.$refs.vcExampleVideo.files[0].name;
    },
    setVcExampleCoverName: function () {
      this.vcExampleCoverName = this.$refs.vcExampleCover.files[0].name;
    },
    /*
            vcExample添加视频
          */
    vcExampleAddVideo: function () {
      this.$refs.vcExampleVideo.click();
    },
    /*
            vcExample添加封面
          */
    vcExampleAddCover: function () {
      this.$refs.vcExampleCover.click();
    },
    /*
            vcExample上传过程
          */
    vcExampleAddUpload: function () {
      var self = this;

      var mediaFile = this.$refs.vcExampleVideo.files[0];
      var coverFile = this.$refs.vcExampleCover.files[0];

      // 获取签名 （这里必须定义为函数，tcVod才可识别）
      const getSignature = async function () {
        const { data } = await getsignature();
        return data;
      };
      // 前文中所述的获取上传签名的函数
      const tcVod = new TcVod({ getSignature });
      var uploader = tcVod.upload({
        mediaFile: mediaFile,
        coverFile: coverFile,
      });

      uploader.on("media_progress", function (info) {
        uploaderInfo.progress = info.percent;
      });
      uploader.on("media_upload", function (info) {
        uploaderInfo.isVideoUploadSuccess = true;
      });
      uploader.on("cover_progress", function (info) {
        uploaderInfo.coverProgress = info.percent;
      });
      uploader.on("cover_upload", function (info) {
        uploaderInfo.isCoverUploadSuccess = true;
      });

      var uploaderInfo = {
        videoInfo: uploader.videoInfo,
        coverInfo: uploader.coverInfo,
        isVideoUploadSuccess: false,
        isVideoUploadCancel: false,
        isCoverUploadSuccess: false,
        progress: 0,
        coverProgress: 0,
        fileId: "",
        videoUrl: "",
        coverUrl: "",
        cancel: function () {
          uploaderInfo.isVideoUploadCancel = true;
          uploader.cancel();
        },
      };

      this.uploaderInfos.push(uploaderInfo);
      // console.log('uploaderInfos',this.uploaderInfos);

      uploader.done().then(function (doneResult) {
        console.log("doneResult", doneResult);

        uploaderInfo.fileId = doneResult.fileId;

        uploaderInfo.coverUrl = doneResult.cover.url;
        uploaderInfo.videoUrl = doneResult.video.url;

        self.$refs.vcExample.reset();
        self.vcExampleVideoName = "";
        self.vcExampleCoverName = "";
      });
    },

    async confirm(form) {
      this.$refs[form].validate((valid) => {
        if (valid) {
          const isEdit = this.dialogType === "edit";
          if (isEdit) {
            console.log(this.VideoContent);
            debugger;
           /* for (var i = 0; i < this.uploaderInfos.length; i++) {
              this.VideoContent.fileid = this.uploaderInfos[i].fileId;

              this.VideoContent.coverurl = this.uploaderInfos[i].coverUrl;
              this.VideoContent.mediaurl = this.uploaderInfos[i].videoUrl;
            }*/
             console.log(this.VideoContent)
            updatevideo(this.VideoContent.id, this.VideoContent).then((res) => {
              if (res.code >= 200) {
                this.getList();
                this.dialogVisible = false;
                this.$message.success("成功");
              }
            });
          } else {
            for (var i = 0; i < this.uploaderInfos.length; i++) {
              this.VideoContent.fileid = this.uploaderInfos[i].fileId;

              this.VideoContent.coverurl = this.uploaderInfos[i].coverUrl;
              this.VideoContent.mediaurl = this.uploaderInfos[i].videoUrl;
            }
            createVideo(this.VideoContent).then((res) => {
              if (res.code >= 200) {
                this.getList();
                this.dialogVisible = false;
                this.$message.success("成功");
              }
            });
          }
        } else {
          return false;
        }
      });
    },
  },
};
</script>
 

  <style  lang="scss" scoped>
.text-danger {
  color: red;
}

.control-label {
  text-align: left !important;
}

#resultBox {
  width: 100%;
  height: 300px;
  border: 1px solid #888;
  padding: 5px;
  overflow: auto;
  margin-bottom: 20px;
}

.uploaderMsgBox {
  border-bottom: 1px solid #888;
  background: #1a7ce0;
  color: white;
  font-size: medium;
}

.cancel-upload {
  text-decoration: none;
  cursor: pointer;
}
</style>
    

