<!-- 配置周维护月保养 -->
<script lang="ts" setup name="ConfigWeekAndMonthDialog">
import type { FormInstance, FormRules } from 'element-plus'
import { ElMessage } from 'element-plus'
import { reactive, ref } from 'vue'
import SelectStaffDialog from '@/views/business/fieldTest/approve/dialog/selectStaffDialog.vue'
import { SCHEDULE } from '@/utils/scheduleDict'
import { submit } from '@/api/equipment/info/book'
import { batchConfigEquipmentWeekOrMonth, getEquipmentWeekOrMonthDetail } from '@/api/equipment/resume/week-month'
const emit = defineEmits(['onSuccess']) // 对外暴露的方法

const dialogVisible = ref(false) // 弹窗显示状态

const form = ref({
  openWeek: 1, // 是否配置周维护
  openMonth: 1, // 是否配置月保养
  staffNamesWeek: '', // 周维护责任人名字
  staffIdsWeek: '', // 周维护责任id
  staffNamesMonth: '', // 月保养责任人名字
  staffIdsMonth: '', // 月保养责任人id
  remindDateWeek: '1', // 提醒时间-周维护
  remindDateMonth: 1, // 提醒时间-月保养
  remindItemWeek: ['1', '2', '3', '4', '5', '6', '7'], // 默认提醒项目周维护
  remindItemMonth: ['1', '2', '3', '4', '5', '6', '7'], // 默认提醒项目月保养
})

const remindTimeList = [ // 提醒时间列表
  {
    value: '1',
    name: '周一',
  },
  {
    value: '2',
    name: '周二',
  },
  {
    value: '3',
    name: '周三',
  },
  {
    value: '4',
    name: '周四',
  },
  {
    value: '5',
    name: '周五',
  },
  {
    value: '6',
    name: '周六',
  },
  {
    value: '7',
    name: '周日',
  },
]

const remindItemList = [ // 提醒项目
  {
    value: '1',
    name: '外观检查',
  },
  {
    value: '2',
    name: '设备功能、性能检查',
  },
  {
    value: '3',
    name: '设备加电检查',
  },
  {
    value: '4',
    name: '设备油液检查',
  },
  {
    value: '5',
    name: '备附件和资料检查',
  },
  {
    value: '6',
    name: '软件检查、杀毒',
  },
  {
    value: '7',
    name: '校准因子',
  },
]

// 保存按钮加载状态
const btnLoading = ref(false)
const equipmentIds = ref<string[]>([])
// ---------------表单提交--------------------------------
// 表单对象
const dataFormRef = ref<FormInstance>()
// 校验规则
const rules = reactive<FormRules>({
  staffNamesWeek: [{ required: true, message: '责任人必填', trigger: ['blur', 'change'] }],
  staffNamesMonth: [{ required: true, message: '责任人必填', trigger: ['blur', 'change'] }],
  remindDateWeek: [{ required: true, message: '提醒时间必填', trigger: ['blur', 'change'] }],
  remindItemWeek: [{ required: true, message: '默认提醒项目必填', trigger: ['blur', 'change'] }],
  remindItemMonth: [{ required: true, message: '默认提醒项目必填', trigger: ['blur', 'change'] }],
  remindDateMonth: [{ required: true, message: '提醒时间必填', trigger: ['blur', 'change'] }],
})
/**
 * 初始化审批弹窗
 */
