/**
  // author：jiana
  // time:2025-04-23
  // desc:运单管理
*/
<template>
  <div class="deviceAbnormality">
    <Card>
      <!-- 筛选 -->
      <Row :gutter="8">
        <Col span="10">
          运单号 <Input v-model="filtInfoData.waybillNum" placeholder="请输入运单号" style="width:80%"/>
        </Col>
        <Col span="2">
          <Button type="primary" @click="getData">查询</Button>
        </Col>
        <Col span="2">
          <Button @click="resetData">重置</Button>
        </Col>
      </Row>
    </Card>
    <Card style="margin-top:20px;">
      <Row>
        <Col span="12">
          运单列表
        </Col>
        <Col span="12" style="text-align: right;">
          <!-- <Button @click="batchOperation">批量操作</Button> -->
        </Col>
      </Row>
      <!-- 表格部分 -->
      <el-table v-loading="loading" :data="TabData.data" border style="width: 100%;margin-top:20px;" @selection-change="handleSelectionChange">
        <!-- <el-table-column type="selection" align="center" width="50"/> -->
        <el-table-column label="运单号" width="180" prop="waybillNum" align="center"/>
        <el-table-column label="运输起始地" width="100" prop="waybill.transportOrigin" align="center"></el-table-column>
        <el-table-column label="运输目的地" width="120" prop="waybill.transportDestination" align="center"></el-table-column>
        <el-table-column label="司机姓名" prop="waybill.driverName" width="120"  align="center"></el-table-column>
        <el-table-column label="司机手机号" prop="waybill.driverPhone" width="120" align="center"></el-table-column>
        <el-table-column label="车牌" prop="waybill.plateNumber" width="120" align="center"></el-table-column>
        <el-table-column label="车牌颜色" align="center" prop="waybill.plateColor" width="100">
        </el-table-column>
        <el-table-column label="状态" align="center" width="100">
          <template #default="scope">
            <Tag color="green" v-if="scope.row.status == 'NORMAL'">正常</Tag>
            <Tag color="red" v-if="scope.row.status == 'ABNORMAL'">异常</Tag>
          </template>
        </el-table-column>
        <el-table-column label="运输发货时间" width="160" align="center">
          <template #default="scope">
            {{ moment(scope.row.startTime).format('yyyy-MM-DD hh:mm:ss') || '暂无'}}
          </template>
        </el-table-column>
        <el-table-column label="运输到货时间" width="160" align="center">
          <template #default="scope">
            {{ moment(scope.row.endTime).format('yyyy-MM-DD hh:mm:ss') || '暂无'}}
          </template>
        </el-table-column>
        <el-table-column label="订单号" prop="waybill.orderInfo.orderNum" width="220" align="center"></el-table-column>
        <el-table-column label="物料名称" prop="waybill.orderInfo.name" width="150" align="center"></el-table-column>
        <el-table-column label="供应商名称" prop="waybill.orderInfo.company" width="180" align="center"></el-table-column>
        <el-table-column label="牧场名称" prop="waybill.orderInfo.orgName" width="180" align="center"></el-table-column>
        <el-table-column label="操作" width="180"  fixed="right" align="center">
          <template  #default="scope">
            <Button class="opt_btn" size="small" type="primary" ghost @click="lookTrack(scope.row)">查看轨迹</Button>
            <Button class="opt_btn" size="small" type="warning" @click="lookInfo(scope.row.exceptionInfo)">查看异常</Button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <div class="page_style">
        <Page :total="TabData.total" :model-value="currentPage" show-elevator show-total @on-change="changePage" />
      </div>
    </Card>
    <!-- 查看轨迹 -->
    <Modal v-model="showModal" width="75%" title="查看轨迹">
      <mapTrack :waybillNum="waybillNum" :waybill="waybill" v-if="showModal"></mapTrack>
    </Modal>
    <!-- 查看异常 -->
    <Modal v-model="showInfo" width="60%" title="查看异常">
      <el-descriptions title="">
          <el-descriptions-item label="设备经度:">{{exceptionInfo.deviceLon}}</el-descriptions-item>
          <el-descriptions-item label="设备纬度:">{{exceptionInfo.devideLat}}</el-descriptions-item>
          <el-descriptions-item label="车辆经度:">{{exceptionInfo.carLon}}</el-descriptions-item>
          <el-descriptions-item label="车辆纬度:">{{exceptionInfo.carLat}}</el-descriptions-item>
          <el-descriptions-item label="车辆是否在电子围栏:">{{exceptionInfo.carinCircle == true ? '是':'否'}}</el-descriptions-item>
          <el-descriptions-item label="设备是否在电子围栏:">{{exceptionInfo.deviceInCircle == true ? '是':'否'}}</el-descriptions-item>
          <el-descriptions-item label="设备到电子围栏中心距离:">{{exceptionInfo.distance}}</el-descriptions-item>
          <el-descriptions-item label="车辆到电子围栏中心距离:">{{exceptionInfo.cardistance}}</el-descriptions-item>
          <el-descriptions-item label="设备及车辆之间的距离:">{{exceptionInfo.carDevieDistance}}</el-descriptions-item>
      </el-descriptions>
    </Modal>
  </div>
