<template>
  <div v-loading="loading">
    <div class="search flex justify-between bg-white rounded-md">
      <el-form :inline="true" class="demo-form-inline" size="default">
        <el-form-item>
          <el-select
            v-model="form_query.tx_zylx"
            placeholder="全部资源类型"
            class="w-40"
            clearable
            filterable
            @change="initData"
          >
            <el-option
              v-for="item in resource_type"
              :key="item.v"
              :label="item.n"
              :value="item.n"
            ></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div>
        <el-button type="primary" @click="initData"> 查询 </el-button>
      </div>
    </div>
    <div class="bg-white rounded-md mt-4 px-23px py-16px">
      <div class="flex justify-between pb-4 btn">
        <div>
          <el-button type="primary" @click="handleAdd">新增</el-button>
          <el-button type="primary" @click="exportAll">导出</el-button>
          <import-button url="/txwx/xkzy" @success="initData">
            <template #text>批量导入</template>
          </import-button>
          <el-button
            type="danger"
            @click="handleMulDelete"
            :disabled="multipleSelection.length == 0"
            >删除</el-button
          >
        </div>
        <div class="flex content-center">
          <el-input
            v-model="form_query.keyword"
            class="w-40 mx-2"
            size="small"
            placeholder="请输搜索关键词"
            :suffix-icon="Search"
            clearable
          />
          <el-button type="primary" @click="initData">搜索</el-button>
        </div>
      </div>
      <el-table :data="tableData" @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="55" />
        <el-table-column
          type="index"
          label="编号"
          width="100"
        ></el-table-column>
        <el-table-column
          prop="tx_mc"
          label="名称"
        
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column
          prop="tx_zylx"
          label="资源类型"
          width="150"
        ></el-table-column>
        <el-table-column
          prop="tx_zygs"
          label="资源格式"
          width="150"
        ></el-table-column>
        <el-table-column
          prop="tx_zyjsxm"
          label="资源教师姓名 "
          width="auto"
        ></el-table-column>
        <el-table-column prop="tx_lll" label="资源查看数"   width="200"></el-table-column>
        <el-table-column prop="tx_xzl" label="资源下载量"   width="200"></el-table-column>
        <el-table-column label="操作" width="245">
          <template #default="scope">
            <el-button type="text" @click="handleDetail(scope.row)"
              >详情 |</el-button
            >
            <el-button type="text" @click="handleEdit(scope.row)"
              >编辑 |</el-button
            >
            <el-button type="text" @click="handleRemove(scope.row.tx_id)"
              >删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- <div class="flex justify-end my-10">
        <el-pagination v-model:current-page="form_query.page" v-model:page-size="form_query.limit" layout="total,sizes, prev, pager, next, jumper" :total="total" :background="true" :prev-icon="PrevIcon" :next-icon="NextIcon" @current-change="initData" :hide-on-single-page="false" />
      </div> -->
      <div class="flex justify-end my-10">
        <el-pagination
          v-model:current-page="form_query.page"
          v-model:page-size="form_query.limit"
          :background="true"
          layout="total,sizes, prev, pager, next, jumper"
          :total="total"
          @current-change="initData"
          :hide-on-single-page="false"
        />
      </div>
    </div>
  </div>
</template>
<script setup>
import { Search } from "@element-plus/icons-vue";
import { useRouter } from "vue-router";
import { user } from "@/store/index";
import { xkzy_list, xkzy_del, sjzd_list } from "./api";

const router = useRouter();
const loading = ref(false);
let resource_type = $ref([]);

let total = $ref(10);

let tableData = $ref([]);

let form_query = $ref({
  page: 1,
  limit: 6,
  keyword: "",
  tx_zylx: "",
});
function handleSizeChange(val) {
  form_query.limit = val;
  form_query.page = 1;
  initData();
}
function initData() {
  const data = {
    ...form_query,
  };
  xkzy_list(data).then((res) => {
    if (res.code == "1") {
      tableData = res.data.page_data;
      total = res.data.total_rows * 1;
    }
  });
}
initData();
function zylxData() {
  const data = {
    cs_code: "TXWXZYLX",
  };
  sjzd_list(data).then((res) => {
    if (res.code == "1") {
      resource_type = res.data.option;
    }
  });
}
zylxData();
let multipleSelection = $ref([]);
let multipleSelection_file = $ref([]);
let handleSelectionChange = (val) => {
  multipleSelection = [];
  multipleSelection_file = [];
  val.forEach((i) => {
    multipleSelection.push(i.tx_id);
    multipleSelection_file.push(i.tx_file);
  });
};
//导出
function exportAll() {
  // let arr = [];
  // multiSelection.map((item) => {
  //   arr.push(item.tmk_id);
  // });
  // let obj = {
  //   limit: "99999",
  //   tx_id: arr.join(","),
  //   tx_file:""
  // };
  // download("/txwx/xkzy/download", obj);
  let ids = multipleSelection.join(",");
  let files = multipleSelection_file.join(",");
  let data = {
    tx_id: ids,
    tx_file: files,
  };
  request({
    url: "/txwx/xkzy/download",
    data,
  }).then((res) => {
    if (res.code == "1") {
      let link =
        window.GLOBAL_CONFIG.api +
        "txwx/xkzy/index?api=xls&page=1&limit=10000&token=" +
        user.value.token +
        "&tx_id=" +
        ids;
      console.log(link);
      window.open(link, "_blank");
    }
  });
}
function handleAdd() {
  router.push({ name: "xkzy_add" });
}
function handleDetail(item) {
  router.push({
    name: "xkzy_detail",
    params: {
      id: item.tx_id,
    },
  });
}
let ruleForm = $ref({});
// 编辑
function handleEdit(item) {
  router.push({
    name: "xkzy_edit",
    params: {
      id: item.tx_id,
    },
  });
}

// 批量删除
function handleMulDelete() {
  ElMessageBox.confirm("确认删除这些数据?", "", {
    confirmButtonText: "确认",
    cancelButtonText: "取消",
    type: "warning",
  }).then(() => {
    let data = { tx_id: multipleSelection };
    xkzy_del(data).then((res) => {
      loading.value = false;
      if (res.code == 1) {
        ElMessage({
          message: "删除成功",
          type: "success",
        });
        initData();
      } else {
        ElMessage({
          message: res.msg,
          type: "error",
        });
      }
    });
  });
}
// 单个删除
function handleRemove(id) {
  ElMessageBox.confirm("是否确定删除当前数据？", "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then(() => {
      let data = { tx_id: id };
      xkzy_del(data).then((res) => {
        loading.value = false;
        if (res.code == 1) {
          ElMessage({
            message: "删除成功",
            type: "success",
          });
          initData();
        } else {
          ElMessage({
            message: res.msg,
            type: "error",
          });
        }
      });
    })
    .catch(() => {});
}
</script>
<style lang="scss" scoped>
.search {
  height: 72px;
  line-height: 85px;
  padding: 0 29px;
}
.btn {
  border-bottom: 1px solid #e3e3e3;
}
</style>