function initDialog(checkoutList: string[]) {
  equipmentIds.value = checkoutList
  dialogVisible.value = true
}
// 提交表单
function submitForm(formEl: FormInstance | undefined) {
  if (!formEl) { return }
  if (!form.value.openWeek && !form.value.openMonth) {
    ElMessage.warning('未配置不可提交')
    return
  }
  formEl.validate((valid) => {
    if (valid) {
      const tempParams = {
        equipmentId: '', // 设备台账id
        appearanceCheckMonth: form.value.remindItemMonth.includes('1') ? 1 : 0, // 提醒项目-外观检查(月)(传1/0)
        appearanceCheckWeek: form.value.remindItemWeek.includes('1') ? 1 : 0, // 提醒项目-外观检查(周)(传1/0)
        calibrationFactorMonth: form.value.remindItemMonth.includes('7') ? 1 : 0, //	提醒项目-校准因子(月)(传1/0)
        calibrationFactorWeek: form.value.remindItemWeek.includes('7') ? 1 : 0, // 提醒项目-校准因子(周)(传1/0)
        folderCheckMonth: form.value.remindItemMonth.includes('5') ? 1 : 0, //	提醒项目-备附件和资料检查(月)(传1/0)
        folderCheckWeek: form.value.remindItemWeek.includes('5') ? 1 : 0, //	提醒项目-备附件和资料检查(周)(传1/0)
        functionCheckMonth: form.value.remindItemMonth.includes('2') ? 1 : 0, //	提醒项目-设备功能、性能检查(月)(传1/0)
        functionCheckWeek: form.value.remindItemWeek.includes('2') ? 1 : 0, //	提醒项目-设备功能、性能检查(周)(传1/0)
        id: '', // 更新/删除使用参数
        oilCheckMonth: form.value.remindItemMonth.includes('4') ? 1 : 0, //	提醒项目-设备油液检查(月)(传1/0)
        oilCheckWeek: form.value.remindItemWeek.includes('4') ? 1 : 0, //	提醒项目-设备油液检查(周)(传1/0)
        openMonth: form.value.openMonth, //	是否开启月保养(传1/0)
        openWeek: form.value.openWeek, //	是否开启周维护(传1/0)
        powerCheckMonth: form.value.remindItemMonth.includes('3') ? 1 : 0, // 提醒项目-设备加电检查(月)(传1/0)
        powerCheckWeek: form.value.remindItemWeek.includes('3') ? 1 : 0, //	提醒项目-设备加电检查(周)(传1/0)
        remindDateMonth: form.value.remindItemMonth.includes('4') ? 1 : 0, // 提醒时间(每月x日,1-31的数字)(传1/0)
        remindDateWeek: form.value.remindDateWeek, //	提醒时间(多个逗号拼接,如1,2表示周一周二)
        softwareCheckMonth: form.value.remindItemMonth.includes('6') ? 1 : 0, //	提醒项目-软件检查、杀毒(月)(传1/0)
        softwareCheckWeek: form.value.remindItemWeek.includes('6') ? 1 : 0, // 提醒项目-软件检查、杀毒(周)(传1/0)
        staffIdsMonth: form.value.staffIdsMonth, // 责任人id(多个逗号拼接)
        staffIdsWeek: form.value.staffIdsWeek, //	责任人id(多个逗号拼接)
        staffNamesMonth: form.value.staffNamesMonth, // 责任人名字(多个逗号拼接)
        staffNamesWeek: form.value.staffNamesWeek, //	责任人名字(多个逗号拼接)
      }
      const params = equipmentIds.value.map((item) => {
        return {
          ...tempParams,
          equipmentId: item,
        }
      })
      console.log(params)
      btnLoading.value = true
      batchConfigEquipmentWeekOrMonth(params).then((res) => {
        ElMessage.success('设备维护保养配置成功')
        btnLoading.value = false
        dialogVisible.value = false
        emit('onSuccess')
      }).catch((_) => {
        btnLoading.value = false
      })
    }
  })
}
// 关闭弹窗
function handleClose() {
  dataFormRef.value?.resetFields()
  dialogVisible.value = false
}

// ---------------------------------------------选择计量人员--------------------------------------
const selectStaffDialogRef = ref() // 选择计量人员组件ref
const selectType = ref('') // 选择类型
const selectStaffWeek = ref([]) // 周维护选择的加量人员列表
const selectStaffMonth = ref([]) // 月保养选择的加量人员列表
// 点击选择责任人
const selectStaff = (type: 'week' | 'month') => {
  selectType.value = type
  selectStaffDialogRef.value.initDialog()
}

// 确定选择计量人员
const confirmSelectStaff = (list = []) => {
  if (Array.isArray(list) && list.length) {
    switch (selectType.value) {
      case 'week':
        selectStaffWeek.value = list
        form.value.staffIdsWeek = list.map((item: { id: string }) => item.id).join(',') // 周维护责任人
        form.value.staffNamesWeek = list.map((item: { staffName: string }) => item.staffName).join(',') // 周维护责任人
        break
      case 'month':
        selectStaffMonth.value = list
        form.value.staffIdsMonth = list.map((item: { id: string }) => item.id).join(',') // 月保养责任人
        form.value.staffNamesMonth = list.map((item: { staffName: string }) => item.staffName).join(',') // 月保养责任人
        break
    }
  }
}

