<template>
  <view>
    <scroll-view scroll-y="true" style="height: 95vh">
      <view v-if="isPageShow">
        <page-container
          :show="isPageShow"
          :duration="0"
          :overlay="false"
          @beforeleave="onBeforeleave"
        ></page-container>
      </view>
      <view class="container">
        <u-collapse :value="['basic', 'current', 'cost']" :border="false">
          <u-collapse-item title="基本信息" ref="uploadCollapse" name="basic">
            <!-- <view class="header">基本信息</view> -->
            <view class="item">
              <view class="title">车牌号</view>
              <u--input
                border="surround"
                :value="info.plateNumber"
                disabled
                fontSize="26"
              ></u--input>
            </view>
            <view class="item">
              <view class="title">资产状态</view>
              <u--input
                border="surround"
                :value="info.truckRentStatusName"
                disabled
                fontSize="26"
              ></u--input>
            </view>

            <view class="item">
              <view class="title">车辆型号</view>
              <u-input
                border="surround"
                disabled
                v-model="info.modelName"
                fontSize="26"
              >
              </u-input>
            </view>
            <view class="item">
              <view class="title">公告车型</view>
              <u-input
                border="surround"
                disabled
                v-model="info.noticeModelName"
                fontSize="26"
              >
              </u-input>
            </view>
            <view class="item">
              <view class="title">所属公司</view>
              <u-input
                border="surround"
                disabled
                v-model="info.orgName"
                fontSize="26"
              >
              </u-input>
            </view>
            <view class="item">
              <view class="title">项目名称</view>
              <u-input
                border="surround"
                disabled
                v-model="info.projectName"
                fontSize="26"
              >
              </u-input>
            </view>
            <view class="item">
              <view class="title">仪表盘里程</view>
              <u-input
                border="surround"
                disabled
                v-model="info.totalMileage"
                fontSize="26"
              >
              </u-input>
            </view>
          </u-collapse-item>

          <u-collapse-item
            title="保养记录"
            ref="maintainCollapse"
            name="maintain"
          >
            <view
              v-if="!mainTableList || mainTableList.length == 0"
              class="no-data"
            >
              暂无数据
            </view>
            <scroll-view v-else scroll-y="true" style="max-height: 590rpx">
              <no-bad-table
                :columns="columns"
                :list="mainTableList"
                :spanArr="spanArr"
                :slot-cols="[
                  'index',
                  'maintainItem',
                  'maintenanceDueTime',
                  'maintenanceDueMileage',
                  'operation',
                ]"
                :span-method="objectSpanMethod"
              >
                <template v-slot="{ row, col, index }">
                  <view v-if="col.key == 'index'" style="white-space: pre-wrap">
                    {{ index + 1 }}
                  </view>
                  <view
                    v-else-if="col.key == 'maintainItem'"
                    style="white-space: pre-wrap"
                  >
                    {{ row.maintainItem }}
                  </view>
                  <view
                    v-else-if="col.key == 'maintenanceDueTime'"
                    style="white-space: pre-wrap"
                  >
                    {{ row.maintenanceDueTime || "" }}
                  </view>
                  <view
                    v-else-if="col.key == 'maintenanceDueMileage'"
                    style="white-space: pre-wrap"
                  >
                    {{ row.maintenanceDueMileage || 0 }}
                  </view>
                  <view
                    v-else-if="col.key == 'operation'"
                    style="display: flex; justify-content: center"
                  >
                    <view class="viewBtn" @tap="viewRecord(row)">查看</view>
                  </view>
                  <!-- <view
              v-else-if="col.key == 'maintenanceDueTime'"
              style="white-space: pre-wrap"
            >
              {{ formatDateTime(row.maintenanceDueTime) }}
            </view>
            <view v-else-if="col.key == 'maintenanceDueMileage'" style="">
              {{ row.maintenanceDueMileage }}
            </view>
            <view v-else-if="col.key == 'remark'" style="">
              <view class="viewBtn" @tap="viewRecord(row)">查看历史记录</view>
            </view> -->
                </template>
              </no-bad-table>
            </scroll-view>
            <!-- <view class="header">日常维护</view> -->

            <!-- <u-checkbox-group v-model="checkoutIds" size="36" placement="column">
          <view v-for="(item, index) in mainTableList" :key="index">
            <u-cell-group>
              <u-cell :border="false">
                <view slot="title" class="u-slot-title">
                  {{ `序号${index + 1}` }}
                  <view class="viewBtn" @tap="viewRecord(item)"
                    >查看历史记录</view
                  >
                </view>
              </u-cell>
              <u-cell
                :border="false"
                title="养护项目"
                :titleStyle="`font-weight: normal;`"
                :value="item.maintainItem"
              ></u-cell>
              <u-cell
                :border="false"
                :titleStyle="`font-weight: normal;font-size: 13px;color:${
                  item.maintenanceDueTime &&
                  item.maintenanceDueTime <= new Date().getTime()
                    ? 'red'
                    : ''
                }`"
                title="保养到期时间"
                :value="formatDateTime(item.maintenanceDueTime)"
              ></u-cell>
              <u-cell
                :border="false"
                :titleStyle="`font-weight: normal;font-size: 13px;color:${
                  info.totalMileage &&
                  item.maintenanceDueMileage &&
                  info.totalMileage > item.maintenanceDueMileage
                    ? 'red'
                    : ''
                }`"
                title="保养到期公里数"
                :value="item.maintenanceDueMileage || ''"
              ></u-cell>
            </u-cell-group>
          </view>
        </u-checkbox-group> -->
          </u-collapse-item>
          <u-collapse-item
            title="本次保养项目"
            ref="currentCollapse"
            name="current"
          >
            <view class="item">
              <view class="title required">维修站</view>
              <u-picker
                :show="showFixPicker"
                :columns="[maintainSiteList]"
                keyName="name"
                :immediateChange="true"
                @confirm="confirmFix"
                @cancel="showFixPicker = false"
              >
              </u-picker>
              <u--input
                border="surround"
                :disabledColor="_disabled || isSubmited ? '#f5f7fa' : '#ffffff'"
                disabled
                fontSize="26"
                :value="info.maintainSiteName"
                @tap="!_disabled && !isSubmited && (showFixPicker = true)"
              >
              </u--input>
            </view>
            <view class="item">
              <view class="title required">实际保养日期</view>
              <u-datetime-picker
                placeholder="请选择实际保养日期"
                :disabled="_disabled"
                :show="showRealDatePicker"
                mode="date"
                @confirm="(e) => confirmRealDate(e)"
                @cancel="showRealDatePicker = false"
              ></u-datetime-picker>
              <u--input
                border="surround"
                :disabledColor="_disabled || isSubmited ? '#f5f7fa' : '#ffffff'"
                fontSize="26"
                disabled
                :value="formatDateTime(info.actualMaintenanceDate, 'date')"
                @tap="!_disabled && !isSubmited && (showRealDatePicker = true)"
              >
              </u--input>
            </view>
            <view class="item">
              <view class="title required">实际保养里程</view>
              <u-input
                border="surround"
                :disabled="_disabled || isSubmited"
                @change="changeSearch"
                v-model="info.actualMaintenanceMileage"
                fontSize="26"
                type="digit"
              >
              </u-input>
            </view>
            <view
              v-for="(item, index) in info.itemList"
              :key="item.id"
              class="currentItem"
            >
              <u-cell-group :border="false">
                <view class="item">
                  <view class="title required">保养项目{{ index + 1 }}</view>
                  <u-picker
                    :show="mainItemPicker[index]"
                    :columns="[maintainItems]"
                    keyName="maintainItem"
                    :immediateChange="true"
                    @confirm="confirmMainItem($event, index)"
                    @cancel="cancelMainItem(index)"
                  >
                  </u-picker>
                  <u--input
                    border="surround"
                    disabled
                    :disabledColor="tableDisabled ? '#f5f7fa' : '#ffffff'"
                    fontSize="26"
                    :value="item.maintainItem"
                    @tap="!tableDisabled && showMainItemPicker(index)"
                  >
                  </u--input>
                </view>
                <u-cell
                  :border="false"
                  titleStyle="font-weight: normal;font-size: 13px"
                  title="保养到期时间"
                  :value="formatDateTime(item.maintenanceDueTime)"
                ></u-cell>
                <u-cell
                  :border="false"
                  titleStyle="font-weight: normal;font-size: 13px"
                  title="保养到期公里数"
                  :value="item.maintenanceDueMileage || ''"
                ></u-cell>

                <view class="item">
                  <view class="title required">工时费</view>
                  <u-input
                    border="surround"
                    :disabled="tableDisabled"
                    v-model="item.hourFee"
                    @change="changeFee1($event, index)"
                    fontSize="26"
                    type="digit"
                  >
                  </u-input>
                </view>
                <view class="item">
                  <view class="title">材料费</view>
                  <u-input
                    border="surround"
                    :disabled="tableDisabled"
                    v-model="item.materialsExpenses"
                    @change="changeFee2($event, item, index)"
                    fontSize="26"
                    type="digit"
                  >
                  </u-input>
                </view>
                <view class="item">
                  <view class="title">材料费（公司自采）</view>
                  <u-input
                    border="surround"
                    :disabled="tableDisabled"
                    v-model="item.companyMaterialsExpenses"
                    @change="changeCompanyEx($event, item, index)"
                    fontSize="26"
                    type="digit"
                  >
                  </u-input>
                </view>
                <u-cell
                  :border="false"
                  titleStyle="font-weight: normal;font-size: 13px"
                  title="合计"
                  :value="item.totalFee || 0"
                ></u-cell>
                <u-cell
                  :border="false"
                  titleStyle="font-weight: normal;font-size: 13px"
                  title="公司承担费用"
                  :value="item.companyUndertake || 0"
                ></u-cell>
                <u-cell
                  :border="false"
                  titleStyle="font-weight: normal;font-size: 13px"
                  title="客户承担费用"
                  :value="item.customerUndertake || 0"
                ></u-cell>
                <view class="item">
                  <view class="title">超出费用</view>
                  <u-input
                    border="surround"
                    :disabled="tableDisabled"
                    v-model="item.overcharge"
                    @change="getComputedTotalFee(null)"
                    fontSize="26"
                    type="digit"
                  >
                  </u-input>
                </view>
                <view class="item">
                  <view class="title">备注</view>
                  <u-input
                    border="surround"
                    :disabled="tableDisabled"
                    v-model="item.remark"
                    fontSize="26"
                  >
                  </u-input>
                </view>
                <view class="item" v-if="!_disabled">
                  <view class="truckListBtns">
                    <button
                      :class="{ disabled: _disabled }"
                      :disabled="_disabled"
                      v-if="info.itemList.length - 1 == index && !isSubmited"
                      class="add"
                      @tap="addForm"
                    >
                      添加
                    </button>
                    <button
                      v-if="info.itemList.length !== 1 && !isSubmited"
                      :class="{ disabled: _disabled }"
                      :disabled="_disabled"
                      class="del"
                      @tap="delForm(index)"
                    >
                      删除
                    </button>
                  </view>
                </view>
              </u-cell-group>
            </view>
            <view
              class="item"
              v-if="!_disabled && info.truckRentStatus == 0"
              style="margin-bottom: 30rpx"
            >
              <button class="btn checkList" @tap="makeTodo">
                生成异动申请
              </button>
            </view>
          </u-collapse-item>
          <u-collapse-item title="费用明细" ref="costCollapse" name="cost">
            <u-cell-group>
              <u-cell
                :border="false"
                titleStyle="font-weight: normal;font-size: 13px"
                title="费用总计(元)"
                :value="info.amount || 0"
              ></u-cell>
              <u-cell
                :border="false"
                titleStyle="font-weight: normal;font-size: 13px"
                title="公司承担费用(总计)"
                :value="info.companyUndertake || 0"
              ></u-cell>
              <u-cell
                :border="false"
                titleStyle="font-weight: normal;font-size: 13px"
                title="客户承担费用(总计)"
                :value="info.customerUndertake || 0"
              ></u-cell>
              <view class="item">
                <view class="title">公司应支付</view>
                <u-input
                  border="surround"
                  :disabled="_disabled"
                  v-model="info.companyPayable"
                  fontSize="26"
                  type="digit"
                >
                </u-input>
              </view>
              <view class="item">
                <view class="title">公司已支付</view>
                <u-input
                  border="surround"
                  :disabled="_disabled"
                  v-model="info.companyPayed"
                  fontSize="26"
                  type="digit"
                >
                </u-input>
                <view class="title">收款方：维修站</view>
              </view>
              <view class="item">
                <view class="title">公司支付凭证</view>
                <u-upload
                  :fileList="fileList1"
                  @afterRead="afterReadPdf"
                  @delete="deletePic"
                  uploadIcon="plus"
                  :deletable="!_disabled"
                  :disabled="_disabled"
                  accept="all"
                  multiple
                  :width="155"
                  :height="155"
                  name="1"
                ></u-upload>
              </view>
              <view class="item" v-for="item in yyPdfList1" :key="item.path">
                <view class="line yyBlock">
                  <view class="text-small left">{{ item.fileName }}</view>
                  <view class="text-small" @tap="previewYyPdf(item)">预览</view>
                </view>
              </view>
              <view class="item">
                <view class="title">客户应支付</view>
                <u-input
                  border="surround"
                  :disabled="_disabled"
                  v-model="info.customerPayable"
                  fontSize="26"
                  type="digit"
                >
                </u-input>
              </view>
              <view class="item">
                <view class="title">客户已支付</view>
                <u-input
                  border="surround"
                  :disabled="_disabled"
                  v-model="info.customerPayed"
                  fontSize="26"
                  type="digit"
                >
                </u-input>
              </view>
              <view class="item">
                <view class="title">收款方</view>
                <u-picker
                  :show="showPayeePicker"
                  :columns="[payeeList]"
                  keyName="dicName"
                  :immediateChange="true"
                  @confirm="confirmPayee"
                  @cancel="showPayeePicker = false"
                >
                </u-picker>
                <u--input
                  border="surround"
                  :disabledColor="_disabled ? '#f5f7fa' : '#ffffff'"
                  disabled
                  fontSize="26"
                  :value="info.customerPayDirectionName"
                  @tap="!_disabled && (showPayeePicker = true)"
                >
                </u--input>
              </view>
              <view class="item">
                <view class="title">客户支付凭证</view>
                <u-upload
                  :fileList="fileList2"
                  @afterRead="afterReadPdf"
                  @delete="deletePic"
                  uploadIcon="plus"
                  :deletable="!_disabled"
                  :disabled="_disabled"
                  accept="all"
                  multiple
                  :width="155"
                  :height="155"
                  name="2"
                ></u-upload>
              </view>
              <view class="item" v-for="t in yyPdfList2" :key="t.path">
                <view
                  class="line yyBlock"
                  style="justify-content: space-between"
                >
                  <view class="text-small left">{{ t.fileName }}</view>
                  <view class="text-small" @tap="previewYyPdf(t)">预览</view>
                </view>
              </view>
              <view class="item">
                <view class="title">超出费用（总计）</view>
                <u-input
                  border="surround"
                  :disabled="_disabled"
                  v-model="info.overcharge"
                  fontSize="26"
                  type="digit"
                >
                </u-input>
              </view>
              <view class="item">
                <view class="title required">保养单据</view>
                <u-upload
                  :fileList="fileList3"
                  @afterRead="afterReadPdf"
                  @delete="deletePic"
                  uploadIcon="plus"
                  :deletable="!_disabled"
                  :disabled="_disabled"
                  accept="all"
                  multiple
                  :width="155"
                  :height="155"
                  name="3"
                ></u-upload>
              </view>
              <view class="item" v-for="t in yyPdfList3" :key="t.path">
                <view
                  class="line yyBlock"
                  style="justify-content: space-between"
                >
                  <view class="text-small left">{{ t.fileName }}</view>
                  <view class="text-small" @tap="previewYyPdf(t)">预览</view>
                </view>
              </view>
              <view class="item">
                <view class="title">保养照片</view>
                <u-upload
                  :fileList="fileList4"
                  @afterRead="afterRead"
                  @delete="deletePic"
                  :maxCount="10"
                  multiple
                  :width="155"
                  :height="155"
                  :disabled="_disabled"
                  :deletable="!_disabled"
                  name="4"
                ></u-upload>
              </view>
            </u-cell-group>
          </u-collapse-item>
        </u-collapse>
        <view class="item">
          <view class="title">备注</view>
          <u--textarea
            border="surround"
            v-model="info.remark"
            fontSize="26"
            autoHeight
          ></u--textarea>
        </view>
        <view class="btns">
          <button
            class="save"
            :class="{ disabled: _disabled }"
            :disabled="_disabled"
            @tap="editMaintain(false)"
          >
            保存
          </button>
          <button
            class="save"
            :class="{ disabled: _disabled }"
            v-if="!isSubmited"
            :disabled="_disabled"
            @tap="editMaintain(true)"
          >
            提交
          </button>
          <button class="cancel" @tap="navigateBack">取消</button>
        </view>
        <u-popup
          :show="checkListShow"
          mode="right"
          @close="checkListShow = false"
        >
          <scroll-view scroll-y="true" style="height: 95vh">
            <view>
              <view
                v-for="(item, index) in recordList"
                class="truckItem"
                :key="index"
              >
                <view style="text-align: center">{{
                  item.maintainItem + "保养"
                }}</view>
                <view class="border">
                  <view class="flexWrap">
                    <view class="item" style="margin-right: 56rpx">
                      <u-cell-group :border="false">
                        <u-cell
                          :border="false"
                          title="工时费"
                          titleStyle="font-size: 13px"
                          :value="item.hourFee"
                        ></u-cell>
                        <u-cell
                          :border="false"
                          titleStyle="font-size: 13px"
                          title="材料费"
                          :value="item.materialsExpenses"
                        ></u-cell>
                      </u-cell-group>
                    </view>
                    <view class="item">
                      <u-cell-group :border="false">
                        <u-cell
                          :border="false"
                          titleStyle="font-size: 13px"
                          title="材料费(公司自采)"
                          :value="item.companyMaterialsExpenses"
                        ></u-cell>
                        <u-cell
                          :border="false"
                          title="合计"
                          titleStyle="font-size: 13px"
                          :value="item.totalFee"
                        ></u-cell>
                      </u-cell-group>
                    </view>
                  </view>
                  <u-cell-group :border="false">
                    <u-cell
                      :border="false"
                      title="维修站"
                      titleStyle="font-size: 13px"
                      :value="item.maintainSiteName"
                    ></u-cell>
                    <u-cell
                      :border="false"
                      titleStyle="font-size: 13px"
                      title="实际保养日期"
                      :value="formatDateTime(item.actualMaintenanceDate)"
                    ></u-cell>
                    <u-cell
                      :border="false"
                      titleStyle="font-size: 13px"
                      title="实际保养公里数"
                      :value="item.actualMaintenanceMileage || ''"
                    ></u-cell>
                    <u-cell
                      :border="false"
                      titleStyle="font-size: 13px"
                      title="负责人"
                      :value="item.handlerName"
                    ></u-cell>
                  </u-cell-group>
                </view>
              </view>
            </view>

            <view class="btns">
              <button class="cancel" @tap="cancelFormDataChange">取消</button>
            </view>
          </scroll-view>
        </u-popup>

        <u-loading-page
          bg-color="#ffffff"
          color="#7ba746"
          font-size="24"
          :loading="loading"
          :loading-text="loadingText"
        ></u-loading-page>
        <view style="width: 0px; height: 0px; overflow: hidden">
          <canvas
            :style="
              'width: ' +
              canvasWidth +
              'px; height:' +
              canvasHeight +
              'px;left:8888px'
            "
            canvas-id="myCanvas"
          ></canvas>
        </view>
      </view>
    </scroll-view>
  </view>
</template>

<script>
export default {
  options: {
    styleIsolation: "shared", // 解除样式隔离
  },
  data() {
    return {
      id: 0,
      info: {
        itemList: [], // 日常维护项
        instrumentRange: null,
        startupItemCheck: false, // 日常维护选中列表
        oilWaterCheck: false, // 日常维护选中列表
        tyreCheck: false, // 日常维护选中列表
        maintainSiteName: "", // 维修站名称
        customerPayDirectionName: "", //收款对象名称
      }, // 该备车车辆记录的数据
      preTypeList: [], // 整备类型列表
      isRead: false,
      isSubmited: false, //是否已提交 提交过后只有费用明细可编辑
      showPreTypePicker: false, // 整备类型弹窗
      showParkingPicker: false,
      showProjectPicker: false, // 养护项目弹窗
      showNextDatePicker: false, // 养护时间弹窗
      showTestRunPicker: false, // 试车时间弹窗
      prepareOk: false, // 备车完成 switch
      spanArr: [],
      columns: [
        {
          title: "序号",
          key: "index",
          width: 80,
        },
        {
          title: "养护项目",
          key: "maintainItem",
          width: 160,
        },
        {
          title: "保养到期时间",
          key: "maintenanceDueTime",
          width: 160,
        },
        {
          title: "保养到期里程",
          key: "maintenanceDueMileage",
          width: 170,
        },
        {
          title: "历史记录",
          key: "operation",
          width: 115,
        },
      ],
      range: [
        { value: 1, text: "%" },
        { value: 2, text: "MPa" },
        { value: 3, text: "kg" },
      ],
      inStoreList: [], // 在库状态车辆列表
      lastTestRunDatePicker: false, // 试车时间
      checkoutIds: [], // 检查单选中项
      testChecked: false, // 试车时间复选框
      mainTableList: [], // 保养记录表格数据
      maintainItems: [], // 养护项目 用在费用列表的下拉框
      checkListShow: false, // 检查单弹窗
      recordList: [], // 保养记录列表
      mainItemPicker: [false], //本次养护项目-保养项目弹窗
      showFixPicker: false, // 维修站
      maintainSiteList: "", // 维修站列表
      showRealDatePicker: false, // 实际保养时间
      compressPicMap: new Map(), // 缩略图映射，key为原图，value为缩略图
      fileList1: [], // 公司支付凭证
      fileList2: [], // 客户支付凭证
      fileList3: [], // 保养单据
      fileList4: [], // 保养照片
      showPayeePicker: false, // 收款方式
      // payeeText: "", // 收款方式名称
      payeeList: [], // 收款方式列表
      gpsLocation: "", // GPS定位'
      isPageShow: false,
      loading: false,
      loadingText: "加载中...",
      canvasWidth: 0,
      canvasHeight: 0,
    };
  },
  computed: {
    _disabled() {
      return this.isRead;
    },
    tableDisabled() {
      return (
        !(
          this.info.maintainSiteId &&
          this.info.actualMaintenanceDate &&
          this.info.actualMaintenanceMileage
        ) ||
        this._disabled ||
        this.isSubmited
      );
    },
    yyPdfList1() {
      console.log(this.info.companyVoucherAttachmentList);
      return (
        this.info.companyVoucherAttachmentList?.filter(
          (item) => item.type == "file" || item.type == "pdf"
        ) || []
      );
    },
    yyPdfList2() {
      return (
        this.info.customerVoucherAttachmentList?.filter(
          (item) => item.type == "file" || item.type == "pdf"
        ) || []
      );
    },
    yyPdfList3() {
      return (
        this.info.billsAttachmentList?.filter(
          (item) => item.type == "file" || item.type == "pdf"
        ) || []
      );
    },
  },
  async onLoad(options) {
    if (options.id) {
      this.id = options.id;
    }
    if (options.isRead) {
      this.isRead = Number(options.isRead);
    }
    if (!this.isRead) {
      this.getLocation();
      this.isPageShow = true; // 如果不是查看模式，则开启拦截
    }
    //  await this.getPreTypeList(); // 获取整备类型列表
    await this.maintainSiteSelect(); // 获取维修站列表
    await this.getPayeeTypeList(); // 获取收款方式列表
    await this.getData();
    this.getMaintainTableList(); // 获取保养记录
    this.parseFileListBack(); // 解析返回的文件列表
  },
  methods: {
    onBeforeleave() {
      this.isPageShow = false;
      if (this.checkListShow) {
        this.checkListShow = false;
        this.$nextTick(() => {
          this.isPageShow = true;
        });
      } else {
        uni.showModal({
          title: "离开提示",
          content: "请确认是否退出当前界面?",
          success: (res) => {
            if (res.confirm) {
              this.navigateBack();
            } else {
              this.isPageShow = true;
              console.log("用户点击取消");
            }
          },
        });
      }
    },
    objectSpanMethod(row, column, rowIndex, columnIndex) {
      if (columnIndex === 0) {
        const _row = this.spanArr[rowIndex];
        const _col = _row > 0 ? 1 : 0;
        return {
          rowspan: _row,
          colspan: _col,
        };
      }
    },
    async maintainSiteSelect() {
      await this.$api.returnCar.getFixPageList().then((res) => {
        console.log(res);
        this.maintainSiteList = res;
      });
    },
    async getPayeeTypeList() {
      await this.$api.maintainTodo.getPayeeType().then((res) => {
        console.log(res);
        this.payeeList = res;
      });
    },
    confirmPayee(e) {
      this.info.customerPayDirection = e.value[0].dicCode;
      this.info.customerPayDirectionName = e.value[0].dicName;
      this.showPayeePicker = false;
    },
    confirmFix(e) {
      this.info.maintainSiteId = e.value[0].id;
      this.info.maintainSiteName = e.value[0].name;
      this.showFixPicker = false;
      this.getCostInfoByIds();
    },
    // *实际保养日期
    confirmRealDate(e) {
      this.info.actualMaintenanceDate = e.value;
      this.showRealDatePicker = false;
      this.getCostInfoByIds();
    },
    changeSearch() {
      this.getCostInfoByIds();
    },
    changeFee1(val, index) {
      console.log(val);
      console.log(index);
      this.info.itemList[index].totalFee =
        Number(val || 0) +
        (Number(this.info.itemList[index].materialsExpenses) || 0) +
        (Number(this.info.itemList[index].companyMaterialsExpenses) || 0);
      this.getComputedTotalFee(index);
    },
    changeFee2(val, row, index) {
      console.log(val);
      console.log(row);
      this.info.itemList[index].totalFee =
        Number(val || 0) +
        (Number(row.hourFee) || 0) +
        (Number(row.companyMaterialsExpenses) || 0);
      this.getComputedTotalFee(index);
    },
    changeCompanyEx(val, row, index) {
      console.log(val);
      console.log(row);
      this.info.itemList[index].totalFee =
        Number(val || 0) +
        (Number(row.hourFee) || 0) +
        (Number(row.materialsExpenses) || 0);

      this.getComputedTotalFee(index);
    },
    getComputedTotalFee(index = null) {
      console.log("费用明细计算");
      //通过公司承担百分比计算公司承担费用
      if (index !== null) {
        this.info.itemList[index].companyUndertake = this.info.itemList[index]
          .companyUndertakePercent
          ? (
              (Number(this.info.itemList[index].totalFee) *
                this.info.itemList[index].companyUndertakePercent) /
              100
            ).toFixed(2)
          : 0;
        //通过客户承担百分比计算客户承担费用
        this.info.itemList[index].customerUndertake = this.info.itemList[index]
          .customerUndertakePercent
          ? (
              (Number(this.info.itemList[index].totalFee) *
                this.info.itemList[index].customerUndertakePercent) /
              100
            ).toFixed(2)
          : 0;
      }
      //费用总计
      this.info.amount = this.info.itemList.reduce(
        (prev, cur) => prev + Number(cur.totalFee),
        0
      );
      //公司承担总计
      this.info.companyUndertake = this.info.itemList.reduce(
        (prev, cur) => prev + Number(cur.companyUndertake),
        0
      );
      //客户承担总计
      this.info.customerUndertake = this.info.itemList.reduce(
        (prev, cur) => prev + Number(cur.customerUndertake),
        0
      );
      //公司应支付
      this.info.companyPayable = this.info.itemList.reduce(
        (prev, cur) =>
          prev + cur.totalFee - Number(cur.companyMaterialsExpenses),
        0
      );
      //客户应支付
      this.info.customerPayable =
        this.info.amount - Number(this.info.companyUndertake);
      //超出费用总计
      this.info.overcharge = this.info.itemList.reduce(
        (prev, cur) => prev + Number(cur.overcharge),
        0
      );
    },
    async getCostInfoByIds(index = null) {
      if (
        !this.info.maintainSiteId ||
        !this.info.actualMaintenanceDate ||
        !this.info.actualMaintenanceMileage
      ) {
        this.alert("请选择维修站、实际保养日期、实际保养里程");
        return;
      }
      let ids = [];
      if (index !== null) {
        console.log(index);
        ids = [this.info.itemList[index].maintainItemId];
      } else {
        ids = this.info.itemList
          .filter((item) => !!item.maintainItemId)
          .map((item) => item.maintainItemId);
      }

      if (!ids || ids.length == 0) {
        this.alert("请选择保养项目");
        return;
      }
      //this.listLoading = true;
      this.$api.maintainTodo
        .getCostInfoByIds({
          truckId: this.info.truckId,
          maintainSiteId: this.info.maintainSiteId,
          maintainItemIds: ids,
          actualMaintenanceDate: this.info.actualMaintenanceDate,
          actualMaintenanceMileage: this.info.actualMaintenanceMileage,
          noticeModel: this.info.noticeModel,
        })
        .then((res) => {
          console.log(res);
          if (index !== null) {
            Object.assign(this.info.itemList[index], res?.data[0] || {});
          } else {
            this.info.itemList = this.info.itemList.map((item, idx) => {
              Object.assign(item, res?.data[idx] || {});
              return item;
            });
          }
          this.getComputedTotalFee();
          // this.listLoading = false;
        });
    },
    confirmMainItem(e, index) {
      console.log("showTrunkParkPicker:\n", e.value[0]);
      const leng =
        this.info?.itemList?.filter(
          (item) => item.maintainItemId == e.value[0].maintainItemId
        ).length || 0;
      if (leng > 0) {
        this.alert("该保养项目已存在，请重新选择");
        this.info.itemList[index].maintainItemId = "";
        return;
      }
      this.info.itemList[index].maintainItemId = e.value[0].maintainItemId;
      this.$set(
        this.info.itemList[index],
        "maintainItem",
        e.value[0].maintainItem
      );
      this.getCostInfoByIds(index);
      this.mainItemPicker[index] = false;
    },
    cancelMainItem(index) {
      this.$set(this.mainItemPicker, index, false);
    },
    showMainItemPicker(index) {
      if (this._disabled) {
        return;
      }
      console.log("showMainItemPicker");
      this.$set(this.mainItemPicker, index, true);
    },

    addForm() {
      this.info.itemList.push({
        maintainItemId: "", //养护项目ID
        maintenanceDueTime: null, //养护到期时间
        maintenanceDueMileage: "", //养护到期里程
        hourFee: "", //工时费
        materialsExpenses: "", //材料费用
        companyMaterialsExpenses: "", //公司材料费用
        totalFee: "", //总费用,
        companyUndertake: "", //公司应付
        companyUndertakePercent: 100, //公司应付百分比
        customerUndertake: "", //客户应付
        customerUndertakePercent: 100, //客户应付百分比
        overcharge: "", //超出费用
        remark: "", //备注
      });

      this.mainItemPicker.push(false);
      this.$nextTick(() => {
        this.$refs.currentCollapse.init();
      });
    },
    delForm(index) {
      if (this.info.itemList.length <= 1) {
        this.alert(`至少保留一条数据`);
        return;
      }
      this.info.itemList.splice(index, 1);
      this.mainItemPicker.splice(index, 1);
      this.getComputedTotalFee(); //重新计算总费用
      this.$nextTick(() => {
        this.$refs.currentCollapse.init();
      });
    },
    cancelFormDataChange() {
      this.checkListShow = false;
      uni.setNavigationBarTitle({
        title: "保养信息",
      });
    },
    viewRecord(row) {
      this.$api.maintainTodo
        .getRecords({
          truckId: this.info.truckId,
          maintainItemId: row.id,
        })
        .then((res) => {
          console.log(`res:`, res);
          this.recordList =
            res?.data.map((item) => {
              item.totalFee =
                Number(item.hourFee || 0) +
                (Number(item.materialsExpenses) || 0) +
                (Number(item.companyMaterialsExpenses) || 0);
              return item;
            }) || [];
          this.checkListShow = true;
          uni.setNavigationBarTitle({
            title: "保养记录",
          });
        });
    },
    async makeTodo() {
      console.log("makeTodo");
      uni.showModal({
        title: "提示",
        content: "确认生成异动申请吗?",
        success: (res) => {
          if (res.confirm) {
            let params = {
              truckId: this.info.truckId,
              transactionType: 2, //保养
            };
            if (this.info.maintainSiteId) {
              params.transactionAddressType = 2;
              params.transactionAddress = this.info.maintainSiteId;
            }
            if (this.info.actualMaintenanceDate) {
              params.transactionStartTime = this.info.actualMaintenanceDate;
            }
            this.$api.unusualActionApply.addByTruckId(params).then((res) => {
              if (res) {
                uni.showToast({
                  title: "操作成功",
                  icon: "success",
                  duration: 1500,
                });
              }
            });
          }
        },
      });

      //现在itemList的id或者maintainItemId是空的 checkoutIds也是空的做不了过滤
      //   let params = {
      //     truckId: this.info.truckId,
      //     itemList: this.info.agentItemListVoList.filter((item) =>
      //       this.checkoutIds.includes(item.id)
      //     ),
      //   };
      //   this.$api.maintainTodo.add(params).then((res) => {
      //     if (res) {
      //       uni.showToast({
      //         title: "操作成功",
      //         icon: "success",
      //         duration: 1500,
      //       });
      //     }
      //   });
    },
    async getMaintainTableList() {
      await this.$api.maintainTodo
        .getMaintainInfoByCarId({
          id: this.info.truckId,
        })
        .then((res) => {
          if (res) {
            let datas = res?.data;
            if (datas == null) {
              this.tableList = [];
            } else {
              this.maintainItems = datas || [];
              this.mainTableList = datas.map((item) => {
                item.truckId = this.info.truckId;
                item.maintainItemId = item.id;
                item.maintenanceDueTime = this.formatDateTime(
                  item.maintenanceDueTime
                );
                return item;
              });

              this.getSpanArr(this.deepClone(this.mainTableList));
            }
            this.$nextTick(() => {
              this.$refs.maintainCollapse.init();
            });
          }
        });
    },
    deepClone(obj) {
      if (obj === null) return null;
      if (typeof obj !== "object") return obj;
      if (obj instanceof Date) {
        let date = new Date();
        date.setTime(obj.getTime());
        return date;
      }
      if (obj instanceof RegExp) {
        let re = new RegExp(obj.source);
        re.lastIndex = obj.lastIndex;
        return re;
      }
      let newObj = new obj.constructor();
      for (let key in obj) {
        if (obj.hasOwnProperty(key)) {
          newObj[key] = this.deepClone(obj[key]);
        }
      }
      return newObj;
    },
    // https://www.cnblogs.com/janni/p/12992591.html
    getSpanArr(data) {
      this.spanArr = [];
      for (let i = 0; i < data.length; i++) {
        if (i === 0) {
          this.spanArr.push(1);
          this.pos = 0;
        } else {
          // 判断当前元素与上一个元素是否相同 dataCategory (类别字段)
          this.spanArr.push(1);
          this.pos = i;
        }
      }
    },
    async getData() {
      await this.$api.maintainTodo.getById({ id: this.id }).then((res) => {
        if (res.code != 200) {
          return;
        }

        console.log(`res:`, res.data);
        this.info = res.data;
        this.isSubmited = !!this.info.maintenanceStatus; // 是否已提交
        this.info.maintainSiteName =
          this.maintainSiteList.find(
            (item) => item.id == this.info.maintainSiteId
          )?.name ?? ""; //回显维修站名称

        this.info.customerPayDirectionName =
          this.payeeList.find(
            (item) => item.dicCode == this.info.customerPayDirection
          )?.dicName ?? "";
        this.$nextTick(() => {
          this.$refs.uploadCollapse.init();
          this.$refs.currentCollapse.init();
          this.$refs.costCollapse.init();
        });
        // console.log(`this.info:\n`, this.info)
      });
    },
    //试车时间
    confirmTestRunDate(e) {
      this.info.lastTestRunDate = e.value;
      this.showTestRunPicker = false;
    },
    //养护时间
    confirmNextDate(e) {
      this.info.nextMaintenanceDate = e.value;
      this.showNextDatePicker = false;
    },
    //整备类型确认
    confirmPreType(e) {
      this.info.preTypeSel = e.indexs[0];
      this.showPreTypePicker = false;
    },
    //项目确认
    confirmProject(e) {
      this.info.projectSel = e.indexs[0];
      this.showProjectPicker = false;
    },
    //停车场确认
    confirmPark(e) {
      this.info.parkingSel = e.indexs[0];
      this.showParkingPicker = false;
    },
    getDicValue(dic, dicCode) {
      if (dic.length == 0) {
        return "";
      }

      return dic.find((x) => x.dicCode == dicCode)?.dicName ?? "";
    },
    formatDateTime(obj, type = "date") {
      if (obj == null) {
        return "";
      }
      // 精确到日
      if (type == "date") {
        let date = new Date(obj);
        let y = 1900 + date.getYear();
        let m = "0" + (date.getMonth() + 1);
        let d = "0" + date.getDate();
        return (
          y +
          "-" +
          m.substring(m.length - 2, m.length) +
          "-" +
          d.substring(d.length - 2, d.length)
        );
      }
      // 精确到小时
      else if (type == "hour") {
        const date = new Date(obj); // 将时间戳转换为毫秒
        const year = date.getFullYear();
        const month = String(date.getMonth() + 1).padStart(2, "0"); // 月份从0开始
        const day = String(date.getDate()).padStart(2, "0");
        const hour = String(date.getHours()).padStart(2, "0");
        return `${year}-${month}-${day}  ${hour}:00`;
      }
    },
    timestampToDateAndBack(timestamp) {
      const date = new Date(timestamp);
      const year = date.getFullYear();
      const month = (date.getMonth() + 1).toString().padStart(2, "0"); // 月份从0开始，所以要+1
      const day = date.getDate().toString().padStart(2, "0");
      const formattedDate = `${year}-${month}-${day}`;
      const newTimestamp = new Date(`${formattedDate} 00:00:00`).getTime();
      return newTimestamp;
    },
    getNowTimestamp() {
      // 获取当前时间精确到小时的时间戳
      const now = new Date();
      now.setMinutes(0, 0, 0); // 设置分钟、秒、毫秒为0
      return now.getTime(); // 返回时间戳
    },
    confirmBand(e) {
      console.log(e);
      const brand = e.value[0].dicCode;
      // 没有更改
      if (brand == this.info.brand) {
        this.showParkingPicker = false;
        return;
      }
      this.info.brand = brand;
      this.showParkingPicker = false;
      this.info.plateNumber = "";
      this.info.vin = "";
      this.info.hasTailboard = "";
      this.info.hasAdvertisement = "";
      this.info.isHang = "";
    },
    navigateBack() {
      this.isPageShow = false;
      setTimeout(() => {
        uni.navigateBack();
      }, 100);
    },
    // 在提交前检查，是否有必填字段未填写
    check() {
      if (!this.info.maintainSiteId) {
        this.alert("请选择维修站");
        return false;
      }
      if (!this.info.actualMaintenanceDate) {
        this.alert("请选择实际保养日期");
        return false;
      }
      if (!this.info.actualMaintenanceMileage) {
        this.alert("请输入实际保养里程");
        return false;
      }
      if (
        this.info.itemList.filter((item) => ["", null].includes(item.hourFee))
          .length > 0
      ) {
        this.alert("请填写工时费");
        return false;
      }
      if (
        this.info.itemList.filter(
          (item) =>
            ["", null].includes(item.materialsExpenses) &&
            ["", null].includes(item.companyMaterialsExpenses)
        ).length > 0
      ) {
        this.alert("请填写材料费");
        return false;
      }
      //   if (!this.info.companyVoucherAttachmentList) {
      //     this.alert("请上传公司支付凭证");
      //     return false;
      //   }
      //   if (!this.info.customerVoucherAttachmentList) {
      //     this.alert("请上传客服支付凭证");
      //     return false;
      //   }
      if (!this.info.billsAttachmentList) {
        this.alert("请上传保养单据");
        return false;
      }
      return true;
    },
    alert(msg) {
      uni.showToast({
        title: msg,
        icon: "none",
        duration: 1500,
      });
    },
    // 保存备车信息表
    editMaintain(submit = false) {
      if (submit && !this.check()) {
        return;
      }
      console.log(this.info);
      let params = { ...this.info };
      params.isSubmit = submit;
      //   params.projectId = this.projectList[params.projectSel].dicCode;
      this.$api.maintainTodo.edit(params).then((res) => {
        // todo： res是接口data数据，之后研究一下如何获取整个内容
        if (res) {
          uni.showToast({
            title: submit ? "提交成功" : "保存成功",
            icon: "success",
            duration: 1500,
            success() {},
          });
          this.isPageShow = false;
          setTimeout(() => {
            uni.navigateBack();
          }, 1500);
        }
      });
    },
    // 删除图片
    deletePic(event) {
      const fileList = this[`fileList${event.name}`];
      if (fileList.some((x) => x.status == "uploading")) {
        this.alert(`请等待现有文件上传完成后再操作`);
        return;
      }

      this[`fileList${event.name}`].splice(event.index, 1);
      switch (event.name) {
        case "1": //公司支付凭证
          this.info.companyVoucherAttachmentList.splice(event.index, 1);
          break;
        case "2": //客户支付凭证
          this.info.customerVoucherAttachmentList.splice(event.index, 1);
          break;
        case "3": //保养单据
          this.info.billsAttachmentList.splice(event.index, 1);
          break;
        case "4": //保养照片
          this.info.pictureList.splice(event.index, 1);
          break;
      }
    },
    // 新增附件
    async afterReadPdf(event) {
      // 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
      let lists = [].concat(event.file);
      let fileListLen = this[`fileList${event.name}`].length;
      lists.map((item) => {
        this[`fileList${event.name}`].push({
          ...item,
          status: "uploading",
          message: "上传中",
        });
      });
      //const fileSize = event.file.size / 1024 ** 2; // 图片多少MB
      console.log(`event.file:\n`, event.file);
      for (let i = 0; i < lists.length; i++) {
        const result = await this.uploadFilePromise(lists[i].url);
        // let result = { data: { url: waterUrl }}
        let item = this[`fileList${event.name}`][fileListLen];
        this[`fileList${event.name}`].splice(
          fileListLen,
          1,
          Object.assign(item, {
            status: "success",
            message: "",
            url: result.data?.url ?? "",
            thumb: item.type === "file" ? "/static/pdf.png" : "",
          })
        );
        fileListLen++;
        console.log("fileList");
        console.log(this[`fileList${event.name}`]);
        console.log(item);
        console.log(result.data);
        const imgUrl = result.data?.url ?? "";
        const fileName = event.file[0]?.name ?? "";
        const type = item.type;
        if (event.name == "1") {
          this.info.companyVoucherAttachmentList.push({
            path: imgUrl,
            fileName: fileName,
            thumb: "/static/pdf.png",
            type: type,
          });
          console.log(this.info.companyVoucherAttachmentList);
        } else if (event.name == "2") {
          this.info.customerVoucherAttachmentList.push({
            path: imgUrl,
            fileName: fileName,
            thumb: "/static/pdf.png",
            type: type,
          });
          console.log(this.info.customerVoucherAttachmentList);
        } else if (event.name == "3") {
          this.info.billsAttachmentList.push({
            path: imgUrl,
            fileName: fileName,
            thumb: "/static/pdf.png",
            type: type,
          });
          console.log(this.info.billsAttachmentList);
        }
        this.$nextTick(() => {
          this.$refs.costCollapse.init();
        });
      }
    },
    // 新增图片
    async afterRead(event) {
      // 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
      let lists = [].concat(event.file);
      let fileListLen = this[`fileList${event.name}`].length;
      lists.map((item) => {
        this[`fileList${event.name}`].push({
          ...item,
          status: "uploading",
          message: "上传中",
        });
      });
      console.log(`event.file:\n`, event.file);
      console.log(lists);
      for (let i = 0; i < lists.length; i++) {
        this.loading = true;
        this.loadingText = "添加水印中...";
        const fileSize = lists[i].size / 1024 ** 2; // 图片多少MB
        let waterUrl = "";
        console.log(lists[i].url);
        try {
          waterUrl = await this.addWatermark(lists[i].url, fileSize);
        } catch (e) {
          console.log(`e:\n`, e);
          this.alert(e.toString());
          this[`fileList${event.name}`].splice(fileListLen, 1);
          return;
        }
        const result = await this.uploadFilePromise(waterUrl);
        // let result = { data: { url: waterUrl }}
        let item = this[`fileList${event.name}`][fileListLen];
        this[`fileList${event.name}`].splice(
          fileListLen,
          1,
          Object.assign(item, {
            status: "success",
            message: "",
            url: result.data?.url ?? "",
            thumb: waterUrl,
          })
        );
        fileListLen++;

        const imgUrl = result.data?.url ?? "";

        if (imgUrl) {
          this.compressPicMap.set(
            imgUrl,
            result.data?.compressedImageUrl ?? ""
          );
        }

        if (event.name == "4") {
          this.info.pictureList.push(imgUrl);
        }
        this.$nextTick(() => {
          // 解决折叠collapse高度无法动态更新的问题
          this.$refs.costCollapse.init();
        });
      }
    },
    uploadFilePromise(url) {
      console.log("url");
      console.log(url);
      return new Promise((resolve, reject) => {
        let a = uni.uploadFile({
          url: "/attachment/upload",
          filePath: url,
          name: "file",
          success: (res) => {
            resolve(JSON.parse(res.data || {}));
          },
          fail: (e) => {
            reject(e);
          },
        });
      });
    },
    previewYyPdf(data) {
      console.log(data);
      if (!data || !data.path) {
        this.alert(`文件上传异常`);
        return;
      }
      console.log(data);
      const path = data.path;
      this.loading = true;
      this.loadingText = "加载中...";
      const that = this;
      uni.downloadFile({
        url: path,
        success: function (res) {
          var filePath = res.tempFilePath;
          that.loading = false;
          uni.openDocument({
            filePath: filePath,
            success: function (res) {
              that.loading = false;
            },
            fail() {
              that.loading = false;
            },
          });
        },
        fail() {
          that.alert("预览文件失败");
          that.loading = false;
        },
      });
    },
    parseFileListBack() {
      //this.fileList7 = this.datas.blemish.map((x) => ({ url: x }));
      this.fileList1 = this.info.companyVoucherAttachmentList.map((x) => ({
        url: x.path,
        name: x.fileName,
        type: x.fileName.substring(x.fileName.lastIndexOf(".") + 1) || "",
        thumb: "",
      }));

      this.fileList2 = this.info.customerVoucherAttachmentList.map((x) => ({
        url: x.path,
        name: x.fileName,
        type: x.fileName.substring(x.fileName.lastIndexOf(".") + 1) || "",
        thumb: "",
      }));

      this.fileList3 = this.info.billsAttachmentList.map((x) => ({
        url: x.path,
        name: x.fileName,
        type: x.fileName.substring(x.fileName.lastIndexOf(".") + 1) || "",
        thumb: "",
      }));

      this.fileList4 = this.info.pictureList.map((x) => ({
        url: x.path,
        thumb: x.compressedImagePath || x.path,
      }));
      this.info.pictureList.forEach((x) => {
        this.compressPicMap.set(x.path, x.compressedImagePath || x.path);
      });
      this.$nextTick(() => {
        this.$refs.costCollapse.init();
      });
    },
    getLocation() {
      uni.getLocation({
        type: "wgs84",
        success: (res) => {
          const longitude = res.longitude;
          const latitude = res.latitude;
          this.$api.returnCar
            .getAddress({ longitude, latitude })
            .then((res) => {
              this.gpsLocation = res?.data ?? "浙江省嘉兴市";
            });
        },
        fail: (res) => {
          console.log(res);
        },
      });
    },
    // 图片添加水印
    async addWatermark(img, fileSize) {
      const image = img;
      let res1 = await new Promise((resolve, reject) => {
        uni.getImageInfo({
          src: img,
          success: (res) => {
            // 设置canvas宽高等于原图片宽高
            this.canvasWidth = res.width;
            this.canvasHeight = res.height;
            // 创建 canvas 的绘图上下文
            const ctx = uni.createCanvasContext("myCanvas", this);
            // 绘制图片
            ctx.drawImage(image, 0, 0, res.width, res.height);
            //先加logo
            // const watermarkImg = this.$refs.logo;
            ctx.drawImage("/static/logo3.png", 10, res.height - 150, 200, 40.8);

            //再加时间
            ctx.font = "25px 黑体";
            ctx.fillStyle = "#fff";
            ctx.textAlign = "left";
            ctx.fillText(this.getNowDateTime(), 10, res.height - 70);
            //最后加地址
            ctx.font = "25px 黑体";
            ctx.fillStyle = "#fff";
            ctx.textAlign = "left";
            ctx.fillText(this.gpsLocation, 10, res.height - 30);
            // 画到 canvas 中
            ctx.draw(false, () => {
              // 将画布转化为图片
              // 设置延时，延时的秒数和图片体积正相关，越大的图片，延时越长
              // 如果不延时，导出的图片可能存在有黑边、只显示部分 等问题
              let timeout = 0;
              if (fileSize <= 3) {
                timeout = 1000;
              } else {
                timeout = 1000 * (fileSize / 3);
              }
              console.log(111111111);
              setTimeout(() => {
                uni.canvasToTempFilePath(
                  {
                    canvasId: "myCanvas",
                    fileType: "jpg",
                    quality: fileSize <= 3 ? 1 : 0.75, // 如果不到3MB，则不压缩，否则压缩
                    success: (res) => {
                      console.log(res);
                      this.loading = false;
                      resolve(res.tempFilePath);
                    },
                    fail: (err) => {
                      this.loading = false;
                      reject(err);
                    },
                  },
                  this
                );
              }, timeout);
            });
          },
        });
      });
      return res1;
    },
    getNowDateTime() {
      let currentTime = new Date();
      let year = currentTime.getFullYear();
      let month = currentTime.getMonth() + 1;
      let day = currentTime.getDate();
      let hours = currentTime.getHours();
      let minutes = currentTime.getMinutes();
      month = month < 10 ? "0" + month : month;
      day = day < 10 ? "0" + day : day;
      hours = hours < 10 ? "0" + hours : hours;
      minutes = minutes < 10 ? "0" + minutes : minutes;

      return `${year}-${month}-${day} ${hours}:${minutes}`;
    },
  },

  onPullDownRefresh() {
    uni.stopPullDownRefresh(); //刷新数据之后停止刷新效果
  },
};
</script>

<style lang="less" scoped>
.yyBlock {
  justify-content: space-between;
  display: flex;
  font-size: 26rpx;
}
.currentItem {
  border: 1px solid #7ba746;
  padding: 0 20rpx 20rpx;
  border-radius: 20rpx;
  margin: 20rpx 0;
}
.truckListBtns {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  button {
    background-color: transparent;
    font-size: 26rpx;
    width: 100rpx;
    height: 50rpx;
    line-height: 50rpx;
    margin-left: 30rpx;
    margin-right: 0;
    padding: 0;

    &.add {
      background-color: #7ba746;
      color: white;
    }

    &.del {
      background-color: white;
      color: #7ba746;
      border: 1rpx #7ba746 solid;
    }

    &.disabled {
      opacity: 0.6;
    }
  }
}
.truckItem {
  margin-top: 30rpx;
  padding: 30rpx;
  .border {
    margin-top: 10rpx;
    border: 1px solid #7ba746;
    border-radius: 20rpx;
    padding: 0 20rpx;
  }
  .flexWrap {
    display: flex;
    .item {
      margin-top: 0;
      flex: 1;
    }
  }
}
.viewBtn {
  display: inline-block;
  font-size: 26rpx;
  padding: 5rpx 10rpx;
  border-radius: 10rpx;
  margin-left: 10rpx;
  background: #7ba746;
  color: #fff;
}
/deep/ .u-collapse-item .u-cell__title-text {
  font-weight: bold;
}
/deep/ .uni-select__input-text {
  font-size: 26rpx !important;
  text-align: right !important;
}
/deep/ .u-collapse-item__content__text {
  padding: unset !important;
  color: unset !important;
  font-size: unset !important;
}

// /deep/ .uni-select__selector-item text {
//   font-size: 26rpx !important;
// }

// /deep/ .uni-select {
//   padding-right: 18rpx !important;
//   border-width: 1rpx !important;
//   border-color: gray !important;
//   border-style: solid !important;
//   border-top-width: 0 !important;
//   border-right-width: 0 !important;
//   border-bottom-width: 0 !important;
// }
/deep/ .uni-select {
  width: 100rpx !important;
}
.container {
  // background-color: #d7d7d7;
  padding: 30rpx;
  .header {
    margin: 15rpx 0;
  }
  .item {
    margin-top: 30rpx;
    .content {
      font-size: 26rpx;
      color: #797979;
      display: flex;
      gap: 50rpx;
      justify-content: space-between;
      margin-bottom: 10rpx;
      .text {
        border: 2rpx solid #797979;
        border-radius: 10rpx;
        padding: 5rpx;
      }
    }
    .title {
      font-size: 26rpx;
      margin-bottom: 15rpx;

      &.required::before {
        content: "*";
        color: red;
        margin-right: 3rpx;
      }
    }
    .font30 {
      font-size: 30rpx;
    }
    .btn.checkList {
      width: 200rpx;
      height: 60rpx;
      font-size: 26rpx;
      line-height: 26rpx;
      padding: 17rpx 0;
      text-align: center;
      background-color: #7ba746;
      color: white;
      margin-left: 0;

      &.required::before {
        content: "*";
        color: red;
        margin-right: 3rpx;
      }
    }
  }

  .btns {
    display: flex;
    align-items: center;
    justify-content: space-around;
    margin-top: 40rpx;

    button {
      width: 200rpx;
      height: 60rpx;
      font-size: 26rpx;
      line-height: 26rpx;
      padding: 17rpx 0;
      text-align: center;
    }

    .cancel {
      background-color: white;
      color: #7ba746;
      border: 1rpx #7ba746 solid;
    }

    .save {
      background-color: #7ba746;
      color: white;
    }
    .disabled {
      opacity: 0.6;
    }
  }
}

/deep/ .u-upload__button text {
  font-size: 48rpx !important;
}

/deep/ .u-upload__deletable {
  height: 42rpx !important;
  width: 42rpx !important;
}

/deep/ .u-upload__deletable text {
  font-size: 32rpx !important;
  line-height: 32rpx !important;
}

/deep/ picker-view {
  height: 450rpx !important;
}

/deep/ .u-border {
  border-width: 1rpx !important;
  border-color: #dadbde !important;
  border-style: solid;
}

/deep/ .u-switch {
  border-color: rgba(0, 0, 0, 0.12) !important;
}

/deep/ .u-slide-right-enter-to.u-slide-right-enter-active {
  width: 750rpx;
}

/deep/ .td_wrap {
  height: auto !important;
}

/deep/ .no-bad-table-wrap .td.rowspan {
  display: flex;
  align-items: center;
  justify-content: center;
}
// /deep/ checkbox-group view.td {
//   width: 136.5rpx !important;
// }

// /deep/ checkbox-group view.td_wrap {
//   width: 136.5rpx !important;
// }

// /deep/ .div-table-head .thead .tr view {
//   width: 136.5rpx !important;
// }

/deep/ no-bad-table {
  overflow-x: hidden;
}

/deep/ .no-bad-table-wrap .thead .tr .td {
  background-color: #7ba746;
  color: white;
}

/deep/ .no-bad-table-wrap .thead .tr .td .td_wrap {
  background-color: #7ba746;
  color: white;
}
</style>
