yos_web/src/optionSystem/valveOption/DieFa.vue

<template>
  <div style="display: flex; height: calc(100vh - 120px)">
    <Aside
        :resultArr="resultArr"
        :fujianArr="fujianArr"
        @refresh="resultRefresh"
    ></Aside>
    <div class="drawer__panel">
      <div class="my-steps">
        <a-steps :current="active - 1" style="margin-bottom: 10px">
          <a-step
              :title="$t(item.title)"
              v-for="(item, index) in items"
              :key="index"
          >
            <i
                slot="icon"
                class="iconfont"
                style="font-size: 32px; color: #3874f6 !important"
                v-if="active > index + 1"
            >&#xe6fd;</i
            >
          </a-step>
        </a-steps>
      </div>
      <!--选光头-->
      <div class="dialog-content" v-show="active == 1">
        <div class="option-line">
          <MySelect
              type="radius"
              :isClear="false"
              :options="[
              { remarks: '自动选配', value: '自动选配' },
              { remarks: '手动输入', value: '手动输入' },
            ]"
              v-model="mode"
          ></MySelect>
        </div>
        <div v-show="mode == '自动选配'">
          <div class="option-line">
            <div class="item">
              <div class="label">{{ $t("搜索") }}:</div>
              <el-input
                  :placeholder="$t(`名称/料号`)"
                  v-model="guangtouParam.content.where.condition"
                  clearable
                  @clear="Search('guangtouParam')"
                  size="small"
                  @keyup.enter.native="Search('guangtouParam')"
              >
              </el-input>
            </div>
          </div>
          <div class="option-line">
            <div class="item">
              <div class="label">{{ $t("驱动方式") }}:</div>
              <MySelect
                  :isClear="false"
                  @click="
                  ($event) => {
                    guangtouChange($event);
                    Search('guangtouParam', 'drivetype');
                  }
                "
                  :options="drivetype"
                  v-model="guangtouParam.content.where.drivetype"
              ></MySelect>
            </div>
          </div>
          <div class="option-line">
            <div class="item">
              <div class="label">{{ $t("公称通径") }}:</div>
              <el-select
                  filterable
                  v-model="guangtouParam.content.where.caliber"
                  :placeholder="$t(`请选择公称通径`)"
                  size="small"
                  style="width: 100%"
                  clearable
                  @change="Search('guangtouParam', 'caliber')"
              >
                <el-option
                    v-for="item in caliber"
                    :key="item.value"
                    :value="item.value"
                    :label="$t(item.value)"
                ></el-option>
              </el-select>
            </div>
            <div class="item">
              <div class="label">{{ $t("公称压力") }}:</div>
              <el-select
                  filterable
                  @change="Search('guangtouParam', 'nominalpressure')"
                  :disabled="!guangtouParam.content.where.caliber"
                  v-model="guangtouParam.content.where.nominalpressure"
                  :placeholder="$t(`请选择公称压力`)"
                  size="small"
                  style="width: 100%"
                  clearable
              >
                <el-option
                    v-for="item in nominalpressure"
                    :key="item.value"
                    :value="item.value"
                    :label="$t(item.remarks)"
                ></el-option>
              </el-select>
            </div>
          </div>
          <div class="option-line">
            <div class="item">
              <div class="label">{{ $t("连接方式") }}:</div>
              <MySelect
                  @click="Search('guangtouParam', 'connection')"
                  :disabled="!guangtouParam.content.where.nominalpressure"
                  :options="connection"
                  v-model="guangtouParam.content.where.connection"
              ></MySelect>
            </div>
          </div>
          <div class="option-line">
            <div class="item">
              <div class="label">{{ $t("阀体材质") }}:</div>
              <el-select
                  filterable
                  @change="Search('guangtouParam', 'bodymaterial')"
                  :disabled="!guangtouParam.content.where.connection"
                  v-model="guangtouParam.content.where.bodymaterial"
                  :placeholder="$t(`请选择阀体材质`)"
                  size="small"
                  style="width: 100%"
                  clearable
              >
                <el-option
                    v-for="item in bodymaterial"
                    :key="item.value"
                    :value="item.value"
                    :label="$t(item.remarks)"
                ></el-option>
              </el-select>
            </div>
            <div class="item">
              <div class="label">{{ $t("阀杆材质") }}:</div>
              <el-select
                  filterable
                  @change="Search('guangtouParam', 'stemmaterial')"
                  :disabled="!guangtouParam.content.where.bodymaterial"
                  v-model="guangtouParam.content.where.stemmaterial"
                  :placeholder="$t(`请选择阀杆材质`)"
                  size="small"
                  style="width: 100%"
                  clearable
              >
                <el-option
                    v-for="item in stemmaterial"
                    :key="item.value"
                    :value="item.value"
                    :label="$t(item.remarks)"
                ></el-option>
              </el-select>
            </div>
            <div class="item">
              <div class="label">{{ $t("阀座材质") }}:</div>
              <el-select
                  filterable
                  @change="Search('guangtouParam', 'plinthmaterial')"
                  :disabled="!guangtouParam.content.where.stemmaterial"
                  v-model="guangtouParam.content.where.plinthmaterial"
                  :placeholder="$t(`请选择阀座材质`)"
                  size="small"
                  style="width: 100%"
                  clearable
              >
                <el-option
                    v-for="item in plinthmaterial"
                    :key="item.value"
                    :value="item.value"
                    :label="$t(item.remarks)"
                ></el-option>
              </el-select>
            </div>
          </div>
          <!--光头-->
          <MyTable
              :height="tableHeight"
              ref="guangtouRef"
              fixedName="operation"
              :layout="tool.tabelCol($route.name)['guangtouTable'].tablecols"
              :param="guangtouParam"
              :opwidth="200"
              :custom="true"
              style="margin-top: 14px"
          >
            <template v-slot:customcol="scope">
              <span v-if="scope.column.columnname != 'operation'">{{
                  $t(scope.column.data[scope.column.columnname])
                }}</span>
            </template>
            <template v-slot:opreation="scope">
              <el-button
                  type="text"
                  size="mini"
                  @click="selectTarget(scope.data, '主阀')"
                  :disabled="!guangtouParam.content.where.drivetype"
              >{{ $t("选择") }}</el-button
              >
            </template>
          </MyTable>
        </div>

        <div class="write" style="margin-top: 10px" v-show="mode == '手动输入'">
          <el-row :gutter="10">
            <el-form
                :model="guangtouParam.content.where"
                ref="ruleForm"
                :label-width="tool.onlyZh('130px')"
            >
              <el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="6">
                <el-form-item
                    :label="$t(`驱动方式`) + ':'"
                    prop="drivetype"
                    :rules="{
                    required: true,
                    message: $t('请选择驱动方式'),
                    trigger: 'blur',
                  }"
                >
                  <el-select
                      filterable
                      v-model="guangtouParam.content.where.drivetype"
                      :placeholder="$t(`请选择驱动方式`)"
                      size="small"
                      style="width: 100%"
                  >
                    <el-option
                        v-for="item in drivetype"
                        :key="item.value"
                        :value="item.value"
                        :label="$t(item.remarks)"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="6">
                <el-form-item
                    :label="$t(`扭矩`) + ':'"
                    prop="torque"
                    :rules="{
                    required: true,
                    message: $t('请输入扭矩'),
                    trigger: 'blur',
                  }"
                >
                  <el-input
                      v-model="guangtouParam.content.where.torque"
                      size="small"
                      :placeholder="$t(`请输入扭矩`)"
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="6">
                <el-form-item
                    :label="$t(`法兰号`) + ':'"
                    prop="flh"
                    :rules="{
                    required: true,
                    message: $t('请选择法兰号'),
                    trigger: 'blur',
                  }"
                >
                  <el-select
                      filterable
                      v-model="guangtouParam.content.where.flh"
                      :placeholder="$t(`请选择法兰号`)"
                      size="small"
                      style="width: 100%"
                  >
                    <el-option
                        v-for="item in flh"
                        :key="item.value"
                        :value="item.value"
                        :label="$t(item.remarks)"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col
                  :xs="12"
                  :sm="12"
                  :md="12"
                  :lg="12"
                  :xl="6"
                  v-if="!guangtouParam.content.where.maxrounddiameter"
              >
                <el-form-item
                    :label="$t(`方阀杆最大宽度`) + ':'"
                    prop="maxsquarewidth"
                    :rules="{
                    required: true,
                    message: $t('请输入方阀杆最大宽度'),
                    trigger: 'blur',
                  }"
                >
                  <el-input
                      size="small"
                      v-model="guangtouParam.content.where.maxsquarewidth"
                      :placeholder="$t(`请输入方阀杆最大宽度`)"
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col
                  :xs="12"
                  :sm="12"
                  :md="12"
                  :lg="12"
                  :xl="6"
                  v-if="!guangtouParam.content.where.maxsquarewidth"
              >
                <el-form-item
                    :label="$t(`圆阀杆最大直径`) + ':'"
                    prop="maxrounddiameter"
                    :rules="{
                    required: true,
                    message: $t('请输入圆阀杆最大直径'),
                    trigger: 'blur',
                  }"
                >
                  <el-input
                      size="small"
                      v-model="guangtouParam.content.where.maxrounddiameter"
                      :placeholder="$t(`请输入圆阀杆最大直径`)"
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="6">
                <el-form-item :label="$t(`公称通径`) + ':'" prop="caliber">
                  <el-select
                      filterable
                      v-model="guangtouParam.content.where.caliber"
                      :placeholder="$t(`请选择公称通径`)"
                      size="small"
                      style="width: 100%"
                      clearable=""
                  >
                    <el-option
                        v-for="item in caliber"
                        :key="item.value"
                        :value="item.value"
                        :label="$t(item.value)"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="6">
                <el-form-item
                    :label="$t(`公称压力`) + ':'"
                    prop="nominalpressure"
                >
                  <el-select
                      filterable
                      v-model="guangtouParam.content.where.nominalpressure"
                      :placeholder="$t(`请选择公称压力`)"
                      size="small"
                      style="width: 100%"
                      clearable=""
                  >
                    <el-option
                        v-for="item in nominalpressure"
                        :key="item.value"
                        :value="item.value"
                        :label="$t(item.remarks)"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-form>
          </el-row>
        </div>
      </div>
      <!--选执行器-->
      <div class="dialog-content" v-show="active == 2">
        <div class="option-line">
          <div class="item">
            <div class="label">{{ $t("执行器") }}:</div>
            <el-input
                :placeholder="$t(`型号/料号`)"
                v-model="excelParam.content.where.condition1"
                clearable
                @clear="Search('excelParam')"
                size="small"
                @keyup.enter.native="Search('excelParam')"
            >
            </el-input>
          </div>

          <div
              class="item"
              v-if="guangtouParam.content.where.drivetype != '气动'"
          >
            <div class="label">{{ $t("减速箱") }}:</div>
            <el-input
                :placeholder="$t(`型号/料号`)"
                v-model="excelParam.content.where.condition2"
                clearable
                @clear="Search('excelParam')"
                size="small"
                @keyup.enter.native="Search('excelParam')"
            >
            </el-input>
          </div>
        </div>
        <div
            class="option-line"
            v-if="guangtouParam.content.where.drivetype == '气动'"
        >
          <div class="item">
            <div class="label">{{ $t("驱动方式") }}:</div>
            <MySelect
                :isClear="false"
                :options="[
                { remarks: '气动调节', value: '气动调节' },
                { remarks: '气动开关', value: '气动开关' },
              ]"
                v-model="excelParam.content.where.drivetype"
            ></MySelect>
          </div>
        </div>
        <div
            class="option-line"
            v-if="guangtouParam.content.where.drivetype == '电动'"
        >
          <div class="item">
            <div class="label">{{ $t("驱动方式") }}:</div>
            <MySelect
                @click="
                Search('excelParam', 'actuatordrivetype');
                calcTableHieght('excelRef');
              "
                :options="[
                { remarks: '电动开关', value: '电动开关' },
                { remarks: '电动调节', value: '电动调节' },
              ]"
                v-model="excelParam.content.where.actuatordrivetype"
            ></MySelect>
          </div>
        </div>
        <div
            class="option-line"
            v-if="guangtouParam.content.where.drivetype == '电动'"
        >
          <div class="item">
            <div class="label">{{ $t("品牌") }}:</div>
            <MySelect
                @click="
                Search('excelParam', 'actuatorbrand');
                calcTableHieght('excelRef');
              "
                :disabled="!excelParam.content.where.actuatordrivetype"
                :options="actuatorbrand"
                v-model="excelParam.content.where.actuatorbrand"
            ></MySelect>
          </div>
        </div>
        <div class="option-line" v-else>
          <div class="item">
            <div class="label">{{ $t("品牌") }}:</div>
            <MySelect
                @click="Search('excelParam', 'actuatorbrand')"
                :options="actuatorbrand"
                v-model="excelParam.content.where.actuatorbrand"
            ></MySelect>
          </div>
        </div>
        <div
            v-if="
            guangtouParam.content.where.drivetype == '电动' &&
            excelParam.content.where.actuatorbrand &&
            actuatorname.length
          "
        >
          <div class="option-line">
            <div class="item">
              <div class="label" style="width: 80px">
                {{ $t("执行器类型") }}:
              </div>
              <span
                  style="font-size: 14px; font-weight: bold; color: #3874f6"
              >{{ $t(excelParam.content.where.actuatorname) || "--" }}</span
              >
            </div>
          </div>
          <SelectBar
              style="margin: 20px 0"
              v-model="excelParam.content.where.actuatorname"
              :options="
              actuatorname.map((v) => {
                return {
                  url: v.url,
                  remarks: v.remarks.split('-').pop(),
                  value: v.remarks,
                };
              })
            "
              @change="Search('excelParam', 'actuatorname')"
          ></SelectBar>
        </div>
        <div
            class="option-line"
            v-if="guangtouParam.content.where.drivetype == '电动'"
        >
          <div class="item">
            <div class="label">{{ $t("电源电压") }}:</div>
            <MySelect
                @click="Search('excelParam', 'supplyvoltage')"
                :disabled="!excelParam.content.where.actuatorname"
                :options="supplyvoltage"
                v-model="excelParam.content.where.supplyvoltage"
            ></MySelect>
          </div>
          <div class="item">
            <div class="label">{{ $t("信号类型") }}:</div>
            <MySelect
                @click="Search('excelParam', 'actuatorsignal')"
                :disabled="!excelParam.content.where.supplyvoltage"
                :options="actuatorsignal"
                v-model="excelParam.content.where.actuatorsignal"
            ></MySelect>
          </div>
        </div>
        <!-- <div class="option-line">
                <div class="item">
                    <div class="label" style="width: 75px;">{{$t('执行器类型')}}:</div>
                    <el-select filterable @change="Search('excelParam','actuatorname')" :disabled="!excelParam.content.where.actuatorbrand" v-model="excelParam.content.where.actuatorname" :placeholder="$t(`请选择执行器类型`)" size="small" style="width:100%" clearable>
                        <el-option v-for="item in actuatorname" :key="item.value" :value="item.value" :label="$t(item.remarks)"></el-option>
                    </el-select>
                </div>
            </div> -->
        <div
            class="option-line"
            v-show="guangtouParam.content.where.drivetype == '气动'"
        >
          <div class="item">
            <div class="label">{{ $t("功能") }}:</div>
            <MySelect
                :disabled="!excelParam.content.where.actuatorname"
                @click="Search('excelParam', 'func')"
                :options="func"
                v-model="excelParam.content.where.func"
            ></MySelect>
          </div>
        </div>

        <div
            class="option-line"
            v-show="guangtouParam.content.where.drivetype == '气动'"
        >
          <div class="item">
            <div class="label">{{ $t("结构") }}:</div>
            <MySelect
                :disabled="!excelParam.content.where.func"
                @click="Search('excelParam', 'bodystructure')"
                :options="bodystructure"
                v-model="excelParam.content.where.bodystructure"
            ></MySelect>
          </div>
        </div>
        <div
            class="tips"
            v-if="
            guangtouParam.content.where.drivetype == '电动' && resultArr.length
          "
            style="color: #3874f6; margin-top: 10px"
        >
          <i class="el-icon-warning" style="margin-right: 5px"></i
          >{{ $t("建议开关阀时间")
          }}{{
            caliber.filter((v) => v.value == resultArr[0].caliber).length
                ? caliber
                    .filter((v) => v.value == resultArr[0].caliber)[0]
                    .remarks.split(";")[0]
                : "-"
          }}{{ $t("秒") }}
        </div>
        <!--执行器-->
        <div v-if="guangtouParam.content.where.drivetype == '电动'">
          <MyTable
              fixedName="operation"
              :height="tableHeight"
              :noQuery="true"
              ref="excelRef"
              :layout="tool.tabelCol($route.name)['excelTable1'].tablecols"
              :param="excelParam"
              :custom="true"
              style="margin-top: 14px"
          >
            <template v-slot:customcol="scope">
              <span
                  v-if="scope.column.columnname == 'matchratio'"
                  style="color: red"
              >{{ $t(scope.column.data[scope.column.columnname]) }}</span
              >
              <span v-else-if="scope.column.columnname == 'maxsquarewidth'">{{
                  scope.column.data[scope.column.columnname].join(",")
                }}</span>
              <span v-else-if="scope.column.columnname != 'operation'">{{
                  $t(scope.column.data[scope.column.columnname])
                }}</span>
            </template>
            <template v-slot:opreation="scope">
              <el-button
                  type="text"
                  size="mini"
                  @click="selectTarget(scope.data, '执行器')"
                  :disabled="
                  loading ||
                  (guangtouParam.content.where.drivetype == '电动' &&
                    resultArr.length == 2)
                "
              >{{ $t("选择") }}</el-button
              >
            </template>
          </MyTable>
        </div>
        <MyTable
            v-else
            :height="tableHeight"
            fixedName="operation"
            :noQuery="true"
            ref="excelRef"
            :layout="tool.tabelCol($route.name)['excelTable2'].tablecols"
            :param="excelParam"
            :custom="true"
            style="margin-top: 14px"
        >
          <template v-slot:customcol="scope">
            <span
                v-if="scope.column.columnname == 'matchratio'"
                style="color: red"
            >{{ $t(scope.column.data[scope.column.columnname]) }}</span
            >
            <span v-else-if="scope.column.columnname == 'maxsquarewidth'">{{
                scope.column.data[scope.column.columnname].join(",")
              }}</span>
            <span v-else-if="scope.column.columnname != 'operation'">{{
                $t(scope.column.data[scope.column.columnname])
              }}</span>
          </template>
          <template v-slot:opreation="scope">
            <el-button
                type="text"
                size="mini"
                @click="selectTarget(scope.data, '执行器')"
                :disabled="
                loading ||
                (guangtouParam.content.where.drivetype == '电动' &&
                  resultArr.length == 2)
              "
            >{{ $t("选择") }}</el-button
            >
          </template>
        </MyTable>
      </div>
      <!--选辅件-->
      <div class="dialog-content" v-show="active == 3">
        <MyTable
            :noQuery="true"
            ref="fujianRef"
            fixedName="operation"
            :height="tableHeight"
            :layout="tool.tabelCol($route.name)['itemList'].tablecols"
            :param="fujianParam"
            :opwidth="200"
            :custom="true"
            style="margin-top: 14px"
        >
          <template v-slot:customcol="scope">
            <span v-if="scope.column.columnname != 'operation'">{{
                $t(scope.column.data[scope.column.columnname])
              }}</span>
          </template>
          <template v-slot:opreation="scope">
            <el-button
                type="text"
                size="mini"
                @click="selectTarget(scope.data, '辅件')"
                :disabled="loading"
            >{{ $t("选择") }}</el-button
            >
          </template>
        </MyTable>
      </div>
      <div class="dialog-content" v-if="active == 4">
        <table
            bgcolor="#FAFAFA"
            cellpadding="0"
            style="width: 100%"
            class="result"
        >
          <tr style="width: 100px">
            <td class="title">{{ $t("光头") }}</td>
            <td>
              <div class="text1" style="margin-bottom: 8px">
                <el-tag
                    style="margin-right: 10px"
                    size="small"
                    type="warning"
                >{{ resultArr[0] && resultArr[0].actuatorbrand }}</el-tag
                >
                <span style="margin-bottom: 8px">{{
                    resultArr[0] && resultArr[0].itemname
                  }}</span>
              </div>
              <div class="descript">
                <div
                    class="item"
                    v-if="resultArr.length && resultArr[0].itemno"
                >
                  <span style="color: #888888">{{ $t("料号") }}：</span
                  >{{ resultArr[0].itemno }}
                </div>
                <div
                    class="item"
                    v-if="resultArr.length && resultArr[0].torque"
                >
                  <span style="color: #888888">{{ $t("扭矩") }}：</span
                  >{{ resultArr[0].torque }}
                </div>
                <div class="item" v-if="resultArr.length && resultArr[0].flh">
                  <span style="color: #888888">{{ $t("法兰号") }}：</span
                  >{{ resultArr[0].flh }}
                </div>
                <div
                    class="item"
                    v-if="resultArr.length && resultArr[0].caliber"
                >
                  <span style="color: #888888">{{ $t("公称通径") }}：</span
                  >{{ resultArr[0].caliber }}
                </div>
                <div
                    class="item"
                    v-if="resultArr.length && resultArr[0].nominalpressure"
                >
                  <span style="color: #888888">{{ $t("公称压力") }}：</span
                  >{{ resultArr[0].nominalpressure.join(",") }}
                </div>
                <div
                    class="item"
                    v-if="resultArr.length && resultArr[0].stemmaterial"
                >
                  <span style="color: #888888">{{ $t("阀杆材质") }}：</span
                  >{{ resultArr[0].stemmaterial }}
                </div>
                <div
                    class="item"
                    v-if="resultArr.length && resultArr[0].mainmaterial"
                >
                  <span style="color: #888888">{{ $t("主体材质") }}：</span
                  >{{ resultArr[0].mainmaterial }}
                </div>
              </div>
            </td>
          </tr>
          <tr>
            <td class="title">{{ $t("执行器") }}</td>
            <td>
              <div class="text1" style="margin-bottom: 8px">
                <el-tag
                    style="margin-right: 10px"
                    size="small"
                    type="warning"
                >{{ resultArr[1] && resultArr[1].actuatorbrand }}</el-tag
                >
                <span style="margin-bottom: 8px"
                >{{ resultArr[1] && resultArr[1].actuatormodel }}
                  {{
                    guangtouParam.content.where.drivetype == "电动" &&
                    resultArr[1] &&
                    resultArr[1].gearboxname
                        ? ` + ${$t('减速箱')}：${resultArr[1] && resultArr[1].gearboxname}`
                        : ""
                  }}</span
                >
              </div>
              <div class="descript">
                <div
                    class="item"
                    v-if="resultArr.length >= 2 && resultArr[1].actuatorno"
                >
                  <span style="color: #888888">{{ $t("执行器料号") }}：</span
                  >{{ resultArr[1].actuatorno }}
                </div>
                <div
                    class="item"
                    v-if="resultArr.length >= 2 && resultArr[1].actuatorname"
                >
                  <span style="color: #888888">{{ $t("执行器名称") }}：</span
                  >{{ resultArr[1].actuatorname }}
                </div>
                <div
                    class="item"
                    v-if="resultArr.length >= 2 && resultArr[1].actuatortype"
                >
                  <span style="color: #888888">{{ $t("执行器类型") }}：</span
                  >{{ resultArr[1].actuatortype }}
                </div>
                <div
                    class="item"
                    v-if="resultArr.length >= 2 && resultArr[1].flh.length"
                >
                  <span style="color: #888888">{{ $t("法兰号") }}：</span
                  >{{ resultArr[1].flh.join(",") }}
                </div>
                <div
                    class="item"
                    v-if="resultArr.length >= 2 && resultArr[1].bodystructure"
                >
                  <span style="color: #888888">{{ $t("执行器结构") }}：</span
                  >{{ resultArr[1].bodystructure }}
                </div>
                <div
                    class="item"
                    v-if="resultArr.length >= 2 && resultArr[1].torque"
                >
                  <span style="color: #888888">{{ $t("输出扭矩") }}：</span
                  >{{ resultArr[1].torque }}(Nm)
                </div>
                <div
                    class="item"
                    v-if="resultArr.length >= 2 && resultArr[1].maxruntime"
                >
                  <span style="color: #888888">{{ $t("开关时间") }}：</span
                  >{{ resultArr[1].maxruntime }}(s)
                </div>
                <div
                    class="item"
                    v-if="resultArr.length >= 2 && resultArr[1].speed"
                >
                  <span style="color: #888888">{{ $t("转速") }}：</span
                  >{{ resultArr[1].speed }}(rpm)
                </div>
                <div
                    class="item"
                    v-if="resultArr.length >= 2 && resultArr[1].handwheelratio"
                >
                  <span style="color: #888888">{{ $t("减速比") }}：</span
                  >{{ resultArr[1].ratio }}
                </div>
                <div
                    class="item"
                    v-if="resultArr.length >= 2 && resultArr[1].supplyvoltage"
                >
                  <span style="color: #888888">{{ $t("电压") }}：</span
                  >{{ resultArr[1].supplyvoltage }}(V)
                </div>
                <div
                    class="item"
                    v-if="resultArr.length >= 2 && resultArr[1].ratedcurrent"
                >
                  <span style="color: #888888">{{ $t("电流") }}：</span
                  >{{ resultArr[1].ratedcurrent }}(A)
                </div>
                <div
                    class="item"
                    v-if="resultArr.length >= 2 && resultArr[1].ratedpower"
                >
                  <span style="color: #888888">{{ $t("功率") }}：</span
                  >{{ resultArr[1].ratedpower }}(KW)
                </div>
                <div
                    class="item"
                    v-if="
                    resultArr.length >= 2 &&
                    resultArr[1].actuatorsignal_choose
                  "
                >
                  <span style="color: #888888">{{ $t("信号类型") }}：</span
                  >{{ resultArr[1].actuatorsignal_choose }}
                </div>
              </div>
            </td>
          </tr>
          <tr v-if="fujianArr.length">
            <td class="title">{{ $t("辅件") }}</td>
            <td style="padding: 0">
          <tr style="border-bottom: 1px solid #dddddd" class="custom-table">
            <div>{{ $t("定位器") }}</div>
            <div class="text1">
              <el-tag
                  style="margin-right: 10px"
                  size="small"
                  type="warning"
                  v-if="
                      fujianArr.filter((item) => item.itemname == '定位器')
                        .length
                    "
              >{{
                  fujianArr.filter((item) => item.itemname == "定位器")[0]
                      .actuatorbrand
                }}</el-tag
              >
              <span>{{
                  fujianArr.filter((item) => item.itemname == "定位器").length
                      ? fujianArr.filter((item) => item.itemname == "定位器")[0]
                          .model
                      : "-"
                }}</span>
            </div>
            <div>{{ $t("电磁阀") }}</div>
            <div class="text1">
              <el-tag
                  style="margin-right: 10px"
                  size="small"
                  type="warning"
                  v-if="
                      fujianArr.filter((item) => item.itemname == '电磁阀')
                        .length
                    "
              >{{
                  fujianArr.filter((item) => item.itemname == "电磁阀")[0]
                      .actuatorbrand
                }}</el-tag
              >
              <span>{{
                  fujianArr.filter((item) => item.itemname == "电磁阀").length
                      ? fujianArr.filter((item) => item.itemname == "电磁阀")[0]
                          .model
                      : "-"
                }}</span>
            </div>
          </tr>

          <tr class="custom-table">
            <div>{{ $t("限位开关") }}</div>
            <div class="text1">
              <el-tag
                  style="margin-right: 10px"
                  size="small"
                  type="warning"
                  v-if="
                      fujianArr.filter((item) => item.itemname == '限位开关')
                        .length
                    "
              >{{
                  fujianArr.filter((item) => item.itemname == "限位开关")[0]
                      .actuatorbrand
                }}</el-tag
              >
              <span>{{
                  fujianArr.filter((item) => item.itemname == "限位开关")
                      .length
                      ? fujianArr.filter(
                          (item) => item.itemname == "限位开关"
                      )[0].model
                      : "-"
                }}</span>
            </div>
            <div>{{ $t("过滤减压阀") }}</div>
            <div class="text1">
              <el-tag
                  style="margin-right: 10px"
                  size="small"
                  type="warning"
                  v-if="
                      fujianArr.filter((item) => item.itemname == '过滤减压阀')
                        .length
                    "
              >{{
                  fujianArr.filter(
                      (item) => item.itemname == "过滤减压阀"
                  )[0].actuatorbrand
                }}</el-tag
              >
              <span>{{
                  fujianArr.filter((item) => item.itemname == "过滤减压阀")
                      .length
                      ? fujianArr.filter(
                          (item) => item.itemname == "过滤减压阀"
                      )[0].model
                      : "-"
                }}</span>
            </div>
          </tr>
          </td>
          </tr>
          <tr>
            <td class="title">{{ $t("成品料号") }}</td>
            <td class="text1">
              {{ Object.keys(product).length ? product.itemno || "-" : "" }}
            </td>
          </tr>

          <tr>
            <td class="title" style="padding: 0" colspan="2">
          <tr class="price-tr">
            <td class="title" style="width: 120px !important">
              {{ $t(product.itemno ? "牌价" : "最低经销价") }}
            </td>
            <td class="text2">
              ￥{{
                Object.keys(product).length
                    ? tool.formatAmount(product.price, 2)
                    : "xxxxxx"
              }}
              <div style="color:#1C1919;font-weight: normal;font-size: 12px;">*{{$t('非标准产品，当前价格仅供参考')}}!</div>
            </td>
            <td class="title">{{$t('成本价格')}}</td>
            <td class="text2">
              ￥{{
                Object.keys(product).length
                    ? tool.formatAmount(product.marketprice, 2)
                    : "xxxxxx"
              }}
            </td>
          </tr>
          </td>
          </tr>
        </table>
      </div>
      <div
          class="fixed__btn__panel"
          v-if="(active == 1 && mode == '手动输入') || active == 3 || active == 4"
      >
        <el-button
            size="small"
            type="primary"
            @click="next"
            class="normal-btn-width"
            v-if="active == 1 && mode == '手动输入'"
        >{{$t('下一步')}}</el-button
        >
        <el-button
            size="small"
            type="primary"
            @click="close"
            class="normal-btn-width"
            v-if="active == 4"
        >{{$t('完成')}}</el-button
        >
      </div>
    </div>
  </div>
