<template>
  <div class="card-container">
    <div class="card-content">
      <el-form
        :model="addForm"
        :rules="rule"
        v-loading="loading"
        ref="addForm"
        label-position="left">
        <div class="section-title">Charge Station Information</div>
        <el-row :gutter="20">
          <el-col :xs="24" :md="12">
            <el-form-item
              label="Charge Station ID:"
              prop="chargeBoxId"
              label-width="160px">
              <el-input
                class="add-text"
                v-model="addForm.chargeBoxId"
                placeholder="Add text"
                maxlength="30"/>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :md="12">
            <el-form-item
              label="Registration Status:"
              label-width="160px"
              prop="registrationStatus">
              <el-select
                class="add-text"
                v-model="addForm.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="addForm.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:"
              prop="sitePk"
              label-width="150px">
              <el-select
                class="add-text"
                filterable
                remote
                v-model="addForm.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:"
              prop="providerPk"
              label-width="150px">
              <el-select
                class="add-text"
                v-model="addForm.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="addForm.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="addForm.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="addForm.level"
                placeholder="Add text"/>
            </el-form-item>
          </el-col>
        </el-row>
        <!--div class="hr"/>
        <div class="section-title">Charge Rate</div>
        <div class="rate-list-view" v-for="(item, index) in addForm.connectorInfo" :key="index">
          <el-form-item
            label="Connecter ID:"
            label-width="120px"
            :prop="'connectorInfo.' + index + '.connectorPk'"
            :rules="rule.connectorInfo.connectorPk">
            <el-input
              class="rate-text"
              v-model.number="item.connectorPk"
              maxlength="5"
              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="addForm.connectorInfo.length > 1"
            class="list-item-icon" src="../../assets/form-list-sub.png"
            @click="delConnector(index)"/>
          <img
            v-if="index == addForm.connectorInfo.length-1"
            class="list-item-icon" src="../../assets/form-list-add.png"
            @click="addConnector"/>
        </div-->
        
        <!--div class="hr"/>
        <div class="section-title">Charging Profiles</div>
        <div class="rate-list-view">
          <el-form-item
            label="Chargingprofile ID:"
            label-width="150px">
            <el-select
              class="rate-text"
              v-model="addForm.additional"
              placeholder="Select">
              <el-option label="AK47" value="AC47"/>
            </el-select>
          </el-form-item>
          <el-form-item
            label="Time:"
            label-width="60px">
            <el-select
              class="rate-text"
              v-model="addForm.additional"
              placeholder="Select">
              <el-option label="AK47" value="AC47"/>
            </el-select>
          </el-form-item>
          <el-form-item
            label="Status:"
            label-width="65px">
            <el-select
              class="rate-text"
              v-model="addForm.additional"
              placeholder="Select">
              <el-option label="AK47" value="AC47"/>
            </el-select>
          </el-form-item>
        </div-->
        <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 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: {
          // "address": {
          //   "zipCode": {
          //     required: true,
          //     trigger: 'blur',
          //     message: 'Please type postal code'
          //   },
          //   "country": {
          //     required: true,
          //     trigger: 'change',
          //     message: 'Please select country'
          //   },
          //   "city": {
          //     required: true,
          //     trigger: 'blur',
          //     message: 'Please type city'
          //   },
          //   "street": {
          //     required: true,
          //     trigger: 'blur',
          //     message: 'Please type street'
          //   },
          //   "houseNumber": {
          //     required: true,
          //     trigger: 'blur',
          //     message: 'Please type unit number'
          //   }
          // },
          "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'
          },
          'ocpp': [{
            required: true,
            trigger: 'blur',
            message: 'Please type ocpp',
          }, {
            pattern: /^\d{1,}(.{0,1}\d{1,})$/,
            trigger: 'blur',
            message: 'Please type a correct ocpp'
          }],
          'timeLimit': [{
            required: true,
            trigger: 'change',
          }],
          'connectorInfo': {
            'connectorPk': [{
              required: true,
              trigger: 'blur',
              message: 'Please type Connector ID',
            }],
            'chargeTypePk': [{
              required: true,
              trigger: 'blur',
              message: 'Please type Charge Type',
            }]
          }
        },
        addForm: {
          sitePk: '',
          providerPk: '',
          /*address: {
            country: '',
            city: '',
            street: '',
            zipCode: ''
          },*/
          chargeBoxId: '',
          registrationStatus: '',
          //description: '',
          //adminAddress: '',
          note: '',
          insertConnectorStatusAfterTransactionMsg: false,
          //connectorInfo: [],
          //timeLimit: ''
          level: '',
          lotNumber: ''
        },
        chargeTypeOptions: [],
        registerOptions: [],
        providerOptions: [],
        siteOptions: [],
        siteKeyword: '',
        defConnectorInfo: {
          connectorPk: '',
          chargeTypePk: ''
        }
      }
    },
    created() {
      this.getRegisterOptions()
      this.getAllSite();
      this.getAllProvider();
    },
    methods: {
      async getRegisterOptions() {
        const res = await station.getRegistrationStatusList();
        if (res.data && res.data.length > 0) {
          this.registerOptions = res.data;
          this.addForm.registrationStatus = res.data[0];
        }
        this.loading = false;
      },
      getAllSite() {
        site.getAllSiteList({siteName: this.siteKeyword}).then(res => {
          if (res.data && res.data.length > 0) {
            this.siteOptions = res.data
          }
        });
      },
      getAllProvider() {
        provider.getAllServiceProvider().then(res => {
          if (res.data && res.data.length > 0) {
            this.providerOptions = res.data
            this.addForm.providerPk = res.data[0].providerPk
          }
        });
      },
      filterSite(word) {
        this.siteKeyword = word
        this.getAllSite();
      },
      addConnector() {
        this.addForm.connectorInfo.push(Object.assign({}, this.defConnectorInfo));
      },
      delConnector(index) {
        this.addForm.connectorInfo.splice(index, 1);
      },
      handleClickConfigUpateButton() {
        this.$refs['addForm'].validate(result => {
          if (result) {
            this.addStation();
          }
        })
      },
      addStation() {
        this.loading = true;
        station.addStation(this.addForm).then(res => {
          this.$message({
            message: 'Add station successfully',
            type: 'success'
          })
          this.$router.go(-1)
        }).catch(err => {
          this.loading = false;
          this.$message({
            message: err,
            type: 'error'
          })
        });
      },
      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;
  }
  .add-text ::v-deep .el-textarea__inner {
    font-family: sans-serif;
  }
  .hr {
    height: 2px;
    margin: 10px -40px;
    background-color: #F0F5FC;
  }
  .hr-full {
    height: 2px;
    margin: 20px -80px;
    background-color: #F0F5FC;
  }
  .rate-list-view {
    display: flex;
    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;
  }
  @media screen and (max-width: 500px) {
    .card-container {
      padding: 0px;
    }
    .card-content {
      padding: 15px 30px;
    }
  }
</style>
