<script setup lang="ts">
import { ElMessageBox } from 'element-plus'
import type { FormInstance, FormRules } from 'element-plus'
import { omit, pick } from 'lodash-es'
import info from './components/info.vue'
import PrevIcon from '@/components/EpPagination/PrevIcon.vue'
import NextIcon from '@/components/EpPagination/NextIcon.vue'

type IRow = any
let tableData = $ref<IRow[]>([])

let multipleSelection = $ref<IRow[]>([])
function handleSelectionChange(val: IRow[]) {
  multipleSelection = val
}

const keyword = ref('')
const form_query = reactive({
  page: 1,
  limit: 5,
})

let total = $ref(100)

function handleClickDelete(row: IRow) {
  ElMessageBox.confirm('是否删除该学校相关信息', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    center: true,
    customClass: '_',
    buttonSize: 'large',
  })
    .then(() => {})
    .catch(() => {})
}
let dialog_visible_detail = $ref(false)
let dialog_data_detail = $ref<IRow>({})
function handleClickDetail(row: IRow) {
  request({
    baseURL: window.GLOBAL_CONFIG.uc,
    url: '/school/main/detail',
    data: {
      sm_id: row.sm_id,
    },
  }).then((res) => {
    if (res.code === '1') {
      dialog_data_detail = res.data.one_info
      dialog_visible_detail = true
    }
  })
}

// const validateTel = (rule: any, value: any, callback: any) => {
//   const reg_ph = /^(0|86|17951)?(13[0-9]|15[012356789]|166|17[3678]|18[0-9]|14[57])[0-9]{8}$/
//   if(!value)
//     callback(new Error('请输入联系方式'));
//   else if (value && !reg_ph.test(value))
//     callback(new Error('请输入正确的联系方式'));
//   else
//     callback()
// }

let dialog_visible_add = $ref(false)
const formRef = $ref<FormInstance>()
let form_add = $ref<any>({})
const rules_add: FormRules = {
  sm_name: [
    { required: true, message: '请输入正确的学校名称', trigger: 'submit' },
  ],
  sm_address: [
    { required: true, message: '请输入正确的学校地址', trigger: 'submit' },
  ],
  sm_lxr_contact: [
    {
      required: true,
      message: '请输入正确的联系方式',
      trigger: ['blur', 'change'],
      pattern: /^[0-9-]+$/,
    },
  ],
  sm_email: [
    {
      required: true,
      type: 'email',
      message: '请输入正确的邮箱',
      trigger: ['blur', 'change'],
    },
  ],
}
function handleClickAdd() {
  dialog_visible_add = true
}
function handleClickEdit(row: IRow) {
  form_add = {
    sm_name: row.sm_name,
    sm_address: row.sm_address,
    sm_lxr_contact: row.sm_lxr_contact,
    sm_email: row.sm_email,
    sm_id: row.sm_id,
  }
  dialog_visible_add = true
}

function handleClickFormCancel() {
  dialog_visible_add = false
}
function handleClickFormSubmit() {
  formRef?.validate((valid) => {
    if (valid) {
      // log
      console.log('form :>> ', form_add)
      request({
        baseURL: window.GLOBAL_CONFIG.uc,
        url: '/school/main/save',
        data: {
          issubmit: 1,
          sm_id: form_add.sm_id,

          area_id1: 15,
          area_id2: 235,
          area_id3: 2615,
          school_main: { sm_name: form_add.sm_name },
          school_main_ext: omit(form_add, ['sm_name']),
        },
      }).then((res) => {
        if (res.code === '1') {
          ElMessage.success('提交成功')
          handleClickFormCancel()
          handleQuery()
        }
      })
    }
  })
}

function handleQuery() {
  return request({
    baseURL: window.GLOBAL_CONFIG.uc,
    url: '/school/main/index',
    data: {
      area_id: 2615,
      keyword: keyword.value,
      ...form_query,
    },
  }).then((res) => {
    // console.log('res :>> ', res.data)
    if (res.code === '1') {
      tableData = res.data.page_data
      total = res.data.total_rows * 1
    }
  })
}

