<template>
  <div class="h-full">
    <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
            clearable
            @clear="initData"
            v-model="tjzn_id"
            placeholder="全部年级"
            class="w-40"
          >
            <el-option
              v-for="g in xdList"
              :key="g.tjzn_id"
              :label="g.tjzn_njmc"
              :value="g.tjzn_id"
            />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-select
            clearable
            @clear="initData"
            v-model="tjzx_id"
            placeholder="全部学科"
            class="w-40"
          >
            <el-option
              v-for="s in xkList"
              :key="s.tjzx_id"
              :label="s.tjzx_xkmc"
              :value="s.tjzx_id"
            />
          </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">
        <div>
          <el-button type="primary" @click="addData">新增</el-button>
          <el-button type="primary" @click="exportData">导出</el-button>
          <import-button url="/txwx/msgzs_ktyj" @success="initData">
            <template #text>批量导入</template>
          </import-button>
          <el-button
            type="danger"
            @click="deleteMul"
            :disabled="multipleSelection.length == 0"
            >删除</el-button
          >
        </div>
        <div class="flex content-center">
          <el-input
            v-model="keyword"
            class="w-40 mx-2"
            size="small"
            placeholder="请输搜索关键词"
            clearable @clear="initData"
            :suffix-icon="Search"
          />
          <el-button type="primary" @click="initData">查询</el-button>
        </div>
      </div>
      <el-divider />
      <div class="tableList">
        <div class="tableDiv my-20px overflow-auto">
          <el-table :data="tableData" @selection-change="handleSelectionChange">
            <el-table-column type="selection" width="55" />
            <el-table-column
              prop="tmk_id"
              label="排序"
              width="100"
            ></el-table-column>
            <el-table-column
              prop="tm_gzsmc"
              label="工作室名称"
              show-overflow-tooltip
            ></el-table-column>
            <el-table-column
              prop="tmk_kcm"
              label="课程名"
              show-overflow-tooltip
            ></el-table-column>
            <el-table-column prop="tjzn_name" label="年级"></el-table-column>
            <el-table-column prop="tjzx_name" label="学科"></el-table-column>
            <el-table-column prop="tmk_dzl" label="点赞量"></el-table-column>
            <el-table-column prop="tmk_fws" label="访问数"></el-table-column>
            <el-table-column label="操作" width="245">
              <template #default="scope">
                <el-button type="text" @click="detailData(scope.row)"
                  >详情</el-button
                ><el-divider direction="vertical" />
                <el-button type="text" @click="editData(scope.row)"
                  >编辑</el-button
                ><el-divider direction="vertical" />
                <el-button type="text" @click="deleteItem(scope.row)"
                  >删除</el-button
                >
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div class="flex justify-end">
          <el-pagination
            v-model:current-page="form_query.page"
            v-model:page-size="form_query.limit"
            :page-sizes="[6, 12, 18]"
            :pager-count="6"
            :small="true"
            layout="total,sizes, prev, pager, next, jumper"
            :total="total"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
import { useRouter, useRoute } from "vue-router";
import {
  Search,
  Delete,
  Download,
  Plus,
  ZoomIn,
} from "@element-plus/icons-vue";
import { ElMessage } from "element-plus";
const router = useRouter();
const route = useRoute();

let tableData = $ref([]);
let tjzn_id = $ref("");
let xdList = $ref([]);
let tjzx_id = $ref("");
let xkList = $ref([]);
request({
  url: "/txwx/jcxxgl_zyflgl_nj/index",
  data: {
    limit: "9999",
    page: "1",
  },
}).then((res) => {
  xdList = res.data.page_data;
});
// request({
//   url: "/common/sjzd/option",
//   data: {
//     cs_code: "XD",
//   },
// }).then((res) => {
//   xdList = res.data.option;
// });
request({
  url: "/txwx/jcxxgl_zyflgl_xk/index",
  data: {
    limit: "9999",
    page: "1",
  },
}).then((res) => {
  xkList = res.data.page_data;
});

