<!-- 任务监测详情 -->
<script lang="ts" setup name="EquipementMonitorTaskDetail">
import { ref } from 'vue'
import { ElLoading, ElMessage } from 'element-plus'
import type { IForm } from './task-interface'
import { getUserList } from '@/api/system/user'
import useUserStore from '@/store/modules/user'
import { getDictByCode } from '@/api/system/dict'
import type { deptType, dictType } from '@/global'
import countries from '@/components/AddressSelect/country-code.json'
import { getDeptTreeList } from '@/api/system/dept'
import { toTreeList } from '@/utils/structure'
import { UploadFile } from '@/api/file'
import { addMonitorTaskList, getInfo, updateMonitorTaskList } from '@/api/equipment/monitor/task'
const user = useUserStore() // 用户信息
const textMap: { [key: string]: string } = {
  edit: '编辑',
  add: '新建',
  detail: '详情',
}// 字典
const $router = useRouter() // 关闭页面使用
const $route = useRoute() // 路由参数
const pageType = ref('add') // 页面类型: add, edit, detail
const infoId = ref('') // 列表id
const countryList = ref(countries) // 国家列表
const ruleFormRef = ref() // 表单ref
const form = ref<IForm>({
  exceptionReport: '', // 异常情况报告
  monitorPlan: '', // 监测方案
  monitorReport: '', // 监测报告
  monitorStaff: '', // 监测人员
  remark: '', // 备注
  taskDate: '', // 任务时间
  taskName: '', // 任务名称
  taskNo: '', // 任务编号
})
// 校验规则
const formRules = ref({
  taskName: [{ required: true, message: '任务名称不能为空', trigger: ['blur', 'change'] }],
  taskDate: [{ required: true, message: '任务时间不能为空', trigger: ['blur', 'change'] }],
  monitorStaff: [{ required: true, message: '监测人员不能为空', trigger: ['blur', 'change'] }],
})
// ----------------------------------路由参数--------------------------------------------
if ($route.params && $route.params.type) {
  pageType.value = $route.params.type as string
  console.log(pageType.value)

  if ($route.params.id) {
    infoId.value = $route.params.id as string
  }
}
// -------------------------------------------按钮----------------------------------------------
// 关闭新增页面的回调
const close = () => {
  $router.back()
}

// 点击编辑按钮
const edit = () => {
  pageType.value = 'edit'
}

// 保存
const save = () => {
  ruleFormRef.value!.validate((valid: boolean) => {
    if (valid) {
      const loading = ElLoading.service({
        lock: true,
        background: 'rgba(255, 255, 255, 0.8)',
      })
      // 新建
      if (pageType.value === 'add') { // 新建
        addMonitorTaskList(form.value).then((res) => {
          ElMessage.success('保存成功')
          form.value.taskNo = res.data.taskNo // 统一编号
          pageType.value = 'detail'
          loading.close()
        }).catch(() => {
          loading.close()
        })
      }
      // 保存
      else if (pageType.value === 'edit') { // 编辑
        updateMonitorTaskList(form.value).then((res) => {
          ElMessage.success('保存成功')
          pageType.value = 'detail'
          loading.close()
        }).catch(() => {
          loading.close()
        })
      }
    }
    else {
      console.log('表单校验不通过')
    }
  })
}

// ---------------------------------文件上传-------------------------------------------
const fileRefMonitorPlan = ref()
const fileRefMonitorReport = ref()
const fileRefExceptionReport = ref()
const onFileChangeMonitorPlan = (event: any) => {
  // 原生上传
  if (event.target.files?.length !== 0) {
    // 创建formdata对象
    const fd = new FormData()
    fd.append('multipartFile', event.target.files[0])
    UploadFile(fd).then((res) => {
      if (res.code === 200) {
        form.value.monitorPlan = res.data[0]
        // 重置当前验证
        ElMessage.success('文件上传成功')
      }
      else {
        ElMessage.error(res.message)
      }
    })
  }
}
const uploadMonitorPlan = () => {
  fileRefMonitorPlan.value.click()
}

const onFileChangeMonitorReport = (event: any) => {
  // 原生上传
  if (event.target.files?.length !== 0) {
    // 创建formdata对象
    const fd = new FormData()
    fd.append('multipartFile', event.target.files[0])
    const loading = ElLoading.service({
      lock: true,
      background: 'rgba(255, 255, 255, 0.8)',
    })
    UploadFile(fd).then((res) => {
      if (res.code === 200) {
        form.value.monitorReport = res.data[0]
        // 重置当前验证
        ElMessage.success('文件上传成功')
        loading.close()
      }
      else {
        ElMessage.error(res.message)
        loading.close()
      }
    })
  }
}
const uploadMonitorReport = () => {
  fileRefMonitorReport.value.click()
}

const onFileChangeExceptionReport = (event: any) => {
  // 原生上传
  if (event.target.files?.length !== 0) {
    // 创建formdata对象
    const fd = new FormData()
    fd.append('multipartFile', event.target.files[0])
    const loading = ElLoading.service({
      lock: true,
      background: 'rgba(255, 255, 255, 0.8)',
    })
    UploadFile(fd).then((res) => {
      if (res.code === 200) {
        form.value.exceptionReport = res.data[0]
        // 重置当前验证
        ElMessage.success('文件上传成功')
        loading.close()
      }
      else {
        ElMessage.error(res.message)
        loading.close()
      }
    })
  }
}
const uploadExceptionReport = () => {
  fileRefExceptionReport.value.click()
}

