<template>
  <div class="main-container">
    <el-card class="box-card !border-none" shadow="never">
      <div class="flex justify-between items-center">
        <span class="text-lg">{{ pageName }}</span>
        <el-button type="primary" @click="addEvent">
          {{ t('addStatHour') }}
        </el-button>
      </div>

      <el-card
        class="box-card !border-none my-[10px] table-search-wrap"
        shadow="never"
      >
        <el-form
          :inline="true"
          :model="statHourTable.searchParam"
          ref="searchFormRef"
        >
          <el-form-item :label="t('addon')" prop="addon">
            <el-input
              v-model="statHourTable.searchParam.addon"
              :placeholder="t('addonPlaceholder')"
            />
          </el-form-item>
          <el-form-item :label="t('field')" prop="field">
            <el-input
              v-model="statHourTable.searchParam.field"
              :placeholder="t('fieldPlaceholder')"
            />
          </el-form-item>
          <el-form-item :label="t('fieldTotal')" prop="field_total">
            <el-input
              v-model="statHourTable.searchParam.field_total"
              :placeholder="t('fieldTotalPlaceholder')"
            />
          </el-form-item>
          <el-form-item :label="t('year')" prop="year">
            <el-input
              v-model="statHourTable.searchParam.year"
              :placeholder="t('yearPlaceholder')"
            />
          </el-form-item>
          <el-form-item :label="t('month')" prop="month">
            <el-input
              v-model="statHourTable.searchParam.month"
              :placeholder="t('monthPlaceholder')"
            />
          </el-form-item>
          <el-form-item :label="t('day')" prop="day">
            <el-input
              v-model="statHourTable.searchParam.day"
              :placeholder="t('dayPlaceholder')"
            />
          </el-form-item>
          <el-form-item :label="t('startTime')" prop="start_time">
            <el-input
              v-model="statHourTable.searchParam.start_time"
              :placeholder="t('startTimePlaceholder')"
            />
          </el-form-item>
          <el-form-item :label="t('lastTime')" prop="last_time">
            <el-input
              v-model="statHourTable.searchParam.last_time"
              :placeholder="t('lastTimePlaceholder')"
            />
          </el-form-item>
          <el-form-item :label="t('hour0')" prop="hour_0">
            <el-input
              v-model="statHourTable.searchParam.hour_0"
              :placeholder="t('hour0Placeholder')"
            />
          </el-form-item>
          <el-form-item :label="t('hour1')" prop="hour_1">
            <el-input
              v-model="statHourTable.searchParam.hour_1"
              :placeholder="t('hour1Placeholder')"
            />
          </el-form-item>
          <el-form-item :label="t('hour2')" prop="hour_2">
            <el-input
              v-model="statHourTable.searchParam.hour_2"
              :placeholder="t('hour2Placeholder')"
            />
          </el-form-item>
          <el-form-item :label="t('hour3')" prop="hour_3">
            <el-input
              v-model="statHourTable.searchParam.hour_3"
              :placeholder="t('hour3Placeholder')"
            />
          </el-form-item>
          <el-form-item :label="t('hour4')" prop="hour_4">
            <el-input
              v-model="statHourTable.searchParam.hour_4"
              :placeholder="t('hour4Placeholder')"
            />
          </el-form-item>
          <el-form-item :label="t('hour5')" prop="hour_5">
            <el-input
              v-model="statHourTable.searchParam.hour_5"
              :placeholder="t('hour5Placeholder')"
            />
          </el-form-item>
          <el-form-item :label="t('hour6')" prop="hour_6">
            <el-input
              v-model="statHourTable.searchParam.hour_6"
              :placeholder="t('hour6Placeholder')"
            />
          </el-form-item>
          <el-form-item :label="t('hour7')" prop="hour_7">
            <el-input
              v-model="statHourTable.searchParam.hour_7"
              :placeholder="t('hour7Placeholder')"
            />
          </el-form-item>
          <el-form-item :label="t('hour8')" prop="hour_8">
            <el-input
              v-model="statHourTable.searchParam.hour_8"
              :placeholder="t('hour8Placeholder')"
            />
          </el-form-item>
          <el-form-item :label="t('hour9')" prop="hour_9">
            <el-input
              v-model="statHourTable.searchParam.hour_9"
              :placeholder="t('hour9Placeholder')"
            />
          </el-form-item>
          <el-form-item :label="t('hour10')" prop="hour_10">
            <el-input
              v-model="statHourTable.searchParam.hour_10"
              :placeholder="t('hour10Placeholder')"
            />
          </el-form-item>
          <el-form-item :label="t('hour11')" prop="hour_11">
            <el-input
              v-model="statHourTable.searchParam.hour_11"
              :placeholder="t('hour11Placeholder')"
            />
          </el-form-item>
          <el-form-item :label="t('hour12')" prop="hour_12">
            <el-input
              v-model="statHourTable.searchParam.hour_12"
              :placeholder="t('hour12Placeholder')"
            />
          </el-form-item>
          <el-form-item :label="t('hour13')" prop="hour_13">
            <el-input
              v-model="statHourTable.searchParam.hour_13"
              :placeholder="t('hour13Placeholder')"
            />
          </el-form-item>
          <el-form-item :label="t('hour14')" prop="hour_14">
            <el-input
              v-model="statHourTable.searchParam.hour_14"
              :placeholder="t('hour14Placeholder')"
            />
          </el-form-item>
          <el-form-item :label="t('hour15')" prop="hour_15">
            <el-input
              v-model="statHourTable.searchParam.hour_15"
              :placeholder="t('hour15Placeholder')"
            />
          </el-form-item>
          <el-form-item :label="t('hour16')" prop="hour_16">
            <el-input
              v-model="statHourTable.searchParam.hour_16"
              :placeholder="t('hour16Placeholder')"
            />
          </el-form-item>
          <el-form-item :label="t('hour17')" prop="hour_17">
            <el-input
              v-model="statHourTable.searchParam.hour_17"
              :placeholder="t('hour17Placeholder')"
            />
          </el-form-item>
          <el-form-item :label="t('hour18')" prop="hour_18">
            <el-input
              v-model="statHourTable.searchParam.hour_18"
              :placeholder="t('hour18Placeholder')"
            />
          </el-form-item>
          <el-form-item :label="t('hour19')" prop="hour_19">
            <el-input
              v-model="statHourTable.searchParam.hour_19"
              :placeholder="t('hour19Placeholder')"
            />
          </el-form-item>
          <el-form-item :label="t('hour20')" prop="hour_20">
            <el-input
              v-model="statHourTable.searchParam.hour_20"
              :placeholder="t('hour20Placeholder')"
            />
          </el-form-item>
          <el-form-item :label="t('hour21')" prop="hour_21">
            <el-input
              v-model="statHourTable.searchParam.hour_21"
              :placeholder="t('hour21Placeholder')"
            />
          </el-form-item>
          <el-form-item :label="t('hour22')" prop="hour_22">
            <el-input
              v-model="statHourTable.searchParam.hour_22"
              :placeholder="t('hour22Placeholder')"
            />
          </el-form-item>
          <el-form-item :label="t('hour23')" prop="hour_23">
            <el-input
              v-model="statHourTable.searchParam.hour_23"
              :placeholder="t('hour23Placeholder')"
            />
          </el-form-item>

          <el-form-item>
            <el-button type="primary" @click="loadStatHourList()">{{
              t('search')
            }}</el-button>
            <el-button @click="resetForm(searchFormRef)">{{
              t('reset')
            }}</el-button>
          </el-form-item>
        </el-form>
      </el-card>

      <div class="mt-[10px]">
        <el-table
          :data="statHourTable.data"
          size="large"
          v-loading="statHourTable.loading"
        >
          <template #empty>
            <span>{{ !statHourTable.loading ? t('emptyData') : '' }}</span>
          </template>
          <el-table-column
            prop="addon"
            :label="t('addon')"
            min-width="120"
            :show-overflow-tooltip="true"
          />

          <el-table-column
            prop="field"
            :label="t('field')"
            min-width="120"
            :show-overflow-tooltip="true"
          />

          <el-table-column
            prop="field_total"
            :label="t('fieldTotal')"
            min-width="120"
            :show-overflow-tooltip="true"
          />

          <el-table-column
            prop="year"
            :label="t('year')"
            min-width="120"
            :show-overflow-tooltip="true"
          />

          <el-table-column
            prop="month"
            :label="t('month')"
            min-width="120"
            :show-overflow-tooltip="true"
          />

          <el-table-column
            prop="day"
            :label="t('day')"
            min-width="120"
            :show-overflow-tooltip="true"
          />

          <el-table-column
            prop="start_time"
            :label="t('startTime')"
            min-width="120"
            :show-overflow-tooltip="true"
          />

          <el-table-column
            prop="last_time"
            :label="t('lastTime')"
            min-width="120"
            :show-overflow-tooltip="true"
          />

          <el-table-column
            prop="hour_0"
            :label="t('hour0')"
            min-width="120"
            :show-overflow-tooltip="true"
          />

          <el-table-column
            prop="hour_1"
            :label="t('hour1')"
            min-width="120"
            :show-overflow-tooltip="true"
          />

          <el-table-column
            prop="hour_2"
            :label="t('hour2')"
            min-width="120"
            :show-overflow-tooltip="true"
          />

          <el-table-column
            prop="hour_3"
            :label="t('hour3')"
            min-width="120"
            :show-overflow-tooltip="true"
          />

          <el-table-column
            prop="hour_4"
            :label="t('hour4')"
            min-width="120"
            :show-overflow-tooltip="true"
          />

          <el-table-column
            prop="hour_5"
            :label="t('hour5')"
            min-width="120"
            :show-overflow-tooltip="true"
          />

          <el-table-column
            prop="hour_6"
            :label="t('hour6')"
            min-width="120"
            :show-overflow-tooltip="true"
          />

          <el-table-column
            prop="hour_7"
            :label="t('hour7')"
            min-width="120"
            :show-overflow-tooltip="true"
          />

          <el-table-column
            prop="hour_8"
            :label="t('hour8')"
            min-width="120"
            :show-overflow-tooltip="true"
          />

          <el-table-column
            prop="hour_9"
            :label="t('hour9')"
            min-width="120"
            :show-overflow-tooltip="true"
          />

          <el-table-column
            prop="hour_10"
            :label="t('hour10')"
            min-width="120"
            :show-overflow-tooltip="true"
          />

          <el-table-column
            prop="hour_11"
            :label="t('hour11')"
            min-width="120"
            :show-overflow-tooltip="true"
          />

          <el-table-column
            prop="hour_12"
            :label="t('hour12')"
            min-width="120"
            :show-overflow-tooltip="true"
          />

          <el-table-column
            prop="hour_13"
            :label="t('hour13')"
            min-width="120"
            :show-overflow-tooltip="true"
          />

          <el-table-column
            prop="hour_14"
            :label="t('hour14')"
            min-width="120"
            :show-overflow-tooltip="true"
          />

          <el-table-column
            prop="hour_15"
            :label="t('hour15')"
            min-width="120"
            :show-overflow-tooltip="true"
          />

          <el-table-column
            prop="hour_16"
            :label="t('hour16')"
            min-width="120"
            :show-overflow-tooltip="true"
          />

          <el-table-column
            prop="hour_17"
            :label="t('hour17')"
            min-width="120"
            :show-overflow-tooltip="true"
          />

          <el-table-column
            prop="hour_18"
            :label="t('hour18')"
            min-width="120"
            :show-overflow-tooltip="true"
          />

          <el-table-column
            prop="hour_19"
            :label="t('hour19')"
            min-width="120"
            :show-overflow-tooltip="true"
          />

          <el-table-column
            prop="hour_20"
            :label="t('hour20')"
            min-width="120"
            :show-overflow-tooltip="true"
          />

          <el-table-column
            prop="hour_21"
            :label="t('hour21')"
            min-width="120"
            :show-overflow-tooltip="true"
          />

          <el-table-column
            prop="hour_22"
            :label="t('hour22')"
            min-width="120"
            :show-overflow-tooltip="true"
          />

          <el-table-column
            prop="hour_23"
            :label="t('hour23')"
            min-width="120"
            :show-overflow-tooltip="true"
          />

          <el-table-column
            :label="t('operation')"
            fixed="right"
            min-width="120"
          >
            <template #default="{ row }">
              <el-button type="primary" link @click="editEvent(row)">{{
                t('edit')
              }}</el-button>
              <el-button type="primary" link @click="deleteEvent(row.id)">{{
                t('delete')
              }}</el-button>
            </template>
          </el-table-column>
        </el-table>
        <div class="mt-[16px] flex justify-end">
          <el-pagination
            v-model:current-page="statHourTable.page"
            v-model:page-size="statHourTable.limit"
            layout="total, sizes, prev, pager, next, jumper"
            :total="statHourTable.total"
            @size-change="loadStatHourList()"
            @current-change="loadStatHourList"
          />
        </div>
      </div>

      <edit ref="editStatHourDialog" @complete="loadStatHourList" />
    </el-card>
  </div>
