<template>
  <basic-container>
    <div class="avue-crud">
      <!-- 基础信息 -->
      <div class="w100">
        <!-- 标题 -->
        <el-divider content-position="left">基础信息</el-divider>
        <!-- 表单内容 -->
        <el-form label-width="80px">
          <!-- 仓库节点 -->
          <el-steps finish-status="success" :active="details.nodeInfoData.length" space="300px">
            <el-step v-for="(item, index) in details.nodeInfoData" :key="item">
              <template #icon>
                <el-icon size="20px" v-if="index === 0"><LocationFilled /></el-icon>
                <el-icon size="20px" v-else><Van /></el-icon>
              </template>
              <template #title>
                <div class="form_row">
                  <div class="flex-c-c steps_title">
                    <div class="count_icon">{{ index + 1 }}</div>
                    <div v-if="index === 0">始发仓</div>
                    <div v-else>目的仓</div>
                  </div>

                  <!-- 控件 -->
                  <div>
                    <!-- 删除节点 -->
                    <el-button icon="Delete" v-if="index !== 0" @click="handleDelNode(index)" />
                    <!-- 新增节点 -->
                    <el-button
                      v-if="index === details.nodeInfoData.length - 1"
                      type="primary"
                      icon="Plus"
                      @click="handleAddNode"
                    />
                  </div>
                </div>
              </template>
              <template #description>
                <el-select
                  class="mt10"
                  v-model="item.nodeName"
                  filterable
                  remote
                  reserve-keyword
                  placeholder="目的仓"
                  @change="val => destinationWarehouseNameChange(val, index)"
                  :remote-method="remoteMethod"
                  :loading="details.loadingObj.loading"
                  :disabled="index === 0"
                >
                  <el-option
                    v-for="val in details.options"
                    :key="val.value"
                    :label="val.warehouseName"
                    :value="val.warehouseId"
                  />
                </el-select>
              </template>
            </el-step>
          </el-steps>

          <div class="form_row mt10">
            <!-- 车牌号 -->
            <div class="form_row_item">
              <el-form-item inline label="车牌号">
                <el-input v-model="form.carNumber" />
              </el-form-item>
              <el-button type="primary" @click="handleAddCar" icon="Plus"></el-button>
            </div>

            <!-- 主驾司机 -->
            <div class="form_row_item">
              <el-form-item inline label="主驾司机">
                <el-input v-model="form.driverName" />
              </el-form-item>
              <el-button type="primary" @click="handleAddDriver" icon="Plus"></el-button>
            </div>

            <!-- 副驾司机 -->
            <div class="form_row_item">
              <el-form-item inline label="副驾司机">
                <el-input v-model="form.name" />
              </el-form-item>
            </div>

            <!-- 装车方式 -->
            <div class="form_row_item">
              <el-form-item inline label="装车方式">
                <el-radio-group v-model="form.loadingType" class="ml-4">
                  <el-radio label="1" size="large">手动装车(后台)</el-radio>
                  <el-radio label="2" size="large">扫描装车</el-radio>
                </el-radio-group>
              </el-form-item>
            </div>
          </div>

          <div class="form_row">
            <!-- 经办人 -->
            <div class="form_row_item">
              <el-form-item inline label="经办人">
                <el-input v-model="userInfo.user_name" readonly />
              </el-form-item>
            </div>

            <!-- 配载类型 -->
            <div class="form_row_item">
              <el-form-item inline label="配载类型">
                <el-select
                  v-model="form.loadType"
                  class="m-2"
                  filterable
                  multiple
                  placeholder="配载类型"
                >
                  <el-option
                    v-for="item in query.receiptList"
                    :key="item.dictValue"
                    :label="item.dictValue"
                    :value="item.dictKey"
                  />
                </el-select>
              </el-form-item>
            </div>

            <!-- 主驾司机 -->
            <div class="form_row_item">
              <el-form-item inline label="分摊方式">
                <el-select
                  v-model="form.chargeType"
                  class="m-2"
                  filterable
                  multiple
                  placeholder="分摊方式"
                >
                  <el-option
                    v-for="item in query.receiptList"
                    :key="item.dictValue"
                    :label="item.dictValue"
                    :value="item.dictKey"
                  />
                </el-select>
              </el-form-item>
            </div>

            <!-- 合计运费 -->
            <div class="form_row_item">
              <el-form-item inline label="合计运费">
                <el-input-number
                  v-model="form.countTransportCost"
                  controls-position="right"
                  :precision="2"
                  :min="0"
                  :step="1"
                  readonly
                />
              </el-form-item>
            </div>

            <!-- 预计发车 -->
            <div class="form_row_item">
              <el-form-item inline label="预计发车">
                <el-input />
              </el-form-item>
            </div>
          </div>

          <el-form-item label="备注">
            <el-input autosize type="textarea" placeholder="备注" />
          </el-form-item>
        </el-form>
      </div>

      <!-- 节点信息 -->
      <div class="w100">
        <!-- 标题 -->
        <el-divider content-position="left">节点信息</el-divider>

        <tablecmt
          class="nodeInfo"
          :columnList="details.nodeInfoColumnList"
          :tableData="details.nodeInfoData"
          :loading="loadingObj.stowageLoading"
          ref="nodeInfoRef"
        >
          <template #default="slotProps">
            <el-input-number
              controls-position="right"
              :precision="2"
              :min="0"
              :step="1"
              :disabled="slotProps.scope.row.blackList.includes(slotProps.scope.column.property)"
              @input="handleComputedNum"
              v-model="slotProps.scope.row[slotProps.scope.column.property]"
            />
          </template>
        </tablecmt>
        <!-- 列表 -->
      </div>

      <!-- 订单池和调度池 -->
      <template v-if="details.nodeInfoData.length > 1">
        <div class="add_row" v-for="(item, index) in details.nodeInfoData">
          <template v-if="index !== 0">
            <div style="width: 49%">
              <!-- 头部 -->
              <el-divider content-position="left">
                <span style="margin-right: 20px">{{ details.nodeInfoData[0].nodeName }}</span>
                <span>运单池</span>
              </el-divider>

              <!-- 搜索区域 -->
              <div v-if="!search">
                <el-form
                  :inline="true"
                  label-width="80px"
                  :model="details.oldQuery"
                  class="el-fr-d"
                >
                  <div class="fo-fl">
                    <el-form-item label="关键词" class="el-times">
                      <el-input></el-input>
                    </el-form-item>
                    <el-form-item label="目的网点" class="el-times">
                      <el-input></el-input>
                    </el-form-item>
                    <el-form-item label="到站" class="el-times">
                      <el-input></el-input>
                    </el-form-item>
                    <el-form-item label="目标品类" class="el-times">
                      <el-input></el-input>
                    </el-form-item>
                    <el-form-item label="备注" class="el-times">
                      <el-input></el-input>
                    </el-form-item>
                    <el-form-item label="托盘码" class="el-times">
                      <el-input></el-input>
                    </el-form-item>
                    <el-form-item label="开单时间" class="el-times">
                      <!--            <el-input v-model="query.stockupArea" placeholder="请输入备货区"></el-input>-->
                      <el-date-picker
                        v-model="stockupDate"
                        type="daterange"
                        unlink-panels
                        range-separator="-"
                        start-placeholder="开始时间"
                        end-placeholder="结束时间"
                        :shortcuts="shortcuts"
                        clearable
                      />
                    </el-form-item>
                    <el-form-item>
                      <el-button type="primary" icon="el-icon-search" @click="searchReset()"
                        >搜 索</el-button
                      >
                      <el-button icon="el-icon-delete" @click="searchReset()">重置</el-button>
                    </el-form-item>
                  </div>
                </el-form>
              </div>

              <!-- 控件 -->
              <div style="margin-bottom: 10px" class="flex-c-sb">
                <!-- 控件 -->
                <div class="avue-crud__right">
                  <el-button icon="el-icon-refresh" @click="searchChange" circle></el-button>
                  <el-button icon="el-icon-search" @click="searchHide" circle></el-button>
                </div>

                <el-button type="text" style="cursor: pointer" @click="handleAddWaybill(index)">
                  加入调度池
                  <el-icon><CaretRight /></el-icon>
                </el-button>
              </div>

              <!-- 列表模块 -->
              <tablecmt
                class="columnList"
                :columnList="details.columnList"
                :tableData="details.data"
                :loading="loadingObj.oldListLoading"
                @selection="selectionChange"
              >
              </tablecmt>

              <div class="avue-crud__pagination flex-c-sb" style="width: 100%">
                <!-- 分页模块 -->
                <el-pagination
                  style="zoom: 0.9"
                  align="right"
                  background
                  @size-change="sizeChange"
                  @current-change="currentChange"
                  :current-page="page.pageNum"
                  :teleported="false"
                  :page-sizes="[30, 50, 80, 120]"
                  :page-size="page.pageSize"
                  layout="total, sizes, prev, pager, next, jumper"
                  :total="page.total"
                >
                </el-pagination>
              </div>
            </div>

            <!-- 列表模块 -->
            <div style="width: 49%">
              <!-- 头部 -->
              <el-divider content-position="left">
                <span style="margin-right: 20px">{{ item.nodeName }}</span>
                <span>调度池</span>
              </el-divider>

              <!-- 搜索区域 -->
              <div v-if="!search">
                <el-form
                  :inline="true"
                  label-width="80px"
                  :model="details.newQuery"
                  class="el-fr-d"
                >
                  <div class="fo-fl">
                    <el-form-item label="关键词" class="el-times">
                      <el-input></el-input>
                    </el-form-item>
                    <el-form-item label="目的网点" class="el-times">
                      <el-input></el-input>
                    </el-form-item>
                    <el-form-item label="到站" class="el-times">
                      <el-input></el-input>
                    </el-form-item>
                    <el-form-item label="目标品类" class="el-times">
                      <el-input></el-input>
                    </el-form-item>
                    <el-form-item label="备注" class="el-times">
                      <el-input></el-input>
                    </el-form-item>
                    <el-form-item label="托盘码" class="el-times">
                      <el-input></el-input>
                    </el-form-item>
                    <el-form-item label="开单时间" class="el-times">
                      <!--            <el-input v-model="query.stockupArea" placeholder="请输入备货区"></el-input>-->
                      <el-date-picker
                        v-model="stockupDate"
                        type="daterange"
                        unlink-panels
                        range-separator="-"
                        start-placeholder="开始时间"
                        end-placeholder="结束时间"
                        :shortcuts="shortcuts"
                        clearable
                      />
                    </el-form-item>
                    <el-form-item>
                      <el-button type="primary" icon="el-icon-search" @click="searchReset()"
                        >搜 索</el-button
                      >
                      <el-button icon="el-icon-delete" @click="searchReset()">重置</el-button>
                    </el-form-item>
                  </div>
                </el-form>
              </div>

              <!-- 控件 -->
              <div style="margin-bottom: 10px" class="flex-c-sb">
                <el-button type="text" class="pointer" @click="handleRemoveWaybill">
                  <el-icon><CaretLeft /></el-icon>
                  移除调度池
                </el-button>

                <!-- 展开搜索和刷新 -->
                <div class="avue-crud__right">
                  <el-button icon="el-icon-refresh" @click="searchChange" circle></el-button>
                  <el-button icon="el-icon-search" @click="searchHide" circle></el-button>
                </div>
              </div>
              <tablecmt
                class="columnList"
                :columnList="details.newColumnList"
                :tableData="item.data"
                :loading="item.loading"
                @selection="list => item.selectionChange(list, index)"
              >
              </tablecmt>
            </div>
          </template>
        </div>
      </template>
    </div>
  </basic-container>
