<template>
  <!-- 运单查询 -->
  <!-- 查询单条温湿度数据 -->
  <div class="waybillquiry_home">
    <div class="waybillquiry_head">
      <div class="card_waybillquiry">
        <el-image style="height: 45px;width: 45px;flex: none;" :src="require('@/assets/logo3.png')"></el-image>
        <div class="head_title">宝智达冷链运单查询</div>
      </div>
      <div class="Waybill_inquiry">
        <span class="title_inquiry">运单查询:</span>
        <div class="input_card_waybill">
          <el-input placeholder="请输入内容" v-model="waybillNo" class="input-with-select">
            <el-button slot="append" icon="el-icon-search" @click="getSearch">查询</el-button>
          </el-input>
        </div>
      </div>
    </div>
    <div class="card_search">
      <div :class="!deviceType ? 'card_table' : 'mobile_table'">
        <el-tabs type="border-card" v-model="tabIndex" @tab-click="tabChange">
          <el-tab-pane label="温湿度监控">
            <div class="card_Einzelband">
              <div class="chart_card">
                <div id="pie" class="chart"></div>
              </div>
              <div class="chart_card">
                <div id="pie1" class="chart"></div>
              </div>
            </div>
          </el-tab-pane>
          <el-tab-pane label="物流跟踪">
            <logisticsTracking :activities="activitiesList"></logisticsTracking>
          </el-tab-pane>
          <el-tab-pane label="轨迹查询">
            <div class="track_waybill">
              <map-container ref="mapTracing" :trackList="trackList"></map-container>
            </div>
          </el-tab-pane>
        </el-tabs>
      </div>
    </div>
  </div>
</template>

