<script setup>
  import { ref, computed, watch, nextTick, reactive } from 'vue';
  import { onLoad } from '@dcloudio/uni-app';
  import { getRuiYingReportDetail } from '@/api/ruiying';
  import { useDataDictStore } from '@/store/modules/dataDict';

  const props = defineProps({
    type: {
      type: String,
      default: 'edit',
    },
  });

  const NON_PROD_FIELDS = [
    { key: 'repairTime', label: '设备故障' },
    { key: 'selfStopTime', label: '设备保养' },
    { key: 'accidentTime', label: '工程质量' },
    { key: 'complexityTime', label: '技术受限' },
    { key: 'rectificationTime', label: '生产组织' },
    { key: 'waitingStopTime', label: '不可抗力' },
    { key: 'partyaDesign', label: '甲方设计' },
    { key: 'partyaPrepare', label: '甲方准备' },
    { key: 'partyaResource', label: '甲方资源' },
    { key: 'relocationTime', label: '生产配合' },
    { key: 'winterBreakTime', label: '待命' },
    { key: 'otherNptTime', label: '其他非生产时间' },
  ];

  const FORM_KEYS = [
    'id',
    'deptId',
    'projectId',
    'taskId',
    'deptName',
    'contractName',
    'taskName',
    'rigStatus',
    'designWellDepth',
    'currentDepth',
    'dailyPowerUsage',
    'dailyFuel',
    'mudDensity',
    'mudViscosity',
    'lateralLength',
    'wellInclination',
    'azimuth',
    'designWellStruct',
    'personnel',
    'drillingWorkingTime',
    'otherProductionTime',
    'lastCurrentDepth',

    'productionStatus',
    'remark',
    'createTime',

    'opinion',
    'repairTime',
    'selfStopTime',
    'accidentTime',
    'complexityTime',
    'rectificationTime',
    'waitingStopTime',
    'partyaDesign',
    'partyaPrepare',
    'partyaResource',
    'relocationTime',
    'winterBreakTime',
    'otherNptTime',
    'otherNptReason',

    'status',
    'auditStatus',
  ];

  const formType = ref('edit');

  const initFormData = () => {
    const base = {
      drillingWorkingTime: 0,
      otherProductionTime: 0,
    };
    // 初始化所有非生产时间字段为 0
    NON_PROD_FIELDS.forEach(field => {
      base[field.key] = 0;
    });
    return base;
  };

  const form = ref(initFormData());

  async function loadDetail(id) {
    try {
      const { data } = await getRuiYingReportDetail({ id });

      form.value = initFormData();

      FORM_KEYS.forEach(key => {
        if (Object.prototype.hasOwnProperty.call(data, key) && data[key] !== null && data[key] !== undefined) {
          form.value[key] = data[key];
        }
      });
      form.value.id = id;

      if (props.type.includes('approval') && data.auditStatus !== 10) {
        formType.value = 'readonly';
      }

      if (props.type.includes('edit') && data.status !== 0) {
        formType.value = 'readonly';
      }

      if (props.type.includes('detail')) {
        formType.value = 'readonly';
      }
    } finally {
    }
  }

  const dictStore = useDataDictStore();

  const nptReasonOptions = ref([]);
  const rigStatusOptions = ref([]);

  const loadOptions = () => {
    nptReasonOptions.value = dictStore.getStrDictOptions('nptReason').map(v => ({
      text: v.label,
      value: v.value,
    }));
    rigStatusOptions.value = dictStore.getStrDictOptions('rigStatus').map(v => ({
      text: v.label,
      value: v.value,
    }));
  };

  onLoad(options => {
    if (dictStore.dataDict.length <= 0) {
      dictStore.loadDataDictList().then(() => {
        loadOptions();
      });
    } else loadOptions();
    loadDetail(options.id);
  });

  const defaultProps = computed(() => ({
    inputBorder: false,
    clearable: false,
    placeholder: '请输入',
    style: {
      'text-align': 'right',
    },
    styles: {
      disableColor: '#fff',
    },
  }));

  const disabled = computed(() => field => {
    if (field === 'edit')
      return formType.value === 'readonly' || props.type.includes('approval') || props.type.includes('detail');
    else return formType.value === 'readonly';
  });

  const formRef = ref(null);

  // 辅助函数：计算总时间
  const sumNonProdTimes = () => {
    let sum = 0;
    NON_PROD_FIELDS.forEach(field => {
      sum += Number(form.value[field.key] || 0);
    });
    return sum;
  };

  // 校验函数：总时间必须为 24
  const validateTotalTime = (rule, value, data, callback) => {
    const drillingTime = Number(form.value.drillingWorkingTime || 0);
    const otherTime = Number(form.value.otherProductionTime || 0);

    const nonProdSum = sumNonProdTimes();

    let total = 0;
    let msg = '';

    total = parseFloat((drillingTime + otherTime + nonProdSum).toFixed(2));
    msg = `进尺(${drillingTime})+其他(${otherTime})+非生产(${nonProdSum})=${total}H，必须为24H`;

    if (Math.abs(total - 24) > 0.01) {
      callback(msg);
    }
    return true;
  };

  const validateLastCurrentDepth = (rule, value, data, callback) => {
    if (value && Number(value) < (form.value.lastCurrentDepth ?? 0)) {
      callback(`当前深度需大于等于上一次填报深度${form.value.lastCurrentDepth}m`);
    } else {
      callback();
    }
  };

  // uni-forms 规则定义
  const rules = reactive({
    currentDepth: {
      rules: [{ required: true, errorMessage: '请输入当前深度' }, { validateFunction: validateLastCurrentDepth }],
    },

    productionStatus: {
      rules: [{ required: true, errorMessage: '请输入生产动态' }],
    },
    drillingWorkingTime: {
      rules: [{ required: true, errorMessage: '请输入进尺工作时间' }, { validateFunction: validateTotalTime }],
    },
  });

  const allTimeKeys = ['drillingWorkingTime', 'otherProductionTime', ...NON_PROD_FIELDS.map(f => f.key)];

  watch(
    () => allTimeKeys.map(key => form.value[key]),
    () => {
      nextTick(() => {
        formRef.value?.validateField('drillingWorkingTime');
      });
    }
  );

  defineExpose({ formRef, form, loadDetail });

  const orange = computed(() => {
    const drillingTime = Number(form.value.drillingWorkingTime || 0);
    const otherTime = Number(form.value.otherProductionTime || 0);

    const nonProdSum = sumNonProdTimes();

    let total = 0;

    total = parseFloat((drillingTime + otherTime + nonProdSum).toFixed(2));

    if (Math.abs(total - 24) > 0.01) return true;
    return false;
  });