let keyword = $ref("");
let multipleSelection = $ref([]);
let importVisible = $ref(false);
const handleSelectionChange = (val) => {
  multipleSelection = [];
  val.forEach((i) => {
    multipleSelection.push(i.tmk_id);
  });
};
function handleSizeChange(val) {
  form_query.limit = val;
  form_query.page = 1;
  initData();
}
function handleCurrentChange(val) {
  form_query.page = val;
  initData();
}
let total = $ref(10);
let form_query = $ref({
  page: 1,
  limit: 6,
});

initData();
function initData() {
  let data = {
    ...form_query,
    tjzn_id,
    tjzx_id,
    tm_id: route.query.id,
    keyword
  };
  request({
    url: "/txwx/msgzs_ktyj/index",
    data,
  }).then((res) => {
    if (res.code == "1") {
      tableData = res.data.page_data;
      total = Number(res.data.total_rows)
    }
  });
}

// 新增弹窗
function addData() {
  router.push({
    path: `/manage/msgzs/ktyj/ktyj_add`,
    query: {
      id: route.query.id,
    },
  });
}
// 编辑弹窗
function editData(val) {
  router.push({
    path: `/manage/msgzs/ktyj/ktyj_edit`,
    query: {
      id: route.query.id,
      tmk_id: val.tmk_id,
    },
  });
}
// 详情弹窗
function detailData(item) {
  router.push({
    path: "/manage/msgzs/ktyj/ktyj_detail",
    query: {
      id: route.query.id,
      tmk_id: item.tmk_id,
    },
  });
}
// 批量删除
function deleteMul() {
  ElMessageBox.confirm("确认删除这些数据?", "", {
    confirmButtonText: "确认",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then(() => {
      request({
        url: "/txwx/msgzs_ktyj/delete",
        data: {
          tmk_id: multipleSelection,
        },
      }).then((res) => {
        if (res.code == "1") {
          ElMessage({
            type: "success",
            message: res.msg,
          });
          initData();
        } else {
          ElMessage({
            type: "info",
            message: res.msg,
          });
        }
      });
    })
    .catch(() => {
      ElMessage({
        type: "info",
        message: "取消操作",
      });
    });
}
// 单个删除
function deleteItem(item) {
  ElMessageBox.confirm("确认删除?", "", {
    confirmButtonText: "确认",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then(() => {
      request({
        url: "/txwx/msgzs_ktyj/delete",
        data: {
          tmk_id: item.tmk_id,
        },
      }).then((res) => {
        if (res.code == "1") {
          ElMessage({
            type: "success",
            message: res.msg,
          });
          initData();
        } else {
          ElMessage({
            type: "info",
            message: res.msg,
          });
        }
      });
    })
    .catch(() => {
      ElMessage({
        type: "info",
        message: "取消操作",
      });
    });
}
// 导出
function exportData() {
  console.log(route.query.id);
  let data = {
    tm_id: route.query.id,
    tmk_id: multipleSelection
  }
  download('/txwx/msgzs_ktyj/index',data)
}
</script>

<style lang="scss" scoped>
@use "~/styles/table.scss";
@use "~/styles/pagination.scss";
.tableList {
  height: calc(100% - 32px);
  .tableDiv {
    height: calc(100% - 32px - 50px);
  }
}
.center {
  text-align: center;
}
.search {
  height: 72px;
  line-height: 85px;
  padding: 0 29px;
}
.el-input.rank {
  width: 200px;
}
.total {
  span {
    width: 80px;
  }
}
.member {
  margin: 5px 0;
  .el-input {
    width: 200px;
  }
}
.detail_dialog {
  width: 420px;
  margin: 0 auto;
  > div {
    width: 100%;
    margin: 15px 0;
    color: #000;
  }
  .span_label {
    text-align: right;
    display: inline-block;
    width: 90px;
  }
}
</style>