<script setup lang='ts'>
import { Search } from '@element-plus/icons-vue'
import { useRouter, RouteLocationRaw } from 'vue-router'
import { Grade, Subject, Status } from '~/store/info'
import user from '~/store/user'
import tabContainer from './container.vue'


const router = useRouter()
function routerPush(_route: RouteLocationRaw) {
  router.push(_route)
}

// const tableData = ref([])
// const total = ref(0)

const queryForm = reactive({
  dc_grade_id: '',
  dc_subject_id: '',
  dc_check: '',
  dc_keyword: '',
  page: 1,
})

// watch(queryForm, () => {
//   doQuery()
// }, { deep: true, immediate: true })

// function doQuery() {
//   request({
//     url: '/dyaw/ctfx/index',
//     data: {
//       ...queryForm,
//       sm_id: user.sm_info.sm_id,
//       create_user_id: user.user_id
//     }
//   }).then(res => {
//     if (res.code === "1") {
//       tableData.value = res.data.page_data
//       total.value = parseInt(res.data.total_rows)
//     }
//   })
// }

// function doDelete() {
//   request({
//     url: '/dyaw/ctfx/delete',
//     data: {
//       dc_id: multipleSelection.value.map(item => item.dc_id)
//     }
//   }).then(
//     res => {
//       if (res.code === "1") {
//         ElMessage.success('删除成功')
//         doQuery()
//       }
//     }
//   )
// }


// TODO: 临时处理
function translateString(str: string) {
  return str
}
function onClickLeft() {
  history.back()
}
function onClickRight() {
  routerPush({ name: 'teacher_indey_create' })
}

function getGradeAndSubject({ grade, subject }: { grade: string, subject: string }) {
  console.log(grade, subject)
  queryForm.dc_grade_id = grade
  queryForm.dc_subject_id = subject
}

</script>

<template>
  <tab-container>
  <template #nav>
    <van-nav-bar title="错题分析" left-text="返回" right-text="新建" left-arrow @click-left="onClickLeft"
      @click-right="onClickRight" />
  </template>

  <div class="flex justify-between items-center sticky top-90px z-100 bg-light-50">
    <van-search v-model="queryForm.dc_keyword" placeholder="请输入搜索关键词" class="flex-auto" background="transparent" />
    <span class="pr-10px">
      <multi-tree-select @confirm="getGradeAndSubject"></multi-tree-select>
    </span>
  </div>

  <remote-list url="/dyaw/ctfx/index" :d="{
    ...queryForm,
    sm_id: user.sm_info.sm_id,
  }" class="mt-2 flex-none">
      <template #default="{ row: d }">
        <van-cell>
          <div class="cursor-pointer rounded shadow-dark-100 px-4 py-2 shadow-md drop-shadow-md h-110px space-y-2"
            @click="routerPush({ name: 'teacher_indey_detail', params: { id: d.dc_id } })">
            <div class="flex justify-between">
              <div class="flex space-x-2">
                <van-tag type="primary">{{ d.dc_keyword }}</van-tag>
                <div class="text-xl whitespace-nowrap overflow-ellipsis overflow-hidden max-w-160px">{{ d.dc_title }}
                </div>
              </div>
              <div :class="d.dc_check === '1' ? 'text-green-500' : d.dc_check === '2' ? 'text-red-500' : 'text-blue-500'">
                {{ Status[d.dc_check] }}</div>
            </div>
            <div class="flex space-x-6 text-gray-500">
              <div>{{ d.dc_grade_name }}</div>
              <div>{{ d.dc_subject_name }}</div>
            </div>

            <div class="text-left text-sm text-gray-500 whitespace-nowrap overflow-ellipsis overflow-hidden">{{
              translateString(d.dc_content) }}</div>
          </div>
        </van-cell>

      </template>
    </remote-list>

  </tab-container>
  <!-- <tab-container class="w-full h-full flex flex-col">
              <div class="flex justify-between items-center">
                <div class="flex space-x-2">
                  <el-select clearable size="large" placeholder="年级" v-model="queryForm.dc_grade_id">
                    <el-option v-for="({ grade_id, grade_name }) in Grade" :key="grade_id" :label="grade_name" :value="grade_id" />
                  </el-select>
                  <el-select clearable size="large" placeholder="科目" v-model="queryForm.dc_subject_id">
                    <el-option v-for="({ subject_id, subject_name }) in Subject" :key="subject_id" :label="subject_name"
                      :value="subject_id" />
                  </el-select>
                  <el-select clearable size="large" placeholder="状态" v-model="queryForm.dc_check">
                    <el-option v-for="(k) in Object.keys(Status)" :key="k" :label="Status[k]" :value="k" />
                  </el-select>
                  <el-input size="large" placeholder="关键字搜索" class="max-w-240px" :suffix-icon="Search"
                    v-model="queryForm.dc_keyword"></el-input>
                  <el-button size="large" type="success" @click="routerPush({ name: 'teacher_indey_create' })">新建</el-button>
                  <el-button size="large" type="danger" @click="doDelete">删除</el-button>
                </div>
              </div>

              <div class="flex-auto flex-col flex mt-4 justify-between">
                <el-table ref="multipleTableRef" :data="tableData" style="width: 100%" @selection-change="handleSelectionChange">
                  <el-table-column type="selection" width="55" />
                  <el-table-column property="dc_title" label="标题" width="auto" show-overflow-tooltip />
                  <el-table-column property="dc_grade_name" label="年级" width="120" />
                  <el-table-column property="dc_subject_name" label="科目" width="120" />
                  <el-table-column property="dc_keyword" label="关键词" width="160" />
                  <el-table-column property="create_user_realname" label="上传教师" width="120" />
                  <el-table-column property="create_dateline" label="上传时间" width="180">
                    <template #default="{ row }">
                      <span>{{ formatTime(row.create_dateline) }}</span>
                    </template>
                  </el-table-column>
                  <el-table-column property="name" label="状态" width="120">
                    <template #default="{ row }">
                      <span :class="row.dc_check === '1' ? 'text-green-500' : row.dc_check === '2' ? 'text-red-500' : 'text-blue-500'">{{ Status[row.dc_check] }}</span>
                    </template>
                  </el-table-column>
                  <el-table-column fixed="right" label="操作" width="120">
                    <template #default="{ row }">
                      <el-button link type="primary" size="small"
                        @click="routerPush({ name: 'teacher_indey_detail', params: { id: row.dc_id } })">查看</el-button>
                      <el-button link type="primary" size="small" :disabled="row.dc_check !== '0'"
                        @click="routerPush({ name: 'teacher_indey_edit', params: { id: row.dc_id } })">编辑</el-button>
                    </template>
                  </el-table-column>
                </el-table>
                <div class="flex justify-end mt-6">
                  <el-pagination v-model:current-page="queryForm.page" background layout="prev, pager, next"
                    :total="total"></el-pagination>
                </div>

              </div>
            </tab-container> -->
</template>


<!-- <style scoped lang="scss">
.tab_selected {
  color: #007DFF;

  &::after {
    content: '-';
    color: transparent;
    position: absolute;
    left: -5px;
    right: -5px;
    bottom: -4px;
    height: 15px;
    background: rgba(0, 125, 255, 0.30);
    border-radius: 8px;
  }
}
</style> -->