</template>

<script setup lang="ts">
import { ref, reactive, toRefs, computed, onMounted, nextTick } from 'vue';
import functions from '@/utils/functions';
import dayjs from 'dayjs';
import { mapGetters } from 'vuex';
/** 获取字典 */
import { getDictionaryBiz } from '@/api/system/dict';
import { downloadXls, setNodeHeight, computeNumber, isNumer } from '@/utils/util';
import {
  columnList,
  nodeInfoColumnList,
  newColumnList,
} from '@/option/distribution/addVehicleStowage';
import {
  postloadFindLoadInitData,
  postFindWarehouseListByName,
  postFindAllOrderList,
} from '@/api/distribution/AddVehicleStowage';
import { useRouter } from 'vue-router';
import { ElMessage, ElMessageBox } from 'element-plus';
import { useStore } from 'vuex';

// 获取节点信息列表, 除开节点名称
const nodeInfokeys = nodeInfoColumnList.slice(1).map(val => val.prop);

// 获取路由实例
const $router = useRouter();

// vuex 实例
const $store = useStore();

// 获取用户信息
const userInfo = computed(() => $store.state.user.userInfo);

const details = reactive<any>({
  /** 是否开启搜索 */
  search: true,
  /** 表格搜索条件 */
  query: {},
  /** 时间快捷选择设置 */
  shortcuts: [
    {
      text: '最近一周',
      value: () => {
        const end = new Date();
        const start = new Date();
        start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
        return [start, end];
      },
    },
    {
      text: '最近一个月',
      value: () => {
        const end = new Date();
        const start = new Date();
        start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
        return [start, end];
      },
    },
    {
      text: '最近三个月',
      value: () => {
        const end = new Date();
        const start = new Date();
        start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
        return [start, end];
      },
    },
  ],
  /** 时间选择器数据 */
  stockupDate: [],
  /** 订单池表头 */
  columnList,
  /** 调度池表头 */
  newColumnList,
  /** 节点信息列表表头 */
  nodeInfoColumnList,
  /** 列表数据 */
  data: [],
  /** 节点信息数据 */
  nodeInfoData: [],
  /** 页面loading */
  loadingObj: {
    /** 列表加载loading */
    list: false,
    oldListLoading: false,
    loading: false,
  },
  /** 列表复选框选中的数据 */
  selectionList: [],
  /** 是否显示设置表格 */
  drawerShow: false,
  /** 分页参数 */
  page: {
    pageNum: 1,
    pageSize: 30,
    total: 0,
  },
  /** 装车明细分页参数 */
  trickleLoadingPage: {
    pageNum: 1,
    pageSize: 30,
    total: 0,
  },
  /** 弹出层显示 */
  popUpShow: {
    /** 装车详情 */
    truckLoadingDetailVisited: false,
    /** 零担补录 */
    zeroAdditionalRecordingVisited: false,
    /** 对比报表 */
    comparativeStatementPopUp: false,
  },
  /** 列表Dom节点 */
  listNode: '',
  form: { loadingType: '2' },
  /** 零担补录信息 */
  zeroAdditionalRecordingInfo: {
    oldPage: {
      pageSize: 30,
      pageNum: 1,
      total: 0,
    },
  },
  /** 全屏 */
  fullscreenObj: {
    /** 装车明细 */
    truckLoadingDetailPopUp: false,
    comparativeStatementPopUp: false,
  },
  /** 页面信息 */
  pageInfo: {},
  options: [],
});

