<template>
  <el-dialog v-model="isShow" width="500px" :before-close="handleClose">
    <el-form ref="ruleFormRef" :model="form" :rules="rules" label-position="right" label-width="80px">
      <el-form-item label="场站" prop="stationId">
        <el-select v-model="form.stationId" placeholder="场站" class="el-component" @change="stationChange">
          <el-option v-for="item in stationListAll" :key="item.id" :value="item.id" :label="item.name"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="报警类型" prop="category1">
        <el-select v-model="form.category1" placeholder="报警类型" class="el-component">
          <el-option key="1" label="升压站" value="SYZ"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="测点名称" prop="pointKey">
        <!-- <el-select-v2 v-model="form.pointKey" filterable :options="pointList" placeholder="Please select"
          style="width: 380px" /> -->
        <el-select v-model="form.pointKey" class="m-2" placeholder="Select" size="large"  style="width: 380px">
          <el-option v-for="item in pointList" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>

      </el-form-item>
      <el-form-item label="描述" prop="description">
        <el-input v-model="form.description" type="textarea" rows="3" />
      </el-form-item>

      <el-form-item label="报警级别" prop="rank">
        <el-select v-model="form.rank" placeholder="报警级别" class="el-component">
          <el-option key="1" label="低" value="1" />
          <el-option key="2" label="中低" value="2" />
          <el-option key="3" label="中" value="3" />
          <el-option key="4" label="中高" value="4" />
          <el-option key="5" label="高" value="5" />
        </el-select>
      </el-form-item>
      <el-form-item label="报警逻辑" prop="alarmType">
        <el-select v-model="form.alarmType" placeholder="报警逻辑" class="el-component">
          <el-option key="1" label="0触发，1解除" :value="0" />
          <el-option key="2" label="1触发，0解除" :value="1" />
          <el-option key="3" label="变化触发" :value="2" />
        </el-select>
      </el-form-item>
      <el-form-item label="是否启用" prop="enabled">
        <el-select v-model="form.enabled" placeholder="是否可用" class="el-component">
          <el-option key="1" label="启用" :value="1" />
          <el-option key="2" label="停用" :value="0" />
        </el-select>
      </el-form-item>
    </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 {
  fetchElectricDIPointList,
  scadabj_postSave
} from "/@/api/api.js";
import { useStore } from "vuex";
const store = useStore();
const stationListAll = computed(() => store.state.stationListAll);
watch(
  () => props.isVisible,
  (val, old) => {
    isShow.value = val
  },
  {
    deep: true,
  },
);
watch(
  () => props.form?.id,
  (val, old) => {
    if (val != "") {
      nextTick(async () => {
        stationChange()
      });
    }
  },
  {
    deep: true,
  }
);
watch(
  () => props.form,
  (val, old) => {
    nextTick(() => {
      form.value = val
    });
  },
  {
    deep: true,
  }
)
const isShow=ref(false);
const form = ref({
  id: "",
  stationId: "",
  pointKey: "",
  description: "",
  category1: "SYZ",
  rank: "",
  alarmType: "",
  enabled: "",
  userName: "",
})
const emits = defineEmits(["close"]);
const props = defineProps({
  isVisible: {
    type: Boolean,
    defaule: false,
  },
  form: {
    type: Object,
  },
});
const toEmits = () => {
  emits("close"); // 向父组件传递数据
};
const pointList = ref([])
const ruleFormRef = ref(null);
const rules = reactive({
  stationId: [
    { required: true, message: "请选择场站", trigger: "change" },
  ],
  pointKey: [{ required: true, message: "请输入测点", trigger: "blur" }],
  description: [
    { required: true, message: "请输入描述", trigger: "blur" },
  ],
  category1: [
    { required: true, message: "请选择报警类型", trigger: "change" },
  ],
  rank: [{ required: true, message: "请选择级别", trigger: "change" }],
  alarmType: [
    { required: true, message: "请选择报警逻辑", trigger: "change" },
  ],
  enabled: [
    { required: true, message: "请选择是否可用", trigger: "change" },
  ],
});
const stationChange = async () => {
  const res = await fetchElectricDIPointList(form.value?.stationId);
  res.forEach(e => {
    e['value'] = e.id
    e['label'] = e.name
  })
  pointList.value = res
};

//保存
const save = async () => {
  const res = await scadabj_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) => {
  formEl.resetFields();
};
//confirm关闭
const handleClose = () => {
  ElMessageBox.confirm("确认关闭？")
    .then(() => {
      closeDialog();
    })
    .catch(() => {
      // catch error
    });
};
//关闭触发事件
const closeDialog = () => {
  resetForm(ruleFormRef.value);
  toEmits();
};
</script>
<style lang="scss" scoped>
.el-component {
  width: 100%;
}
</style>