<template>
  <el-dialog
    class="dialog-profile"
    :visible="visible"
    :before-close="e => hideDialog()"
    title="Clear Charging Profile">
    <el-form
      ref="setForm"
      :model="params"
      :rules="rules">
      <div class="form-row">
        <div class="label">Filter Type:</div>
        <el-form-item
          prop="filterType"
          class="form-item">
          <el-select
            v-model="params.filterType"
            class="flex-item"
            clearable
            @change="changeFilterType">
            <el-option
              v-for="(item, index) in filterTypeOptions"
              :key="index"
              :label="item.name"
              :value="item.value"/>
          </el-select>
        </el-form-item>
      </div>
      <div class="form-row" v-if="params.filterType == 'ChargingProfileId'">
        <div class="label">CURRENT CHARGING PROFILE:</div>
        <div
          class="underline"
          v-if="item.description"
          @click="viewProfiles">
          {{item.description}}
        </div>
      </div>
      <template v-else-if="params.filterType == 'OtherParameters'">
        <div class="form-row">
          <div class="label">Charging Profile Purpose:</div>
          <el-form-item
            prop="chargingProfilePurpose"
            class="form-item">
            <el-select
              clearable
              v-model="params.chargingProfilePurpose"
              class="flex-item">
              <el-option
                v-for="(item, index) in chargingPurposeOptions"
                :key="index"
                :label="item.name"
                :value="item.value"/>
            </el-select>
          </el-form-item>
        </div>
        <div class="form-row">
          <div class="label">Stack Level (Integer):</div>
          <el-form-item
            prop="filterType"
            class="form-item">
            <el-input
              v-model="params.stackLevel"
              class="flex-item"/>
          </el-form-item>
        </div>
      </template>
      <div class="flexcc">
        <el-button
          class="button"
          type="primary"
          :loading="loading"
          @click="onClearProfiles">
          CLEAR
        </el-button>
      </div>
    </el-form>
  </el-dialog>
</template>

<script>
import ocpp from '@/http/api/ocpp'
import chargeProfile from '@/http/api/chargingProfile'
export default {
  name: "DialogClearProfiles",
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    item: {
      type: Object,
      default: {}
    }
  },
  data() {
    return {
      loading: false,
      params: {
        filterType: "ChargingProfileId",
        connectorId: "",
        stackLevel: "",
        chargingProfilePurpose: ""
      },
      filterTypeOptions: [],
      chargingProfileOptions: [],
      chargingPurposeOptions: [],
      rules: {
        filterType: {
          required: true,
          trigger: 'change',
          message: 'Please select a type'
        },
        chargingProfilePurpose: {
          required: true,
          trigger: 'change',
          message: 'Please select a profile purpose'
        }
      }
    };
  },
  mounted() {
    this.getFilterTypeOptions();
    this.getProfileOptions();
  },
  methods: {
    hideDialog(success) {
      this.$emit("hide", success || false);
      this.params = {
        filterType: "ChargingProfileId",
        stackLevel: "",
        chargingProfilePurpose: ""
      }
    },
    getProfileOptions() {
      ocpp.getChargingProfileList().then(res => {
        if (res.data) {
          this.chargingProfileOptions = res.data;
        }
      })
    },
    getFilterTypeOptions() {
      ocpp.getClearChargingProfileFilterType().then(res => {
        if (res.data) {
          this.filterTypeOptions = res.data;
          if (res.data.length > 0) {
            this.params.filterType = res.data[0].value;
          }
        }
      })
      this.getPurposeOptions();
    },
    getPurposeOptions() {
      chargeProfile.getPurposeOptionList().then(res => {
        if (res.data) {
          this.chargingPurposeOptions = res.data;
        }
      })
    },
    viewProfiles() {
      this.$openRoute("/smart-energy-management/charging-profiles/view/" + this.item.chargingProfilePk);
    },
    changeFilterType() {
      //ChargingProfileId
      this.params.stackLevel = "";
      this.params.chargingProfilePurpose = "";
      this.$refs['setForm'].clearValidate();
    },
    onClearProfiles() {
      this.$refs['setForm'].validate(result => {
        if (result) {
          this.clearChargingProfile();
        }
      });
    },
    clearChargingProfile() {
      this.loading = true;
      const params = {
        stationIds: [this.item.chargeBoxId],
        ...this.params
      }
      if (this.params.filterType == "ChargingProfileId") {
        params.chargingProfilePk = this.item.chargingProfilePk
        params.chargingProfilePurpose = undefined;
      } else {
        params.connectorId = this.item.connectorId
      }
      ocpp.sendPerform("ocppOperations/clearChargingProfile", 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;
}
.form-item {
  margin-bottom: 0;
}
.button {
  margin-top: 20px;
  padding: 10px 40px;
  border-radius: 2px;
}
</style>