</template>

<script lang="ts" setup>
import { reactive, ref, watch } from 'vue'
import { t } from '@/lang'
import { useDictionary } from '@/app/api/dict'
import { getStatHourList, deleteStatHour } from '@/app/api/stat_hour'
import { img } from '@/utils/common'
import { ElMessageBox, FormInstance } from 'element-plus'
import Edit from '@/app/views/stat_hour/components/stat-hour-edit.vue'
import { useRoute } from 'vue-router'
const route = useRoute()
const pageName = route.meta.title

let statHourTable = reactive({
  page: 1,
  limit: 10,
  total: 0,
  loading: true,
  data: [],
  searchParam: {
    addon: '',
    field: '',
    field_total: '',
    year: '',
    month: '',
    day: '',
    start_time: '',
    last_time: '',
    hour_0: '',
    hour_1: '',
    hour_2: '',
    hour_3: '',
    hour_4: '',
    hour_5: '',
    hour_6: '',
    hour_7: '',
    hour_8: '',
    hour_9: '',
    hour_10: '',
    hour_11: '',
    hour_12: '',
    hour_13: '',
    hour_14: '',
    hour_15: '',
    hour_16: '',
    hour_17: '',
    hour_18: '',
    hour_19: '',
    hour_20: '',
    hour_21: '',
    hour_22: '',
    hour_23: '',
  },
})

