<template>
  <div>
    <div class="searchContent bg-white p-4 pb-0 my-4 rounded-6px flex justify-between">
      <el-form ref="ruleFormRef" :inline="true" :model="searchForm" size="small">
        <el-form-item>
          <el-date-picker v-model="kssj" type="datetimerange" placeholder="开始时间" value-format="YYYY-MM-DD HH:mm:ss" @change="handleDateChange" />
        </el-form-item>
        <el-form-item>
          <remote-select placeholder="全部所属单位" v-model="searchForm.tz_ssdw_id" url="/school/main/index" :fields="['id', 'sm_name']"></remote-select>
        </el-form-item>
      </el-form>
      <el-button type="primary" @click="initData">查询</el-button>
    </div>
    <div class="bg-white rounded-md p-4 rounded-6px">
      <div class="operateDiv flex justify-between">
        <div>
          <el-button type="primary" @click="linkTo('zbkc_add')">新增</el-button>
          <el-button type="primary" @click="handleExport">导出</el-button>
          <import-button url="/txwx/zbkc" @success="initData">
            <template #text>批量导入</template>
          </import-button>
          <el-button type="danger" @click="handleDelete()">删除</el-button>
        </div>
        <div class="flex items-center space-x-4">
          <el-input v-model="searchForm.keyword" placeholder="请输入搜索的关键词" size="small" :suffix-icon="Search" />
          <el-button type="primary" @click="initData">搜索</el-button>
        </div>
      </div>
      <el-divider />
      <el-table :data="tableData" @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="55" />
        <el-table-column prop="tz_id" label="直播编号"></el-table-column>
        <el-table-column prop="tz_kcbt" label="课程标题" show-overflow-tooltip></el-table-column>
        <el-table-column prop="tz_zjrxm" label="主讲人"></el-table-column>
        <el-table-column prop="tz_ssdw_mc" label="所属单位"></el-table-column>
        <el-table-column prop="tjzx_name" label="学科"></el-table-column>
        <el-table-column prop="tjzn_name" label="年级"></el-table-column>
        <el-table-column prop="tjzx_cb" label="册别"></el-table-column>
        <el-table-column prop="tjzx_dy" label="单元"></el-table-column>
        <el-table-column prop="tjzx_zbkqsj" width="180" label="开始时间"></el-table-column>
        <el-table-column label="操作" width="200">
          <template #default="{ row }">
            <el-button type="primary" text @click="linkTo('zbkc_course', row.tz_id)">课时</el-button>
            <el-divider direction="vertical" />
            <el-button type="primary" text @click="linkTo('zbkc_detail', row.tz_id)">详情</el-button>
            <el-divider direction="vertical" />
            <el-button type="primary" text @click="linkTo('zbkc_edit', row.tz_id)">编辑</el-button>
            <el-divider direction="vertical" />
            <el-button type="primary" text @click="handleDelete(row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="flex justify-end my-10">
        <el-pagination v-model:current-page="currentPage" v-model:page-size="limit" :page-sizes="[10, 20, 50, 100]" :pager-count="5" :small="true" layout="total,sizes, prev, pager, next, jumper" :total="total" @size-change="handleSizeChange" @current-change="handleCurrentChange" />
      </div>
    </div>
  </div>
</template>
<script setup>
import { Search } from "@element-plus/icons-vue";
import { useRouter } from "vue-router";
const router = useRouter();

const searchForm = ref({});

watch(() => searchForm.value, () => {
  initData();
}, { deep: true })

const kssj = ref([]);
const handleDateChange = (val) => {
  if (val) {
    searchForm.value.tjzx_zbkqsj = val[0] + " - " + val[1];
  } else {
    searchForm.value.tjzx_zbkqsj = "";
  }
}

const total = ref(0)
const limit = ref(10)
const currentPage = ref(1);
const tableData = ref([]);
initData();
async function initData() {
  let obj = {
    page: currentPage.value,
    limit: limit.value,
  };
  let { code, data } = await request({ url: "/txwx/zbkc/index", data: Object.assign(obj, searchForm.value) });
  if (code == 1) {
    data.page_data.map(item => {
      item.zbkckqsj = item.tjzx_zbkqsj + "~" + item.tjzx_zbjssj;
    })
    tableData.value = data.page_data;
    total.value = Number(data.total_rows);
  }
}

function handleSizeChange(val) {
  limit.value = val;
  currentPage.value = 1;
  initData();
}

function handleCurrentChange(val) {
  currentPage.value = val;
  initData();
}


const multiSelection = ref([]);
const handleSelectionChange = (val) => {
  multiSelection.value = val;
}

const linkTo = (name, id, title) => {
  if (id == undefined) {
    router.push({ name });
  } else {
    router.push({ name, params: { id } });
  }
};


const handleDelete = (row) => {
  if (!row && multiSelection.value.length == 0) {
    ElMessage.error("请先选择数据！");
    return
  }
  ElMessageBox.confirm('确定要删除该数据吗？', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: "warning",
  })
    .then(async () => {
      let tz_id;
      if (row) {
        tz_id = row.tz_id;
      } else {
        tz_id = [];
        multiSelection.value.map(item => {
          tz_id.push(item.tz_id);
        })
      }
      let res = await request({ url: "/txwx/zbkc/delete", data: { tz_id: tz_id } });
      if (res.code == 1) {
        ElMessage.success("删除成功！");
        initData();
      }
    })
    .catch(() => { })
}

const handleExport = () => {
  let arr = [];
  multiSelection.value.map((item) => {
    arr.push(item.tz_id);
  });
  let obj = {
    limit: "99999",
    tz_id: arr.join(",")
  };
  download("/txwx/zbkc/index", obj);
}

</script>

<style lang="scss" scoped>
@use "~/styles/table.scss";
@use "~/styles/pagination.scss";
</style>