<script setup>
import { getFullUrl, getAvatarUrl } from "~/utils/helper";
import { Search as IconSearch } from "@element-plus/icons-vue";
import { ElMessage } from "element-plus";

let keyword = $ref("");
const queryForm = reactive({
  page: 1,
});

// 我创建的
let data = $ref([]);
let total = $ref(0);

let loading = $ref(false);
function queryData() {
  loading = true;
  request({
    url: "/sjsb/zjh_yshlw_xxtj/index",
    data: { ...queryForm,limit: '6', zjhx_sm_name: keyword },
  }).then((res) => {
    if (res.code === "1") {
      data = res.data.page_data;
      total = res.data.total_rows * 1;
      queryForm.page = res.data.page_now
      loading = false;
    }
  });
}
queryData();

watch(queryForm, () => {
  queryData();
});

let columnList = $ref([
  {
    prop: "zjhx_sm_name",
    label: "艺校学校名称",
    width:200
  },
  {
    prop: "jgtId_name",
    label: "教共体学校名称",
    width:200
  },
  {
    prop: "bindClassNum",
    label: "已结对班级数",
  },
  {
    prop: "subNum",
    label: "约课数",
    width: 100,
  },
  {
    prop: "partClassNum",
    label: "参与班级数",
  },
  {
    prop: "time",
    label: "考核周期",
    width: 160,
  },
  {
    prop: "centerNum",
    label: "主讲老师数",
  },
  {
    prop: "partNum",
    label: "助教教师数",
  },
  {
    prop: "teacherNum",
    label: "总教师数",
    width:100
  },
  {
    prop: "studentNum",
    label: "参与学生数",
  },
]);

const router = useRouter();
function handleClickAdd() {
  router.push({ name: "personal_sjsb_add" });
}
function handleClickEdit(i) {
  router.push({ name: "personal_sjsb_edit", params: { id: i.szyx_id } });
}
</script>

<template>
  <!-- <div class="w-full shadow bg-white rounded-md flex items-center px-36 py-4">
      <div class="text-lg text-hex-050026">名师优课</div>
      <el-divider direction="vertical" />
      <div class="text-sm">
        <span class="text-hex-949494">我的课程</span>
        <span class="text-hex-949494"> - 我创建的</span>
        <span> - 名师优课</span>
      </div>
    </div> -->

  <div
    class="w-full shadow bg-white flex flex-col rounded-md mt-4 bg-white"
  >
    <div class="flex justify-end px-8 py-2">
      <div
        class="w-100px h-50px flex_center rounded bg-hex-00A3FF text-white cursor-pointer"
        @click="handleClickAdd"
      >
        创建
      </div>
      <div class="w-500px h-50px ml-8">
        <el-input
          class="w-500px h-full rounded-md"
          placeholder="搜索关键字"
          v-model="keyword"
        >
          <template #suffix>
            <div
              class="w-26px h-26px bg-hex-00A3FF rounded-md flex justify-center items-center cursor-pointer"
              @click="queryData()"
            >
              <el-icon size="13" color="#fff">
                <IconSearch />
              </el-icon>
            </div>
          </template>
        </el-input>
      </div>
    </div>

    <div class="p-4">
      <div class="flex flex-wrap justify-between">
        <template v-if="data.length">
          <!-- @click="handleClickDetail(i)" -->
          <el-table :data="data" v-loading="loading" :height="280">
            <el-table-column
              v-for="(item, index) in columnList"
              :key="index"
              :prop="item.prop"
              :label="item.label"
              show-overflow-tooltip
              :width="item.width"
            >
              <template v-if="item.prop == 'time'" #default="{ row }">
                {{ row.startTime }}~{{ row.endTime }}
              </template>
            </el-table-column>
            <el-table-column label="操作">
              <template #default="{ row }">
                <el-button type="primary" link @click="handleClickEdit(row)">
                  编辑
                </el-button>
              </template>
            </el-table-column>
          </el-table>
        </template>
        <div v-else class="flex justify-center w-full">
          <el-empty description="暂无数据" />
        </div>
      </div>
      <div class="w-full flex justify-end my-10px">
        <el-pagination
          background
          layout="total, prev, pager, next"
          :total="total"
          :page-size="6"
          v-model:current-page="queryForm.page"
        />
      </div>
    </div>
  </div>
</template>
<style lang="scss" scoped>
:deep(){
    .el-table__inner-wrapper::before{
        border: none;
    }
}
    
</style>