const searchFormRef = ref<FormInstance>()

// 选中数据
const selectData = ref<any[]>([])

// 字典数据

/**
 * 获取小时统计列表
 */
const loadStatHourList = (page: number = 1) => {
  statHourTable.loading = true
  statHourTable.page = page

  getStatHourList({
    page: statHourTable.page,
    limit: statHourTable.limit,
    ...statHourTable.searchParam,
  })
    .then((res) => {
      statHourTable.loading = false
      statHourTable.data = res.data.data
      statHourTable.total = res.data.total
    })
    .catch(() => {
      statHourTable.loading = false
    })
}
loadStatHourList()

const editStatHourDialog: Record<string, any> | null = ref(null)

/**
 * 添加小时统计
 */
const addEvent = () => {
  editStatHourDialog.value.setFormData()
  editStatHourDialog.value.showDialog = true
}

/**
 * 编辑小时统计
 * @param data
 */
const editEvent = (data: any) => {
  editStatHourDialog.value.setFormData(data)
  editStatHourDialog.value.showDialog = true
}

/**
 * 删除小时统计
 */
const deleteEvent = (id: number) => {
  ElMessageBox.confirm(t('statHourDeleteTips'), t('warning'), {
    confirmButtonText: t('confirm'),
    cancelButtonText: t('cancel'),
    type: 'warning',
  }).then(() => {
    deleteStatHour(id)
      .then(() => {
        loadStatHourList()
      })
      .catch(() => {})
  })
}

const resetForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.resetFields()
  loadStatHourList()
}
</script>

<style lang="scss" scoped>
/* 多行超出隐藏 */
.multi-hidden {
  word-break: break-all;
  text-overflow: ellipsis;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
</style>
