<template>
  <el-dialog v-model="props.modelValue" :destroy-on-close="true" :title="props.title" @close="close" width="800"
    @open="dialogInit">
    <el-form ref="formRef" :model="form" :rules="rules" class="demo-form-inline" label-width="100px">
      <el-row>
        <el-col :span="8">
          <el-form-item :label="tLang('device', '设备名称')" prop="name">
            <el-input v-model="form.name" :placeholder="tLang('common', '请输入') + tLang('device', '设备名称')" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item :label="tLang('device', '机架号')" prop="label">
            <el-input v-model="form.label" :placeholder="tLang('common', '请输入') + tLang('device', '机架号')"
              :disabled="form.id !== null" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item :label="tLang('device', '设备编码')" prop="code">
            <el-input v-model="form.code" :placeholder="tLang('common', '请输入') + tLang('device', '设备编码')"
              :disabled="form.id !== null" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item :label="tLang('device', '设备类型')" prop="type">
            <el-select v-model="form.type" :placeholder="tLang('common', '请选择') + tLang('device', '设备类型')"
              @change="devTypeChange" style="width: 200px">
              <el-option v-for="item in typeOptions" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8">
          <el-form-item :label="tLang('device', '设备型号')" prop="model">
            <el-input v-model="form.model" :placeholder="tLang('common', '请输入') + tLang('device', '设备型号')" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item :label="tLang('device', '设备版本')" prop="version">
            <el-input v-model="form.version" :placeholder="tLang('common', '请输入') + tLang('device', '设备版本')" />
          </el-form-item>
        </el-col>
        <!-- <el-col :span="8">
          <el-form-item :label="tLang('device', '机头数')" prop="machineHead">
            <el-input-number v-model="form.machineHead" :min="1" />
          </el-form-item>
        </el-col> -->
        <el-col :span="8">
          <el-form-item :label="tLang('device', '负责人')" prop="director">
            <el-input v-model="form.director" :placeholder="tLang('common', '请输入') + tLang('device', '设备负责人')" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>

        <el-col :span="8">
          <el-form-item :label="tLang('device', '生产日期')" prop="manufactureDate">
            <el-date-picker clearable v-model="form.manufactureDate" type="date" value-format="YYYY-MM-DD"
              :placeholder="tLang('common', '请输入') + tLang('device', '生产日期')">
            </el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item :label="tLang('device', '投产日期')" prop="commissionDate">
            <el-date-picker clearable v-model="form.commissionDate" type="date" value-format="YYYY-MM-DD"
              :placeholder="tLang('common', '请输入') + tLang('device', '投产日期')">
            </el-date-picker>
          </el-form-item>
        </el-col>

        <el-col :span="8">
          <el-form-item :label="tLang('device', '设备位置')" prop="deviceLocation">
            <el-input v-model="form.deviceLocation" :placeholder="tLang('common', '请输入') + tLang('device', '设备位置')" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8">
          <el-form-item :label="tLang('device', '生产厂家')" prop="manufacturer">
            <el-input v-model="form.manufacturer" :placeholder="tLang('common', '请输入') + tLang('device', '生产厂家')" />
          </el-form-item>
        </el-col>

        <el-col :span="8">
          <el-form-item :label="tLang('device', '厂家电话')" prop="contactPhone">
            <el-input v-model="form.contactPhone" :placeholder="tLang('common', '请输入') + tLang('device', '联系电话')" />
          </el-form-item>
        </el-col>

        <el-col :span="8">
          <el-form-item :label="tLang('device', '品牌')" prop="brand">
            <el-input v-model="form.brand" :placeholder="tLang('common', '请输入') + tLang('device', '品牌')" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8">
          <el-form-item :label="tLang('device', '供货商名称')" prop="supplier">
            <el-input v-model="form.supplier" :placeholder="tLang('common', '请输入') + tLang('device', '供货商名称')" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item :label="tLang('device', '供货商联络人')" prop="supplierContactPerson">
            <el-input v-model="form.supplierContactPerson"
              :placeholder="tLang('common', '请输入') + tLang('device', '供货商联络人')" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item :label="tLang('device', '供应商电话')" prop="supplierPhoneNumber">
            <el-input v-model="form.supplierPhoneNumber"
              :placeholder="tLang('common', '请输入') + tLang('device', '联系电话')" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <!-- <el-col :span="8">
          <el-form-item :label="tLang('device', '产线名称')" prop="lineName">
            <el-input v-model="form.lineName" :placeholder="tLang('common', '请输入') + tLang('device', '产线名称')" />
          </el-form-item>
        </el-col> -->
        <el-col :span="8">
          <el-form-item :label="tLang('device', '保养周期')" prop="maintenance">
            <el-input v-model="form.maintenance" :placeholder="tLang('common', '请输入') + tLang('device', '保养周期')" />
          </el-form-item>
        </el-col>
      </el-row>




      <el-form-item :label="tLang('device', '图片')" prop="file">
        <image-upload v-model="form.file" />
      </el-form-item>
      <el-form-item :label="tLang('device', '保养手册')" prop="maintenanceManual">
        <file-upload v-model="form.maintenanceManual" :download="true" :fileType="[]" />
      </el-form-item>
      <el-form-item :label="tLang('device', '备注')" prop="remark">
        <el-input v-model="form.remark" :placeholder="tLang('common', '请输入') + tLang('device', '备注')" />
      </el-form-item>
      <br />
      <el-divider content-position="center">
        <el-form-item label="设备配置">
          <el-row>
            <el-col :span="12">
              <el-select v-model="singleConfig" :placeholder="tLang('common', '请选择') + tLang('device', '设备配置')">
                <el-option v-for="item in configOptions" :key="item.value" :label="item.label" :value="item.value" />
              </el-select>
            </el-col>
            <el-col :span="12">
              <el-button @click="addDomain">添加配置</el-button>
            </el-col>
          </el-row>
        </el-form-item>
      </el-divider>
      <el-row>
        <el-col :span="8" v-for="(item, index) in form.configList" :key="item.code">
          <el-form-item :label="tLang('device', item.name)">
            <el-input v-model="item.value" :placeholder="tLang('common', '请输入') + tLang('device', item.name)">
              <template #suffix>
                <el-icon class="el-input__icon" @click="removeDomain(index)">
                  <Close />
                </el-icon>
              </template>
            </el-input>
          </el-form-item>
        </el-col>
      </el-row>

    </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 { listDeviceType, getNamesByType, listDeviceConfig } from "@/api/pms/device.js";
