<template>
  <el-table
    :data="itemList"
    class="user-sub-item-table no-border">
    <el-table-column
      label="Brand:"
      min-width="90px">
      <template slot-scope="{row}">
        <el-input
          class="item-input"
          v-model="row.brand" />
      </template>
    </el-table-column>
    <el-table-column
      label="Model:"
      min-width="90px">
      <template slot-scope="{row}">
        <el-input
          class="item-input"
          v-model="row.model" />
      </template>
    </el-table-column>
    <el-table-column
      label="License Plate:"
      min-width="120px">
      <template slot-scope="{row}">
        <el-input
          class="item-input"
          v-model="row.licensePlate" />
      </template>
    </el-table-column>
    <el-table-column
      label="Action:"
      min-width="100px">
      <template slot-scope="{$index,row}">
        <div>
          <img
            class="list-item-icon"
            @click="onSubtItem($index)"
            src="../../../assets/form-list-sub.png"/>
          <img
            v-if="$index === itemList.length - 1"
            class="list-item-icon"
            @click="onAddItem"
            src="../../../assets/form-list-add.png"/>
        </div>
      </template>
    </el-table-column>
  </el-table>
</template>

<script>
import api from '@/http/api/apiUser'
export default {
  name: "ListVehicle",
  props: {
    list: {
      type: Array,
      default: () => []
    }
  },
  model: {
    prop: 'list',
    event: 'change'
  },
  data() {
    return {
      loading: false,
      itemList: [{
        vehiclePk: "",
        brand: "",
        model: "",
        licensePlate: "",
        connectorType: ""
      }],
      rules: {
        brand: [{
          required: true,
          trigger: 'blur',
          message: 'Brand is required',
        }],
        model: [{
          required: true,
          trigger: 'blur',
          message: 'Model is required',
        }],
        licensePlate: [{
          required: true,
          trigger: 'blur',
          message: 'License Plate is required',
        }]
      }
    };
  },
  watch: {
    list: {
      deep: true,
      handler(n, o) {
        this.itemList = n || [];
        if (this.itemList.length === 0) {
          this.onAddItem();
        } else {
          this.onChange();
        }
      }
    }
  },
  methods: {
    onChange() {
      this.$emit('change', this.itemList);
    },
    onAddItem() {
      this.itemList.push({
        brand: '',
        model: '',
        licensePlate: '',
        connectorType: ''
      })
      this.onChange();
    },
    onSubtItem(index) {
      let item = this.itemList[index]
      if (item.vehiclePk) {
        this.$confirm("Are you sure you want to delete this vehicle ?", "Delete", {
          confirmButtonText: 'OK',
          cancelButtonText: 'Cancel',
          type: 'warning'
        }).then(() => {
          this.loading = true
          this.deleteItem(item.vehiclePk, index);
        })
      } else {
        this.itemList.splice(index, 1)
        if (this.itemList.length === 0) {
          this.onAddItem();
        }
      }
    },
    deleteItem(id, index) {
      api.deleteUserVehicle(id).then(() => {
        this.itemList.splice(index, 1);
        if (this.itemList.length === 0) {
          this.onAddItem();
        }
      }).catch((error) => {
        this.$message({
          message: error,
          type: 'error',
        })
      }).finally(() => {
        this.loading = false
      })
    }
  }
}
</script>

<style scoped>
  .user-sub-item-table >>> .el-table__header th {
    background: transparent;
    border: none;
    padding: 10px 0;
  }
  .user-sub-item-table >>> td {
    border: none;
    padding: 1px 0;
    background: #fff !important;
  }
  .user-sub-item-table >>> .cell {
    padding: 0 8px;
  }
  .user-sub-item-list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
  }
  .item-input {
    min-width: 80px;
  }
  .list-item-icon {
    width: 30px;
    height: 30px;
    cursor: pointer;
    margin: 5px 0px;
  }
  .list-item-icon + .list-item-icon {
    margin-left: 15px;
  }
</style>