<template>
  <div class="app-container">
    <!-- 扣车单位 -->
    <div class="left">
      <div class="left_top">
        当前选择的是:&nbsp;&nbsp;{{ chooseData.buckleName }}
      </div>
      <el-input placeholder="请输入名称" size="small" style="margin:1rem 0 1rem 0" v-model="filterText"/>
      <el-skeleton v-if="treeLoading"/>
      <el-tree v-else @check="handleSelectionChange" :data="dictDataTree" ref="tree"
               :filter-node-method="filterNode"
               @node-click="handleNodeClick"
               highlight-current
               :default-checked-keys="[chooseData.id]"
      >
        <template v-slot="{ node, data }">
          <!-- 自定义节点内容 -->
          <span class="custom-tree-node">
        {{ truncateText(data.buckleName, 15) }}({{ data.buckleCount }})
      </span>
        </template>
      </el-tree>
    </div>

    <!-- 具体表格 -->
    <div class="right">
      <!-- 搜索栏 -->
      <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="90px">
        <el-form-item label="名称" prop="connectionName">
          <el-input
            v-model="queryParams.connectionName"
            placeholder="请输入客户名称"
            clearable
            @keyup.enter.native="handleQuery"
          />
        </el-form-item>
        <el-form-item label="客户车牌号" prop="licenseNum">
          <el-input
            v-model="queryParams.licenseNum"
            placeholder="请输入车牌号"
            clearable
            @keyup.enter.native="handleQuery"
          />
        </el-form-item>
        <el-form-item label="司机名称" prop="driverName">
          <el-input
            v-model="queryParams.driverName"
            placeholder="请输入司机名称"
            clearable
            @keyup.enter.native="handleQuery"
          />
        </el-form-item>
        <el-form-item label="司机车牌号" prop="driverCarNum">
          <el-input
            v-model="queryParams.driverCarNum"
            placeholder="请输入救援车辆车牌号"
            clearable
            @keyup.enter.native="handleQuery"
          />
        </el-form-item>
        <el-form-item label="扣车状态" prop="rescueStatus">
          <el-select v-model="queryParams.rescueStatus" placeholder="请选择收费类型" clearable>
            <el-option
              v-for="dict in this.getDictDatas(DICT_TYPE.RESCUE_STATUS)"
              :key="dict.value"
              :label="dict.label"
              :value="dict.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="扣车时间" prop="maintenanceTime">
          <el-date-picker
            v-model="timeArray"
            type="daterange"
            value-format="yyyy-MM-dd"
            align="right"
            unlink-panels
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            :picker-options="pickerOptions">
          </el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
          <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
        </el-form-item>
      </el-form>

      <el-row style="margin: 1rem 0" :gutter="10" class="mb8">
        <el-col :span="1.5">
          <el-button type="primary" icon="el-icon-download" :loading="exportLoading" size="mini" @click="handleExport">
            导出
          </el-button>
        </el-col>
        <right-toolbar :showSearch.sync="showSearch" @queryTable="getTabList"></right-toolbar>
      </el-row>

      <el-table v-loading="loading" :data="infoList">
        <el-table-column label="序号" align="center">
          <template scope="scope">
            <span>{{ scope.$index + 1 }}</span>
          </template>
        </el-table-column>
        <el-table-column label="扣车单位" prop="deptId" align="center">
          <template scope="scope">
            <span>{{ getBuckleName(scope.row.deptId) }}</span>
          </template>
        </el-table-column>
        <el-table-column label="客户信息" align="center">
          <el-table-column label="姓名" align="center" prop="connectionName"/>
          <el-table-column label="手机号" width="130" align="center" prop="connectionPhone"/>
          <el-table-column label="车牌号" width="150" align="center" prop="licenseNum">
            <template slot-scope="scope">
              <span v-if="editType===0 && scope.$index == editIdx"><el-input v-model="scope.row.licenseNum "></el-input><i
                @click="editInfo(scope.row)" class="el-icon-check"></i></span>
              <span v-else>{{ scope.row.licenseNum }}<i @click="editInfoFront(0,scope.$index)" class="el-icon-edit"></i></span>
            </template>
          </el-table-column>
        </el-table-column>
        <el-table-column label="救援司机" align="center">
          <el-table-column label="姓名" align="center" prop="driverName"/>
          <el-table-column label="手机号" width="130" align="center" prop="driverPhoneNum"/>
          <el-table-column label="车牌号" width="120" align="center" prop="driverCarNum">
            <template slot-scope="scope">

              <span v-if="editType===1 && scope.$index == editIdx"><el-input
                v-model="scope.row.driverCarNum "></el-input><i @click="editInfo(scope.row)" class="el-icon-check"></i></span>
              <span v-else>{{ scope.row.driverCarNum }}<i @click="editInfoFront(1,scope.$index)"
                                                          class="el-icon-edit"></i></span>
            </template>
          </el-table-column>
        </el-table-column>
        <el-table-column label="救援时间" width="100" align="center" prop="rescueTime">
          <template slot-scope="scope">
            <span>{{ parseTime(scope.row.rescueTime, '{y}-{m}-{d} {h}:{m}') }}</span>
          </template>
        </el-table-column>
        <el-table-column label="救援类型" align="center" prop="rescueType">
          <template slot-scope="scope">
            <dict-tag :type="DICT_TYPE.DLJY_TYPE" :value="scope.row.rescueType"/>
          </template>
        </el-table-column>
        <el-table-column label="路段" align="center" prop="sectionRoad"/>
        <el-table-column label="车辆类型" align="center" prop="carType">
          <template slot-scope="scope">
            <dict-tag :type="DICT_TYPE.RESCUE_CAR_TYPE" :value="scope.row.carType"/>
          </template>
        </el-table-column>
        <el-table-column width="130" label="救援地点" :show-overflow-tooltip="true" align="center"
                         prop="rescuePosition"/>
        <el-table-column label="收费类型" align="center" prop="feeType">
          <template slot-scope="scope">
            <dict-tag :type="DICT_TYPE.FEE_TYPE" :value="scope.row.feeType"/>
          </template>
        </el-table-column>
        <el-table-column label="救援状态" align="center" prop="rescueStatus">
          <template slot-scope="scope">
            <dict-tag :type="DICT_TYPE.JY_STATUS" :value="scope.row.rescueStatus"/>
          </template>
        </el-table-column>
        <el-table-column label="订单状态·" align="center" prop="orderStatus">
          <template slot-scope="scope">
          <span v-if="scope.row.orderStatus">
             <dict-tag :type="DICT_TYPE.JY_ORDER_STATUS" :value="scope.row.orderStatus"/>
          </span>
            <span v-else>
            未成单
         </span>
          </template>
        </el-table-column>

        <el-table-column label="应收金额(元)" width="150" align="center" prop="setMoney">
          <template slot-scope="scope">

            <span v-if="editType===2 && scope.$index == editIdx"><el-input oninput="value=value.replace(/[^0-9.]/g,'')"
                                                                           v-model="scope.row.setMoney2 "></el-input><i
              @click="editInfo(scope.row,2)" class="el-icon-check"></i></span>
            <span v-else>{{ scope.row.setMoney / 100 }}<i @click="editInfoFront(2,scope.$index)"
                                                          class="el-icon-edit"></i></span>
          </template>
        </el-table-column>
        <el-table-column label="实收金额(元)" width="150" align="center" prop="setMoney">
          <template slot-scope="scope">
            <span>{{ scope.row.payMoney / 100 }}</span>
          </template>
        </el-table-column>
        <el-table-column label="收款时间" align="center" width="100" prop="setMoney">
          <template slot-scope="scope">
            <span>{{ scope.row.payTime }}</span>
          </template>
        </el-table-column>
        <el-table-column fixed="right" label="操作" align="center" width="150" class-name="small-padding fixed-width">
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="text"
              icon="el-icon-delete"
              @click="handleDelete(scope.row)"
            >删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>

      <div style="margin-bottom: 10rem">
        <pagination
          v-show="total>0"
          :total="total"
          :page.sync="queryParams.pageNo"
          :limit.sync="queryParams.pageSize"
          @pagination="getTabList"
        />
      </div>
    </div>
  </div>