</template>

<script>
import "@/optionSystem/valveOption/index.css";
import MySelect from "@/optionSystem/FProductManage/modules/select.vue";
import MyTable from "@/optionSystem/FProductManage/modules/table.vue";
import SelectBar from "@/optionSystem/FProductManage/modules/selectBar.vue";
import Aside from "@/optionSystem/FProductManage/modules/aside.vue";
export default {
  props: ["position"],
  components: { MySelect, MyTable, SelectBar, Aside },
  data() {
    return {
      items: [
        { title: "选光头", value: "光头" },
        { title: "选执行器", value: "执行器" },
        { title: "选辅件", value: "辅件" },
        { title: "确认配置", value: "配置" },
      ],
      mode: "自动选配",
      active: 1,
      tableHeight: "400px",
      excel: "",
      gangtou: "",
      resultArr: [],
      caliber: [],
      nominalpressure: [],
      connection: [],
      bodymaterial: [],
      stemmaterial: [],
      plinthmaterial: [],
      actuatorbrand: [],
      actuatorname: [],
      actuatordrivetype: [],
      actuatorsignal: [],
      supplyvoltage: [],
      flh: [],
      drivetype: [],
      bodystructure: [],
      func: [],
      guangtouList: [],
      isFujianShow: false, //辅件是否显示
      form: {
        itemid: 0,
        plm_itemextendid: 0,
        valvetype: "蝶阀", //阀门类型（固定）
        itemno: "", //产品编码（必填，唯一）
        itemname: "", //产品名称（必填）
        erpitemno: "", //erp品号（必填）
        erpitemname: "", //erp品名（必填）
        spec: "", //规格尺寸（必填）
        model: "", //型号（必填）
        material: "", //材质（必填，选项）
        marketprice: "",
        caliber: "", //公称通径
        nominalpressure: [], //公称压力
        connection: "",
        drivetype: [], //驱动方式
        valveplatematerial: "",
        bodymaterial: "",
        stemmaterial: "",
        plinthmaterial: "",
        torque: "", //
        maxruntime: "", //90°最大运行时间
        actuatorbrand: "", //执行器品牌
        actuatordrivetype: "", //执行器类型
        part_itemids: [],
      },
      guangtouParam: {
        id: 20240718162102,
        content: {
          pageNumber: 1,
          pageSize: 30,
          where: {
            condition: "",
            caliber: "", //公称通径
            nominalpressure: "", //公称压力
            connection: "", //连接方式
            bodymaterial: "", //阀体材质
            stemmaterial: "", //阀杆材质
            plinthmaterial: "", //阀座材质
            drivetype: "电动", //驱动方式
          },
        },
      },
      excelList: [],
      excelParam: {
        id: 20240718162202,
        content: {
          itemid: "", //光头id
          pageNumber: 1,
          pageSize: 30,
          where: {
            actuatordrivetype: "电动开关", //驱动方式
            condition1: "",
            condition2: "",
            torque: "", //阀门扭矩
            flh: "", //法兰号
            actuatorbrand: "", //品牌
            actuatorname: "",
            supplyvoltage: "",
            actuatorsignal: "",
            maxsquarewidth: "", //方阀杆最大宽度
            maxrounddiameter: "", //圆阀杆最大直径
          },
        },
      },
      fujianList: [],
      fujianArr: [],
      loading: false,
      fujianParam: {
        id: 20240718162402,
        content: {
          othertypes: [],
          pageNumber: 1,
          pageSize: 300,
          where: {
            actuatorbrand: "", //品牌
          },
        },
      },
      timer: null,
      product: {},
    };
  },
  watch: {
    // 'excelParam.content.where.actuatorbrand': {
    //     handler (val) {
    //         setTimeout(() => {
    //             this.calcTableHieght('excelRef')
    //         },500)
    //     }
    // },
    active(val) {
      switch (val) {
        case 1:
          this.calcTableHieght("guangtouRef");
          break;
        case 2:
          this.calcTableHieght("excelRef");
          break;
        case 3:
          this.calcTableHieght("fujianRef");
          break;
        default:
          break;
      }
      if (val == 4) {
        if (this.guangtouParam.content.where.drivetype == "电动") {
          if (this.resultArr[1].gearboxid)
            this.resultArr.push({
              parttype: "减速箱",
              itemid: this.resultArr[1].gearboxid,
              itemname: this.resultArr[1].gearboxname,
              actuatorbrand: this.resultArr[1].gearboxbrand,
            });
        }
        this.$api
            .requested({
              id: 2024071916224702,
              content: {
                part_itemids: this.resultArr.map((item) => {
                  return {
                    parttype: item.parttype,
                    itemid: item.itemid,
                  };
                }),
              },
            })
            .then((res) => {
              this.product = res.data;
            });
      }
    },
  },
  methods: {
    resultRefresh(type) {
      if (type == "光头") {
        this.active = 1;
        this.resultArr = [];
        this.fujianArr = [];
      } else if (type == "执行器") {
        this.active = 2;
        this.resultArr = this.resultArr.splice(0, 1);
        this.fujianArr = [];
      } else {
        this.fujianArr = [];
        this.resultArr = this.resultArr.splice(0, 2);
        this.active = 3;
        if (this.excelParam.content.where.drivetype == "气动调节") {
          this.fujianParam.content.othertypes = ["定位器", "过滤减压阀"];
        } else if (this.excelParam.content.where.drivetype == "气动开关") {
          this.fujianParam.content.othertypes = [
            "电磁阀",
            "限位开关",
            "过滤减压阀",
          ];
        }
        this.$refs.fujianRef.listData();
      }
    },
    //手动输入下一步
    next() {
      this.$refs.ruleForm.validate(async (val) => {
        if (val) {
          let data = JSON.parse(
              JSON.stringify(this.guangtouParam.content.where)
          );
          this.selectTarget(data, "主阀");
        }
      });
    },
    close() {
      this.active = 1;
      this.guangtouParam.content.where.drivetype = "电动";
      this.resultArr = [];
      this.fujianArr = [];
      if (this.$refs.ruleForm) {
        this.$refs.ruleForm.resetFields();
        this.guangtouParam.content.where.drivetype = "电动";
      }
    },
    //搜索
    Search(type, position) {
      let index = 0;
      let whereKeys = Object.keys(this[type].content.where);
      if (position) {
        index = whereKeys.indexOf(position) + 1;
      }
      if (type != "excelParam") {
        for (let i = index; i < whereKeys.length - 1; i++) {
          if (!position && whereKeys[i].indexOf("condition") != -1) continue;
          this[type].content.where[whereKeys[i]] = "";
        }
      } else if (type == "excelParam") {
        for (let i = index; i < whereKeys.length; i++) {
          if (
              whereKeys[i].indexOf("condition") != -1 ||
              whereKeys[i].indexOf("flh") != -1 ||
              whereKeys[i].indexOf("maxrounddiameter") != -1 ||
              whereKeys[i].indexOf("maxsquarewidth") != -1 ||
              whereKeys[i].indexOf("torque") != -1 ||
              whereKeys[i].indexOf("drivetype") != -1
          )
            continue;
          this[type].content.where[whereKeys[i]] = "";
        }
      }
      switch (type) {
        case "guangtouParam":
          if (this.loading) return;
          this.loading = true;
          whereKeys = whereKeys.filter((item) => item != "caliber");
          this.$refs.guangtouRef &&
          this.$refs.guangtouRef.listData(_changeOption);
          break;
        case "excelParam":
          if (this.loading) return;
          this.loading = true;
          this.$nextTick(() => {
            this.$refs.excelRef && this.$refs.excelRef.listData(_changeOption2);
          });
          break;
        default:
          break;
      }
      //更新选项列表
      let that = this;
      function _changeOption() {
        that.loading = false;
        let isbreak = false;
        for (let i = 0; i < whereKeys.length; i++) {
          if (isbreak) break;
          if (whereKeys[i].indexOf("condition") == -1) {
            if (that.$refs.guangtouRef.list.length) {
              if (i >= index - 1 && whereKeys[i] != "drivetype") {
                that[whereKeys[i]] =
                    that.$refs.guangtouRef.list[0].option[whereKeys[i]];
                if (that[whereKeys[i]].length == 1) {
                  if (that.guangtouParam.content.where[position])
                    that.guangtouParam.content.where[whereKeys[i]] =
                        that[whereKeys[i]][0].value;
                  if (that.timer) clearTimeout(that.timer);
                  that.timer = setTimeout(() => {
                    that.$refs.guangtouRef && that.$refs.guangtouRef.listData();
                  });
                } else if (that[whereKeys[i]].length > 1) {
                  that.guangtouParam.content.where[whereKeys[i]] = "";
                }

                if (
                    that.$refs.guangtouRef.list[0].option[whereKeys[i]].length > 1
                ) {
                  isbreak = true;
                }
              }
            } else {
              if (i >= index && whereKeys[i] != "drivetype")
                that[whereKeys[i]] = [];
            }
          }
        }
      }
      function _changeOption2() {
        that.loading = false;
        let isbreak = false;
        for (let i = 5; i < whereKeys.length; i++) {
          if (isbreak) break;
          if (whereKeys[i].indexOf("condition") == -1) {
            if (that.$refs.excelRef.list.length) {
              if (i >= index) {
                if (whereKeys[i] != "drivetype")
                  that[whereKeys[i]] =
                      that.$refs.excelRef.list[0].option[whereKeys[i]];
                if (that[whereKeys[i]].length == 1) {
                  if (that.excelParam.content.where[position])
                    that.excelParam.content.where[whereKeys[i]] =
                        that[whereKeys[i]][0].value;
                  if (that.timer) clearTimeout(that.timer);
                  that.timer = setTimeout(() => {
                    that.$refs.excelRef && that.$refs.excelRef.listData();
                  });
                } else if (
                    that[whereKeys[i]].length > 1 &&
                    whereKeys[i] != "drivetype"
                ) {
                  that.excelParam.content.where[whereKeys[i]] = "";
                }
                if (
                    that.$refs.excelRef.list[0].option[whereKeys[i]].length > 1
                ) {
                  isbreak = true;
                }
              }
            } else {
              if (i >= index && whereKeys[i] != "drivetype")
                that[whereKeys[i]] = [];
            }
          }
        }
      }
    },
    calcTableHieght(id) {
      this.$nextTick(() => {
        setTimeout(() => {
          let target = this.$refs[id].$el.getBoundingClientRect();
          let clientHeight = document.body.clientHeight;
          this.tableHeight = clientHeight - target.top - 30 + "px";
          this.$refs[id].$refs.table.doLayout();
        }, 200);
      });
    },
    guangtouChange(val) {
      switch (val) {
        case "电动":
          this.excelParam = {
            id: 20240718162202,
            content: {
              itemid: 0, //光头id
              pageNumber: 1,
              pageSize: 30,
              where: {
                actuatordrivetype: "电动开关", //驱动方式
                condition1: "",
                condition2: "",
                torque: "", //阀门扭矩
                flh: "", //法兰号
                actuatorbrand: "", //品牌
                actuatorname: "",
                supplyvoltage: "",
                actuatorsignal: "",
                maxsquarewidth: "", //方阀杆最大宽度
                maxrounddiameter: "", //圆阀杆最大直径
              },
            },
          };
          break;
        case "气动":
          this.excelParam = {
            id: 20240718162302,
            content: {
              pageNumber: 1,
              pageSize: 30,
              where: {
                condition1: "",
                torque: "", //阀门扭矩
                flh: "", //法兰号
                maxsquarewidth: "", //方阀杆最大宽度
                maxrounddiameter: "", //圆阀杆最大直径
                actuatorbrand: "", //品牌
                actuatorname: "",
                func: "", //功能
                bodystructure: "", //结构
                drivetype: "气动调节",
              },
            },
          };
          break;
        default:
          break;
      }
    },
    //选择目标
    selectTarget(data, type) {
      data.parttype = type;
      this.resultArr.push(data);
      if (type == "主阀") {
        this.guangtouChange(this.guangtouParam.content.where.drivetype);
        this.excelParam.content.itemid = data.itemid;
        this.excelParam.content.where.torque = data.torque;
        this.excelParam.content.where.flh = data.flh;
        this.excelParam.content.where.maxsquarewidth = data.maxsquarewidth;
        this.excelParam.content.where.maxrounddiameter = data.maxrounddiameter;
        this.$nextTick(() => {
          this.$refs.excelRef.listData(() => {
            if (!this.$refs.excelRef.list.length) return;
            this.actuatorbrand =
                this.$refs.excelRef.list[0].option.actuatorbrand;
            this.bodystructure =
                this.$refs.excelRef.list[0].option.bodystructure;
            this.func = this.$refs.excelRef.list[0].option.func;
          });
        });
        this.active = 2;
      } else if (type == "执行器") {
        this.resultArr[1].itenname = this.resultArr[1].actuatorname;
        this.resultArr[1].itemno = this.resultArr[1].actuatorno;

        if (this.excelParam.content.where.drivetype == "气动调节") {
          this.fujianParam.content.othertypes = ["定位器", "过滤减压阀"];
        } else {
          this.fujianParam.content.othertypes = [
            "电磁阀",
            "限位开关",
            "过滤减压阀",
          ];
        }
        data.itemid = data.actuatorid;
        data.itemname = data.actuatorname;
        if (this.guangtouParam.content.where.drivetype == "气动") {
          this.active = 3;
          this.$refs.fujianRef.listData();
        } else {
          this.active = 4;
        }
      } else {
        if (this.fujianArr.filter((item) => item.itemid == data.itemid).length)
          return;
        this.fujianParam.content.othertypes.splice(
            this.fujianParam.content.othertypes.indexOf(data.itemname),
            1
        );
        this.fujianArr.push(data);
        if (!this.fujianParam.content.othertypes.length)
          return (this.active = 4);
        this.loading = true;
        this.$refs.fujianRef.listData(() => {
          this.loading = false;
        });
      }
      this.resultArr[this.resultArr.length - 1] = data;
    },
    //重置
    refresh() {
      this.resultArr = [];
      this.fujianArr = [];
      this.dialogVisible = false;
      this.active = 1;
      this.items = this.items.splice(0, 2);
    },
    //选项
    optionsList() {
      this.$store.dispatch("optiontypeselect", "caliber").then((res) => {
        this.caliber = res.data;
        console.log(this.caliber, "公称通径");
      });
      this.$store.dispatch("optiontypeselect", "pressure").then((res) => {
        this.nominalpressure = res.data;
        console.log(this.nominalpressure, "公称压力");
      });
      this.$store.dispatch("optiontypeselect", "connection").then((res) => {
        this.connection = res.data;
        console.log(this.connection, "连接方式");
      });
      this.$store.dispatch("optiontypeselect", "bodymaterial").then((res) => {
        this.bodymaterial = res.data;
        console.log(this.bodymaterial, "阀体材质");
      });
      this.$store.dispatch("optiontypeselect", "stemmaterial").then((res) => {
        this.stemmaterial = res.data;
        console.log(this.stemmaterial, "阀杆材质");
      });
      this.$store.dispatch("optiontypeselect", "plinthmaterial").then((res) => {
        this.plinthmaterial = res.data;
        console.log(this.plinthmaterial, "阀座材质");
      });
      this.drivetype = [
        { remarks: "电动", value: "电动" },
        { remarks: "气动", value: "气动" },
      ];
      console.log(this.drivetype, "驱动方式");
      this.$store.dispatch("optiontypeselect", "lectotypebrand").then((res) => {
        this.actuatorbrand = res.data;
        console.log(this.actuatorbrand, "执行器品牌");
      });
      this.$store
          .dispatch("optiontypeselect", "actuatordrivetype")
          .then((res) => {
            this.actuatordrivetype = res.data;
            console.log(this.actuatordrivetype, "执行器驱动方式");
          });
      this.$store.dispatch("optiontypeselect", "bodystructure").then((res) => {
        this.bodystructure = res.data;
        console.log(this.bodystructure, "结构");
      });
      this.$store.dispatch("optiontypeselect", "func").then((res) => {
        this.func = res.data;
        console.log(this.func, "功能");
      });
      this.$store.dispatch("optiontypeselect", "flh").then((res) => {
        this.flh = res.data;
        console.log(this.func, "法兰号");
      });
      this.$store.dispatch("optiontypeselect", "actuatorsignal").then((res) => {
        this.actuatorsignal = res.data;
        console.log(this.actuatorsignal, "信号");
      });
      this.$store.dispatch("optiontypeselect", "supplyvoltage").then((res) => {
        this.supplyvoltage = res.data;
        console.log(this.supplyvoltage, "电源电压");
      });
    },
  },
  created() {
    this.optionsList();
  },
  mounted() {
    this.calcTableHieght("guangtouRef");
  },
};
</script>

