<template>
  <!-- 车辆运输 -->
  <div class="inTransit">
    <el-form :inline="true">
      <el-form-item>
        <label class="el-form-item__label" style="width: auto;">时间段</label>
        <el-date-picker
          v-model="dateValue"
          type="daterange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
        >
        </el-date-picker>
      </el-form-item>
      <el-form-item>
        <span class="el-form-item__span" style="width: auto;">产品分类</span>
        <el-input v-model="inputValue" placeholder="请输入内容"></el-input>
      </el-form-item>
      <el-form-item>
        <span class="el-form-item__span" style="width: auto;">车牌号</span>
        <el-input v-model="capacityNumber1" placeholder="请输入内容"></el-input>
      </el-form-item>
      <el-form-item>
        <span class="el-form-item__span" style="width: auto;">收货单位</span>
        <el-input
          v-model="consigneeCompanyName1"
          placeholder="请输入内容"
        ></el-input>
      </el-form-item>
      <el-form-item>
        <span class="el-form-item__span" style="width: auto;">承运单位</span>
        <el-input v-model="carrierName" placeholder="请输入内容"></el-input>
      </el-form-item>
      <el-form-item>
        <span class="el-form-item__span" style="width: auto;">门岗名称</span>
        <el-input v-model="gatepostName" placeholder="请输入内容"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSearch"
          ><i class="el-icon-search"></i>查询</el-button
        >
      </el-form-item>
    </el-form>
    <!-- 执行中 -->

    <mergeRowTable ref="tab" v-bind.sync="option">
      <el-table-column fixed="right" label="操作" width="180">
        <template slot-scope="scope">
          <el-button
            @click="click(scope.row)"
            type="text"
            size="small"
            style="font-size: 17px"
            >轨迹</el-button
          >
          <el-button
            @click="toPhotoClick(scope.row.orderNumber)"
            type="text"
            size="small"
            style="font-size: 17px"
            >抵达图</el-button
          >
          <el-button
            @click="receipctPhotoClick(scope.row.orderNumber)"
            type="text"
            size="small"
            style="font-size: 17px"
            >签收图</el-button
          >
        </template>
      </el-table-column>
    </mergeRowTable>

    <div style="height: 100%">
      <vxe-modal width="1237" height="731" v-model="value7" show-zoom resize>
        <template #default>
          <PathView v-bind.sync="pathOption"></PathView>
        </template>
      </vxe-modal>
    </div>
    <vxe-modal width="549px" height="731px" v-model="isShow" show-footer>
      <div class="demo-image__preview">
        <el-image
          style=" height:731px;text-align:center;"
          :src="src"
          :preview-src-list="srcList"
        >
        </el-image>
      </div>
    </vxe-modal>
    <vxe-modal width="549px" height="731px" v-model="isShow2" show-footer>
      <div class="demo-image__preview">
        <el-image
          style=" height:731px;text-align:center"
          :src="src2"
          :preview-src-list="srcList2"
        >
        </el-image>
      </div>
    </vxe-modal>
    <div style="height: 100%">
      <vxe-modal width="1237" height="731" v-model="value5" show-zoom resize>
        <template #default>
          <dilTable ref="tableAlarm" v-bind.sync="optionAlarm"></dilTable>
        </template>
      </vxe-modal>
    </div>
  </div>
</template>

