<template>
  <el-dialog
    class="dialog-profile"
    :visible="visible"
    :before-close="e => hideDialog()"
    :title='isEdit ? "Edit Charging Profile" : "Set Charging Profile"'>
    <el-form
      ref="setForm"
      :model="this"
      :rules="rules">
      <div class="flexc">
        <div class="form-row flex1">
          <div class="label">Station ID:</div>
          <div class="form-text">{{item.chargeBoxId}}</div>
        </div>
        <div class="form-row flex1">
          <div class="label">Connector ID:</div>
          <div class="form-text">{{item.connectorId}}</div>
        </div>
      </div>
      <div class="form-row" v-if="isEdit">
        <div class="label">CURRENT CHARGING PROFILE:</div>
        <span
          class="link-type"
          v-if="item.description"
          @click="viewProfiles">
          {{item.description}}
        </span>
      </div>
      <div class="form-row">
        <div class="label">{{isEdit ? "CHANGE CHARGING PROFILE TO:" : "CHARGING PROFILE:"}}</div>
        <el-form-item
          prop="chargingProfilePk">
          <el-select
            class="flex-item"
            clearable
            v-model="chargingProfilePk">
            <el-option
              v-for="(item, index) in chargingProfileOptions"
              :key="index"
              :label="item.value + ' (' + item.name + ')'"
              :value="item.value"/>
          </el-select>
        </el-form-item>
      </div>
      <div class="flexcc">
        <el-button
          class="button"
          type="primary"
          :loading="loading"
          @click="onSetProfiles">
          SET
        </el-button>
      </div>
    </el-form>
  </el-dialog>
</template>

<script>
import ocpp from '@/http/api/ocpp'
export default {
  name: "DialogSetProfiles",
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    isEdit: {
      type: Boolean,
      default: false
    },
    item: {
      type: Object,
      default: {}
    }
  },
  data() {
    return {
      loading: false,
      chargingProfilePk: "",
      chargingProfileOptions: [],
      rules: {
        chargingProfilePk: {
          required: true,
          trigger: 'change',
          message: 'Please select a profile'
        }
      }
    };
  },
  mounted() {
    this.getProfileOptions();
  },
  methods: {
    hideDialog(success) {
      this.$emit("hide", success || false);
      this.chargingProfilePk = "";
      this.$nextTick(() => {
        this.$refs['setForm'].clearValidate();
      })
    },
    getProfileOptions() {
      ocpp.getChargingProfileList().then(res => {
        if (res.data) {
          this.chargingProfileOptions = res.data
        }
      })
    },
    viewProfiles() {
      this.$openRoute("/smart-energy-management/charging-profiles/view/" + this.item.chargingProfilePk)
      /*this.$router.push(({
        path: "/smart-energy-management/charging-profiles/view/" + this.item.chargingProfilePk
      }))*/
    },
    onSetProfiles() {
      this.$refs['setForm'].validate(result => {
        if (result) {
          this.setChargingProfile();
        }
      });
    },
    setChargingProfile() {
      this.loading = true;
      const params = {
        connectorId: this.item.connectorId,
        stationIds: [this.item.chargeBoxId],
        chargingProfilePk: this.chargingProfilePk
      }
      ocpp.sendPerform("ocppOperations/setChargingProfile", params).then(res => {
        this.hideDialog(true);
        this.loading = false;
        if (res.data.taskId) {
          this.$openRoute("/ocpp-operations/result/" + res.data.taskId);
          //this.$router.push({path: '/ocpp-operations/result/' + res.data.taskId});
        }
      }).catch(err => {
        this.loading = false;
        this.$message({
          type: 'error',
          message: err
        })
      });
    }
  }
}
</script>

<style scoped>
.dialog-profile >>> .el-dialog {
  width: 100%;
  max-width: 500px;
}
.form-row {
  padding: 10px 0;
}
.label {
  color: #000;
  font-size: 14px;
  line-height: 21px;
  font-weight: bold;
  padding-bottom: 10px;
}
.form-text {
  color: #333;
  font-size: 14px;
}
.button {
  margin-top: 20px;
  padding: 10px 40px;
  border-radius: 2px;
}
</style>