<style scoped lang="scss">

</style>
<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"
          :rules="rules"
          label-position="top"
          ref="formRef"
          size="default"
          label-width="100px"
          class="mt5">
        <ext-select
            v-model="state.ruleForm.deviceConfigId"
            placeholder="请选择要绑定的配置"
            url="device-config/list"
            url-method="post"
            label-key="name"
            value-key="id"
            data-key="list"
            clearable
            class="wd300 ml10"/>
      </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>

<script setup lang="ts" name="DeviceConfigDialog">
import {defineAsyncComponent, reactive, onMounted, ref} from 'vue';
import {Msg} from "/@/utils/message";
import {$body, $get} from "/@/utils/request";
import u from '/@/utils/u'
import ExtSelect from "/@/components/form/ExtSelect.vue";


// 定义子组件向父组件传值/事件
const emit = defineEmits(['refresh']);
const formRef = ref();
//定义初始变量，重置使用
const initState = () => ({
  ruleForm: {
    id: 0,
    deviceIds:[]
  },
  btnLoading: false,
  dialog: {
    isShowDialog: false,
    type: '',
    title: '',
    submitTxt: '',
  },
  rules: {},
})

// 定义变量内容
const state = reactive(initState());


// 打开弹窗
const open = ( deviceIds: any) => {
  state.ruleForm.deviceIds = deviceIds
  state.dialog.submitTxt ="绑定"
  state.dialog.isShowDialog = true;
};
// 关闭弹窗
const onClose = () => {
  state.dialog.isShowDialog = false;
  Object.assign(state, initState())
};
// 取消
const onCancel = () => {
  onClose();
};
// 提交
const onSubmit = () => {
  state.btnLoading = true;
  $body(`device-config/batchModify`, state.ruleForm).then(() => {
    state.btnLoading = false;
    Msg.message('绑定成功');
    onClose();
    emit('refresh');
  }).catch(e => {
    state.btnLoading = false;
  })
};


// 暴露变量
defineExpose({
  open
});


</script>