<script setup>
import empty from "/images/empty.png";
import edit from "/images/edit.png";
import deleteImg from "/images/delete.png";
import download from "/images/download.png";
import ArrowDownBold from "/images/ArrowDownBold.png";
import search from "/images/search.png";
import spjj1 from "/images/spjj1.png";
import enter from "/images/enter.png";
import { getTime } from "~/utils/helper";
import { user } from "~/store/index";
import { downLoadFile } from "~/utils/download";
const showTeacher = $ref(true);

const router = useRouter();
let checkAll = $ref(false);
let checkList = $ref([]);
let isCheckedTeacher = $ref([]);
let axv_id = $ref("");
let changelist = $ref("1");
let checkData = $ref([]);
// 初始化
const form_query = $ref({
  page: 1,
  limit: 6,
  axv_status: "",
});
const dialogFormRef = ref(null);
const dialogForm = $ref({
  axv_img: "",
  axv_name: "",
  axv_video: "",
  axv_shr_json: "",
});
const rules = reactive({
  axv_name: [{ required: true, message: "请输入视频名称", trigger: "blur" }],
  axv_video: [{ required: true, message: "请上传视频", trigger: "submit" }],
  // axv_shr_json: [{ required: true, message: '请勾选协作人', trigger: 'submit' }],
});
let dialogVisible = $ref(false);
let total = $ref(10);
const lookData = $ref([]);
let resultData = $ref([]);
async function initData(changelist) {
  const { code, data } = await request({
    url: "/aimooc/xnszr_video/index",
    data:
      changelist === "1"
        ? {
            ...form_query,
            create_user_id: user.value.user_id,
          }
        : {
            ...form_query,
            my_check: "1",
          },
  });
  if (code === "1") {
    data.page_data.forEach((item) => {
      item.checked = false;
      checkData.forEach((value) => {
        if (item.axv_id === value.axv_id) item.checked = true;
      });
    });
    resultData = [...data.page_data];
    console.log(checkData, resultData, 111111);
    total = Number(data.total_rows);
  }
}
initData("1");
watch(
  () => checkAll,
  (val) => {
    resultData.forEach((item) => {
      item.checked = val || false;
      handelChange(item);
    });
  }
);
function handleCurrentChange(val) {
  form_query.page = val;
  checkAll = false;
  initData(changelist);
}
// 最近查看
async function initLookData() {
  const { code, data } = await request({
    url: "/aimooc/xnszr_video/last_visit",
    data: { limit: "3" },
  });
  if (code === "1") for (const i in data) lookData.push(data[i]);
}
initLookData();

function handleEnter(axv_id, create_user_id) {
  router.push({
    path: `spsh/${axv_id}/${create_user_id}`,
  });
}