handleQuery()
</script>

<template>
  <div class="card h-full">
    <div class="flex justify-between mt-5 mb-7">
      <div>
        <!-- <el-button class="_" type="primary">
                批量导入
              </el-button>
              <el-button class="_" type="primary" @click="handleClickAdd">
                新增
              </el-button> -->
      </div>
      <div class="flex">
        <input-search v-model="keyword" @search="handleQuery" />
        <!-- <el-button class="_" type="danger" class="ml-4">
                删除
              </el-button> -->
      </div>
    </div>

    <el-table
      :data="tableData"
      style="width: 100%"
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="55" />
      <el-table-column
        prop="sm_name"
        label="学校名称"
        show-overflow-tooltip
        width="220"
      />
      <el-table-column
        prop="sm_address"
        label="学校地址"
        show-overflow-tooltip
        width="auto"
      />
      <el-table-column
        prop="sm_lxr_contact"
        label="联系电话"
        show-overflow-tooltip
        width="180"
      />
      <el-table-column
        prop="sm_email"
        label="邮箱"
        show-overflow-tooltip
        width="180"
      />
      <el-table-column label="操作" width="150">
        <template #default="{ row }">
          <div class="flex items-center space-x-4">
            <img
              class="cursor-pointer"
              src="/images/edit.png"
              @click="handleClickEdit(row)"
            >
            <!-- <img class="cursor-pointer" src="/images/delete.png" @click="handleClickDelete(row)"> -->
            <el-dropdown>
              <div class="cursor-pointer w-24px">
                <img class="m-auto" src="/images/dots.png">
              </div>
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item @click="handleClickDetail(row)">
                    查看详情
                  </el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
          </div>
        </template>
      </el-table-column>
    </el-table>

    <div class="flex_center mt-6">
      <el-pagination
        v-model:current-page="form_query.page"
        v-model:page-size="form_query.limit"
        layout="total, prev, pager, next, jumper"
        :total="total"
        :prev-icon="PrevIcon"
        :next-icon="NextIcon"
        @current-change="handleQuery"
      />
    </div>
  </div>

  <el-dialog
    v-model="dialog_visible_add"
    class="_"
    width="680"
    title="新增/编辑"
    align-center
  >
    <el-form
      ref="formRef"
      :model="form_add"
      :rules="rules_add"
      label-position="top"
    >
      <div class="flex justify-evenly">
        <el-form-item label="学校名称" class="w-240px" prop="sm_name">
          <el-input v-model="form_add.sm_name" maxlength="30" show-word-limit />
        </el-form-item>
        <el-form-item label="学校地址" class="w-240px" prop="sm_address">
          <el-input
            v-model="form_add.sm_address"
            maxlength="30"
            show-word-limit
          />
        </el-form-item>
      </div>
      <div class="flex justify-evenly">
        <el-form-item label="联系方式" class="w-240px" prop="sm_lxr_contact">
          <el-input v-model="form_add.sm_lxr_contact" />
        </el-form-item>
        <el-form-item label="邮箱" class="w-240px" prop="sm_email">
          <el-input v-model="form_add.sm_email" />
        </el-form-item>
      </div>
    </el-form>
    <template #footer>
      <span class="flex_center space-x-12">
        <el-button size="large" @click="handleClickFormCancel">取消</el-button>
        <el-button size="large" type="primary" @click="handleClickFormSubmit">
          确定
        </el-button>
      </span>
    </template>
  </el-dialog>

  <el-dialog
    v-model="dialog_visible_detail"
    class="_"
    width="1125"
    title="学校详情"
    align-center
  >
    <info class="px-6" :d="dialog_data_detail" />
  </el-dialog>
</template>

<style lang="scss" scoped>
@use "~/styles/input-search.scss";
@use "~/styles/button.scss";
@use "~/styles/table.scss";
@use "~/styles/message-box.scss";
@use "~/styles/dialog.scss";
@use "~/styles/pagination.scss";
</style>
