<script setup>
import { Search as IconSearch } from '@element-plus/icons-vue';

const queryForm = reactive({
  keyword: '',
  page: 1,
  limit: 10,
})
let total = $ref(0)

function queryData() {
  request({
    url: '/yzy/zy_ssys/index',
    data: queryForm
  }).then(res => {
    if (res.code === '1') {
      // console.log('res :>> ', res);
      total = res.data.total_rows * 1
      data = res.data.page_data
    }
  })
}
queryData()

const active = $ref('cjzy')

let data = $ref([])

let dialogFormVisible = $ref(false)
let form = $ref({})


function handleClickAdd() {
  form = {}
  dialogFormVisible = true
}

function handleClickDel(row) {
  request({
    url: '/yzy/zy_ssys/delete',
    data: {
      yys_id: row.yys_id
    }
  }).then(res => {
    if (res.code === '1') {
      ElMessage.success('已删除')
      queryData()
    }
  })
}

function handleClickEdit(row) {
  form = {
    yys_id: row.yys_id,
    yys_name: row.yys_name,
  }
  dialogFormVisible = true
}

const router = useRouter()
function handleClickUpload(row) {
  router.push({
    name: 'personal_homework_ssys_cjzy_edit',
    params: { id: row.yys_id }
  })
}


let formRef = $ref()
function handleSubmit() {
  console.log('form :>> ', form);

  formRef.validate().then((res) => {
    if (res === true) {
      const submitData = {
        yys_name: form.yys_name,
      }
      request({
        url: `/yzy/zy_ssys/${form.yys_id ? 'edit' : 'add'}`,
        data: {
          yys_id: form.yys_id,
          yzy_zy_ssys: submitData
        }
      }).then(res => {
        if (res.code === '1') {
          ElMessage.success('创建作业成功')
          queryData()
          handleBack()
        }
      })
    }
  })
}


function handleBack() {
  dialogFormVisible = false
}

function routerTo(name) {
  router.replace({ name })
}
</script>

<template>
  <div class="w-full shadow bg-white rounded-md flex items-center px-36 py-4 mb-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 rounded-md flex items-center px-4 py-4 flex-col">
    <div class="flex items-center justify-between w-full mb-8">
      <div class="border p-1 rounded-md flex text-hex-666 ">
        <div @click="routerTo('personal_homework_ssys_cjzy')" class=" rounded-md py-1 px-2 cursor-pointer "
          :class="'text-black bg-hex-E8F3FA font-semibold'">创建作业</div>
        <div @click="routerTo('personal_homework_ssys_xszy')" class=" rounded-md py-1 px-2 cursor-pointer ">学生作业</div>
      </div>

      <div class="flex">
        <div class="w-100px h-40px flex_center rounded bg-hex-00A3FF text-white cursor-pointer" @click="handleClickAdd">
          创建作业
        </div>
        <div class="w-500px h-40px ml-8">
          <el-input class="w-500px h-full rounded-md" placeholder="搜索关键字" v-model="queryForm.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>

    <div class="divide-y divide-dashed w-full px-12">
      <template v-if="data.length">
        <div v-for="i in data" class="flex justify-between items-center h-50px">
          <div class="font-semibold text-sm ">{{i.yys_name}}</div>
          <div class="flex w-60 justify-between">
            <div class="text-hex-00A3FF border border-hex-00A3FF rounded-full text-xs py-1 px-5 cursor-pointer"
              @click="handleClickUpload(i)">上传</div>
            <div class="text-hex-00A3FF border border-hex-00A3FF rounded-full text-xs py-1 px-5 cursor-pointer"
              @click="handleClickDel(i)">删除</div>
            <div class="text-hex-00A3FF border border-hex-00A3FF rounded-full text-xs py-1 px-5 cursor-pointer"
              @click="handleClickEdit(i)">编辑</div>
          </div>
        </div>
      </template>

      <div v-else class="flex justify-center w-full">
        <el-empty description="暂无数据" />
      </div>
    </div>

    <div class="flex justify-end mb-8 w-full mt-8">
      <el-pagination background layout="prev, pager, next" :total="total" v-model:current-page="queryForm.page" />
    </div>
  </div>

  <el-dialog v-model="dialogFormVisible" width="500px">
    <el-form :model="form" ref="formRef" label-position="top" size="large">
      <el-form-item label="作业名称">
        <el-input v-model="form.yys_name" autocomplete="off" />
      </el-form-item>
      <div class="flex justify-around items-center text-sm mt-8">
        <div class="w-100px h-40px flex_center rounded bg-hex-00A3FF text-white cursor-pointer" @click="handleSubmit">
          提交</div>
        <div class="w-100px h-40px flex_center rounded bg-hex-F4F4F4 text-hex-41387F cursor-pointer"
          @click="handleBack">关闭</div>
      </div>
    </el-form>
  </el-dialog>

</template>
