<!--
 * @Descripttion: (月报表/cam_workers)
 * @Author: (admin)
 * @Date: (2025-08-19)
-->
<template>
  <div>
    <el-form :model="queryParams" label-position="right" inline ref="queryRef" v-show="showSearch" @submit.prevent>
      <el-form-item label="人员名称" prop="workerName">
        <el-input v-model="queryParams.workerName" placeholder="请输入人员名称" />
      </el-form-item>
      <el-form-item label="时间">
        <el-date-picker style="width: 200px" v-model="queryParams.yearMonth" type="month" value-format="YYYY-MM" placeholder="请选择月份">
        </el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button icon="search" type="primary" @click="handleQuery">{{ $t('btn.search') }}</el-button>
        <el-button icon="refresh" @click="resetQuery">{{ $t('btn.reset') }}</el-button>
      </el-form-item>
    </el-form>
    <!-- 工具区域 -->
    <el-row :gutter="15" class="mb10">
      <el-col :span="1.5">
        <el-button type="warning" plain icon="download" @click="handleExport" v-hasPermi="['camworkers:export']">
          {{ $t('btn.export') }}
        </el-button>
        <el-button type="warning" plain icon="download" @click="downExport" v-hasPermi="['camworkers:export']"> 下载照片ZIP </el-button>
      </el-col>
      <right-toolbar v-model:showSearch="showSearch" @queryTable="getList" :columns="columns"></right-toolbar>
    </el-row>

    <el-table
      :data="dataList"
      v-loading="loading"
      ref="table"
      border
      header-cell-class-name="el-table-header-cell"
      highlight-current-row
      @sort-change="sortChange">
      <el-table-column prop="yearMonth" label="时间" align="center" v-if="columns.showColumn('yearMonth')" />
      <el-table-column prop="deptName" label="部门名称" align="center" :show-overflow-tooltip="true" v-if="columns.showColumn('deptName')" />
      <el-table-column prop="workerName" label="人员名称" align="center" :show-overflow-tooltip="true" v-if="columns.showColumn('workerName')" />
      <el-table-column prop="workDays" label="工作天数" align="center" v-if="columns.showColumn('workDays')" />
    </el-table>

    <el-dialog :title="title" :lock-scroll="false" v-model="open">
      <el-form ref="formRef" :model="form" :rules="rules" label-width="100px">
        <el-row :gutter="20">
          <el-col :lg="12">
            <el-form-item label="时间" prop="yearMonth">
              <el-input v-model="form.yearMonth" placeholder="请输入时间" />
            </el-form-item>
          </el-col>

          <el-col :lg="12">
            <el-form-item label="部门名称" prop="deptName">
              <el-input v-model="form.deptName" placeholder="请输入部门名称" />
            </el-form-item>
          </el-col>

          <el-col :lg="12">
            <el-form-item label="人员名称" prop="workerName">
              <el-input v-model="form.workerName" placeholder="请输入人员名称" />
            </el-form-item>
          </el-col>

          <el-col :lg="12">
            <el-form-item label="工作天数" prop="workDays">
              <el-input v-model.number="form.workDays" placeholder="请输入工作天数" />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <template #footer v-if="opertype != 3">
        <el-button text @click="cancel">{{ $t('btn.cancel') }}</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup name="camworkers">
import { listCamWorkers, getCamWorkers } from '@/api/business/camworkers.js'
const { proxy } = getCurrentInstance()
const ids = ref([])
const loading = ref(false)
const showSearch = ref(true)
const queryParams = reactive({
  workerName: undefined,
  yearMonth: undefined
})
const columns = ref([
  { visible: true, align: 'center', type: '', prop: 'yearMonth', label: '时间' },
  { visible: true, align: 'center', type: '', prop: 'deptName', label: '部门名称', showOverflowTooltip: true },
  { visible: true, align: 'center', type: '', prop: 'workerName', label: '人员名称', showOverflowTooltip: true },
  { visible: true, align: 'center', type: '', prop: 'workDays', label: '工作天数' }
])
const total = ref(0)
const dataList = ref([])
const queryRef = ref()

var dictParams = []

function getList() {
  loading.value = true
  listCamWorkers(queryParams).then((res) => {
    const { code, data } = res
    if (code == 200) {
      dataList.value = data
      loading.value = false
    }
  })
}

// 查询
function handleQuery() {
  getList()
}

// 重置查询操作
function resetQuery() {
  proxy.resetForm('queryRef')
  handleQuery()
}
// 自定义排序
function sortChange(column) {
  var sort = undefined
  var sortType = undefined

  if (column.prop != null && column.order != null) {
    sort = column.prop
    sortType = column.order
  }
  queryParams.sort = sort
  queryParams.sortType = sortType
  handleQuery()
}

/*************** form操作 ***************/
const formRef = ref()
const title = ref('')
// 操作类型 1、add 2、edit 3、view
const opertype = ref(0)
const open = ref(false)
const state = reactive({
  single: true,
  multiple: true,
  submitLoading: false,
  form: {},
  rules: {
    yearMonth: [{ required: true, message: '时间不能为空', trigger: 'blur' }],
    deptName: [{ required: true, message: '部门名称不能为空', trigger: 'blur' }],
    workerName: [{ required: true, message: '人员名称不能为空', trigger: 'blur' }],
    workDays: [{ required: true, message: '工作天数不能为空', trigger: 'blur', type: 'number' }]
  },
  options: {}
})

const { form, rules, options, single, multiple } = toRefs(state)

// 关闭dialog
function cancel() {
  open.value = false
  reset()
}

// 重置表单
function reset() {
  form.value = {
    yearMonth: null,
    deptName: null,
    workerName: null,
    workDays: null
  }
  proxy.resetForm('formRef')
}

// 添加&修改 表单提交
function submitForm() {
  proxy.$refs['formRef'].validate((valid) => {
    if (valid) {
      state.submitLoading = true

      if (form.value.id != undefined && opertype.value === 2) {
      } else {
      }
    }
  })
}

// 导出按钮操作
function handleExport() {
  proxy
    .$confirm('是否确认导出月报表数据项?', '警告', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    })
    .then(async () => {
      await proxy.downFile('/business/CamWorkers/export', { ...queryParams })
    })
}
function downExport() {
  proxy
    .$confirm('是否确认导出月报表数据项?', '警告', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    })
    .then(async () => {
      await proxy.downFile('/getDownloadZip?yearMoney=' + queryParams.yearMonth, {})
    })
}
handleQuery()
</script>
