<template>
  <div class="water-analysis-page">
    <div class="top">
      <el-form label-width="auto" :rules="areaInfoRules" inline ref="ruleForm" :model="FormList" :disabled="typeList.type == 1">
        <el-form-item
          :label="i.label"
          :style="{ width: i.prop == 'remark' ? '93%' : '45%' }"
          :prop="i.prop"
          v-for="i in areaInfoForm"
          :disabled="typeList.type == 1 || typeList.type == 2"
        >
          <el-select style="width: 100%" clearable v-model="FormList.parentId" v-if="i.prop == 'parentId'" :placeholder="i.placeholder">
            <el-option v-for="dict in typeLista.plc_station_type" :key="dict.id" :label="dict.areaName" :value="dict.id" />
          </el-select>

          <el-select
            style="width: 100%"
            clearable
            v-model="FormList.stationName"
            v-else-if="i.prop == 'stationName'"
            :placeholder="i.placeholder"
            @change="stationNameChange"
          >
            <el-option
              v-for="dict in typeLista.stationName_type"
              :key="dict.stationCode"
              :label="dict.stationName"
              :value="dict.stationCode"
            />
          </el-select>
          <el-input
            v-else
            v-model="FormList[i.prop]"
            :placeholder="i.placeholder"
            :disabled="(i.prop == 'areaCode' && typeList.type == 2) || i.prop == 'stationCode'"
            :type="i.prop == 'remark' ? 'textarea' : ''"
          >
            <template #append v-if="i.prop == 'budget'"> 万元 </template>
          </el-input>
        </el-form-item>
        <el-form-item label="图片:">
          <ImageFileUpload :limit="3" :saveFileArr="FormList.fileSaveRequestList" :listType="'picture-card'" />
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>
<script setup>
import { projectInfoAdd, projectInfoEdit, stationInfolist, getInfolist } from '@/api/scada/areaInfo';
import { areaInfoRules } from '@/utils/rules';
import { areaInfoForm } from '@/utils/form';
import ImageFileUpload from '@/components/ImageFileUpload/index.vue'; //图片文件上传
const typeLista = ref({});
const { proxy } = getCurrentInstance();
const { typeList } = defineProps(['typeList']);
const emits = defineEmits();
defineExpose({ submit, closed, resetFiled });
let FormList = ref({ projectNo: '', fileSaveRequestList: [] });

function submit() {
  proxy.$refs.ruleForm.validate(valid => {
    if (valid) {
      let params = { ...FormList.value };
      if (typeList.type == 4) {
        projectInfoAdd(params).then(({ code }) => {
          if (code == 200) {
            proxy.$modal.msgSuccess('新增成功');
            emits('onModalClose');
          }
        });
      } else {
        projectInfoEdit(params).then(({ code }) => {
          if (code == 200) {
            proxy.$modal.msgSuccess('修改成功');
            emits('onModalClose');
          }
        });
      }
    }
  });
}
function resetFiled() {
  proxy.$refs.ruleForm.resetFields();
  FormList.value.fileSaveRequestList = [];
}
function closed() {
  emits('onModalClose');
}

function stationNameChange(v) {
  FormList.value.stationCode = v;
  FormList.value.parentId = '';
  getInfolistM({ stationCode: v });
}
const stationInfolistM = async () => {
  let { data } = await stationInfolist();
  typeLista.value.stationName_type = data;
};
const getInfolistM = async p => {
  let { data } = await getInfolist(p);
  if (!!!data) return;
  typeLista.value.plc_station_type = data.filter(i => {
    return i.id != typeList.id;
  });
};
onMounted(() => {
  FormList.value = typeList;
  FormList.value.stationName = typeList.stationCode;
  stationInfolistM();
  getInfolistM({ stationCode: typeList.stationCode });
});
</script>
<style lang="scss" scoped>
.water-analysis-page {
  padding: 10px;
}
</style>