<template>
  <div class="content">
    <div class="group-msg">
      <p>Group ID: {{ group.groupId }}</p>
      <p>Group Name: {{ group.groupName }}</p>
    </div>
    <div class="search">
      <el-row :gutter="10">
        <el-col :span="6">
          <el-row type="flex" align="middle" class="row-margin">
            <el-col :span="8">
              <div class="lable-title">Brand:</div>
            </el-col>
            <el-col :span="16">
              <el-select
                v-model="brand"
                placeholder="Please choose Brand!"
                clearable
              >
                <el-option
                  v-for="item in brandList"
                  :key="item.value"
                  :label="item.name"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-col>
          </el-row>
        </el-col>
        <el-col :span="6">
          <el-row type="flex" align="middle" class="row-margin">
            <el-col :span="8">
              <div class="lable-title">Model Code:</div>
            </el-col>
            <el-col :span="16" class="timers">
              <el-select
                v-model="modelCode"
                placeholder="Please choose Model Code!"
                clearable
              >
                <el-option
                  v-for="item in modelCodeList"
                  :key="item.value"
                  :label="item.name"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-col>
          </el-row>
        </el-col>
        <el-col :span="6">
          <el-row type="flex" align="middle" class="row-margin">
            <el-col :span="8">
              <div class="lable-title">Model Year:</div>
            </el-col>
            <el-col :span="16">
              <el-select
                v-model="modelYear"
                placeholder="Please choose Model Year!"
                clearable
              >
                <el-option
                  v-for="item in modelYearList"
                  :key="item.value"
                  :label="item.name"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-col>
          </el-row>
        </el-col>
        <el-col :span="6">
          <el-row type="flex" align="middle" class="row-margin">
            <el-col :span="8">
              <div class="lable-title">ADS Version:</div>
            </el-col>
            <el-col :span="16">
              <el-select
                v-model="adsVersion"
                placeholder="Please choose ADS Version!"
                clearable
              >
                <el-option
                  v-for="item in adsVersionList"
                  :key="item.value"
                  :label="item.name"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-col>
          </el-row>
        </el-col>
        <el-col :span="6">
          <el-row type="flex" align="middle">
            <el-col :span="8">
              <div class="lable-title">VIN:</div>
            </el-col>
            <el-col :span="16">
              <el-input
                v-model="vin"
                placeholder="Please input VIN!"
                clearable
              />
            </el-col>
          </el-row>
        </el-col>
        <el-col :span="6">
          <el-row type="flex" align="middle">
            <el-col :span="8">
              <div class="lable-title">Existing Group:</div>
            </el-col>
            <el-col :span="16">
              <el-select
                v-model="existingGroup"
                placeholder="Please choose Existing Group!"
                clearable
              >
                <el-option
                  v-for="item in existingGroup"
                  :key="item.value"
                  :label="item.name"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-col>
          </el-row>
        </el-col>
        <el-col :span="6">
          <el-row type="flex" align="middle">
            <el-col :span="8">
              <div class="lable-title">Online Status:</div>
            </el-col>
            <el-col :span="16">
              <el-select
                v-model="onlineStatus"
                placeholder="Please choose Online Status!"
                clearable
              >
                <el-option
                  v-for="item in onlineStatusList"
                  :key="item.value"
                  :label="item.name"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-col>
          </el-row>
        </el-col>
        <el-col :span="6" class="btn-group">
          <el-button type="primary" size="small">Search</el-button>
        </el-col>
      </el-row>
    </div>
    <div class="table-wrapper">
      <div class="title">
        <h6>Vehicle List</h6>
        <div>
          <el-button type="primary" size="small">Add all to group</el-button>
          <el-button type="primary" size="small">Update</el-button>
        </div>
      </div>
      <el-table :data="tableData" style="width: 100%">
        <el-table-column type="selection" width="60px"></el-table-column>
        <el-table-column prop="vin" label="VIN" width="220px"></el-table-column>
        <el-table-column prop="vid" label="VID" width="120px"></el-table-column>
        <el-table-column
          prop="brand"
          label="Brand"
          width="120px"
        ></el-table-column>
        <el-table-column
          prop="modelCode"
          label="Model Code"
          width="120px"
        ></el-table-column>
        <el-table-column
          prop="modelYear"
          label="Model Year"
          width="120px"
        ></el-table-column>
        <el-table-column
          prop="modelFamily"
          label="Model Family"
          width="150px"
        ></el-table-column>
        <el-table-column
          prop="adsVersion"
          label="ADS Version"
          width="150px"
        ></el-table-column>
        <el-table-column
          prop="lifecycle"
          label="LifeCycle"
          width="120px"
        ></el-table-column>
        <el-table-column
          prop="onlineStatus"
          label="Online Status"
          width="150px"
        ></el-table-column>

        <el-table-column
          prop="shadowVersion"
          label="Shadow Version"
          width="150px"
        ></el-table-column>

        <el-table-column prop="existGroup" label="Exit Groups" width="150px">
          <template slot-scope="scope">
            <span>{{ getGroup(scope.row.existGroup) }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="existIssue" label="Exit Groups" width="150px">
        </el-table-column>

        //null
        <el-table-column prop="warning" label="Warning" width="120px">
          <template slot-scope="scope">
            <span class="red-circle">{{ scope.row.warning }}</span>
          </template>
        </el-table-column>

        <el-table-column
          prop="isDisabled"
          label="Is Disabled"
          width="120px"
        ></el-table-column>

        <el-table-column
          prop="inGroup"
          label="In Group"
          width="120px"
        ></el-table-column>

        <el-table-column prop="action" label="Action" width="220px"  fixed="right">
          <template slot-scope="scope">
            <span class="table-row-btn">Add to group</span>
            <span class="table-row-btn">Remove</span>
          </template>
        </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="prev,sizes, pager, next"
      ></el-pagination>
    </div>
  </div>
</template>

<script>
import { GetGroupsDetail } from "@/api/vehicle";
export default {
  data() {
    return {
      groupId: "",
      brandList: [],
      modelCodeList: [],
      modelYearList: [],
      adsVersionList: [],
      existingGroupList: [],
      onlineStatusList: [
        { value: "0", name: "Off" },
        { value: "1", name: "On" },
      ],
      brand: "",
      modelCode: "",
      modelYear: "",
      adsVersion: "",
      vin: "",
      existingGroup: "",
      onlineStatus: "",
      tableData: [],
      maxHeight: 0,
      page: 1,
      limit: 10,
      total: 0,
      group: {},
    };
  },
  created() {
    this.groupId = this.$route.query.groupId;
    this.getTableData();
    // this.getMaxHeight();
    // window.addEventListener('resize', () => {
    //     this.getMaxHeight();
    // })
  },
  methods: {
    getTableData() {
      const { page, limit } = this;
      GetGroupsDetail({
        currentPage: page,
        pageSize: limit,
        groupId: this.groupId,
      }).then((res) => {
        const { data } = res;
        this.group = data.group;
        if (data.group.groupFilterConditions) {
          let groupFilterConditions = JSON.parse(
            data.group.groupFilterConditions
          );
          this.brandList = [
            {
              value: groupFilterConditions.brand,
              name: groupFilterConditions.brand,
            },
          ];
          this.modelCodeList = [
            {
              value: groupFilterConditions.modeCode,
              name: groupFilterConditions.modeCode,
            },
          ];
          this.adsVersionList = [
            {
              value: groupFilterConditions.adsVersion,
              name: groupFilterConditions.adsVersion,
            },
          ];
          this.adsVersionList = [
            {
              value: groupFilterConditions.adsVersion,
              name: groupFilterConditions.adsVersion,
            },
          ];
          this.modelYearList = [
            {
              value: groupFilterConditions.modeYear,
              name: groupFilterConditions.modeYear,
            },
          ];
          this.existingGroupList = [
            {
              value: groupFilterConditions.existingGroup,
              name: groupFilterConditions.existingGroup,
            },
          ];
          this.brand = groupFilterConditions.brand;
          this.modelCode = groupFilterConditions.modeCode;
          this.modelYear = groupFilterConditions.modeYear;
          this.adsVersion = groupFilterConditions.adsVersion;
          this.existingGroup = groupFilterConditions.existingGroup;
          this.onlineStatus = groupFilterConditions.onlineStatus;
        }

        this.tableData = data.vehicles.records;
        this.total = data.vehicles.total;
      });
    },
    handleCurrentChange(val) {
      this.page = val;
      this.getTableData();
    },
    handleSizeChange(val) {
      this.limit = val;
      this.handleCurrentChange(1)
    },
    getMaxHeight() {
      let bodyHeight =
        document.documentElement.clientHeight || document.body.clientHeight;
      this.maxHeight = bodyHeight - 194;
    },
    getGroup(group) {
      return group;
    },
  },
};
</script>

<style scoped lang="scss">
.group-msg {
  display: flex;
  margin-bottom: 20px;
  p {
    margin-right: 50px;
    font-size: 16px;
    font-weight: 600;
    color: #212020;
    line-height: 30px;
  }
}
</style>
