<template>
  <div>

<!--    {{ this.ident}}-->


    <div v-if="showMapp">
      <el-button @click="add()">新增</el-button>


      <h1>查询</h1>
      <el-form :inline="true" :model="car" class="demo-form-inline">

        <el-form-item label="车辆VIN">
          <el-input v-model="car.carNumber" placeholder="请输入车辆VIN"></el-input>
        </el-form-item>

        <el-form-item label="车辆类型">
          <el-select v-model="car.carType" placeholder="请选择车辆类型">
            <el-option label="中型轿车" value="中型轿车"></el-option>
            <el-option label="跑车" value="跑车"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="电子围栏Id">
          <el-input v-model="car.fenceId" placeholder="请输入电子围栏Id"></el-input>
        </el-form-item>

        <el-form-item label="车辆状态">
          <el-select v-model="car.carState" placeholder="请选择车辆状态">
            <el-option label="在线" value="1"></el-option>
            <el-option label="离线" value="2"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="电机厂商">
          <el-input v-model="car.carMachine" placeholder="请输入电机厂商"></el-input>
        </el-form-item>

        <el-form-item label="电池厂商">
          <el-input v-model="car.carBattery" placeholder="请输入电池厂商"></el-input>
        </el-form-item>

        <el-form-item label="电机编号">
          <el-input v-model="car.carMachineNumber" placeholder="请输入电机编号"></el-input>
        </el-form-item>

        <el-form-item label="电池编号">
          <el-input v-model="car.carBatteryNumber" placeholder="请输入电池编号"></el-input>
        </el-form-item>


        <el-form-item>
          <el-button type="primary" @click="onSubmit">查询</el-button>
        </el-form-item>

      </el-form>


      <h1>车辆列表</h1>

      <el-table
        :data="tableData"
        style="width: 100%">

        <el-table-column
          label="车辆Id"
          width="180">
          <template slot-scope="scope">
            <span style="margin-left: 10px">{{ scope.row.carId }}</span>
          </template>
        </el-table-column>


        <el-table-column
          label="车辆VIN"
          width="180">
          <template slot-scope="scope">
            <span style="margin-left: 10px">{{ scope.row.carNumber }}</span>
          </template>
        </el-table-column>


        <el-table-column
          label="车辆类型"
          width="180">
          <template slot-scope="scope">
            <span style="margin-left: 10px">{{ scope.row.carType }}</span>
          </template>
        </el-table-column>

        <el-table-column
          label="电子围栏Id"
          width="180">
          <template slot-scope="scope">
            <span style="margin-left: 10px">{{ scope.row.fenceName }}</span>
          </template>
        </el-table-column>

        <el-table-column
          label="车辆状态"
          width="180">
          <template slot-scope="scope">
            <el-tag type="warning" v-if="scope.row.carState==1">在线</el-tag>
            <el-tag type="danger" v-if="scope.row.carState==2">离线</el-tag>
          </template>
        </el-table-column>

        <el-table-column
          label="电机厂商"
          width="180">
          <template slot-scope="scope">
            <span style="margin-left: 10px">{{ scope.row.carMachine }}</span>
          </template>
        </el-table-column>

        <el-table-column
          label="电池厂商"
          width="180">
          <template slot-scope="scope">
            <span style="margin-left: 10px">{{ scope.row.carBattery }}</span>
          </template>
        </el-table-column>

        <el-table-column
          label="电机编号"
          width="180">
          <template slot-scope="scope">
            <span style="margin-left: 10px">{{ scope.row.carMachineNumber }}</span>
          </template>
        </el-table-column>

        <el-table-column
          label="电池编号"
          width="180">
          <template slot-scope="scope">
            <span style="margin-left: 10px">{{ scope.row.carBatteryNumber }}</span>
          </template>
        </el-table-column>


        <el-table-column label="操作">
          <template slot-scope="scope">


            <el-button
              size="mini"
              @click="handleEdit1(scope.row)" v-if="scope.row.carState==2" disabled>实时轨迹
            </el-button>

            <el-button
              size="mini"
              @click="handleEdit1(scope.row.carNumber)" v-if="scope.row.carState==1">实时轨迹
            </el-button>


            <el-button
              size="mini"
              @click="handleEdit(scope.row)">编辑
            </el-button>


            <el-button
              size="mini"
              type="danger"
              @click="handleDelete(scope.row.carId)">删除
            </el-button>
          </template>
        </el-table-column>


      </el-table>

      <h1>分页</h1>


      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="car.pageNum"
        :page-sizes="[1, 2, 10, 15]"
        :page-size="car.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
      </el-pagination>


      <!--新增车辆-->

      <el-dialog :title="title" :visible.sync="dialogFormVisible">
        <el-form :model="cars">

          <el-form-item label="车辆VIN" :label-width="formLabelWidth">
            <el-input v-model="cars.carNumber" autocomplete="off"></el-input>
          </el-form-item>

          <el-form-item label="车辆类型" :label-width="formLabelWidth">
            <el-select v-model="cars.carType" placeholder="请选择车辆类型">
              <el-option label="跑车" value="跑车"></el-option>
              <el-option label="面包车" value="面包车"></el-option>
              <el-option label="大汽车" value="大汽车"></el-option>
              <el-option label="轿车" value="轿车"></el-option>
            </el-select>
          </el-form-item>


          <el-form-item label="电子围栏Id" :label-width="formLabelWidth">
            <el-select v-model="cars.fenceId" placeholder="请选择车辆电子围栏Id">
              <el-option v-for="item in fence" :label="item.fenceName" :value="item.fenceId"
                         :key="item.fenceId"></el-option>
            </el-select>
          </el-form-item>


          <el-form-item label="车辆状态" :label-width="formLabelWidth">
            <el-select v-model="cars.carState" placeholder="请选择车辆状态">
              <el-option label="在线" value="1"></el-option>
              <el-option label="离线" value="2"></el-option>
            </el-select>
          </el-form-item>


          <el-form-item label="电机厂商" :label-width="formLabelWidth">
            <el-input v-model="cars.carMachine" autocomplete="off"></el-input>
          </el-form-item>

          <el-form-item label="电池厂商" :label-width="formLabelWidth">
            <el-input v-model="cars.carBattery" autocomplete="off"></el-input>
          </el-form-item>

          <el-form-item label="电机编号" :label-width="formLabelWidth">
            <el-input v-model="cars.carMachineNumber" autocomplete="off"></el-input>
          </el-form-item>

          <el-form-item label="电池编号" :label-width="formLabelWidth">
            <el-input v-model="cars.carBatteryNumber" autocomplete="off"></el-input>
          </el-form-item>


          <el-form-item label="标识名称" :label-width="formLabelWidth">
            <el-checkbox-group v-model="cars.identificationId">
              <el-checkbox
                v-for="item in ident"
                :label="item.identificationId"
                :key="item.identificationId"
              >
                {{ item.identificationLog }}
              </el-checkbox>
            </el-checkbox-group>
          </el-form-item>
        </el-form>
        {{cars}}
        <div slot="footer" class="dialog-footer">
          <el-button type="primary" @click="qd()">确 定</el-button>
        </div>
      </el-dialog>


      <!--修改车辆-->

      <el-dialog :title="title" :visible.sync="dialogFormVisible1">
        <el-form :model="carss">


          <el-form-item label="车辆Id" :label-width="formLabelWidth">
            <el-input v-model="carss.carId" autocomplete="off"></el-input>
          </el-form-item>

          <el-form-item label="车辆VIN" :label-width="formLabelWidth">
            <el-input v-model="carss.carNumber" autocomplete="off"></el-input>
          </el-form-item>

          <el-form-item label="车辆类型" :label-width="formLabelWidth">
            <el-select v-model="carss.carType" placeholder="请选择车辆类型">
              <el-option label="跑车" value="跑车"></el-option>
              <el-option label="面包车" value="面包车"></el-option>
              <el-option label="大汽车" value="大汽车"></el-option>
              <el-option label="轿车" value="轿车"></el-option>
            </el-select>
          </el-form-item>


          <el-form-item label="电子围栏Id" :label-width="formLabelWidth">
            <el-select v-model="carss.fenceId" placeholder="请选择车辆电子围栏Id">
              <el-option v-for="item in fence" :label="item.fenceName" :value="item.fenceId"
                         :key="item.fenceId"></el-option>
            </el-select>
          </el-form-item>


          <el-form-item label="车辆状态" :label-width="formLabelWidth">
            <el-select v-model="carss.carState" placeholder="请选择车辆状态">
              <el-option label="在线" value="1"></el-option>
              <el-option label="离线" value="2"></el-option>
            </el-select>
          </el-form-item>


          <el-form-item label="电机厂商" :label-width="formLabelWidth">
            <el-input v-model="carss.carMachine" autocomplete="off"></el-input>
          </el-form-item>

          <el-form-item label="电池厂商" :label-width="formLabelWidth">
            <el-input v-model="carss.carBattery" autocomplete="off"></el-input>
          </el-form-item>

          <el-form-item label="电机编号" :label-width="formLabelWidth">
            <el-input v-model="carss.carMachineNumber" autocomplete="off"></el-input>
          </el-form-item>

          <el-form-item label="电池编号" :label-width="formLabelWidth">
            <el-input v-model="carss.carBatteryNumber" autocomplete="off"></el-input>
          </el-form-item>


        </el-form>


        <div slot="footer" class="dialog-footer">
          <el-button type="primary" @click="xg()">确 定</el-button>
        </div>
      </el-dialog>

    </div>

    <div style="display: flex; justify-content: center;">
      <div v-if="showMap" style="font-size: 20px;">
        车辆轨迹:{{vin}}
      </div>
    </div>



    <div id="mapContainer" v-if="showMap">

    </div>


  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）,
