<template>
  <div>
    <div class="flex">
      <el-form :inline="true">
        <el-form-item prop="" label="活动名称: ">
          <el-input
            placeholder="请输入活动名称"
            v-model="searchData.keyword"
            clearable
            @clear="getListData"
          ></el-input>
        </el-form-item>
        <el-form-item prop="" label="时间">
          <el-date-picker
            v-model="searchData.time"
            value-format="YYYY-MM-DD HH:mm:ss"
            clearable
            type="datetime"
            @change="timeClear"
            placeholder="请选择时间"
          />
        </el-form-item>
      </el-form>
      <el-button type="primary" style="padding-bottom" @click="searchList"
        >搜索</el-button
      >
      <el-button type="warning" @click="clearData">清空</el-button>
    </div>
    <div class="flex justify-between items-center border-bottom">
      <div class="w-260px flex justify-between">
        <el-button @click="exportData" type="success">导出</el-button>
      </div>
      <div class="print flex items-center">
        <img
          class="w-20px h-20px cursor-pointer"
          src="/images/print.png"
          alt=""
        />
      </div>
    </div>
    <el-table
      :data="tableData"
      tooltip-effect="dark"
      v-loading="loading"
      @selection-change="handleSelectionChange"
      class="mt20"
      style="width: 100%"
    >
      <el-table-column type="selection" align="center" width="55">
      </el-table-column>
      <el-table-column label="作品名称">
        <template #default="scope">
          <div>
            {{ scope.row.yzcz_name }}
          </div>
        </template>
      </el-table-column>
      <el-table-column label="封面">
        <template #default="scope">
          <div class="w-94px h-37px">
            <img class="w-full" :src="scope.row.yzcz_img" alt="" />
          </div>
        </template>
      </el-table-column>
      <el-table-column label="简介" prop="yzcz_brief"></el-table-column>
      <el-table-column label="作者" prop="yzcz_author"></el-table-column>
      <el-table-column label="操作" align="center">
        <template #default="scope">
          <el-button type="text" @click="showData(scope.row)">查看</el-button>
        </template>
      </el-table-column>
    </el-table>
    <footer
      class="flex-item-none"
      style="display: flex; justify-content: flex-end; margin-top: 30px"
    >
      <el-pagination
        background
        layout="total, prev, pager, next"
        :total="total"
        @current-change="handleCurrentChange"
        :page-size="limit"
        :currentPage="currentPage"
      ></el-pagination>
    </footer>
    <el-dialog v-model="dialogVisible" title="查看" width="950px">
      <el-form
        disabled
        :model="form"
        :label-width="formLabelWidth"
        :rules="rules"
        ref="formRef"
      >
        <el-form-item label="活动封面图" prop="yzcz_img">
          <img class="w-140px" :src="form.yzcz_img" alt="" />
        </el-form-item>
        <el-form-item label="活动名称" prop="yz_name">
          <el-input v-model="form.yz_name" autocomplete="off" />
        </el-form-item>
        <el-form-item label="作品名称" prop="yzcz_name">
          <el-input v-model="form.yzcz_name" />
        </el-form-item>
        <el-form-item label="简介" prop="yzcz_brief">
          <el-input
            v-model="form.yzcz_brief"
            type="textarea"
            autocomplete="off"
          />
        </el-form-item>
        <el-form-item label="作者" prop="yzcz_author">
          <el-input v-model="form.yzcz_author" autocomplete="off" />
        </el-form-item>
        <div class="flex w-450px">
          <el-form-item label="年级" prop="grade">
            <el-select v-model="form.grade" placeholder="">
              <el-option
                v-for="g in gradeData"
                :key="g.grade_id"
                :label="g.grade_name"
                :value="grade_id"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="学科" label-width="130px" prop="subject">
            <el-select v-model="form.subject" placeholder="">
              <el-option
                v-for="s in subjectData"
                :key="s.subject_id"
                :label="s.subject_name"
                :value="subject_id"
              />
            </el-select>
          </el-form-item>
        </div>
        <el-form-item label="附件" prop="yzcz_fj">
          <file-upload-progress
            v-model:part="form.yzcz_fj"
            :limit="1"
            accept=".doc,.docx,.xls,.xlsx"
          >
            <template #default>
              <div
                class="
                  flex_center
                  w-65px
                  h-65px
                  border border-dashed border-hex-E4E6E8
                  bg-hex-F9F9F9
                  text-hex-9D9AB9
                "
              >
                <i-ant-design:folder-open-outlined class="text-xl" />
              </div>
            </template>
          </file-upload-progress>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>
