<template>
  <el-dialog title="New Ticket" :visible.sync="ticketDialogVisible" width="30%">
    <div class="dialog-content">
      <div class="form-item">
        <label>Ticket Name:</label>
        <el-input v-model="ticketName" clearable />
      </div>
      <div class="form-item">
        <label>comment:</label>
        <el-input v-model="comment" type="textarea" clearable />
      </div>
      <div class="form-item flex-row-center">
        <label>Vehicle Length:</label>
        {{ data.ticketList ? data.ticketList.length :'' }}
      </div>
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button @click="ticketDialogVisible = false">Cancel</el-button>
      <el-button type="primary" @click="submit()">Submit</el-button>
    </span>
  </el-dialog>
</template>
<script>
import { PostaddTicket } from "@/api/vehicle";
import { removeNull } from "@/utils/utils";
export default {
  data() {
    return {
      ticketDialogVisible: false,
      ticketName: "",
      comment: "",
      data: {},
    };
  },
  methods: {
    show(data) {
      this.ticketName = "";
      this.comment = "";
      this.data = data;
      this.ticketDialogVisible = true;
    },
    submit() {
      let vehicles = this.data.ticketList.map((item) => {
        return item.vin;
      });
      if (!this.ticketName) {
        this.$message.info("plesase input ticketName");
      }
      let data = {
        ticketName: this.ticketName,
        vinList: vehicles,
        comments: this.comment,
      };
      PostaddTicket(data).then((res) => {
        if (res.httpCode == 200) {
          this.ticketDialogVisible = false;
          this.$message.success("add success.");
          this.$emit("addSuccess");
        } else {
          this.$message.success(res.msg);
        }
      });
    },
  },
};
</script>
