<template>
  <view class="container">
    <view class="item">
      <view class="title required">品牌</view>
      <u-picker
        :show="showBrandPicker"
        :columns="[brands]"
        keyName="dicName"
        :immediateChange="true"
        @confirm="confirmBand"
        @cancel="showBrandPicker = false"
      >
      </u-picker>
      <u--input
        border="surround"
        :disabledColor="_disabled ? '#f5f7fa' : '#ffffff'"
        disabled
        fontSize="26"
        :value="getBrandName(info.brand)"
        @tap="!_disabled && (showBrandPicker = true)"
      >
      </u--input>
    </view>
    <view class="item">
      <view class="title required">型号</view>
      <u--input
        border="surround"
        :value="modelName"
        disabled
        fontSize="26"
      ></u--input>
    </view>
    <view class="item">
      <view class="title required">车牌号</view>
      <u-picker
        :show="showPlateNumberPicker"
        :columns="[inStoreList]"
        keyName="text"
        :immediateChange="true"
        @confirm="confirmPlateNumber"
        @cancel="showPlateNumberPicker = false"
      >
      </u-picker>
      <u--input
        border="surround"
        :disabledColor="_disabled ? '#f5f7fa' : '#ffffff'"
        disabled
        fontSize="26"
        :value="info.plateNumber"
        @tap="!_disabled && searchPlatNumber()"
      >
      </u--input>
    </view>
    <view class="item">
      <view class="title required">车架号</view>
      <u--input
        border="surround"
        v-model="info.vin"
        disabled
        fontSize="26"
      ></u--input>
    </view>
    <view class="item">
      <view class="title required">车身广告</view>
      <u-picker
        :show="showHasAdvPicker"
        :columns="[yesNoDic]"
        keyName="dicName"
        :immediateChange="true"
        @confirm="confirmHasAdv"
        @cancel="showHasAdvPicker = false"
      >
      </u-picker>
      <u--input
        border="surround"
        :disabledColor="_disabled ? '#f5f7fa' : '#ffffff'"
        disabled
        fontSize="26"
        :value="yesNoDic[info.hasAdvertisement].dicName"
        @tap="!_disabled && (showHasAdvPicker = true)"
      >
      </u--input>
    </view>
    <view class="item">
      <view class="title required">尾板</view>
      <u-picker
        :show="showHasTailPicker"
        :columns="[yesNoDic]"
        keyName="dicName"
        :immediateChange="true"
        @confirm="confirmHasTail"
        @cancel="showHasTailPicker = false"
      >
      </u-picker>
      <u--input
        border="surround"
        :disabledColor="_disabled ? '#f5f7fa' : '#ffffff'"
        disabled
        fontSize="26"
        :value="yesNoDic[info.hasTailboard].dicName"
        @tap="!_disabled && (showHasTailPicker = true)"
      >
      </u--input>
    </view>
    <view class="item">
      <view class="title required">是否有挂</view>
      <u-picker
        :show="showIsHangPicker"
        :columns="[yesNoDic]"
        keyName="dicName"
        :immediateChange="true"
        @confirm="confirmIsHang"
        @cancel="showIsHangPicker = false"
      >
      </u-picker>
      <u--input
        border="surround"
        :disabledColor="_disabled ? '#f5f7fa' : '#ffffff'"
        disabled
        fontSize="26"
        :value="yesNoDic[info.isHang].dicName"
        @tap="!_disabled && (showIsHangPicker = true)"
      >
      </u--input>
    </view>
    <view class="item">
      <view class="title" :class="{ required: info.isHang == 1 }"
        >挂车牌号</view
      >
      <u--input
        border="surround"
        v-model="info.hangPlateNumber"
        fontSize="26"
        :disabled="info.isHang != 1 || _disabled"
      ></u--input>
    </view>
    <view class="item">
      <view class="title required">合同交车日期</view>
      <u--input
        border="surround"
        :value="formatDateTime(info.handoverDate)"
        disabled
        fontSize="26"
      ></u--input>
    </view>
    <view class="item">
      <view class="title required">约定交车日期</view>
      <u--input
        border="surround"
        :value="formatDateTime(info.appointedDate)"
        disabled
        fontSize="26"
      ></u--input>
    </view>
    <view class="item">
      <view class="title">运维预计交车日期</view>
      <u-datetime-picker
        :show="showPredictDatePicker"
        mode="date"
        @confirm="confirmPredictDate"
        @cancel="showPredictDatePicker = false"
      ></u-datetime-picker>
      <u--input
        border="surround"
        :disabledColor="_disabled ? '#f5f7fa' : '#ffffff'"
        disabled
        fontSize="26"
        :value="formatDateTime(info.operationExpectedDeliveryDate)"
        @tap="!_disabled && (showPredictDatePicker = true)"
      >
      </u--input>
    </view>
    <view class="item">
      <view class="title required">是否一致</view>
      <u-switch
        size="50"
        :value="
          info.operationExpectedDeliveryDate &&
          info.operationExpectedDeliveryDate <= info.appointedDate
            ? true
            : false
        "
        disabled
        inactiveColor="#f5f7fa"
        activeColor="#7ba746"
      >
      </u-switch>
    </view>
    <view class="item">
      <view class="title">备注</view>
      <u--textarea
        border="surround"
        :disabled="_disabled"
        v-model="info.remark"
        fontSize="26"
        autoHeight
      ></u--textarea>
    </view>
    <view class="item">
      <button class="btn checkList required" @tap="openCheckListPopup">
        备车检查单
      </button>
    </view>
    <view class="item">
      <view class="title required">备车完成</view>
      <u-switch
        v-model="prepareOk"
        :disabled="_disabled"
        size="50"
        @change="prepareOkChange"
        inactiveColor="#f5f7fa"
        activeColor="#7ba746"
      >
      </u-switch>
    </view>
    <view class="item">
      <view class="title">备车完成时间</view>
      <u--input
        border="surround"
        disabled
        fontSize="26"
        :value="formatDateTime(info.standbyDate, 'hour')"
      >
      </u--input>
    </view>
    <view class="item">
      <view class="title">瑕疵照片</view>
      <u-upload
        :fileList="fileList12"
        :width="200"
        :height="200"
        :disabled="true"
        :deletable="false"
        name="12"
      ></u-upload>
    </view>

    <view class="btns">
      <button
        class="save"
        :class="{ disabled: _disabled }"
        :disabled="_disabled"
        @tap="saveStandbyVehicleDetail"
      >
        保存
      </button>
      <button class="cancel" @tap="navigateBack">取消</button>
    </view>

    <page-container
      :show="checkListShow"
      :duration="0"
      :overlay="false"
      @beforeleave="checkListShow = false"
    >
      <u-popup
        :show="checkListShow"
        mode="right"
        @close="checkListShow = false"
      >
        <scroll-view scroll-y="true" style="height: 95vh">
          <no-bad-table
            v-if="checkListShow"
            :columns="columns"
            :isRead="_disabled"
            :list="formDataList"
            :spanArr="spanArr"
            :slot-cols="['dataCategory', 'dataName', 'takeTruck', 'remark']"
            :span-method="objectSpanMethod"
          >
            <template v-slot="{ row, col, index, isRead }">
              <view
                v-if="col.key == 'dataCategory'"
                style="white-space: pre-wrap"
              >
                {{ row.dataCategory }}
              </view>
              <view
                v-else-if="col.key == 'dataName'"
                style="white-space: pre-wrap"
              >
                {{ row.dataName }}
              </view>
              <view
                v-else-if="col.key == 'takeTruck'"
                style="display: flex; justify-content: center"
              >
                <u-switch
                  size="50"
                  v-model="row.takeTruck"
                  :disabled="isRead"
                  @change="switchTakeTruck(index)"
                  inactiveColor="#f5f7fa"
                  activeColor="#7ba746"
                >
                </u-switch>
              </view>
              <view
                v-else-if="col.key == 'remark' && !row.notUpdate"
                style="display: flex; justify-content: center"
              >
                <u--input
                  border="surround"
                  fontSize="26"
                  :disabled="isRead"
                  :value="row.remark"
                  @change="inputQuality($event, index)"
                >
                </u--input>
              </view>
            </template>
          </no-bad-table>
          <view class="btns">
            <button class="save" v-if="!isRead" @tap="saveFormDataList">
              保存
            </button>
            <button class="cancel" @tap="cancelFormDataChange">取消</button>
          </view>
        </scroll-view>
      </u-popup>
    </page-container>
  </view>
