<template>
  <el-dialog title="New Group" :visible.sync="groupDialogVisible" width="30%">
    <div class="dialog-content">
      <div class="detail">
        <p><span>Brand:</span>{{ data.brand }}</p>
        <p><span>Model COde:</span>{{ data.modelCode }}</p>
        <p><span>Model Year:</span>{{ data.modelYear }}</p>
        <p><span>ADS Version:</span> {{ data.adsVersion }}</p>
        <p>
          <span>Online status:</span>
          {{ data.onlineStatus == "0" ? "On" : "Off" }}
        </p>
        <p>
          <span>Vehicle Length:</span>{{ data.groupList ? data.groupList.length : "0" }}
        </p>
      </div>
      <div class="form-item">
        <label>Group Name:</label>
        <el-input v-model="groupName" clearable />
      </div>
      <el-checkbox v-model="isAutomatic">Automatic updates</el-checkbox>
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button @click="groupDialogVisible = false">Cancel</el-button>
      <el-button type="primary" @click="submit()">Submit</el-button>
    </span>
  </el-dialog>
</template>

<script>
import { PostcreateGroup } from "@/api/vehicle";
import { removeNull } from "@/utils/utils";
export default {
  data() {
    return {
      groupDialogVisible: false,
      groupName: "",
      isAutomatic: false,
      data: {},
    };
  },
  methods: {
    show(data) {
      this.groupName = "";
      this.data = data;
      this.groupDialogVisible = true;
    },
    submit() {
      let vehicles = this.data.groupList.map((item) => {
        return item.vin;
      });
      if (!this.groupName) {
        this.$message.info("plesase input groupName");
      }
      let data = {
        groupName: this.groupName,
        autoUpdate: this.isAutomatic ? "0" : "1",
        comments: "",
        vehicles: vehicles,
        additionalProperties: {
          brand: this.data.brand,
          modelCode: this.data.modelCode,
          modelYear: this.data.modelYear,
          adsVersion: this.data.adsVersion,
          existGroup: this.data.existGroup,
          onlineStatus: this.data.onlineStatus,
          vin: this.data.vin,
        },
      };
      PostcreateGroup(data).then((res) => {
        if (res.httpCode == 200) {
          this.groupDialogVisible = false;
          this.$message.success("add success.");
          this.$emit('addSuccess')
        } else {
          this.$message.success(res.msg);
        }
      });
    },
  },
};
</script>
