<template>
  <div>
    <div class="bigBox">
      <div class="left" :style="{ width: lfBoxWid }">
        <div class="title">
          <div style="display: flex; align-items: center">
            <div style="padding-top: 5px; margin-right: 5px">
              <el-icon style="color: var(--el-color-primary) !important">
                <List />
              </el-icon>
            </div>

            <span class="zzjgxx" v-if="iconChange">组织机构信息</span>
          </div>
          <el-icon @click="handleCollapse" v-show="iconChange">
            <DArrowLeft />
          </el-icon>
          <el-icon @click="handleCollapse" v-show="!iconChange">
            <DArrowRight />
          </el-icon>
        </div>
        <div class="treeBox" :style="{ height: treeHeight }">
          <MOSTY.DepartmentTree width="100%" placeholder="管理部门ID" :searchType="'03'" clearable filterable @getdeptData="getdeptId" />
        </div>
      </div>
      <div class="right" :style="{ width: rgBoxWid }">
        <div class="titleBox">
          <div class="title">微视频课件管理</div>
          <div class="btnBox">
            <el-button type="primary" @click="handletotal">
              <span>视频资源统计</span>
            </el-button>
            <el-button type="primary" @click="handleAdd">
              <el-icon>
                <CirclePlus />
              </el-icon>
              <span>新增</span>
            </el-button>
          </div>
        </div>
        <div class="tabBox">
          <el-table ref="multipleTableRef" :data="tableData" stripe style="width: 100%" v-loading="tableloading" height="95%" element-loading-text="数据加载中..." border>
            <el-table-column label="视频标题" property="title" show-overflow-tooltip></el-table-column>
            <el-table-column label="视频分类" property="type" width="150">
              <template #default="{ row }">
                <dict-tag :options="D_BZ_WSPFL" :value="row.type" :tag="false" />
              </template>
            </el-table-column>
            <el-table-column label="视频说明" property="content" show-overflow-tooltip></el-table-column>
            <el-table-column label="录入人姓名" property="username" width="100"></el-table-column>
            <el-table-column label="录入人部门" property="orgname" show-overflow-tooltip></el-table-column>
            <el-table-column label="录入时间" property="addtime"></el-table-column>
            <el-table-column label="操作" width="350">
              <template #default="{ row }">
                <span class="operedit" @click="handlestudy(row)"><el-icon>
                    <EditPen />
                  </el-icon>学习</span>
                <span class="operesee" @click="handlexq(row)"><el-icon>
                    <Compass />
                  </el-icon>详情</span>
                <span class="operedit" @click="handlexg(row)"><el-icon>
                    <EditPen />
                  </el-icon>修改</span>
                <span class="operesee" @click="handletj(row)"><el-icon>
                    <Compass />
                  </el-icon>学习统计</span>
                <el-popconfirm confirm-button-text="是" cancel-button-text="否" icon-color="red" title="确定要删除?" @confirm="handledelete(row)">
                  <template #reference>
                    <span class="operdel" size="small"><el-icon>
                        <Delete />
                      </el-icon>删除</span>
                  </template>
                </el-popconfirm>
              </template>
            </el-table-column>
          </el-table>

          <div class="fenye">
            <el-pagination class="pagination" @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="searchobj.pageCurrent" :page-sizes="[2, 5, 10, 20]" :page-size="searchobj.pageSize" layout="total, prev, pager, next, sizes, jumper" :total="total"></el-pagination>
          </div>
        </div>
      </div>
    </div>
    <!-- 新增 -->
    <Addspkj :addDiaShow="addDiaShow" :title="logTitle" :id="Rowid" @changeAddVi="changeAddVi" @changeclose="changeclose" :types="types" />
    <!-- 学习统计 -->
    <Studytj :addDiaShow="addDiaShowtj" :id="Rowid" :username="username" @changeAddVi="addDiaShowtj = false" />
    <!-- 学习 -->
    <!-- 视频播放组件 -->
    <div v-if="showVideo" class="dialog-box">
      <div class="barbox">
        <div class="titleBox">
          <div class="title">视频播放</div>
          <div class="btnBox">
            <el-button @click="closeVIde">
              <el-icon>
                <Back />
              </el-icon>
              <span>返回</span>
            </el-button>
          </div>
        </div>
        <div class="videos">
          <MOSTY.VideoPlay :showVideo="showVideo" :videourl="videourl" @EndChange="EndChange" />
        </div>
      </div>
    </div>

    <!-- 视频资源统计 -->
    <div v-if="comprehensiveShow" class="dialog-box">
      <div class="barbox">
        <div class="titleBox">
          <div class="title">微视频统计</div>
          <div class="btnBox">
            <el-button @click="comprehensiveShow = false">
              <el-icon>
                <Back />
              </el-icon>
              <span>返回</span>
            </el-button>
          </div>
        </div>
        <div class="bareach">
          <BinManyBar ids="wsptj" :binTitle="'微视频统计'" :barTitle="gwkstitle" :series="ksList" :key="kskey" :loadingshow="comprehensiveShow" />
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
// 引入

