<script setup>
import { ArrowLeftBold } from "@element-plus/icons-vue";
import empty from "/images/empty.png";
import { user } from "~/store/index";
import deleteImg from "/images/delete.png";

const props = defineProps({
  id: String,
  type: String,
});
const router = useRouter();
let detailInfo = $ref({});
let teacherData = $ref([]);
let nowTime = $ref("");
let currentTime = $ref("");

function handleBack() {
  router.back();
}
//初始化
let currentId = $ref("");
let currentUserId = $ref("");
async function initData(init) {
  const { code, data } = await request({
    url: "/aimooc/xnszr_video/detail",
    data: { axv_id: props.id },
  });
  if (code === "1") {
    detailInfo = data.one_info;
    if (detailInfo.axv_shr_json) {
      teacherData = JSON.parse(detailInfo.axv_shr_json);
      teacherData.forEach((item) => {
        if (item.user_id === user.value.user_id) currentId = item.user_id;
      });
      changeStatus(user.value.user_id);
    } else {
      teacherData = [];
    }
    if (init === "1") {
      const player = new Aliplayer(
        {
          id: "player-con",
          source: detailInfo.axv_video,
          width: "100%",
          height: "700px",
          autoplay: false,
          cover: detailInfo.axv_img,
          isLive: false,
          rePlay: false,
          playsinline: true,
          preload: true,
          controlBarVisibility: "hover",
          useH5Prism: true,
          skinLayout: [
            {
              name: "bigPlayButton",
              align: "blabs",
              x: 30,
              y: 80,
            },
            {
              name: "H5Loading",
              align: "cc",
            },
            {
              name: "errorDisplay",
              align: "tlabs",
              x: 0,
              y: 0,
            },
            {
              name: "infoDisplay",
            },
            {
              name: "tooltip",
              align: "blabs",
              x: 0,
              y: 56,
            },
            {
              name: "thumbnail",
            },
            {
              name: "controlBar",
              align: "blabs",
              x: 0,
              y: 0,
              children: [
                {
                  name: "progress",
                  align: "blabs",
                  x: 0,
                  y: 44,
                },
                {
                  name: "playButton",
                  align: "tl",
                  x: 15,
                  y: 12,
                },
                {
                  name: "timeDisplay",
                  align: "tl",
                  x: 10,
                  y: 7,
                },
                {
                  name: "fullScreenButton",
                  align: "tr",
                  x: 10,
                  y: 12,
                },
                {
                  name: "setting",
                  align: "tr",
                  x: 15,
                  y: 12,
                },
                {
                  name: "volume",
                  align: "tr",
                  x: 5,
                  y: 10,
                },
              ],
            },
          ],
        },
        (player) => {
          console.log("The player is created");
        }
      );
      const timer = setInterval(() => {
        currentTime = parseInt(player.getCurrentTime());
        let h = parseInt((currentTime / 60 / 60) % 24);
        h = h < 10 ? `0${h}` : h;
        let m = parseInt((currentTime / 60) % 60);
        m = m < 10 ? `0${m}` : m;
        let s = parseInt(currentTime % 60);
        s = s < 10 ? `0${s}` : s;
        nowTime = `${h}时${m}分${s}秒`;
      }, 1000);
    }
  }
}
initData("1");
let pzList = $ref([]);
function changeStatus(id) {
  let shjlList = [];
  currentId = id;
  detailInfo.spjl.forEach((item) => {
    shjlList = detailInfo.spjl;
  });
  pzList = [];
  shjlList.forEach((item) => {
    if (currentId === item.create_user_id) {
      pzList.push({
        axvs_id: item.axvs_id,
        axvs_spsj: item.axvs_spsj,
        axvs_user_realname: item.axvs_user_realname,
        axvs_text: item.axvs_text,
      });
    }
  });
  console.log(currentId, 11111111);
}

// 修改审查状态(创作)
async function spztModifyCzr(id) {
  const { code, data } = await request({
    url: "/aimooc/xnszr_video/edit",
    data: {
      axv_id: id,
      aimooc_xnszr_video: { axv_status: "1" },
    },
  });

  if (code === "1") {
    ElMessage.success("审查已结束！");
    teacherData.forEach((item) => {
      if (item.user_id === user.value.user_id) item.status = "1";
    });
    detailInfo.axv_status_option_k = "1";
  }
}

// 修改审查状态（协作）
async function spztModifyXzr(id) {
  const { code, data } = await request({
    url: "/aimooc/xnszr_video/check",
    data: { axv_id: id },
  });
  if (code === "1") {
    ElMessage.success("已审查！");
    teacherData.forEach((item) => {
      if (item.user_id === user.value.user_id) item.status = "1";
    });
    detailInfo.sh_status = "1";
  }
}

let isDisabled = $ref(true);
function status(index) {
  let flag = true;
  if (isDisabled === false) {
    if (index === 0) {
      flag = false;
    } else {
      flag = true;
    }
  } else {
    flag = isDisabled;
  }
  return flag;
}

// 添加审批记录
function spjlAdd(id) {
  console.log(user.value.user_id, currentId, 333);
  if (detailInfo.axv_status_option_k === "1") {
    return ElMessage.error("审批已结束,您已不能添加审批备注。");
  }
  if (user.value.user_id !== currentId) {
    return ElMessage.error("您只能添加自己的审批备注。");
  }
  if (currentTime !== 0) {
    isDisabled = false;
    pzList.unshift({
      axv_id: id,
      axvs_spsj: nowTime,
      axvs_user_realname: user.value.user_realname,
      axvs_text: "",
    });

  } else {
    return ElMessage.error("请选择批注时间。");
  }
}

