<template>
  <div class="card-container">
    <div class="card-content" v-loading="loading">
      <el-form
        :model="editForm"
        :rules="rule"
        ref="editForm"
        label-position="left"
        style="width: 100%;">
        <el-row :gutter="20">
          <el-col :span="24">
            <div class="section-title">Charge Station Information</div>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :xs="24" :md="12">
            <el-form-item
              label="Charge Station ID:"
              prop="chargeBoxId"
              label-width="210px">
              <el-input
                class="add-text"
                v-model="editForm.chargeBoxId"
                placeholder="Add text"
                maxlength="30"
                readonly/>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :xs="24" :md="12">
            <el-form-item
              label="Endpoint Address:"
              label-width="210px">
              <span class="add-text">{{editForm.endpointAddress}}</span>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :md="12">
            <el-form-item
              label="OCPP Protocol:"
              label-width="210px">
              <span class="add-text">{{editForm.ocppProtocol}}</span>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :xs="24" :md="12">
            <el-form-item
              label="Charge Point Vendor:"
              label-width="210px">
              <span class="add-text">{{editForm.chargePointVendor}}</span>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :md="12">
            <el-form-item
              label="Charge Point Model:"
              label-width="210px">
              <span class="add-text">{{editForm.chargePointModel}}</span>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :xs="24" :md="12">
            <el-form-item
              label="Charge Point Serial Number:"
              label-width="210px">
              <span class="add-text">{{editForm.chargePointSerialNumber}}</span>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :md="12">
            <el-form-item
              label="ICCID:"
              label-width="210px">
              <span class="add-text">{{editForm.iccid}}</span>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :xs="24" :md="12">
            <el-form-item
              label="Charge Box Serial Number:"
              label-width="210px">
              <span class="add-text">{{editForm.chargeBoxSerialNumber}}</span>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :md="12">
            <el-form-item
              label="Meter Type:"
              label-width="210px">
              <span class="add-text">{{editForm.meterType}}</span>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :xs="24" :md="12">
            <el-form-item
              label="Firmware Version:"
              label-width="210px">
              <span class="add-text">{{editForm.fwVersion}}</span>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :md="12">
            <el-form-item
              label="Meter Serial Number:"
              label-width="210px">
              <span class="add-text">{{editForm.meterSerialNumber}}</span>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :xs="24" :md="12">
            <el-form-item
              label="Firmware Update Timestamp:"
              label-width="210px">
              <span class="add-text">{{editForm.fwUpdateTimestamp}}</span>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :md="12">
            <el-form-item
              label="Diagnostics Status:"
              label-width="210px">
              <span class="add-text">{{editForm.diagnosticsStatus}}</span>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :xs="24" :md="12">
            <el-form-item
              label="IMSI:"
              label-width="210px">
              <span class="add-text">{{editForm.imsi}}</span>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :md="12">
            <el-form-item
              label="Diagnostics Timestamp:"
              label-width="210px">
              <span class="add-text">{{editForm.diagnosticsTimestamp}}</span>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :xs="24" :md="12">
            <el-form-item
              label="Last Heartbeat Timestamp:"
              label-width="210px">
              <span class="add-text">{{editForm.lastHeartbeatTimestamp}}</span>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :md="12">
            <el-form-item
              label="Registration Status:"
              label-width="210px"
              prop="registrationStatus">
              <el-select
                class="add-text"
                v-model="editForm.registrationStatus"
                placeholder="Add text">
                <el-option
                  v-for="(item, index) in registerOptions"
                  :key="index"
                  :label="item"
                  :value="item"/>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="24">
            <el-form-item
              label="Insert connector status after start/stop transaction">
              <el-switch v-model="editForm.insertConnectorStatusAfterTransactionMsg"/>
            </el-form-item>
          </el-col>
        </el-row>
        <div class="hr"/>
        <el-row :gutter="20">
          <el-col :xs="24" :md="12">
            <div class="section-title">Location of Station</div>
          </el-col>
          <el-col :xs="24" :md="12">
            <div class="section-title">Service Provider</div>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :xs="24" :md="12">
            <el-form-item
              label="Site of Station:"
              label-width="150px"
              prop="sitePk">
              <el-select
                class="add-text"
                filterable
                remote
                v-model="editForm.sitePk"
                :remote-method="filterSite"
                placeholder="Select with search">
                <el-option
                  v-for="(item, index) in siteOptions"
                  :key="index"
                  :label="item.siteName"
                  :value="item.sitePk"/>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :md="12">
            <el-form-item
              label="Service Provider:"
              label-width="150px"
              prop="providerPk">
              <el-select
                class="add-text"
                v-model="editForm.providerPk"
                placeholder="Select">
                <el-option
                  v-for="(item, index) in providerOptions"
                  :key="index"
                  :label="item.providerName"
                  :value="item.providerPk"/>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :xs="24" :md="12">
            <el-form-item
              label="Additional Notes:"
              label-width="150px">
              <el-input
                class="add-text"
                type="textarea"
                maxlength="300"
                :autosize="autosize"
                v-model="editForm.note"
                placeholder="Add text"/>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :xs="24" :md="12">
            <el-form-item
              label="Lot Number:"
              label-width="150px">
              <el-input
                class="add-text"
                maxlength="300"
                v-model="editForm.lotNumber"
                placeholder="Add text"/>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :xs="24" :md="12">
            <el-form-item
              label="Level:"
              label-width="150px">
              <el-input
                class="add-text"
                maxlength="300"
                v-model="editForm.level"
                placeholder="Add text"/>
            </el-form-item>
          </el-col>
        </el-row>
        <div class="hr"/>
        <template v-if="editForm.connectorInfo.length">
        <div class="section-title">Connector</div>
        <div class="rate-list-view" v-for="(item, index) in editForm.connectorInfo" :key="index">
          <el-form-item
            label="Connector ID:"
            label-width="120px"
            :prop="'connectorInfo.' + index + '.connectorId'"
            :rules="rule.connectorInfo.connectorId">
            <el-input
              class="rate-text center"
              v-model.number="item.connectorId"
              maxlength="5"
              readonly
              placeholder="Add text"/>
          </el-form-item>
          <el-form-item
            label="Charge Type:"
            label-width="120px"
            :prop="'connectorInfo.' + index + '.chargeTypePk'"
            :rules="rule.connectorInfo.chargeTypePk">
            <el-select
              class="rate-text"
              v-model="item.chargeTypePk"
              placeholder="Add text">
              <el-option 
                v-for="(item, index) in chargeTypeOptions"
                :key="index"
                :label="item.chargeType"
                :value="item.chargeTypePk"/>
            </el-select>
          </el-form-item>
          <!--img
            v-if="editForm.connectorInfo.length > 1"
            class="list-item-icon" src="../../assets/form-list-sub.png"
            @click="delConnector(index)"/>
          <img
            v-if="index == editForm.connectorInfo.length-1"
            class="list-item-icon" src="../../assets/form-list-add.png"
            @click="addConnector"/-->
        </div>
        </template>
        <div class="hr-full"/>
        <div class="buttons">
          <el-button
            type="primary"
            class="cancel-button"
            @click="handleClickCancleButton">
            Cancel
          </el-button>
          <el-button
            style="margin-left: 20px;"
            type="primary"
            @click="handleClickConfigUpateButton">
            Save
          </el-button>
        </div>
      </el-form>
    </div>
  </div>
