<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 "@element-plus/icons-vue";
import enter from "/images/enter.png";
import { getTime } from "~/utils/helper";
import { user } from "~/store/index";
import { downLoadFile } from "~/utils/download";
const router = useRouter();
// 初始化

const form_query = $ref({
  page: 1,
  limit: 6,
  keyword:"",
  as_zy_shzt_v2: "1",
  azz_ssnj_v2:"",
  azz_id_v2:"",
  check:"1"
});

const grade_list=$ref([
  {
    grade_id:'1',
    grade_name:"一年级"
  },
  {
    grade_id:'2',
    grade_name:"二年级"
  },{
    grade_id:'3',
    grade_name:"三年级"
  },{
    grade_id:'4',
    grade_name:"四年级"
  },{
    grade_id:'5',
    grade_name:"五年级"
  },{
    grade_id:'6',
    grade_name:"六年级"
  }
])
// 筛选change年级
let major_list=$ref([])
function handleChangeGrade(e) {
  form_query.azz_id_v2 = "";
  major_list = [];
  if (!e) return;
  request({
    url: `/aimooc/zyfl_zy_v2/index`,
    data: { ...form_query, azz_ssnj_v2: e },
  }).then((res) => {
    const { code, data } = res;
    if (code === "1") {
      major_list = data.page_data;
    }
  });
  initData()
}
let total = $ref(10);
let resultData = $ref([]);
async function initData() {
  const { code, data } = await request({
    url: "/aimooc/spjj/index",
    data: {
      ...form_query,

    },
  });
  if (code === "1") {
    resultData = [...data.page_data];
    total = Number(data.total_rows);
  }
}

function handleCurrentChange(val) {
  form_query.page = val;
  initData();
}

function handleEnter(as_id) {
  router.push({
    path: `zysh/detail`,
    query: {
      as_id: as_id,
    },
  });
}

//勾选
let multipleSelection = $ref([]);
let handleSelectionChange = (val) => {
  multipleSelection = [];
  val.forEach((i) => {
    multipleSelection.push(i.as_id);
  });
};