import { ref, onMounted, reactive, getCurrentInstance } from "vue";
import { ArrowDown } from "@element-plus/icons-vue";
import { ElMessage, ElMessageBox } from "element-plus";
import * as MOSTY from "@/components/MyComponents/index";
import { getApi, deleteApi, postApi } from "@/api/tobAcco_api.js";
import Addspkj from "./addspkj.vue";
import Studytj from "./studytj.vue";
import BinManyBar from "@/views/newsystem/components/charts/binManyBar.vue";
const { proxy } = getCurrentInstance();
const videourl = ref(null);
const bigHeight = ref(); //整个高度
const engPlay = ref(false);
const addDiaShowtj = ref(false);
const username = ref(null);
const showVideo = ref(false);
const { D_BZ_WSPFL } = proxy.$dict("D_BZ_WSPFL");
const iconChange = ref(true);
const lfBoxWid = ref("300px");
const rgBoxWid = ref("calc(100% - 300px)");
const fileEdit = ref(true);
const comprehensiveShow = ref(false);
const Rowid = ref(null);
const types = ref(null);
const logTitle = ref("微视频课件新增");
const addDiaShow = ref(false);
const total = ref(30);
const tableloading = ref(false);
const id = ref(null);
const searchobj = ref({
  pageCurrent: 1,
  pageSize: 20
});
const kskey = ref(1);
const gwkstitle = ref([]);
const ksList = ref([
  {
    name: "视频类别统计柱状图",
    type: "bar",
    data: []
  }
]);
const title = ref("");
const dialogVisible = ref(false);

// 数据
const tableData = ref([]); //表格数据
// 方法
const treeHeight = ref(""); // 树高度
// 方法
const bigHeightFn = () => {
  bigHeight.value = window.innerHeight - 147 + "px";
  treeHeight.value = window.innerHeight - 187 + "px";
};
const handleCollapse = () => {
  iconChange.value = !iconChange.value;
  if (iconChange.value) {
    lfBoxWid.value = "300px";
    rgBoxWid.value = "calc(100% - 300px)";
  } else {
    lfBoxWid.value = "40px";
    rgBoxWid.value = "calc(100% - 40px)";
  }
};

const barShow = ref(false);
onMounted(() => {
  bigHeightFn();
}); //获取部门数据
const getdeptId = (val) => {
  searchobj.value.orgcode = val.id;
  searchobj.value.pageCurrent = 1;
  getwspList();
};
//	查询微视频列表
function getwspList () {
  tableloading.value = true;
  getApi(searchobj.value, "/mosty-jcgl/video/getPageList").then((res) => {
    if (res.records) {
      tableData.value = res.records;
      total.value = res.total;
      tableloading.value = false;
    }
  });
}
//微视频资源统计
function handletotal () {
  comprehensiveShow.value = true;
  gwkstitle.value = [];
  ksList.value[0].data = [];
  getApi(
    { orgcode: searchobj.value.orgcode },
    "/mosty-jcgl/video/statistics"
  ).then((res) => {
    if (res) {
      res.forEach((item) => {
        gwkstitle.value.push(item.zdmc);
        if (item.count) {
          ksList.value[0].data.push(item.count);
        } else {
          ksList.value[0].data.push(0);
        }
      });
      kskey.value++;
    }
  });
}

