<template>
  <Dialog :title="dialogTitle" v-model="dialogVisible">
    <el-form
      ref="formRef"
      :model="formData"
      :rules="formRules"
      label-width="120px"
      v-loading="formLoading"
    >
      <el-form-item label="施工队伍" prop="deptName">
        <el-input v-model="displayData.deptName" placeholder="" disabled />
      </el-form-item>
      <el-form-item label="项目" prop="contractName">
        <el-input v-model="displayData.contractName" placeholder="" disabled />
      </el-form-item>
      <el-form-item label="任务" prop="taskName">
        <el-input v-model="displayData.taskName" placeholder="" disabled />
      </el-form-item>
      <el-form-item :label="t('project.status')" prop="rigStatus">
        <el-select v-model="formData.rigStatus" placeholder="请选择" clearable>
          <el-option
            v-for="dict in getStrDictOptions(DICT_TYPE.PMS_PROJECT_TASK_RY_SCHEDULE)"
            :key="dict.id"
            :label="dict.label"
            :value="dict.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="上井次完井时间" prop="latestWellDoneTime">
        <el-date-picker
          v-model="formData.latestWellDoneTime"
          type="date"
          value-format="x"
          placeholder=""
          disabled
        />
      </el-form-item>
      <el-form-item label="设计井深(m)" prop="designWellDepth">
        <el-input v-model="displayData.designWellDepth" placeholder="" disabled />
      </el-form-item>
      <el-form-item label="当前井深(m)" prop="currentDepth">
        <el-input v-model="formData.currentDepth" placeholder="请输入当前井深(m)" />
      </el-form-item>
      <el-form-item label="日进尺(m)" prop="dailyFootage">
        <el-input v-model="formData.dailyFootage" placeholder="" disabled />
      </el-form-item>
      <el-form-item label="月进尺(m)" prop="monthlyFootage">
        <el-input v-model="formData.monthlyFootage" placeholder="" disabled />
      </el-form-item>
      <el-form-item label="年累计进尺(m)" prop="annualFootage">
        <el-input v-model="formData.annualFootage" placeholder="" disabled />
      </el-form-item>
      <el-form-item label="当日用电量(kWh)" prop="dailyPowerUsage">
        <el-input v-model="formData.dailyPowerUsage" placeholder="请输入当日用电量(kWh)" />
      </el-form-item>
      <el-form-item label="当日油耗(升)" prop="dailyFuel">
        <el-input v-model="formData.dailyFuel" placeholder="请输入当日油耗(升)" />
      </el-form-item>
      <el-form-item label="总施工井数" prop="monthlyFuel">
        <el-input v-model="displayData.totalConstructionWells" placeholder="" disabled />
      </el-form-item>
      <el-form-item label="完工井数" prop="completedWells">
        <el-input v-model="displayData.completedWells" placeholder="" disabled />
      </el-form-item>
      <el-form-item label="泥浆密度(g/cm³)" prop="mudDensity">
        <el-input v-model="formData.mudDensity" placeholder="请输入泥浆性能-密度(g/cm³)" />
      </el-form-item>
      <el-form-item label="泥浆粘度(S)" prop="mudViscosity">
        <el-input v-model="formData.mudViscosity" placeholder="请输入泥浆性能-粘度(S)" />
      </el-form-item>
      <el-form-item label="水平段长度(m)" prop="lateralLength">
        <el-input v-model="formData.lateralLength" placeholder="请输入水平段长度(m)" />
      </el-form-item>
      <el-form-item label="井斜(°)" prop="wellInclination">
        <el-input v-model="formData.wellInclination" placeholder="请输入井斜(°)" />
      </el-form-item>
      <el-form-item label="方位(°)" prop="azimuth">
        <el-input v-model="formData.azimuth" placeholder="请输入方位(°)" />
      </el-form-item>
      <el-form-item label="设计井身结构" prop="designWellStruct">
        <el-input v-model="displayData.designWellStruct" placeholder="" type="textarea" disabled />
      </el-form-item>
      <el-form-item label="生产动态" prop="productionStatus">
        <el-input
          v-model="formData.productionStatus"
          placeholder="请输入生产动态"
          type="textarea"
        />
      </el-form-item>
      <el-form-item label="人员情况" prop="personnel">
        <el-input v-model="formData.personnel" placeholder="请输入人员情况" type="textarea" />
      </el-form-item>
      <el-form-item label="备注" prop="remark">
        <el-input v-model="formData.remark" placeholder="请输入备注" type="textarea" />
      </el-form-item>
    </el-form>
    <template #footer>
      <el-button @click="submitForm" type="primary" :disabled="formLoading">确 定</el-button>
      <el-button @click="dialogVisible = false">取 消</el-button>
    </template>
  </Dialog>
</template>
<script setup lang="ts">
import { IotRyDailyReportApi, IotRyDailyReportVO } from '@/api/pms/iotrydailyreport'
import { DICT_TYPE, getStrDictOptions } from '@/utils/dict'
import { ref, watch, reactive } from 'vue'

/** 瑞鹰日报 表单 */
defineOptions({ name: 'IotRyDailyReportForm' })

const { t } = useI18n() // 国际化
const message = useMessage() // 消息弹窗

// 添加 props 接收行数据
const props = defineProps({
  rowData: {
    type: Object,
    default: () => ({})
  }
})