</template>

<script>
import {downloadOrder, listBuckle, listInfo, updateInfo} from "@/api/rescue/info";

export default {
  name: "BuckleList",
  data() {
    return {
      // 导出遮罩层
      exportLoading: false,
      // 遮罩层
      loading: true,
      filterText: '',
      chooseData: '',
      dictDataTree: [],
      // 加载遮罩
      treeLoading: true,
      // 查询参数
      queryParams: {
        licenseNum: null,
        pageNo: 1,
        pageSize: 10,
        connectionName: null,
        isAppointment: null,
        rescueType: null,
        feeType: null,
        carBrand: null,
        destinationInfo: null,
        rescueStatus: null,
        rescueAmount: null,
        driverName: null,
        driverCarNum: null,
        orderStatus: null,
        rescueEnd: null,
        rescueStart: null,
        deptId: null,
      },
      // 显示搜索条件
      showSearch: true,
      pickerOptions: null,
      timeArray: [],
      infoList: [],
      total: 0,
      editType: 0,
      editIdx: -1,
    }
  },
  watch: {
    filterText(val) {
      this.$refs.tree.filter(val)
    },
  },
  created() {
    this.getList()
    this.getTabList()
  },
  methods: {
    async getList() {
      try {
        this.treeLoading = true
        const response = await listBuckle();
        this.dictDataTree = response.data
      } finally {
        this.treeLoading = false
      }
    },
    handleSelectionChange(selection) {
      const flag = this.selectNodes.findIndex(item => item.dataId === selection.dataId)
      if (flag > -1) {
        this.selectNodes.splice(flag, 1)
      } else {
        this.selectNodes.push(selection)
      }
      this.deleteMultiple = !this.selectNodes.length > 0
      this.updateMultiple = !(this.selectNodes.length === 1)
    },
    // 节点筛选
    filterNode(value, data) {
      if (!value) return true
      return data.buckleName.indexOf(value) !== -1
    },
    // 节点事件
    handleNodeClick(e) {
      this.chooseData = e
      this.queryParams.deptId = e.id
      this.getTabList()
    },
    truncateText(text, maxLength) {
      if (text.length > maxLength) {
        return text.substring(0, maxLength) + '...'
      }
      return text
    },
    handleQuery() {
      this.queryParams.pageNo = 1
      if (this.timeArray && this.timeArray.length > 0) {
        this.queryParams.rescueStart = this.timeArray[0];
        this.queryParams.rescueEnd = this.timeArray[1];
      }
      this.getTabList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.queryParams.rescueStart = null
      this.queryParams.rescueEnd = null
      this.timeArray = null
      this.resetForm('queryForm')
      this.handleQuery()
    },
    async getTabList() {
      try {
        this.loading = true
        this.queryParams.rescueType = '5'
        const res = await listInfo(this.queryParams)
        this.infoList = res.data.records
        this.total = res.data.total
      } finally {
        this.loading = false
      }
    },
    /** 导出按钮操作 */
    async handleExport() {
      try {
        this.exportLoading = true
        this.queryParams.pageNo = 1
        this.queryParams.pageSize = 500
        const data = await downloadOrder(this.queryParams)
        this.$download.excel(data, `扣车订单_${new Date().getTime()}.xls`)
      } catch {
      } finally {
        this.exportLoading = false
      }
    },
    editInfo(data, type) {
      if (type == 2) {
        data.setMoney = data.setMoney2 * 100
      }
      updateInfo(data).then(response => {
        this.$modal.msgSuccess("修改成功");
        this.open = false;
        this.editType = 0;
        this.editIdx = -1
        this.getList();
      });
    },
    editInfoFront(type, index) {
      this.editType = type
      this.editIdx = index
    },
    getBuckleName(id){
      return this.dictDataTree.find(item => item.id === id)?.buckleName || "其他"
    }
  }
}
</script>

<style scoped lang="scss">
div {
  padding: 0;
  margin: 0 auto;
}

.app-container {
  display: flex;
  justify-content: space-between;
}

.left {
  width: 15%;
  margin-right: 1rem;
  padding: 1rem;
}

.right {
  width: 80%;
  padding-top: 1rem;
}

.left_top {
  color: #00afff;
  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji;
  font-size: 14px;
  padding-left: 5px;
}

.custom-tree-node {
  flex: 1;
  display: flex;
  align-items: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
</style>
