// 订单审核
<template>
  <div class="center">
    <div class="center_css">
      <div class="top_css">
        <el-row>
          <el-col :span="14">
            <el-button type="primary" @click="billing" style="margin-right:10px">批量开票</el-button>
            <el-date-picker v-model="value1" value-format="yyyy-MM-dd" @change="dateChange" type="daterange"
              range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期">
            </el-date-picker>
          </el-col>
          <el-col :span="10">
            <div class="screen">
              <el-input class='find' placeholder="可按订单编号、姓名、账号查找" @keyup.enter.native="find" v-model="searchkeyWord"
                clearable @change="find"></el-input>
              <el-button class="search" @click="find"><img width="16" height="16" style="margin-left: -8px"
                  src="../../../public/img/sousuo.png" /></el-button><span class="count_css">共{{ deptBudgetTotal
                  }}条</span>
            </div>
          </el-col>
        </el-row>
        <el-row>
          <el-col>
            <div class="search_btn">
              <div :class="search == '' ? 'search' : 'searchNo'" class="search_item search_block"
                @click="searchBtn('')">
                全部
              </div>
              <div :class="search == 1 ? 'search' : 'searchNo'" class="search_item" @click="searchBtn(1)">
                待审核
              </div>
              <div :class="search == 2 ? 'search' : 'searchNo'" class="search_item" @click="searchBtn(2)">
                待付款
              </div>
              <div :class="search == 3 ? 'search' : 'searchNo'" class="search_item" @click="searchBtn(3)">
                待还款
              </div>
              <div :class="search == 4 ? 'search' : 'searchNo'" class="search_item" @click="searchBtn(4)">
                待开票
              </div>
              <div :class="search == 5 ? 'search' : 'searchNo'" class="search_item" @click="searchBtn(5)">
                已完结
              </div>
            </div>
          </el-col>
        </el-row>
      </div>
      <el-table :data="tableData" style="width: 98%; margin: 0 auto; border-radius: 10px" height="68vh" border
        @row-click="handleRowClick" @selection-change="handleSelectionChange" highlight-current-row>
        <el-table-column type="selection" width="55" :selectable="selectInit">
        </el-table-column>
        <el-table-column fixed="left" type="index" label="序号" width="50">
          <template scope="scope">
            <span v-if="scope.$index < 9">0{{ scope.$index + 1 }}</span>
            <span v-else>{{ scope.$index + 1 }}</span>
          </template>
        </el-table-column>
        <el-table-column fixed="left" prop="orderNo" label="订单编号" min-width="182">
          <template scope="scope">
            <div>{{ scope.row.orderNo }} <span class="pad_css" v-if="scope.row.freightAdvance == '垫付'">垫</span></div>
          </template>
        </el-table-column>
        <el-table-column min-width="160" prop="cargoOwner" label="货主">
          <template scope="scope">
            <div>{{ scope.row.cargoOwner }} </div>
            <div>（{{ scope.row.cargoOwnerPhone }}）</div>
          </template>
        </el-table-column>
        <el-table-column min-width="160" prop="driverName" label="司机">
          <template scope="scope">
            <div>{{ scope.row.driverName }} </div>
            <div>（{{ scope.row.driverPhone }}）</div>
          </template>
        </el-table-column>
        <!-- <el-table-column prop="freight" label="运费(元)">
          <template slot-scope="scope">
             //用货主订单key值来判断（装车前不显示）3未装车
            {{scope.row.cargoOwnerStatusKey > 3 ? scope.row.freight : ""}}
          </template>
        </el-table-column> -->
        <el-table-column prop="freight" label="预计运费(元)"></el-table-column>
        <el-table-column prop="actualFreight" label="实际运费(元)"></el-table-column>
        <el-table-column prop="advanceCharge" label="预付运费(元)"></el-table-column>
        <el-table-column prop="amountMoney" label="司机费用结算">
          <!-- <el-table-column prop="driverServiceCharge" label="服务费(元)"></el-table-column> -->
          <el-table-column prop="payable" label="应付(元)"></el-table-column>
          <el-table-column prop="payabled" label="已付(元)"></el-table-column>
          <el-table-column prop="nopayable" label="未付(元)"></el-table-column>
        </el-table-column>
        <el-table-column prop="amountMoney" label="货主费用结算">
          <el-table-column prop="ownerServiceCharge" label="工本费(元)"></el-table-column>
          <el-table-column prop="overdueFee" label="超期费(元)">
            <template slot-scope="scope">
              <span class="btn_css" @click="costLook(scope.row)">{{ scope.row.overdueFee }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="receivable" label="应收(元)"></el-table-column>
          <el-table-column prop="receivabled" label="已收(元)"></el-table-column>
        </el-table-column>
        <el-table-column prop="invoicing" label="发票"></el-table-column>
        <el-table-column prop="driverContractUrl" label="合同">
          <template scope="scope">
            <span @click="contract(scope.row)" class="btn_css"
              v-if="scope.row.orderStatusKey > 3 && scope.row.cargoOwnerStatus != '已终止'">查看</span>
          </template>
        </el-table-column>
        <el-table-column prop="updateDate" label="更新时间" min-width="160"></el-table-column>
        <!-- <el-table-column prop="cargoOwnerStatus" label="状态" min-width="92">
          <template scope="scope">
            <span>{{scope.row.cargoOwnerStatus}}</span>
            <i v-if='scope.row.cargoOwnerStatus=="已"' class="el-icon-question"></i>
          </template>
        </el-table-column> -->
        <el-table-column prop="cargoOwnerStatus" label="状态" min-width="92">
          <template slot-scope="scope">
            <span>{{ scope.row.cargoOwnerStatus }}</span>
            <el-popover v-if='scope.row.terminator == 1 || scope.row.terminator == 2' placement="top-start"
              :title="scope.row.terminator == 1 ? '司机终止订单' : '货主终止订单'" width="200" trigger="hover">
              <div v-html='scope.row.content'></div>
              <i v-if='scope.row.cargoOwnerStatus == "已终止" && scope.row.terminator' slot="reference"
                class="el-icon-question"></i>
            </el-popover>
          </template>
        </el-table-column>
        <el-table-column label="操作" min-width="350">
          <template slot-scope="scope">
            <el-link target="_blank" @click="see(scope.row)" type="primary" :underline="false"
              :disabled="scope.row.orderStatusKey != 9 && scope.row.orderStatusKey != 19">确认
              <!-- 9待平台确认装车 19待平台确认卸车 -->
              <!-- 待平台确认装车和待平台确认卸车时显示 -->
            </el-link>
            <el-divider direction="vertical"></el-divider>
            <el-link target="_blank" @click="see(scope.row)" type="primary" :underline="false"
              :disabled="scope.row.orderStatusKey != 9 && scope.row.orderStatusKey != 19">驳回
              <!-- 9待平台确认装车 19待平台确认卸车 -->
              <!-- 待平台确认装车和待平台确认卸车时显示 -->
            </el-link>
            <el-divider direction="vertical"></el-divider>
            <el-link target="_blank" @click="see(scope.row)" type="primary" :underline="false">查看</el-link>
            <el-divider direction="vertical"></el-divider>
            <el-dropdown>
              <span class="btn_css">•••</span>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item>
                  <el-link target="_blank" @click="end(scope.row)" type="primary" :underline="false"
                    :disabled="scope.row.cargoOwnerStatusKey > 18">终止</el-link>
                  <!-- cargoOwnerStatusKey=19待平台确认卸车，待货主确认卸车key = 18 -->
                </el-dropdown-item>
                <el-dropdown-item>
                  <el-link target="_blank" @click="see(scope.row)" type="primary" :underline="false"
                    :disabled="scope.row.freightAdvance == '非垫付' && scope.row.cargoOwnerStatusKey != 29">完结</el-link>
                  <!-- 完结：支付完尾款后从未进行过完结操作前显示的操作。 -->
                </el-dropdown-item>
                <el-dropdown-item>
                  <!-- 运输中的可以付预付款-->
                  <!-- <el-link target="_blank" type="primary" :underline="false" v-if="scope.row.freightAdvance == '垫付'"
                    :disabled="scope.row.cargoOwnerStatusKey == 13?'true':'false' && scope.row.payabled " @click="preMoneyChange(scope.row)">预付</el-link> -->
                  <!-- 垫付类型的订单，平台确认装车后从未进行过预付操作（即预付款=0）时显示的按钮。 -->
                </el-dropdown-item>
                <!-- 货主订单状态key（1待接单3未装车5待确认装车7已驳回装车信息9待平台确认装车11平台驳回装车信息13运输中15待收货17已驳回卸车信息19待平台确认卸车21平台驳回卸车信息
                 * 23待结算25已结算27待还款29已还款31已完结33已终止） -->
                <el-dropdown-item>
                  <!-- 垫付  待结算  未付过尾款的 -->
                  <!-- <el-link target="_blank" type="primary" :underline="false" v-if="scope.row.freightAdvance == '垫付'"
                    :disabled="scope.row.cargoOwnerStatusKey == 23?'false':'true' && scope.row.payabled == scope.row.payable" @click="tailmoneyChange(scope.row)">尾款</el-link> -->
                  <!-- 垫付类型的订单，平台确认卸车后从未进行过尾款操作（即尾款=0）时显示的按钮。 -->
                </el-dropdown-item>
                <el-dropdown-item>
                  <!-- :disabled="scope.row.orderStatus != '运输中'" -->
                  <el-link :disabled="scope.row.orderStatus == '未装车'||scope.row.orderStatus == '待货主确认'||scope.row.orderStatus == '未装车'" target="_blank"
                    type="primary" :underline="false" @click="toMapPage(scope.row)">轨迹</el-link>
                </el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage"
      style="text-align: center; margin-top: 10px" :page-size="deptCircularPage.pageSize"
      layout="total, sizes, prev, pager, next, jumper" :total="deptBudgetTotal">
    </el-pagination>
    <el-dialog :close-on-click-modal='false' title="超期费用" :visible.sync="costInfo" width="500px"
      :before-close="costClose">
      <div class="cost_css">
        <div class="cost_item">
          <div class="cost_title">起计日期</div>
          <div class="cost_value">2022-02-15</div>
        </div>
        <div class="cost_item">
          <div class="cost_title">终止日期</div>
          <div class="cost_value">2022-02-15</div>
        </div>
        <div class="cost_item">
          <div class="cost_title">超期费率</div>
          <div class="cost_value">{{ costData.interestRate }}</div>
        </div>
        <el-divider></el-divider>
        <div class="cost_item">
          <div class="cost_title">已付运费</div>
          <div class="cost_value">{{ costData.interestRate }}</div>
        </div>
        <div class="cost_item">
          <div class="cost_title">超期费用</div>
          <div class="cost_value">{{ costData.interestRate }}</div>
        </div>
        <div class="right_btn">
          <el-button @click="costInfo = false" type="primary">关闭</el-button>
        </div>
      </div>
    </el-dialog>
    <el-dialog :close-on-click-modal='false' title="账户信息" :visible.sync="userInfo" width="500px"
      :before-close="userClose">
      <div class="user" v-for="(item, index) in 2" :key="index">
        <div class="user_id">
          <div class="id_css">12121212121212121212</div>
          <div class="name_css">张三</div>
        </div>
        <div>中国银行-鲅鱼圈支行</div>
        <img src="../../../public/img/yonghu.jpg" class="user_item" />
      </div>
    </el-dialog>
    <el-drawer title="订单详情" :visible.sync="rightSee">
      <div class="right_css">
        <div>
          <div class="title_name">基本信息</div>
          <div class="right_item">订单编号：{{ costData.orderNo }}</div>
          <div class="right_title">货主</div>
          <div class="right_item">{{ costData.cargoOwner }}</div>
          <div class="right_title">司机</div>
          <div class="right_item">{{ costData.driverName }}</div>
          <div class="right_title">发货单位</div>
          <div class="right_item">{{ costData.compName }}</div>
          <div class="right_title">发货地</div>
          <div class="right_item">
            {{ costData.sendPrivate }}{{ costData.sendCity }}{{ costData.sendArea }}{{ costData.sendDetailedAddress }}
          </div>
          <div class="right_title">卸货地</div>
          <div class="right_item">
            {{ costData.unloadPrivate }}{{ costData.unloadCity }}{{ costData.unloadArea }}{{
                costData.unloadDetailedAddress
            }}
          </div>
          <div class="right_title">货物类别</div>
          <div class="right_item">{{ costData.goodsType }}</div>
          <div class="right_title">货名</div>
          <div class="right_item">{{ costData.goodsName }}</div>
          <div class="right_title">发货联系人</div>
          <div class="right_item">{{ costData.publishTaskInfo.sender }}</div>
          <div class="right_title">发货联系人电话</div>
          <div class="right_item">{{ costData.publishTaskInfo.senderPhone }}</div>

          <div class="right_title">收货联系人</div>
          <div class="right_item">{{ costData.publishTaskInfo.receiver }}</div>
          <div class="right_title">收货联系人电话</div>
          <div class="right_item">{{ costData.publishTaskInfo.receiverPhone }}</div>
          <div class="right_title">收货人身份证号</div>
          <div class="right_item">{{ costData.publishTaskInfo.receiverIdcard }}</div>
          <div class="right_title">收货方信用代码（选填）</div>
          <div class="right_item">
            {{ costData.publishTaskInfo.receiverCreditCode ? costData.publishTaskInfo.receiverCreditCode : '暂无' }}</div>


          <div class="right_title">距离</div>
          <div class="right_item">约{{ costData.distance ? costData.distance : 0 }}km</div>
          <div class="right_title">运费</div>
          <div class="right_item">{{ costData.freight }}</div>
          <el-divider v-if="costData.hyCarrierInfo"></el-divider>
          <div v-if="costData.hyCarrierInfo">
            <div class="title_name">承运信息</div>
            <div class="right_title">承运合同编号</div>
            <div class="right_item">{{ costData.contractNo }}</div>
            <div class="right_title">委托合同编号</div>
            <div class="right_item">{{ costData.wtContractNo }}</div>
            <div class="right_title">车牌号</div>
            <div class="right_item">{{ costData.hyCarrierInfo.carNo }}</div>
            <div class="right_title" v-if="costData.hyCarrierInfo.loadingWeight">装车净重(吨)</div>
            <div class="right_item" v-if="costData.hyCarrierInfo.loadingWeight">{{ costData.hyCarrierInfo.loadingWeight
            }}
            </div>
            <div class="right_title" v-if="costData.hyCarrierInfo.unloadingWeight">卸车净重(吨)</div>
            <div class="right_item" v-if="costData.hyCarrierInfo.unloadingWeight">
              {{ costData.hyCarrierInfo.unloadingWeight }}</div>
            <div class="right_title">预计运费</div>
            <div class="right_item">{{ costData.hyCarrierInfo.estimatedFreight }}</div>
            <div class="right_title">装车时间</div>
            <div class="right_item">{{ costData.hyCarrierInfo.loadingDate }}</div>
            <div class="right_title">运输时长</div>
            <div class="right_item">{{ costData.hyCarrierInfo.transportationDuration }}</div>
            <div class="right_title" v-if="costData.hyCarrierInfo.loadingCity">装车定位</div>
            <div class="right_item">{{ costData.hyCarrierInfo.loadingCity }}{{ costData.hyCarrierInfo.loadingArea }}
            </div>
            <div class="right_title">装车照片</div>
            <div style="display: flex;" v-if="costData.hyCarrierInfo.loadingImg">
              <div v-for="(item, index) in costData.hyCarrierInfo.loadingImg.split(',')" :key="index">
                <img :src="item" class="img_css" @click="enlarge(item)">
              </div>
            </div>
            <div class="right_title" v-if="costData.hyCarrierInfo.totalFreight">合计应付运费</div>
            <div class="right_item">{{ costData.hyCarrierInfo.totalFreight }}</div>
            <div class="right_title" v-if="costData.hyCarrierInfo.unloadingDate">卸车时间</div>
            <div class="right_item">{{ costData.hyCarrierInfo.unloadingDate }}</div>
            <div class="right_title" v-if="costData.hyCarrierInfo.unloadingCity">卸车定位</div>
            <div class="right_item">{{ costData.hyCarrierInfo.unloadingCity }}{{ costData.hyCarrierInfo.unloadingArea }}
            </div>
            <div class="right_title" v-if="costData.hyCarrierInfo.unloadingImg">卸车照片</div>
            <div style="display: flex;" v-if="costData.hyCarrierInfo.unloadingImg">
              <div v-for="(item, index) in costData.hyCarrierInfo.unloadingImg.split(',')" :key="index">
                <img :src="item" class="img_css" @click="enlarge(item)">
              </div>
            </div>
            <div class="right_title" v-if="costData.hyCarrierInfo.receiptImg">回单照片</div>
            <div style="display: flex;" v-if="costData.hyCarrierInfo.receiptImg">
              <div v-for="(item, index) in costData.hyCarrierInfo.receiptImg.split(',')" :key="index">
                <img :src="item" class="img_css" @click="enlarge(item)">
              </div>
            </div>
          </div>
          <el-divider v-if="costData.freightInfo"></el-divider>
          <div v-if="costData.freightInfo">
            <div class="title_name">运费信息（单位：元）</div>
            <div class="right_title">预付运费</div>
            <div class="right_item">{{ costData.freightInfo.prepaidFreight }} <span style="margin-left: 100px;">{{
                costData.freightInfo.prepaidFreightDate
            }}</span></div>
            <div class="right_title">运费尾款</div>
            <div class="right_item">{{ costData.freightInfo.freightBalance ? costData.freightInfo.freightBalance : '未支付'
            }}
              <span style="margin-left: 100px;">{{ costData.freightInfo.freightBalanceDate }}</span>
            </div>
            <div class="right_title" v-if="costData.freightInfo.freightBalance">明细</div>
            <div class="right_item" v-if="costData.freightInfo.freightBalance">
              预付{{ costData.freightInfo.prepaidFreight ? costData.freightInfo.prepaidFreight :
                  0
              }}元，服务费{{ costData.freightInfo.driverServiceCharge ? costData.freightInfo.driverServiceCharge : 0
              }}元，尾款{{ costData.freightInfo.freightBalance ?
                  costData.freightInfo.freightBalance : 0
              }}元，合计收款{{ costData.freightInfo.totalCollection ?
                  costData.freightInfo.totalCollection : 0
              }}元。
            </div>
          </div>
          <el-divider v-if="costData.repaymentInfo"></el-divider>
          <div v-if="costData.repaymentInfo">
            <div class="title_name">还款信息</div>
            <div class="right_title">运费</div>
            <div class="right_item">{{ costData.freight }}</div>
            <div class="right_title">超期费（每天3%）</div>
            <div class="right_item">{{ costData.repaymentInfo.overdueFee }}</div>
            <div class="right_title">合计应还</div>
            <div class="right_item">{{ costData.repaymentInfo.totalRepayable }}</div>
            <div class="right_title">还款（尾号6666）</div>
            <div class="right_item">{{ costData.repaymentInfo.alreadyRepaid }}</div>
          </div>
        </div>
        <div class="right_btn">
          <el-button @click="submit(1)" v-if="costData.orderStatusKey == 9 || costData.orderStatusKey == 19">
            确认</el-button>
          <el-button @click="submit(2)" v-if="costData.orderStatusKey == 9 || costData.orderStatusKey == 19">
            驳回</el-button>
          <el-button @click="complete" v-if="costData.cargoOwnerStatusKey == 29">完结</el-button>
          <el-button @click="rightSee = false">关闭</el-button>
        </div>
      </div>
    </el-drawer>
    <el-image-viewer v-if="imgsVisible" :on-close="closeImgViewer" :url-list="srcList" style="z-index:9999" />
  </div>
</template>
<script>
import {
  getListData,
  getData,
  auditData,
  endData,
  editEndData,
  batchData,
  preMoney,
  tailMoney
} from '@/api/orderManagement'
export default {
  components: {
    'el-image-viewer': () =>
      import('element-ui/packages/image/src/image-viewer'),
  },
  data() {
    return {
      tableData: [],
      //分页
      searchkeyWord: '',
      currentPage: 1,
      pageSize: 10,
      deptBudgetTotal: 0,
      deptCircularPage: {},
      search: '',
      addressUrl: [],
      disabled: false,
      costInfo: false,
      userInfo: false,
      rejectInfo: false,
      startDate: '',
      endDate: '',
      form: {
        checkList: [],
        textarea: '',
      },
      value1: [],
      costData: {
        publishTaskInfo: {}
      },
      rightSee: false,
      modification: [],
      //图片预览
      srcList: [],
      imgsVisible: false,
    };
  },
  mounted() {
    this.getDate()
    this.getList()
  },
  methods: {
    getDate() {//获取默认时间
      let date = new Date()
      let date1 = new Date().setTime(date.getTime() - 3 * 60 * 60 * 24 * 1000) //三天前的时间蹉
      date1 = new Date(parseInt(date1)).toLocaleString().split(' ')[0].replaceAll('/', '-')
      let nian = date1.split('-')[0]
      let yue = date1.split('-')[1]
      if (yue < 10) {
        yue = '0' + yue
      }
      let ri = date1.split('-')[2]
      if (ri < 10) {
        ri = '0' + ri
      }
      this.startDate = nian + '-' + yue + '-' + ri //三天前的時間
      this.endDate = date.getFullYear() + '-' + (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date
        .getMonth() + 1) + '-' + (date.getDate() < 10 ? '0' + date.getDate() : date.getDate()) //當前時間
      this.value1.push(this.startDate)
      this.value1.push(this.endDate)
    },
    //预付
    preMoneyChange(val) {
      this.$confirm('垫付预付款' + val.advanceCharge + '元?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(() => {
          this.listLoading = true
          preMoney({
            id: val.freightId,
            prepaidFreight: val.advanceCharge
          }).then(response => {
            this.$notify({
              title: '成功',
              message: '操作成功！',
              type: 'success'
            });
            this.getList()
            this.listLoading = false
          })
            .catch(() => {
              this.listLoading = false
            })
        })
    },
    //尾款
    tailmoneyChange(val) {
      // 合计运费-预付款-司机服务费=尾款
      let money = Number(val.actualFreight) - Number(val.prepaidFreight) - Number(val.driverServiceCharge)
      this.$confirm('确定垫付尾款：' + money + '元？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(() => {
          this.listLoading = true
          tailMoney({
            id: val.freightId,
            freightBalance: money
          }).then(response => {
            this.$notify({
              title: '成功',
              message: '操作成功！',
              type: 'success'
            });
            this.getList()
            this.listLoading = false
          })
            .catch(() => {
              this.listLoading = false
            })
        })

    },
    closeImgViewer() {
      this.srcList = []
      this.imgsVisible = false;
    },
    enlarge(url) {
      this.imgsVisible = true;
      this.srcList.push(url)
    },
    toMapPage(row) {
      this.$router.push({
        path: 'trajectory',
        query: {
          id: row.id,
          orderNo: row.orderNo,
          sendPrivate: row.sendPrivate,
          sendCity: row.sendCity,
          sendArea: row.sendArea,
          sendDetailedAddress: row.sendDetailedAddress,
          unloadPrivate: row.unloadPrivate,
          unloadCity: row.unloadCity,
          unloadArea: row.unloadArea,
          unloadDetailedAddress: row.unloadDetailedAddress,
          orderStatus: row.orderStatus
        }
      })
    },
    getList() {
      this.loading = true
      let _obj = {}
      _obj.currentPage = this.currentPage
      _obj.pageSize = this.pageSize
      _obj.searchKeyWord = this.searchkeyWord
      _obj.searchType = this.search
      _obj.startDate = this.startDate
      _obj.endDate = this.endDate
      getListData(_obj).then(response => {
        if (response.data.records) {
          for (let i = 0; i < response.data.records.length; i++) {
            if (response.data.records[i].cargoOwnerStatus == '已终止') {
              if (response.data.records[i].terminator == 1) {
                if (response.data.records[i].terminationReason == 1) {
                  response.data.records[i].content = '原因：已与货主协商<br/>描述：' + response.data.records[i].terminationReasonDescription
                } else if (response.data.records[i].terminationReason == 2) {
                  response.data.records[i].content = '原因：货主原因终止<br/>描述：' + response.data.records[i].terminationReasonDescription
                } else if (response.data.records[i].terminationReason == 3) {
                  response.data.records[i].content = '原因：货主个人原因终止<br/>描述：' + response.data.records[i].terminationReasonDescription
                } else if (response.data.records[i].terminationReason == 4) {
                  response.data.records[i].content = '原因：其他<br/>描述：' + response.data.records[i].terminationReasonDescription
                }
              } else if (response.data.records[i].terminator == 2) {
                if (response.data.records[i].terminationReason == 1) {
                  response.data.records[i].content = '原因：已与司机协商<br/>描述：' + response.data.records[i].terminationReasonDescription
                } else if (response.data.records[i].terminationReason == 2) {
                  response.data.records[i].content = '原因：司机原因终止<br/>描述：' + response.data.records[i].terminationReasonDescription
                } else if (response.data.records[i].terminationReason == 3) {
                  response.data.records[i].content = '原因：司机个人原因终止<br/>描述：' + response.data.records[i].terminationReasonDescription
                } else if (response.data.records[i].terminationReason == 4) {
                  response.data.records[i].content = '原因：其他<br/>描述：' + response.data.records[i].terminationReasonDescription
                }
              }


            } else {
              response.data.records[i].content = ''
            }
          }
        }
        this.tableData = response.data.records
        this.deptBudgetTotal = response.data.total
        this.listLoading = false
      })
        .catch(() => {
          this.listLoading = false
        })
    },
    //开票
    billing() {
      if (this.modification.length == 0) {
        this.$message.error('请选择一条未开票条目！');
      }
      let data = {
        orderInfoList: this.modification,
      }
      this.listLoading = true
      batchData(data).then(response => {
        this.getList()
        this.listLoading = false
      })
        .catch(() => {
          this.listLoading = false
        })
    },
    selectInit() {
      return true;
    },
    handleRowClick() { },
    handleSelectionChange(val) {
      this.modification = val
    },
    see(row) {
      this.loading = true
      getData({
        id: row.id
      }).then(response => {
        this.costData = response.data
        this.rightSee = true
        // this.deptBudgetTotal = response.data.total
        this.listLoading = false
      })
        .catch(() => {
          this.listLoading = false
        })
    },
    complete() {
      this.$confirm('确定订单已完结？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(() => {
          this.listLoading = true
          editEndData({
            id: this.costData.id
          }).then(response => {
            this.getList()
            this.listLoading = false
          })
            .catch(() => {
              this.listLoading = false
            })
        })

    },
    end(row) {
      this.$confirm('确定终止该订单？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(() => {
          this.listLoading = true
          endData({
            id: row.id,
            terminator: '3'
          }).then(response => {
            this.$notify({
              title: '成功',
              message: '终止成功！',
              type: 'success'
            });
            this.getList()
            this.listLoading = false
          })
            .catch(() => {
              this.listLoading = false
            })
        })
    },
    dateChange(e) {
      this.startDate = e[0]
      this.endDate = e[1]
      this.getList()
    },
    contract(row) {
      window.open(row.driverContractUrl)
      // this.userInfo = true;
    },
    userClose() {
      this.userInfo = false;
    },
    costLook(row) {
      this.costData = row
      this.costInfo = true;
    },
    costClose() {
      this.costInfo = false;
    },
    searchBtn(num) {
      this.search = num;
      this.getList();
    },
    find() {
      this.currentPage = 1
      this.getList();
    },
    submit(num) {
      var _data = {}
      _data.id = this.costData.id
      _data.examineFlag = num
      if (this.costData.orderStatusKey == 9) {
        _data.loadingFlag = 1
      } else if (this.costData.orderStatusKey == 19) {
        _data.loadingFlag = 2
      }
      this.$confirm(num == 1 ? '确定通过订单？' : '确定驳回订单？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(() => {
          this.listLoading = true
          auditData(_data).then(response => {
            this.$notify({
              title: '成功',
              message: '操作成功！',
              type: 'success'
            });
            this.rightSee = false
            this.getList()
            this.listLoading = false
          })
            .catch(() => {
              this.listLoading = false
            })
        })
    },
    reject(row) {
      this.rejectInfo = true
    },
    rejectClose() {
      this.form = {}
      this.form.checkList = []
      this.rejectInfo = false
    },
    onChange() {
      this.$refs.upload
        .handleSaveBill()
        .then(async (response) => {
          this.formData.addressUrl = response;
        })
        .catch((res) => {
          EventBus.$emit('error', (JSON.parse(res) || {}).message);
          this.$refs.upload.clearFiles();
        });
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.pageSize = val;
      this.getList();
    },
    handleCurrentChange(val) {
      this.currentPage = val;
      console.log(`当前页: ${val}`);
      this.getList();
    },
  },
};
</script>
<style lang="scss" scoped>
.center {
  padding: 10px 20px;
  background: #f5f6f7;
  min-height: calc(100vh - 50px);


  .top_css {
    padding: 10px;

    .search_btn {
      height: 80px;
      background: linear-gradient(#fafbfb, #ffffff);
      display: flex;
      margin-top: 20px;

      .search_block {
        margin-left: 20px;
      }

      .search_item {
        text-align: center;
        font-size: 14px;
        font-weight: 600;
        line-height: 40px;
        width: 112px;
        height: 40px;
        background: #f7f8f9;
        cursor: pointer;
        margin-top: 30px;
      }

      .searchNo {
        color: #323233;
      }

      .search {
        color: #2f53eb;
        background: #ffffff;
      }
    }
  }

  .center_css {
    background: #ffffff;
    border-radius: 1px;
    margin-top: 10px;
    padding-bottom: 10px;
  }

  .screen {
    display: flex;

    .search {
      width: 40px;
      height: 40px;
      background: #2f53eb;
      border-radius: 0px 2px 2px 0px;
      border: 1px solid #DCDFE6;
      margin-left: -1px;
    }

    .count_css {
      width: 80px;
      text-align: center;
      line-height: 40px;
      color: #666666;
    }
  }

  .el-button {
    padding: 10px 20px !important;
  }

  .center_css {

    ::v-deep .el-table th,
    ::v-deep .el-table td {
      text-align: center;
    }

    .fujian {
      font-size: 24px;
      color: #409eff;
    }

    .warning {
      font-size: 14px;
      color: #ed1d1d;
    }
  }
}

.el-button--primary {
  color: #FFF;
  background-color: #2f53eb;
  border-color: #2f53eb;
}

.cost_css {
  .cost_item {
    width: 100%;
    display: flex;
    margin-bottom: 20px;

    .cost_title {
      width: 50%;
      text-align: left;
      color: #9D9D9D;
    }

    .cost_value {
      width: 50%;
      color: #0D0D0D;
      text-align: right;
    }

  }

  .right_btn {
    text-align: right;
    margin-top: 10px;
  }
}

.user {
  margin-bottom: 20px;

  .user_id {
    display: flex;
    height: 30px;
  }

  .name_css,
  .id_css {
    width: 50%;
  }

  .name_css {
    text-align: right;
  }

  .user_item {
    width: 450px;
    height: 300px;
  }
}

::v-deep .el-table--border .el-table__header th {
  background: #f7f8f9;
}

.btn_css {
  color: #409EFF;
  cursor: pointer
}

.sign {
  font-size: 14px;
  color: red;
}

.form_css {
  width: 100%;
  margin: 20px auto 20px;

  ::v-deep .el-checkbox {
    width: 40%;
    height: 30px;
  }

  // ::v-deep .el-dialog__body{
  // 	padding: 10px 20px;
  // }
  ::v-deep .el-dialog__title {
    font-size: 16px;
  }

  ::v-deep .el-textarea__inner {
    background: #F0F1F2;
  }

  .form_btn {
    text-align: right;
    margin-top: 10px;
  }
}

.right_css {
  // overflow-y: auto !important;
  min-height: 1266px;
  padding: 0 20px;

  .right_title {
    color: #9D9D9D;
    font-size: 14px;
    margin-bottom: 4px;
  }

  .title_name {
    margin-bottom: 10px;
  }

  .right_item {
    color: #0D0D0D;
    font-size: 14px;
    margin-bottom: 10px;
  }

  .right_btn {
    text-align: right;
    margin: 10px 0;
  }

  .img_css {
    width: 100px;
    height: 80px;
    margin-right: 5px;
  }

  .right_img {
    width: 200px;
    height: 120px;
    margin-top: 10px;
  }
}

.pad_css {
  background: #F0F4FF;
  color: #2F53EB;
  padding: 2px;
  margin-left: 10px;
}

::v-deep .el-drawer {
  overflow: auto;
}

.find::v-deep input.el-input__inner {
  border-radius: 0;
}
</style>