<script>
  import {
    getWaybill,
    getWaybillTask,
    waybillTaskLocus,
    wayNewestLocus,
  } from '@/api/waybillLogistics'
  import logisticsTracking from '@/components/logisticsTracking'
  import MapContainer from '@/components/MapContainer'
  export default {
    name: 'WaybillInquiry',
    components: {
      logisticsTracking,
      MapContainer
    },
    data() {
      return {
        input3: '',
        tabIndex: '0',
        activitiesList: [],
        statusList: [{
          id: 1,
          title: '待派单',
        }, {
          id: 2,
          title: '待装车',
        }, {
          id: 3,
          title: '待入库',
        }, {
          id: 4,
          title: '已装车',
        }, {
          id: 5,
          title: '已入库',
        }, {
          id: 6,
          title: '已下车',
        }, {
          id: 7,
          title: '已出库',
        }, {
          id: 8,
          title: '已签收',
        }],
        geoCoder: null,
        waybillNo: null,
        trackList: [],
        deviceType: false,
        myChart: null,
        myChart1: null,
      }
    },
    created() {
      document.title = '宝智达运单查询'

      function isMobile() {
        let userAgentInfo = navigator.userAgent;
        let Agents = ['Android', 'iPhone', 'SymbianOS', 'Windows Phone', 'iPad', 'iPod'];
        let getArr = Agents.filter(i => userAgentInfo.includes(i));
        return getArr.length ? true : false;
      }
      this.deviceType = isMobile()
    },
    mounted() {
      const waybillNo = this.$route.query.waybillNo
      this.waybillNo = waybillNo
      this.getTask()
      this.resizeChart()
      this.$nextTick(() => {
        setTimeout(() => {
          // AMap.service(["AMap.Geocoder"], function() {});
          // this.getTaskLocus()
        })
      })
    },
    methods: {
      resizeChart() {
        window.addEventListener("resize", () => {
          this.myChart.resize();
          this.myChart1.resize();
        });
      },
      getSearch() {
        if (this.tabIndex == 0 || this.tabIndex == '0') {
          this.getTask()
        } else if (this.tabIndex == 1 || this.tabIndex == '1') {
          this.getList()
        } else if (this.tabIndex == 2 || this.tabIndex == '2') {
          this.getTaskLocus()
        }
        // console.log(this.waybillNo, this.tabIndex, 557)
      },
      getList() {
        getWaybill({
          waybillNo: this.waybillNo,
        }).then((res) => {
          if (res.code == 200) {
            var arrList = []
            if (res.data.list) {
              arrList = res.data.list
            }
            if (arrList.length > 0) {
              arrList.forEach(async (item) => {
                item.content = ''
                let arr = this.statusList.filter((i) => {
                  return item.status == i.id;
                });
                let yonTitle = ''
                if (item.car.id) {
                  yonTitle = item.car.carNo
                } else if (item.warehouse.id) {
                  yonTitle = item.warehouse.name
                }
                item.content = item.address + '【' + yonTitle + '】' + '您的货物' + arr[0].title
                // await setTimeout(() => {
                //   this.reverseGeocode(item.lng, item.lat).then(res => {
                //     const trapeze = res
                //     item.content = trapeze + item.content
                //   })
                // }, 1000)
              })
              this.activitiesList = arrList
              this.activitiesList[0].field = 'primary'
            }
            this.$forceUpdate()
          }
        })
      },
      // 轨迹查询
      getTaskLocus() {
        this.trackList = []
        waybillTaskLocus({
          waybillNo: this.waybillNo,
        }).then(res => {
          if (res.code == 200) {
            let arrList = res.data
            if (arrList.length > 0) {
              arrList.forEach(item => {
                const data = item.T_site.split(',')
                this.trackList.push(data)
              })
            }
            this.$nextTick(() => {
              this.$refs.mapTracing.keyUpSearch()
            })
          }
        })
      },
      // 获取运单列表
      async getTask() {
        wayNewestLocus({
          waybillNo: this.waybillNo,
        }).then(res => {
          if (res.code == 200) {
            let arr = {
              T_t: res.data.T_t,
              T_tl: res.data.T_tl,
              T_tu: res.data.T_tu,
            }
            let arr1 = {
              T_rh: res.data.T_rh,
              T_rhl: res.data.T_rhl,
              T_rhu: res.data.T_rhu,
            }
            this.drawPie(arr)
            this.drawPie1(arr1)
          }
        })
      },
      // 当前温度
      drawPie(value) {
        const dataInfo = {
          status: '当前温度',
          value: value.T_t
        }
        const color = '#3592FE' //3592FE
        let that = this
        that.myChart = that.$echarts.init(document.getElementById('pie'))
        let option = {
          series: [{
            type: 'gauge',
            radius: '88%',
            startAngle: 225,
            endAngle: -45,
            min: value.T_tl,
            max: value.T_tu,
            splitNumber: 10,
            progress: {
              show: true,
              width: 18
            },
            axisLine: {
              lineStyle: {
                width: 18
              }
            },
            axisTick: {
              show: false
            },
            splitLine: {
              length: 6,
              width: 2,
              lineStyle: {
                color: color
              }
            },
            axisLabel: {
              distance: 25,
              color: '#999',
              fontSize: 13
            },
            title: {
              show: false
            },
            itemStyle: {
              color: color,
              shadowColor: 'rgba(0,138,255,0.45)',
            },
            markPoint: {
              data: [{
                x: "50%",
                y: "50%",
                symbol: 'circle',
                symbolSize: 20,
                itemStyle: {
                  color: color
                },
              }, {
                x: "50%",
                y: "50%",
                symbol: 'circle',
                symbolSize: 14,
                itemStyle: {
                  color: "#fff"
                },
              }]
            },
            detail: {
              valueAnimation: true,
              fontSize: 30,
              offsetCenter: [0, '50%'],
              formatter: function() {
                return '{status|' + dataInfo.status + '}\n{value|' + dataInfo.value + '℃}';
              },
              rich: {
                status: {
                  fontSize: 14,
                  lineHeight: 22,
                  color: '#333333'
                },
                value: {
                  fontSize: 23,
                  lineHeight: 32,
                  color: color
                }
              }
            },
            data: [dataInfo]
          }]
        };
        that.myChart.setOption(option);
      },
      // 当前湿度
      drawPie1(value) {
        const dataInfo = {
          status: '当前湿度',
          value: value.T_rh,
        }
        const color = '#67C23A'
        let that = this
        that.myChart1 = that.$echarts.init(document.getElementById('pie1'))
        let option = {
          series: [{
            type: 'gauge',
            radius: '88%',
            startAngle: 225,
            endAngle: -45,
            min: value.T_rhl,
            max: value.T_rhu,
            splitNumber: 10,
            progress: {
              show: true,
              width: 18
            },
            axisLine: {
              lineStyle: {
                width: 18
              }
            },
            axisTick: {
              show: false
            },
            splitLine: {
              length: 6,
              width: 2,
              lineStyle: {
                color: color
              }
            },
            axisLabel: {
              distance: 25,
              color: '#999',
              fontSize: 13
            },
            title: {
              show: false
            },
            itemStyle: {
              color: color,
              shadowColor: 'rgba(0,138,255,0.45)',
            },
            markPoint: {
              data: [{
                x: "50%",
                y: "50%",
                symbol: 'circle',
                symbolSize: 20,
                itemStyle: {
                  color: color
                },
              }, {
                x: "50%",
                y: "50%",
                symbol: 'circle',
                symbolSize: 14,
                itemStyle: {
                  color: "#fff"
                },
              }]
            },
            detail: {
              valueAnimation: true,
              fontSize: 30,
              offsetCenter: [0, '50%'],
              formatter: function() {
                return '{status|' + dataInfo.status + '}\n{value|' + dataInfo.value + '℃}';
              },
              rich: {
                status: {
                  fontSize: 14,
                  lineHeight: 22,
                  color: '#333333'
                },
                value: {
                  fontSize: 23,
                  lineHeight: 32,
                  color: color
                }
              }
            },
            data: [dataInfo]
          }]
        }
        that.myChart1.setOption(option);
      },
      reverseGeocode(longitude, latitude) {
        return new Promise((resolve, reject) => {
          var geocoder = new AMap.Geocoder({
            // 需要设置的其他选项...
          });
          // 使用逆地理编码服务
          geocoder.getAddress([longitude, latitude], function(status, result) {
            if (status === 'complete' && result.info === 'OK') {
              // 得到地理位置信息
              resolve(result.regeocode.addressComponent.city)
            }
          });
        })
      },
      tabChange(value) {
        this.getSearch()
      }
    }
  }
