<template>
  <div class="content">
    <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
                filterable
              >
                <el-option
                  v-for="(item, i) in brandList"
                  :key="i"
                  :label="item"
                  :value="item"
                ></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
                filterable
              >
                <el-option
                  v-for="(item, i) in modelCodeList"
                  :key="i"
                  :label="item"
                  :value="item"
                ></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
                filterable
              >
                <el-option
                  v-for="(item, i) in modelYearList"
                  :key="i"
                  :label="item"
                  :value="item"
                ></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
                filterable
              >
                <el-option
                  v-for="(item, i) in adsVersionList"
                  :key="i"
                  :label="item"
                  :value="item"
                ></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-input
                v-model="existGroup"
                placeholder="Please input Existing Group!"
                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">Online Status:</div>
            </el-col>
            <el-col :span="16">
              <el-select
                v-model="onlineStatus"
                placeholder="Please choose Online Status!"
                clearable
                filterable
              >
                <el-option
                  v-for="item in onlineStatusList"
                  :key="item.code"
                  :label="item.name"
                  :value="item.code"
                ></el-option>
              </el-select>
            </el-col>
          </el-row>
        </el-col>
        <el-col :span="6" class="btn-group">
          <el-popconfirm
            v-if="groupList.length > 0 || ticketList.length > 0"
            confirm-button-text="confirm"
            cancel-button-text="cancel"
            title="There are unsaved vehicles with groups at present, do you want to confirm the operation?"
            @confirm="search"
          >
            <el-button slot="reference" type="primary" size="small">
              <div class="flex-row-center">
                Search
                <div
                  class="icon iconfont icon-sousuo"
                  style="margin-left:5px"
                ></div>
              </div>
            </el-button>
          </el-popconfirm>
          <el-button v-else type="primary" size="small" @click="search">
            <div class="flex-row-center">
              Search
              <div
                class="icon iconfont icon-sousuo"
                style="margin-left:5px"
              ></div>
            </div>
          </el-button>

          <el-button
            style="margin-left:10px"
            type="primary"
            size="small"
            @click="reset"
          >
            <div class="flex-row-center">
              Reset
              <div
                class="icon iconfont icon-zhongzhi"
                style="margin-left:5px"
              ></div>
            </div>
          </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 ticket</el-button>
          <el-button :disabled="!isaddGroup" type="primary" size="small"
            >Add all to group</el-button
          >
          <el-button @click="showTickDialog()" type="primary" size="small"
            >Generate New Ticket ({{ ticketList.length }})</el-button
          >
          <el-popover
            placement="top"
            width="400"
            trigger="hover"
            v-if="!isaddGroup"
          >
            <el-alert
              :closable="false"
              title="info"
              type="warning"
              description="You cannot create a group until the criteria filter is complete."
              show-icon
            >
            </el-alert>
            <button
              slot="reference"
              style="margin-left:10px"
              class="el-button el-button--primary el-button--small is-disabled el-popover__reference"
            >
              <span> Generate New Group ({{ groupList.length }})</span>
            </button>
          </el-popover>
          <el-button
            type="primary"
            size="small"
            v-else
            @click="showGroupDialog()"
            >Generate New Group ({{ groupList.length }})</el-button
          >
        </div>
      </div>
      <el-table :data="tableData" style="width: 100%">
        <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"
        ></el-table-column>
        <el-table-column prop="existIssue" label="Warning" width="120px">
          <template slot-scope="scope">
            <span class="red-circle">{{ scope.row.existIssue }}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="action"
          label="Action"
          width="150px"
          fixed="right"
        >
          <template slot-scope="scope">
            <el-tooltip
              content="Add to issue ticket"
              placement="top"
              effect="light"
            >
              <span
                :style="{ color: getIsColor(scope.row.vin, ticketList) }"
                class="icon iconfont icon-xinzengruku cursor table-acion"
                @click="addTicket(scope.row)"
              >
              </span>
            </el-tooltip>
            <el-tooltip
              v-if="isaddGroup"
              content="Add to group"
              placement="top"
              effect="light"
            >
              <span
                :style="{ color: getIsColor(scope.row.vin, groupList) }"
                class="icon iconfont icon-tianjiaqunzu cursor table-acion"
                @click="addGroup(scope.row)"
              >
              </span>
            </el-tooltip>
          </template>
        </el-table-column>
        <template slot="empty" v-if="tableData.length == 0">
          <span>No data available</span>
        </template>
      </el-table>
      <el-pagination
        v-if="totalPage > 1"
        :current-page.sync="page"
        :page-size="limit"
        :total="total"
        @current-change="handleCurrentChange"
        @size-change="handleSizeChange"
        background
        :page-sizes="[10, 20, 50, 100]"
        layout="prev,sizes, pager, next"
      ></el-pagination>
    </div>
    <newGroupDialog
      ref="newGroupDialog"
      @addSuccess="groupList = []"
    ></newGroupDialog>
    <newTicketDialog
      ref="newTicketDialog"
      @addSuccess="ticketList = []"
    ></newTicketDialog>
  </div>
