<template>
  <div class="gassVehicle gass-vehiche" >

    <drawer title="车辆信息" :inner="true" :width="drawerWidth" :mask="false">
      <div class="scroll">
        <el-row style="margin-bottom: 10px">
          <el-col :span="14" style="margin-right: 30px">
            <el-input
              v-model="queryParams.carNum"
              placeholder="请输入车牌号"
              clearable
              size="small"
            />
          </el-col>
          <el-col :span="8">
            <el-button type="primary" icon="el-icon-search" size="mini" @click="carInfoSearch()">搜索</el-button>
            <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
          </el-col>
        </el-row>

        <el-table v-loading="loading" :data="infoList">
          <el-table-column label="车牌号" align="center" prop="carNum" />
          <!--<el-table-column label="品牌型号" align="center" prop="brandModel" />-->
          <!--<el-table-column label="车辆类型" align="center" prop="vehicleType">-->
            <!--<template slot-scope="scope">-->
              <!--<span v-if="scope.row.vehicleType == '1'">罐车</span>-->
              <!--<span v-if="scope.row.vehicleType == '2'">卡车</span>-->
            <!--</template>-->
          <!--</el-table-column>-->
          <!--<el-table-column label="车辆载重" align="center" prop="vehicleLoad" />-->
          <!--<el-table-column label="车辆大小" align="center" prop="vehicleSize" />-->
          <!--<el-table-column label="车辆限乘" align="center" prop="vehicleLimt" />-->
          <!--<el-table-column label="车辆检测信息" align="center" prop="vehicleInspect" />-->
          <el-table-column label="所属企业" align="center" prop="beyondEnterpriseId" />
          <el-table-column label="责任人" align="center" prop="personLiable" />
          <el-table-column label="联系电话" align="center" prop="phone" width="120"/>
          <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="150">
            <template slot-scope="scope">
              <el-button
                size="mini"
                type="text"
                icon="el-icon-view"
                @click="getVehicleInfo(scope.row)"
                v-hasPermi="['system:info:edit']"
              >车辆信息</el-button>
              <el-button
                size="mini"
                type="text"
                icon="el-icon-map-location"
                @click="getVehicleTravel(scope.row)"
                v-hasPermi="['system:info:remove']"
              >车辆位置</el-button>
            </template>
          </el-table-column>
        </el-table>
       <!-- <el-pagination
          @current-change="handleCurrentChangvale"
          :page-size="queryParams.pageSize"
          layout="prev, pager, next, jumper"
          :total="total"
          :hide-on-single-page="total <= queryParams.pageSize"
          :key="total + '' + queryParams.pageSize"
        />-->
        <pagination
          v-show="total>0"
          :total="total"
          :page.sync="queryParams.pageNum"
          :limit.sync="queryParams.pageSize"
          @pagination="getList"
        />
      </div>
    </drawer>
    <div id="map"></div>

    <!-- 查询车辆信息 -->
    <el-dialog :title="title" :visible.sync="open" width="900px" append-to-body>
      <el-form ref="form" :model="form" label-width="100px">
        <el-row>
          <el-col :span="11">
            <el-form-item label="车牌号" prop="carNum">
              <el-input v-model="form.carNum" placeholder="请输入车牌号" :disabled="true"/>
            </el-form-item>
          </el-col>
          <el-col :span="11">
            <el-form-item label="品牌型号" prop="brandModel">
              <el-input v-model="form.brandModel" placeholder="请输入品牌型号" :disabled="true"/>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="11">
            <el-form-item label="车辆类型" prop="vehicleType">
              <el-input value="罐车" v-if="form.vehicleType == '1'" :disabled="true"/>
              <el-input value="卡车" v-if="form.vehicleType == '2'" :disabled="true"/>
            </el-form-item>
          </el-col>
          <el-col :span="11">
            <el-form-item label="车辆载重" prop="vehicleLoad">
              <el-input v-model="form.vehicleLoad" placeholder="请输入车辆载重" :disabled="true"/>
            </el-form-item>
          </el-col>
        </el-row>


        <el-row>
          <el-col :span="11">
            <el-form-item label="车辆大小" prop="vehicleSize">
              <el-input v-model="form.vehicleSize" placeholder="请输入车辆大小" :disabled="true"/>
            </el-form-item>
          </el-col>
          <el-col :span="11">
            <el-form-item label="车辆限乘" prop="vehicleLimt">
              <el-input v-model="form.vehicleLimt" placeholder="请输入车辆限乘" :disabled="true"/>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="11">
            <el-form-item label="车辆检测信息" prop="vehicleInspect">
              <el-input v-model="form.vehicleInspect" placeholder="请输入车辆检测信息" :disabled="true"/>
            </el-form-item>
          </el-col>
          <el-col :span="11">
            <el-form-item label="所属企业" prop="beyondEnterpriseId">
              <el-input v-model="form.beyondEnterpriseId" placeholder="请输入所属企业" :disabled="true"/>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="11">
            <el-form-item label="责任人" prop="personLiable">
              <el-input v-model="form.personLiable" placeholder="请输入责任人" :disabled="true"/>
            </el-form-item>
          </el-col>
          <el-col :span="11">
            <el-form-item label="联系电话" prop="phone">
              <el-input v-model="form.phone" placeholder="请输入联系电话" :disabled="true"/>
            </el-form-item>
          </el-col>
        </el-row>

      </el-form>
      <div slot="footer" class="dialog-footer">
       <!-- <el-button type="primary" @click="submitForm">确 定</el-button>-->
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>

    <!--值班人员轨迹回放-->
    <el-dialog
      title="车辆轨迹回放"
      :visible.sync="backOpen"
    >
      <el-form :model="backForm" ref="backForm" :rules="rules" label-width="120px">
        <el-row>
          <el-col :span="10">
            <el-form-item label="车牌号" prop="carNum">
              <!--<span>{{ backForm.carNum }}</span>-->
              <el-input v-model="backForm.carNum" :disabled="true"/>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col>
            <el-form-item label="请选择时间段" prop="changeTime">
              <el-radio-group v-model="backForm.changeTime" @change="radioChange">
                <el-radio :label="1">最近2小时</el-radio>
                <el-radio :label="2">最近24小时</el-radio>
                <el-radio :label="3">自定义时间段</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="11">
            <el-form-item label="选择开始时间:" prop="beginTime">
              <el-date-picker
                :disabled="backForm.changeTime != 3"
                v-model="backForm.beginTime"
                type="datetime"
                placeholder="选择开始时间"
              >
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="11">
            <el-form-item label="选择结束时间:" prop="endTime">
              <el-date-picker
                :disabled="backForm.changeTime != 3"
                v-model="backForm.endTime"
                type="datetime"
                placeholder="选择结束时间"
              >
              </el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>

      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="searchLocations()">确 定</el-button>
        <el-button @click="backOpen = false">取 消</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>