function handleDelete(data) {
  ElMessageBox.confirm("确定要删除该数据吗？", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then(async () => {
      const { code } = await request({
        url: "/aimooc/xnszr_video/delete",
        data: { axv_id: data.axv_id },
      });
      if (code === "1") {
        ElMessage.success("删除成功！");
        initData(changelist);
      }
    })
    .catch(() => {});
}
function handleMutiDelete() {
  const arr = checkData.map((item) => {
    return item.axv_id;
  });
  ElMessageBox.confirm("确定要删除这些数据吗？", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then(async () => {
      const { code } = await request({
        url: "/aimooc/xnszr_video/delete",
        data: { axv_id: arr },
      });
      if (code === "1") {
        ElMessage.success("删除成功！");
        initData(changelist);
      }
    })
    .catch(() => {});
}

function handelChange(data) {
  if (data.checked) checkData.push(data);
  else checkData = checkData.filter((item) => item.axv_id !== data.axv_id);
}

const statusData = ref([
  {
    name: "我创作的",
    status: "1",
  },
  {
    name: "我参与的",
    status: "2",
  },
]);
function changeStatus(status) {
  changelist = status;
  checkAll = false;
  checkData = [];
  initData(changelist);
}
let userList = $ref([]);
let searchKey = $ref("");
async function initUserList() {
  const { code, data } = await request({
    baseURL: window.GLOBAL_CONFIG.uc,
    url: "index.php?mod=school&action=main&do=teachers",
    data: { sm_id: user.value.sm_info.sm_id, ex: "1",keyword:searchKey },
  });
  if (code === "1") userList = data;
}

// 选中教师
function isCheckUser(e, t) {
  console.log(checkList, e, t, 233333333333);
  if (e) {
    isCheckedTeacher.push({
      user_id: t.user_id,
      user_name: t.username,
      user_realname: t.realname,
    });
    console.log(isCheckedTeacher, 5555544);
  } else {
    const index = isCheckedTeacher.findIndex(
      (item) => item.user_id === t.user_id
    );
    isCheckedTeacher.splice(index, 1);
  }
  const zx_bkjs = [];
  isCheckedTeacher.forEach((item) => {
    zx_bkjs.push({
      user_id: item.user_id,
      user_name: item.user_name,
      user_realname: item.user_realname,
      status: "0",
    });
  });
  dialogForm.axv_shr_json = JSON.stringify(zx_bkjs);

  console.log(isCheckedTeacher, 555555);
}
// 删除教师
function deleteJs(js) {
  const index = isCheckedTeacher.findIndex(
    (item) => item.user_id === js.user_id
  );
  isCheckedTeacher.splice(index, 1);
  checkList.splice(index, 1);
  dialogForm.axv_shr_json = isCheckedTeacher;
}
// 新增加审核

let title = $ref("新增加审核");
function handleCreate() {
  searchKey=""
  initUserList();

  title = "新增加审核";
  dialogVisible = true;
  axv_id = "";
  isCheckedTeacher = [];
  checkList = [];
  
  for (const key in dialogForm) dialogForm[key] = "";
}
async function handleEdit(item) {
  searchKey=""
  initUserList();
  title = "编辑加审核";
  dialogVisible = true;
  axv_id = item.axv_id;
  const { code, data } = await request({
    url: "/aimooc/xnszr_video/detail",
    data: { axv_id: item.axv_id },
  });
  if (code === "1") {
    for (const key in dialogForm) dialogForm[key] = data.one_info[key];
    checkList = [];
    if (data.one_info.axv_shr_json) {
      isCheckedTeacher = JSON.parse(data.one_info.axv_shr_json);
      isCheckedTeacher.forEach((item) => {
        checkList.push(item.user_id);
      });
      console.log(isCheckedTeacher, checkList, 6666666666);
    } else {
      isCheckedTeacher = [];
    }
  }
}

async function handleSubmit(formEl) {
  if (!formEl) return;

  formEl.validate(async (valid) => {
    if (valid) {
      const data = {
        aimooc_xnszr_video: dialogForm,
      };

      let res = {};
      if (!axv_id) {
        res = await request({ url: "/aimooc/xnszr_video/add", data });
      } else {
        data.axv_id = axv_id;
        res = await request({ url: "/aimooc/xnszr_video/edit", data });
      }
      if (res.code === "1") {
        ElMessage.success("保存成功！");
        initData(changelist);
        dialogVisible = false;
      }
    }
  });
}
function handleDownload(item) {
  downLoadFile(item, `${item}`);
}
</script>

<template>
  <div class="h-full flex justify-between">
    <div class="h-full w-3/4 flex flex-col">
      <div class="mb-12px flex items-center justify-between">
        <div class="flex space-x-6">
          <div
            v-for="(item, index) in statusData"
            :key="index"
            class="pageTitle"
            :class="changelist === item.status && 'active'"
            @click="changeStatus(item.status)"
          >
            {{ item.name }}
          </div>
        </div>
        <div class="flex items-center">
          <el-checkbox v-model="checkAll"> 全选 </el-checkbox>
          <el-button
            plain
            class="ml-33px h-42px w-130px"
            @click="handleMutiDelete"
          >
            批量删除
          </el-button>
          <el-button
            v-if="changelist === '1'"
            type="primary"
            class="h-42px w-130px"
            @click="handleCreate"
          >
            新增加审核
          </el-button>
        </div>
      </div>

      <div class="overflow-hidden rounded-12px bg-white">
        <div class="my-18px flex items-center justify-end px-80px space-x-4">
          <div>筛选</div>
          <el-select
            v-model="form_query.axv_status"
            size="large"
            @change="initData(changelist)"
          >
            <!-- <el-option>全部</el-option> -->
            <el-option label="全部" value="" />
            <el-option label="进行中" value="2" />
            <el-option label="已结束" value="1" />
          </el-select>
        </div>
        <div v-if="resultData.length === 0" class="pt-30px text-center">
          <img :src="empty" alt="" class="m-auto mb-15px" />
          <div>暂无数据</div>
        </div>
        <el-scrollbar v-else view-class="h-full">
          <div class="grid grid-cols-3 gap-8 rounded-12px px-80px py-30px">
            <div
              v-for="(item, index) in resultData"
              :key="index"
              class="rounded-12px"
            >
              <div class="imgDiv relative h-200px rounded-12px">
                <div
                  class="roundRadius rounded_left absolute right-0 h-32px w-66px text-center text-15px leading-32px"
                  :class="
                    item.axv_status === '1'
                      ? 'bg-hex-efefef text-hex-6f767e'
                      : 'bg-hex-b5e4ca text-hex-1a1d1f'
                  "
                >
                  {{ item.axv_status === "1" ? "已结束" : "进行中" }}
                </div>
                <img
                  v-if="item.axv_img"
                  :src="item.axv_img"
                  alt=""
                  class="h-full w-full rounded-12px"
                />
                <div
                  v-else
                  class="flex items-center justify-center h-full bg-hex-797979 rounded-12px"
                >
                  <img :src="spjj1" alt="" />
                </div>
                <div class="checkDiv absolute left-10px top-10px">
                  <el-checkbox
                    v-model="item.checked"
                    @change="handelChange(item)"
                  />
                </div>
                <div
                  v-if="changelist === '1'"
                  class="modal absolute left-0px top-0px h-full w-full flex items-center justify-center rounded-12px"
                >
                  <div>
                    <div class="img-item" @click="handleEdit(item)">
                      <img :src="edit" alt="" />
                    </div>
                    <div
                      class="img-item"
                      @click="handleDownload(item.axv_video)"
                    >
                      <img :src="download" alt="" />
                    </div>
                  </div>
                  <div>
                    <div class="img-item" @click="handleDelete(item)">
                      <img :src="deleteImg" alt="" />
                    </div>
                    <div
                      class="img-item"
                      @click="handleEnter(item.axv_id, item.create_user_id)"
                    >
                      <img :src="enter" alt="" />
                    </div>
                  </div>
                </div>
                <div
                  v-else
                  class="modal absolute left-0px top-0px h-full w-full flex items-center justify-center rounded-12px"
                >
                  <div class="img-item" @click="handleDownload(item.axv_video)">
                    <img :src="download" alt="" />
                  </div>

                  <div class="img-item" @click="handleDelete(item)">
                    <img :src="deleteImg" alt="" />
                  </div>
                  <div
                    class="img-item"
                    @click="handleEnter(item.axv_id, item.create_user_id)"
                  >
                    <img :src="enter" alt="" />
                  </div>
                </div>
              </div>
              <div class="mb-20px mt-10px">
                {{ item.axv_name }}
              </div>
              <div class="time flex justify-between">
                <span> {{ getTime(item.create_dateline) }}</span>
                <span>{{ item.body_num ? item.body_num : "0" }}人协作</span>
              </div>
            </div>
          </div>

          <div class="flex justify-end px-80px pb-30px">
            <el-pagination
              v-model:current-page="form_query.page"
              v-model:page-size="form_query.limit"
              layout="total, prev, pager, next, jumper"
              :total="total"
              @current-change="handleCurrentChange"
            />
          </div>
        </el-scrollbar>
      </div>
    </div>
    <div class="w-1/4 pl-20px pr-33px">
      <div class="h-648px">
        <!-- 最近查看 -->
        <div class="flex items-center justify-between">
          <h3 class="pageTitle active mt-9px">最近查看</h3>
        </div>

        <div class="mt-12px 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 v-else view-class="h-780px">
            <div class="grid grid-cols-1 gap-8 rounded-12px px-20px py-30px">
              <div
                v-for="(item, index) in lookData"
                :key="index"
                class="rounded-12px"
              >
                <div class="imgDiv relative h-200px rounded-12px">
                  <div
                    class="roundRadius rounded_left absolute right-0 h-32px w-66px text-center text-15px leading-32px"
                    :class="
                      item.axv_status === '1'
                        ? 'bg-hex-efefef text-hex-6f767e'
                        : 'bg-hex-b5e4ca text-hex-1a1d1f'
                    "
                  >
                    {{ item.axv_status === "1" ? "已结束" : "进行中" }}
                  </div>
                  <img
                    :src="item.axv_img"
                    alt=""
                    class="h-full w-full rounded-12px"
                  />
                  <div
                    class="modal absolute left-0px top-0px h-full w-full flex items-center justify-center rounded-12px"
                  >
                    <div>
                      <div
                        class="img-item"
                        @click="handleDownload(item.axv_video)"
                      >
                        <img :src="download" alt="" />
                      </div>
                    </div>
                    <div>
                      <div
                        class="img-item"
                        @click="
                          handleEnter(item.axv_id, item.axv_create_user_id)
                        "
                      >
                        <img :src="enter" alt="" />
                      </div>
                    </div>
                  </div>
                </div>
                <div class="mb-20px mt-10px">
                  {{ item.axv_name }}
                </div>
                <div class="time flex justify-between">
                  <span> {{ getTime(item.create_dateline) }}</span>
                  <span>{{ item.body_num ? item.body_num : "0" }}人协作</span>
                </div>
              </div>
            </div>
          </el-scrollbar>
        </div>
      </div>
    </div>
    <el-dialog
      v-model="dialogVisible"
      class="_"
      :title="title"
      width="400px"
      destroy-on-close
      :show-close="showClose"
      :close-on-click-modal="false"
    >
      <el-form
        ref="dialogFormRef"
        label-position="top"
        :model="dialogForm"
        class="demo-ruleForm"
        :rules="rules"
      >
        <el-form-item label="封面上传">
          <common-upload
            v-model="dialogForm.axv_img"
            tip="建议上传小于55KB的jpg,png格式图片"
          />
        </el-form-item>
        <el-form-item label="视频上传" prop="axv_video">
          <common-upload
            v-model="dialogForm.axv_video"
            tip="建议上传小于512M的MP4 H264格式的视频"
            type="video"
            accept=".mp4"
          />
        </el-form-item>
        <el-form-item label="视频名称" prop="axv_name">
          <el-input v-model="dialogForm.axv_name" />
        </el-form-item>
        <el-form-item label="协作人账号" prop="axv_shr_json">
          <div class="xzrzh-input relative">
            <div
              v-for="(js, index) in isCheckedTeacher"
              :key="index"
              class="checkedEach"
            >
              <span>{{ js.user_realname }} {{ js.user_name }}</span>
              <img
                class="ml-8px h-12px w-12px cursor-pointer"
                src="/images/close.png"
                alt=""
                @click="deleteJs(js)"
              />
            </div>
            <img
              class="size-24px absolute right-0 top-0 cursor-pointer"
              :src="ArrowDownBold"
              @click="showTeacher = !showTeacher"
            />
          </div>

          <div class="checkdiv mt-5px" v-show="showTeacher">
            <div
              class="relative w-210px h-40px bg-hex-f7f7f7 mx-8px  mt-10px rounded-4px "
            >
              <img
                class="size-24px absolute left-15px top-13px cursor-pointer  z-100"
                :src="search"
                @click="initUserList(false)"
              />
              <el-input v-model="searchKey" class="size-16px pl-35px" placeholder="搜索..." clearable  @change="initUserList(false)"/>
            </div>
            <div class="teacherListDiv">
              <el-checkbox-group
                v-if="userList.length > 0"
                v-model="checkList"
                class="grid grid-cols-2 h-full px-5px py-17px"
              >
                <el-checkbox
                  v-for="t in userList"
                  :key="t"
                  :label="t.user_id"
                  class="check-box mb-10px"
                  @change="isCheckUser($event, t)"
                >
                  {{ t.realname }}{{ t.username }}
                </el-checkbox>
              </el-checkbox-group>

              <div v-else class="pt-30px text-center">
                <img :src="empty" alt="" class="m-auto mb-10px h-80px w-80px" />
                <div>暂无数据</div>
              </div>
            </div>
          </div>
        </el-form-item>
      </el-form>
      <el-button
        class="mt-30px h-48px w-full"
        type="primary"
        @click="handleSubmit(dialogFormRef)"
      >
        确认
      </el-button>
    </el-dialog>
  </div>
</template>

<route lang="json">
  {
    "meta":{
      "title":"视频审核",
      "img":"/images/spsh.png",
      "hidden":true,
      "sort": 6
    }
  }
</route>

<style lang="scss" scoped>
@use "~/styles/page.scss";
@use "~/styles/checkbox.scss";
@use "~/styles/dialog.scss";
.roundRadius {
  border-radius: 0px 12px 0px 12px;
}
:deep {
  .el-input__wrapper {
    background: #f7f7f7;
    box-shadow: none;
  }
}
.imgDiv {
  .modal {
    opacity: 0;
    background: rgba($color: #111315, $alpha: 0.8);
    transition: all linear 0.2s;
    .img-item {
      width: 36px;
      height: 36px;
      background: #fff;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      margin: 20px 10px;
    }
  }
  &:hover {
    .modal {
      opacity: 1;
    }
  }
}
.time {
  font-size: 14px;
  color: #6f767e;
}
:deep() {
  .el-pagination {
    li.is-active {
      color: green;
    }
    li:hover {
      color: rgba($color: green, $alpha: 0.8);
    }
    .el-input__wrapper {
      background: #f7f7f7;
      box-shadow: none;
    }
  }
}
.xzrzh-input {
  width: 100%;
  min-height: 40px;
  background-color: #f9f9f9;
  border-radius: 6px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  padding: 10px;
  box-sizing: border-box;

  .checkedEach {
    height: 24px;
    display: flex;
    align-items: center;
    margin: 2.5px 8px 2.5px 0;
    border-radius: 3px;
    padding: 0 5px;
    background-color: rgba(#cceabb, 0.3);
    color: #000000;
  }
}

.checkdiv {
  width: 100%;
  height: 240px;
  background: #ffffff;
  border-radius: 12px;
  box-shadow: 0px 1px 8px 0px rgba(0, 0, 0, 0.09);
  border: 1px solid #e4e6e8;
}

.teacherListDiv {
  overflow-x: hidden;
  overflow-y: scroll;
  height: 180px;
}
/*滚动条样式*/
.teacherListDiv::-webkit-scrollbar {
  width: 3px;
  height: 58px;
}

/* 上下滚动的滚动条颜色 */
.teacherListDiv::-webkit-scrollbar-thumb {
  border-radius: 10px;
  -webkit-box-shadow: inset 0 0 5px #cceabb;
  background: #cceabb;
}

/* 滚动条的整体背景颜色 */
.teacherListDiv::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 5px white;
  border-radius: 0;
  background: white;
}
::v-deep .el-checkbox__input.is-checked + .el-checkbox__label {
  color: #000000;
}
::v-deep .el-checkbox__label {
  overflow: hidden;
  -o-text-overflow: ellipsis;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.check-box {
  margin-right: 5px;

  ::v-deep {
    height: auto;

    .el-checkbox__inner {
      width: 20px;
      height: 20px;
      background: white;
      border: 2px solid #c3c6c9;
      border-radius: 6px;
    }
    .is-checked .el-checkbox__inner {
      background: #fdcb9e;
      border-color: #fdcb9e;
      &::after {
        width: 4px;
        height: 10px;
        left: 6px;
        top: 0px;
        border-width: 2px;
      }
    }
  }
}
</style>
