<script setup lang='ts'>
import { showConfirmDialog, showFailToast, showSuccessToast } from 'vant';
import { RouteLocationRaw, useRouter } from 'vue-router';
import { 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)
//     }
//   })
// }
const ListRef = ref()
function doDelete(item: any) {
  showConfirmDialog({
    title: '提示',
    message:
      '确定要删除吗？',
  })
    .then(() => {
      request({
        url: '/dyaw/ctfx/delete',
        data: {
          dc_id: item.dc_id
        }
      }).then(
        res => {
          if (res.code === "1") {
            showSuccessToast('删除成功')
            ListRef.value?.refresh()
          } else {
            showFailToast('删除失败，请稍后再试')
          }
        }
      )
    })
    .catch(() => {
      showFailToast('已取消')
    })
}


// 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 ref="ListRef" url="/dyaw/ctfx/index" :d="{
      ...queryForm,
      sm_id: user.sm_info.sm_id,
    }" class="mt-2 flex-none px-4">
      <template #default="{ row: d }">

        <van-swipe-cell>

          <div class="mb-4 cursor-pointer rounded shadow-light-900 px-4 py-2 shadow drop-shadow 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>


          <template #right>
            <div class="h-full flex ml-4px">
              <div square type="primary" text="编辑" v-if="d.dc_check === '0'||d.dc_check === '2'"
                class="h-full w-100px flex items-center justify-center text-2xl text-light-50 bg-blue-500"
                @click="routerPush({ name: 'teacher_indey_edit', params: { id: d.dc_id } })">
                <i:ep:edit />
              </div>
              <div square type="danger" text="删除"
                class="h-full w-100px flex items-center justify-center text-2xl text-light-50 bg-red-500"
                @click="doDelete(d)">
                <i:ep:delete />
              </div>

            </div>
          </template>
        </van-swipe-cell>


      </template>
    </remote-list>

  </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> -->
