<template>

  <el-dialog :title="title" :visible.sync="dialogVisible"  @open="handleOpen" width="600px" append-to-body :close-on-click-modal="false">
    <el-form ref="form" :model="form" :rules="rules" label-width="6em">
      <el-row :gutter="gutter">
        <el-form-item label="设备型号" prop="modelId">
          <el-select  style="width: 100%" v-model="form.modelId" filterable clearable placeholder="请选择型号" >
            <el-option
              v-for="item in modelOptions"
              :key="item.modelId"
              :label="`${item.model} (${item.modelName})`"
              :value="item.modelId">
            </el-option>
          </el-select>
        </el-form-item>
        <form-col :span="16"  label="设备名称" prop="deviceName" >
          <el-input v-model="form.deviceName" placeholder="请输入设备名称"/>
        </form-col>
        <form-col :span="16"  label="MAC-1" prop="mac">
          <el-input v-model="form.mac" placeholder="请输入设备MAC-1" />
        </form-col>
        <form-col :span="16"  label="MAC-2" prop="mac2">
          <el-input v-model="form.mac2" placeholder="请输入设备MAC-2" />
        </form-col>
        <form-col :span="16"  label="SN" prop="deviceNo">
          <el-input v-model="form.deviceNo" placeholder="请输入设备SN" />
        </form-col>
        <form-col :span="16"  label="备注" prop="remark">
          <el-input v-model="form.remark" type="textarea" placeholder="请输入内容" />
        </form-col>
      </el-row>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="submitForm">确 定</el-button>
      <el-button @click="cancel">取 消</el-button>
    </div>
  </el-dialog>
</template>

<script>
import CollapsePanel from '@/components/CollapsePanel/index.vue'
import {listModel} from "@/api/bst/model";
import {addDevice, getDevice, updateDevice} from "@/api/bst/device";
import {isSysAdmin} from "@/utils/permission";
export default {

  name: 'DeviceEditDialog',
  components: { CollapsePanel },
  dicts: ['device_service_mode'],
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    deviceId: {
      type: String,
      default: null,
    }
  },
  data() {
    return {
      modelOptions: [],
      loading: false,
      showFee: true,
      form: {
      },
      span: 8,
      gutter: 8,
      rules: {
        deviceNo: [
          { required: true, message: "设备SN不能为空", trigger: "blur" }
        ],
        modelId: [
          { required: true, message: "型号不能为空", trigger: "blur" }
        ],
        mac: [
          { required: true, message: "设备Mac号不能为空", trigger: "blur" }
        ],
        createTime: [
          { required: true, message: "创建时间不能为空", trigger: "blur" }
        ],
      }
    }
  },
  created() {
    if (isSysAdmin()){
      this.getModelList();
    }
  },
  computed: {
    title() {
      return this.form.deviceId == null ? '新增设备' : '修改设备';
    },
    dialogVisible: {
      get() {
        return this.visible;
      },
      set(val) {
        this.$emit('update:visible', val);
      }
    },
  },
  methods: {
    getModelList(){
      this.loading = true;
      listModel(this.queryParams).then(response => {
        this.modelOptions = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },
    // 打开
    handleOpen() {
      if (this.deviceId != null) {
        this.getDetail();
      } else {
        this.reset();
      }
    },
    // 获取详情
    getDetail() {
      this.loading = true;
      getDevice(this.deviceId).then(response => {
        this.form = response.data;
      }).finally(() => {
        this.loading = false;
      })
    },
    reset() {
      this.form = {
        deviceId: null,
        picture: null,
        modelId: null,
        mac: null,
        mac2: null,
        deviceNo: null,
        deviceName: null,
        serviceType: '1',
        serviceRate: null,
        remark: null,
        startTime: null,
        startUnit: "3",
        startPrice: null,
        overTime: null,
        overUnit: "3",
        overPrice: null,
        serviceMode: '1',
        // vo
        suitList: [],
      };
      this.$nextTick(() => {
        this.$refs.form?.resetFields();
      });
    },
    cancel() {
      this.dialogVisible = false;
      this.reset();
    },
    onSubmitModel(model) {
      this.form.model = model?.modelName;
      // 若是新增，则填入默认的服务费
      if (this.form.deviceId == null) {
        this.form.serviceType = model?.serviceType;
        this.form.serviceRate = model?.serviceRate;
      }
    },
    submitForm() {
      this.$refs.form.validate(valid => {
        if (valid) {
          if (this.form.deviceId != null) {
            updateDevice(this.form).then(response => {
              this.$modal.msgSuccess("修改成功");
              this.dialogVisible = false;
              this.$emit('success');
            });
          } else {
            addDevice(this.form).then(response => {
              this.$modal.msgSuccess("新增成功");
              this.dialogVisible = false;
              this.$emit('success');
            });
          }
        }
      });
    }
  }
}
</script>

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