<template>
  <div class="contentBox">
    <el-card class="card" shadow="hover">
      <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch">
        <el-form-item :label="proxy.$t('maintenance.deviceName')" prop="deviceName">
          <el-input v-model="queryParams.deviceName" :placeholder="proxy.$t('maintenance.deviceName')" clearable />
        </el-form-item>
        <el-form-item :label="proxy.$t('maintenance.deviceCode')" prop="deviceCode">
          <el-input v-model="queryParams.deviceCode" :placeholder="proxy.$t('maintenance.deviceCode')" clearable />
        </el-form-item>
        <el-form-item :label="proxy.$t('maintenance.maintenanceType')" prop="maintenanceType">
          <el-select v-model="queryParams.maintenanceType" :placeholder="proxy.$t('maintenance.maintenanceType')" clearable style="width:200px" >
            <el-option
                v-for="item in maintenanceTypeList"
                :key="item.dictValue"
                :label="item.dictLabel"
                :value="item.dictValue"
            />
          </el-select>
        </el-form-item>
        <el-form-item :label="proxy.$t('maintenance.maintenanceDate')" prop="maintenanceDate">
          <el-date-picker
              v-model="queryParams.maintenanceDate"
              type="date"
              :disabled-date="disabledDate"
              format="YYYY-MM-DD"
              value-format="YYYY-MM-DD HH:mm:ss"
              :placeholder="proxy.$t('maintenance.maintenanceDate')"
          />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="Search"  @click="handleQuery">{{proxy.$t('button.search')}}</el-button>
          <el-button icon="Refresh"   @click="resetQuery">{{proxy.$t('button.reset')}}</el-button>
        </el-form-item>
      </el-form>

      <el-row :gutter="10" class="mb8">
        <el-col :span="1.5">
          <el-button
              type="primary"
              plain
              icon="Plus"
              @click="handleAdd"
          >{{proxy.$t('button.add')}}</el-button>
        </el-col>
      </el-row>

      <el-table v-loading="loading" :data="maintenanceList" border>
        <el-table-column :label="proxy.$t('common.sort')" type="index" width="60" align="center" />
        <el-table-column :label="proxy.$t('maintenance.deviceName')" align="center" prop="deviceName" />
        <el-table-column :label="proxy.$t('maintenance.deviceModel')" align="center" prop="deviceModel" />
        <el-table-column :label="proxy.$t('maintenance.deviceCode')" align="center" prop="deviceCode" />
        <el-table-column :label="proxy.$t('common.customerAffiliation')" align="center" prop="customerName" />
        <el-table-column :label="proxy.$t('maintenance.maintenanceType')" align="center" prop="maintenanceTypeName" />
        <el-table-column :label="proxy.$t('common.comments')" align="center" prop="comments" />
        <el-table-column :label="proxy.$t('maintenance.maintenanceUser')" align="center" prop="maintenanceUser" />
        <el-table-column :label="proxy.$t('maintenance.maintenanceDate')" align="center" prop="maintenanceDate" width="100" />
        <el-table-column :label="proxy.$t('maintenance.createTime')" align="center" prop="createTime" width="160" />
        <el-table-column :label="proxy.$t('common.action')" align="center" class-name="small-padding fixed-width">
          <template #default="scope">
            <el-button
                link
                type="primary"
                icon="Edit"
                @click="handleUpdate(scope.row,proxy.$t('button.edit'))"
            >{{ proxy.$t('button.edit') }}</el-button>
            <el-button
                link
                type="primary"
                icon="View"
                @click="handleUpdate(scope.row,proxy.$t('button.details'))"
            >{{proxy.$t('button.check')}}</el-button>
          </template>
        </el-table-column>
      </el-table>

     <div class="pagination">
       <el-pagination
           v-if="total > 0"
           v-model:current-page="queryParams.pageNum"
           v-model:page-size="queryParams.pageSize"
           :total="total"
           :page-sizes="[10, 20, 30, 50]"
           layout="total, sizes, prev, pager, next, jumper"
           @size-change="handleSizeChange"
           @current-change="handleCurrentChange"
       />
     </div>
    </el-card>
    <MaintenanceDialog
        ref="dialogRef"
        :title="dialog.title"
        :formData="dialog.form"
        :maintenance-type-list="maintenanceTypeList"
        v-model="dialog.visible"
        @success="handleSuccess"
    />
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import {getMaintainListApi,getMaintainTypeApi, getMaintainDetailApi} from '@/api/maintenance/index.js'
import {ElMessage} from "element-plus";
import MaintenanceDialog from "./common/MaintenanceDialog.vue";
import { useI18n } from 'vue-i18n';
const router = useRouter()
const { proxy } = getCurrentInstance();
const queryFormRef = ref()
const loading = ref(false)
const showSearch = ref(true)
const total = ref(0)
const maintenanceTypeList  = ref([])
const maintenanceList = ref([])
const { t } = useI18n();

const queryParams = reactive({
  pageNum: 1,
  pageSize: 10,
  deviceName: '',
  deviceCode: '',
  maintenanceType: '',
  maintenanceDate: ''
})
// 添加弹框相关的数据
const dialog = reactive({
  title: proxy.$t('button.add'),
  visible: false,
  form: {
    deviceCode: '',
    maintenanceType: '',
    maintenanceUser: '',
    maintenanceDate: '',
    comments: ''
  }
})
const dialogRef = ref()

const getList = async() => {
  loading.value = true
  // 这里应该调用后端API获取数据
  const res = await getMaintainListApi(queryParams);
  if(res.code === 200) {
    maintenanceList.value = res.rows || []
    total.value = res.total
  } else {
    ElMessage.error(res.msg)
  }
  loading.value = false
}

const handleQuery = () => {
  queryParams.pageNum = 1
  getList()
}

const resetQuery = () => {
  queryFormRef.value?.resetFields()
  handleQuery()
}
// 打开新增弹框
const handleAdd = () => {
  dialog.title = proxy.$t('button.add')
  dialog.visible = true
}

// 添加成功回调方法
const handleSuccess = () => {
  getList()
}
// 编辑
const handleUpdate = async(row,value) => {
  const res = await getMaintainDetailApi(row.id)
  if(res.code === 200) {
    dialog.title = value
    dialog.visible = true
    dialog.form.deviceCode = res.data.deviceCode
    dialog.form.maintenanceType = res.data.maintenanceType.toString()
    dialog.form.maintenanceUser = res.data.maintenanceUser
    dialog.form.maintenanceDate = res.data.maintenanceDate
    dialog.form.comments = res.data.comments
  } else {
    ElMessage.error(res.msg)
  }
}

const disabledDate = (time) => {
  return time.getTime() > Date.now()
}
const handleSizeChange = (val) => {
  queryParamsNoPage.pageSize = val
  getList()
}

const handleCurrentChange = (val) => {
  queryParamsNoPage.pageNum = val
  getList()
}
// 获取维保类型
const getMaintainType = async() => {
  const res = await getMaintainTypeApi()
  if(res.code === 200) {
    maintenanceTypeList.value = res.data || []
  } else {
    ElMessage.error(res.msg)
  }
}
onMounted(() => {
  getList()
  getMaintainType()
})
</script>

<style scoped lang="scss">
.contentBox {
  height:calc(100vh - 130px);
  margin:20px;
  .card {
    width:100%;
    height: 100%;
    overflow-y: scroll;
  }
}
.pagination {
  display: flex;
  justify-content: flex-end;
  margin-top: 20px;
}
.mb8 {
  margin-bottom: 8px;
}
</style>