<script>
import { sjTime } from "@/utils/sharedJsFile";
import PathView from "./mapTest.vue";
export default {
  name: "inTransit",
  components: {
    PathView
  },
  data() {
    return {
      dateValue: [new Date(), new Date()],
      inputValue: "",
      exceptionType: "全部类型",
      selectOrderNumber: "",
      capacityNumber1: "",
      carrierName: "",
      gatepostName: "",
      value7: false,
      value6: false,
      value5: false,
      dialogVisible: false,
      consigneeCompanyName1: "",
      status: "",
      state: "",
      activeName: "first",
      option: {
        // 表格请求数据的地址
        requestUrl: "/api/v1/otms/transportationPerformance?apiId=479",
        comparison: "orderNumber",
        columnIndexs: [1, 2, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19]
      },

      optionAlarm: {
        requestUrl: ""
      },
      pathOption: {
        orderNumber: "",
        capacityNumber: "",
        startPointName: "",
        endPointName: ""
      },
      mileOption: {
        orderNumber: ""
      },
      alarmOption: {
        orderNumber: ""
      },
      srcList: [],
      src: "",
      isShow: false,
      srcList2: [],
      src2: "",
      isShow2: false
    };
  },
  mounted() {
    console.log("nijfdsojfosafj");
    this.restaurants = this.loadAll();
    // this.onSearch();
  },
  methods: {
    receipctPhotoClick(orderNumber) {
      this.axios
        .post("/api/v1/otms/getReceivingPhotoByUrl?orderNumber=" + orderNumber)
        .then(res => {
          console.log(res.data);
          this.isShow2 = true;
          this.srcList2 = [];
          this.src2 = res.data.resultReceiveNotePhoto;
          this.srcList2.push(res.data.resultReceiveNotePhoto);
          this.srcList2.push(res.data.resultSignedNotePhoto);
          this.srcList2.push(res.data.resultEmptyContainerPhoto);
        });
    },
    toPhotoClick(orderNumber) {
      this.axios
        .post("/api/v1/otms/getArrivalPhoto?orderNumber=" + orderNumber)
        .then(res => {
          this.srcList = [];
          this.src = res.data.data;
          this.isShow = true;
          this.srcList.push(res.data.data);
        });
    },

    showPathView(data) {
      this.dialogVisible = !this.dialogVisible;
      this.selectOrderNumber = data.orderNumber;
    },

    createFilter(queryString) {
      return restaurant => {
        return (
          restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) ===
          0
        );
      };
    },
    loadAll() {
      return [
        { value: "螺纹钢" },
        { value: "微粉" },
        { value: "带钢" },
        { value: "钢坯" },
        { value: "其他" }
      ];
    },
    exportData() {
      let tHeader = [];
      let filterVal = [];
      if (this.activeName == "first") {
        this.$refs.tab.dataColumnData.filter((item, i) => {
          tHeader.push(item.label);
          filterVal.push(item.prop);
        });
        this.export2Excel(
          tHeader,
          filterVal,
          this.$refs.tab.dataTabel,
          "执行中表格"
        );
      } else if (this.activeName == "second") {
        this.$refs.tab2.dataColumnData.filter((item, i) => {
          tHeader.push(item.label);
          filterVal.push(item.prop);
        });
        this.export2Excel(
          tHeader,
          filterVal,
          this.$refs.tab2.dataTabel,
          "已完成表格"
        );
      } else if (this.activeName == "third") {
        this.$refs.tab3.dataColumnData.filter((item, i) => {
          tHeader.push(item.label);
          filterVal.push(item.prop);
        });
        this.export2Excel(
          tHeader,
          filterVal,
          this.$refs.tab3.dataTabel,
          "有异常表格"
        );
      }
    },
    export2Excel(tHeader, filterVal, dataTabel, exeName) {
      var that = this;
      this.downloadLoading = true;
      require.ensure([], () => {
        const {
          export_json_to_excel
        } = require("@/assets/excel/Export2Excel.js"); //这里必须使用绝对路径，使用@/+存放export2Excel的路径
        console.log("export_json_to_excel", export_json_to_excel);
        let list = dataTabel;
        let data = that.formatJson(filterVal, list);
        export_json_to_excel(tHeader, data, exeName); // 导出的表格名称
      });
    },
    //3.格式转换
    formatJson(filterVal, jsonData) {
      return jsonData.map(v => filterVal.map(j => v[j]));
    },
    onSearch() {
      if (this.activeName == "first") {
        //改变执行中条件
        console.log(this.$refs.tab);
        console.log("this.$refs.tab");
        this.$refs.tab.setDataRequestQuery({
          startTime: sjTime(this.dateValue[0]),
          endTime: sjTime(this.dateValue[1]),
          materialNames: this.inputValue,
          capacityNumbers: this.capacityNumber1,
          carrierNames: this.carrierName,
          outGatepostNames: this.gatepostName,
          receiveNames: this.consigneeCompanyName1
        });
      }
      if (this.activeName == "second") {
        //改变已完成条件
        this.$refs.tab2.setDataRequestQuery({
          startTime: sjTime(this.dateValue[0]),
          endTime: sjTime(this.dateValue[1]),
          materialNames: this.inputValue,
          capacityNumbers: this.capacityNumber1,
          carrierNames: this.carrierName,
          outGatepostNames: this.gatepostName,
          receiveNames: this.consigneeCompanyName1
        });
      }
      if (this.activeName == "third") {
        //改变有异常条件
        this.$refs.tab3.setDataRequestQuery({
          startTime: sjTime(this.dateValue[0]),
          endTime: sjTime(this.dateValue[1]),
          materialNames: this.inputValue,
          capacityNumber1: this.capacityNumber1,
          carrierName1: this.carrierName,
          abnormalType:
            this.exceptionType == "全部类型" ? "" : this.exceptionType,
          outGatepostNames: this.gatepostName,
          receiveNames: this.consigneeCompanyName1
        });
      }
    },

    //other
    click(row) {
      let that = this;
      that.axios
        .post("/api/v1/otms/fullPath?orderNumber=" + row.orderNumber)
        .then(res => {
          console.log(res.data);
          if (res.data.data == "-1") {
            this.$message.error("运输订单未关闭的自提车辆无权查看!");
          } else if (res.data.data.startAndEndRoutes != null) {
            that.pathOption.orderNumber = row.orderNumber;
            that.pathOption.capacityNumber = row.capacityNumber;
            (that.pathOption.startPointName = "达钢集团" + row.outGatepostName),
              (that.pathOption.endPointName = row.deliveryAddress),
              (that.value7 = true);
          } else {
            this.$message.error("车辆没有开启GPS");
          }
        });
    },
    historyclick(row) {
      this.pathOption.orderNumber = row.orderNumber;
      this.pathOption.capacityNumber = row.capacityNumber;
      (this.pathOption.startPointName = "达钢集团" + row.outGatepostName),
        (this.pathOption.endPointName = row.deliveryAddress),
        console.log(this.pathOption, "this.pathOption");
      this.value7 = true;
    },
    allDistanceclick(orderNumber) {
      //this.$router.push("/offsite/inTransitOrderMileage?orderNumber="+orderNumber);

      this.mileOption.orderNumber = orderNumber;
      this.value6 = true;
    },
    inTransitAlarmclick(orderNumber) {
      this.optionAlarm.requestUrl =
        "/api/v1/otms/getTransportAbnormalInfo?apiId=472&orderNumbers=" +
        orderNumber;
      this.value5 = true;
    }
  }
};
</script>
<style lang="scss" scoped>
.el-input {
  width: 150px;
  margin-left: 5px;
}
span.el-form-item__span {
  float: left;
  margin-top: 7px;
}
.homeworkPath {
  .top {
    padding: 20px 30px;
  }
}
</style>