<style scoped>
/deep/.ant-steps-item-finish
> .ant-steps-item-container
> .ant-steps-item-content
> .ant-steps-item-title::after {
  background: #3874f6 !important;
}
/deep/.ant-steps-item-finish .ant-steps-item-icon {
  background: none !important;
}
/deep/.ant-steps-item-icon {
  background: #3874f6;
  height: 32px !important;
}
/deep/.ant-steps-item-wait .ant-steps-item-icon {
  background: none !important;
}
/deep/.ant-steps-item-active .ant-steps-item-title {
  color: #3874f6 !important;
  font-weight: bold;
}
.scroll {
  height: calc(100vh - 60px);
  overflow-y: scroll;
}
::-webkit-scrollbar {
  display: none;
}
.select-info {
  background: #f5f6fa;
  font-family: Microsoft YaHei, Microsoft YaHei;
  width: 240px;
  border-right: 1px #999999 solid;
  z-index: 301;
  flex-shrink: 0;
  word-wrap: break-word;
}
.select-info .info-title {
  font-weight: bold;
  font-size: 20px;
  color: #333333;
  padding: 10px 20px;
  border-bottom: 1px solid #d9d9d9;
}
.select-info .product-wrapper {
  padding: 0 20px;
}

.select-info .product-wrapper .product {
  padding-bottom: 20px;
  border-bottom: #d9d9d9 1px solid;
}
.select-info .product-wrapper .product:last-child {
  border-bottom: none !important;
}
.select-info .product-wrapper .product .product-header {
  display: flex;
  align-items: center;
  align-content: center;
  padding: 10px 0;
}
.select-info .product-wrapper .product .product-header span:last-child {
  color: #3874f6;
  margin-left: 18px;
  cursor: pointer;
}
.select-info .product-wrapper .product .product-header .title {
  font-weight: bold;
  font-size: 14px;
  color: #333333;
}
.select-info .product-wrapper .product .product-header img {
  width: 12px;
  height: 12px;
}
.select-info .product-wrapper .product .product-name {
  font-weight: 400;
  font-size: 14px;
  color: #555555;
}
.select-info .product-wrapper .product .attrite {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: 400;
  font-size: 12px;
  color: #999999;
  padding-top: 10px;
}
.select-info .product-wrapper .product .attrite .attrite-title {
  color: #555555;
}
.select-info .product-wrapper .product .attrite .attrite-value {
}

