// 查看派车详情
<template>
  <div class="container">
    <el-row>
      <el-col :span="20">
        <h2 class="bg-left title">查看派车详情</h2>
      </el-col>
      <el-col :span="4" class="bg-right">
        <el-button
          class="bg-bottom"
          type="primary"
          size="small"
          @click="revert()"
        >
          <img
            width="6"
            height="10"
            style="vertical-align: bottom; margin-right: 3px"
            src="../../../public/img/lujing.png"
            alt
          />返回
        </el-button>
      </el-col>
    </el-row>
    <ws-form ref="deptBudgetList" :rules="rules" :model="deptBudgetList">
      <div class="small-title" style="font-size: 16px">任务详情</div>
      <ws-info-table>
        <!--任务编号-->
        <ws-form-item label="任务编号" span="1" prop="processNo">{{
          deptBudgetList.processNo
        }}</ws-form-item>
        <!--货名-->
        <ws-form-item label="货名" span="1" prop="goodsName">{{
          deptBudgetList.goodsName
        }}</ws-form-item>
        <!--重量（吨）-->
        <ws-form-item label="重量（吨）" span="1" prop="weight">{{
          deptBudgetList.weight
        }}</ws-form-item>

        <!--发货地址-->
        <ws-form-item label="发货地址" span="1" prop="sendDetailedAddress">
          {{ deptBudgetList.sendPrivate }}{{ deptBudgetList.sendCity
          }}{{ deptBudgetList.sendArea }}
        </ws-form-item>

        <!--发货人-->
        <ws-form-item label="发货人" span="1" prop="sender" class="readonly">{{
          deptBudgetList.sender
        }}</ws-form-item>

        <!--发货人电话-->
        <ws-form-item
          label="发货人电话"
          span="1"
          prop="senderPhone"
          class="readonly"
          >{{ deptBudgetList.senderPhone }}</ws-form-item
        >
        <!--收货地址-->
        <ws-form-item label="收货地址" span="1" prop="receiveDetailedAddress">
          {{ deptBudgetList.receivePrivate }}{{ deptBudgetList.receiveCity
          }}{{ deptBudgetList.receiveArea }}
        </ws-form-item>
        <!--收货人-->
        <ws-form-item label="收货人" span="1" prop="receiver">{{
          deptBudgetList.receiver
        }}</ws-form-item>
        <!--收货人电话-->
        <ws-form-item label="收货人电话" span="1" prop="receiverPhone">{{
          deptBudgetList.receiverPhone
        }}</ws-form-item>
        <!--发货日期-->
        <ws-form-item label="发货日期" span="1" prop="deliveryDateStart">{{
          deptBudgetList.deliveryDateStart
        }}</ws-form-item>
        <!--最晚到货日期-->
        <ws-form-item label="最晚到货日期" span="1" prop="deliveryDateEnd">{{
          deptBudgetList.deliveryDateEnd
        }}</ws-form-item>
        <!--合同编号-->
        <ws-form-item label="合同编号" span="1" prop="contractNo">{{
          deptBudgetList.contractNo
        }}</ws-form-item>
      </ws-info-table>
      <div class="small-title" style="font-size: 16px">派车</div>
      <div
        style="width: 100%"
        class="driver"
        v-for="(item, index) in deptBudgetList.tranCarInfoList"
        :key="index"
      >
        <ws-info-table>
          <div class="catNos">
            司机-{{ index + 1 }}
            <span class="noservice" v-show="item.status == '未送达'">
              {{ item.status }}
            </span>
            <span class="service" v-show="item.status == '已送达'">
              {{ item.status }}
            </span>
          </div>
          <!--姓名-->
          <ws-form-item label="姓名:" span="1" prop="driver">{{
            item.driver
          }}</ws-form-item>
          <ws-form-item
            class="phone"
            label="电话:"
            span="1"
            prop="driverPhone"
            >{{ item.driverPhone }}</ws-form-item
          >
          <ws-form-item label="车牌号:" span="1" prop="carNo">
            <template slot-scope="scope">
              <el-popover
                placement="top"
                :width="160"
                trigger="hover"
                visible-arrow="false"
                @show="hover(scope.row)"
              >
                <template>
                  <span slot="reference">
                    <span class="executory">
                      {{ item.carNo }}
                    </span>
                  </span>
                </template>
                <div>
                  <span>车型：</span>
                  <span>{{ item.carModel }}</span>
                  <br />
                  <span>车长（米）：</span>
                  <span>{{ item.carLength }}</span>
                  <br />
                  <span>载重（吨）：</span>
                  <span>{{ item.loadWeight }}</span>
                </div>
              </el-popover>
            </template>
          </ws-form-item>
          <ws-form-item label="装车（吨）:" span="1" prop="loadNetWeight">{{
            item.loadNetWeight
          }}</ws-form-item>
          <ws-form-item label="卸车（吨）:" span="1" prop="unloadNetWeight">{{
            item.unloadNetWeight
          }}</ws-form-item>
          <ws-form-item label="损耗（吨）:" span="1" prop="loss">{{
            item.loss
          }}</ws-form-item>
          <ws-form-item
            label="合同:"
            span="1"
            prop="unloadNetWeight"
            class="hetong"
          ></ws-form-item>
        </ws-info-table>
      </div>
    </ws-form>
    <div style="text-align: right; padding: 10px">
      <el-button
        class="bg-bottom-up"
        type="primary"
        size="small"
        @click="revert()"
        >关闭</el-button
      >
    </div>
  </div>