</template>

<script>
import { GetModel, GetVehicleList } from "@/api/vehicle";
import { removeNull } from "@/utils/utils";
import newGroupDialog from "./newGroupDialog.vue";
import newTicketDialog from "./newTicketDialog.vue";
export default {
  data() {
    return {
      brandList: [],
      modelCodeList: [],
      modelYearList: [],
      adsVersionList: [],
      onlineStatusList: [
        { code: "1", name: "Off" },
        { code: "0", name: "On" },
      ],
      brand: "",
      modelCode: "",
      modelYear: "",
      adsVersion: "",
      vin: "",
      existGroup: "",
      onlineStatus: "",
      tableData: [],
      maxHeight: 0,
      page: 1,
      limit: 10,
      total: 0,
      totalPage: 10,
      isaddGroup: false,
      groupList: [],
      ticketList: [],
    };
  },
  components: { newGroupDialog, newTicketDialog },
  created() {
    this.getModel();
    this.getTableData();
    // this.getMaxHeight();
    // window.addEventListener('resize', () => {
    //     this.getMaxHeight();
    // })
  },
  methods: {
    getModel() {
      GetModel().then((res) => {
        this.modelCodeList = removeNull(res.data.modelCode);
        this.modelYearList = removeNull(res.data.modelYear);
        this.adsVersionList = removeNull(res.data.adsVersion);
        this.brandList = removeNull(res.data.brand);
      });
    },
    getTableData() {
      let {
        brand,
        modelCode,
        modelYear,
        adsVersion,
        vin,
        existGroup,
        onlineStatus,
        page,
        limit,
      } = this;
      GetVehicleList({
        brand,
        modelCode,
        modelYear,
        adsVersion,
        vin,
        existGroup,
        onlineStatus,
        currentPage: page,
        pageSize: limit,
      }).then((res) => {
        this.tableData = res.data.records;
        this.total = res.data.total;
        this.totalPage = res.data.pages;
      });
    },
    addTicket(additem) {
      let isadd = true;
      this.ticketList.map((item, index) => {
        if (item.vin == additem.vin) {
          isadd = false;
          console.log("index", index);
          this.ticketList.splice(index, 1);
          // this.removeItem()
        }
      });
      if (isadd) {
        this.ticketList.push(additem);
      }
    },
    addGroup(additem) {
      let isadd = true;
      this.groupList.map((item, index) => {
        if (item.vin == additem.vin) {
          isadd = false;
          this.groupList.splice(index, 1);
        }
      });
      if (isadd) {
        this.groupList.push(additem);
      }
    },
    showGroupDialog() {
      let {
        brand,
        modelCode,
        modelYear,
        adsVersion,
        vin,
        existGroup,
        onlineStatus,
        groupList,
      } = this;
      let data = {
        brand,
        modelCode,
        modelYear,
        adsVersion,
        vin,
        existGroup,
        onlineStatus,
        groupList,
      };
      this.$refs.newGroupDialog.show(data);
    },
    showTickDialog() {
      if (this.ticketList.length == 0) {
        this.$message.info("please add frist Vehile");
        return;
      }
      let data = { ticketList: this.ticketList };
      this.$refs.newTicketDialog.show(data);
    },
    search() {
      let {
        brand,
        modelCode,
        modelYear,
        adsVersion,
        vin,
        existGroup,
        onlineStatus,
        page,
        limit,
      } = this;
      if (
        brand ||
        modelCode ||
        modelYear ||
        adsVersion ||
        vin ||
        existGroup ||
        onlineStatus
      ) {
        this.isaddGroup = true;
      }
      this.ticketList = [];
      this.groupList = [];
      this.page = 1;
      this.getTableData();
    },
    reset() {
      this.brand = "";
      this.modelCode = "";
      this.modelYear = "";
      this.adsVersion = "";
      this.vin = "";
      this.existGroup = "";
      this.onlineStatus = "";
      this.page = 1;
      this.ticketList = [];
      this.groupList = [];
      this.isaddGroup = false;
      this.getTableData();
    },
    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;
    },
    getIsColor(vin, list) {
      let isin = false;
      list.map((item) => {
        if (item.vin == vin) {
          isin = true;
        }
      });
      if (isin) {
        return "#0070fb";
      } else {
        return "#4a4a4c";
      }
    },
  },
};
</script>