const {
  search,
  query,
  shortcuts,
  stockupDate,
  data,
  loadingObj,
  selectionList,
  drawerShow,
  page,
  trickleLoadingPage,
  zeroAdditionalRecordingInfo,
  popUpShow,
  form,
} = toRefs(details);

// 列表组件实例 -- 节点信息
const nodeInfoRef = ref(null);

/** vuex */
const permission = computed(() => mapGetters(['permission', 'tagWel', 'tagList']));
console.log('permission :>> ', permission);

/** 设置页面表格高度 */
const setTabelHeight = async () => {
  // 等待子组件渲染完成
  await nextTick();

  const _listNode = document.querySelectorAll('.columnList.maboxhi');

  console.log('nodeInfoRef.value.$el :>> ', nodeInfoRef.value.$el);

  // 节点信息列表高度
  setNodeHeight(nodeInfoRef.value.$el, 'auto');

  console.log('_listNode :>> ', _listNode);

  if (_listNode.length === 0) return;
  setNodeHeight(_listNode, '400px');
};

// 初始化设置列表高度
onMounted(() => {
  setTabelHeight();
});

/** 设置节点费用禁用 */
const handleEditForbidden = (_arr: []) => {
  if (_arr.length === 0) return;

  // 获取第一项 (第一项和后续项禁用项不同, 分开设置)
  const _firstChild = _arr[0];
  _firstChild.blackList = ['unloadCost', 'unloadOtherCost'];

  const _otherList = _arr.slice(1);

  // 其它项的白名单
  const _otherwhiteList = ['tollFee', 'reachTransportCost'];
  // 通过白名单筛选出黑名单
  const _otherBlackList = nodeInfokeys.filter(val => _otherwhiteList.indexOf(val) === -1);
  // 设置其他项的黑名单;
  for (let item of _otherList) {
    item.blackList = _otherBlackList;
  }

  return [_firstChild, ..._otherList];
};

