<template>
  <div>
    <div
      class="rate-list-view"
      v-for="(item, index) in whitelistUser"
      :key="index">
      <el-form-item
        label-width="130px"
        label="Mobile Number"
        :rules="rules.mobileNumber">
        <el-input
          v-model="item.mobileNumber"
          class="rate-text"
          @blur="onChange"/>
        <!-- <div class="el-form-item__error">Please type mobile number</div> -->
      </el-form-item>
      <el-form-item
        label-width="140px"
        label="Licence Number"
        :rules="rules.licenceNumber">
        <el-input
          v-model="item.licenceNumber"
          class="rate-text"
          @blur="onChange"/>
        <!-- <div class="el-form-item__error">Please type licence number</div> -->
      </el-form-item>
      <img
        class="list-item-icon"
        @click="handleClickSubWhiteUserButton(item, index)"
        src="../../../assets/form-list-sub.png"/>
      <img
        v-if="index === whitelistUser.length - 1"
        class="list-item-icon"
        @click="handleClickAddWhiteUserButton"
        src="../../../assets/form-list-add.png"/>
    </div>
  </div>
</template>

<script>
import site from '@/http/api/site'
export default {
  name: 'WhiteListUser',
  props: {
    value: {
      type: Array,
      required: true
    }
  },
  model: {
    prop: 'value',
    event: 'change'
  },
  data() {
    return {
      whitelistUser: [{
        licenceNumber: '',
        mobileNumber: '',
      }],
      rules: {
        mobileNumber: {
          
        },
        licenceNumber: {
          
        },
        whitelistUser: {
          licenceNumber: {
            required: true,
            trigger: 'blur',
            message: 'Licence Number is required',
          },
          mobileNumber: {
            required: true,
            trigger: 'blur',
            message: 'Mobile Number is required',
          }
        }
      }
    }
  },
  watch: {
    value: {
      deep: true,
      handler(n, o) {
        this.whitelistUser = n;
      }
    }
  },
  mounted() {
    this.whitelistUser = this.value;
    if (this.whitelistUser.length === 0) {
      this.handleClickAddWhiteUserButton();
    }
  },
  methods: {
    onChange() {
      this.$emit('change', this.whitelistUser);
    },
    handleClickAddWhiteUserButton() {
      this.whitelistUser.push({
        mobileNumber: '',
        licenceNumber: '',
      })
      this.onChange();
    },
    handleClickSubWhiteUserButton(user, index) {
      if (user.whitelistPk) {
        this.$confirm('Are you sure you want to delete this user?', 'Delete', {
          confirmButtonText: 'Ok',
          cancelButtonText: 'Cancel',
          type: 'warning',
        }).then(() => {
          this.deleteWhiteUser(user, index);
        });
      } else {
        this.whitelistUser.splice(index, 1)
        if (this.whitelistUser.length === 0) {
          this.handleClickAddWhiteUserButton();
        }
      }
    },
    deleteWhiteUser(user, index) {
      site.deleteWhitelistUser({whitelistPk: user.whitelistPk}).then(() => {
        this.whitelistUser.splice(index, 1)
        if (this.whitelistUser.length === 0) {
          this.handleClickAddWhiteUserButton();
        }
      }).catch((error) => {
        this.$notify({
          type: 'error',
          message: error,
          title: 'Delete user failed'
        })
      })
    }
  }
}
</script>

<style scoped>
.rate-list-view {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}
.rate-text {
  max-width: 150px;
  padding-right: 14px;
}
.list-item-icon {
  width: 30px;
  height: 30px;
  cursor: pointer;
  margin: 0 10px 22px;
}
</style>