</template>

<script>
  import { mapState } from 'vuex'
  import site from '../../http/api/site'
  import station from '../../http/api/charge'
  import provider from '../../http/api/provider'
  export default {
    data() {
      return {
        loading: true,
        autosize: {
          minRows: 3,
          maxRows: 6
        },
        rule: {
          "sitePk": {
            required: true,
            trigger: 'change',
            message: 'Please select a site'
          },
          "providerPk": {
            required: true,
            trigger: 'change',
            message: 'Please select a provider'
          },
          "chargeBoxId": {
            required: true,
            trigger: 'blur',
            message: 'Please type charge station id'
          },
          "registrationStatus": {
            required: true,
            trigger: 'change',
            message: 'Please select a status'
          },
          'connectorInfo': {
            'connectorId': [{
              required: true,
              trigger: 'blur',
              message: 'Please type Connector ID',
            }],
            'chargeTypePk': [{
              required: true,
              trigger: 'blur',
              message: 'Please type Charge Type',
            }]
          }
        },
        editForm: {
          timeLimit: '',
          data: {
            siteName: ''
          },
          siteName: '',
          ocpp: '',
          connectorInfo: [{
            connectorId: '',
            chargeTypePk: ''
          }],
          level: '',
          lotNumber: ''
        },
        registerOptions: [],
        providerOptions: [],
        chargeTypeOptions: [],
        siteOptions: [],
        siteKeyword: '',
      }
    },
    computed: {
      ...mapState('charge', ['stationId'])
    },
    created() {
      this.getChargeTypes();
      this.getAllSite();
      this.getStationInfo();
    },
    methods: {
      async getChargeTypes() {
        const res = await site.getChargeTypeList()
        if (res.data && res.data.length > 0) {
          this.chargeTypeOptions = res.data
          //this.defConnectorInfo.chargeTypePk = res.data[0].chargeTypePk;
        }
        this.getRegisterOptions()
      },
      async getRegisterOptions() {
        const res = await station.getRegistrationStatusList();
        if (res.data && res.data.length > 0) {
          this.registerOptions = res.data;
        }
        this.getAllProvider();
      },
      async getAllProvider() {
        const res = await provider.getAllServiceProvider();
        if (res.data && res.data.length > 0) {
          this.providerOptions = res.data
        }
        this.loading = false;
      },
      getStationInfo() {
        station.getStationInfo({chargeBoxPk: this.stationId}).then(res => {
          if (res.data) {
            this.editForm = res.data
            delete this.editForm.address
          }
        }).catch(err => {
           
        });
      },
      getAllSite() {
        site.getAllSiteList({siteName: this.siteKeyword}).then(res => {
          if (res.data && res.data.length > 0) {
            this.siteOptions = res.data
          }
        });
      },
      filterSite(word) {
        this.siteKeyword = word
        this.getAllSite();
      },
      addConnector() {
        this.editForm.connectorInfo.push({
          connectorId: '',
          chargeTypePk: ''
        });
      },
      delConnector(index) {
        this.editForm.connectorInfo.splice(index, 1);
      },
      updateStation() {
        this.loading = true;
        station.updateStation(this.editForm).then(res => {
          this.$message({
            message: 'Edit station successfully',
            type: 'success'
          });
          this.$router.go(-1)
        }).catch(err => {
          this.loading = false;
          this.$message({
            message: err,
            type: 'error'
          })
        })
      },
      handleClickConfigUpateButton() {
        this.$refs['editForm'].validate(result => {
          if (result) {
            this.updateStation();
          }
        })
      },
      handleClickCancleButton() {
        this.$router.go(-1)
      }
    }
  }