/** 请求页面数据 */
const onLoad = async () => {
  const res = await postloadFindLoadInitData();
  const { code, data } = res.data;
  if (code !== 200) return;
  details.pageInfo = data;
  console.log('data.startWarehouseInfo.nodeName :>> ', data.startWarehouseInfo.nodeName);
  details.nodeInfoData = [
    {
      nodeName: data.startWarehouseInfo.warehouseName,
      warehouseId: data.startWarehouseInfo.warehouseId,
    },
  ];
  details.nodeInfoData = handleEditForbidden(details.nodeInfoData);
  console.log('details.nodeInfoData :>> ', details.nodeInfoData);
  details.form.startWarehouseName = data.startWarehouseInfo.warehouseName;
  details.form.startWarehouseId = data.startWarehouseInfo.warehouseId;
};

onLoad();

/** 查询仓库 */
const remoteMethod = async val => {
  const res = await postFindWarehouseListByName({ warehouseName: val });
  const { code, data } = res.data;
  if (code !== 200) return;
  details.options = data;
  console.log('res :>> ', res);
};

/** 目的仓选择时给目的仓名称赋值 */
const destinationWarehouseNameChange = (val, index) => {
  const _value = details.options.find(value => value.warehouseId === val);
  details.nodeInfoData[index].nodeName = _value.warehouseName;
  details.nodeInfoData[index].nodeId = _value.warehouseId;
};

