<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 router = useRouter();
const route = useRoute();
let queryData = $ref({
  id: route.query.as_id,
});
let detailInfo = $ref({});

function handleBack() {
  router.back();
}
//初始化
let currentId = $ref("");
let currentUserId = $ref("");
async function initData(init) {
  const { code, data } = await request({
    url: "/aimooc/spjj/detail",
    data: { as_id: queryData.id },
  });
  if (code === "1") {
    detailInfo = data.one_info;
    const player = new Aliplayer(
      {
        id: "player-con",
        source: detailInfo.as_file,
        width: "100%",
        height: "700px",
        autoplay: false,
        cover: detailInfo.as_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");
      }
    );
  }
}
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);
}

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;
}

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.as_title }}</span>
          <div class="flex items-center ml-50px">
            责任人：
            <div class="text-16x">
              {{ detailInfo.as_zy_syxm_v2 ? detailInfo.as_zy_syxm_v2 : "无" }}
            </div>
          </div>
        </div>
      </div>
    </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" />
    </div>
    <div class="w-1/4 pl-20px pr-33px">
      <div class="mt-12px">
        <div class="mb-16px flex items-center justify-between">
          <h3 class="active pageTitle mt-9px">审核状态</h3>
        </div>
        <div>
          <span
            class="text-14px px-15px py-8px rounded-tr-15px rounded-bl-15px"
            :class="
              detailInfo.as_zy_shzt_v2_option_k == '1'
                ? 'bg-hex-b5e4ca'
                : detailInfo.as_zy_shzt_v2_option_k == '2'
                ? 'bg-hex-ec725d text-white'
                : detailInfo.as_zy_shzt_v2_option_k == '3'
                ? 'bg-hex-E4DBB5'
                : ''
            "
            >{{
              detailInfo.as_zy_shzt_v2_option_k == "1"
                ? "通过"
                : detailInfo.as_zy_shzt_v2_option_k == "2"
                ? "不通过"
                : detailInfo.as_zy_shzt_v2_option_k == "3"
                ? "待审核"
                : ""
            }}</span
          >
        </div>
        <div class="mt-16px overflow-hidden rounded-12px bg-white">
          <el-scrollbar view-class="h-580px">
            <div
              class="px-12px py-24px text-14px tracking-wider text-hex-3F3F44"
              v-if="detailInfo.as_zy_shbz_v2"
            >
              {{ detailInfo.as_zy_shbz_v2 }}
            </div>
            <div class="px-12px py-24px" v-else-if="!detailInfo.as_zy_shbz_v2">
              <div
                v-if="detailInfo.as_zy_shzt_v2_option_k == '3'"
                class="text-14px tracking-wider text-hex-3F3F44"
              >
                请耐心等待，会尽快安排审核
              </div>
              <div
                v-if="detailInfo.as_zy_shzt_v2_option_k == '1'"
                class="text-14px tracking-wider text-hex-3F3F44"
              >
                符合审核的标准
              </div>
            </div>
          </el-scrollbar>
        </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>