const { proxy } = getCurrentInstance();
const emit = defineEmits();
const props = defineProps({
  modelValue: Boolean,
  title: String,
  form: {
    type: Object,
    default: () => ({}),
  },
});
const formRef = ref(null);
const baseUrl = import.meta.env.VITE_APP_BASE_API;
const rules = {
  name: [
    { required: true, message: `${proxy.tLang('device', '设备名称')} ` + proxy.tLang('validate', '不能为空'), trigger: "blur" }
  ],
  label: [
    { required: true, message: `${proxy.tLang('device', '机架号')} ` + proxy.tLang('validate', '不能为空'), trigger: "blur" }
  ],
  type: [
    { required: true, message: `${proxy.tLang('device', '设备类型')} ` + proxy.tLang('validate', '不能为空'), trigger: "change" }
  ],
  director: [
    { required: true, message: `${proxy.tLang('device', '负责人')} ` + proxy.tLang('validate', '不能为空'), trigger: "blur" }
  ],
}
const configOptions = ref([]);
const typeOptions = ref([]);
const singleConfig = ref(null);
function dialogInit() {
  getListDeviceConfig();
  getListDeviceType();
}

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

function getListDeviceType(query) {
  listDeviceType({ pageSize: 100 }).then(res => {
    typeOptions.value = res.rows.map(item => {
      return {
        value: item.code,
        label: item.name
      }
    })
  })
}

function devTypeChange(value) {
  console.log(value);
  getNamesByType(value).then(res => {
    if (res.code === 200) {
      props.form.configList = res.data.map(item => {
        return {
          code: item.code,
          name: item.name,
          value: ''
        }
      })

    }
  })
}
//添加配置
function addDomain() {
  if (singleConfig) {
    let domain = configOptions.value.find(item => item.value === singleConfig.value);
    let index = props.form.configList.findIndex(item => item.code === domain.value);
    if (index > -1) {
      return;
    }
    props.form.configList.push({
      code: domain.value,
      name: domain.label,
      value: ''
    });
  }
}
//删除配置
function removeDomain(domain) {
  props.form.configList.splice(domain, 1);
}
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>
.el-input__icon {
  cursor: pointer;
}
</style>
