<script setup lang="ts">
import { reactive, ref } from "vue";
import { ElMessage } from "element-plus";
import { batchModifyDeviceConfig, getDeviceConfigList } from "@/api/device-config";

defineOptions({ name: "DeviceConfigDialog" });

const emit = defineEmits(["refresh"]);
const formRef = ref();

const initState = () => ({
  ruleForm: {
    id: 0,
    deviceConfigId: null as number | null,
    deviceIds: [] as number[]
  },
  btnLoading: false,
  dialog: {
    isShowDialog: false,
    type: "",
    title: "",
    submitTxt: ""
  },
  deviceConfigOptions: [] as Array<{ label: string; value: number }>
});

const state = reactive(initState());

const open = (deviceIds: any) => {
  state.ruleForm.deviceIds = deviceIds;
  state.dialog.submitTxt = "绑定";
  state.dialog.isShowDialog = true;
  loadDeviceConfigOptions();
};

const loadDeviceConfigOptions = () => {
  getDeviceConfigList({ pageNum: 1, pageSize: 200 }).then((res: any) => {
    const list = res?.list || [];
    state.deviceConfigOptions = list.map((item: any) => ({
      label: item.name,
      value: item.id
    }));
  });
};

const onClose = () => {
  state.dialog.isShowDialog = false;
  Object.assign(state, initState());
};

const onCancel = () => {
  onClose();
};

const onSubmit = () => {
  if (!state.ruleForm.deviceConfigId) {
    ElMessage.warning("请选择要绑定的配置");
    return;
  }
  state.btnLoading = true;
  batchModifyDeviceConfig({
    deviceConfigId: state.ruleForm.deviceConfigId,
    deviceIds: state.ruleForm.deviceIds
  })
    .then(() => {
      state.btnLoading = false;
      ElMessage.success("绑定成功");
      onClose();
      emit("refresh");
    })
    .catch(() => {
      state.btnLoading = false;
    });
};

defineExpose({ open });
</script>

<template>
  <div class="system-dialog-container">
    <el-dialog
      title="批量绑定设备配置"
      v-model="state.dialog.isShowDialog"
      width="420px"
      draggable
      destroy-on-close
      :close-on-click-modal="false"
      align-center
    >
      <el-form
        inline
        :model="state.ruleForm"
        label-position="top"
        ref="formRef"
        size="default"
        label-width="100px"
        class="mt5"
      >
        <el-form-item label="选择配置" style="width: 100%">
          <el-select
            v-model="state.ruleForm.deviceConfigId"
            placeholder="请选择要绑定的配置"
            clearable
            style="width: 100%"
          >
            <el-option
              v-for="opt in state.deviceConfigOptions"
              :key="opt.value"
              :label="opt.label"
              :value="opt.value"
            />
          </el-select>
        </el-form-item>
      </el-form>

      <template #footer>
        <span class="dialog-footer">
          <el-button @click="onCancel" size="default">取 消</el-button>
          <el-button :loading="state.btnLoading" type="primary" @click="onSubmit" size="default">
            {{ state.dialog.submitTxt }}
          </el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>