</script>

<style scoped="scoped" lang='scss'>
  @import '../../styles/variables.scss';

  .card-container {
    width: 100%;
    padding: 20px 60px;
    min-height: $mainAppMinHeight;
    background-color: #F0F5FC;
  }
  .card-content {
    padding: 15px 80px;
    border-radius: 6px;
    background-color: white;
  }
  .section-title {
    color: #333;
    margin-top: 20px;
    margin-bottom: 30px;
    font-size: 16px;
    user-select: none;
    line-height: 24px;
    font-weight: 500;
    font-family: sans-serif;
    text-transform: uppercase;
  }
  .add-text {
    width: 100%;
    max-width: 300px;
    color: #666;
  }
  .add-text ::v-deep .el-textarea__inner {
    font-family: sans-serif;
  }
  span.add-text {
    display: block;
    overflow: hidden;
    word-break: break-all;
    text-overflow: ellipsis;
  }
  .hr {
    height: 2px;
    margin: 10px -40px;
    background-color: #F0F5FC;
  }
  .hr-full {
    height: 2px;
    margin: 20px -80px;
    background-color: #F0F5FC;
  }
  .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;
  }
  .buttons {
    padding-top: 15px;
    padding-bottom: 30px;
  }
  .center .el-input__inner {
    text-align: center;
  }
  @media screen and (max-width: 500px) {
    .card-container {
      padding: 0px;
    }
    .card-content {
      padding: 15px 40px;
    }
  }
</style>