import { getLastLocation ,listInfo, getInfo, delInfo, addInfo, updateInfo, exportInfo } from "@/api/operationMonitor/vehicleInfo";
import { getVehicleLocations } from "@/api/operationMonitor/vehicleLocationInfo";
import MapCar from "./component/MapCar";
import { EditorMap } from "@/utils/mapClass/map";
import { mapGetters, mapActions } from "vuex";
import drawer from  "./component/drawer";
import NullVUe from  "@/components/bigWindow/Null";
import moment from "moment";
export default {
  name: "vechicle",
  components: {
    drawer
  },
  data() {
    return {
      //地图
      map: null,
      drawerWidth: '600px',
      // 遮罩层
      loading: true,
      // 总条数
      total: 0,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        carNum: null,
        brandModel: null,
        vehicleType: null,
        vehicleLoad: null,
        vehicleSize: null,
        vehicleLimt: null,
        vehicleInspect: null,
        beyondEnterpriseId: null,
        personLiable: null,
        phone: null,
        isDel: null,
        remarks: null
      },
      // 燃气车辆信息表格数据
      infoList: [],
      form: {},
      // 是否显示弹出层
      open: false,
      // 弹出层标题
      title: "",
      //轨迹回放
      backOpen: false,
      backForm:{
        changeTime: 1,
        beginTime: "",
        endTime: "",
        carNum: "",
        vehicleId: ""
      },
      rules: {
        changeTime: [
          {
            required: true,
            message: "选择查询时间",
            trigger: ["blur", "change"],
          },
        ],
        beginTime: [
          { required: true, message: "请输入开始时间", trigger: "blur" },
        ],
        endTime: [
          { required: true, message: "请输入结束时间", trigger: "blur" },
        ],
      }

    };
  },
  computed: {
    ...mapGetters(["company", "systemSetting"])
  },
  created() {
    this.getList();
  },
  mounted(){
    const path = eval(this.systemSetting.map_center);
    this.map = new EditorMap(
      "map",
      {
        center: path,
       /* mapStyle: "amap://styles/f71d3a3d73e14f5b2bf5508bf1411758",*/
        zoom: 14.5,
      },
      this
    );
  },
  methods: {
    /** 查询燃气车辆信息列表 */
    getList(){
      this.loading = true;
      listInfo(this.queryParams).then(response => {
          this.infoList = response.rows;
          this.total = response.total;
          this.loading = false;
      });
    },
    /** 获取车辆信息操作 */
    getVehicleInfo(row){
      this.reset();
      const vehicleId = row.vehicleId || this.ids
      getInfo(vehicleId).then(response => {
        this.form = response.data;
        this.open = true;
        this.title = "查看燃气车辆信息";
      });
    },
    /**获取车辆轨迹操作*/
    getVehicleTravel(row){
      let param = {};
      param.vehicleId = row.vehicleId;
      this.backForm.vehicleId = row.vehicleId;
      return getLastLocation(param).then(res =>{
        if(res){
          if(res.data.longitude && res.data.latitude){
            res.data.iconType = 9;
            res.data.count=1;
            this.map.clearbackTrack(param.vehicleId)
            this.map.addDevice(res.data,MapCar);
            this.map.map.panTo([res.data.longitude, res.data.latitude]);
          }else{
            this.$message({
              message: '抱歉未获取到当前车辆位置信息！',
              type: 'warning'
            });
          }
        }
      });
    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },
    // 表单重置
    reset() {
      this.form = {
        vehicleId: null,
        carNum: null,
        brandModel: null,
        vehicleType: null,
        vehicleLoad: null,
        vehicleSize: null,
        vehicleLimt: null,
        vehicleInspect: null,
        beyondEnterpriseId: null,
        personLiable: null,
        phone: null,
        isDel: null,
        remarks: null
      };
      this.resetForm("form");
    },
    radioChange(e) {
      if (e == 1) {
        this.backForm.beginTime = moment()
          .subtract(2, "h")
          .format("YYYY-MM-DD HH:mm:ss");
        this.backForm.endTime = moment().format("YYYY-MM-DD HH:mm:ss");
      } else if (e == 2) {
        this.backForm.beginTime = moment()
          .subtract(1, "d")
          .format("YYYY-MM-DD HH:mm:ss");
        this.backForm.endTime =  moment().format("YYYY-MM-DD HH:mm:ss");
      } else {
        this.backForm.beginTime = "";
        this.backForm.endTime = "";
      }
    },
    getCar(carNum){
      this.backOpen=true;
      this.backForm.carNum =carNum;
      this.backForm.beginTime = moment().subtract(2, "h").format("YYYY-MM-DD HH:mm:ss");
      this.backForm.endTime = moment().format("YYYY-MM-DD HH:mm:ss");
    },
    handleCurrentChangvale(val){
      this.queryParams.pageNum = val;
      this.getList();
    },
    carInfoSearch(){
      this.queryParams.pageNum = 1;
      this.getList();
    },
    resetQuery(){
      this.queryParams.pageNum = 1;
      this.queryParams.carNum = null;
      this.getList();
    },
   searchLocations(){
      this.$refs.backForm.validate(async (valid) => {
        if (valid) {
          if (
            moment(this.backForm.beginTime).valueOf() >
            moment(this.backForm.endTime).valueOf()
          ) {
            this.msgError("开始时间不能大于结束时间");
            this.backForm.endTime = "";
            return;
          }
          if (this.backForm.changeTime != 3) {
            this.radioChange(this.backForm.changeTime);
          } else {
            this.backForm.beginTime = moment(this.backForm.beginTime).format(
              "YYYY-MM-DD HH:mm:ss"
            );
            this.backForm.endTime = moment(this.backForm.endTime).format(
              "YYYY-MM-DD HH:mm:ss"
            );
          }
          if(this.map.allDevice[9][0].getExtData().count>1){
            this.map.clearbackTrack();
            await this.getVehicleTravel({vehicleId:this.backForm.vehicleId});
          }else{
            this.map.allDevice[9][0].getExtData().count++
          }
            getVehicleLocations(this.backForm).then(res =>{
            let paths = [];
            let times = [];
            if(res.data.length == 1){
              this.$message({
                message: '抱歉当前车辆只能查看位置信息，无法形成轨迹！',
                type: 'warning'
              });
            }else if(res.data.length == 0){
              this.$message({
                message: '抱歉该时段未查到当前车辆轨迹信息！',
                type: 'warning'
              });
            }else{
              res.data.forEach(item => {
                  paths.push([item.longitude,item.latitude]);
                  times.push(item.reportTime)
              })
                this.map.backTrack(this.backForm.vehicleId,paths,times,NullVUe);
                this.backOpen = false;
            }

          })

        }
      });
    },
    sleep (time) {
      return new Promise((resolve) => setTimeout(resolve, time));
    }
  }
};
</script>
<style lang="scss" scoped>
  .gassVehicle{
    positoin:relative;
    /*background-color: red;*/
  height:calc(100vh - 50px);
    padding:20px;
    padding-bottom:0px;
  }

#map{
  /*position: fixed;*/
  /*width:calc(100vw - 250px);*/
  /*top:70px;*/
  /*bottom:0;*/
  height: 100%;
  width: 100%;
}

/*!* 表格最外边框 *!
.el-table --border, .el-table --group{
  border: none;
}*/
.el-table{
  background-color: #00afff !important;
}

</style>
