<template>
  <div class="container" v-loading="loading">
    <el-form
      :model="form"
      :rules="rules"
      ref="form"
      label-position="right"
      label-width="100px">
      <div class="flexr">
        <div class="content flex1">
          <div class="section-title">OCPI INFORMATION</div>
          <el-form-item
            label="Name:">
            <div class="info-text">{{form.name}}</div>
          </el-form-item>
          <el-form-item
            label="Role:">
            <div class="info-text">{{form.role}}</div>
          </el-form-item>
          <el-form-item
            label="Party ID:">
            <div class="info-text">{{form.partyId}}</div>
          </el-form-item>
          <el-form-item
            label="Country:">
            <div class="info-text">{{form.country}}</div>
          </el-form-item>
          <el-form-item
            label="Website:">
            <a target="_blank"
              class="link-detail"
              :href="form.website"
              v-if="form.website">{{form.website}}</a>
          </el-form-item>
          <el-form-item
            label="Logo:"
            v-if="form.logo">
            <img
              class="img-logo"
              :src="form.logo"/>
          </el-form-item>
        </div>
        <div class="content flex1">
          <div class="section-title">OCPI DATA</div>
          <el-form-item
            label="No. Of Sites:"
            label-width="150px">
            <div class="info-text">{{form.countOperation.sites}}</div>
          </el-form-item>
          <el-form-item
            label="No. Of Chargers:"
            label-width="150px">
            <div class="info-text">{{form.countOperation.stations}}</div>
          </el-form-item>
          <el-form-item
            label="No. Of Connectors:"
            label-width="150px">
            <div class="info-text">{{form.countOperation.connectors}}</div>
          </el-form-item>
          <el-form-item
            label=""
            label-width="40px"
            class="ocpi-data-content">
            <div class="status-row" v-for="(item, index) in Object.keys(form.countConnectorStatus)" :key="index">
              <div class="status-icon">●</div>
              <div class="status-name">{{item}}: </div>
              <div>{{form.countConnectorStatus[item]}}</div>
            </div>
          </el-form-item>
        </div>
      </div>
      <div class="flexr">
        <div class="content flex1">
          <div class="section-title">CONFIGURE SITES FROM PARTNER TO SHARE ON APP</div>
          <el-form-item
            label="Sites:"
            label-width="100px">
            <div class="info-text">
              <span class="link-type" @click="showAssignment(false)">{{form.countShareOnApp.assigned}}/{{form.countShareOnApp.locations}}</span>
            </div>
          </el-form-item>
        </div>
        <div class="content flex1">
          <div class="section-title">CONFIGURE SITE TO SHARE TO PARTNER</div>
          <el-form-item
            label="Sites:"
            label-width="100px">
            <div class="info-text">
              <span class="link-type" @click="showAssignment(true)">{{form.countShareToPartner.assigned}}/{{form.countShareToPartner.locations}}</span>
            </div>
          </el-form-item>
        </div>
      </div>
      <div class="content flexcr">
        <div class="buttons">
          <el-button
            @click="onBack"
            type="primary"
            class="cancel-button">
            Back
          </el-button>
        </div>
      </div>
    </el-form>
    <DialogAssignment
      :visible="assign.visible"
      :title="assign.title"
      :operator="form.credentialId"
      :is-out-bound="assign.isOutBound"
      @hide="hideAssignment"/>
  </div>
</template>

<script>
import ocpi from '../../../http/api/ocpi.js';
import DialogAssignment from '../dialog/DialogAssignment';
export default {
  data() {
    return {
      loading: false,
      form: {
        credentialId: "",
        name: "",
        role: "",
        partyId: "",
        countryCode: "",
        country: "",
        website: "",
        logo: "",
        countOperation: {
          sites: 0,
          stations: 0,
          connectors: 0
        },
        countConnectorStatus: {},
        countShareOnApp: {
          assigned: 0,
          locations: 0
        },
        countShareToPartner: {
          assigned: 0,
          locations: 0
        }
      },
      rules: {
        
      },
      assign: {
        visible: false,
        title: "",
        isOutBound: false
      }
    };
  },
  components: {DialogAssignment},
  created() {
    if (this.$route.params.id) {
      this.getOperatorInfo()
    }
  },
  methods: {
    onBack() {
      this.$nextTick(() => {
        this.$router.replace({
          path: "/ocpi/roaming-operators"
        })
      })
    },
    getOperatorInfo() {
      this.loading = true;
      ocpi.getRoamingOperatorInfo(this.$route.params.id).then(res => {
        this.loading = false;
        if (res.data) {
          this.form = res.data
        }
      }).catch(err => {
        this.loading = false;
        this.$message({
          type: 'error',
          message: err
        })
      })
    },
    showAssignment(isOut) {
      let title = isOut ? "SHARING OUTBOUND" : "SHARING INBOUND";
      title += " (" + this.form.name + ")";
      this.assign.title = title;
      this.assign.isOutBound = isOut;
      this.assign.visible = true;
    },
    hideAssignment() {
      this.assign.visible = false;
      this.getOperatorInfo();
    }
  }
}
</script>

<style lang="scss" scoped>
  @import '../../../styles/variables.scss';
  .container {
    width: 100%;
    padding: 20px 60px;
    min-height: $mainAppMinHeight;
    background-color: #F0F5FC;
  }
  .content {
    min-width: 400px;
    margin: 0 8px 16px;
    padding: 15px 60px;
    border-radius: 6px;
    background-color: white;
  }
  .section-title {
    color: #333;
    margin-top: 20px;
    margin-bottom: 30px;
    font-size: 15px;
    user-select: none;
    line-height: 24px;
    font-weight: bold;
    font-family: sans-serif;
    text-transform: uppercase;
  }
  .info-text {
    color: #000;
    font-size: 14px;
    span {
      line-height: 20px;
    }
  }
  .img-logo {
    height: 80px;
    max-width: 150px;
    object-fit: contain;
  }
  .status-row {
    color: #000;
    display: flex;
    font-size: 14px;
    line-height: 1.8;
    align-items: center;
  }
  .status-icon {
    height:22px;
    font-size: 12px;
    line-height:20px;
  }
  .status-name {
    padding-left: 5px;
    padding-right: 10px;
    text-transform: uppercase;
  }
  .buttons {
    padding-top: 15px;
    padding-bottom: 15px;
  }
  ::v-deep .el-form-item {
    margin-bottom: 0;
  }
  .ocpi-data-content {
    padding: 15px 0;
    margin-top: 10px;
    border-radius: 16px;
    background-color: #F0F0F0;
  }
  @media screen and (max-width: 500px) {
    .container {
      padding: 0px;
    }
    .content {
      padding: 15px 30px;
    }
  }
</style>