async function spjlSave(id, index) {
  let text = pzList[index].axvs_text;
  let spTime = pzList[index].axvs_spsj;

  const { code, data } = await request({
    url: "/aimooc/xnszr_video/add_spjl",
    data: { axv_id: id, time: spTime, content: text },
  });
  console.log(data, 44444444444);
  if (code === "1") {
    ElMessage.success("添加成功！");
    isDisabled = true;
    initData();
  }
}
// 删除审批记录
async function spjlDel(id) {
  console.log(user.value.user_id, currentId, 444);
  if (detailInfo.axv_status_option_k === "1") {
    return ElMessage.error("审批已结束,您已不能删除审批备注。");
  }
  if (user.value.user_id !== currentId) {
    return ElMessage.error("您只能删除自己的审批备注。");
  }
  ElMessageBox.confirm("确定要删除这些数据吗？", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then(async () => {
      const { code, data } = await request({
        url: "/aimooc/xnszr_video/delete_spjl",
        data: { axvs_id: id },
      });
      if (code === "1") {
        ElMessage.success("删除成功！");
        initData();
      }
    })
    .catch(() => {});
}
</script>

<template>
  <div>
    <div class="h-77px flex items-center justify-between bg-white px-20px">
      <div class="w-1/2 flex items-center justify-between">
        <div class="flex items-center">
          <el-icon class="mr-30px cursor-pointer" size="29" @click="handleBack">
            <ArrowLeftBold />
          </el-icon>
          <span class="text-24px"> {{ detailInfo.axv_name }}</span>
        </div>
        <div class="flex items-center">
          协作人：
          <div class="text-18px">
            {{ detailInfo.xzr_list ? detailInfo.xzr_list : "无" }}
          </div>
        </div>
      </div>

      <div v-if="type === user.user_id">
        <el-button
          v-if="detailInfo.axv_status_option_k === '1'"
          type="info"
          class="h-48px w-118px"
        >
          已结束
        </el-button>
        <el-button
          v-else
          type="primary"
          class="h-48px w-118px"
          @click="spztModifyCzr(detailInfo.axv_id)"
        >
          结束审查
        </el-button>
      </div>
      <div v-else>
        <el-button
          v-if="
            detailInfo.axv_status_option_k === '1' ||
            detailInfo.sh_status === '1'
          "
          type="info"
          class="h-48px w-118px"
        >
          已审查
        </el-button>
        <el-button
          v-else
          type="primary"
          class="h-48px w-118px"
          @click="spztModifyXzr(detailInfo.axv_id)"
        >
          已审查
        </el-button>
      </div>
    </div>
    <div class="h-full flex justify-between">
      <div class="relative mx-12px my-28px w-3/4 rounded-24px">
        <div id="player-con" />
        <el-button
          type="primary"
          class="absolute right-36px top-29px z-100 h-48px w-118px"
          @click="spjlAdd(detailInfo.axv_id)"
        >
          添加审批备注
        </el-button>
      </div>
      <div class="w-1/4 pl-20px pr-33px">
        <div>
          <div class="mb-16px flex items-center justify-between">
            <h3 class="active pageTitle mt-9px">审批详情</h3>
          </div>
          <el-scrollbar view-class="h-70px">
            <div class="grid grid-cols-2 gap-x-8px">
              <div
                v-for="(item, index) in teacherData"
                :key="index"
                :class="currentId === item.user_id && 'bg'"
                class="mt-6px"
                @click="changeStatus(item.user_id)"
              >
                <div
                  class="flex items-center justify-between border border-hex-d1d1d1 rounded-4px px-5px"
                >
                  <span class="w-2/3 truncate">{{ item.user_realname }}</span>
                  <span
                    v-if="item.status === '0'"
                    class="h-22px w-52px rounded-2px bg-hex-fdcb9e text-center text-12px leading-22px"
                    >待审批</span
                  >
                  <span
                    v-if="item.status === '1'"
                    class="h-22px w-52px rounded-2px bg-hex-efefef text-center text-12px leading-22px"
                    >已审查</span
                  >
                </div>
              </div>
            </div>
            <div v-if="teacherData.length === 0" class="text-center">
              <img :src="empty" alt="" class="m-auto mb-5px h-40px w-40px" />
              <div>暂无数据</div>
            </div>
          </el-scrollbar>
          <div class="mt-16px overflow-hidden rounded-12px bg-white">
            <!--  <div v-if="lookData.length === 0" class="pt-30px text-center">
            <img :src="empty" alt="" class="m-auto mb-15px" />
            <div>暂无数据</div>
          </div> -->
            <el-scrollbar view-class="h-580px">
              <div
                v-if="pzList.length > 0"
                class="grid grid-cols-1 gap-4 rounded-12px px-12px"
              >
                <div v-for="(item, index) in pzList" :key="index">
                  <div>
                    <div class="flex items-center justify-between">
                      <span> {{ item.axvs_user_realname }} 批阅： </span>
                      <img
                        :src="deleteImg"
                        alt=""
                        @click="spjlDel(item.axvs_id)"
                      />
                    </div>
                    <div class="flex items-center">
                      <img src="/images/video.png" alt="" />
                      <div>{{ item.axvs_spsj }}</div>
                    </div>
                    <el-input
                    type="textarea"
                    autosize
                      v-model="item.axvs_text"
                      :disabled="status(index)"
                      @blur="spjlSave(detailInfo.axv_id, index)"
                    />
                    <div />
                  </div>
                </div>
              </div>
              <div v-else class="pt-30px text-center">
                <img :src="empty" alt="" class="m-auto mb-15px" />
                <div>暂无数据</div>
              </div>
            </el-scrollbar>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<route lang="json">
  {
    "meta":{
      "hidden": true,
      "hideLayout": true
    }
  }
</route>

<style lang="scss" scoped>
@use "~/styles/page.scss";

.bg {
  background: #cceabb;
}
</style>
