<template>
  <el-dialog v-model="isShow" width="800px" :before-close="handleClose">
    <el-form ref="ruleFormRef" :model="form" :rules="rules" label-position="right" label-width="100px">
      <el-row :gutter="50">
        <el-col :span="12">
          <el-form-item label="序列号" prop="id">
            <el-input v-model="form.id" disabled />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="制造商" prop="manufacturerCode">
            <el-select class="width-100" v-model="form.manufacturerCode">
              <el-option v-for="item in state.creator" :key="item.id" :value="item.id" :label="item.name" />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="50">
        <el-col :span="12">
          <el-form-item label="风机型号" prop="modelId">
            <el-select class="width-100" v-model="form.modelId" @change="modelChange">
              <el-option v-for="item in state.modelList" :key="item" :value="item" :label="item" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="风机测点" prop="uniformCode">
            <el-select v-model="form.uniformCode" class="width-100" filterable placeholder="请选择">
              <el-option v-for="item in state.pointList" :key="item.id" :label="item.uniformCode + '    ' + item.name"
                :value="item.uniformCode">
                <span style="float: left">{{ item.name }}</span>
                <span style="float: right; color: #8492a6; font-size: 13px">{{ item.uniformCode }}</span>
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="50">
        <el-col :span="12">
          <el-form-item label="停机类型" prop="characteristic">
            <el-select class="width-100" v-model="form.characteristic">
              <el-option v-for="item in state.CHARACTERISTIC" :key="item" :label="item" :value="item" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="故障编码" prop="faultCode">
            <el-input v-model="form.faultCode" :disabled="isEdit" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="50">
        <el-col :span="12">
          <el-form-item label="描述" prop="chineseText">
            <el-input v-model="form.chineseText" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="报警级别" prop="levelId">
            <el-select class="width-100" v-model="form.levelId">
              <el-option v-for="item in state.LEVELID" :key="item.id" :value="item.id" :label="item.name" />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="50">
        <el-col :span="12">
          <el-form-item label="报警分类" prop="warningClassIfyId">
            <el-select class="width-100" v-model="form.warningClassIfyId">
              <el-option v-for="item in state.warningClassifyList" :key="item.id" :value="item.id" :label="item.name" />
            </el-select>
          </el-form-item>
        </el-col>
        <!-- <el-col :span="12">
          <el-form-item label="报警类型" prop="warningTypeId">
            <el-select class="width-100" v-model="form.warningTypeId">
              <el-option v-for="item in warningTypeList" :key="item.id" :value="item.id" :label="item.name" />
            </el-select>
          </el-form-item>
        </el-col> -->
        <el-col :span="12">
          <el-form-item label="是否启用" prop="enabled">
            <el-radio-group v-model="form.enabled">
              <el-radio-button label="1">是</el-radio-button>
              <el-radio-button label="0">否</el-radio-button>
            </el-radio-group>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="50">
        <el-col :span="12">
          <el-form-item label="关联部件" prop="relatedParts">
            <el-select class="width-100" v-model="form.relatedParts">
              <el-option v-for="item in state.relatePartList" :key="item.id" :value="item.id" :label="item.name" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="是否可以复位" prop="isreset">
            <el-radio-group v-model="form.isreset">
              <el-radio-button label="0">是</el-radio-button>
              <el-radio-button label="1">否</el-radio-button>
            </el-radio-group>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="50">
        <el-col :span="12"></el-col>
      </el-row>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="closeDialog">取 消</el-button>
        <el-button type="primary" @click="submitForm(ruleFormRef)">确 定</el-button>
      </span>
    </template>
  </el-dialog>