</template>
<script>
import Pagination from '@/components/Pagination'
import WsUpload from '@/components/WsUpload'
import { seeCat } from '@/model/transport/index'
import { dayjs } from 'base-core-lib'
export default {
  name: 'viewSpareMoney',
  components: {
    WsUpload,
    Pagination,
  },
  watch: {
    isShow(val) {
      this.showType = val
    },
  },
  data() {
    return {
      // 是否显示
      showType: true,
      // 年
      year: '',
      currentPage: 1,
      pageSize: 10,
      searchType: 1,
      startDate: null,
      endDate: null,

      readonly: true,
      rules: {
        netWeight: [
          {
            required: true,
            type: 'number',
            message: '请输入活动名称',
            trigger: 'blur',
          },
        ],
      },
      size: 10,
      date: {
        year: dayjs().format('YYYY'),
        month: dayjs().format('MM'),
      },
      deptBudgetList: {
        warehouseInOutDetail: {},
      },
      pickerBeginDateBefore: {
        disabledDate: (time) => {
          return time.getTime() > Date.now()
        },
      },
      accessoryTFs: false,
    }
  },
  activated() {
    this.getList()
  },
  methods: {
    //返回按钮
    revert() {
      this.$router.go(-1)
    },
    del(index) {
      if (this.freightspace.length > 1) {
        this.freightspace.splice(index, 1)
      }
    },
    getList() {
      seeCat({ id: this.$route.query.id })
        .toPromise()
        .then((response) => {
          for (var i = 0; i < response.tranCarInfoList.length; i++) {
            if (
              response.tranCarInfoList[i].loadNetWeight &&
              response.tranCarInfoList[i].unloadNetWeight
            ) {
              response.tranCarInfoList[i].loss =
                response.tranCarInfoList[i].loadNetWeight -
                response.tranCarInfoList[i].unloadNetWeight
            } else if (response.tranCarInfoList[i].loadNetWeight) {
              response.tranCarInfoList[i].loss =
                response.tranCarInfoList[i].loadNetWeight
            } else {
              response.tranCarInfoList[i].loss = 0
            }
          }
          this.deptBudgetList = response
        })
    },
  },
}
</script>
<style lang="scss" scoped>
/deep/.basicInformation {
  .ws-info-table {
    border: none;
  }
  .el-form-item {
    width: 33.3333%;
    border: none;
    .el-form-item__label {
      background: transparent;
      border: none;
    }
    .el-form-item__content {
      border: none;
    }
  }
}
.small-title {
  position: relative;
  padding: 10px;
  font-weight: 600;
}
.small-title::before {
  position: absolute;
  content: '';
  display: block;
  background: #5473e8;
  width: 4px;
  height: 14px;
  left: 0px;
  top: 13px;
}
.title {
  position: relative;
  padding-left: 10px;
}
.title::before {
  content: '';
  display: inline-block;
  width: 5px;
  height: 30px;
  background: #5473e8;
  position: absolute;
  left: 0;
}
.el-form {
  padding: 0 10%;
}
.el-button--primary {
  background-color: #5878e8;
  border-color: #5878e8;
}
.el-col {
  background: #f6f7fc;
}
.bg-right {
  text-align: right;
  padding: 16px 20px;
}