// 监听 props.rowData 的变化
watch(
  () => props.rowData,
  (newVal) => {
    if (newVal) {
      displayData.value.deptName = newVal.deptName || ''
      displayData.value.contractName = newVal.contractName || ''
      displayData.value.taskName = newVal.taskName || ''
      displayData.value.designWellDepth = newVal.designWellDepth || ''
      displayData.value.designWellStruct = newVal.designWellStruct || ''
      displayData.value.totalConstructionWells = newVal.totalConstructionWells || ''
      displayData.value.completedWells = newVal.completedWells || ''
    }
  },
  { immediate: true }
)

const dialogVisible = ref(false) // 弹窗的是否展示
const dialogTitle = ref('') // 弹窗的标题
const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
const formType = ref('') // 表单的类型：create - 新增；update - 修改

// 添加显示数据对象
const displayData = ref({
  deptName: '',
  contractName: '',
  taskName: '',
  designWellDepth: '',
  designWellStruct: '',
  totalConstructionWells: '',
  completedWells: ''
})

const formData = ref({
  id: undefined,
  deptId: undefined,
  projectId: undefined,
  taskId: undefined,
  projectClassification: undefined,
  relocationDays: undefined,
  latestWellDoneTime: undefined,
  designWellDepth: undefined,
  currentDepth: undefined,
  dailyFootage: undefined,
  monthlyFootage: undefined,
  annualFootage: undefined,
  totalConstructionWells: undefined,
  completedWells: undefined,
  dailyPowerUsage: undefined,
  monthlyPowerUsage: undefined,
  dailyFuel: undefined,
  monthlyFuel: undefined,
  nonProductionTime: undefined,
  nptReason: undefined,
  constructionStartDate: undefined,
  constructionEndDate: undefined,
  productionStatus: undefined,
  nextPlan: undefined,
  rigStatus: undefined,
  personnel: undefined,
  mudDensity: undefined,
  mudViscosity: undefined,
  lateralLength: undefined,
  wellInclination: undefined,
  azimuth: undefined,
  designWellStruct: undefined,
  extProperty: undefined,
  sort: undefined,
  remark: undefined,
  status: undefined,
  processInstanceId: undefined,
  auditStatus: undefined
})
const formRules = reactive({})
const formRef = ref() // 表单 Ref

/** 打开弹窗 */
const open = async (type: string, id?: number) => {
  dialogVisible.value = true
  dialogTitle.value = t('action.' + type)
  formType.value = type
  resetForm()

  // 设置显示数据
  if (props.rowData) {
    displayData.value.deptName = props.rowData.deptName || ''
    displayData.value.contractName = props.rowData.contractName || ''
    displayData.value.taskName = props.rowData.taskName || ''
    displayData.value.designWellDepth = props.rowData.designWellDepth || ''
    displayData.value.designWellStruct = props.rowData.designWellStruct || ''
    displayData.value.totalConstructionWells = props.rowData.totalConstructionWells || ''
    displayData.value.completedWells = props.rowData.completedWells || ''
  }

  // 修改时，设置数据
  if (id) {
    formLoading.value = true
    try {
      formData.value = await IotRyDailyReportApi.getIotRyDailyReport(id)
    } finally {
      formLoading.value = false
    }
  }
}

defineExpose({ open }) // 提供 open 方法，用于打开弹窗

/** 提交表单 */
const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调
const submitForm = async () => {
  // 校验表单
  await formRef.value.validate()
  // 提交请求
  formLoading.value = true
  try {
    const data = formData.value as unknown as IotRyDailyReportVO
    if (formType.value === 'create') {
      await IotRyDailyReportApi.createIotRyDailyReport(data)
      message.success(t('common.createSuccess'))
    } else {
      await IotRyDailyReportApi.updateIotRyDailyReport(data)
      message.success(t('common.updateSuccess'))
    }
    dialogVisible.value = false
    // 发送操作成功的事件
    emit('success')
  } finally {
    formLoading.value = false
  }
}

/** 重置表单 */
const resetForm = () => {
  formData.value = {
    id: undefined,
    deptId: undefined,
    projectId: undefined,
    taskId: undefined,
    projectClassification: undefined,
    relocationDays: undefined,
    latestWellDoneTime: undefined,
    designWellDepth: undefined,
    currentDepth: undefined,
    dailyFootage: undefined,
    monthlyFootage: undefined,
    annualFootage: undefined,
    totalConstructionWells: undefined,
    completedWells: undefined,
    dailyPowerUsage: undefined,
    monthlyPowerUsage: undefined,
    dailyFuel: undefined,
    monthlyFuel: undefined,
    nonProductionTime: undefined,
    nptReason: undefined,
    constructionStartDate: undefined,
    constructionEndDate: undefined,
    productionStatus: undefined,
    nextPlan: undefined,
    rigStatus: undefined,
    personnel: undefined,
    mudDensity: undefined,
    mudViscosity: undefined,
    lateralLength: undefined,
    wellInclination: undefined,
    azimuth: undefined,
    designWellStruct: undefined,
    extProperty: undefined,
    sort: undefined,
    remark: undefined,
    status: undefined,
    processInstanceId: undefined,
    auditStatus: undefined
  }

  displayData.value = {
    deptName: '',
    contractName: '',
    taskName: '',
    designWellDepth: '',
    designWellStruct: '',
    totalConstructionWells: '',
    completedWells: ''
  }

  formRef.value?.resetFields()
}
</script>