</template>
<script setup>
import { ref, onMounted, reactive, computed, watch, nextTick } from "vue";
import { ElMessageBox, ElMessage } from "element-plus";
import {
  fetchRelatePart,
  windturbinebj_postSave,
  getDIPointList,
  getStationinfo,
  fetchWarningClassify,
} from "/@/api/api.js";
import { useStore } from "vuex";
const store = useStore();
const stationList = computed(() => store.state.stationList);
onMounted(() => {
  getfetchRelatePart();
  getdatadictionaryList()
  getfetchWarningClassify()
});
watch(
  () => props.isVisible,
  (val, old) => {
    isShow.value = val
  },
  {
    deep: true,
  },
);
watch(
  () => props.form?.id,
  (val, old) => {
    if (val != "") {
      nextTick(async () => {
        modelChange()
      });
    }
  },
  {
    deep: true,
  },
);
watch(
  () => props.form,
  (val, old) => {
    nextTick(() => {
      form.value = val
    });
  },
  {
    deep: true,
  }
)
const isShow=ref(false);
const form = ref({
  id: "",
  levelId: "",
  manufacturerCode: "",
  chineseText: "",
  sequenceNumber: "",
  characteristic: "",
  modelId: "",
  codeName: "1",
  uniformCode: "",
  enabled: "0",
  warningClassIfyId: "",
  standardTime: 2,
  isreset: "1",
  warningTypeId: "",
  faultCode: "",
  relatedParts: "",
  userName: "",
})
const emits = defineEmits(["close"]);
const props = defineProps({
  isVisible: {
    type: Boolean,
    defaule: false,
  },
  form: {
    type: Object,
  },
});
const toEmits = () => {
  emits("close"); // 向父组件传递数据
};
const state = reactive({
  modelList: [],
  pointList: [],
  relatePartList: [],
  warningClassifyList: [],
  creator: [
    {
      id: "HFYG_CS",
      name: "合肥阳光电源有限公司",
      country: "中国",
      place: "合肥",
    },
    { id: "AMS_CS", name: "艾默生", country: "", place: "" },
    {
      id: "NRJD_CS",
      name: "国电南瑞吉电新能源",
      country: "中国",
      place: "",
    },
    { id: "MGSK_CS", name: "美国赛康", country: "美国", place: "" },
    { id: "LHDL_CS", name: "联合动力", country: "中国", place: "保定" },
    { id: "SYHC_CS", name: "沈阳华创", country: "中国", place: "沈阳" },
  ],
  LEVELID: [
    { id: "ZC_BJ", name: "运转正常" },
    { id: "YJ_BJ", name: "运转状态超出标准范围" },
    { id: "GZ_BJ", name: "非正常停止运转" },
    { id: "WH_BJ", name: "停机维护" },
    { id: "XD_BJ", name: "限电/计划停机" },
  ],
  CHARACTERISTIC: ["正常停机", "正常启动", "快速停机", "紧急停机"],

});
const ruleFormRef = ref(null);
const rules = reactive({
  manufacturerCode: {
    required: true,
    message: "请选择制造商",
    trigger: "change",
  },
  uniformCode: {
    required: true,
    message: "请输入统一编码",
    trigger: "trigger",
  },
  characteristic: {
    required: true,
    message: "请选择类别",
    trigger: "trigger",
  },
  modelId: {
    required: true,
    message: "请选择风机型号",
    trigger: "change",
  },
});

const modelChange = async () => {
  const { data } = await getDIPointList(form.value?.modelId);
  state.pointList = data
};
//机型
const getdatadictionaryList = async () => {
  const { data } = await getStationinfo('');
    let arr = []
    data.forEach(e => {
      arr.push(...e.pointModelList)
    });
    state.modelList = [...new Set(arr)]
};
//所属部件
const getfetchRelatePart = async () => {
  const res = await fetchRelatePart();
  state.relatePartList = res;
};
const getfetchWarningClassify = async () => {
  const res = await fetchWarningClassify();
  state.warningClassifyList = res;
};

//保存
const save = async () => {
  const res = await windturbinebj_postSave(form.value);
  console.warn(res);
  ElMessage.success(`保存成功!`);
  closeDialog()
};
//提交
const submitForm = async (formEl) => {
  if (!formEl) return;
  await formEl.validate((valid, fields) => {
    if (valid) {
      save()
    } else {
      console.log("error submit!", fields);
    }
  });
};
//reset
const resetForm = (formEl) => {
  if (!formEl) return;
  formEl.resetFields();
};
//confirm关闭
const handleClose = () => {
  ElMessageBox.confirm("确认关闭？")
    .then(() => {
      closeDialog();
    })
    .catch(() => {
      // catch error
    });
};
//关闭触发事件
const closeDialog = () => {
  resetForm(ruleFormRef.value);
  toEmits();
};
</script>
<style scoped>
.width-100 {
  width: 100%;
}
</style>