</script>

<template>
  <view class="content">
    <view class="tip">
      <view class="item">
        <view class="left">
          <span>油量消耗：</span>
          当日油耗
        </view>
        <span class="right red"> >9000升 红色预警 </span>
      </view>
      <view class="item">
        <view class="left">
          <span>时间平衡：</span>
          进尺 + 其它生产 + 非生产 = 24H
        </view>
        <span class="right orange"> ≠24H 橙色预警 </span>
      </view>
    </view>
    <view v-if="!type.includes('approval') && form.opinion" class="opinion">
      <span class="left">审批意见：</span>
      <span class="right"> {{ form.opinion }} </span>
    </view>
    <uni-forms
      ref="formRef"
      labelWidth="auto"
      :model="form"
      :rules="rules"
      validateTrigger="submit"
      err-show-type="toast">
      <uni-forms-item label="施工队伍" name="deptName">
        <span class="readOnly">{{ form.deptName }}</span>
      </uni-forms-item>
      <uni-forms-item label="项目" name="contractName">
        <span class="readOnly">{{ form.contractName }}</span>
      </uni-forms-item>
      <uni-forms-item label="任务" name="taskName">
        <span class="readOnly">{{ form.taskName }}</span>
      </uni-forms-item>
      <uni-forms-item label="施工状态" name="rigStatus">
        <uni-data-select
          :clear="true"
          align="right"
          placeholder="请选择"
          :localdata="rigStatusOptions"
          placement="top"
          :disabled="disabled('edit')"
          v-model="form.rigStatus" />
      </uni-forms-item>
      <uni-forms-item label="设计井深(m)" name="designWellDepth">
        <span class="readOnly">{{ form.designWellDepth }}</span>
      </uni-forms-item>
      <uni-forms-item label="当前井深(m)" name="currentDepth" required>
        <uni-easyinput type="number" v-bind="defaultProps" :disabled="disabled('edit')" v-model="form.currentDepth" />
      </uni-forms-item>
      <uni-forms-item label="当日用电量(kWh)" name="dailyPowerUsage">
        <uni-easyinput
          type="number"
          v-bind="defaultProps"
          :disabled="disabled('edit')"
          v-model="form.dailyPowerUsage" />
      </uni-forms-item>
      <uni-forms-item label="当日油耗(升)" name="dailyFuel">
        <uni-easyinput
          type="number"
          :class="{ 'red-text': Number(form.dailyFuel) > 9000 }"
          v-bind="defaultProps"
          :disabled="disabled('edit')"
          v-model="form.dailyFuel" />
      </uni-forms-item>
      <uni-forms-item label="泥浆粘度(S)" name="mudViscosity">
        <uni-easyinput type="number" v-bind="defaultProps" :disabled="disabled('edit')" v-model="form.mudViscosity" />
      </uni-forms-item>
      <uni-forms-item label="泥浆粘度(S)" name="mudViscosity">
        <uni-easyinput type="number" v-bind="defaultProps" :disabled="disabled('edit')" v-model="form.mudViscosity" />
      </uni-forms-item>
      <uni-forms-item label="水平段长度(m)" name="lateralLength">
        <uni-easyinput type="number" v-bind="defaultProps" :disabled="disabled('edit')" v-model="form.lateralLength" />
      </uni-forms-item>
      <uni-forms-item label="井斜(°)" name="wellInclination">
        <uni-easyinput
          type="number"
          v-bind="defaultProps"
          :disabled="disabled('edit')"
          v-model="form.wellInclination" />
      </uni-forms-item>
      <uni-forms-item label="方位(°)" name="azimuth">
        <uni-easyinput type="number" v-bind="defaultProps" :disabled="disabled('edit')" v-model="form.azimuth" />
      </uni-forms-item>
      <uni-forms-item label="设计井身结构" name="designWellStruct">
        <uni-easyinput
          type="textarea"
          autoHeight
          v-bind="defaultProps"
          :disabled="disabled('edit')"
          v-model="form.designWellStruct"
          :maxlength="1000" />
      </uni-forms-item>
      <uni-forms-item label="人员情况" name="personnel">
        <uni-easyinput
          type="textarea"
          autoHeight
          v-bind="defaultProps"
          :disabled="disabled('edit')"
          v-model="form.personnel"
          :maxlength="1000" />
      </uni-forms-item>
      <uni-forms-item label="生产动态" name="productionStatus" required>
        <uni-easyinput
          type="textarea"
          autoHeight
          v-bind="defaultProps"
          v-model="form.productionStatus"
          :disabled="disabled('edit')"
          :maxlength="1000" />
      </uni-forms-item>
      <uni-forms-item label="备注" name="remark">
        <uni-easyinput
          type="textarea"
          autoHeight
          v-bind="defaultProps"
          :disabled="disabled('edit')"
          v-model="form.remark"
          :maxlength="1000" />
      </uni-forms-item>

      <uv-divider text="生产时间" textPosition="left"></uv-divider>
      <uni-forms-item label="进尺工作时间(H)" name="drillingWorkingTime" required>
        <uni-easyinput
          type="number"
          v-bind="defaultProps"
          :class="{ 'orange-text': orange }"
          :disabled="disabled('edit')"
          v-model="form.drillingWorkingTime" />
      </uni-forms-item>
      <uni-forms-item label="其它生产时间(H)" name="otherProductionTime" required>
        <uni-easyinput
          type="number"
          v-bind="defaultProps"
          :class="{ 'orange-text': orange }"
          :disabled="disabled('edit')"
          v-model="form.otherProductionTime" />
      </uni-forms-item>
      <uv-divider text="非生产时间" textPosition="left"></uv-divider>
      <uni-forms-item v-for="field in NON_PROD_FIELDS" :key="field.key" :label="field.label + '(H)'" :name="field.key">
        <uni-easyinput
          type="number"
          :class="{ 'orange-text': orange }"
          v-bind="defaultProps"
          :disabled="disabled('edit')"
          v-model="form[field.key]" />
      </uni-forms-item>

      <uni-forms-item label="其他非生产原因" name="otherNptReason">
        <uni-easyinput
          type="textarea"
          autoHeight
          v-bind="defaultProps"
          v-model="form.otherNptReason"
          :disabled="disabled('edit')"
          :maxlength="1000" />
      </uni-forms-item>

      <uni-forms-item v-if="type.includes('approval')" label="审批意见" name="opinion">
        <uni-easyinput
          type="textarea"
          autoHeight
          v-bind="defaultProps"
          :disabled="disabled('approval')"
          v-model="form.opinion"
          :maxlength="1000" />
      </uni-forms-item>
    </uni-forms>
  </view>
