<script setup>
import form_data from './config.js'
import AddAndEdit from './components/AddAndEdit.vue'
import DetailInfo from './components/DetailInfo.vue'

import {
  area_list,
  base_list,
  grade_class,
  school_list,
  user_list,
} from './components/api'
import { user } from '@/store/index'
import PrevIcon from '@/components/EpPagination/PrevIcon.vue'
import NextIcon from '@/components/EpPagination/NextIcon.vue'
const formData = ref(form_data)
const ruleFormRef = ref(null)
const ruleForm = ref({
  area_id4: '',
  sm_id: '',
  grade_id: '',
  cm_id: '',
})

const total = ref(0)
const limit = ref(10)
const currentPage = ref(1)
const tableData = ref([])
const searchKey = ref('')
const initSearchKey = (val) => {
  searchKey.value = val
  initData()
}
function initData() {
  const obj = {
    keyword: searchKey.value,
    limit: limit.value,
    page: currentPage.value,
    user_role_id: '76',
    area_id4: ruleForm.value.area_id4,
    sm_id: ruleForm.value.sm_id,
    schoolid: ruleForm.value.sm_id,
    gradeid: ruleForm.value.grade_id,
    classid: ruleForm.value.cm_id,
  }
  user_list(obj).then((res) => {
    if (res.code == 1)
      tableData.value = []
    res.data.page_data.map((item) => {
      const obj = {
        user_id: item.user_id,
        user_realname: item.user_realname,
        user_name: item.user_name,
        ue_user_phone: item.user_ext.ue_user_phone,
        sm_name: item.sm_info.sm_name,
        grade_name: item.user_ext.grade_name,
        jc_name: item.user_ext.jc_name,
      }
      tableData.value.push(obj)
    })
    total.value = parseInt(res.data.total_rows)
  })
}
function handleCurrentChange(val) {
  currentPage.value = val
  initData()
}

initData()

const handleReset = (formEl) => {
  if (!formEl)
    return
  formEl.resetFields()
  initData()
}
const schoolData = ref([])
const areaData = ref([])
const gradeData = ref([])
const classData = ref([])
initKeyData()
async function initKeyData() {
  const res = await school_list({ area_id: '2615', limit: '100' })
  if (res.code == 1)
    schoolData.value = res.data.page_data

  const res1 = await area_list({ pid: '2615' })
  if (res1.code == 1)
    areaData.value = res1.data.area
}

async function handleKeyChange(key) {
  if (key == 'sm_id') {
    ruleForm.value.grade_id = ''
    ruleForm.value.cm_id = ''
    gradeData.value = [];
    classData.value = [];

    // 年级学科
    const res2 = await base_list({ sm_id: ruleForm.value.sm_id, token: '' })
    const arr1 = []
    if (res2.code == 1)
      for (const key in res2.data) arr1.push(res2.data[key])

    if(!ruleForm.value.sm_id) {
      return
    }

    // 年级班级
    const res3 = await grade_class({ sm_id: ruleForm.value.sm_id })
    let arr2 = []
    if (res3.code == 1)
      arr2 = [...res3.data]

    arr1.map((item) => {
      arr2.map((val) => {
        if (item.grade == val.grade) {
          const obj = {
            grade: item.grade,
            gradename: item.gradename,
            subjects: item.subjects,
            classes: val.classes,
          }
          gradeData.value.push(obj)
        }
      })
    })
  }
  else if (key == 'grade_id') {
    ruleForm.value.cm_id = '';
    classData.value = [];
    gradeData.value.map((item) => {
      if (ruleForm.value.grade_id == item.grade)
        classData.value = item.classes
    })
  }
}

const columnData = ref([
  {
    name: 'ID',
    key: 'user_id',
  },
  {
    name: '姓名',
    key: 'user_realname',
  },
  {
    name: '账号',
    key: 'user_name',
  },
  {
    name: '联系电话',
    key: 'ue_user_phone',
  },
  {
    name: '所属学校',
    key: 'sm_name',
  },
  {
    name: '年级',
    key: 'grade_name',
  },
  {
    name: '班级',
    key: 'jc_name',
  },
])
const form_query = reactive({
  page: 1,
  limit: 10,
})
const userId = ref('')
const dialogVisible = ref(false)
const dialogTitle = ref('')
const dialogType = ref('')
const handleAdd = () => {
  dialogVisible.value = true
  dialogTitle.value = '新增'
  dialogType.value = 1
}

const handleEdit = (val) => {
  dialogVisible.value = true
  dialogTitle.value = '编辑'
  dialogType.value = 1
  userId.value = val.user_id
}

const handleClose = (type) => {
  dialogVisible.value = false
  dialogTitle.value = ''
  dialogType.value = ''

  if (type == 1)
    initData()
}