// ----------------------- 以下是暴露的方法内容 ----------------------------
defineExpose({ initDialog })
</script>

<template>
  <el-dialog
    v-model="dialogVisible"
    title="维护保养配置"
    width="65%"
    :before-close="handleClose"
    class="config-week-month-dialog"
  >
    <el-form
      ref="dataFormRef"
      v-loading="btnLoading"
      label-position="left"
      label-width="130px"
      :model="form"
      :rules="rules"
    >
      <el-row :gutter="24">
        <el-col :span="24" style="margin-bottom: 20px;">
          <el-checkbox v-model="form.openWeek" :true-label="1" :false-label="0">
            是否开启周维护
          </el-checkbox>
        </el-col>
        <el-col v-if="form.openWeek" :span="24" style="display: flex;align-items: center;justify-content: space-between;">
          <el-form-item label="责任人:" prop="staffNamesWeek" style="flex: 1;">
            <el-input
              v-model="form.staffNamesWeek"
              placeholder="请选择责任人"
              type="textarea"
              auto-size
              disabled
              style="width: 100%;margin-right: 20px;"
            />
          </el-form-item>
          <el-button size="small" type="primary" @click="selectStaff('week')">
            选择
          </el-button>
        </el-col>
        <el-col v-if="form.openWeek" :span="24">
          <el-form-item label="提醒时间:" prop="remindDateWeek">
            <el-radio-group v-model="form.remindDateWeek" class="radio-group">
              <el-radio v-for="row of remindTimeList" :key="row.value" :label="row.value" class="radio-line">
                {{ row.name }}
              </el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
        <el-col v-if="form.openWeek" :span="24">
          <el-form-item label="默认提醒项目:" prop="remindItemWeek">
            <el-checkbox-group v-for="item in remindItemList" :key="item.value" v-model="form.remindItemWeek">
              <el-checkbox :label="item.value" style="margin-right: 32px;">
                {{ item.name }}
              </el-checkbox>
            </el-checkbox-group>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row :gutter="24">
        <el-col :span="24" style="margin-bottom: 20px;">
          <el-checkbox v-model="form.openMonth" :true-label="1" :false-label="0">
            是否开启月保养
          </el-checkbox>
        </el-col>
        <el-col v-if="form.openMonth" :span="24" style="display: flex;align-items: center;justify-content: space-between;">
          <el-form-item label="责任人:" prop="staffNamesMonth" style="flex: 1;">
            <el-input
              v-model="form.staffNamesMonth"
              placeholder="请选择责任人"
              type="textarea"
              auto-size
              disabled
              style="width: 100%;margin-right: 20px;"
            />
          </el-form-item>
          <el-button size="small" type="primary" @click="selectStaff('month')">
            选择
          </el-button>
        </el-col>
        <el-col v-if="form.openMonth" :span="24">
          <el-form-item label="提醒时间:" prop="remindDateMonth">
            <span>每月： </span>
            <el-input-number
              v-model="form.remindDateMonth"
              :precision="0"
              :step="1"
              :min="1"
              :max="31"
            />
            <span style="margin-left: 10px;"> 日</span>
          </el-form-item>
        </el-col>
        <el-col v-if="form.openMonth" :span="24">
          <el-form-item label="默认提醒项目:" prop="remindItemMonth">
            <el-checkbox-group v-for="item in remindItemList" :key="item.value" v-model="form.remindItemMonth">
              <el-checkbox :label="item.value" style="margin-right: 32px;">
                {{ item.name }}
              </el-checkbox>
            </el-checkbox-group>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <template #footer>
      <el-button type="primary" :loading="btnLoading" @click="submitForm(dataFormRef)">
        提交
      </el-button>
      <el-button type="info" @click="handleClose">
        取消
      </el-button>
    </template>
  </el-dialog>
  <!-- 选择计量人员  -->
  <select-staff-dialog ref="selectStaffDialogRef" @confirm="confirmSelectStaff" />
</template>

<style lang="scss">
.config-week-month-dialog {
  .el-radio__label {
    display: block !important;
  }
}
</style>