order-ui-pc/src/views/goodStore/goodsCost/components/baseForm.vue

<template>
  <el-form
    :model="ruleForm"
    status-icon
    :rules="rulesThis"
    ref="ruleForm"
    :size="'mini'"
    v-loading="loading"
    label-width="90px"
  >
    <el-row class="ddiv">
      <el-col :span="1" class="dtitle">
        <ul style="padding: 140px 0 0 0">
          <li>基</li>
          <li>础</li>
          <li>信</li>
          <li>息</li>
        </ul>
      </el-col>
      <el-col :span="23" class="dmain">
        <el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="业务公司" prop="company_id">
                <el-input
                  :value="type === 'add' ? getCompanyWithCode(ruleForm.companyNo).name : companyName"
                  disabled
                />
              </el-form-item>
            </el-col>

            <el-col :span="6">
              <el-form-item label="是否库存品" prop="is_stock" label-width="95px">
                <el-select
                  v-model="ruleForm.is_stock"
                  filterable
                  clearable
                  :disabled="true"
                  style="width: 100%"
                  @change="stock_change"
                  placeholder="是否库存品"
                >
                  <el-option
                    v-for="group in options4"
                    :key="group.id"
                    :label="group.name"
                    :value="group.id"
                  />
                </el-select>
              </el-form-item>
            </el-col>

            <el-col :span="6">
              <el-form-item prop="is_combind" label="组合类型" label-width="110px">
                <el-select
                  style="width:100%"
                  :disabled="true"
                  v-model="ruleForm.is_combind"
                  placeholder="是否组合商品"
                  @change="groupGoodChange"
                >
                  <el-option v-if="ruleForm.is_stock === '1'" value="1" label="组合商品" />
                  <el-option value="0" label="非组合商品" />
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="12">
              <el-form-item label="供应商" prop="supplierNo">
                <search-supplier
                  :value="ruleForm.supplierNo"
                  :placeholder="'供应商'"
                  :disabled="type === 'view' || type === 'editCoin' || createSource === '1'"
                  :size="'mini'"
                  :names="supplierName"
                  :isDetail="type !== 'add'"
                  :isp="this.type !== 'view'"
                  @searchChange="supplierNosearchChange"
                />
              </el-form-item>
            </el-col>

            <el-col :span="12">
              <el-form-item label="商品名称" prop="good_name">
                <el-input
                  placeholder="商品名称"
                  maxlength="100"
                  :disabled="type === 'view' || type === 'editCoin'"
                  v-model="ruleForm.good_name"
                ></el-input>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="8">
              {{  type }}, {{sitem.status}}
              <el-form-item label="商品分类" prop="cat_id">
                <company-sort
                  :value="ruleForm.cat_id"
                  :placeholder="'商品分类'"
                  :disabled="!(type === 'add' ||  sitem.status === '7') && !(type === 'edit' && String(sitem.status) === '7')"
                  :size="'mini'"
                  :names="cat_id_name"
                  :isDetail="type !== 'add'"
                  :company-no="ruleForm.company_id"
                  @searchChange="goods_class_change"
                />
              </el-form-item>
            </el-col>

            <el-col :span="8">
              <el-form-item label="商品品牌" prop="brandid">
                <search-brand
                  :value="ruleForm.brandid"
                  :disabled="type === 'view' || type === 'editCoin'"
                  :size="'mini'"
                  :isDetail="type !== 'add'"
                  :names="brand_name"
                  :placeholder="'商品品牌'"
                  @searchChange="brandidsearchChange"
                />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="销售权限" prop="is_auth">
                <el-select
                  v-model="ruleForm.is_auth"
                  filterable
                  clearable
                  :disabled="type === 'view' || type === 'editCoin'"
                  style="width: 100%"
                  placeholder="销售权限"
                >
                  <el-option
                    v-for="group in options3"
                    :key="group.id"
                    :label="group.name"
                    :value="group.id"
                  />
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="4">
              <el-form-item label="单位" prop="unit" label-width="60px">
                <search-unit
                  :value="ruleForm.unit"
                  :disabled="type === 'view' || type === 'editCoin'"
                  :size="'mini'"
                  :isDetail="type !== 'add'"
                  :names="unit_name"
                  :placeholder="'单位'"
                  @searchChange="unitsearchChange"
                />
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-form-item label="税点" prop="tax" label-width="60px">
                <search-tax
                  :value="ruleForm.tax"
                  :disabled="type === 'view' || type === 'editBase' || type === 'editCoin'"
                  :size="'mini'"
                  :isDetail="type !== 'add'"
                  :placeholder="'税点'"
                  @searchChange="taxsearchChange"
                />
              </el-form-item>
            </el-col>

            <el-col :span="8">
              <el-form-item label="专属类型" prop="is_exclusive">
                <search-exclusive
                  :disabled="type === 'view' || type === 'editCoin'"
                  style="width: 100%"
                  :isDetail="type !== 'add'"
                  :size="'mini'"
                  placeholder="专属类型"
                  :value="ruleForm.is_exclusive"
                  @selectChange="exclusiveSearchChange"
                />
              </el-form-item>
            </el-col>

            <el-col :span="8">
              <el-form-item label="商品总重量" prop="weight" label-width="95px" style="height:32px">
                <digital-input
                  :values="ruleForm.weight"
                  :name="'ruleForm.weight'"
                  :placeholder="'商品总重量'"
                  :min="0"
                  :disabled="type === 'view' || type === 'editCoin'"
                  :max="100000000000"
                  :position="'right'"
                  :precision="3"
                  :size="'mini'"
                  :controls="false"
                  :append="'g'"
                  @reschange="number_change($event, 'weight')"
                />
              </el-form-item>
            </el-col>
          </el-row>

          <el-row :span="24" v-show="is_noble">
            <el-row>
              <el-col :span="8">
                <el-form-item label="贵金属重量" prop="noble_weight" label-width="95px">
                  <digital-input
                    :values="ruleForm.noble_weight"
                    :placeholder="'贵金属重量'"
                    :name="'ruleForm.noble_weight'"
                    :min="0"
                    :disabled="
                      type === 'view' ||
                      type === 'editBase' ||
                      type === 'editCoin'
                    "
                    :max="100000000000"
                    :position="'right'"
                    :precision="3"
                    :size="'mini'"
                    :controls="false"
                    :append="'g'"
                    @reschange="number_change($event, 'noble_weight')"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="贵金属种类" prop="noble_metal" label-width="95px">
                  <search-metal-kind
                    :value="ruleForm.noble_metal"
                    :names="nobleMetalNames"
                    :disabled="
                      type === 'view' || type === 'editBase' || type === 'editCoin'
                    "
                    :size="'mini'"
                    :isDetail="type !== 'add'"
                    :placeholder="'贵金属种类'"
                    @searchChange="noble_metalsearchChange"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="启用实时金价" prop="is_gold_price" label-width="110px">
                  <el-select
                    v-model="ruleForm.is_gold_price"
                    filterable
                    clearable
                    :disabled="true"
                    style="width: 100%"
                    placeholder="启用实时金价"
                    @change="is_goold_price_change"
                  >
                    <el-option
                      v-for="group in options5"
                      :key="group.id"
                      :label="group.name"
                      :value="group.id"
                    />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="有无工差" prop="is_diff">
                  <el-select
                    v-model="ruleForm.is_diff"
                    filterable
                    clearable
                    :disabled="
                      type === 'view' ||
                      type === 'editBase' ||
                      type === 'editCoin'
                    "
                    style="width: 100%"
                    placeholder="有无工差"
                  >
                    <el-option
                      v-for="group in options8"
                      :key="group.id"
                      :label="group.name"
                      :value="group.id"
                    />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="10">
                <el-form-item label="配置要求" prop="config" label-width="85px">
                  <el-select
                    v-model="ruleForm.config"
                    multiple
                    :disabled="type === 'view'"
                    style="width: 100%"
                    placeholder="配置要求"
                  >
                    <el-option
                      v-for="(item, index) in options9"
                      :key="item + index"
                      :label="item"
                      :value="item"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="其他配置要求" prop="other_config" label-width="110px">
                  <el-input
                    placeholder="其他配置要求"
                    maxlength="100"
                    :disabled="type === 'view'"
                    v-model="ruleForm.other_config"
                  ></el-input>
                </el-form-item>
              </el-col>
            </el-row>
          </el-row>

          <el-row>
            <el-col :span="8">
              <el-form-item label="售后说明" prop="after_sales">
                <el-input
                  type="textarea"
                  :rows="4"
                  :disabled="type === 'view' || type === 'editCoin'"
                  placeholder="售后说明"
                  v-model="ruleForm.after_sales"
                  show-word-limit
                  maxlength="1000"
                />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="商品备注" prop="good_remark">
                <el-input
                  type="textarea"
                  :rows="4"
                  :disabled="type === 'view' || type === 'editCoin'"
                  placeholder="商品备注"
                  show-word-limit
                  maxlength="250"
                  v-model="ruleForm.good_remark"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="工艺说明" prop="craft_desc">
                <el-input
                  type="textarea"
                  :disabled="type === 'view' || type === 'editCoin'"
                  :rows="4"
                  placeholder="工艺说明"
                  show-word-limit
                  maxlength="250"
                  v-model="ruleForm.craft_desc"
                ></el-input>
              </el-form-item>
            </el-col>
          </el-row>

          <el-col :span="8">
            <el-form-item label="是否定制" prop="good_type">
              <el-select
                v-model="ruleForm.good_type"
                filterable
                :disabled="type === 'view' || type === 'editCoin'"
                clearable
                style="width: 100%"
                placeholder="是否定制"
                @change="good_type_change"
              >
                <el-option
                  v-for="group in options1"
                  :key="group.id"
                  :label="group.name"
                  :value="group.id"
                />
              </el-select>
            </el-form-item>
          </el-col>

          <el-col :span="8" v-show="ruleForm.good_type === '1'">
            <el-form-item label="定制起订量" prop="moq" label-width="95px">
              <digital-input
                :values="ruleForm.moq"
                :placeholder="'定制起订量'"
                :name="'ruleForm.moq'"
                :min="0"
                :disabled="type === 'view' || type === 'editCoin'"
                :max="100000000000"
                :position="'right'"
                :precision="0"
                :size="'mini'"
                :controls="false"
                :append="''"
                @reschange="number_change($event, 'moq')"
              />
            </el-form-item>
          </el-col>
          <el-col :span="8" v-show="ruleForm.good_type === '1'">
            <el-form-item label="定制工期" prop="customized">
              <digital-input
                :values="ruleForm.customized"
                :placeholder="'定制工期'"
                :name="'ruleForm.customized'"
                :min="0"
                :disabled="type === 'view' || type === 'editCoin'"
                :max="100000000000"
                :position="'right'"
                :precision="0"
                :size="'mini'"
                :controls="false"
                :append="'天'"
                @reschange="number_change($event, 'customized')"
              />
            </el-form-item>
          </el-col>
          <el-col :span="8" v-show="ruleForm.is_stock === '1'">
            <el-form-item label="备库起订量" prop="stock_moq" label-width="95px">
              <digital-input
                :values="ruleForm.stock_moq"
                :placeholder="'备库起订量'"
                :min="0"
                :disabled="type === 'view' || type === 'editCoin'"
                :max="100000000000"
                :position="'right'"
                :precision="0"
                :size="'mini'"
                :controls="false"
                :append="''"
                @reschange="number_change($event, 'stock_moq')"
              />
            </el-form-item>
          </el-col>
        </el-row>
      </el-col>
    </el-row>

    <el-row class="ddiv" v-if="ruleForm. is_combind === '1'">
      <el-col
        :span="1"
        tag="div"
        style="border-right:1px solid #dcdfe6;width:40px;display:flex;align-items:center;height:100%"
      >
        <ul style="text-align:center;padding-top:20px">
          <li>子</li>
          <li>商</li>
          <li>品</li>
          <li>设</li>
          <li>置</li>
        </ul>
      </el-col>

      <el-col :span="23" class="dmain" style="padding:20px 0px;padding-left:20px">
        <el-table :data="childTableData" size="mini" border max-height="350px">
          <el-table-column label="子商品成本编号" prop="childCode" min-width="160px" />
          <el-table-column label="子商品名称" prop="child_name" min-width="180px" show-overflow-tooltip />
          <el-table-column label="组合比例" prop="child_num" width="140px">
            <template slot-scope="scope">
              <span v-if="scope.$index !== editIndex">
                {{
                childTableData[scope.$index].child_num
                }}
              </span>

              <digital-input
                v-else
                :values="childTableData[scope.$index].child_num"
                :placeholder="'组合比例'"
                :min="0"
                :max="100000000000"
                :position="'right'"
                :precision="0"
                :size="'mini'"
                :controls="false"
                @reschange="num_change($event,scope.$index)"
              />
            </template>
          </el-table-column>

          <el-table-column label="操作" width="120px">
            <template #header>
              <div>
                <span>操作</span>
                <el-tooltip class="item" effect="dark" content="添加" placement="top" v-if="type === 'add' || type === 'edit'">
                  <i
                    class="el-icon-circle-plus-outline fr"
                    style="font-size:18px;cursor: pointer"
                    @click="onChildProdChange(null, 'add')"
                  />
                </el-tooltip>
              </div>
            </template>

            <template slot-scope="scope">
              <el-tooltip
                effect="dark"
                content="查看"
                placement="top"
                v-if="editIndex !== scope.$index"
              >
                <i class="el-icon-view tb-icon" @click="onChildProdChange(scope.$index, 'view')"></i>
              </el-tooltip>

              <template v-if="type === 'add' || type === 'edit'">
                <el-tooltip
                effect="dark"
                content="修改"
                placement="top"
                v-if="editIndex !== scope.$index"
              >
                <i class="el-icon-edit tb-icon" @click="onChildProdChange(scope.$index,'edit')"></i>
              </el-tooltip>

              <el-tooltip effect="dark" content="保存" placement="top" v-else>
                <i class="el-icon-circle-check tb-icon" @click="onSaveLine(scope.$index)"></i>
              </el-tooltip>

              <el-tooltip
                effect="dark"
                content="删除"
                placement="top"
                v-if="editIndex !== scope.$index"
              >
                <i class="el-icon-delete tb-icon" @click="onDeleteItem(scope.$index)"></i>
              </el-tooltip>
              </template>
            </template>
          </el-table-column>
        </el-table>
      </el-col>
    </el-row>

    <el-row class="ddiv">
      <el-col :span="1" class="dtitle">
        <ul>
          <li>规</li>
          <li>格</li>
          <li>信</li>
          <li>息</li>
        </ul>
      </el-col>
      <el-col :span="23" class="dmain" style="padding: 20px 0 20px 18px">
        <el-table :data="spec_tableData" :size="'mini'" border style="width: 100%">
          <el-table-column prop="spec_value" label="规格类型" />
          <el-table-column prop="spec_value_value" label="规格值" />
          <el-table-column
            fixed="right"
            v-if="type === 'add' || type === 'editBase' || type === 'edit'"
          >
            <template slot="header" slot-scope="scope">
              <span>操作</span>
              <el-tooltip class="item" effect="dark" content="添加规格类型" placement="top">
                <i
                  class="el-icon-circle-plus-outline fr"
                  style="font-size: 18px; margin-top: 2px"
                  @click="openEdit('-1', {})"
                />
              </el-tooltip>
            </template>
            <template slot-scope="scope">
              <el-tooltip effect="dark" content="修改" placement="top">
                <i class="el-icon-edit tb-icon" @click="openEdit(scope.$index, scope.row)"></i>
              </el-tooltip>

              <el-tooltip v-if="!scope.row.isMust" effect="dark" content="删除" placement="top">
                <i class="el-icon-delete tb-icon" @click="openDelete(scope.$index)"></i>
              </el-tooltip>
            </template>
          </el-table-column>
        </el-table>
        <!-- 弹窗 新增/修改 -->
        <base-form-add-edit
          :index="modelIndex"
          :show-model="showModel"
          :sitem="sitem"
          @refresh="refreshEdit"
          @cancel="showModel = false"
        />
      </el-col>
    </el-row>
    <el-row class="ddiv">
      <el-col :span="1" class="dtitle">
        <ul>
          <li>包</li>
          <li>装</li>
          <li>信</li>
          <li>息</li>
        </ul>
      </el-col>
      <el-col :span="23" class="dmain">
        <el-row>
          <el-col :span="6">
            <el-form-item label="包装方式" prop="packing_way">
              <el-input
                placeholder="包装方式"
                :disabled="type === 'view' || type === 'editCoin'"
                v-model="ruleForm.packing_way"
                maxlength="250"
              />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="装箱规格" prop="packing_spec">
              <el-input
                placeholder="装箱规格"
                :disabled="type === 'view' || type === 'editCoin'"
                v-model="ruleForm.packing_spec"
                maxlength="250"
              />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="装箱重量" prop="packing_weight">
              <digital-input
                :values="ruleForm.packing_weight"
                :placeholder="'装箱重量'"
                :min="0"
                :name="'ruleForm.packing_weight'"
                :disabled="type === 'view' || type === 'editCoin'"
                :max="100000000000"
                :position="'right'"
                :precision="3"
                :size="'mini'"
                :controls="false"
                :append="'g'"
                @reschange="number_change($event, 'packing_weight')"
              />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="装箱尺寸" prop="packing_size">
              <el-input
                placeholder="装箱尺寸"
                :disabled="type === 'view' || type === 'editCoin'"
                v-model="ruleForm.packing_size"
                maxlength="250"
              />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="商品尺寸" prop="good_size">
              <el-input
                placeholder="商品尺寸"
                :disabled="type === 'view' || type === 'editCoin'"
                v-model="ruleForm.good_size"
                maxlength="250"
              />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="商品条形码" prop="good_bar">
              <el-input
                placeholder="商品条形码"
                :disabled="type === 'view' || type === 'editCoin'"
                v-model="ruleForm.good_bar"
                type="number"
                :min="0"
                :max="9999999999999"
                :step="0"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="包装清单" prop="packing_list">
              <el-input
                placeholder="包装清单"
                :disabled="type === 'view' || type === 'editCoin'"
                v-model="ruleForm.packing_list"
                maxlength="250"
              />
            </el-form-item>
          </el-col>
        </el-row>
      </el-col>
    </el-row>
    <el-row class="ddiv">
      <el-col :span="1" class="dtitle">
        <ul>
          <li>发</li>
          <li>货</li>
          <li>信</li>
          <li>息</li>
        </ul>
      </el-col>
      <el-col :span="23" class="dmain">
        <el-row>
          <el-col :span="6">
            <el-form-item label="供货区域" prop="supply_area">
              <el-select
                v-model="ruleForm.supply_area"
                filterable
                clearable
                :disabled="type === 'view' || type === 'editCoin'"
                style="width: 100%"
                placeholder="供货区域"
              >
                <el-option
                  v-for="group in options6"
                  :key="group.id"
                  :label="group.name"
                  :value="group.id"
                />
              </el-select>
            </el-form-item>
          </el-col>

          <el-col :span="6" style="padding-bottom:1px">
            <el-form-item label="物流时间" prop="delivery_day">
              <digital-input
                :values="ruleForm.delivery_day"
                :placeholder="'物流时间'"
                :min="0"
                :name="'ruleForm.delivery_day'"
                :disabled="type === 'view' || type === 'editCoin'"
                :max="100000000000"
                :position="'right'"
                :precision="0"
                :size="'mini'"
                :controls="false"
                :append="'天'"
                @reschange="number_change($event, 'delivery_day')"
              />
            </el-form-item>
          </el-col>
          <el-col :span="6" style="padding-bottom:1px">
            <el-form-item label="供货周期" prop="lead_time">
              <digital-input
                :values="ruleForm.lead_time"
                :placeholder="'物流时间'"
                :min="0"
                :name="'ruleForm.lead_time'"
                :disabled="type === 'view' || type === 'editCoin'"
                :max="100000000000"
                :position="'right'"
                :precision="0"
                :size="'mini'"
                :controls="false"
                :append="'天'"
                @reschange="number_change($event, 'lead_time')"
              />
            </el-form-item>
          </el-col>
          <el-col :span="6" style="padding-bottom:1px">
            <el-form-item label="调样周期" prop="sample_day">
              <digital-input
                :values="ruleForm.sample_day"
                :placeholder="'调样周期'"
                :min="0"
                :name="'ruleForm.sample_day'"
                :disabled="type === 'view' || type === 'editCoin'"
                :max="100000000000"
                :position="'right'"
                :precision="0"
                :size="'mini'"
                :controls="false"
                :append="'天'"
                @reschange="number_change($event, 'sample_day')"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="发货地" prop="delivery_place">
              <search-area
                :value="areaInfo.delivery_place.code"
                :is-detail="true"
                size="mini"
                :disabled="type === 'view' || type === 'editCoin'"
                :names="areaInfo.delivery_place.label"
                placeholder="发货地"
                :level="3"
                @searchChange="areaChange($event, 'delivery_place')"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="产地" prop="origin_place">
              <search-area
                :value="areaInfo.origin_place.code"
                :disabled="type === 'view' || type === 'editCoin'"
                :is-detail="true"
                size="mini"
                :names="areaInfo.origin_place.label"
                placeholder="产地"
                :level="3"
                @searchChange="areaChange($event, 'origin_place')"
              />
            </el-form-item>
          </el-col>
        </el-row>
      </el-col>
    </el-row>
    <el-row class="ddiv">
      <el-col :span="1" class="dtitle">
        <ul>
          <li>图</li>
          <li>片</li>
          <li>信</li>
          <li>息</li>
        </ul>
      </el-col>
      <el-col :span="23" class="dmain">
        <el-row style="padding: 0 0 20px 0">
          <el-col :span="6">
            <el-form-item label="商品缩略" prop="good_thumb_img" class="activity-upload my-label-top">
              <div class="btnupload" style="position: relative">
                <img v-if="ruleForm.good_thumb_img" :src="ruleForm.good_thumb_img" class="avatar" />
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                <file-upload
                  class="Upload"
                  :disabled="type === 'view' || type === 'editCoin'"
                  :accept="'.jpg,.png,.jpeg'"
                  :multiple="true"
                  :uploadcondition="beforeAvatarUpload"
                  @UploadErrorEvent="UploadErrorEvent($event, 'good_thumb_img')"
                  @UploadSuccessEvent="UploadSuccessEvent($event, 'good_thumb_img')"
                ></file-upload>
              </div>
              <div class="txt-tips fl">
                <p>尺寸比例：</p>
                <p>1:1</p>
              </div>
            </el-form-item>
          </el-col>
          <el-col :span="9">
            <el-form-item label="商品主图" prop="good_img">
              <div class="good_info_img_div" style="display:flex">
                <ul v-if="ruleForm.good_img" class="clear">
                  <li
                    class="img-show-li"
                    v-viewer
                    v-for="(img, iindex) in ruleForm.good_img"
                    :key="img + iindex"
                  >
                    <div class="img-show-li-div">
                      <img :src="img" class="img-show" alt />
                      <i
                        v-if="type == 'add' || type === 'editBase' || type === 'edit'"
                        class="el-icon-close"
                        @click="closeImg(iindex, 'good_img')"
                      ></i>
                    </div>
                  </li>
                  <li
                    class="img-show-li"
                    v-if="
                      ruleForm.good_img.length < 11 &&
                      (type == 'add' || type === 'editBase' || type === 'edit')
                    "
                  >
                    <div class="activity-upload">
                      <div class="btnupload" style="position: relative">
                        <i class="el-icon-plus avatar-uploader-icon"></i>
                        <file-upload
                          class="Upload"
                          :disabled="type === 'view' || type === 'editCoin'"
                          :accept="'.jpg,.png,.jpeg'"
                          :multiple="true"
                          :uploadcondition="beforeAvatarUpload"
                          @UploadErrorEvent="UploadErrorEvent($event, 'good_img')"
                          @UploadSuccessEvent="UploadSuccessEvent($event, 'good_img')"
                        ></file-upload>
                      </div>
                    </div>
                  </li>
                </ul>
              </div>
            </el-form-item>
          </el-col>
          <el-col :span="9">
            <el-form-item label="详情介绍" prop="good_info_img">
              <div class="good_info_img_div" style="display:flex">
                <ul v-if="ruleForm.good_info_img" class="clear">
                  <li
                    class="img-show-li"
                    v-viewer
                    v-for="(img, iindex) in ruleForm.good_info_img"
                    :key="img + iindex"
                  >
                    <div class="img-show-li-div">
                      <img :src="img" class="img-show" alt />
                      <i
                        v-if="type == 'add' || type === 'editBase' || type === 'edit'"
                        class="el-icon-close"
                        @click="closeImg(iindex, 'good_info_img')"
                      ></i>
                    </div>
                  </li>
                  <li
                    class="img-show-li"
                    v-if="
                      ruleForm.good_info_img.length < 11 &&
                      (type == 'add' || type === 'editBase' || type === 'edit')
                    "
                  >
                    <div class="activity-upload">
                      <div class="btnupload" style="position: relative">
                        <i class="el-icon-plus avatar-uploader-icon"></i>
                        <file-upload
                          class="Upload"
                          :disabled="type === 'view' || type === 'editCoin'"
                          :accept="'.jpg,.png,.jpeg'"
                          :multiple="true"
                          :uploadcondition="beforeAvatarUpload"
                          @UploadErrorEvent="UploadErrorEvent($event, 'good_info_img')"
                          @UploadSuccessEvent="
                            UploadSuccessEvent($event, 'good_info_img')
                          "
                        ></file-upload>
                      </div>
                    </div>
                  </li>
                </ul>
              </div>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <div style="font-size: 12px; color: #606266">
              <span style="padding: 0 0 0 20px">图片大小：小于1M</span>
              <span style="padding: 0 0 0 20px">图片类型.jpg/png/jpeg</span>
            </div>
          </el-col>
        </el-row>
      </el-col>
    </el-row>
    <el-row class="ddiv">
      <el-col :span="1" class="dtitle">
        <ul style="padding: 0">
          <li>固</li>
          <li>定</li>
          <li>与</li>
          <li>阶</li>
          <li>梯</li>
          <li>成</li>
          <li>本</li>
        </ul>
      </el-col>
      <el-col :span="23" class="dmain">
        <el-row v-if="sitem.create_source === '1'" style="padding-left:20px;padding-bottom:10px;font-size:14px;font-weight:700">
          来源: 咨询成交商品, 咨询采购价：{{sitem.cgd_price}} 元
        </el-row>
        <el-row>
          <el-col :span="6">
            <el-form-item label="打样费" prop="demo_fee" label-width="75px">
              <digital-input
                :values="ruleForm.demo_fee"
                :placeholder="'打样费'"
                :min="0"
                :name="'ruleForm.demo_fee'"
                :disabled="type === 'view' || type === 'editBase'"
                :max="100000000000"
                :position="'right'"
                :precision="2"
                :size="'mini'"
                :controls="false"
                :append="'元'"
                @reschange="number_change($event, 'demo_fee')"
              />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="开模费" prop="open_fee" label-width="75px">
              <digital-input
                :values="ruleForm.open_fee"
                :placeholder="'开模费'"
                :min="0"
                :name="'ruleForm.open_fee'"
                :disabled="type === 'view' || type === 'editBase'"
                :max="100000000000"
                :position="'right'"
                :precision="2"
                :size="'mini'"
                :controls="false"
                :append="'元/件'"
                @reschange="number_change($event, 'open_fee')"
              />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="调样费" prop="sample_fee" label-width="75px">
              <digital-input
                :values="ruleForm.sample_fee"
                :placeholder="'调样费'"
                :min="0"
                :name="'ruleForm.sample_fee'"
                :disabled="type === 'view' || type === 'editBase'"
                :max="100000000000"
                :position="'right'"
                :precision="2"
                :size="'mini'"
                :controls="false"
                :append="'元'"
                @reschange="number_change($event, 'sample_fee')"
              />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="市场价" prop="market_price" label-width="75px">
              <digital-input
                :values="ruleForm.market_price"
                :placeholder="'市场价'"
                :min="0"
                :name="'ruleForm.market_price'"
                :disabled="type === 'view' || type === 'editBase'"
                :max="100000000000"
                :position="'right'"
                :precision="2"
                :size="'mini'"
                :controls="false"
                :append="'元'"
                @reschange="number_change($event, 'market_price')"
              />
            </el-form-item>
          </el-col>

          <!-- <el-col :span="4" v-if="type !== 'add'">
            <el-form-item label="采购价">
              <digital-input
                :values="sitem.cgd_price"
                :placeholder="'采购价'"
                :min="0"
                :name="'sitem.cgd_price'"
                :disabled="true"
                :max="100000000000"
                :position="'right'"
                :precision="2"
                :size="'mini'"
                :controls="false"
                :append="'元'"
                @reschange="number_change($event, 'cgd_price')"
              />
            </el-form-item>
          </el-col> -->

          <!-- <el-col :span="6">
            <el-form-item label="启用阶梯" prop="is_step">
              <el-select
                v-model="ruleForm.is_step"
                filterable
                :disabled="type === 'view' || type === 'editBase'"
                style="width: 100%"
                placeholder="启用阶梯"
                @change="is_step_change"
              >
                <el-option
                  v-for="group in options5"
                  :key="group.id"
                  :label="group.name"
                  :value="group.id"
                />
              </el-select>
            </el-form-item>
          </el-col>-->
          <el-col :span="6" v-show="is_noble && ruleForm && ruleForm.is_gold_price === '1'">
            <el-form-item label="供应商采购金价" prop="cgd_gold_price" label-width="130px">
              <digital-input
                :values="ruleForm.cgd_gold_price"
                :placeholder="'供应商采购金价'"
                :min="0"
                :name="'ruleForm.cgd_gold_price'"
                :disabled="type === 'view' || type === 'editBase'"
                :max="100000000000"
                :position="'right'"
                :precision="2"
                :size="'mini'"
                :controls="false"
                :append="'元/g'"
                @reschange="number_change($event, 'cgd_gold_price')"
              />
            </el-form-item>
          </el-col>
          <el-col :span="6" v-show="is_noble && ruleForm && ruleForm.is_gold_price === '1'">
            <el-form-item label="当前金价">
              <el-input v-model="ruleForm.noble_price" disabled maxlength="15" placeholder="当前金价">
                <template slot="append">元/g</template>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="24" style="padding-left: 18px">
            <el-table
              :data="ladder_tableData"
              :size="'mini'"
              border
              stripe
              style="width: 100%; margin: 0 0 20px 0"
            >
              <el-table-column prop="min_num" label="起订量(>=)" />
              <el-table-column prop="nake_fee" label="成本单价" />
              <el-table-column prop="cost_fee" label="工艺费" />
              <el-table-column prop="delivery_fee" label="物流费" />
              <el-table-column prop="cert_fee" label="证书费" />
              <el-table-column prop="mark_fee" label="加标费" />
              <el-table-column prop="package_fee" label="包装费" />
              <el-table-column prop="other_fee" label="其他费用" />
              <el-table-column prop="nake_total" label="成本合计" />
              <el-table-column
                fixed="right"
                v-if="type === 'add' || type === 'editCoin' || type === 'edit'"
                width="80px"
              >
                <template slot="header" slot-scope="scope">
                  <span>操作</span>
                  <el-tooltip effect="dark" content="添加阶梯" placement="top">
                    <i class="el-icon-circle-plus-outline tb-icon fr" @click="openCostEdit(-1, {})"></i>
                  </el-tooltip>
                </template>
                <template slot-scope="scope">
                  <el-tooltip effect="dark" content="修改" placement="top">
                    <i class="el-icon-edit tb-icon" @click="openCostEdit(scope.$index, scope.row)"></i>
                  </el-tooltip>

                  <el-tooltip effect="dark" content="删除" placement="top">
                    <i class="el-icon-delete tb-icon" @click="openCostEditDelete(scope.$index)"></i>
                  </el-tooltip>
                </template>
              </el-table-column>
            </el-table>
          </el-col>
        </el-row>
        <!-- 弹窗 新增/修改 -->
        <cost-form-add-edit
          :index="costmodelIndex"
          :show-model="costshowModel"
          :sitem="costsitem"
          @refresh="costrefreshEdit"
          @cancel="costshowModel = false"
        />

        <product-modal
          :type="modalType"
          :editIndex="editIndex"
          :editItem="editItem"
          :visible.sync="mVisible"
        />

        <product-list-modal :visible.sync="visible" @selected="handleProductSelected" />
      </el-col>

      <el-col
        :span="24"
        v-if="
          type === 'editBase' || type === 'add' || type === 'editCoin' || type === 'edit'
        "
        style="text-align: right; padding: 15px 0 15px 0; border-top: 1px solid #dcdfe6"
      >
        <el-button :size="'mini'" type="primary" @click="submitForm">保 存</el-button>
      </el-col>
    </el-row>
  </el-form>
