<template>
  <el-dialog v-model="props.modelValue" :title="props.title" @close="close" width="800" @open="getListDeviceConfig">
    <el-form ref="formRef" :model="props.form" :rules="rules" label-width="150px">
      <el-form-item :label="tLang('device', '类型名称')" prop="name">
        <el-input v-model="props.form.name" :placeholder="tLang('common', '请输入') + tLang('device', '类型名称')" />
      </el-form-item>
      <el-form-item :label="tLang('device', '关联配置')" prop="defalutConfig">
        <el-select v-model="props.form.defalutConfig" multiple filterable :placeholder="tLang('common', '请选择')">
          <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button type="primary" @click="submitForm">{{ tLang('common', '确 定') }}</el-button>
        <el-button @click="cancel">{{ tLang('common', '取 消') }}</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
import { ref } from "vue";
import { listDeviceConfig} from "@/api/pms/device.js";

const { proxy } = getCurrentInstance();
const emit = defineEmits();
const props = defineProps({
  modelValue: [String, Object, Array],
  title: String,
  form: {
    type: Object,
    default: () => ({}),
  },
});
const formRef = ref(null);
const baseUrl = import.meta.env.VITE_APP_BASE_API;
const rules = {
  deviceCode: [
    { required: true, message: `${proxy.tLang('produce', '设备编码')} ` + proxy.tLang('validate', '不能为空'), trigger: "blur" }
  ]
}
let loading = ref(false);
const options = ref([]);

const getListDeviceConfig = (query) => {
    listDeviceConfig({pageSize:100}).then(res=>{
      loading.value = false
      options.value = res.rows.map(item => {
        return {
          value: item.code,
          label: item.name
        }
      })
    })
}

function validateStarttime(rule, value, callback) {
  let start = new Date(props.form.starttime).getTime();
  let end = new Date(props.form.endtime).getTime();
  if (start > end) {
    callback(new Error('开始时间不能大于结束时间'));
  } else {
    callback();
  }
}
function close() {
  emit("update:modelValue", false);
}
function submitForm() {
  formRef.value.validate(valid => {
    if (valid) {
      emit("submitForm", props.form);

    }
  });

}
function cancel() {
  emit("update:form", {});
  close();
}
</script>

<style lang="scss" scoped></style>