const initOriginWarehouseOrder = async (params = {}) => {
  try {
    details.loadingObj.oldListLoading = true;
    const submitData = {
      ...details.page,
      loadId: details.pageInfo.startWarehouseInfo.warehouseId,
      ...details.query,
      ...params,
    };
    const res = await postFindAllOrderList(submitData);
    console.log('res :>> ', res);
    const { code, data } = res.data;
    if (code !== 200) return;
    details.data = data.records;
    details.page.total = data.total;
  } catch (error) {
    console.log('error :>> ', error);
  } finally {
    details.loadingObj.oldListLoading = false;
  }
};

/** 搜索 */
const searchChange = () => {
  onLoad(details.page);
};

/** 清空表单 */
const searchReset = () => {
  details.query = {};
  details.stockupDate = [];
  details.page.pageNum = 1;
  onLoad(details.page);
};

/** 展开列表控件 */
const showdrawer = (_flag?: boolean) => {
  details.drawerShow = _flag;
};

/** 是否开启搜索区 */
const searchHide = () => {
  details.search = !details.search;
};

/** 表格表头输入框搜索 */
const inputsc = (index, row) => {
  details.query[row.prop] = index;
  onLoad(details.page);
};

/** 表格表头时间选择 */
const timesc = (index, row) => {
  console.log(index, row);
  if (!!index) {
    index = dayjs(index).format('YYYY-MM-DD');
  }
  details.query[row.prop] = index;
  if (!index) {
    delete details.query[row.prop];
  }
  onLoad(details.page);
};