</template>

<script>
import { defineComponent, ref ,reactive, onMounted} from 'vue'
import { tms } from '@/request/api'
import { Message,Modal,Spin,Input } from 'view-ui-plus'
import moment from 'moment'
import {useRoute} from 'vue-router'
import mapTrack from "./mapTrack.vue"
import {plateColorFilter} from '@/utils/system/filters'
export default defineComponent({
  components:{
    mapTrack
  },
  setup() {
    const route = useRoute()
    let filtInfoData = reactive({ // 搜索
      limit:10,offset:0,waybillNum:'',type:'DEVICE'
    })

    let TabData = ref([])  // 列表数据

    let loading = ref(false)
    //获取列表内容
    async function getData(){
      loading.value = true
      await tms.queryWaybillExceptionByCondition(filtInfoData).then(res =>{
        if (res.code == 0) {
          TabData.value = res
        }
      })
      loading.value = false
    }
    //重置
    function resetData(){
      filtInfoData.offset = 0
      filtInfoData.limit = 10
      filtInfoData.waybillNum = ''
      filtInfoData.type = 'DEVICE'
      getData()
    }

    let currentPage = ref(1)
    //更改页码
    function changePage (page) {
      if(TabData.value.limit){
        filtInfoData.offset = (page -1) *  TabData.value.limit  //更新偏移量
        currentPage = page  //切换当前页码
        getData() 
      }
    }

    //删除
    function deleteInfo(id){
      this.$Modal.confirm({
        title: '提示',
        content: '<p>确定删除该信息吗？</p>',
        onOk: async() => {
          const params={
            id:id,
            reason:offSafeValue.value
          }
          await cow.cattleDealoffSale(params).then(res=>{
            if(res.code === 101){
              Message.success('删除成功！');
              getData()
            }
          })
        },
        onCancel: () => {
          this.$Message.info('Clicked cancel');
        }
      })
    }

    //批量操作
    function batchOperation(){
      
    }

    // 选择监听器
    const handleSelectionChange = (val) =>{
      context.emit("selection-change", val)
    }

    const showModal = ref(false)
    let waybillNum = ref('')
    const waybill = ref({}) // 运单数据
    // 查看详情
    function lookTrack(data){
      console.log(data);
      
      waybill.value = data.waybill
      waybillNum.value = data.waybillNum
      showModal.value = true
    }
    const showInfo = ref(false)
    const exceptionInfo = ref({})
    //查看异常
    function lookInfo(data){
      showInfo.value = true
      exceptionInfo.value = JSON.parse(data)
    }
    onMounted(()=>{
      getData() 
    })

    return {
      handleSelectionChange,getData,changePage,moment,deleteInfo,TabData,filtInfoData,
      loading,batchOperation,resetData,exceptionInfo,showInfo,lookInfo,lookTrack,showModal,plateColorFilter,waybillNum,waybill
    }
  },
})
</script>

<style lang="scss" scoped>
.deviceAbnormality{
  padding: 1em;
  .opt_btn{margin-bottom:3px; margin-right: 3px;}
  .page_style{
    text-align: right; margin-top: 1em;
    // background-color: var(--system-container-background);
  }
}
</style>