</template>

<style lang="scss" scoped>
  .content {
    background-color: white;
    padding: 16px 16px;
    border-radius: 8px;
    box-sizing: border-box;
  }

  .uni-forms {
    margin-top: 10px;
    height: 100%;

    .uni-form {
      height: 100%;
    }

    .uni-forms-item {
      display: flex;
      align-items: center;
      flex: 1;
      margin-bottom: 6px;
      border-bottom: 1px dashed #cacccf;
    }

    :deep(.uni-forms-item__content) {
      text-align: right;
      .readOnly {
        padding-right: 10px;
      }
    }

    :deep(.uni-forms-item__label) {
      height: 44px;
      font-weight: 500;
      font-size: 14px;
      color: #333333 !important;
      width: max-content !important;
    }

    :deep(.uni-select) {
      border: none;
      text-align: right;
      padding-right: 0;
      .uniui-bottom:before {
        content: '\e6b5' !important;
        font-size: 16px !important;
      }
    }

    :deep(.uni-easyinput__content-textarea) {
      min-height: inherit;
      margin: 10px;
    }

    :deep(.is-disabled) {
      color: #333333 !important;
    }

    :deep(.red-text > .is-disabled) {
      color: rgb(220 38 38 / 0.8) !important;
    }

    :deep(.orange-text > .is-disabled) {
      color: rgb(234 88 12 / 0.8) !important;
    }

    :deep(.uni-select--disabled) {
      background-color: #fff;
    }
  }

  .red-text {
    color: rgb(220 38 38 / 0.8) !important;
  }

  .orange-text {
    color: rgb(234 88 12 / 0.8) !important;
  }

  .red {
    border: 1px solid rgb(254 226 226);
    color: rgb(220 38 38 / 0.8);
    background-color: rgb(254 226 226);
  }

  .orange {
    border: 1px solid rgb(254 215 170);
    color: rgb(234 88 12 / 0.8);
    background-color: rgb(254 215 170);
  }

  .tip {
    border-radius: 8px;
    border: 1px solid #e5e5e5;
    background-color: rgba(239, 246, 255, 0.8);
    box-sizing: border-box;
    padding: 10px;
    display: flex;
    flex-direction: column;
    gap: 6px;

    .item {
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-size: 12px;

      .left {
        color: rgb(75 85 99);

        span {
          color: rgb(31 41 55);
          font-weight: 600;
        }
      }

      .right {
        display: inline-flex;
        align-items: center;
        border-radius: 4px;
        padding: 2px 4px;
        font-weight: 500;
      }
    }
  }

  .opinion {
    border-radius: 8px;
    border: 1px solid rgb(254 240 138);
    background-color: rgb(254 252 232);
    box-sizing: border-box;
    padding: 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 12px;
    margin-top: 10px;

    .left {
      font-weight: 600;
      color: rgb(133 77 14);
    }

    .right {
      font-weight: 500;
      color: rgb(75 85 99);
    }
  }

  :deep(.uv-divider__text) {
    color: #333 !important;
  }
</style>