/** 表格表头输入框搜索 */
const btnsc = () => {};

/** 表格表头下拉框选择 */
const selectsc = (index, row) => {
  details.query[row.prop] = index;
  if (!index) delete details.query[row.prop];
  if (row.prop === 'certificateTypeName') {
    details.query['certificateType'] = index;
    if (!index) delete details.query['certificateType'];
  }
  onLoad(details.page);
};

/** 表格表头复选框选择 */
const selectionChange = (list: any) => {
  details.selectionList = list;
};

/** 每页数量改变执行的回调 */
const sizeChange = (pageSize: number) => {
  details.page.pageSize = pageSize;
  onLoad(details.page);
};

/** 页码改变执行的回调 */
const currentChange = () => {};

/**
 * 设置列表 -- 固定函数
 * 弹窗的勾选回调，用于更改头部数组
 * 固定搭配，只需要更换   columnList
 *  */
const setnewcolum = (newarr, headarr, type) => {
  if (type == 1) {
    details.columnList = newarr;
    functions.setStorage(window.location.pathname + 'checkList', headarr);
  } else if (type == 2) {
    details.columnList = newarr;
    functions.setStorage(window.location.pathname + 'flexList', headarr);
  } else if (type == 3) {
    details.columnList = newarr;
    functions.setStorage(window.location.pathname + 'sortlist', headarr);
  }
};

/** 弹出层开启前清除数据 */
const beforeClose = done => {
  done();
  details.form = {};
  details.view = false;
};

/**
 * 是否开启床车明细全屏
 * @params(_type) 开启或关闭
 */
const handleFullScrean = (_type: 'open' | 'close', _name: string) => {
  let _node = '';
  if (_name) _node = document.querySelectorAll(`.${_name} .maboxhi`);
  console.log('_node :>> ', _node);

  switch (_name) {
    case 'comparativeStatementPopUp':
      details.fullscreenObj.comparativeStatementPopUp =
        !details.fullscreenObj.comparativeStatementPopUp;
      break;

    default:
      details.fullscreenObj[_name] = !details.fullscreenObj[_name];
      if (_type === 'close') {
        if (_node) setNodeHeight(_node, '500px');
      } else {
        if (_node) setNodeHeight(_node);
      }
      break;
  }
};

/** 新增车辆 */
const handleAddCar = () => {
  $router.push('/basicdata/vehicle/basicdataVehicle');
};

/** 新增司机 */
const handleAddDriver = () => {
  $router.push('/basicdata/driverArtery/basicdataDriverArtery');
};

/** 计算合计 */
let timer = null;
const handleComputedNum = () => {
  if (timer) clearTimeout(timer);

  timer = setTimeout(() => {
    let _totalNum = 0;

    for (let item of details.nodeInfoData) {
      for (let index = 0; index < nodeInfokeys.length; index++) {
        const _key = nodeInfokeys[index];
        let _number = item[_key];
        // 检测是否为数字
        if (!isNumer(_number)) _number = 0;
        _totalNum = computeNumber(_totalNum, '+', _number).result;
      }
    }

    details.form.countTransportCost = _totalNum;
    // 清除定时器
    clearTimeout(timer);
  }, 1000);
};
// 初始化计算
handleComputedNum();