</script>

<style lang="scss" scoped>
  .waybillquiry_home {
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
  }

  .waybillquiry_head {
    width: 95%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }

  .card_waybillquiry {
    margin: 15px;
    display: flex;
    align-items: center;
  }

  .head_title {
    font-size: 24px;
    font-weight: bold;
    color: rgb(35, 49, 105);
    margin-left: 10px;
  }

  .card_search {
    display: flex;
    flex-direction: column;
    width: 95%;
    margin-bottom: 30px;
  }

  .Waybill_inquiry {
    margin-left: 6.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.25rem;
  }

  .title_inquiry {
    flex: none;
    font-size: 18px;
    font-weight: 500;
    margin-right: 10px;
  }

  .input_card_waybill {
    width: 500px;
  }

  .card_table {
    width: 100%;
  }

  .card_Einzelband {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: space-evenly;
  }

  .chart_card {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 500px;
  }

  #pie {
    width: 300px;
    height: 300px;
  }

  #pie1 {
    width: 300px;
    height: 300px;
  }

  .track_waybill {
    width: 100%;
    height: 75vh;
  }

  .mobile_table {
    width: 100%;
  }

  .mobile_table ::v-deep .el-tabs--border-card>.el-tabs__content {
    padding: 0px !important;
  }
</style>