//新增
function handleAdd () {
  types.value = "00";
  Rowid.value = null;
  logTitle.value = "微视频课件新增";
  addDiaShow.value = true;
}
//修改
function handlexg (row) {
  types.value = "02";
  Rowid.value = row.id;
  logTitle.value = "微视频课件修改";
  addDiaShow.value = true;
}
//详情
function handlexq (row) {
  types.value = "01";
  Rowid.value = row.id;
  logTitle.value = "微视频课件查看";
  addDiaShow.value = true;
}
//删除
function handledelete (row) {
  deleteApi({}, `/mosty-jcgl/video/del/${row.id}`).then((res) => {
    ElMessage.success("删除成功");
    getwspList();
  });
}

//学习
function handlestudy (row) {
  id.value = row.id;
  videourl.value = row.spdz;
  showVideo.value = true;
}
//判断是否学习完
function closeVIde () {
  if (engPlay.value == false) {
    //没有学习完
    open();
  } else {
    showVideo.value = false;
  }
}
//视频是否播放完
function EndChange (val) {
  engPlay.value = val;
  opens();
}
const open = () => {
  ElMessageBox.confirm(
    "视频尚未看完，如果当前退出将不计入查阅次数，确定退出?",
    "系统信息",
    {
      confirmButtonText: "确定",
      cancelButtonText: "取消",
      type: "warning"
    }
  )
    .then(() => {
      showVideo.value = false;
    })
    .catch(() => {
      return;
    });
};
const opens = () => {
  ElMessageBox.confirm("视频播放完成！！！", "系统信息", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning"
  })
    .then(() => {
      addstudycs();
    })
    .catch(() => {
      addstudycs();
    });
};
// 记录一次学习次数
function addstudycs () {
  // 最后一次学习终端 01.PC 02.小程序
  postApi({ id: id.value, lastaddr: "01" }, "/mosty-jcgl/video/addStudyCount")
    .then((res) => {
      ElMessage.success("已计入学习次数");
      showVideo.value = false;
    })
    .catch((err) => {
      ElMessage.warning(err.message);
    });
}
//学习统计
function handletj (row) {
  Rowid.value = row.id;
  username.value = row.username;
  addDiaShowtj.value = true;
}
//关闭新增弹窗并刷新列表
function changeAddVi () {
  addDiaShow.value = false;
  getwspList();
}
function changeclose () {
  addDiaShow.value = false;
}
//页码发生变化
const handleCurrentChange = (val) => {
  searchobj.value.pageCurrent = val;
  getTableData();
};
//查询条数发生变化
const handleSizeChange = (val) => {
  searchobj.value.pageSize = val;
  getTableData();
};
</script>

<style lang="scss" scoped>
.bigBox {
  display: flex;
}

.title {
  height: 60px;
  line-height: 60px;
  font-size: 18px;
  color: #0f3916;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.left {
  width: 300px;
  // height: 1030px;
  background: #ffffff;
  box-shadow: 0px 2px 10px 0px rgba(107, 107, 107, 0.1);
  border-radius: 0px 0px 0px 0px;
  opacity: 1;

  .treeBox {
    overflow: auto;
  }
}

.right {
  padding: 0 10px;
  margin: 0px 14px;
  background: #fff;
}

// .titleBox {
//
// }

.btnBox {
  display: flex;
  // width: 300px;
  justify-content: space-between;

  .el-input {
    width: 400px;
    margin-right: 10px;
  }
}

.chartsBox {
  height: 500px;
  display: flex;
  justify-content: space-between;

  div {
    width: 50%;
  }
}

.example-showcase .el-dropdown-link {
  cursor: pointer;
  color: var(--el-color-primary);
  display: flex;
  align-items: center;
}

.from_box {
  display: flex;
  justify-content: space-between;

  .from_left {
    width: 25%;
  }
}

.el-form {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
}

.tabBox {
  height: calc(100% - 63px);
}

.fenye {
  top: 95%;
}

.barbox {
  margin: 20px;
  width: 85vw;
  height: 80vh;
}

.bareach {
  margin: 20px;
  width: 80vw;
  height: 75vh;
}

.videos {
  margin: 40px auto;
  width: 50vw;
  height: 60vh;
}
</style>