<!-- 配置周维护月保养 -->
<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'

const emit = defineEmits(['onSuccess']) // 对外暴露的方法

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

const form = ref({
  isWeek: true, // 是否配置周维护
  isMonth: true, // 是否配置月保养
  zrrWeek: '', // 周维护责任人
  zrrMonth: '', // 月保养责任人
  remidTimeWeek: '', // 提醒时间-周维护
  remidTimeMonth: 1, // 提醒时间-月保养
  remindItemWeek: ['1', '2', '3', '4', '5', '6', '7'], // 默认提醒项目周维护
  remindItemMonth: [], // 默认提醒项目月保养
})

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 dataFormRef = ref<FormInstance>()
// 校验规则
const rules = reactive<FormRules>({
  zrrWeek: [{ required: true, message: '责任人必填', trigger: ['blur', 'change'] }],
  zrrMonth: [{ required: true, message: '责任人必填', trigger: ['blur', 'change'] }],
  remidTime: [{ required: true, message: '提醒时间必填', trigger: ['blur', 'change'] }],
  remindItemWeek: [{ required: true, message: '默认提醒项目必填', trigger: ['blur', 'change'] }],
  remidTimeMonth: [{ required: true, message: '提醒时间必填', trigger: ['blur', 'change'] }],
})
/**
 * 初始化审批弹窗
 */
function initDialog() {
  dialogVisible.value = true
}
// 提交表单
function submitForm(formEl: FormInstance | undefined) {
  if (!formEl) { return }
  formEl.validate((valid) => {
    if (valid) {
      // btnLoading.value = true
      // submit(form.value).then((res) => {
      //   ElMessage.success('删除审批已提交')
      //   btnLoading.value = false
      //   dialogVisible.value = false
      //   emit('onSuccess')
      // }).catch((_) => {
      //   btnLoading.value = false
      // })
      ElMessage.info('敬请期待')
    }
  })
}
// 关闭弹窗
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.zrrWeek = list.map((item: { staffName: string }) => item.staffName).join(',') // 周维护责任人
        break
      case 'month':
        selectStaffMonth.value = list
        form.value.zrrMonth = 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"
      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.isWeek">
            是否开启周维护
          </el-checkbox>
        </el-col>
        <el-col v-if="form.isWeek" :span="24" style="display: flex;align-items: center;justify-content: space-between;">
          <el-form-item label="责任人:" prop="zrrWeek" style="flex: 1;">
            <el-input
              v-model="form.zrrWeek"
              :placeholder="pageType === 'detail' ? '' : '请选择责任人'"
              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.isWeek" :span="24">
          <el-form-item label="提醒时间:" prop="remidTime">
            <el-radio-group v-model="form.remidTime" class="radio-group">
              <el-radio v-for="row of remindTimeList" :key="row.value" :label="row.name" class="radio-line" />
            </el-radio-group>
          </el-form-item>
        </el-col>
        <el-col v-if="form.isWeek" :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.isMonth">
            是否开启月保养
          </el-checkbox>
        </el-col>
        <el-col v-if="form.isMonth" :span="24" style="display: flex;align-items: center;justify-content: space-between;">
          <el-form-item label="责任人:" prop="zrrMonth" style="flex: 1;">
            <el-input
              v-model="form.zrrMonth"
              :placeholder="pageType === 'detail' ? '' : '请选择责任人'"
              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.isMonth" :span="24">
          <el-form-item label="提醒时间:" prop="remidTimeMonth">
            <span>每月： </span>
            <el-input-number
              v-model="form.remidTimeMonth"
              :precision="0"
              :step="1"
              :min="0"
            />
            <span style="margin-left: 10px;"> 日</span>
          </el-form-item>
        </el-col>
        <el-col v-if="form.isMonth" :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-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>