/deep/.ws-info-table .el-form-item {
  width: 33.33%;
}
/deep/.el-form-item__label {
  width: 160px;
}
//选填
/deep/.el-form-item {
  width: 50%;
}
.container {
  overflow: scroll;
  height: 120vh;
}
/deep/.ws-info-table .el-form-item .el-form-item__label {
  text-align: center;
}
.deliverydate {
  display: inline-block;
  width: 10%;
}

//表格文字
/deep/.ws-info-table .el-form-item .el-form-item__label {
  text-align: left;
  font-size: 14px;
  font-weight: 400;
  color: #000;
  line-height: 16px;
}
.small-title {
  position: relative;
  padding: 10px;
  font-weight: 600;
}
.small-title::before {
  position: absolute;
  content: '';
  display: block;
  width: 4px;
  height: 14px;
  left: 0px;
  top: 13px;
  padding: 4px 2px;
}
// .ws-info-table[data-v-850a44a6] .el-form-item {
//     width: 16.66%;
// }

//去边框
/deep/.el-form-item,
/deep/.ws-info-table {
  border: none;
}

/deep/.ws-info-table .el-form-item .el-form-item__content {
  border: none;
}
/deep/.ws-info-table .el-form-item {
  border: none;
  height: 50px;
}
/deep/.ws-info-table .el-form-item .el-form-item__content {
  background: #f5f7fa;
  color: #8890b1;
  font-size: 14px;
}
.driver {
  position: relative;
  background: #f6f7fb;
  border-radius: 4px;
  border: 1px solid #d8dce6;
  margin-top: 20px;
}
.not,
.already {
  position: absolute;
  left: -45px;
  top: 10px;
}
/deep/.ws-info-table .el-form-item .el-form-item__label {
  background: #fff;
  color: #8890b1;
  font-size: 14px;
}
/deep/.driver .ws-info-table .el-form-item {
  width: 14.286%;
}
/deep/.driver .ws-info-table .el-form-item .el-form-item__label {
  width: 50%;
  text-align: center;
  background: #f6f7fb;
  font-size: 14px;
  color: #8890b1;
}

/deep/.driver .ws-info-table .el-form-item.phone .el-form-item__label {
  width: 50px;
}
/deep/.catNos {
  width: 100%;
  margin-top: 10px;
  margin-left: 15px;
}
/deep/.driver .ws-info-table .el-form-item .el-form-item__content {
  border-right: 1px solid #d8dce6;
  background: #f6f7fb;
  font-size: 14px;
  color: #8890b1;
}
/deep/.hetong .ws-info-table .el-form-item .el-form-item__content {
  border: none;
}
//送达/未送达
.noservice,
.service {
  display: inline-block;
  border-radius: 4px;
  border: 1px solid #d8dce6;
  padding: 2px;
  font-size: 12px;
}
.noservice {
  background: #c4cada;
  color: #ffffff;
}
.service {
  background: #e5f1f7;
  color: #50cad4;
}
/deep/.driver.ws-info-table .el-form-item .el-form-item__content {
  border: none;
}
</style>