<script setup lang="ts" name="QueryForm">
import { computed,ref,onMounted } from 'vue'
import type { FormInstance } from 'element-plus'
import PageWrapperSearch from '@/components/search/PageWrapperSearch.vue'
import {
  Download
} from '@element-plus/icons-vue'
import { color } from 'echarts'
import { query, checkEnc, queryMenuTreeAndUserlist, getOpeExcel} from '@/api/logSet/operationLog.js'
import timeRangeOptions from '@/constants/timeRangeOptions.js'


// const { approve_status, invoice_status} = useDict('approve_status', 'invoice_status')
const emit = defineEmits(['update:modelValue', 'query', 'reset','handleAdd'])
const invoice_status_filter = ref([])
const employeesList = ref([])
const props = defineProps<{
  modelValue: any
}>()



const queryForm = computed({
  get() {
    return props.modelValue
  },
  set(val: any) {
    console.log('query computed', val)
    emit('update:modelValue', val)
  }
})

// 搜索
function onSearch() {
  emit('query')
}

// 重置
function onReset(formRef: FormInstance) {
  queryForm.value.user = undefined
  queryForm.value.range = 0
  queryForm.value.module = undefined
  emit('reset', formRef)
}

function handleAdd() {
  emit('handleAdd')
}


const userOptions:any = ref([])

const moduleTreeOptions:any = ref([])

onMounted(async () => {
  try {
    const response = await queryMenuTreeAndUserlist({type: "global"})
    console.log('queryMenuTreeAndUserlist',response);

    userOptions.value = response.data.userlist.map(user => ({
      id: user.id,
      realname: user.realname
    }))
    moduleTreeOptions.value = response.data.menulist.map(menu => ({
      value: menu.id,
      label: menu.text,
      children: menu.children ? menu.children.map(child => ({
        value: child.id,
        label: child.text
      })) : null
    }))
  } catch (error) {
    console.error('Failed to fetch user and module data:', error)
  }


})
</script>

<template>
  <!-- el-form -->
  <page-wrapper-search
    :model="queryForm"
    :extraButtons="[
      {
        text: '导出',
        icon: Download,
        color: 'rgba(0, 189, 207, 1)',
        type: 'success',
        class: 'btn-fff',
        onClick: handleAdd
      }
    ]"
    @search="onSearch"
    @reset="onReset">
    <el-form-item label="用户" prop="user">
        <el-select
          v-model="queryForm.user"
          placeholder="请选择"
          clearable
          style="width: 200px"
        >
          <el-option
            v-for="item in userOptions"
            :key="item.id"
            :label="item.realname"
            :value="item.id"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="时间" prop="range">
        <el-select
          v-model="queryForm.range"
          placeholder="请选择时间"
          style="width: 200px"
        >
          <el-option
            v-for="item in timeRangeOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="操作模块" prop="module">
        <el-cascader
          v-model="queryForm.module"
          :options="moduleTreeOptions"
          :props="{
            checkStrictly: false,
            value: 'value',
            label: 'label',
            emitPath: false,
            leaf: true
          }"
          clearable
          style="width: 200px"
          placeholder="请选择"
        />
      </el-form-item>
  </page-wrapper-search>


</template>

<style scoped lang="scss">
:deep(.btn-fff){
  span{
    color: #fff;
  }
}
</style>