// -------------------------------------------获取详情信息--------------------------------------------------
// 获取详情信息
const fetchInfo = () => {
  const loading = ElLoading.service({
    lock: true,
    background: 'rgba(255, 255, 255, 0.8)',
  })
  getInfo({ id: infoId.value }).then((res) => {
    form.value = res.data
    loading.close()
  })
}

onMounted(async () => {
  if (pageType.value !== 'add') {
    fetchInfo()
  }
})
</script>

<template>
  <app-container>
    <detail-page :title="`任务监测-${textMap[pageType]}`">
      <template #btns>
        <el-button v-if="pageType !== 'detail'" type="primary" @click="save">
          保存
        </el-button>
        <el-button v-if="pageType === 'detail'" type="primary" @click="edit">
          编辑
        </el-button>
        <el-button type="info" @click="close">
          关闭
        </el-button>
      </template>
      <el-form
        ref="ruleFormRef"
        :model="form"
        label-width="120"
        label-position="right"
        :rules="formRules"
      >
        <el-row :gutter="24">
          <el-col :span="6">
            <el-form-item label="任务代号:" prop="taskNo">
              <el-input v-model="form.taskNo" disabled placeholder="系统自动生成" />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="任务名称:" prop="taskName">
              <el-input
                v-model.trim="form.taskName"
                :placeholder="pageType === 'detail' ? '' : '请输入任务名称'"
                :disabled="pageType === 'detail'"
              />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="任务时间:" prop="taskDate">
              <el-date-picker
                v-model="form.taskDate"
                type="date"
                format="YYYY-MM-DD"
                value-format="YYYY-MM-DD"
                :placeholder="pageType === 'detail' ? ' ' : '请选择任务时间'"
                :disabled="pageType === 'detail'"
                class="full-width-input"
              />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="监测人员:" prop="monitorStaff">
              <el-input
                v-model.trim="form.monitorStaff"
                :placeholder="pageType === 'detail' ? '' : '请输入监测人员'"
                :disabled="pageType === 'detail'"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="24">
          <el-col :span="12">
            <el-form-item label="备注:" prop="remark">
              <el-input
                v-model="form.remark"
                class="full-width-input"
                :placeholder="pageType === 'detail' ? ' ' : '请输入备注'"
                autosize
                type="textarea"
                :disabled="pageType === 'detail'"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="24" class="marg">
          <el-col :span="24">
            <el-form-item label="监测方案:" prop="monitorPlan">
              <show-photo v-if="form.monitorPlan" :minio-file-name="form.monitorPlan" />
              <span v-else-if="pageType === 'detail'">无</span>
              <input v-show="pageType === ''" ref="fileRefMonitorPlan" type="file" @change="onFileChangeMonitorPlan">
              <el-button v-if="pageType !== 'detail'" id="file" type="primary" :disabled="pageType === 'detail'" :style="{ 'margin-left': form.monitorPlan === '' ? '0px' : '20px' }" @click="uploadMonitorPlan">
                {{ form.monitorPlan === '' ? '上传' : '更换附件' }}
              </el-button>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="24" class="marg">
          <el-col :span="24">
            <el-form-item label="监测报告:" prop="monitorReport">
              <show-photo v-if="form.monitorReport" :minio-file-name="form.monitorReport" />
              <span v-else-if="pageType === 'detail'">无</span>
              <input v-show="pageType === ''" ref="fileRefMonitorReport" type="file" @change="onFileChangeMonitorReport">
              <el-button v-if="pageType !== 'detail'" id="file" type="primary" :disabled="pageType === 'detail'" :style="{ 'margin-left': form.monitorReport === '' ? '0px' : '20px' }" @click="uploadMonitorReport">
                {{ form.monitorReport === '' ? '上传' : '更换附件' }}
              </el-button>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="24" class="marg">
          <el-col :span="24">
            <el-form-item label="异常情况报告:" prop="exceptionReport">
              <show-photo v-if="form.exceptionReport" :minio-file-name="form.exceptionReport" />
              <span v-else-if="pageType === 'detail'">无</span>
              <input v-show="pageType === ''" ref="fileRefExceptionReport" type="file" @change="onFileChangeExceptionReport">
              <el-button v-if="pageType !== 'detail'" id="file" type="primary" :disabled="pageType === 'detail'" :style="{ 'margin-left': form.exceptionReport === '' ? '0px' : '20px' }" @click="uploadExceptionReport">
                {{ form.exceptionReport === '' ? '上传' : '更换附件' }}
              </el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </detail-page>
  </app-container>
</template>

<style lang="scss" scoped>
.step {
  line-height: 28px;
  font-size: 20px;
  color: #3d7eff;
  font-weight: bold;
  margin-bottom: 5px;
  width: fit-content;
}
</style>

<style lang="scss">
.fieldtest-record-detail {
  .el-table thead.is-group th.el-table__cell {
    background: #f2f6ff;
  }
}
</style>