</template>

<script>
import { getUser } from "@/utils/auth.js";

export default {
  options: {
    styleIsolation: "shared", // 解除样式隔离
  },
  data() {
    return {
      mainId: 0, // 备车主表id
      id: 0, // 备车单中某一辆车辆信息id
      info: {}, // 该备车车辆记录的数据
      brands: [],
      truckType: [],
      yesNoDic: [],
      otherTrunkIds: [],
      showBrandPicker: false,
      showHasAdvPicker: false, // hasAdvertisement
      showHasTailPicker: false, // hasTailboard
      showIsHangPicker: false,
      showPredictDatePicker: false,
      showPlateNumberPicker: false,
      prepareOk: false, // 备车完成 switch
      checkListShow: false, // 检查单弹窗
      formDataList: [], // 备车单数据
      spanArr: [],
      columns: [
        {
          title: "检查类别",
          key: "dataCategory",
        },
        {
          title: "检查项目",
          key: "dataName",
        },
        {
          title: "选择",
          key: "takeTruck",
        },
        {
          title: "备注",
          key: "remark",
        },
      ],
      inStoreList: [], // 在库状态车辆列表
      isRead: false, // 页面是否处于阅读模式
      cacheRequestTimer: 0, // 定时请求定时器
      fileList12: [], //瑕疵照片
    };
  },
  computed: {
    // 大部分组件的禁用直接用 disabled：查看模式或者已完成签署
    _disabled() {
      return this.isRead;
    },
    modelName() {
      if (this.truckType.length == 0) {
        return "";
      }
      return (
        this.truckType.find((x) => x.dicCode == this.info.model)?.dicName ?? ""
      );
    },
  },
  methods: {
    getData() {
      this.$api.standbyVehicle.getById({ id: this.mainId }).then((res) => {
        if (res.code != 200 || !res.data.detailList) {
          return;
        }
        this.otherTrunkIds = [];
        //2025.7.4需求 过滤0未被车  6已撤销
        let detailList =
          res.data.detailList.filter(
            (item) => ![0, 6].includes(item.standbyStatus)
          ) || [];
        detailList.forEach((x) => {
          if (x.id == this.id) {
            this.info = x;
          } else {
            this.otherTrunkIds.push(x.truckId);
          }
        });
        this.info = detailList.find((x) => x.id == this.id);
        // 已有备车完成时间，说明已备完车
        if (this.info.standbyDate) {
          this.prepareOk = true;
        }
        this.fileList12 = this.info.blemish.map((x) => ({
          url: x.path,
          name: x.fileName,
        }));
        this.getBrandListByMode();
        this.getInStoreList();
        // formDataList为深度拷贝的一个对象，并不会直接影响到该车辆的检查单信息
        this.formDataList = this.processFormDataList(
          this.deepClone(this.info.formDataList)
        );
        this.getSpanArr(this.formDataList);
        // console.log(`this.info:\n`, this.info)
        console.log(`this.formDataList:\n`, this.formDataList);
      });
    },
    getBrandListByMode() {
      this.$api.standbyVehicle
        .getBrandListByMode({ mode: this.info.model })
        .then((res) => {
          this.brands = res.data;
          console.log(`brands:\n`, this.brands);
        });
    },
    getDic() {
      this.$api.standbyVehicle.getVehicleBrand().then((res) => {
        this.brands = res;
      });
      this.$api.standbyVehicle.getTruckType().then((res) => {
        this.truckType = res;
      });
      this.$api.standbyVehicle.getYesNoDic().then((res) => {
        this.yesNoDic = res;
      });
    },
    getBrandName(dicCode) {
      return this.getDicValue(this.brands, dicCode);
    },
    getModelName(dicCode) {
      return this.getDicValue(this.truckType, dicCode);
    },
    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.showBrandPicker = false;
        return;
      }
      this.info.brand = brand;
      this.showBrandPicker = false;
      this.getInStoreList(); // 品牌一变，需要重新获取车牌号列表（每种品牌的车牌号列表不同）
      this.info.plateNumber = "";
      this.info.vin = "";
      this.info.hasTailboard = "";
      this.info.hasAdvertisement = "";
      this.info.isHang = "";
    },
    confirmHasAdv(e) {
      this.info.hasAdvertisement = e.indexs[0];
      this.showHasAdvPicker = false;
    },
    confirmHasTail(e) {
      this.info.hasTailboard = e.indexs[0];
      this.showHasTailPicker = false;
    },
    confirmIsHang(e) {
      this.info.isHang = e.indexs[0];
      this.info.hangPlateNumber = "";
      this.showIsHangPicker = false;
    },
    confirmPredictDate(e) {
      // 首次选择日期时，时间戳信息精确到了秒，故这里统一处理，使之仅精确到日
      this.info.operationExpectedDeliveryDate = this.timestampToDateAndBack(
        e.value
      );
      this.showPredictDatePicker = false;
    },
    async confirmPlateNumber(e) {
      //console.log(e);
      //   if(this.info.brand != e.value[0].brand || this.info.model != e.value[0].model){
      //     uni.showToast({
      //         title: `该车辆当前状态为${status}，无法进行备车`,
      //       title: "品牌和车型必须一致",
      //       icon: "none",
      //     });
      //     return
      //   }
      let status = "";
      await this.$api.truck
        .getTruckRentStatus({ plateNum: e.value[0].plateNumber })
        .then((res) => {
          console.log(res);
          //车辆租赁状态dic_truck_rent_status
          switch (res.data) {
            case 1:
              status = "自营";
              break;
            case 12:
              status = "异动";
              break;
            case 2:
              status = "租赁";
              break;
            case 7:
              status = "待交车";
              break;
            case 8:
              status = "挂靠";
              break;
          }
          if (status) {
            uni.showToast({
              title: `该车辆当前状态为${status}，无法进行备车`,
              icon: "none",
              duration: 2500,
            });
            return;
          }
        });
      console.log("########");
      if (status) return;
      this.info.plateNumber = e.value[0].plateNumber;
      this.info.vin = e.value[0].vin;
      this.info.truckId = e.value[0].id; // 换车牌本质是换这个车辆id
      this.info.hasTailboard = e.value[0].hasTailboard;
      this.info.hasAdvertisement = e.value[0].hasAdvertisement;
      this.info.isHang = e.value[0].isHang;
      this.info.brand = e.value[0].brand;
      this.info.remark = e.value[0].remark; //25.3.28带出车辆整备那边填的备注
      this.info.blemish = e.value[0].blemish; //25.3.28带出车辆整备那边填的瑕疵照片
      this.fileList12 = this.info.blemish.map((x) => ({
        //25.3.28带出车辆整备那边填的瑕疵照片
        url: x.path,
        name: x.fileName,
      }));
      console.log(this.fileList12);
      this.showPlateNumberPicker = false;
      if (e.value[0].preparationStatus) {
        this.$api.truckPreparation
          .getPreFormDataListByTruckId({ id: this.info.truckId })
          .then((res) => {
            this.info.formDataList = res.data;
            this.formDataList = this.processFormDataList(
              this.deepClone(this.info.formDataList)
            );
            this.getSpanArr(this.formDataList);
          });
      } else {
        this.info.formDataList = [];
        this.formDataList = [];
      }
    },
    prepareOkChange(value) {
      if (value) {
        this.info.standbyDate = this.getNowTimestamp();
        // 比较备车完成时间和约定交车日期，若是同一天(或早于约定日期) 则认为 "一致"，将isAccord设置为1
        if (
          this.timestampToDateAndBack(this.info.standbyDate) <=
          this.info.appointedDate
        ) {
          this.info.isAccord = 1;
        } else {
          this.info.isAccord = 0;
        }
      } else {
        this.info.standbyDate = null;
        this.info.isAccord = 0;
      }
    },
    navigateBack() {
      uni.navigateBack();
    },
    switchTakeTruck(index) {
      this.formDataList[index].takeTruck = !this.formDataList[index].takeTruck;
    },
    inputQuality(value, index) {
      this.formDataList[index].remark = value;
    },
    processFormDataList(dataList) {
      dataList = dataList.filter((x) => x.dataName != "检查项目");
      for (let item of dataList) {
        if (item.takeTruck == "true") {
          item.takeTruck = true;
        } else if (item.takeTruck == "false") {
          item.takeTruck = false;
        }
      }

      return dataList;
    },
    // 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 (类别字段)
          if (data[i].dataCategory === data[i - 1].dataCategory) {
            this.spanArr[this.pos] += 1;
            this.spanArr.push(0);
          } else {
            this.spanArr.push(1);
            this.pos = i;
          }
        }
      }
    },
    objectSpanMethod(row, column, rowIndex, columnIndex) {
      if (columnIndex === 0) {
        const _row = this.spanArr[rowIndex];
        const _col = _row > 0 ? 1 : 0;
        return {
          rowspan: _row,
          colspan: _col,
        };
      }
    },
    // https://www.kancloud.cn/uview/uview-ui_v2/2579089
    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;
    },
    openCheckListPopup() {
      if (!this.info.truckId) {
        uni.showToast({
          title: "请先选择车牌号",
          duration: 1500,
          icon: "error",
        });
        return;
      }

      if (this.info.formDataList.length == 0) {
        this.$api.standbyVehicle
          .getFormDataListByTruckId({ id: this.info.truckId })
          .then((res) => {
            this.formDataList = this.processFormDataList(res.data);
            this.getSpanArr(this.formDataList);
            this.checkListShow = true;
            uni.setNavigationBarTitle({
              title: "备车检查单",
            });
          });
      } else {
        this.checkListShow = true;
        uni.setNavigationBarTitle({
          title: "备车检查单",
        });
      }
    },
    saveFormDataList() {
      this.checkListShow = false;
      this.info.formDataList = this.deepClone(this.formDataList);
      uni.setNavigationBarTitle({
        title: "备车信息",
      });
    },
    cancelFormDataChange() {
      this.formDataList = this.processFormDataList(
        this.deepClone(this.info.formDataList)
      );
      this.getSpanArr(this.formDataList);
      this.checkListShow = false;
      uni.setNavigationBarTitle({
        title: "备车信息",
      });
    },
    // 保存备车信息表
    saveStandbyVehicleDetail() {
      if (!this.info.plateNumber) {
        uni.showToast({
          title: "请选择车牌号",
          duration: 1500,
          icon: "error",
        });

        return;
      }
      if (this.info.isHang == 1 && !this.info.hangPlateNumber) {
        uni.showToast({
          title: "请填写挂车牌号",
          duration: 1500,
          icon: "error",
        });

        return;
      }
      this.$api.standbyVehicle
        .saveStandbyVehicleDetail(this.info)
        .then((res) => {
          // todo： res是接口data数据，之后研究一下如何获取整个内容
          if (res == this.info.id) {
            uni.showToast({
              title: "保存成功",
              icon: "success",
              duration: 1500,
              success() {
                setTimeout(() => {
                  uni.navigateBack();
                }, 1500);
              },
            });
          }
        });
    },
    async queryAuthListByPlateNumber(plateNumber) {
      const params = {};
      if (this.info.brand) {
        params.brand = this.info.brand;
      }
      if (this.info.model) {
        params.model = this.info.model;
      }
      params.plateNumber = plateNumber;
      await this.$api.truck.queryInStoreListWithStatus(params).then((res) => {
        console.log(res);
        this.inStoreList =
          res?.map((item) => {
            item.text = item.plateNumber;
            return item;
          }) || [];
      });
    },
    async getInStoreList(plateNumber) {
      const params = {};
      if (this.info.brand) {
        params.brand = this.info.brand;
      }
      if (this.info.model) {
        params.model = this.info.model;
      }
      params.plateNumber = plateNumber;

      await this.$api.truck.queryInStoreList(params).then((res) => {
        this.inStoreList = res?.filter(
          (item) => !this.otherTrunkIds.includes(item.id)
        );
        this.inStoreList =
          this.inStoreList?.map((item) => {
            item.text = item.preparationStatus
              ? item.plateNumber + ` ${item.preparationStatusName}`
              : item.plateNumber;
            return item;
          }) || [];
      });
    },
    searchPlatNumber() {
      uni.showModal({
        title: "车牌号关键字",
        confirmText: "搜索",
        editable: true,
        placeholderText: "请输入车牌号关键字用于检索",
        success: async (res) => {
          if (res.confirm) {
            if (res.content) {
              await this.queryAuthListByPlateNumber(res.content);
            } else {
              await this.getInStoreList(res.content);
            }

            setTimeout(() => {
              this.showPlateNumberPicker = true;
            }, 100);
          }
        },
      });
    },
    // 定时刷新cache，指示后端当前用户仍然在编辑
    renewCache() {
      const id = this.id;
      const phone = this.userInfo.phone;
      this.$api.standbyVehicle
        .saveCache({ key: id, value: phone })
        .then((res) => {
          console.log(res);
        });
    },
  },
  onLoad(options) {
    if (options.id) {
      this.id = options.id;
    }
    if (options.mainId) {
      this.mainId = options.mainId;
    }
    console.log(options.isRead);
    console.log(true);
    if (options.isRead) {
      this.isRead = options.isRead === "false" ? false : true;
    }
    this.getData();
    this.getDic();
    this.userInfo = getUser() || {};
    console.log(`userInfo:\n`, this.userInfo);

    this.cacheRequestTimer = setInterval(() => {
      this.renewCache();
    }, 30 * 1000);
  },
  onPullDownRefresh() {
    uni.stopPullDownRefresh(); //刷新数据之后停止刷新效果
  },
  onShow() {
    if (this.cacheRequestTimer) {
      clearInterval(this.cacheRequestTimer);
      this.cacheRequestTimer = setInterval(() => {
        this.renewCache();
      }, 30 * 1000);
    }
  },
  onHide() {
    if (this.cacheRequestTimer) {
      clearInterval(this.cacheRequestTimer);
    }
  },
  destroyed() {
    console.log(`备车信息页 destroyed`);
    if (this.cacheRequestTimer) {
      clearInterval(this.cacheRequestTimer);
    }
    this.$api.standbyVehicle.delCache({ key: this.id }).then((res) => {
      console.log(`清空操作标识`);
      console.log(res);
    });
  },
};
</script>

<style lang="less" scoped>
.container {
  // background-color: #d7d7d7;
  padding: 30rpx;

  .item {
    margin-top: 30rpx;

    .title {
      font-size: 26rpx;
      margin-bottom: 15rpx;

      &.required::before {
        content: "*";
        color: red;
        margin-right: 3rpx;
      }
    }
    .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/ 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/ checkbox-group view.td {
  width: 186rpx !important;
}

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

/deep/ .no-bad-table-wrap .td.rowspan {
  display: flex;
  align-items: center;
  justify-content: center;
}

/deep/ .div-table-head .thead .tr view {
  width: 186rpx !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>