.select-info .product-wrapper .product .attrite2 {
  display: flex;
  flex-direction: column;
  font-weight: 400;
  font-size: 12px;
  color: #999999;
  padding-top: 10px;
}
.select-info .product-wrapper .product .attrite2 .attrite-title {
  color: #555555;
  margin-bottom: 5px;
}
.select-info .product-wrapper .product .attrite2 .attrite-value {
}

.select-info .product-wrapper .product {
  display: flex;
  flex-direction: column;
}

.drawer__panel {
  font-family: Source Han Sans SC, Source Han Sans SC;
  padding: 10px 40px !important;
  flex: 1;
  margin-bottom: 0 !important;
  overflow: hidden;
}
.my-steps {
  padding: 0px 68px;
}
.product-info {
  padding: 10px 20px;
  border: 1px solid #3874f6;
  background: rgba(56, 116, 246, 0.08);
  margin-top: 5px;
  border-radius: 2px;
}
.product-info .title {
  margin-bottom: 16px;
  font-weight: bold;
  color: #333333;
  font-size: 16px !important;
}
.product-info .info-content {
  display: flex;
  flex-wrap: wrap;
}
.product-info .info-content .info-item {
  display: flex;
  flex-direction: column;
}
.product-info .info-content .info-item .info-title {
  margin-bottom: 4px;
  display: flex;
  align-content: center;
  align-items: center;
}
.product-info .info-content .info-item .info-title .title {
  margin-bottom: 0px !important;
}
.product-info .info-content .info-item .info-title div {
  margin-right: 20px;
  font-size: 14px !important;
}
.product-info .info-content .info-item .info-title span {
  font-size: 14px;
  color: #3874f6 !important;
  cursor: pointer;
  display: inline-block;
  display: flex;
  align-items: center;
  align-content: center;
}
.product-info .info-content .info-item .info-title span img {
  width: 12px;
  height: 12px;
  margin-right: 4px;
}
.product-info .info-content .info-item .name {
  font-weight: 400;
  font-size: 14px;
  color: #555555;
}
.product-info .info-content .info-item .names {
  font-weight: 400;
  font-size: 14px;
  color: #555555;
  display: flex;
}
.product-info .info-content .info-item .names div {
  margin-right: 20px;
}
.product-info .info-content .info-item .names div span {
  margin-right: 10px;
}
.product-content .block {
  margin-top: 30px;
  padding-left: 20px;
}
.product-content .block .header {
  display: flex;
  align-content: center;
  align-items: center;
  margin-bottom: 20px;
}
.product-content .block .header .title {
  font-size: 16px;
  font-weight: bold;
  margin-right: 20px;
}
.product-content .block .header .handle {
  display: flex;
}

