<template>
  <div>
    <div class="title">
      <van-row type="flex" style="margin-top: 15px" justify="space-around">
        <van-col span="24" class="header-text" style="display: flex">
          <van-cell-group>
            城市：
            <select name="pets" id="pet-select" v-model="city" class="city" @change="cityChage($event)">
              <option v-for="item in cityOptions" :key="item.value" :value="item.value">{{ item.label }}</option>
            </select>
          </van-cell-group>
        </van-col>
      </van-row>
    </div>
    <div style="width: 100%; overflow-x: auto">
      <Table-vant :option="option" :tableData="resultData" width="790px">
        <template v-slot:startTime="{ item }">
          <div>{{ item.startTime | formatDate('hh:mm:ss') }}</div>
        </template>
        <template v-slot:lastArrivalTime="{ item }">
          <div>{{ item.lastArrivalTime | formatDate('hh:mm:ss') }}</div>
        </template>
        <template v-slot:opreate="{ item }">
          <button class="text-button" @click="geDetail(item)">详情</button>
        </template>
      </Table-vant>
    </div>
  </div>
</template>
<script>
import TableVant from '@/components/Table.vue'
import { getPlan, getSession } from '@/api/user.js'
import { Toast } from 'vant'
import _ from 'lodash'
export default {
  name: '',
  props: {},
  components: { TableVant },
  data() {
    return {
      city: '',
      targetData: [],
      departureData: [],
      cityOptions: [
        { label: '济南', value: '济南' },
        { label: '德州', value: '德州' },
        { label: '聊城', value: '聊城' }
      ],
      resultData: [
        {
          address: '',
          batch: '',
          coordinate: '',
          dateTime: '',
          hospital: '',
          pkgs: '',
          rowNo: '1',
          status: '',
          stopTime: ''
        }
      ],
      option: {
        column: [
          {
            label: '序号',
            tableDataprop: 'rowNo',
            width: '50px',
            align: 'center'
          },
          {
            label: '取件人',
            tableDataprop: 'name',
            width: '50px'
          },
          {
            label: '规划路线',
            tableDataprop: 'path',
            width: '300px'
          },
          {
            label: '总里程',
            tableDataprop: 'totalDistance',
            width: '80px'
          },
          {
            label: '总耗时',
            tableDataprop: 'totalTimes',
            width: '80px'
          },
          {
            label: '出发时间',
            tableDataprop: 'startTime',
            width: '80px'
          },
          {
            label: '回程时间',
            tableDataprop: 'lastArrivalTime',
            width: '80px'
          },
          {
            label: '操作',
            tableDataprop: 'opreate',
            width: '80px',
            align: 'center'
          }
        ]
      }
    }
  },
  computed: {},
  watch: {},
  methods: {
    geDetail(e) {
      this.$store.dispatch('setCurentData', JSON.stringify(e))
      this.$router.push({ path: '/about1', query: { data: JSON.stringify(e) } })
      console.log(e)
    },
    getSessionId() {
      let params = {
        client_id: 'dd48c515fcde43bea0b5bd0b8f77e119',
        grant_type: 'client_credentials',
        client_secret: 'c6602114c9ba488b877d0d84b0e5e700',
        scope: 'read'
      }
      getSession(params, {}).then(res => {
        this.accessToken = res.access_token
        this.initData([...this.departureData, ...this.targetData])
      })
    },
    // 请求数据案例
    initData(list) {
      Toast.loading({
        duration: 0
      })
      console.log('123', list)
      let arr = _.cloneDeep(list)
      const data = {
        region: this.city,
        plate: '',
        departure: '',
        arrival: '',
        departureDate: '06:30',
        customerData: arr
      }
      const params = {
        method: 'GetRouteMatrix_test',
        format: 'json',
        sessionId: this.accessToken,
        sign: '203EF639BA15A6E001B59DB78AB81470B7893CAF',
        appKey: 'dd48c515fcde43bea0b5bd0b8f77e119',
        v: '1.0'
      }
      getPlan(data, params)
        .then(res => {
          Toast.clear()
          let newArr = JSON.parse(res).returnModel
          console.log('返回的数据', newArr)
          newArr.forEach(item => {
            item.data.forEach((e, index) => {
              e.distance = e.distance.toFixed(2)
              e.hospital = e.returnName
              e.status = '未去'
              e.coordinate = e.destination
              e.isOrigin = 'N'
              if (index == item.data.length - 1) {
                e.pkgs = 0
              } else {
                e.pkgs = 100
              }
              // e.distance.toFixed(2)
            })
            item.data.pop()
          })
          this.resultData = newArr
          console.log('aaaaa', this.resultData)

          let arrs = this.resultData
          arrs.forEach((item, index) => {
            item.rowNo = index + 1
          })
        })
        .catch(() => {})
    }
  },
  created() {
    this.city = this.$store.state.app.city
    this.targetData = this.$store.getters.getTarget
    this.departureData = JSON.parse(this.$store.state.app.depart)
    this.resultData = JSON.parse(this.$store.state.app.order)
  },
  mounted() {}
}
</script>
<style lang="scss" scoped>
.header-text {
  font-size: 36px;
  font-weight: 800;
}
</style>