<template>
  <div>
    <div class="table-wrapper">
      <div class="title">
        <h1>{{ groupName }}</h1>
      </div>
      <div class="info">
        <p>Creator: {{ creator }}</p>
        <p>Create Time: {{ createTime }} </p>
        <p v-if="status == 'ENABLE'">
          Policy: <span @click="showConfigDialog">{{ policyName }}</span>
          <el-button type="primary" size="mini" class="ml-5" @click="unAssociate" v-if="policyName">Unlink</el-button>
          <el-button type="primary" size="mini" class="ml-5" @click="selectAssociate">Associate</el-button>
        </p>
      </div>
      <div class="tags grey-bg">
        <label>Tags: </label>
        <ul v-if="tags.length">
          <li v-for="(item, i) in tags" :key="i">
            <i class="iconfont icon-tag"></i>
            {{item}}
          </li>
        </ul>
      </div>

    </div>
    <div class="table-wrapper">
      <div class="title">
        <h1>Vehicle List</h1>
      </div>
      <div class="vehicle-attr" v-if="vehicleAttrs.length">
        <p v-for="(item, index) in vehicleAttrs" :key="index">
          {{ item.name }}: {{ item.value }}
        </p>
      </div>
      <el-table :data="tableData" style="min-height:500px">
        <el-table-column prop="vin" label="VIN"></el-table-column>
        <el-table-column prop="vid" label="VID"></el-table-column>
        <el-table-column prop="brandCode" label="Brand Code"></el-table-column>
        <el-table-column prop="brandName" label="Brand Name"></el-table-column>
        <el-table-column prop="modelCode" label="Model Code"></el-table-column>
        <el-table-column prop="modelName" label="Model Name"></el-table-column>
        <el-table-column prop="modelYear" label="Model Year"></el-table-column>
        <!-- <el-table-column prop="modelFamily" label="Model Family"></el-table-column> -->
        <el-table-column prop="platformName" label="Platform Name"></el-table-column>
        <el-table-column prop="platformVariant" label="Platform Variant"></el-table-column>
        <el-table-column prop="adsVersion" label="ADS Version"></el-table-column>
        <el-table-column prop="message" label="Message" show-overflow-tooltip></el-table-column>
        <template slot="empty" v-if="tableData.length == 0">
          <span>No data available</span>
        </template>
      </el-table>
      <el-pagination
        v-if="total > 0"
        :page-size="limit"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :page-sizes="[10, 20, 50, 100]"
        background
        layout="total, sizes, prev, pager, next"
      ></el-pagination>
    </div>
    <config-dialog ref="configDialog" />
    <associate-dialog ref="associateDialog" :groupId="id" :adsVersion="adsVersion" @getDetail="getDetail" />
  </div>
</template>

<script>
import { GetGroupsDetail, GetVehicleByGroup, UnbindConfiguration, GetAttribute, GetPolicyJson } from "@/api/group";
import associateDialog from "./components/associateDialog.vue";
import configDialog from "../configurationManagement/components/configDialog.vue";
export default {
  components: { associateDialog, configDialog },
  data() {
    return {
      id: this.$route.query.id,
      groupName: "",
      creator: "",
      createTime: "",
      policyName: "",
      configJson: "",
      adsVersion: "",
      vehicleAttrs: [],
      tags: [],
      status: "",
      attributeObj: {},
      tableData: [],
      page: 1,
      limit: 10,
      total: 300,
    };
  },
  created() {
    this.getAttributeData();
    this.getTableData();
  },
  methods: {
    getAttributeData() {
      GetAttribute().then((res) => {
        res.forEach(item => {
           this.attributeObj[item.attrName] = item.mappingName || item.attrName;
        });
        this.getDetail();
      });
    },
    getDetail() {
      GetGroupsDetail(this.id).then((res) => {
        console.log(res);
        let { groupName, createBy, lastModifiedDate, dccId, dccName, specificationJson, tags, status } = res;
        this.groupName = groupName;
        this.creator = createBy;
        this.createTime = lastModifiedDate;
        this.policyName = dccName;
        this.tags = tags.filter(item => item);
        this.status = status;
        if(specificationJson){
          this.vehicleAttrs = JSON.parse(specificationJson)['and'].map(item => {
            for (const key in item) {
              return {
                field: key,
                name: this.attributeObj[key],
                value: item[key]
              }
            }
          })
        }
        if(dccId){
          GetPolicyJson(dccId).then(res => {
            this.configJson = res['dccDetail'];
          })
        }
      });
    },
    getTableData(){
      const { id, page, limit } = this;
      GetVehicleByGroup({
        id,
        pageNo: page,
        pageSize: limit
      }).then(res => {
        const { content, totalElements } = res;
        this.tableData = content.map(item => {
          let info = JSON.parse(item['infos']) || {};
          this.adsVersion = info['ads_version'] || '';
          return {
            ...item,
            brandCode: info['brand_code'] || '',
            brandName: info['vehicleOrgLevel2'] || '',
            modelCode: info['model/model_codes'] || '',
            modelName: info['model/model_name'] || '',
            modelYear: info['model/model_year'] || '',
            platformName: info['platform_name'] || '',
            platformVariant: info['platform_variant'] || '',
            adsVersion: info['ads_version'] || '',
          }
        });
        this.total = totalElements;
      })
    },
    handleCurrentChange(val) {
      this.page = val;
      this.getTableData();
    },
    handleSizeChange(val) {
      this.limit = val;
      this.handleCurrentChange(1);
    },
    selectAssociate() {
      this.$refs.associateDialog.show();
    },
    unAssociate() {
      const { id } = this;
      UnbindConfiguration({groupId: id}).then(res => {
        if(!res){
          this.policyName = '';
        }
      })
    },
    showConfigDialog(){
      this.$refs.configDialog.show(this.configJson);
    }
  },
};
</script>

<style scoped lang="scss">
.info {
  display: flex;
  align-items: center;
  padding-left: 5px;
  margin-bottom: 10px;
  p {
    margin-right: 50px;
    span {
      display: inline-block;
      margin-left: 3px;
      color: #0B2C55;
      text-decoration: underline;
      cursor: pointer;
    }
  }
}
.vehicle-attr {
  padding: 0 5px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  p {
    display: flex;
    align-items: center;
    margin: 0 50px 20px 0;
  }
}
</style>