/** 新增目的仓 */
const handleAddNode = () => {
  const _flag = details.nodeInfoData.every(val => val.nodeName);
  if (!_flag) {
    return ElMessage({
      type: 'warning',
      message: '请选择节点仓库',
    });
  }

  details.nodeInfoData.push({
    // 筛选
    query: {},
    // 复选框
    selectionList: [],
    // 参数
    data: [],
    filterData: [],
    loading: false,
    selectionChange(list, index) {
      details.nodeInfoData[index].selectionList = list;
      console.log('list :>> ', list);
    },
  });
  details.nodeInfoData = handleEditForbidden(details.nodeInfoData);
  // 始发仓没有数据时, 请求数据
  if (details.data.length === 0) initOriginWarehouseOrder();
  setTabelHeight();
};

/** 删除目的仓 */
const handleDelNode = (index: number) => {
  details.nodeInfoData.splice(index, 1);

  setTabelHeight();
};

/** 加入调度池 */
const handleAddWaybill = (index: number) => {
  const _node = details.nodeInfoData[index];
  if (!_node.nodeName || !_node.nodeId) {
    return ElMessage({
      type: 'warning',
      message: '未选择目的仓或目的仓信息异常',
    });
  }
  details.nodeInfoData[index].data = details.selectionList;
};

/** 移除调度池 */
const handleRemoveWaybill = (index: number) => {
  const _node = details.nodeInfoData[index];
  if (!_node.nodeName || !_node.nodeId) {
    return ElMessage({
      type: 'warning',
      message: '未选择目的仓或目的仓信息异常',
    });
  }
};
</script>

<style scoped lang="scss">
.fo-fl {
  display: flex;
  flex-wrap: wrap;
  zoom: 0.9;
}

// 日期选择器
:deep(.el-date-editor.el-input) {
  height: 100% !important;
  width: 100% !important;
}

:deep(.el-range-editor.el-input__wrapper) {
  height: 100% !important;
}

.fwb {
  font-weight: bold;
}

// 弹出层标题
.popUp_title {
  font-size: 18px;
  font-weight: bold;
  padding: 5px 20px;
  position: relative;
  margin: 20px 0;

  &:first-child {
    margin-top: 0;
  }

  &::before {
    width: 4px;
    height: 100%;
    background: #172e60;
    content: '';
    display: inline-block;
    position: absolute;
    top: 0;
    left: 0;
  }
}
.red {
  color: var(--token-simulation-red-base-62);
}

.w100 {
  width: 100%;
}

// 标题
:deep(.el-divider__text.is-left) {
  font-size: 20px;
  font-weight: bold;
  color: var(--el-color-primary);
}

// 表单行
.form_row {
  display: flex;
  align-items: center;

  .form_row_item {
    display: flex;
    margin-right: 20px;

    :deep(.el-form-item.asterisk-left) {
      margin-right: 10px;
    }
  }
}

// 单选框
:deep(.el-radio.el-radio--large) {
  height: auto;
}

// 数字输入框
:deep(.nodeInfo .el-table .cell) {
  overflow: initial;
}

:deep(.slotbuts) {
  height: 35px;

  .el-input-number {
    height: 100%;
  }
}

:deep(.el-steps) {
  --el-color-success: #1a3061;
}

.count_icon {
  --width: 25px;
  margin-right: 20px;
  width: var(--width);
  height: var(--width);
  background: var(--el-color-primary);
  color: #fff;
  border-radius: 50%;
  text-align: center;
  line-height: var(--width);
}

.steps_title {
  margin-right: 30px;
}

// 步骤条
:deep(.el-steps) {
  flex-wrap: wrap;
}

:deep(.el-step.is-horizontal) {
  max-width: none !important;
}

// 新增行
.add_row {
  display: flex;
  justify-content: space-between;
}
</style>