.dialog-content {
}
.dialog-content .option-line {
  display: flex;
  margin-top: 10px;
}
.dialog-content .option-line .item {
  display: flex;
  align-items: center;
  font-size: 14px;
  font-weight: 500px;
  margin-right: 20px;
}
.dialog-content .option-line .item .label {
  width: 70px;
  flex-shrink: 0;
  text-align-last: justify;
  margin-right: 15px;
  color: #000000 !important;
}
.descript {
  font-size: 12px;
  color: red;
}
table,
td,
tr {
  border-collapse: collapse;
}
td {
  padding: 20px 20px;
}
table,
td {
  border: 1px solid #dddddd;
}
.result {
  margin-top: 20px;
  margin-bottom: 70px;
}
.result .title {
  font-family: Source Han Sans SC, Source Han Sans SC;
  font-weight: bold;
  font-size: 16px;
  color: #333333;
  padding: 20px 20px;
  width: 120px;
}
.custom-table {
  border: none;
  display: flex;
  height: 64px;
  align-items: center;
  align-content: center;
}
.custom-table div {
  border-right: 1px solid #dddddd;
  height: 100%;
  display: flex;
  align-items: center;
  align-content: center;
  padding-left: 20px;
}
.custom-table div:nth-child(1) {
  width: 120px;
}
.custom-table div:nth-child(2) {
  flex: 1;
}
.custom-table div:nth-child(3) {
  width: 120px;
}
.custom-table div:nth-child(4) {
  flex: 1;
}
.descript {
  display: flex;
  flex-wrap: wrap;
}
.descript .item {
  font-family: Source Han Sans SC, Source Han Sans SC;
  font-weight: 400;
  font-size: 14px;
  color: #333333;
  margin-right: 40px;
  margin-bottom: 5px;
}
.descript .item:last-child {
  margin-right: 0 !important;
}
.text1 {
  font-family: Source Han Sans SC, Source Han Sans SC;
  font-weight: bold;
  font-size: 16px;
  color: #3874f6;
}
.text2 {
  font-family: Source Han Sans SC, Source Han Sans SC;
  font-weight: bold;
  font-size: 16px;
  color: #e80000;
}

.price-tr {
  display: flex;
}
.price-tr td ~ td {
  flex: 1;
}
.price-tr td {
  border-left: none;
  border-top: none;
  border-bottom: none;
}
</style>