//例如：import 《组件名称》 from '《组件路径》,
import {addCar, deleteCar, fenceList, ideList, listCar, updateCar} from "@/api/system/car";


export default {
  //import引入的组件需要注入到对象中才能使用"
  components: {},
  props: {},
  data() {
    //这里存放数据"

    return {
      tableData: [],
      car: {
        pageNum: 1,
        pageSize: 3,

      },
      total: 0,
      fence: [],
      fence1: {},
      dialogFormVisible: false,
      dialogFormVisible1: false,
      formLabelWidth: "120px",
      title: '',

      cars: {
        identificationId : [],
      },
      carss:{
      },
      //地图
      showMap: false,
      showMapp: true,
      //高德地图
      map: null,
      key: 'bf67e6b110fda0875d19dcd528f2ee10',
      searchInput: '',
      //标识表
      ident: [],
      vin:'',



    };
  },
  //计算属性 类似于data概念",
  computed: {},
  //监控data中的数据变化",
  watch: {},
  //方法集合",
  methods: {
    list() {
      listCar(this.car).then(
        res => {
          this.tableData = res.data.list;
          this.total = res.data.total;
          console.log(this.tableData);
          console.log(res);
        }
      )
    },
    onSubmit() {
      this.list();
    },
    handleSizeChange(val) {
      this.car.pageSize = val;
      this.list();
    },
    handleCurrentChange(val) {
      this.car.pageNum = val;
      this.list();
    },
    add() {
      // this.cars={};
      this.dialogFormVisible = true;
      this.title = "新增车辆";
    },
    qd() {
      addCar(this.cars).then(
        res => {
          this.$message.success(res.data)
          this.list();
          console.log(this.cars);
        }
      )
      this.dialogFormVisible = false;
        this.cars={};
        this.cars.identificationId=[];
    },


    list1() {
      fenceList(this.fence1).then(
        res => {
          this.fence = res.data.list;
          console.log(res);
          console.log(this.fence)
        }
      )
    },
    handleEdit(obj) {
      this.dialogFormVisible1 = true;
      this.title = "修改车辆";
      this.carss = obj;
    },
    xg() {
      updateCar(this.carss).then(
        res => {
          this.$message.success(res.data)
          this.list();
          console.log(this.carss);
        }
      )
      this.dialogFormVisible1 = false;
    },


    handleDelete(carId) {
      deleteCar(carId).then(
        res => {
          this.$message.success(res.data)
          this.list()
        }
      )
    },


    handleEdit1(aa) {
      this.showMap = true;
      this.showMapp = false;
      this.initMap();
      this.vin = aa;

    },

    //地图
    initMap() {
      const url = `https://webapi.amap.com/maps?v=1.4.15&key=${this.key}`;
      const jsapi = document.createElement('script');
      jsapi.charset = 'utf-8';
      jsapi.src = url;
      document.head.appendChild(jsapi);

      jsapi.onload = () => {
        this.map = new window.AMap.Map('mapContainer', {
          zoom: 13,
          center: [113.22, 22.93] // 深圳的经纬度
        });

        // 创建车辆图标
        const carIcon = new AMap.Icon({
          size: new AMap.Size(50, 25),
          image: 'https://webapi.amap.com/images/car.png',
          imageSize: new AMap.Size(50, 25)
        });

        // 创建车辆覆盖物
        const carMarker = new AMap.Marker({
          position: [113.22, 22.93],
          icon: carIcon,
          offset: new AMap.Pixel(-16, -16),
          autoRotation: true
        });

        // 将车辆覆盖物添加到地图
        this.map.add(carMarker);

      }
    },
    ideList1() {
      ideList().then(
        res => {
          this.ident = res.data;
          console.log(this.ident);
        }
      )
    }


  },
  //生命周期 - 创建完成（可以访问当前this实例）",
  created() {

    this.list();
    this.ideList1();
    this.list1();


  },
  //生命周期 - 挂载完成（可以访问DOM元素）",
  mounted() {
    //初始化地图
    this.initMap();
  },
  beforeCreate() {
  }, //生命周期 - 创建之前",
  beforeMount() {
  }, //生命周期 - 挂载之前",
  beforeUpdate() {
  }, //生命周期 - 更新之前",
  updated() {
  }, //生命周期 - 更新之后",
  beforeDestroy() {
  }, //生命周期 - 销毁之前",
  destroyed() {
  }, //生命周期 - 销毁完成",
  activated() {
  } //如果页面有keep-alive缓存功能，这个函数会触发",
};
</script>
<style scoped>
#mapContainer {
  width: 25%;
  height: 450px;
}
</style>