</template>
<script>
import asyncRequest from "@/apis/service/goodStore/goodsCost";
import resToken from "@/mixins/resToken";
import { mapGetters } from "vuex";
import baseFormAddEdit from "./baseFormAddEdit";
import costFormAddEdit from "./costFormAddEdit";
import companyHelper from "@/mixins/companyHelper";
import { add_sum, accMul } from "@/utils/validate";
import CompanySort from "@/components/globalComponents/company-sort/index.vue";
import { replaceTextWrapAndSpace } from "@/utils";
import ProductModal from "./productModal.vue";
import ProductListModal from "./productListModal.vue";
import { isStockOptions } from "@/assets/js/statusList";

import {
  options1,
  options2,
  options3,
  options4,
  options5,
  options6,
  options7,
  options8,
  options9,
  rules
} from "../columns";

export default {
  name: "goodsCostAdd",
  mixins: [resToken, companyHelper],
  props: ["showModel", "id", "type", "sitem", "business_companyNo"],
  components: {
    CompanySort,
    baseFormAddEdit,
    costFormAddEdit,
    ProductModal,
    ProductListModal
  },
  computed: {
    ...mapGetters(["tablebtnSize", "searchSize", "size"]),
    powers() {
      const { btnList } = this.$store.getters;
      const tran = btnList.find(i => i.menu_route == "goodsCostAdd") || {};
      const { action } = tran ?? {};
      return action ?? [];
    }
  },
  watch: {
    newTime: function(val) {
      if (val) {
        this.initForm();
      }
    }
  },
  data() {
    return {
      createSource:"",
      isStockOptions,
      areaInfo: {
        delivery_place: {
          code: [],
          label: []
        },
        origin_place: {
          code: [],
          label: []
        }
      },
      mVisible: false,
      modalType: "",
      editItem: null,
      editIndex: -1,
      childTableData: [],
      visible: false,
      companyName: "",
      spec_tableData: [],
      is_support_stock: "",
      cat_id_name: "",
      brand_name: "",
      unit_name: "",
      costshowModel: false,
      costmodelIndex: "",
      costsitem: {},
      showModel: false,
      modelIndex: "",
      is_noble: false,
      size: "small",
      status: "",
      rulesThis: this.rules,
      activeName: "1",
      loading: true,
      supplierName: "",
      options1: options1,
      options2: options2,
      options3: options3,
      options4: options4,
      options5: options5,
      options6: options6,
      options7: options7,
      options8: options8,
      options9: options9,
      sourceCombindList: [],
      ruleForm: {
        is_combind: "",
        company_id: ""
      },
      spec_tableData: [],
      old_spec_tableData: [],
      ladder_tableData: [],
      old_ladder_tableData: [],
      rules: rules
    };
  },
  mounted() {
    this.initForm();
  },
  methods: {
    num_change(evt, index) {
      this.$set(this.childTableData, index, {
        ...this.childTableData[index],
        child_num: evt
      });
    },
    onSaveLine(index) {
      const { child_num } = this.childTableData[index];

      if (Number(child_num) === 0) {
        this.$message.warning("组合比例不能为零！");
        return;
      }

      this.editIndex = -1;
    },
    onChildProdChange(index = null, type = "view") {
      this.modalType = type;

      if (type === "add") {
        if (this.editIndex !== -1) {
          this.$message.warning("当前有正在编辑的子商品,请先保存");
          return;
        }

        if (this.childTableData.length === 10) {
          this.$message.warning("子商品最多不能超过十条");
          return;
        }
      }

      if (type === "view" && index !== null) {
        this.editItem = { ...this.childTableData[index] };
      } else {
        this.editItem = null;
      }

      if (type === "edit") {
        if (this.editIndex !== -1) {
          this.$message.warning("当前有正在编辑的子商品,请先保存");
          return;
        }

        this.editIndex = index !== null ? index : -1;
        return;
      }

      this[type === "view" ? "mVisible" : "visible"] = true;
    },
    handleProductSelected(selecteds = []) {
      const childCodes = this.childTableData.map(({ childCode }) => childCode);
      selecteds.forEach(item => {
        const { childCode, child_name } = item;
        const _t = { childCode, child_name, child_num: 1 };
        if (!childCodes.includes(childCode)) {
          this.childTableData.push(_t);
        }
      });
    },
    onCompanyChange() {
      if (this.type === "add") {
        this.ruleForm.company_id = this.currentCompany;
      }
    },
    async initForm() {
      this.loading = true;
      this.resetFormData();
      this.rulesThis = this.rules;
      await this.resetForm();
      this.sch_is_noble();
      this.good_type_change();
      await this.get_golpricelast();
      this.stock_change();

      this.loading = false;
    },
    async number_change(e, key) {
      this.ruleForm[key] = e + "" || "0";
      this.$refs.ruleForm && this.$refs.ruleForm.validateField(key);
      await this.get_all_fee();
    },
    openEdit(index, sitem) {
      this.modelIndex = index;
      this.sitem = sitem;
      this.showModel = true;
    },
    stock_change() {
      if (this.ruleForm.is_stock === "0") {
        this.ruleForm.is_combind = "0";
      }

      this.rulesThis.stock_moq[0].required = this.ruleForm.is_stock === "1";
    },
    onDeleteItem(index) {
      if (this.editIndex !== -1) {
        this.$message.warning("当前有正在编辑的子商品,请先保存");
        return;
      }

      this.childTableData.splice(index, 1);
      // if (index === this.editIndex) {
      //   this.editIndex = -1;
      // }
    },
    openCostEdit(index, sitem) {
      // const { is_step } = this.ruleForm;
      // if (index === -1 && is_step === "0" && this.ladder_tableData.length > 0) {
      //   this.$message.warning("不启用阶梯成本，只能录入一条阶梯成本信息！");
      //   return;
      // }

      if(this.ladder_tableData.length >= 1 && this.sitem.create_source === "1" && index === -1){
        this.$message.warning("咨询成本商品只能录入一条阶梯成本信息！");
        return;
      }

      this.costmodelIndex = index;
      this.costsitem = sitem;
      this.costshowModel = true;
    },
    openDelete(index) {
      this.spec_tableData.splice(index, 1);
    },
    openCostEditDelete(index) {
      this.ladder_tableData.splice(index, 1);
    },
    // is_step_change() {
    //   const { is_step } = this.ruleForm;
    //   if (is_step === "0") {
    //     let res = [];
    //     let list =
    //       this.ladder_tableData.length === 0
    //         ? []
    //         : JSON.parse(JSON.stringify(this.ladder_tableData));
    //     if (list.length > 0) {
    //       res.push(list[0]);
    //     }
    //     this.ladder_tableData = res;
    //   }
    // },
    async submitForm() {
      if (this.editIndex !== -1) {
        this.$message.warning("当前有正在编辑的子商品,请先保存");
        return;
      }

      const { is_combind, is_gold_price } = this.ruleForm;

      if (is_combind === "1" && is_gold_price === "1" && this.is_noble) {
        this.$message.warning("组合商品不能启用实时金价");
        return;
      }

      this.sch_is_noble();
      this.good_type_change();
      this.ruleForm.good_remark = replaceTextWrapAndSpace(
        this.ruleForm.good_remark
      );
      this.ruleForm.craft_desc = replaceTextWrapAndSpace(
        this.ruleForm.craft_desc
      );
      this.ruleForm.after_sales = replaceTextWrapAndSpace(
        this.ruleForm.after_sales
      );
      await this.$refs.ruleForm.validate(async valid => {
        if (valid) {
          if (!this.loading) {
            this.loading = true;
            const {
              noble_weight,
              weight,
              is_gold_price,
              stock_moq,
              is_stock,
              supplierNo,
              company_id
            } = this.ruleForm;

            if (supplierNo.toString() === company_id) {
              this.$message.warning("供应商不能与业务公司相同！");
              loading = false;
              return;
            }
            if (this.is_support_stock + "" === "0" && is_stock === "0") {
              this.$message.warning(
                "该商品为供应商退货业务创建的，不允许改为非库存品！"
              );
              loading = false;
              return;
            }
            if (is_stock === "0") {
              const { scode, sdata, smsg } = await this.getSupplerPower();
              if (scode === 0) {
                const { has_account } = sdata;
                if (has_account + "" === "1") {
                  this.$message.warning(
                    "该供应商已开通账号，不允许创建非库存商品！"
                  );
                  this.loading = false;
                  return;
                }
              }
            }
            if (this.spec_tableData.length === 0) {
              this.$message.warning("请录入商品规格信息！");
              this.loading = false;
              return;
            }
            let isMust = true;
            this.spec_tableData.forEach(e => {
              if (e.isMust && !e.spec_value_id) {
                isMust = false;
              }
            });
            if (!isMust) {
              this.$message.warning("分类绑定的规格必须填写规格值！");
              this.loading = false;
              return;
            }
            if (this.ladder_tableData.length === 0) {
              this.$message.warning("请录入阶梯成本！");
              this.loading = false;
              return;
            }
            // stock_moq

            if (is_stock === "1") {
              let min = parseInt(this.ladder_tableData[0].min_num),
                smoq = parseInt(stock_moq);
              this.ladder_tableData.forEach(si => {
                let n = parseInt(si.min_num);
                min = n < min ? n : min;
              });

              if (smoq < min) {
                this.$message.warning("备库起订量不能低于成本最低起订量！");
                this.loading = false;
                return;
              }
            }

            if (this.is_noble) {
              if (noble_weight * 1000 > weight * 1000) {
                this.$message.warning("贵金属总重量不能大于商品总重量！");
                this.loading = false;
                return;
              }
            }

            if (is_gold_price === "1" && this.is_noble) {
              let is_p = true;
              this.ladder_tableData.forEach(v => {
                if (v.nake_fee * 1 !== 0) {
                  is_p = false;
                }
              });
            }

            let model = JSON.parse(JSON.stringify(this.ruleForm));
            model.cat_id = model.cat_id.toString();
            model.brandid = model.brandid.toString();
            model.supplierNo = model.supplierNo.toString();
            model.delivery_place = model.delivery_place.toString();
            model.origin_place = model.origin_place.toString();
            model.good_info_img = model.good_info_img.toString();
            model.good_img = model.good_img.toString();
            model.unit = model.unit.toString();
            model.speclist = JSON.parse(JSON.stringify(this.setResData(1)));
            model.good_ladder = JSON.parse(JSON.stringify(this.setResData(2)));
            model.config = model.config.toString();
            model.is_exclusive =
              model.is_exclusive.length > 0
                ? model.is_exclusive[model.is_exclusive.length - 1]
                : "";
            let res = {};
            delete model["id"];

            if (model.is_combind === "1") {
              if (this.childTableData.length === 0) {
                this.message.warning("请添加子商品!");
                return;
              }

              if (this.childTableData.length === 1) {
                this.message.warning("子商品数量必须大于1!");
                return;
              }

              if (this.type === "add") {
                model.combind_list = this.childTableData.map(item => ({
                  ...item,
                  is_del: "0"
                }));
              } else {
                const currentIds = this.childTableData.map(({ id }) => id);

                // 删除项
                const delCombinds = this.sourceCombindList
                  .filter(({ id }) => !currentIds.includes(String(id)))
                  .map(item => ({
                    ...item,
                    is_del: "1"
                  }));

                //原项
                const sourceCombinds = this.sourceCombindList
                  .filter(({ id }) => currentIds.includes(String(id)))
                  .map(item => ({
                    ...item,
                    is_del: "0"
                  }));

                const addCombinds = this.childTableData
                  .filter(({ id }) => !id)
                  .map(({ childCode, child_num, child_name }) => ({
                    childCode,
                    child_num,
                    child_name,
                    is_del: "0"
                  }));

                model.combind_list = [
                  ...delCombinds,
                  ...sourceCombinds,
                  ...addCombinds
                ];
              }
            }

            if (this.type === "add") {
              delete model["spuCode"];
              res = await asyncRequest.add(model);
            } else if (this.type === "editBase") {
              let item1 = this.setModel(model, "1");
              res = await asyncRequest.update(item1);
            } else if (this.type === "editCoin") {
              let item2 = this.setModel(model, "2");
              res = await asyncRequest.updateP(item2);
            } else {
              model.companyNo = model.company_id;
              delete model["company_id"];
              res = await asyncRequest.edit_update(model);
            }
            // console.log(res);
            this.loading = false;
            const { code, data, message } = res;
            if (code === 0) {
              const title =
                this.type === "add"
                  ? "新建成功！"
                  : this.type === "editBase"
                  ? "基础信息修改成功！"
                  : this.type === "editCoin"
                  ? "成本信息修改成功!"
                  : "商品信息修改成功";
              this.$notify.success({
                title: title,
                message: ""
              });
              this.showModelThis = false;
              // 刷新
              this.$emit("refresh");
            } else if (code >= 100 && code <= 104) {
              await this.logout();
            } else {
              this.$message.warning(message);
            }
          }
        } else {
          // console.log("error submit!!");
          return false;
        }
      });
    },
    groupGoodChange(e) {
      this.ruleForm.is_combind = e;
    },
    //获取规格值
    setResData(type) {
      let list = JSON.parse(
        JSON.stringify(type === 1 ? this.spec_tableData : this.ladder_tableData)
      );
      let oldlist = JSON.parse(
        JSON.stringify(
          type === 1 ? this.old_spec_tableData : this.old_ladder_tableData
        )
      );
      let hasIDlist = [];
      list.forEach(a => {
        if (a.id !== "") {
          hasIDlist.push(a);
        }
      });
      let newList = [];
      let resList = [];
      oldlist.forEach((a, ai) => {
        let item = null;
        let index = hasIDlist.findIndex(b => a.id === b.id);
        if (index === -1) {
          item = JSON.parse(JSON.stringify(a));
          item.is_del = "1";
        } else {
          item = JSON.parse(JSON.stringify(hasIDlist[index]));
        }
        newList.push(item);
      });
      list.forEach(b => {
        if (b.id === "") {
          b.is_del = "0";
          newList.push(b);
        }
      });
      if (type === 1) {
        newList.forEach(a => {
          let m = {
            id: a.id,
            spec_id: a.spec_id,
            spec_value_id: a.spec_value_id,
            is_del: a.is_del || "0"
          };
          resList.push(m);
        });
      } else {
        newList.forEach(a => {
          let m = {
            id: a.id,
            min_num: a.min_num,
            nake_fee: a.nake_fee,
            cost_fee: a.cost_fee,
            delivery_fee: a.delivery_fee,
            cert_fee: a.cert_fee,
            mark_fee: a.mark_fee,
            package_fee: a.package_fee,
            other_fee: a.other_fee,
            is_del: a.is_del || "0"
          };
          resList.push(m);
        });
      }
      return resList;
    },
    setladder() {
      let list = JSON.parse(JSON.stringify(this.ladder_tableData));
      let oldlist = JSON.parse(JSON.stringify(this.old_ladder_tableData));
      let hasIDlist = [];
      list.forEach(a => {
        if (a.id !== "") {
          hasIDlist.push(a);
        }
      });
      let newList = [];
      let resList = [];
      oldlist.forEach((a, ai) => {
        let item = null;
        let index = hasIDlist.findIndex(b => a.id === b.id);
        if (index === -1) {
          item = JSON.parse(JSON.stringify(a));
          item.is_del = "1";
        } else {
          item = JSON.parse(JSON.stringify(b));
        }
        newList.push(item);
      });
      list.forEach(b => {
        if (b.id === "") {
          b.is_del = "0";
          newList.push(b);
        }
      });
      newList.forEach(a => {
        let m = {
          id: a.id,
          min_num: a.min_num,
          spec_value_id: a.spec_value_id,
          is_del: a.is_del || "0"
        };
        resList.push(m);
      });
      return resList;
    },
    //规格编辑修改
    refreshEdit(e) {
      let item = JSON.parse(JSON.stringify(e));
      const {
        index,
        id,
        spec_id,
        isMust,
        spec_value,
        spec_value_id,
        spec_value_value
      } = item;
      let ffindex = -1;
      this.spec_tableData.forEach((i, findex) => {
        if (i.spec_id === spec_id) {
          ffindex = findex;
          this.spec_tableData[findex].id = id;
          this.spec_tableData[findex].spec_id = spec_id;
          // this.spec_tableData[findex].isMust = isMust;
          this.spec_tableData[findex].spec_value = spec_value;
          this.spec_tableData[findex].spec_value_id = spec_value_id;
          this.spec_tableData[findex].spec_value_value = spec_value_value;
        }
      });
      if (ffindex === -1) {
        this.spec_tableData.push(item);
      }
      this.showModel = false;
    },
    //阶梯成本修改
    async costrefreshEdit(e) {
      let item = JSON.parse(JSON.stringify(e));
      const {
        index,
        id,
        cost_fee,
        delivery_fee,
        min_num,
        nake_fee,
        cert_fee,
        mark_fee,
        package_fee,
        other_fee
      } = item;
      let isok = true;
      let ffindex = -1;
      if (this.ladder_tableData && this.ladder_tableData.length === 0) {
        this.ladder_tableData.push(item);
      } else {
        this.ladder_tableData.forEach((i, findex) => {
          if (parseInt(min_num + "") === parseInt(i.min_num + "")) {
            isok = false;
            this.ladder_tableData[findex].id = id;
            this.ladder_tableData[findex].min_num = min_num;
            this.ladder_tableData[findex].cost_fee = cost_fee;
            this.ladder_tableData[findex].delivery_fee = delivery_fee;
            this.ladder_tableData[findex].nake_fee = nake_fee;
            this.ladder_tableData[findex].cert_fee = cert_fee;
            this.ladder_tableData[findex].mark_fee = mark_fee;
            this.ladder_tableData[findex].package_fee = package_fee;
            this.ladder_tableData[findex].other_fee = other_fee;
          }
        });
        if (isok) {
          this.ladder_tableData.forEach((i, findex) => {
            if (findex === parseInt(index + "")) {
              ffindex = findex;
              this.ladder_tableData[findex].id = id;
              this.ladder_tableData[findex].min_num = min_num;
              this.ladder_tableData[findex].cost_fee = cost_fee;
              this.ladder_tableData[findex].delivery_fee = delivery_fee;
              this.ladder_tableData[findex].nake_fee = nake_fee;
              this.ladder_tableData[findex].cert_fee = cert_fee;
              this.ladder_tableData[findex].mark_fee = mark_fee;
              this.ladder_tableData[findex].package_fee = package_fee;
              this.ladder_tableData[findex].other_fee = other_fee;
            }
          });
          if (ffindex === -1) {
            this.ladder_tableData.push(item);
          }
        }
      }

      await this.get_all_fee();
      this.showModel = false;
    },
    async get_golpricelast() {
      const { noble_metal } = this.ruleForm;
      if (noble_metal) {
        let model = {
          type: noble_metal
        };
        const { code, data, message } = await asyncRequest.golpricelast(model);
        if (code === 0) {
          data.forEach(e => {
            if (e.type) {
              this.ruleForm.noble_price = e.price;
            }
          });
        } else if (code >= 100 && code <= 104) {
          await this.logout();
        } else {
          this.$message.warning(message);
        }
      } else {
        this.ruleForm.noble_price = "0";
      }
    },
    async get_all_fee() {
      await this.get_golpricelast();
      this.ladder_tableData.forEach((si, sii) => {
        this.ladder_tableData[sii].nake_total = this.count_fee(si);
        this.$set(this.ladder_tableData, sii, this.ladder_tableData[sii]);
      });
    },
    count_fee(e) {
      const {
        noble_price, //供应商采购金价
        is_gold_price, //是否启用实时金价
        noble_weight //贵金属重量
      } = this.ruleForm;
      const {
        nake_fee, //成本单价
        cost_fee, //工艺费
        delivery_fee, //物流费

        cert_fee, //证书费
        mark_fee, //加标费
        package_fee, //包装费
        other_fee //其他费用
      } = e;
      let XA = add_sum(nake_fee, delivery_fee),
        XB = add_sum(package_fee, cert_fee),
        XC = add_sum(mark_fee, other_fee),
        XD = 0;
      let total = add_sum(add_sum(XA, XB), XC);
      // console.log(total);
      if (this.is_noble && is_gold_price === "1") {
        XD = add_sum(
          accMul(noble_price, noble_weight),
          accMul(noble_weight, cost_fee)
        );
        total = add_sum(total, XD);
      }
      return total;
    },

    dataSort(key) {
      return function(a, b) {
        let value1 = a[key];
        let value2 = b[key];
        return value1 - value2;
      };
    },
    async getSupplerPower() {
      const { code, data, message } = await asyncRequest.supplerlist({
        code: this.ruleForm.supplierNo[0],
        is_platform: "",
        name: "",
        page: 1,
        size: 1000
      });
      return { scode: code, sdata: data, smsg: message };
    },
    resetFormData() {
      this.is_support_stock = "1";
      this.spec_tableData = [];
      this.old_spec_tableData = [];
      this.ladder_tableData = [];
      this.old_ladder_tableData = [];
      this.cat_id_name = "";
      this.is_noble = false;
      this.status = "";
      this.brand_name = "";
      this.unit_name = "";
      this.supplierName = "";

      this.ruleForm = {
        id: "",
        spuCode: "",
        cat_id: [],
        brandid: [],
        noble_weight: "0",
        weight: "0",
        good_type: "0",
        is_stock: "0",
        supplierNo: [],
        company_id: "",
        is_auth: "",
        tax: "",
        good_name: "",
        unit: [],
        is_exclusive: [],
        noble_metal: "",
        is_gold_price: "",
        moq: "",
        customized: "",
        after_sales: "",
        craft_desc: "",
        good_remark: "",
        //包装发货/图片
        packing_list: "",
        packing_way: "",
        packing_spec: "",
        packing_weight: "",
        packing_size: "",
        good_size: "",
        good_bar: "",
        supply_area: "",
        delivery_place: [],
        origin_place: [],
        delivery_day: "0",
        lead_time: "0",
        sample_day: "0",
        good_thumb_img: "",
        good_img: [],
        good_info_img: [],
        //固定阶梯成本
        demo_fee: "0",
        open_fee: "0",
        sample_fee: "0",
        market_price: "0",
        cgd_gold_price: "0",
        noble_price: "0",
        // is_step: "0",
        is_diff: "",
        config: [],
        other_config: "",
        stock_moq: "0",
        is_combind: ""
      };
    },

    async resetForm() {
      // 重置
      await this.$nextTick(async () => {
        if (this.$refs.ruleForm) {
          this.$refs.ruleForm.resetFields();
          this.$refs.ruleForm.clearValidate();
          this.spec_tableData = [];
          this.old_spec_tableData = [];
          this.ladder_tableData = [];
          this.old_ladder_tableData = [];
          const {
            id,
            companyName,
            spuCode, //string	商品spuCode
            // good_code, //string	无
            good_name, //string	商品名称
            // cat_id, //string	分类id
            cat_info, //array 分类
            brand_id, //string	品牌id
            unit,
            supplierName,
            companyNo, //	string	企业公司id
            good_unit, //	string	商品单位
            good_type, //string	是否定制 1是0否
            moq, //string	起订量
            is_exclusive, //	string	是否是专属
            customized, //	string	定制工期
            tax, //string	税率
            supplierNo, //	string	供应商
            is_auth, //string	是否有销售权限0 否1 是
            auth_img, //	string	无
            exclusive,
            is_stock, //
            after_sales, //	string	售后说明
            craft_desc, //	string	工艺说明
            good_remark, //	string	商品备注
            weight, //	string	重量
            packing_way, //	string	包装方式
            packing_size, //	string	包装尺寸
            good_size, //商品尺寸
            packing_spec, //	string	包装规格
            packing_list, //	string	包装清单
            packing_weight, //	string	装箱重量
            good_bar, //	string	条形码
            supply_area, //	string	供货区域 1 全国2 除偏远地区
            delivery_place, //	string	发货地区
            origin_place, //	string	产地
            delivery_day, //	string	物流天数
            lead_time, //	string	供货周期
            sample_day, //string	调样周期
            sample_fee, //		string	调样费有
            good_img, //	string	商品图片
            good_thumb_img, //	string	商品说略图
            good_info_img, //	string	商品详情图
            demo_fee, //	string	打样费
            open_fee, //	string	开模费
            noble_metal, //	string	金属类别
            noble_weight, //	string	金属重量
            is_gold_price, //	string	是否使用实时金价
            market_price, //	string	市场价
            cgd_gold_price, //	string	供应商采购金价
            noble_price,
            // is_step, //	string	是否使用阶梯价
            // is_online, //	string	是否上线
            status, //		string	状态
            nakelist, //阶梯成本
            speclist, //商品规格
            brand_name,
            config,
            is_diff,
            other_config,
            stock_moq,
            is_support_stock,
            is_combind,
            combind_list,
            create_source,
            noble_name
          } = this.sitem;

          this.createSource = create_source

          if (this.type !== "add") {
            const { name, area_code } = await this.getArea("delivery_place");

            if(name && area_code){
              this.areaInfo.delivery_place.label = [name];
              this.areaInfo.delivery_place.code = [area_code];
              const { name: _name, area_code: _area_code } = await this.getArea(
                "origin_place"
              );
              this.areaInfo.origin_place.label = [_name];
              this.areaInfo.origin_place.code = [_area_code];
            }
          }

          this.companyName = companyName;

          if (this.type !== "add") {
            this.childTableData = combind_list.map(
              ({ childCode, child_name, child_num, id }) => ({
                childCode,
                child_name,
                child_num,
                id
              })
            );

            this.sourceCombindList = this.childTableData.map(item => ({
              ...item
            }));
          }

          this.is_support_stock = is_support_stock || "1";
          let cat_id_name = "";
          let cat_id = [];
          (cat_info || []).forEach((ai, i) => {
            cat_id_name += i === 0 ? ai.name : `_${ai.name}`;
            cat_id.push(ai.id);
          });
          this.cat_id_name = cat_id_name;
          let isok = false;
          if (cat_id.length > 0) {
            cat_id.forEach(i => {
              if (i === "6") {
                isok = true;
              }
            });
          }
          let exclusiveList = [];
          if (exclusive && exclusive.length > 0) {
            exclusive.forEach((a, ai) => {
              exclusiveList.push(a.id);
            });
          }
          this.is_noble = isok;

          let spec_list1 =
            speclist && speclist.length > 0
              ? JSON.parse(JSON.stringify(speclist))
              : [];
          spec_list1.forEach(a => {
            let model = {
              id: a.id,
              is_del: a.is_del,
              spec_id: a.spec_id,
              spec_value: a.spec_name,
              spec_value_value: a.spec_value,
              spec_value_id: a.spec_value_id,
              spuCode: a.spuCode
            };
            this.spec_tableData.push(model);
          });
          this.old_spec_tableData = JSON.parse(
            JSON.stringify(this.spec_tableData)
          );

          let list2 =
            nakelist && nakelist.length > 0
              ? JSON.parse(JSON.stringify(nakelist))
              : [];
          this.ladder_tableData = list2;
          this.old_ladder_tableData = JSON.parse(
            JSON.stringify(this.ladder_tableData)
          );
          this.status = status;
          this.brand_name = brand_name;
          this.unit_name = unit;
          this.supplierName = supplierName || "";
          this.ruleForm = {
            id: id || "",
            spuCode: spuCode || "",
            cat_id:
              cat_id && cat_id.length > 0 ? [cat_id[cat_id.length - 1]] : [],
            brandid: brand_id ? [brand_id] : [],
            noble_weight: noble_weight || "",
            weight: weight || "",
            good_type: good_type || "0",
            is_stock: is_stock || "0",
            supplierNo: supplierNo ? [supplierNo] : [],
            company_id: companyNo,
            is_auth: is_auth || "",
            tax: tax ? tax + "%" : "",
            good_name: good_name || "",
            unit: good_unit ? [good_unit] : [],
            is_exclusive: exclusiveList || [],
            noble_metal: noble_metal || "",
            is_gold_price: "0",
            moq: moq || "0",
            customized: customized || "0",
            after_sales: after_sales || "",
            craft_desc: craft_desc || "",
            good_remark: good_remark || "",
            //包装发货/图片
            packing_list: packing_list || "",
            packing_way: packing_way || "",
            packing_spec: packing_spec || "",
            packing_weight: packing_weight || "",
            packing_size: packing_size || "",
            good_size: good_size || "",
            good_bar: good_bar || "",
            supply_area: supply_area || "",
            delivery_place: delivery_place
              ? (delivery_place || "").split(",")
              : [],
            origin_place: origin_place ? (origin_place || "").split(",") : [],
            delivery_day: delivery_day || "",
            lead_time: lead_time || "",
            sample_day: sample_day || "",
            good_thumb_img: good_thumb_img || "",
            good_img: good_img
              ? Object.prototype.toString.call(good_img) === "[object Array]"
                ? []
                : (good_img || "").split(",")
              : [],
            good_info_img: good_info_img
              ? (Object.prototype.toString.call(good_info_img) ===
                "[object Array]"
                  ? []
                  : good_info_img || ""
                ).split(",")
              : [],
            //固定阶梯成本
            demo_fee: demo_fee || "",
            open_fee: open_fee || "",
            sample_fee: sample_fee || "",
            market_price: market_price || "",
            cgd_gold_price: cgd_gold_price || "",
            noble_price: noble_price || "0",
            // is_step: is_step || "0",
            is_diff: is_diff || "",
            config: config ? config.split(",") : [],
            other_config: other_config || "",
            stock_moq: stock_moq || "0",
            is_combind: is_combind || ""
          };


          this.nobleMetalNames = noble_name; 

        }

        if (this.type === "add") this.ruleForm.company_id = this.currentCompany;
        await this.set_must_spec();
      });
    },
    sch_is_noble() {
      let list = [
        "noble_weight",
        "noble_metal",
        "is_gold_price",
        "is_diff",
        "config",
        "other_config",
        "cgd_gold_price"
      ];
      for (let i = 0; i < list.length; i++) {
        if (list[i] === "cgd_gold_price") {
          const { is_gold_price } = this.ruleForm;
          this.rulesThis[list[i]][0].required =
            this.is_noble && is_gold_price === "1";
          // console.log(list[i] + "===" + this.rulesThis[list[i]][0].required);
        } else {
          this.rulesThis[list[i]][0].required = this.is_noble;
        }

        this.$refs.ruleForm && this.$refs.ruleForm.validateField(list[i]);
      }
    },
    setModel(model, type) {
      let item = null;
      if (type === 1) {
        item = JSON.parse(JSON.stringify(model));
        delete item["demo_fee"];
        delete item["open_fee"];
        delete item["noble_metal"];
        delete item["noble_weight"];
        delete item["is_gold_price"];
        delete item["market_price"];
        delete item["cgd_gold_price"];
        // delete item["is_step"];
        delete item["good_ladder"];
      } else {
        const {
          demo_fee,
          open_fee,
          noble_metal,
          noble_weight,
          is_gold_price,
          market_price,
          cgd_gold_price,
          // is_step,
          good_ladder,
          spuCode
        } = model;
        item = {
          demo_fee: demo_fee || "",
          open_fee: open_fee || "",
          noble_metal: noble_metal || "",
          noble_weight: noble_weight || "",
          is_gold_price: is_gold_price || "",
          market_price: market_price || "",
          cgd_gold_price: cgd_gold_price || "",
          // is_step: is_step || "",
          good_ladder: good_ladder || [],
          spuCode: spuCode || ""
        };
      }
      return model;
    },
    //商品分类选择
    async goods_class_change(e) {
      const { is_gold, pid, id, label, cat_desc } = e;
      this.spec_tableData = [];
      this.ruleForm.cat_id = id ? [id] : [];
      this.$refs.ruleForm && this.$refs.ruleForm.validateField("cat_id");
      this.ruleForm.after_sales = cat_desc || "";
      this.$refs.ruleForm && this.$refs.ruleForm.validateField("after_sales");
      this.is_noble = is_gold;
      this.sch_is_noble();
      await this.set_must_spec();
      await this.get_all_fee();
    },
    async getArea(prop = "delivery_place") {
      const chunks = this.sitem[prop].split(",");
      if(chunks.length !== 3) return {nanme:"", area_code:""}
      let { data: province } = await asyncRequest.province();
      province = province.find(
        ({ province_code }) => province_code === chunks[0]
      );
      let { data: city } = await asyncRequest.city({ code: chunks[0] });
      city = city.find(({ city_code }) => city_code === chunks[1]);
      let { data: area } = await asyncRequest.area({ code: chunks[1] });
      return area.find(({ area_code }) => area_code === chunks[2]) || {};
    },
    async set_must_spec() {
      const { cat_id } = this.ruleForm;
      let id = cat_id.length == 1 ? cat_id[0] : "";
      if (id) {
        const { code, message, data } = await asyncRequest.catinfo({ id });

        this.ruleForm.after_sales = data.cat_desc;
        this.$refs.ruleForm && this.$refs.ruleForm.validateField("after_sales");

        const unionSpec = spec => {
          const newArr = [];
          const map = new Map();
          spec.forEach((item, index) => {
            if (!map.has(item.id)) {
              map.set(item.id, index);
              newArr.push(item);
            }
          });
          return newArr;
        };

        if (code === 0) {
          const { spec: _spec = [] } = data;
          const spec = unionSpec(_spec);

          if (spec && spec.length > 0) {
            if (this.spec_tableData && this.spec_tableData.length > 0) {
              this.spec_tableData.forEach(c => {
                c.isMust = false;
              });

              spec.forEach((a, ai) => {
                let findex = this.spec_tableData.findIndex(
                  b => b.spec_id + "" === a.id + ""
                );
                if (findex !== -1) {
                  this.spec_tableData[findex].isMust = true;
                } else {
                  this.spec_tableData.push({
                    id: "",
                    index: "1",
                    spec_id: a.id + "",
                    spec_value: a.spec_name,
                    isMust: true,
                    spec_value_value: "",
                    spec_value_id: ""
                  });
                }
              });
            } else {
              spec.forEach((a, ai) => {
                let model = {
                  id: "",
                  index: "1",
                  spec_id: a.id + "",
                  spec_value: a.spec_name,
                  isMust: true,
                  spec_value_value: "",
                  spec_value_id: ""
                };
                this.spec_tableData.push(model);
              });
            }
          }
          this.spec_tableData.map((e, ei) => {
            e.index = ei + "";
            return e;
          });

          this.spec_tableData.forEach((si, sii) => {
            this.$set(this.spec_tableData, sii, si);
          });

          this.ruleForm.after_sales = data.cat_desc || "";
          this.$refs.ruleForm &&
            this.$refs.ruleForm.validateField("after_sales");
        } else if (code >= 100 && code <= 104) {
          await this.logout();
        } else {
          this.$message.warning(message);
        }
      } else {
        this.spec_tableData.forEach((si, sii) => {
          si.isMust = false;
          this.$set(this.spec_tableData, sii, si);
        });
      }
    },
    async is_goold_price_change(e) {
      await this.get_all_fee();
    },
    //商品品牌选择
    brandidsearchChange(e) {
      const { id, code, label } = e;
      this.ruleForm.brandid = id ? [id] : [];
      this.$refs.ruleForm && this.$refs.ruleForm.validateField("brandid");
    },
    //供应商选择
    supplierNosearchChange(e) {
      const { id, code, label } = e;
      this.ruleForm.supplierNo = code ? [code] : [];
      this.$refs.ruleForm && this.$refs.ruleForm.validateField("supplierNo");
    },
    //业务企业选择
    company_idsearchChange(e) {
      const { code } = e;
      this.ruleForm.company_id = code || "";
      this.$refs.ruleForm && this.$refs.ruleForm.validateField("company_id");
    },
    //税点选择
    taxsearchChange(e) {
      this.ruleForm.tax = e;
      this.$refs.ruleForm && this.$refs.ruleForm.validateField("tax");
    },
    //专属类型选择
    exclusiveSearchChange(e) {
      this.ruleForm.is_exclusive = e;
      this.$refs.ruleForm && this.$refs.ruleForm.validateField("is_exclusive");
    },
    //单位选择
    unitsearchChange(e) {
      const { id, code, label } = e;
      this.ruleForm.unit = code ? [code] : [];
      this.$refs.ruleForm && this.$refs.ruleForm.validateField("unit");
    },
    //贵金属种类选择
    async noble_metalsearchChange(e) {
      console.log(e);
      const { id, code, label } = e;
      this.ruleForm.noble_metal = id || "";
      this.$refs.ruleForm && this.$refs.ruleForm.validateField("noble_metal");
      await this.get_all_fee();
    },
    async areaChange(e, key) {
      const { code, area_code, label } = e;
      this.ruleForm[key] = code ? code.split(",") : [];
      this.areaInfo[key].code = area_code ? [area_code] : [];
      this.areaInfo[key].label = label ? [label] : [];
      this.$refs.ruleForm && this.$refs.ruleForm.validateField(key);
    },
    //省市区
    selectAreaChange(e, key) {
      this.ruleForm[key] = e;
      this.$refs.ruleForm && this.$refs.ruleForm.validateField(key);
    },
    closeImg(index, key) {
      this.ruleForm[key].splice(index, 1);
      this.$refs.ruleForm && this.$refs.ruleForm.validateField(key);
    },

    //图片上传成功
    async UploadSuccessEvent(data, key) {
      const { url } = data;
      if (url === "noToken") {
        await this.logout();
      } else {
        if (key === "good_thumb_img") {
          this.ruleForm[key] = url;
        } else {
          if (this.ruleForm[key].length < 10) {
            this.ruleForm[key].push(url);
          }
        }
        this.$refs.ruleForm && this.$refs.ruleForm.validateField(key);
        this.$message.success("图片上传成功!");
      }
    },
    good_type_change() {
      let list = ["moq", "customized"];
      for (let i = 0; i < list.length; i++) {
        this.rulesThis[list[i]][0].required = this.ruleForm.good_type === "1";
        this.$refs.ruleForm && this.$refs.ruleForm.validateField(list[i]);
      }
    },
    UploadErrorEvent(res, key) {
      if (res !== "break") {
        this.$message.error("图片上传失败!");
        this.$refs.ruleForm && this.$refs.ruleForm.validateField(key);
      }
    },
    //判断图片规格
    beforeAvatarUpload(file) {
      let isJPG = false;
      if (
        file.type === "image/jpg" ||
        file.type === "image/png" ||
        file.type === "image/jpeg"
      ) {
        isJPG = true;
      }
      const isLt2M = file.size / 1024 / 1024 < 1;
      if (!isJPG) {
        this.$message.error("图片格式不正确！");
      }
      if (!isLt2M) {
        this.$message.error("图片大小不能超过 1MB!");
      }
      return isJPG && isLt2M;
    }
  }
};
</script>
<style lang="scss" scoped>
.goodsCostDetail {
  // position: relative;
  .good_info_img_div {
    ul {
      width: 100%;
      li {
        float: left;
        width: 55px;
        height: 55px;
        padding: 0 5px 0 0;
        .img-show-li-div {
          width: 50px;
          height: 50px;
          border: 1px solid #dfe4ed;
          background: #dfe4ed;
          position: relative;
          img.img-show {
            width: 100%;
            height: 100%;
            position: relative;
            display: inline-block;
          }
          i.el-icon-close {
            position: absolute;
            z-index: 2;
            top: 0;
            right: 0;
            color: #dfe4ed;
          }
          &:hover {
            i.el-icon-close {
              cursor: pointer;
              color: #6954f0;
            }
          }
        }
      }
    }
  }

  .goodsCostAdd-title {
    border-top: 1px solid #ebeef5;
    span {
      height: 50px;
      line-height: 50px;
      font-family: "微软雅黑", sans-serif;
      font-weight: 400;
      font-style: normal;
      font-size: 16fpx;
      text-align: left;
    }
  }
}
</style>