let multipleSelection = $ref([])
const handleSelect = (val) => {
  multipleSelection = []
  val.forEach((i) => {
    multipleSelection.push(i.user_id)
  })
}

const handleExport = () => {
  const link = `${window.GLOBAL_CONFIG.uc}/user/main/index?user_role_id=76&api=xls&page=1&site=myxjyszptx&limit=10000&token=${user.value.token}&uid=${multipleSelection}`

  window.open(link, '_blank')
  console.log(link, 345)
}
const handleDetail = (val) => {
  dialogVisible.value = true
  dialogType.value = 2
  userId.value = val.user_id
  console.log(val, 1111)
}
</script>

<template>
  <div class="xsxxContent card h-full">
    <div class="searchDiv flex justify-between">
      <el-form ref="ruleFormRef" label-position="top" :model="ruleForm" :inline="true" label-width="100px">
        <el-form-item label="区域" prop="area_id4">
          <el-select v-model="ruleForm.area_id4" filterable clearable>
            <el-option v-for="(item, index) in areaData" :key="index" :label="item.name" :value="item.id" />
          </el-select>
        </el-form-item>
        <el-form-item label="学校" prop="sm_id">
          <el-select v-model="ruleForm.sm_id" filterable clearable @change="handleKeyChange('sm_id')">
            <el-option v-for="(item, index) in schoolData" :key="index" :label="item.sm_name" :value="item.sm_id" />
          </el-select>
        </el-form-item>
        <el-form-item label="年级" prop="grade_id">
          <el-select v-model="ruleForm.grade_id" clearable @change="handleKeyChange('grade_id')">
            <el-option v-for="(item, index) in gradeData" :key="index" :label="item.gradename" :value="item.grade" />
          </el-select>
        </el-form-item>
        <el-form-item label="班级" prop="cm_id">
          <el-select v-model="ruleForm.cm_id">
            <el-option v-for="(item, index) in classData" :key="index" :label="item.cm_name" :value="item.cm_id" />
          </el-select>
        </el-form-item>
      </el-form>
      <div>
        <el-button size="small" type="primary" @click="initData">
          查询
        </el-button>
        <br>
        <el-button size="small" type="primary" plain class="mt-10px" @click="handleReset(ruleFormRef)">
          重置
        </el-button>
      </div>
    </div>
    <div class="content">
      <div class="flex justify-between mt-20px mb-20px">
        <div>
          <!-- <el-button class="_" type="primary">
            批量导入
          </el-button> -->
          <!-- <el-button class="_" type="primary" @click="handleAdd">新增</el-button> -->
          <el-button class="_" type="primary" @click="handleExport">
            导出
          </el-button>
        </div>
        <div class="flex items-center space-x-4">
          <search-keys @init="initSearchKey" />
          <!-- <el-button class="_" type="danger">
            删除
          </el-button> -->
        </div>
      </div>

      <table-column :column-data="columnData" :table-data="tableData" :delete-btn="false" @select="handleSelect" @edit="handleEdit" @detail="handleDetail" />

      <div class="flex_center mt-6 pb-12">
        <el-pagination v-model:current-page="currentPage" v-model:page-size="limit" layout="total, prev, pager, next, jumper" :total="total" :prev-icon="PrevIcon" :next-icon="NextIcon" @current-change="handleCurrentChange" />
      </div>
    </div>
    <el-dialog v-model="dialogVisible" :title="dialogTitle" :width="dialogType == 1 ? '680px' : '1100px'" :class="dialogType == 1 ? '_' : 'detailDialog'" :close-on-click-modal="dialogType == 1 ? false : true" @close="handleClose">
      <AddAndEdit v-if="dialogType == 1" :data="formData" :user-id="userId" :school-data="schoolData" :grade-data="gradeData" :class-data="classData" @close="handleClose" />
      <DetailInfo v-if="dialogType == 2" :data="formData" :user-id="userId" />
    </el-dialog>
  </div>
</template>

<style lang="scss" scoped>
@use "~/styles/button.scss";
@use "~/styles/dialog.scss";
.searchDiv {
  border-bottom: 1px solid #ebf3ff;
  :deep(.el-form) {
    .el-form-item__label {
      font-size: 14px;
      color: #3f3f44;
      font-weight: 600;
      margin-bottom: 5px;
    }
    .el-form-item__content {
      .el-input,
      .el-input__wrapper {
        width: 100%;
        box-shadow: none;
        outline: none;
        border-radius: 8px;
      }
      .el-input {
        border: 1px solid #ebf3ff;
      }
    }
  }
  .el-button--small {
    height: 34px;
    padding: 6px 22px;
    border-radius: 10px;
    &.is-plain {
      background: none;
      color: #3f8cff;
    }
  }
}
:deep(.detailDialog) {
  border-radius: 16px;
}
</style>