<script setup>
import { hdzp_list, grade_list, subject_list } from "./api";
import { download } from "~/utils/request";
import { user } from '~/store/user';
import {useRoute} from 'vue-router'
import FileUpload from "~/components/FileUpload/index.vue";
const https = $ref(window.GLOBAL_CONFIG.api);
const route = useRoute();
let total = $ref(0);
const limit = $ref("10");
let currentPage = $ref("1");
let loading = $ref(false);
let tableData = $ref([]);
let hdData = {
  site: "tyyx",
  admin: "1",
  limit,
  sm_name: route.params.sm_name,
  yz_id: route.params.id,
  page: currentPage,
};
// 初始化
function getList() {
  loading = true;
  hdzp_list(hdData).then((res) => {
    if (res.code == 1) {
      tableData = res.data.page_data;
      total = parseInt(res.data.total_rows);
      loading = false;
    }
  });
}
getList();
// 年级
let gradeData = $ref([]);
function getGrade() {
  grade_list().then((res) => {
    gradeData = res.data.page_data;
  });
}
// 学科
let subjectData = $ref([]);
function getSubject() {
  subject_list().then((res) => {
    subjectData = res.data.page_data;
  });
}
// 搜索
let searchData = $ref({
  keyword: "",
  time: "",
});
function searchList() {
  const { keyword, time } = searchData;
  Object.assign(hdData, {
    keyword: keyword,
    create_dateline: time,
  });
  getList();
}
function timeClear(time) {
  if (!time) {
    time = "";
    searchList();
  }
}
function getListData() {
  searchList();
}
// 清空
function clearData() {
  searchData = {
    keyword: "",
    time: "",
  };
  searchList();
}
function handleAvatarSuccess(res) {
    console.log(res);
}

// 选中表格数据
let multipleSelection = $ref([]);
function handleSelectionChange(val) {
  multipleSelection = [];
  for (let i in val) {
    multipleSelection.push(val[i].yzcz_id);
  }
}
// 导出
function exportData() {
  const { keyword, time } = searchData;
  let data = {
    admin: "1",
    site: "tyyx",
    keyword,
    yzcz_id: multipleSelection,
    create_dateline: time,
  };
  download("/ysgc/ztyshd_cyxx_zp/index", data);
}
let form = $ref({
  yzcz_img: "",
  yz_name: "",
  yzcz_name: "",
  yzcz_brief: "",
  yzcz_author: "",
  grade: {},
  subject: {},
  yzcz_fj: "",
});
const rules = {
  yzcz_img: [{ required: true, message: "请选择作品封面", trigger: "submit" }],
  yz_name: [{ required: true, message: "请输入活动名称", trigger: "submit" }],
  yzcz_name: [{ required: true, message: "请输入作品名称", trigger: "submit" }],
  yzcz_brief: [
    { required: true, message: "请输入作品简介", trigger: "submit" },
  ],
  yzcz_author: [{ required: true, message: "请输入作者", trigger: "submit" }],
  grade: [{ required: true, message: "请选择年级", trigger: "submit" }],
  subject: [{ required: true, message: "请选择学科", trigger: "submit" }],
  yzcz_fj: [{ required: true, message: "请上传附件", trigger: "submit" }],
};
const formLabelWidth = "260px";
let dialogVisible = $ref(false);
let yz_id;
function showData(item) {
  Object.keys(form).forEach((key) => {
    form[key] = item[key];
  });
  yz_id = item.yz_id;
  form.yz_name = item.yz_name;
  getGrade();
  getSubject();
  dialogVisible = true;
}
let isRead = $ref(false);
let formRef = $ref();
</script>
<style scoped>
.el-button--text {
  margin-right: 15px;
}
.el-input,
.el-select {
  width: 160px;
}
.el-textarea {
  width: 450px;
}
</style>