function handleMutiDelete() {
  if (multipleSelection.length == 0) {
    ElMessage.error("请先选择数据！");
    return;
  }
  ElMessageBox.confirm("确定要删除这些数据吗？", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then(async () => {
      const { code } = await request({
        url: "/aimooc/spjj/delete",
        data: { as_id: multipleSelection },
      });
      if (code === "1") {
        ElMessage.success("删除成功！");
        initData();
      }
    })
    .catch(() => {});
}
function handleMutiAudit() {
  if (multipleSelection.length == 0) {
    ElMessage.error("请先选择数据！");
    return;
  }
  request({
    url: "/aimooc/spjj/edit",
    data: {
      as_id: multipleSelection.join(","),
         aimooc_spjj: {
           as_zy_shzt_v2: "1",
           as_zy_shr_v2:user.value.user_realname
          },
     
    },
  })
    .then((res) => {
      if (res.code == "1") {
        ElMessage({
          message: res.msg,
          type: "success",
        });
        initData();
      }
    })
    .catch((err) => console.log(err));
}
function exportList() {
  let ids = multipleSelection.join(",");
  let link =
    window.GLOBAL_CONFIG.api +
    "/aimooc/spjj/index?api=xls&simple=1&page=1&limit=10000&check=1&token=" +
    user.value.token +
    "&as_id=" +
    ids+"&as_zy_shzt_v2="+status.value;
  console.log(link);
  window.open(link, "_blank");
}
const status = ref("1");
const statusData = ref([
   {
    name: "已通过",
    status: "1",
  },
  {
    name: "未通过",
    status: "2",
  },
  {
    name: "待审核",
    status: "3",
  },
 
]);
let tab = sessionStorage.getItem('tab');
if (tab) {
  changeStatus(tab)
} else {
  changeStatus('1')
}
function changeStatus(data) {
  status.value = data; 
  form_query.as_zy_shzt_v2=data;
  form_query.keyword="";
  form_query.azz_ssnj_v2='';
  form_query.azz_id_v2='';
  multipleSelection = [];
   sessionStorage.setItem("tab", status.value)
  initData();
}

function formatTime(val) {
  // 将整数转为毫秒数
  const timestamp = val * 1000;
  // 创建 Date 对象
  const date = new Date(timestamp);
  // 获取年、月、日、时、分、秒
  const year = date.getFullYear();
  const month = String(date.getMonth() + 1).padStart(2, '0'); // 月份从 0 开始，需要加 1
  const day = String(date.getDate()).padStart(2, '0');
  const hours = String(date.getHours()).padStart(2, '0');
  const minutes = String(date.getMinutes()).padStart(2, '0');
  const seconds = String(date.getSeconds()).padStart(2, '0');
  // 拼接成年月日时分秒格式
  const formattedDate = `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
  return formattedDate;
}
</script>

<template>
    <div class="h-full flex flex-col" >
 
<div class="my-15px flex items-center justify-between">
      <div class="flex space-x-6">
        <div v-for="(item, index) in statusData" :key="index" class="pageTitle" :class="status == item.status && 'active'" @click="changeStatus(item.status)">{{ item.name }}</div>
      </div>
      <div class="flex items-center">
          <el-button
            plain
            class="ml-33px h-42px w-130px"
            @click="handleMutiDelete"
          >
            删除
          </el-button>
          <el-button type="primary" class="h-42px w-130px" @click="exportList">
            导出
          </el-button>
          <el-button
            type="primary"
            class="h-42px w-130px"
            @click="handleMutiAudit"
            v-if="status=='3'"
          >
            批量通过
          </el-button>
          <el-input
            class="ml-20px h-42px rounded-8px"
            placeholder="搜索"
            :prefix-icon="Search"
            v-model="form_query.keyword"
            @change="initData"
            clearable
          />
        </div>
    </div>
      <div class="h-full rounded-12px bg-white">
        <div class="flex items-center justify-end pr-80px pt-20px">
          <div class="mr-10px">筛选</div>
                <el-select class="select mr-10px"
                  filterable
                  clearable
                   size="large"
                  v-model="form_query.azz_ssnj_v2"
                  placeholder="年级"
                  @change="handleChangeGrade"
                >
                  <el-option
                    v-for="(item, index) in grade_list"
                    :key="index"
                    :value="item.grade_id"
                    :label="item.grade_name"
                  ></el-option>
                </el-select>
            
                <el-select class="select"
                  filterable
                  clearable
                   size="large"
                  v-model="form_query.azz_id_v2"
                  placeholder="专业"
                  @change="initData"
                >
                  <el-option
                    v-for="(item, index) in major_list"
                    :key="index"
                    :value="item.azz_id_v2"
                    :label="item.azz_name_v2"
                  ></el-option>
                </el-select>
            
         
        </div>
        <el-table
          :data="resultData"
          class="w-full pb-30px" 
          @selection-change="handleSelectionChange"
        >
          <el-table-column type="selection" width="55" />
          <el-table-column
            prop="as_zy_sszh_v2"
            label="所属账号"
            show-overflow-tooltip
          />
          <el-table-column
            prop="as_zy_syxm_v2"
            label="姓名"
            show-overflow-tooltip
          />
          <el-table-column
            prop="as_title"
            label="课程名称"
            show-overflow-tooltip
          />
          <el-table-column
            prop="azz_ssnj_v2"
            label="年级"
            show-overflow-tooltip
         > 
          <template #default="scope">
            <span v-for="(item, i) in grade_list" :key="i">
              <span v-if="item.grade_id==scope.row.azz_ssnj_v2">{{item.grade_name}}</span>
            </span>
          </template>
           </el-table-column> 
          <el-table-column
            prop="azz_name_v2"
            label="所属专业"
            show-overflow-tooltip
         >
           </el-table-column> 
          <el-table-column
          v-if="status!='3'"
            prop="as_zy_shr_v2"
            label="审核人"
            show-overflow-tooltip
          />
           <el-table-column
            v-if="status!='3'"
            prop="modify_dateline"
            label="审核时间"
            show-overflow-tooltip
          > 
            <template #default="scope">{{ formatTime(scope.row.modify_dateline) }}</template>
          </el-table-column>
          <el-table-column
            prop="as_zy_zyscsj_v2"
            label="上传时间"
            show-overflow-tooltip
          />
          <el-table-column label="操作" width="180">
            <template #default="{ row }">
              <img
                class="cursor-pointer"
                :src="enter"
                @click="handleEnter(row.as_id)"
              />
            </template>
          </el-table-column>
        </el-table>
        <div class="flex justify-end px-80px pb-30px bg-white">
          <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>
      </div>
    </div>
</template>

<route lang="json">
  {
    "meta":{
      "title":"资源审核",
      "img":"/images/zysh.png",
      "sort": 7,
      "hiddenJs":true
    }
  }
</route>

<style lang="scss" scoped>
@use "~/styles/page.scss";
:deep {
 .el-table__body tr {
    height: 76px;
}

}
:deep() {
  .el-checkbox {
    height: auto;
    .el-checkbox__inner {
      width: 23px;
      height: 23px;
      background: #fff;
      border: 2px solid rgba(111,118,126,0.40);
      border-radius: 6px;
      &::after {
        width: 6px;
        height: 12px;
        left: 6px;
        top: 1px;
        border-width: 2px;
      }
    }
    .is-checked .el-checkbox__inner {
      background: #fdcb9e;
      border-color: #fdcb9e;
    }
  }
}
:deep {
  .el-input__wrapper {
    box-shadow: none;
  }

  .select {
    .el-input__wrapper {
      background: #f3f3f3;
    }
    &.el-select .el-input.is-focus .el-input__wrapper {
      box-shadow: none !important;
    }
  }

}
: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;
    }
  }
}
  .pageTitle{
    color: #3f3f44;
  }
</style>
