<template>
  <div class="center">
    <div class="center_css">
      <div class="top_css">
        <el-radio v-model="radio" label="1" @change="change('1')">北斗导航</el-radio>
        <el-radio v-model="radio" label="2" @change="change('2')">平台绘制</el-radio>
        <div class="order-detail">
          <!-- <div>订单：{{ querydata.orderNo }}（{{ startDate }} ~ <span
              v-if='querydata.orderStatus == "已完结"'>{{ endDate }}</span><span v-else>运输中</span> ）</div>
          <div> -->
            <!-- {{ startDate }} ~ <span>{{ endDate }}</span> -->
            <div>订单：{{ querydata.orderNo }}（<span>{{ querydata.orderStatus }}</span> ）</div>
          <div>
            发货地：{{ querydata.sendPrivate }}{{ querydata.sendCity }}{{ querydata.sendArea }}{{ querydata.sendDetailedAddress }}
          </div>
          <div>
            卸货地：{{ querydata.unloadPrivate }}{{ querydata.unloadCity }}{{ querydata.unloadArea }}{{ querydata.unloadDetailedAddress }}
          </div>
        </div>
      </div>
      <div class="map">
        <map-drag :radio='radio' :orderid='querydata.id' :currentPage="currentPage" :pageSize="pageSize"
          ref="child"></map-drag>
      </div>
      <el-pagination :current-page="currentPage" style="text-align: center; margin-top: 10px" v-if="radio==2"
        :page-size="deptCircularPage.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="deptBudgetTotal"
        @size-change="handleSizeChange" @current-change="handleCurrentChange" />
    </div>
  </div>
</template>

<script>
import {
  travelpath
} from '@/api/orderManagement'
import mapDrag from '@/components/mapdrag/indexMap'
export default {
  data() {
    return {
      radio: '1',
      querydata: {},
      endDate: '',
      startDate: '',
      currentPage: 1,
      pageSize: 10,
      deptCircularPage: {},
      deptBudgetTotal: 20,
    }
  },
  components: {
    mapDrag
  },
  mounted() {
    this.querydata = this.$route.query
    this.getTime()
  },
  methods: {
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`)
      this.pageSize = val
      this.$refs.child.paging(this.currentPage,this.pageSize)
    },
    handleCurrentChange(val) {
      this.currentPage = val
      console.log(`当前页: ${val}`)
      this.$refs.child.paging(this.currentPage,this.pageSize)
    },
    change(val) {
      this.getTime()
      this.currentPage=1
      this.pageSize=10
      this.radio = val
    },
    getTime() {
      let _obj = {}
      _obj.orderId = this.querydata.id
      _obj.currentPage = this.currentPage
      _obj.pageSize = this.pageSize
      travelpath(_obj).then(response => {
        if(response.data.records.length>0){
          this.startDate = response.data.records[0].startDate
          this.endDate = response.data.records[0].endDate
        }
        this.deptBudgetTotal = response.data.total
      }).catch(() => {})
    }
  }
}
</script>

<style lang="scss" scoped>
.center {
  padding: 20px;
  background: #f5f6f7;
  // height: calc(100vh - 5vh);
}

.center_css {
  background: #ffffff;
  border-radius: 1px;
  height: 100%;
}

.top_css {
  padding: 10px;
  display: flex;

}
</style>
