BST_bigScreen/src/views/OrderMannage/BusinessOrderlist/edit.vue

<template>
  <div>
    <Toptitle
      :title="type == 1 ? '新增订单' : type == 2 ? '编辑订单' : '订单详情'"
    >
      <Button
        @click="print"
        type="primary"
        ghost
        v-show="type == 3"
        style="margin-right: 10px"
        >打印</Button
      >
      <Button
        @click="quoteRoughDraft"
        type="primary"
        v-show="type == 1"
        style="margin-right: 10px"
        >引用草稿</Button
      >
      <Button
        @click="saveRoughDraft"
        type="primary"
        v-show="type == 1"
        style="margin-right: 10px"
        >保存草稿</Button
      >
      <Button @click="back" type="primary" ghost style="margin-right: 10px"
        >返回</Button
      >
      <Button
        @click="showForms = true"
        type="primary"
        v-show="type != 3"
        style="margin-right: 10px"
        >表单设置</Button
      >
      <Button
        type="primary"
        v-show="type != 3"
        @click="handleSubmit('infoOrder')"
        >保存</Button
      >
    </Toptitle>

    <div class="page-edit">
      <!-- 表单项 -->
      <Form
        ref="infoOrder"
        inline
        :label-width="100"
        :model="info"
        style="padding: 10px 0"
        :rules="infoRules"
      >
        <!-- 订单编号 -->
        <FormItem
          v-if="formSetTableData.filter((v) => v.key == 'order_no')[0].is_show"
          :label="formSetTableData.filter((v) => v.key == 'order_no')[0].title"
        >
          <Input
            disabled
            v-if="type != 3"
            v-model="info.order_no"
            class="auto-width"
            placeholder="自动生成"
          />
          <span v-else>{{ info.order_no }}</span>
        </FormItem>
        <!-- 负责人 -->
        <FormItem
          v-if="
            formSetTableData.filter((v) => v.key == 'custom_detail_name')[0]
              .is_show
          "
          :label="
            formSetTableData.filter((v) => v.key == 'custom_detail_name')[0]
              .title
          "
        >
          <Select
            placeholder="请选择负责人"
            v-if="type != 3"
            clearable
            filterable
            v-model="info.custom_detail_name"
            @on-change="handleClientChargeChange"
            class="auto-width"
          >
            <!-- @on-change="handleClientDetailChange" -->
            <Option
              v-for="item of clientDetailList_respon"
              :key="item.service_name"
              :label="item.service_name"
              :value="item.service_name"
            ></Option>
          </Select>
          <span v-else>{{ info.custom_detail_name }}</span>
        </FormItem>
        <!-- 详细地址 -->
        <FormItem
          v-if="
            formSetTableData.filter((v) => v.key == 'custom_detail_id')[0]
              .is_show
          "
          :label="
            formSetTableData.filter((v) => v.key == 'custom_detail_id')[0].title
          "
        >
          <Select
            clearable
            filterable
            v-if="type != 3"
            class="auto-width"
            @on-change="handleClientDetailChange"
            v-model="info.custom_detail_id"
          >
            <Option
              v-for="item in clientDetailList_address"
              :label="item.address"
              :key="item.id"
              :value="item.id"
            ></Option>
          </Select>
          <span v-else>{{
            clientDetailList.filter((v) => v.id == info.custom_detail_id)
              .length > 0
              ? clientDetailList.filter((v) => v.id == info.custom_detail_id)[0]
                  .area_title
              : ""
          }}</span>
        </FormItem>
        <!-- 项目名称 -->
        <FormItem
          v-if="
            formSetTableData.filter((v) => v.key == 'residential_name')[0]
              .is_show
          "
          :label="
            formSetTableData.filter((v) => v.key == 'residential_name')[0].title
          "
          prop="residential_name"
        >
          <Input
            v-model="info.residential_name"
            v-if="type != 3"
            class="auto-width"
            placeholder="请输入项目名称"
          />
          <span v-else>{{ info.residential_name }}</span>
        </FormItem>
        <!-- 包装 -->
        <FormItem
          prop="box_id"
          v-if="formSetTableData.filter((v) => v.key == 'box_id')[0].is_show"
          :label="formSetTableData.filter((v) => v.key == 'box_id')[0].title"
        >
          <Select
            clearable
            filterable
            v-if="type != 3"
            v-model="info.box_id"
            class="auto-width"
          >
            <Option
              v-for="item of sub_material_list"
              :key="item.id"
              :label="item.title"
              :value="item.id"
            ></Option>
          </Select>
          <span v-else>{{
            sub_material_list.length > 0 && info.box_id
              ? sub_material_list.filter((item) => item.id == info.box_id)[0]
                  .title
              : ""
          }}</span>
        </FormItem>
        <!-- 紧急程度 -->
        <FormItem
          v-if="
            formSetTableData.filter((v) => v.key == 'warning_state')[0].is_show
          "
          :label="
            formSetTableData.filter((v) => v.key == 'warning_state')[0].title
          "
          prop="warning_state"
        >
          <Select
            clearable
            class="auto-width"
            v-if="type != 3"
            v-model="info.warning_state"
          >
            <Option
              :label="_item.title"
              v-for="_item in warningList"
              :key="_item.id"
              :value="_item.id"
            ></Option>
          </Select>
          <span v-else>{{
            warningList.length > 0 && info.warning_state
              ? warningList.filter((item) => item.id == info.warning_state)[0]
                  .title
              : ""
          }}</span>
        </FormItem>
        <!-- 客户名称 -->
        <FormItem
          v-if="
            formSetTableData.filter((v) => v.key == 'client_name')[0].is_show
          "
          :label="
            formSetTableData.filter((v) => v.key == 'client_name')[0].title
          "
          prop="custom_id"
        >
          <Select
            clearable
            filterable
            v-if="type != 3"
            class="auto-width"
            @on-change="handleClientChange"
            v-model="info.custom_id"
          >
            <Option
              v-for="item in clientList"
              :label="item.title"
              :key="item.id"
              :value="item.id"
            ></Option>
          </Select>
          <span v-else>{{
            clientList.length > 0 && info.custom_id
              ? clientList.filter((item) => item.id == info.custom_id)[0].title
              : ""
          }}</span>
        </FormItem>
        <!-- 手机号 -->
        <FormItem
          v-if="
            formSetTableData.filter((v) => v.key == 'custom_detail_mobile')[0]
              .is_show
          "
          :label="
            formSetTableData.filter((v) => v.key == 'custom_detail_mobile')[0]
              .title
          "
        >
          <Select
            clearable
            filterable
            v-if="type != 3"
            class="auto-width"
            v-model="info.custom_detail_mobile"
          >
            <Option
              v-for="item in clientDetailList_mobile"
              :label="item.mobile"
              :key="item.id"
              :value="item.mobile"
            ></Option>
          </Select>
          <span v-else>{{ info.custom_detail_mobile }}</span>
        </FormItem>
        <!-- 开始日期 -->
        <FormItem
          v-if="
            formSetTableData.filter((v) => v.key == 'start_time')[0].is_show
          "
          :label="
            formSetTableData.filter((v) => v.key == 'start_time')[0].title
          "
        >
          <DatePicker
            :options="options"
            v-if="type != 3"
            v-model="info.start_time"
            type="date"
            placeholder="开始日期"
            class="auto-width"
          ></DatePicker>
          <span v-else>{{ info.start_time }}</span>
        </FormItem>
        <!-- 交付日期 -->
        <FormItem
          v-if="formSetTableData.filter((v) => v.key == 'end_time')[0].is_show"
          :label="formSetTableData.filter((v) => v.key == 'end_time')[0].title"
        >
          <DatePicker
            :options="options"
            v-if="type != 3"
            v-model="info.end_time"
            type="date"
            placeholder="交付日期"
            class="auto-width"
          ></DatePicker>
          <span v-else>{{ info.end_time }}</span>
        </FormItem>
        <!-- 专营业务员 -->
        <FormItem
          v-if="
            formSetTableData.filter((v) => v.key == 'service_id')[0].is_show
          "
          :label="
            formSetTableData.filter((v) => v.key == 'service_id')[0].title
          "
        >
          <Select
            disabled
            v-if="type != 3"
            placeholder="自动带出"
            v-model="info.service_id"
            class="auto-width"
          >
            <Option
              v-for="item of users"
              :key="item.id"
              :label="item.nickname"
              :value="item.id"
            ></Option>
          </Select>
          <span v-else>{{
            users.length > 0 && info.service_id
              ? users.filter((item) => item.id == info.service_id)[0].nickname
              : ""
          }}</span>
        </FormItem>
        <!-- 产品总价 -->
        <FormItem
          v-if="
            formSetTableData.filter((v) => v.key == 'predict_price')[0].is_show
          "
          :label="
            formSetTableData.filter((v) => v.key == 'predict_price')[0].title
          "
        >
          <Input
            v-model="info.predict_price"
            v-if="type != 3"
            readonly
            class="auto-width"
            placeholder="自动生成"
          />
          <span v-else>{{ info.predict_price }}</span>
        </FormItem>
        <!-- 折扣金额 -->
        <FormItem
          v-if="formSetTableData.filter((v) => v.key == 'fax_price')[0].is_show"
          :label="formSetTableData.filter((v) => v.key == 'fax_price')[0].title"
        >
          <Input
            v-model="info.fax_price"
            v-if="type != 3"
            @on-change="handleFaxPriceChange"
            class="auto-width"
            placeholder="自动生成"
          />
          <span v-else>{{ info.fax_price }}</span>
        </FormItem>
        <!-- 订单金额 -->
        <FormItem
          v-if="
            formSetTableData.filter((v) => v.key == 'order_price')[0].is_show
          "
          :label="
            formSetTableData.filter((v) => v.key == 'order_price')[0].title
          "
        >
          <Input
            v-model="info.order_price"
            v-if="type != 3"
            @on-change="handleOrderPriceChange($event)"
            class="auto-width"
            placeholder="自动生成"
          />
          <span v-else>{{ info.order_price }}</span>
        </FormItem>
        <!-- 项目定金 -->
        <FormItem
          v-if="
            formSetTableData.filter((v) => v.key == 'front_money')[0].is_show
          "
          :label="
            formSetTableData.filter((v) => v.key == 'front_money')[0].title
          "
        >
          <Input
            v-model="info.front_money"
            class="auto-width"
            v-if="type != 3"
            placeholder="请输入项目定金"
          />
          <span v-else>{{ info.front_money }}</span>
        </FormItem>
        <!-- 订单备注 -->
        <FormItem
          v-if="formSetTableData.filter((v) => v.key == 'remark')[0].is_show"
          :label="formSetTableData.filter((v) => v.key == 'remark')[0].title"
        >
          <Input
            v-model="info.remark"
            type="textarea"
            v-if="type != 3"
            class="auto-width"
            placeholder="请输入订单备注"
          />
          <span v-else>{{ info.remark }}</span>
        </FormItem>

        <!-- 上传附件 -->
        <FormItem label="上传附件:">
          <div class="product-img">
            <div class="product-add">
              <div class="items" v-for="(item, index) of info.img" :key="index">
                <img
                  @click="looks(item)"
                  :src="$store.state.ip + item"
                  alt=""
                />
                <Icon
                  v-if="type != 3"
                  size="20"
                  @click="delItems(index, info.img)"
                  class="delete-img"
                  type="ios-close-circle"
                />
              </div>
              <div class="add-items" v-if="type != 3">
                <div class="item">
                  <Icon size="50" type="ios-add" />
                </div>
                <span>支持jpg/png格式</span>
                <input
                  @change="changeIpt($event, info.img)"
                  type="file"
                  class="ipt"
                />
              </div>
            </div>
          </div>
          <!-- <Button type="primary"
                  style="margin-right:10px;"
                  ghost>上传附件</Button> -->
          <!-- <Upload style="display: inline"
                  name="your_file"
                  :show-upload-list="false"
                  :headers="headers"
                  multiple
                  :data="uploadData"
                  :on-error="uploadError"
                  :on-progress="onProgress"
                  :on-success="uploadSuccess"
                  :action="$store.state.ip + '/api/deep_img_import'">
            <Button type="primary"
                    style="margin-right: 10px">上传附件</Button>
          </Upload> -->
        </FormItem>
      </Form>
      <!-- 户型选择 -->
      <div class="content">
        <vxe-toolbar>
          <template #buttons>
            <div class="content_header">
              <h2>产品信息</h2>
              <div>
                <!-- <Button
                  type="primary"
                  style="margin-right: 10px"
                  v-show="type != 3"
                  @click="handleMetalAdd"
                  >新增五金</Button
                > -->
                <Button
                  type="primary"
                  style="margin-right: 10px"
                  v-show="type == 3"
                  @click="handleShowMaterial"
                  >{{ is_material_show ? "收起" : "查看" }}原材料</Button
                >
                <!-- <Button
                  type="primary"
                  style="margin-right: 10px"
                  v-show="type != 3"
                  @click="handleTableAdd"
                  >新增产品(简)</Button
                > -->
                <!-- <Button
                  type="primary"
                  style="margin-right: 10px"
                  v-show="type != 3"
                  @click="handleSet({}, null, 1)"
                  >新增产品(详)</Button
                > -->
              </div>
            </div>
          </template>
        </vxe-toolbar>
        <vxe-table
          border
          show-footer
          resizable
          max-height="500px"
          class="my-xtable-iview"
          :footer-method="footerMethod"
          align="center"
          :edit-config="type == 3 ? {} : { trigger: 'click', mode: 'row' }"
          :data="tableData"
        >
          <vxe-column title="操作" min-width="200">
            <template #default="{ row, rowIndex }">
              <a
                @click="handleSet(row, rowIndex, 5)"
                style="margin: 0 5px"
                v-show="!row.is_metal"
                >详情</a
              >
              <a
                @click="handleSet(row, rowIndex, 4)"
                v-show="type != 3"
                style="margin: 0 5px"
                >复制</a
              >
              <a
                @click="handleSet(row, rowIndex, 2)"
                v-show="type != 3 && !row.is_metal"
                style="margin: 0 5px"
                >编辑</a
              >

              <a
                @click="handleSet(row, rowIndex, 3)"
                v-show="type != 3"
                style="margin: 0 5px"
                >删除</a
              >
            </template>
          </vxe-column>
          <vxe-column type="seq" min-width="45">
            <template #header>
              <span>序号</span>
            </template>
          </vxe-column>
          <vxe-column
            field="position"
            title="位置"
            min-width="60"
            :edit-render="{}"
          >
            <template #edit="scope">
              <Input
                @on-blur="HandleAutoCreateNewLine"
                v-if="!scope.row.is_metal"
                v-model="scope.row.position"
              />
            </template>
            <template #default="scope">
              {{ scope.row.is_metal ? "" : scope.row.position }}
            </template>
          </vxe-column>
          <vxe-column title="产品名称/五金" min-width="120" :edit-render="{}">
            <template #edit="scope">
              <Select
                filterable
                clearable
                transfer
                filter-by-label
                label-in-value
                v-model="scope.row.select_all_id"
                @on-change="
                  handleSelectProductMetail(
                    scope.row,
                    scope.rowIndex,
                    $event,
                    scope
                  )
                "
              >
                <Option
                  v-for="item in product_metailList"
                  :tag="item.key"
                  :value="item.key"
                  :label="item.title"
                  :key="item.key"
                ></Option>
              </Select>
              <!-- <Select
                filterable
                clearable
                transfer
                filter-by-label
                label-in-value
                v-model="scope.row.material_id"
                @change="$refs.xTable.updateStatus(scope)"
                @on-change="
                  changeEditMetal(scope.row, scope.rowIndex, $event, scope)
                "
              >
                <Option
                  v-for="item in metalList"
                  :value="item.id"
                  :key="item.id"
                  :label="item.title"
                ></Option>
              </Select> -->
            </template>
            <template #default="{ row }">{{
              row.is_metal
                ? getSelectedLabel(
                    row.select_all_id,
                    product_metailList,
                    "key",
                    "title"
                  )
                : getSelectedLabel(
                    row.select_all_id,
                    product_metailList,
                    "key",
                    "title"
                  )
            }}</template>
          </vxe-column>
          <vxe-column
            v-for="process in bpp_list"
            :key="process.id + 'bpp'"
            :field="process.id + ''"
            :title="process.name"
            min-width="70"
            :edit-render="{}"
          >
            <template #edit="scope">
              <Select
                filterable
                clearable
                transfer
                filter-by-label
                v-if="!scope.row.is_metal"
                label-in-value
                v-model="scope.row[process.id]"
                @change="$refs.xTable.updateStatus(scope)"
                @on-change="changeEditProcess(scope.row, process)"
                @on-open-change="
                  (e) =>
                    handleGetProductProcess(
                      e,
                      null,
                      scope.row,
                      scope.row.process_obj.filter((v) => v.id == process.id)[0]
                    )
                "
              >
                <Option
                  v-for="item in scope.row.process_obj.filter(
                    (v) => v.id == process.id
                  )[0].cld"
                  :value="item.id"
                  :key="item.id + 'cld'"
                  :label="item.title"
                ></Option>
              </Select>
            </template>
            <template #default="{ row }">
              {{
                row.is_metal
                  ? ""
                  : getSelectedLabel(
                      row[process.id],
                      process.cld,
                      "id",
                      "title"
                    )
              }}</template
            >
          </vxe-column>
          <vxe-column
            v-for="measure in measure_total"
            :key="measure.e_title"
            :field="measure.e_title"
            :title="measure.title"
            min-width="60"
            :edit-render="{}"
          >
            <template #edit="scope">
              <Input
                v-if="!scope.row.is_metal"
                v-model="scope.row[measure.e_title]"
                @on-change="
                  (e) => handleGetProductMeasure(e, measure.e_title, scope)
                "
                @on-blur="(e) => changeEditMeasure(e, scope.row, measure)"
              />
            </template>
            <template #default="{ row }">
              {{ row.is_metal ? "" : row[measure.e_title] }}</template
            >
          </vxe-column>
          <vxe-column
            v-for="part_type in part_type_total"
            :key="part_type.id + '999'"
            :title="part_type.title"
            min-width="90"
            :edit-render="{}"
          >
            <template #edit="scope">
              <div v-if="!scope.row.is_metal">
                <div
                  v-for="(part_detail, part_index) in scope.row.part"
                  :key="part_index"
                  v-show="part_detail.type_id == part_type.id"
                  :style="
                    part_index != scope.row.part.length - 1 &&
                    scope.row.part.length > 1
                      ? {
                          borderBottom: '1px solid #e8eaec',
                          padding: '10px 0',
                        }
                      : { padding: '10px 0' }
                  "
                >
                  <Select
                    clearable
                    transfer
                    filter
                    filter-by-label
                    label-in-value
                    v-model="part_detail.change_id"
                    @on-change="
                      (e) =>
                        changeEditPart(
                          scope.row,
                          part_type,
                          part_detail,
                          e,
                          scope.rowIndex
                        )
                    "
                  >
                    <Option
                      v-for="ch in part_detail.change"
                      :key="ch.id + '999'"
                      :label="ch.part_title"
                      :value="ch.id"
                    />
                  </Select>
                </div>
              </div>
            </template>
            <template #default="scope">
              <div v-if="!scope.row.is_metal">
                <div
                  v-for="(part_detail, part_index) in scope.row.part"
                  :key="part_index"
                  v-show="part_detail.type_id == part_type.id"
                  :style="
                    part_index != scope.row.part.length - 1 &&
                    scope.row.part.length > 1
                      ? {
                          borderBottom: '1px solid #e8eaec',
                          padding: '10px 0',
                        }
                      : { padding: '10px 0' }
                  "
                >
                  {{
                    part_detail.change_id
                      ? part_detail.part_title || part_detail.title
                      : ""
                  }}
                </div>
              </div>
            </template>
          </vxe-column>
          <vxe-column title="门头板" min-width="100" :edit-render="{}">
            <template #default="{row,rowIndex}">
             
             <span v-if="row.hasOwnProperty('addMTB')&&tableData[rowIndex].addMTB">是</span>
             <span v-else>否</span>
              <!-- <span v-show="!tableData[rowIndex].addMTB||!tableData[rowIndex].hasOwnProperty('addMTB')">否</span> -->
              <!-- {{
                scope.row.part.filter(
                  (v) => v.part_title && v.part_title.indexOf("门头板")
                )[0].part_title
              }} -->
            </template>
            <template #edit="scope">
              <div>
                <a v-if="!scope.row.addMTB" @click="handleMTBClick(scope.row)"
                  >添加</a
                >
                <div v-else>
                  <a
                    @click="handleSet(scope.row, scope.rowIndex, 2)"
                    style="margin: 0 5px"
                    >编辑</a
                  >
                </div>
              </div>
              <div></div>
            </template>
          </vxe-column>
      
          <vxe-column
            field="total_num"
            title="数量"
            min-width="40"
            :edit-render="{}"
          >
            <template #edit="scope">
              <Input
                v-if="!scope.row.is_metal"
                v-model="scope.row.total_num"
                @on-change="(e) => changeEditTotalNum(e, scope.row)"
              />
              <Input
                v-else
                v-model="scope.row.num"
                @on-change="(e) => changeEditMetalNum(e, scope.row)"
              />
            </template>
            <template #default="scope">
              {{ scope.row.is_metal ? scope.row.num : scope.row.total_num }}
            </template>
          </vxe-column>
          <vxe-column field="unit" title="单位" min-width="20"> </vxe-column>
          <vxe-column field="num" title="核算数量" min-width="40"> </vxe-column>
          <vxe-column title="单价" min-width="80" :edit-render="{}">
            <template #edit="scope">
              <Input
                v-if="!scope.row.is_metal"
                v-model="scope.row.unit_price"
                @on-change="(e) => handleProductUnit_priceChange(e, scope.row)"
              />
              <Input
                v-else
                v-model="scope.row.single_price"
                @on-change="(e) => handleMetailPriceChange(e, scope.row)"
              />
            </template>
            <template #default="scope">
              {{
                scope.row.is_metal
                  ? scope.row.single_price
                  : scope.row.unit_price
              }}
            </template>
          </vxe-column>
          <vxe-column title="附加项" min-width="150" :edit-render="{}">
            <template #edit="scope">
              <div>
                <div
                  v-for="(ext_detail, idx) in scope.row.extArray"
                  :key="ext_detail.ext_id"
                  :style="
                    idx != scope.row.extArray.length - 1
                      ? {
                          borderBottom: '1px solid #e8eaec',
                          padding: '10px 0',
                        }
                      : { padding: '10px 0' }
                  "
                  v-show="ext_detail.type == 2"
                >
                  <Select
                    filterable
                    clearable
                    transfer
                    label-in-value
                    size="small"
                    v-model="ext_detail.id"
                    @on-change="(e) => changeEditExt(ext_detail, e, scope.row,scope.row.extArray,idx)"
                    style="width: 100px"
                  >
                    <Option
                      v-for="item of extList"
                      :key="item.id"
                      :label="item.title"
                      :value="item.id"
                    ></Option>
                  </Select>
                  <Icon
                    style="'margin:0 5px"
                    @click="handleExtraAdd(scope.row.extArray, 2)"
                    color="#32C800"
                    size="20"
                    type="ios-add-circle"
                  />
                  <Icon
                    @click="
                      handleExtraDele(
                        scope.row.extArray,
                        ext_detail,
                        idx,
                        scope.row
                      )
                    "
                    color="#FF5E5C"
                    v-show="scope.row.extArray.length > 1"
                    size="20"
                    type="md-remove-circle"
                  />
                </div>
              </div>
            </template>
            <template #default="scope">
              <Tooltip
                max-width="600"
                transfer
                placement="right"
                v-if="!scope.row.is_metal"
              >
                <span slot="content">
                  <div
                    v-for="(_item, _index) in scope.row.extArray"
                    :key="_item.ext_id + 'ext' + _index"
                    v-show="_item.type == 2"
                  >
                    <div style="display:flex;justify-content: space-between;">
                      <div style="width:120px">
                        {{
                          extList.filter((v) => v.id == _item.ext_id).length > 0
                            ? extList.filter((v) => v.id == _item.ext_id)[0]
                                .title
                            : ""
                        }}
                      </div>
                      <div style="width:80px">数量：{{ _item.num }}</div>
                      <div style="width:100px">单价：{{ _item.price }}</div>
                      <div style="width:120px">
                        金额：{{ _item.num * 1 * _item.price }}
                      </div>
                      <div style="width:160px">备注：{{ _item.remark }}</div>
                    </div>
                  </div>
                </span>
                {{
                  scope.row.extArray
                    ? scope.row.extArray
                        .filter((v) => v.type == 2)
                        .map((v) => v.title)
                        .join("/")
                    : ""
                }}
              </Tooltip>
            </template>
          </vxe-column>
          <vxe-column title="附加金额" min-width="40" :edit-render="{}">
            <template #default="scope"
              >{{ scope.row.is_metal ? scope.row.price : scope.row.ext_price }}
            </template>
            <template #edit="scope">
              <Input v-if="!scope.row.is_metal" v-model="scope.row.ext_price" @on-change='(e) =>changeExtPrice(e, scope.row)'/>
              <span v-else></span>
            </template>
          </vxe-column>
          <vxe-column title="超标金额" min-width="40">
             <template #default="scope"
              >{{ scope.row.over_price_total }}
            </template>
          </vxe-column>
          <vxe-column title="总金额" min-width="60">
            <template #default="scope"
              >{{ scope.row.is_metal ? scope.row.price : scope.row.price }}
            </template>
          </vxe-column>
              <vxe-column title="原材料名称" min-width="100">
            <template #default="scope">
              <div v-if="!scope.row.is_metal">
                <div
                  v-for="part_detail in scope.row.part"
                  :key="part_detail.order_product_part_id"
                  v-show="!part_detail.is_metal"
                >
                  <div
                    v-for="(sub_part_detail, idx) in part_detail.sub_part"
                    :key="idx + '999'"
                    v-show="
                      (
                        sub_part_detail.title ||
                        sub_part_detail.material_detail_title
                      ).indexOf('线条') > 0
                    "
                    :style="
                      idx != part_detail.sub_part.length - 1
                        ? {
                            borderBottom: '1px solid #e8eaec',
                            padding: '10px 0',
                          }
                        : { padding: '10px 0' }
                    "
                  >
                    {{
                      sub_part_detail.title ||
                        sub_part_detail.material_detail_title
                    }}
                  </div>
                </div>
              </div>
            </template>
          </vxe-column>
          <vxe-column title="原材料规格" min-width="130" :edit-render="{}">
            <template #default="scope">
              <div v-if="!scope.row.is_metal">
                <div
                  v-for="(part_detail, idx) in scope.row.part"
                  :key="idx + '999'"
                  v-show="!part_detail.is_metal"
                >
                  <div
                    v-for="(sub_part_detail, idx) in part_detail.part_detail"
                    :key="idx + 'part_detail'"
                    v-show="
                      sub_part_detail.title &&
                        sub_part_detail.title.indexOf('线条') > 0
                    "
                    :style="
                      idx != part_detail.part_detail.length - 1
                        ? {
                            borderBottom: '1px solid #e8eaec',
                            padding: '10px 0',
                          }
                        : { padding: '10px 0' }
                    "
                  >
                    {{
                      sub_part_detail.part_detail_option
                        ? sub_part_detail.part_detail_option.find(
                            (v) => v.value == sub_part_detail.material_detail_id
                          ).label
                        : ""
                    }}
                  </div>
                </div>
              </div>
            </template>
            <template #edit="scope">
              <div v-if="!scope.row.is_metal">
                <div
                  v-for="part_detail in scope.row.part"
                  :key="part_detail.order_product_part_id"
                  v-show="!part_detail.is_metal"
                >
                  <div
                    v-for="(sub_part_detail, idx) in part_detail.part_detail"
                    :key="idx + 'part_detail'"
                    v-show="
                      sub_part_detail.title &&
                        sub_part_detail.title.indexOf('线条') > 0
                    "
                    :style="
                      idx != part_detail.part_detail.length - 1
                        ? {
                            borderBottom: '1px solid #e8eaec',
                            padding: '10px 0',
                          }
                        : { padding: '10px 0' }
                    "
                  >
                    <Select
                      filterable
                      clearable
                      transfer
                      label-in-value
                      @on-change="changeEditLines(scope.row)"
                      v-model="sub_part_detail.material_detail_id"
                    >
                      <Option
                        v-for="ch in sub_part_detail.part_detail_option"
                        :key="ch.value"
                        :label="ch.label"
                        :value="ch.value"
                      />
                    </Select>
                  </div>
                </div>
              </div>
            </template>
          </vxe-column>
          <vxe-column title="原材料数量" min-width="90" :edit-render="{}">
            <template #default="scope">
              <div v-if="!scope.row.is_metal">
                <div
                  v-for="part_detail in scope.row.part"
                  :key="part_detail.order_product_part_id"
                  v-show="!part_detail.is_metal"
                >
                  <div
                    v-for="(sub_part_detail, idx) in part_detail.part_detail"
                    :key="idx + 'part_detail'"
                    v-show="
                      sub_part_detail.title &&
                        sub_part_detail.title.indexOf('线条') > 0
                    "
                    :style="
                      idx != part_detail.part_detail.length - 1
                        ? {
                            borderBottom: '1px solid #e8eaec',
                            padding: '10px 0',
                          }
                        : { padding: '10px 0' }
                    "
                  >
                    {{ sub_part_detail.material_detail_num }}
                  </div>
                </div>
              </div>
            </template>
            <template #edit="scope">
              <div v-if="!scope.row.is_metal">
                <div
                  v-for="part_detail in scope.row.part"
                  :key="part_detail.order_product_part_id"
                  v-show="!part_detail.is_metal"
                >
                  <div
                    v-for="(sub_part_detail, idx) in part_detail.part_detail"
                    :key="idx + 'part_detail'"
                    v-show="
                      sub_part_detail.title &&
                        sub_part_detail.title.indexOf('线条') > 0
                    "
                    :style="
                      idx != part_detail.part_detail.length - 1
                        ? {
                            borderBottom: '1px solid #e8eaec',
                            padding: '10px 0',
                          }
                        : { padding: '10px 0' }
                    "
                  >
                    <Input
                      v-model="sub_part_detail.material_detail_num"
                      @on-change="changeEditDetailNum(scope.row)"
                    />
                  </div>
                </div>
              </div>
            </template>
          </vxe-column>
          <vxe-column
            field="remark"
            title="备注"
            min-width="100"
            :edit-render="{}"
          >
            <template #edit="scope">
              <Select
                filterable
                clearable
                v-if="!scope.row.is_metal"
                transfer
                v-model="scope.row.remark"
                allow-create
                @on-create="handleRemarkCreate"
                @on-change="changeEditRemark(scope.row)"
              >
                <Option
                  v-for="item in support_remark"
                  :value="item"
                  :key="item"
                  >{{ item }}</Option
                >
              </Select>
              <Input v-else v-model="scope.row.remark" />
            </template>
            <template #default="{ row }">
              {{ row.remark }}
            </template>
          </vxe-column>
        </vxe-table>
        <!-- <vxe-table resizable border ref="xTree" :data="tableData">
          <vxe-table-column
            field="position"
            title="位置"
            align="center"
            min-width="80"
          ></vxe-table-column>
          <vxe-table-column
            field="unit"
            title="计量单位"
            align="center"
            min-width="80"
          ></vxe-table-column>
          <vxe-table-column
            field="process_str"
            title="工艺属性"
            align="center"
            min-width="200"
          ></vxe-table-column>
          <vxe-table-column
            field="measurement_no_letter"
            title="尺寸"
            align="center"
            min-width="180"
          ></vxe-table-column>
          <vxe-table-column
            field="total_num"
            title="数量"
            align="center"
            min-width="80"
          ></vxe-table-column>
          <vxe-table-column
            field="num"
            title="核算数量"
            align="center"
            min-width="80"
          >
            <template #default="{ row }">
              {{ row.is_metal ? "" : row.num }}
            </template>
          </vxe-table-column>
          <vxe-table-column
            field="unit_price"
            title="单价"
            align="center"
            min-width="80"
          ></vxe-table-column>
          <vxe-table-column
            field="ext_price"
            title="附加金额"
            align="center"
            min-width="80"
          ></vxe-table-column>
          <vxe-table-column
            field="over_price"
            title="超标金额"
            align="center"
            min-width="80"
          ></vxe-table-column>
          <vxe-table-column
            field="price"
            title="金额"
            align="center"
            min-width="80"
          >
            <template #default="{ row }">
              {{ row.is_metal ? "" : row.price }}
            </template>
          </vxe-table-column>
          <vxe-table-column
            field="url_number"
            title="图号"
            align="center"
            min-width="80"
          ></vxe-table-column>
          <vxe-table-column
            field="remark"
            title="备注"
            align="center"
            min-width="80"
          ></vxe-table-column>
          <vxe-table-column
            field="extra"
            title="附加项"
            align="center"
            min-width="80"
          ></vxe-table-column>
          <vxe-table-column
            field="date"
            title="其他项"
            align="center"
            min-width="80"
          ></vxe-table-column>
          <vxe-table-column
            field=""
            title="操作"
            align="center"
            min-width="180"
          >
            <template #default="{ row, rowIndex }">
              <a
                @click="handleSet(row, rowIndex, 5)"
                v-show="type == 3 && rowIndex >= 0"
                style="margin: 0 5px"
                >详情</a
              >
              <a
                @click="handleSet(row, rowIndex, 4)"
                v-if="type != 3"
                v-show="rowIndex >= 0"
                style="margin: 0 5px"
                >复制</a
              >
              <a
                @click="handleSet(row, rowIndex, 2)"
                v-if="type != 3"
                v-show="rowIndex >= 0"
                style="margin: 0 5px"
                >编辑</a
              >

              <a
                @click="handleSet(row, rowIndex, 3)"
                v-if="type != 3"
                v-show="rowIndex >= 0"
                style="margin: 0 5px"
                >删除</a
              >
            </template>
          </vxe-table-column>
        </vxe-table> -->
        <!-- 原材料 -->
        <!-- v-show="type==3" -->
        <div class="original-part" v-show="type == 3 && is_material_show">
          <Table
            border
            show-summary
            :summary-method="handleSummary"
            :span-method="handleSpan"
            :columns="originalTableColumns"
            :data="originalData"
          ></Table>
        </div>
      </div>
      <div label="线条:" style="margin-left:20px;width:95%">
        <div style="font-size:20px">
          <span>线条:</span>
          <!-- <span>{{ print_line_data === "" ? "无" : print_line_data }}</span> -->
          <span v-if="wood_title_count.length < 1">无</span>
          <span
            v-else
            v-for="(item, index) in wood_title_count"
            :key="item.title + '' + index"
            >{{ item.title }}:
            <span v-for="(_item, _index) in item.measure_str" :key="_item.id"
              >{{ _item.measure }}={{ _item.num }}{{ item.unit }}
              <span v-show="_index < item.measure_str.length - 1">；</span>
            </span>
            <span v-show="index < wood_title_count.length - 1">；</span>
          </span>
        </div>
      </div>
      <div label="合计:" style="margin-left:20px;width:95%">
        <div style="font-size:20px">
          <span>合计:</span>
          <span v-if="parts_title_count.length < 1">无</span>
          <span
            v-else
            v-for="(item, index) in parts_title_count"
            :key="item.title + '' + index"
            v-show="item.title && item.title.indexOf('线条') == -1"
            >{{ item.title }}:{{ item.num }}{{ item.unit }}
            <span v-show="index < parts_title_count.length - 1">；</span>
          </span>
        </div>
      </div>
      <div label="五金:" style="margin-left:20px;width:95%">
        <div style="font-size:20px">
          <span>五金:</span>
          <span v-if="tableData.filter((v) => v.is_metal).length < 1">无</span>
          <span
            v-else
            v-for="(item, index) in tableData.filter((v) => v.is_metal)"
            :key="item.title + '' + index"
            v-show="item.type == 1"
            >{{
              metalList.filter((v) => v.id == item.product_id).length > 0
                ? metalList.filter((v) => v.id == item.product_id)[0].title
                : ""
            }}:{{ item.num
            }}{{
              metalList.filter((v) => v.id == item.product_id).length > 0
                ? metalList.filter((v) => v.id == item.product_id)[0].unit
                : ""
            }}
            <span
              v-show="index < tableData.filter((v) => v.is_metal).length - 1"
              >；</span
            >
          </span>
        </div>
      </div>
    </div>
    <!-- 选择产品弹层--编辑框 -->
    <Modal
      :width="1400"
      class-name="vertical-center-modal"
      :title="title_state == 2 ? '编辑产品' : '查看产品'"
      :mask-closable="false"
      v-model="showEditProduct"
      @on-visible-change="modalVisibleChange"
    >
      <div style="max-height: 800px; overflow: hidden; overflow-y: auto">
        <Tabs value="name">
          <TabPane
            :label="
              (modalData.position ? modalData.position : '位置') +
                '-' +
                modalData.type_name
            "
            name="name"
          >
            <div class="modal_product_info">
              <div class="modal_product_info_title">产品信息</div>
              <div class="modal_product_info_content modal_product">
                <Form :model="modalData" :label-width="100">
                  <FormItem label="选择产品:">
                    <Tooltip style="width: 120px" transfer>
                      <span slot="content">
                        <span
                          v-for="_item in productList"
                          :key="_item.id"
                          v-show="_item.id == modalData.product_id"
                          >{{ _item.title }}</span
                        >
                      </span>
                      <Select
                        filterable
                        clearable
                        transfer
                        filter-by-label
                        label-in-value
                        :disabled="isCheck"
                        size="small"
                        v-model="modalData.product_id"
                        @on-change="changeEditProduct($event)"
                        style="width: 120px"
                      >
                        <Option
                          v-for="item of productList"
                          :tag="item.img_url"
                          :key="item.id"
                          :label="item.title"
                          :value="item.id"
                        ></Option>
                      </Select>
                    </Tooltip>
                  </FormItem>
                  <FormItem label="位置:">
                    <Tooltip style="width: 120px" transfer>
                      <span slot="content">
                        {{ modalData.position }}
                      </span>
                      <Input
                        size="small"
                        v-model="modalData.position"
                        :disabled="isCheck"
                        @on-change="
                          (e) => handleProductPositionChange(modalData, e)
                        "
                        style="width: 120px"
                        placeholder="请输入位置"
                      />
                    </Tooltip>
                  </FormItem>
                  <FormItem label="计量单位:">
                    <Input
                      size="small"
                      disabled
                      style="width: 120px"
                      v-model="modalData.unit"
                      placeholder="自动带出"
                    />
                  </FormItem>
                  <!-- 工艺属性 -->
                  <div
                    v-for="(ele, idx) in modalData.process_obj"
                    :key="idx + '777'"
                  >
                    <FormItem
                      v-for="(_process, idx) in process_all_list"
                      :key="idx + '333' + modalData.id"
                      :label="(ele.title || _process.title) + ':'"
                      v-show="ele.id == _process.id"
                    >
                      <Tooltip style="width: 120px" transfer>
                        <span slot="content">
                          <span
                            v-for="_item in ele.cld"
                            :key="_item.id + '999'"
                            v-show="_item.id == ele.value"
                            >{{ _item.title }}</span
                          >
                        </span>
                        <Select
                          style="width: 120px"
                          filterable
                          clearable
                          transfer
                          label-in-value
                          :disabled="isCheck"
                          @on-open-change="
                            (e) =>
                              handleGetProductProcess(e, idx, modalData, ele)
                          "
                          @on-change="
                            (e) =>
                              handleProductProcessChange(e, idx, modalData, ele)
                          "
                          v-model="ele.value"
                          size="small"
                        >
                          <Option
                            v-for="option of ele.cld"
                            :key="option.id + 'cld'"
                            :disabled="option.isDisabled"
                            :label="option.title"
                            :value="option.id"
                          ></Option>
                        </Select>
                      </Tooltip>
                    </FormItem>
                  </div>
                  <!-- 测量字段 -->
                  <FormItem
                    v-for="(ele, idx) in modalData.measure"
                    :key="idx + '888'"
                    :label="ele.title + ':'"
                  >
                    <Input
                      size="small"
                      type="text"
                      clearable
                      :disabled="isCheck"
                      :placeholder="ele.e_title"
                      v-model="ele.value"
                      @on-blur="
                        (e) => handleProductMeasureBlur(e, modalData, ele)
                      "
                      style="width: 120px"
                    />
                  </FormItem>
                  <FormItem label="数量:">
                    <Input
                      size="small"
                      @on-change="(e) => handleProductNumChange(e, modalData)"
                      v-model="modalData.total_num"
                      :disabled="isCheck"
                      style="width: 120px"
                      placeholder="请输入产品数量"
                    />
                  </FormItem>
                  <FormItem label="核算数量:">
                    <Input
                      size="small"
                      v-model="modalData.num"
                      disabled
                      style="width: 120px"
                      placeholder="自动带出"
                    />
                  </FormItem>
                  <FormItem label="单价:">
                    <Input
                      size="small"
                      :disabled="isCheck"
                      v-model="modalData.unit_price"
                      @on-focus="handleUnitPriceFocus"
                      @on-change="
                        (e) => handleProductUnit_priceChange(e, modalData)
                      "
                      style="width: 120px"
                      placeholder="自动带出"
                    />
                  </FormItem>
                  <FormItem label="附加金额:">
                    <Input
                      size="small"
                      :disabled="isCheck"
                      @on-focus="handleExtPriceFocus"
                      v-model="modalData.ext_price"
                      @on-change="
                        (e) => handleProductExt_priceChange(e, modalData)
                      "
                      style="width: 120px"
                      placeholder="自动带出"
                    />
                  </FormItem>
                  <FormItem label="超标金额:">
                    <Input
                      :disabled="isCheck"
                      size="small"
                      @on-focus="handleOverPriceFocus"
                      @on-change="
                        (e) => handleProductOver_priceChange(e, modalData)
                      "
                      v-model="modalData.over_price_total"
                      style="width: 120px"
                      placeholder="自动带出"
                    />
                  </FormItem>
                  <FormItem label="金额:">
                    <Input
                      :disabled="isCheck"
                      size="small"
                      @on-focus="handlePriceFocus"
                      v-model="modalData.price"
                      style="width: 120px"
                      placeholder="自动带出"
                    />
                  </FormItem>
                  <FormItem label="图号:">
                    <Input
                      size="small"
                      :disabled="isCheck"
                      v-model="modalData.url_number"
                      style="width: 120px"
                      placeholder="自动带出"
                    />
                  </FormItem>
                  <FormItem
                    v-for="(_customize, customize_key) in modalData.customize"
                    :label="_customize.style + ':'"
                    :key="customize_key + '99'"
                  >
                    <Input
                      v-show="_customize.type == 1"
                      :disabled="isCheck"
                      size="small"
                      type="text"
                      v-model="_customize.value"
                      style="width: 120px"
                      placeholder="请输入"
                    />

                    <Select
                      v-show="_customize.type == 2"
                      style="width: 120px"
                      :disabled="isCheck"
                      filterable
                      clearable
                      v-model="_customize.value"
                      size="small"
                    >
                      <Option
                        v-for="option of _customize.explain"
                        :key="option.value"
                        :label="option.value"
                        :value="option.value"
                      ></Option>
                    </Select>
                  </FormItem>
                  <FormItem
                    v-for="(outh, outh_key) in modalData.outh"
                    :label="outh.title"
                    :key="outh_key + 21"
                  >
                    <img
                      v-if="outh.key == 'img' || outh.key == 'url'"
                      @click="showPreview(modalData, outh.key)"
                      style="
                        max-width: 30px;
                        max-height: 30px;
                        top: 5px;
                        position: relative;
                        cursor: pointer;
                      "
                      :src="$store.state.ip + outh.value"
                    />
                    <Input
                      v-if="
                        outh.key != 'img' &&
                          outh.key != 'url' &&
                          outh.key != 'lock'
                      "
                      disabled
                      placeholder="自动生成"
                      style="width: 120px"
                      size="small"
                      v-model="outh.value"
                    />
                    <Select
                      label-in-value
                      @on-change="changeLock($event, modalData, index)"
                      size="small"
                      clearable
                      style="width: 120px"
                      v-if="outh.key == 'lock'"
                      v-model="modalData[outh.key]"
                    >
                      <Option
                        v-for="luck of lock_list"
                        :key="luck.id"
                        :tag="luck.price"
                        :value="luck.id"
                        :label="luck.title"
                      ></Option>
                      <Option :value="0" label="无"></Option>
                    </Select>
                  </FormItem>
                  <FormItem label="备注:">
                    <Select
                      size="small"
                      clearable
                      filterable
                      :disabled="isCheck"
                      style="width: 120px"
                      allow-create
                      @on-create="handleRemarkCreate"
                      v-model="modalData.remark"
                    >
                      <Option
                        v-for="_remark of support_remark"
                        :key="_remark"
                        :value="_remark"
                        :label="_remark"
                      ></Option>
                    </Select>
                    <!-- <Input
                      size="small"
                      type="textarea"
                      :disabled="isCheck"
                      v-model="modalData.remark"
                      style="width: 120px"
                      placeholder="请输入备注"
                    /> -->
                  </FormItem>
                  <FormItem label="产品图:">
                    <!-- v-show="modalData.url && modalData.url.length > 0" -->
                    <div class="product-img">
                      <div class="product-add">
                        <div
                          class="items"
                          v-for="(item, index) of modalData.url"
                          :key="index"
                        >
                          <img
                            @click="looks(item)"
                            :src="$store.state.ip + item"
                            alt=""
                          />
                        </div>
                      </div>
                    </div>
                  </FormItem>
                </Form>
              </div>
            </div>
            <div class="modal_product_info">
              <div class="modal_product_info_title">部件信息</div>
              <div class="modal_product_info_content modal_parts">
                <Form
                  :model="element"
                  v-for="(element, idx) in modalData.part"
                  :key="element.id + '444' + idx"
                  :label-width="50"
                >
                  <FormItem
                    :label-width="element.isBP ? 1 : 30"
                    v-show="!element.is_metal"
                  >
                    <Radio
                      v-show="element.isBP"
                      :disabled="isCheck"
                      @click.native.prevent="handleRadioClick(element)"
                      v-model="element.isChoosed"
                    ></Radio>
                    <!-- <span v-show="element.isBP">{{ element.part_title }} </span> -->
                  </FormItem>
                  <FormItem
                    label="部件:"
                    v-show="element.is_metal ? false : true"
                  >
                    <Select
                      filterable
                      clearable
                      transfer
                      :disabled="isCheck"
                      label-in-value
                      size="small"
                      @on-change="
                        handlePartChange(
                          $event,
                          element,
                          modalData.measure,
                          modalData.total_num
                        )
                      "
                      v-model="element.change_id"
                      style="width: 180px"
                    >
                      <Option
                        v-for="item of element.change"
                        :key="item.id"
                        :label="item.part_title || item.title"
                        :value="typeof(item.id) == 'string'?item.part_id:item.id"
                      ></Option>
                    </Select>
                  </FormItem>
                  <FormItem
                    label="高:"
                    v-show="
                      !element.is_metal &&
                        element.hide_measure &&
                        !element.hide_measure.filter((v) => v == 'H').length > 0
                    "
                  >
                    <Input
                      size="small"
                      clearable
                      :disabled="isCheck"
                      v-model="element.long"
                      @on-focus='longFocus(idx)'
                      @on-change='changeHigh(element,idx,modalData)'
                      @on-blur="handleIsSpecialPart(modalData, element)"
                      style="width: 50px"
                      placeholder="请输入高"
                    />
                  </FormItem>
                  <FormItem
                    label="宽:"
                    v-show="
                      !element.is_metal &&
                        element.hide_measure &&
                        !element.hide_measure.filter((v) => v == 'W').length > 0
                    "
                  >
                    <Input
                      size="small"
                      clearable
                       @on-focus='wideFocus(idx)'
                       @on-change='changeHigh(element,idx,modalData)'
                      :disabled="isCheck"
                      v-model="element.wide"
                      style="width: 50px"
                      placeholder="请输入宽"
                    />
                  </FormItem>
                  <FormItem
                    label="厚:"
                    v-show="
                      !element.is_metal &&
                        element.hide_measure &&
                        !element.hide_measure.filter((v) => v == 'T').length > 0
                    "
                  >
                    <Input
                      size="small"
                      clearable
                       @on-focus='highFocus(idx)'
                      :disabled="isCheck"
                      v-model="element.high"
                      style="width: 50px"
                      placeholder="请输入厚"
                    />
                  </FormItem>
                  <FormItem
                    v-for="(process_detail, idx) in element.process"
                    :key="idx + '555' + element.part_id"
                    :label="process_detail.name + ':'"
                    v-show="
                      (!element.is_metal &&
                        element.hide_process &&
                        !element.hide_process.filter(
                          (v) => v == process_detail.id
                        ).length > 0)||element.addMTB
                    "
                  >
                    <Tooltip style="width: 120px" transfer>
                      <span slot="content">
                        <span
                          v-for="_item in process_detail.cld"
                          :key="_item.id + 'cld'"
                          v-show="_item.id == process_detail.value"
                          >{{ _item.title }}</span
                        >
                      </span>
                      <Select
                        style="width: 120px"
                        filterable
                        clearable
                        transfer
                        label-in-value
                        :disabled="isCheck"
                        @on-change="
                          (e) =>
                            handlePartProcessChange(
                              e,
                              idx,
                              element,
                              process_detail
                            )
                        "
                        v-model="process_detail.value"
                        size="small"
                      >
                        <Option
                          v-for="option of process_detail.cld"
                          :key="option.id + 'cld'"
                          :label="option.title"
                          :value="option.id"
                        ></Option>
                      </Select>
                    </Tooltip>
                  </FormItem>
                        <div v-show="element.addMTB" style="margin-left:40px">
                      <FormItem label="数量">
                        <Input
                          size="small"
                          @on-focus='numFocus(idx)'
                          @on-change='changeNum(element, idx, modalData)'
                          v-model="element.MTBnum"
                          style="width: 80px"
                        />
                      </FormItem>
                      <FormItem label="面积(m²)" :label-width='80'>
                        <Input
                            @on-change='changeNum(element, idx, modalData)'
                          size="small"
                          v-model="element.MTBsize"
                          style="width: 80px"
                        />
                      </FormItem>
                      <FormItem label="单价">
                        <Input
                        @on-focus='priceFocus(idx)'
                        @on-change='changeNum(element, idx, modalData)'
                          size="small"
                          v-model="element.MTBprice"
                          style="width: 80px"
                        />
                      </FormItem>
                      <FormItem label="金额">
                        <Input
                        disabled
                          class="price"
                          size="small"
                          v-model="element.MTBtotal"
                          style="width: 80px;"
                        />
                      </FormItem>
                    </div>
                  <FormItem v-show="!element.is_metal">
                    <Button
                      @click="handlePartsApart(element, idx, modalData.part)"
                      type="primary"
                      v-show="!isCheck"
                      v-if="element.isBP"
                      style="margin-right: 5px"
                      size="small"
                      >拆分</Button
                    >
                    <Button
                      @click="handlePartsDele(element, idx, modalData)"
                      type="primary"
                      v-else
                      v-show="!isCheck"
                      style="margin-right: 5px"
                      size="small"
                      >删除</Button
                    >
                    <Button
                      @click="handlePartDetailEdit(element, idx)"
                      type="primary"
                      style="margin-right: 5px"
                      size="small"
                      >{{
                        element.isShowPartDetail
                          ? "收起"
                          : isCheck
                          ? "查看"
                          : "修改原材料"
                      }}</Button
                    >
                  </FormItem>
                  <!-- 门头板信息 -->

                  <div
                    :class="[
                      'part_detail_form',
                      element.isShowPartDetail ? '' : 'hide_part_detail',
                    ]"
                    :data-index="idx"
                  >
                    <!-- <div v-show="element.addMTB" style="padding-left:46px">
                      <FormItem label="数量">
                        <Input
                          size="small"
                          @on-focus='numFocus(idx)'
                          @on-change='changeNum(element, idx, modalData)'
                          v-model="element.MTBnum"
                          style="width: 80px"
                        />
                      </FormItem>
                      <FormItem label="面积(m²)" :label-width='80'>
                        <Input
                            @on-change='changeNum(element, idx, modalData)'
                          size="small"
                          v-model="element.MTBsize"
                          style="width: 80px"
                        />
                      </FormItem>
                      <FormItem label="单价">
                        <Input
                        @on-focus='priceFocus(idx)'
                        @on-change='changeNum(element, idx, modalData)'
                          size="small"
                          v-model="element.MTBprice"
                          style="width: 80px"
                        />
                      </FormItem>
                      <FormItem label="金额">
                        <Input
                        disabled
                          class="price"
                          size="small"
                          v-model="element.MTBtotal"
                          style="width: 80px;"
                        />
                      </FormItem>
                    </div> -->
                    <FormItem>
                      <div
                        v-for="(ele, idx) in element.part_detail"
                        :key="idx + '999'"
                      >
                        <Form :model="ele">
                          <FormItem>
                            <div style="width: 200px">
                              {{ ele.title || ele.part_detail_title }}
                            </div>
                          </FormItem>
                          <!-- <FormItem label="厚" :label-width="40">
                            <Input
                              size="small"
                              v-model="ele.long"
                              style="width: 80px"
                              placeholder="请输入厚"
                            />
                          </FormItem> -->
                          <!-- <FormItem label="宽" :label-width="40">
                            <Input
                              size="small"
                              v-model="ele.wide"
                              style="width: 80px"
                              placeholder="请输入宽"
                            />
                          </FormItem> -->
                          <!-- <FormItem label="高" :label-width="40">
                            <Input
                              size="small"
                              v-model="ele.high"
                              style="width: 80px"
                              placeholder="请输入高"
                            />
                          </FormItem> -->
                          <!-- <FormItem label="数量" :label-width="40">
                            <Input
                              size="small"
                              v-model="ele.num"
                              @on-change="(e) => handleSubpartNumChange(e, ele)"
                              style="width: 80px"
                              placeholder="请输入数量"
                            />
                          </FormItem> -->
                          <!-- 原材料 -->
                          <Form>
                            <FormItem>
                              <div style="width: 200px">
                                <!-- <Tooltip
                                  :content="
                                    ele.material_detail_title || '请选择'
                                  "
                                > -->
                                {{ ele.material_detail_title || "请选择" }}
                                <!-- </Tooltip> -->
                              </div>
                            </FormItem>
                            <FormItem label="高" :label-width="40">
                              <Select
                                style="width: 80px"
                                filterable
                                clearable
                                transfer
                                :disabled="isCheck"
                                v-model="ele.material_detail_id"
                                @on-change="(e) => handleMaterialChange(e, ele)"
                                placeholder="请选择高"
                                size="small"
                              >
                                <Option
                                  v-for="option of ele.material_detail_list"
                                  :key="option.material_detail_id"
                                  :label="option.long"
                                  :value="option.material_detail_id"
                                ></Option>
                              </Select>
                            </FormItem>
                            <FormItem label="宽" :label-width="40">
                              <Select
                                style="width: 80px"
                                filterable
                                clearable
                                transfer
                                :disabled="isCheck"
                                v-model="ele.material_detail_id"
                                placeholder="请选择宽"
                                size="small"
                              >
                                <Option
                                  v-for="option of ele.material_detail_list"
                                  :key="option.material_detail_id"
                                  :label="option.wide"
                                  :value="option.material_detail_id"
                                ></Option>
                              </Select>
                            </FormItem>
                            <FormItem label="厚" :label-width="40">
                              <Select
                                style="width: 80px"
                                filterable
                                clearable
                                transfer
                                :disabled="isCheck"
                                v-model="ele.material_detail_id"
                                placeholder="请选择厚"
                                size="small"
                              >
                                <Option
                                  v-for="option of ele.material_detail_list"
                                  :key="option.material_detail_id"
                                  :label="option.high"
                                  :value="option.material_detail_id"
                                ></Option>
                              </Select>
                            </FormItem>
                            <FormItem label="数量" :label-width="40">
                              <Input
                                size="small"
                                :disabled="isCheck"
                                v-model="ele.material_detail_num"
                                style="width: 80px"
                                placeholder="请输入数量"
                              />
                            </FormItem>
                          </Form>
                        </Form>
                      </div>
                    </FormItem>
                  </div>
                </Form>
              </div>
            </div>
            <div class="modal_product_info">
              <div class="modal_product_info_title">
                附加信息
                <Button
                  @click="handleExtraAdd(modalData.extArray, 2)"
                  type="primary"
                  v-show="!isCheck"
                  size="small"
                  >新增附加项目</Button
                >
              </div>
              <div class="modal_product_info_content modal_extra">
                <Form
                  :model="element"
                  v-for="(element, idx) in modalData.extArray"
                  :key="element.id"
                  v-show="element.type == 2"
                  :label-width="80"
                >
                  <FormItem label="附加项目:">
                    <Select
                      filterable
                      clearable
                      transfer
                      label-in-value
                      :disabled="isCheck"
                      size="small"
                      v-model="element.id"
                      @on-change="(e) => handleExtChange(element, e, modalData)"
                      style="width: 100px"
                    >
                      <Option
                        v-for="item of extList"
                        :key="item.id"
                        :label="item.title"
                        :value="item.id"
                      ></Option>
                    </Select>
                  </FormItem>
                  <FormItem label="数量:">
                    <Input
                      size="small"
                      :disabled="isCheck"
                      v-model="element.num"
                      @on-change="handleTotalPriceCalc(element, modalData)"
                      style="width: 100px"
                      placeholder="请输入数量"
                    />
                  </FormItem>
                  <FormItem label="单价:">
                    <Input
                      size="small"
                      :disabled="isCheck"
                      v-model="element.price"
                      @on-change="handleTotalPriceCalc(element, modalData)"
                      style="width: 100px"
                      placeholder="请输入单价"
                    />
                  </FormItem>
                  <FormItem label="金额:">
                    <Input
                      size="small"
                      :disabled="isCheck"
                      v-model="element.total_price"
                      @on-change="handleTotalPriceChange(element, modalData)"
                      style="width: 100px"
                      placeholder="请输入金额"
                    />
                  </FormItem>
                  <FormItem label="备注:">
                    <Input
                      size="small"
                      :disabled="isCheck"
                      v-model="element.remark"
                      style="width: 100px"
                      placeholder="请输入备注"
                    />
                  </FormItem>
                  <FormItem>
                    <a
                      v-show="!isCheck"
                      style="color: red"
                      @click="
                        handleExtraDele(
                          modalData.extArray,
                          element,
                          idx,
                          modalData
                        )
                      "
                      >删除</a
                    >
                  </FormItem>
                </Form>
              </div>
            </div>
          </TabPane>
        </Tabs>
      </div>
      <div slot="footer">
        <Button @click="cancelModal">取消</Button>
        <Button
          @click="handleEditProductSubmit"
          v-show="!isCheck"
          type="primary"
          >确定</Button
        >
      </div>
    </Modal>
    <Modal
      v-model="showForms"
      @on-ok="postForms(1)"
      class-name="vertical-center-modal"
      style="max-height: 700px; overflow: hidden; overflow-y: auto"
      title="表单设置"
    >
      <Table
        :max-height="600"
        border
        :columns="formSetTableColumns"
        :data="post_formSetTableData"
      >
      </Table>
    </Modal>
  </div>
</template>

<script>
export default {
  beforeRouteLeave(to, from, next) {
    if (this.type == 1 || this.type == 2) {
      if (to.path != "/cms/ordermannage/businessorderlist/list") {
        this.$Modal.confirm({
          title: "提示",
          content: "切换页面会导致数据丢失，是否确认切换？",
          onOk: () => {
            next(() => {});
          },
          onCancel: () => {},
        });
      } else {
        if (this.isAllowLeave) {
          next(() => {});
        } else {
          this.$Modal.confirm({
            title: "提示",
            content: "切换页面会导致数据丢失，是否确认切换？",
            onOk: () => {
              next(() => {});
            },
            onCancel: () => {},
          });
        }
      }
    } else {
      next(() => {});
    }
  },
  data() {
    return {
      lineData:[],
      ext_sum:0,
      MTBtotal:0,
      currency_edit_index: null,
      measure_total: [],
      part_type_total: [],
      showForms: false,
      forms_list: [],
      type: 1,
      order_no: this.$route.query.order_no,
      modalArray: [],
      modalData: {},
      productList: [],
      product_metailList: [],
      metalList: [],
      extList: [],
      coumstList: [],
      tableWidth: null,
      users: [],
      lock_list: [],
      headers: { Authorization: localStorage.getItem("token") },
      uploadData: {
        order_no: this.$route.query.order_no,
        title: "",
      },
      title_state: 0,
      clientList: [],
      clientDetailList: [],
      clientDetailList_mobile: [],
      clientDetailList_respon: [],
      clientDetailList_address: [],
      tableData: [],
      showEditProduct: false,
      infoRules: {
        residential_name: [{ required: true, message: " ", trigger: "blur" }],
        warning_state: [{ required: true, message: " " }],
        pay_state: [{ required: true, message: "" }],
        predict_price: [{ required: true, message: " " }],
        fax_price: [{ required: true, message: " " }],
        order_price: [{ required: true, message: " " }],
        custom_id: [{ required: true, message: " " }],
        start_time: [{ required: true, message: " " }],
        end_time: [{ required: true, message: " " }],
        box_id: [{ required: true, message: " " }],
        remark: [{ required: true, message: " " }],
      },
      info: {
        residential_name: "", //项目名称
        order_no: "", //订单号
        client_name: "", //客户名称
        address: "", //
        mobile: "", //手机号
        start_time: new Date().toLocaleDateString().replace(/\//g, "-"), //开始时间
        end_time: "", //结束时间
        pay_state: "", //是否支付
        warning_state: 1, //是否紧急
        predict_time: "", //预估交付日期
        service_id: null, //业务员
        predict_price: null, //预估工价,
        predict_working: null, //预估工期
        remark: "",
        img: [],
        front_money: 0,
      },
      process_match_list: [],
      process_all_list: [
        { id: 1, title: "材质" },
        { id: 2, title: "颜色" },
        { id: 3, title: "工艺" },
      ],
      img: [],
      sub_material_list: [],
      showCurrencyOnly: false,
      options: {
        disabledDate(date) {
          return date && date.valueOf() < Date.now() - 86400000;
        },
      },
      editForm: {},
      is_material_show: false,
      currencyIndex: null,
      currentTabIndex: "0",
      parts_title_count: [],
      wood_title_count: [],
      isCheck: false,
      warningList: [],
      originalTableColumns: [
        { title: "原材料名称", align: "center", key: "title" },
        { title: "原材料库存", align: "center", key: "stock" },
        { title: "所需原材料数量", align: "center", key: "num" },
        // { title: '原材料单价', align: 'center', key: 'price' },
        {
          title: "规格型号",
          align: "center",
          key: "specifications",
          render: (h, params) => {
            const { row } = params;
            let text = "";
            row.long ? (text += "L" + row.long + "*") : "";
            row.wide ? (text += "W" + row.wide + "*") : "";
            row.high ? (text += "H" + row.high + "*") : "";
            text = text.substring(0, text.length - 1);
            return h("span", {}, text);
          },
        },
        { title: "原材料单位", align: "center", key: "unit" },
        {
          title: "原材料预估费用",
          align: "center",
          key: "total_price",
        },
      ],
      originalData: [],
      isAllowLeave: false,
      pre_process_obj: {},
      route_id_at_copy: "",
      formSetTableColumns: [
        {
          title: "是否展示",
          align: "center",
          key: "is_show",
          minWidth: 60,
          render: (h, params) => {
            const { index } = params;
            const currentRow = JSON.parse(
              JSON.stringify(this.post_formSetTableData[index])
            );
            return h("Checkbox", {
              props: {
                value: currentRow.is_show,
                disabled:
                  currentRow.key == "order_no" ||
                  currentRow.key == "residential_name" ||
                  currentRow.key == "warning_state" ||
                  currentRow.key == "start_time" ||
                  currentRow.key == "end_time" ||
                  currentRow.key == "client_name" ||
                  currentRow.key == "predict_price" ||
                  currentRow.key == "box_id" ||
                  currentRow.key == "predict_price" ||
                  currentRow.key == "order_price" ||
                  currentRow.key == "fax_price" ||
                  currentRow.key == "remark",
              },
              on: {
                "on-change": (e) => {
                  currentRow.is_show = e;
                  this.post_formSetTableData.splice(index, 1, currentRow);
                },
              },
            });
          },
        },
        {
          title: "字段名",
          align: "center",
          key: "value",
          minWidth: 100,
        },
        {
          title: "展示名称",
          align: "center",
          key: "title",
          minWidth: 100,
          render: (h, params) => {
            const { index } = params;
            const currentRow = JSON.parse(
              JSON.stringify(this.post_formSetTableData[index])
            );
            return h("Input", {
              props: {
                value: currentRow.title,
                type: "text",
              },
              on: {
                "on-change": (e) => {
                  currentRow.title = e.target.value;
                  this.post_formSetTableData.splice(index, 1, currentRow);
                },
              },
            });
          },
        },
      ],
      formSetTableData: [
        {
          is_show: true,
          key: "order_no",
          value: "订单编号",
          title: "订单编号",
        },
        {
          is_show: true,
          key: "residential_name",
          value: "项目地址",
          title: "项目地址",
        },
        {
          is_show: true,
          key: "warning_state",
          value: "紧急程度",
          title: "紧急程度",
        },
        {
          is_show: true,
          key: "front_money",
          value: "项目定金",
          title: "项目定金",
        },
        {
          is_show: true,
          key: "start_time",
          value: "开始日期",
          title: "开始日期",
        },
        {
          is_show: true,
          key: "client_name",
          value: "客户名称",
          title: "客户名称",
        },
        {
          is_show: true,
          key: "custom_detail_name",
          value: "负责人",
          title: "负责人",
        },
        {
          is_show: true,
          key: "custom_detail_mobile",
          value: "手机号",
          title: "手机号",
        },
        {
          is_show: true,
          key: "custom_detail_id",
          value: "地址",
          title: "地址",
        },
        {
          is_show: true,
          key: "service_id",
          value: "专营业务员",
          title: "专营业务员",
        },
        {
          is_show: true,
          key: "end_time",
          value: "交付日期",
          title: "交付日期",
        },
        {
          is_show: true,
          key: "predict_price",
          value: "产品总价",
          title: "产品总价",
        },
        {
          is_show: true,
          key: "order_price",
          value: "订单金额",
          title: "订单金额",
        },
        {
          is_show: true,
          key: "fax_price",
          value: "折扣金额",
          title: "折扣金额",
        },
        { is_show: true, key: "box_id", value: "包装", title: "包装" },
        { is_show: true, key: "remark", value: "订单备注", title: "订单备注" },
      ],
      post_formSetTableData: [],
      charge_list: [],
      cus_list: [],
      pre_bp_id: "",
      support_remark: [],
      bpp_list: [],
      process_obj: [],
      timeout: null,
      copiedLinePart: {},
      mentoubanList: [],
      print_line_data: "",
      MTBList: [],
    };
  },
  computed: {
    predict_price_clac() {
      let sum = 0;
      return sum;
    },
  },
  watch: {},
  created() {
    //获取部件分类
    this.axios.get("/api/basics_parts_index").then((res) => {
      res.data.data.map((v, k) => {
        if (v.title == "门头板") {
          this.mentoubanList = res.data.data.splice(k, 1)[0];
        }
      });
      this.part_type_total = res.data.data;
    });
    // 获取测量字段
    this.axios.get("/api/basics_measure_index").then((res) => {
      this.measure_total = res.data.data;
    });
    //   获取工艺属性
    this.axios({
      method: "get",
      url: "/api/bpp_list",
    }).then((res) => {
      if (res.code == 200) {
        this.bpp_list = res.data;
        this.bpp_list.map((v) => {
          this.process_obj.push({
            ...v,
            value: "",
          });
        });
      }
    });
    // 获取负责人列表
    this.axios.get("/api/support_service_name").then((res) => {
      this.clientDetailList_respon = [];
      res.data.map((item) => {
        this.clientDetailList_respon.push({ service_name: item });
      });
      this.charge_list = JSON.parse(
        JSON.stringify(this.clientDetailList_respon)
      );
    });
    // 获取设置表单
    this.get_forms();
    // 获取紧急程度
    this.axios.get("/api/warning_list").then((res) => {
      (this.warningList = res.data.data),
        (this.info.warning_state = this.warningList[0].id);
    });
    // 获取客户列表
    this.axios.get("/api/custom_list").then((res) => {
      this.cus_list = JSON.parse(JSON.stringify(res.data.data));
      this.clientList = res.data.data;
    });
    // 获取五金列表
    this.axios
      .get("/api/material", { params: { sub_type_id: 5 } })
      .then((res) => {
        if (res.code == 200) {
          this.metalList = res.data.data;
        }
      });
    // 获取辅料列表
    this.axios
      .get("/api/material", { params: { sub_type_id: 4 } })
      .then((res) => {
        if (res.code == 200) {
          this.sub_material_list = res.data.data;
        }
      });
    // 获取附加列表
    this.axios.get("/api/project_ext_list").then((res) => {
      if (res.code == 200) {
        this.extList = res.data.data;
      }
    });
    let date1 = new Date();
    let date2 = new Date();
    date2.setDate(date1.getDate() + 30);
    this.info.end_time = date2;
    this.tableWidth = window.innerWidth - 300;
    this.getUsers();
    this.type = this.$route.query.type;
    // this.axios("/api/order_get_forms").then((res) => {
    //   if (res.code == 200) {
    //     this.forms_list = res.data;
    //     this.postForms(0);
    //   }
    // });
    this.getCoumstList();
    this.getLockList();
  },
  mounted() {
    if (this.order_no) {
      if (this.order_no) {
        this.info = {};
      }
      this.initData(this.order_no);
    }
    this.getProducts();
    if (this.$route.query.type != 1) {
      this.print_line();
    }
    addEventListener("resize", (e) => {
      this.tableWidth = e.target.innerWidth - 300;
      this.$forceUpdate();
    });
    this.axios
      .get("/api/parts_index", { params: { type_title: "门头板" } })
      .then((res) => {
        if (res.code == 200) {
          this.MTBList = res.data.data;
        }
      });
  },
  methods: {
    numFocus(idx){
      this.modalData.part[idx].MTBnum = '';
       this.$forceUpdate();
    },
    priceFocus(idx){
      this.modalData.part[idx].MTBprice = '';
      this.$forceUpdate();
    },
    longFocus(idx){
      this.modalData.part[idx].long = '';
    },
     wideFocus(idx){
      this.modalData.part[idx].wide = '';
    },
     highFocus(idx){
      this.modalData.part[idx].high = '';
    },
    changeHigh(row,index,arr){
     if(row.addMTB){
        if(row.long&&row.wide){
          row.MTBsize = (1*row.long*row.wide)/1000000>=0.3?(1*row.long*row.wide)/1000000:0.3;
         arr.part[index].MTBsize = (1*row.long*row.wide)/1000000>=0.3?(1*row.long*row.wide)/1000000:0.3;
        //  arr.part[index].MTBtotal = arr.part[index].MTBsize*arr.part[index].MTBnum*arr.part[index].MTBprice*1
        this.changeNum(row,index,arr)
        }
     }else{
       return
     }
    },
    changeNum(row,index,arr){
      if(row.MTBnum&&row.MTBsize&&row.MTBprice){

        row.MTBtotal = (row.MTBnum*1*row.MTBsize*row.MTBprice).toFixed(2)
        arr.part[index].MTBtotal = (row.MTBnum*1*row.MTBsize*row.MTBprice).toFixed(2)
        this.MTBtotal = arr.part[index].MTBtotal*1
        arr.ext_price = this.ext_sum*1 + this.MTBtotal*1; 
        arr.price =
        (arr.unit_price * 1 || 0) * (arr.num * 1 || 1) +
        (arr.over_price_total * 1 || 0) +
        (arr.ext_price * 1 || 0);
      arr.price = arr.price.toFixed(2);
        this.$forceUpdate();
      }else{
       return 
      }
     
    },
    quoteRoughDraft() {
      this.axios
        .post("/api/update/get_table", {
          id: "businessorderlist_detail_roughDraft",
        })
        .then((res) => {
          this.post_formSetTableData = res.data.table.post_formSetTableData;
          this.info = res.data.table.info;
          this.formSetTableData = res.data.table.formSetTableData;
          this.handleClientChargeChange(res.data.table.info.custom_detail_name);
          this.tableData = res.data.table.tableData;
        });
    },
    saveRoughDraft() {
      this.axios({
        method: "post",
        url: "/api/update/table",
        data: {
          id: "businessorderlist_detail_roughDraft",
          result: {
            post_formSetTableData: this.post_formSetTableData,
            info: this.info,
            formSetTableData: this.formSetTableData,
            tableData: this.tableData,
          },
        },
      }).then((res) => {
        if (res.code == 200) {
          this.$Message.success(res.msg);
          // this.initData(this.order_no);
        }
      });
    },
    print_line() {
      this.axios({
        method: "get",
        url: "/api/printe_order_detail",
        params: {
          order_no: this.$route.query.order_no,
          box_id: "",
        },
      }).then((res) => {
        this.print_line_data = res.msg.foot.amount_detail;
      });
    },
    handleFaxPriceChange(e) {
      this.info.fax_price = e.target.value;
      this.info.order_price = (
        this.info.predict_price - e.target.value
      ).toFixed(2);
      this.$forceUpdate();
    },
    getSelectedLabel(value, list, valueProp, labelField) {
      const item = list.find((item) => item[valueProp] == value);
      return item ? item[labelField] : null;
    },
    get_forms() {
      this.axios
        .post("/api/update/get_table", { id: "businessorderlist_detail" })
        .then((res) => {
          if (Array.isArray(res.data)) {
            this.post_formSetTableData = JSON.parse(
              JSON.stringify(this.formSetTableData)
            );
          } else {
            if (res.data.table.formSet && res.data.table.formSet.length > 0) {
              this.formSetTableData = JSON.parse(
                JSON.stringify(res.data.table.formSet)
              );
              this.post_formSetTableData = JSON.parse(
                JSON.stringify(res.data.table.formSet)
              );
            } else {
              this.post_formSetTableData = JSON.parse(
                JSON.stringify(this.formSetTableData)
              );
            }
          }
        });
    },
    print() {
      this.$router.push({
        path: "/cms/ordermannage/businessorderlist/printlist",
        query: {
          order_no: this.$route.query.order_no,
          box_id: this.info.box_id,
        },
      });
    },
    back() {
      // this.$router.go(-1);
      this.$router.push({
        path: "/cms/ordermannage/businessorderlist/list",
      });
    },
    postForms(n) {
      this.post_formSetTableData.forEach((element, index) => {
        element.sort = index;
      });
      this.axios({
        method: "post",
        url: "/api/update/table",
        data: {
          id: "businessorderlist_detail",
          result: {
            formSet: this.post_formSetTableData,
          },
        },
      }).then((res) => {
        if (res.code == 200) {
          this.$Message.success(res.msg);
          // this.initData(this.order_no);
          this.get_forms();
        }
      });
    },
    postData() {
      let sendData = JSON.parse(JSON.stringify(this.info));
      // sendData.custom_detail_id = sendData.custom_id
      // let sendList = JSON.parse(JSON.stringify(this.tableData));
      let sendList = this.tableData.filter((v) => !v.is_metal && v.product_id);
      let _save_metal = this.tableData.filter(
        (v) => v.is_metal && v.product_id
      );
     
      _save_metal.length > 0 &&
        _save_metal.map((v) => {
          v.type = 1;
          v.material_id = v.product_id;
          v.ext_id = v.product_id;
        });
     
      sendList.length > 0 &&
        sendList.map((element, index) => {
          element.ext = element.extArray;
          element.part.map((elem) => {
            if (!elem.is_metal) {
              // elem.part_detail = elem.sub_part;
              if (!elem.part_detail) {
                elem.part_detail = elem.sub_part || [];
              }
              elem.part_detail.map((el) => {
                el.material_num = el.material_detail_num;
              });
            }
          });
         
          if (!element.measurement) {
            element.measurement = "";
          }
          if (!element.measurement_no_letter) {
            element.measurement_no_letter = "";
          }
          let tempStr = "";
          let tempStr_no_letter = "";
          element.measure.forEach((elem) => {
            element[elem.e_title] = elem.value;
            tempStr += elem.measureCalc + elem.value + "*";
            tempStr_no_letter += elem.value + "*";
          });
          element.measurement = tempStr.substring(0, tempStr.length - 1);
          element.measurement_no_letter = tempStr_no_letter.substring(
            0,
            tempStr_no_letter.length - 1
          );
        });
      sendList.length > 0 &&
        (sendList[0].ext = sendList[0].ext
          ? sendList[0].ext.filter((v) => v.type == 2)
          : "");
      _save_metal.length > 0 && sendList[0].ext.push(..._save_metal);
      try {
        sendData.start_time = new Date(sendData.start_time)
          .toLocaleDateString()
          .replace(/\//g, "-");
        sendData.end_time = new Date(sendData.end_time)
          .toLocaleDateString()
          .replace(/\//g, "-");
      } catch (e) {
        console.log(e);
      }
      let params = { ...sendData, product: sendList, renovation_type: 2 };
      params.product.forEach(v=>{
        v.part.forEach(m=>{
          m.part_detail.forEach(s=>{
            s.total_num = v.total_num
          })
        })
      })
      this.axios.post("/api/order_save_new", params).then((res) => {
        if (res.code == 200) {
          this.$Message.success(res.msg);
          this.isAllowLeave = true;
          this.back();
        }
      });
    },
    handleShowMaterial() {
      this.is_material_show = !this.is_material_show;
    },
    initData(order_no) {
      this.axios("/api/order_detail_new", { params: { order_no } }).then(
        (res) => {
          //获取产品
          this.info = res.data;
          this.info.img = this.info.imgs;
          this.tableData = res.data.product_list;
          this.support_remark = Array.from(
            new Set([
              ...res.data.product_list[0].support_remark,
              ...this.support_remark,
            ])
          );
          this.tableData.forEach((element) => {
            //表格编辑用数据
            element.select_all_id = element.product_id + "_1";
            element.num_temp_save = ((element.num*1)/(element.total_num*1)) || 1;
            if (element.ext.length > 0) {
              element.ext.map((v, k) => {
                if (v.type == 2) {
                  v.id = v.ext_id;
                  v.total_price = v.num * v.price;
                } else {
                  v.material_id = v.ext_id;
                  v.product_id = v.ext_id;
                  v.single_price = v.price / v.num;
                }
              });
            } else {
              element.ext.push({
                num: 0,
                price: 0,
                total_price: 0,
                type: 2,
                remark: "",
                title: "",
                id: "",
                is_metal: true,
              });
            }
            element.extArray = element.ext;
            element.type_name = element.title;
            for (const k in element.procedure_properties) {
              const v = element.procedure_properties[k];
              element[k] = v * 1;
            }
            // 数据第一次通过接口获取
            element.get_first_data = true;
            //保存用数据
            element.other = element.customize;
            element.process_str = element.process;
            element.process_obj = JSON.parse(JSON.stringify(this.process_obj));
            // 部件尺寸不展示字母
            element.measurement_no_letter = JSON.parse(
              JSON.stringify(element.measurement)
            );
            element.measure.map((v) => {
              element.measurement_no_letter = element.measurement_no_letter.replace(
                new RegExp(v.e_title, "g"),
                ""
              );
              // 表格编辑时用
              element.value = "";
              v.measureCalc = v.e_title;
            });
            this._measure = JSON.parse(JSON.stringify(element.measure));
            element.part.forEach((elem) => {
              if (!elem.is_metal) {
                if (elem.title.indexOf("门头板") != -1) {
                  elem.addMTB = true;
                }
                // 表格数据展示字段
                elem.isBP = true;
                elem.process_str = elem.process;
                elem.process = JSON.parse(JSON.stringify(this.process_obj));
                elem.process.map((v) => {
                  v.value = element[v.id];
                });
                elem.measurement = elem.measure;
                elem.longCalc = elem.long;
                elem.wideCalc = elem.wide;
                elem.highCalc = elem.high;
                let measure_arr = elem.measure.split("*");
                elem.long = measure_arr[0];
                elem.wide = measure_arr[1];
                elem.high = measure_arr[2];
                elem.part_detail = elem.sub_part;
                elem.part_detail &&
                  elem.part_detail.map((_part_detail) => {
                    _part_detail.material_detail_org_num =
                      _part_detail.num || 0;
                    _part_detail.part_detail_option = [];
                    _part_detail.material_detail_list.map((v) => {
                      _part_detail.part_detail_option.push({
                        label: `${v.long}*${v.wide}*${v.high}`,
                        value: v.material_detail_id,
                      });
                    });
                  });
              }
            });
            // 拆分测量字段
            // let product_measure = element.measurement.split('*')
            element.measure.forEach((elem) => {
              element[elem.e_title] = elem.value;
            });
            // 拼五金展示用
            if (element.ext && element.ext.length > 0) {
              element.ext.map((elem) => {
                if (elem.type == 1) {
                  elem.total_num = elem.num;
                  elem.unit_price = elem.price;
                  elem.ext_price = elem.num * elem.price*1;
                  elem.is_metal = true;
                  // element.part.push(elem);
                } else {
                  if (!element.extra) {
                    element.extra = "";
                  }
                  element.extra += `${elem.title}/`;
                }
              });
              if (element.extra) {
                element.extra = element.extra.substring(
                  0,
                  element.extra.length - 1
                );
              }
            }
          });
          this.forms_list = res.tableSet || [];
          // 查看详情时获取原材料信息
          this.originalData = res.data.material_list;
          this.originalData.forEach((element) => {
            element.total_price = (element.num * element.price).toFixed(2);
          });
          this.tableData[0].ext.map((v) => {
            if (v.type === 1) {
              v.is_metal = true;
              v.material_id = v.ext_id;
              v.product_id = v.ext_id;
              v.select_all_id = v.ext_id + "_2";
              this.tableData.push(v);
            }
          });
          this.handleCalcCount(1);
          this.HandleAutoCreateNewLine();
          //获取客户信息
          this.axios
            .get("/api/custom_detail", { params: { id: res.data.custom_id } })
            .then((re) => {
              this.clientDetailList = re.data.list;
              const _temp = this.clientDetailList.filter(
                (item) => item.id == res.data.custom_detail_id
              );
              this.info.custom_detail_name = _temp[0].service_name;
              this.info.custom_detail_mobile = _temp[0].mobile;
              // 去重负责人
              this.clientDetailList_respon = this.unique(re.data.list);
              // 取负责人名字
              // 取出手机号码是该负责人的
              this.clientDetailList_mobile = this.unique(re.data.list);
              this.clientDetailList_mobile = this.clientDetailList.filter(
                (item) => item.service_name == this.info.custom_detail_name
              );
              // 去重手机号码
              this.clientDetailList_mobile = this.unique(
                this.clientDetailList_mobile
              );
              // 取出地址是该负责人的
              this.clientDetailList_address = this.clientDetailList.filter(
                (item) => item.service_name == this.info.custom_detail_name
              );
              this.fax = re.data.detail.fax;
              // 修改价格
              let sum = 0;
              this.tableData.forEach((element) => {
                sum += element.price * 1;
              });
              this.info.service_id = re.data.detail.service_id;
              this.info.predict_price = sum.toFixed(2);
              this.info.order_price = (
                this.info.predict_price - this.info.fax_price
              ).toFixed(2);
              this.$forceUpdate();
            });
        }
      );
    },
    addHours(row) {
      row.push({
        unit: null,
        layer: null,
        number: null,
        product: [{ product_id: "" }],
      });
    },
    getProducts() {
      this.axios("/api/product").then((res) => {
        this.productList = res.data.data;
        this.productList.map((v) => {
          v.label = v.title;
          v.value = v.id;
        });
      });
      this.axios("/api/get_select_all").then((res) => {
        this.product_metailList = res.data;
      });
    },
    cancelModal() {
      this.showEditProduct = false;
    },
    handleSubmit(name) {
      console.log(1)
      this.$refs[name].validate((valid) => {
        if (valid) {
          this.debounce(500);
        }
      });
    },
    debounce(delay) {
      if (this.timeout) {
        // clearTimeout(this.timeout);
        this.timeout = null;
      } else {
        this.timeout = setTimeout(() => {
          this.postData();
        }, delay);
      }
    },
    handleEditProductSubmit() {
      this.$Modal.confirm({
        content: "请确认线条名称是否正确！",
        onOk: () => {
          const checkArr = this.modalData.part.filter((v) => {
            return !v.change_id && !v.is_metal;
          });
          if (checkArr.length > 0) {
            return this.$Message.warning("部件信息请填写完整！");
          }

          // 工艺属性
          if (!this.modalData.procedure_properties_str) {
            this.modalData.procedure_properties_str = [];
          }
          this.modalData.process_obj &&
            this.modalData.process_obj.forEach((elem, index) => {
              const _temp = elem.cld.filter((item) => item.id == elem.value);
              this.modalData.procedure_properties_str[index] =
                _temp.length > 0 ? _temp[0].title : "";
            });
          this.modalData.process_str = this.modalData.procedure_properties_str.join(
            "/"
          );
          // 尺寸
          if (!this.modalData.measurement) {
            this.modalData.measurement = "";
          }
          if (!this.modalData.measurement_no_letter) {
            this.modalData.measurement_no_letter = "";
          }
          let tempStr = "";
          let tempStr_no_letter = "";
          this.modalData.measure.forEach((elem) => {
            this.modalData[elem.e_title] = elem.value;
            tempStr += elem.measureCalc + elem.value + "*";
            tempStr_no_letter += elem.value + "*";
          });
          this.modalData.measurement = tempStr.substring(0, tempStr.length - 1);
          this.modalData.measurement_no_letter = tempStr_no_letter.substring(
            0,
            tempStr_no_letter.length - 1
          );
          // 五金、  附加项目
          this.modalData.ext = this.modalData.extArray;
          //其他项
          this.modalData.other = this.modalData.customize;
          // 部件字段
          this.modalData.part.forEach((elem, idx) => {
            if (!elem.is_metal) {
              elem.title ? "" : (elem.title = elem.part_title);
              // if (elem.procedure_properties_str && elem.procedure_properties_str != 0) {
              //   elem.process_str = elem.procedure_properties_str.join('/')
              // } else {
              elem.procedure_properties_str = [];
              if (elem.process) {
                elem.process.forEach((item, index) => {
                  if (item.cld) {
                    let _temp = [];
                    item.cld.filter((_cld) => _cld.id == item.value);
                    elem.procedure_properties_str[index] =
                      _temp.length > 0 ? _temp[0].title : "";
                  }
                });
                elem.process_str = elem.procedure_properties_str.join("/");
                elem.procedure_properties = {};
                elem.process.map((item) => {
                  elem.procedure_properties[item.id] = item.value;
                });
              }
              // }
            } else {
              this.modalData.part.splice(idx, 1);
            }
          });
          this.modalData.extra = "";
          this.modalData.extArray &&
            this.modalData.extArray.map((item) => {
              const temp = this.extList.filter((it) => it.id == item.ext_id);
              temp && temp.length > 0 && (item.title = temp[0].title);
            });
          this.modalData.extra = this.modalData.extArray
            ? this.modalData.extArray.reduce((pre, cur) => {
                return pre + `${cur.title}/`;
              }, "")
            : "/";
          this.modalData.extra = this.modalData.extra.substring(
            0,
            this.modalData.extra.length - 1
          );
          const _temp = this.productList.filter(
            (item) => item.id == this.modalData.product_id
          );
          this.modalData.title = _temp[0].title;
          this.tableData.splice(this.currencyIndex, 1, this.modalData);
          this.route_id_at_copy = "";
          // 合计 、 线条 统计价格
          this.handleCalcCount();
          this.showEditProduct = false;
          this.$forceUpdate();
        
        },
        onCancel: () => {},
      });
    },
    // 合计 、 线条 统计价格
    handleCalcCount(type) {
      let sum = 0;
      this.parts_title_count = [];
      this.wood_title_count = [];
      let total_line_unit = "";
      console.log(this.tableData)
      this.tableData.forEach((element) => {
        sum += element.price * 1;
        if (!element.is_metal) {
          element.part &&
            element.part.forEach((elem) => {
              if (!elem.is_metal) {
                // 统计部件
                const temp = this.parts_title_count.filter(
                  (item) => item.title == elem.title
                );
                if (temp && temp.length > 0) {
                  this.parts_title_count.map((v) => {
                    v.title == elem.title && (v.num=v.num*1+element.total_num*1);
                  });
                } else {
                  console.log(elem)
                  this.parts_title_count.push({
                    change_id: elem.change_id,
                    title: elem.title,
                    num: element.total_num*1||1,
                    unit: elem.unit,
                  });
                }
                // 如果没有点开产品详情的话找不到 part_detail
                if (!elem.part_detail) {
                  elem.part_detail = elem.sub_part;
                }
                // 部件中要统计所有线条数量
                elem.part_detail &&
                  elem.part_detail.length > 0 &&
                  elem.part_detail.forEach((el) => {
                    if (el.material_detail_title.indexOf("线条") != -1) {
                      const temp = this.wood_title_count.filter(
                        (item) => item.title == el.material_detail_title
                      );
                      if (temp && temp.length > 0) {
                        // 匹配规格是否已存在
                        const _temp = temp[0].measure_str.filter(
                          (item) => item.id == el.material_detail_id
                        );
                        if (_temp && _temp.length > 0) {
                          this.wood_title_count.map((v) => {
                            v.title == el.material_detail_title &&
                              v.measure_str.map((item) => {
                                if (item.id == el.material_detail_id) {
                                  item.num =
                                    item.num * 1 + el.material_detail_num * 1;
                                }
                              });
                          });
                        } else {
                          // 不存在一样规格
                          if (
                            el.material_detail_list &&
                            el.material_detail_list.length > 0
                          ) {
                            const __temp = el.material_detail_list.filter(
                              (item) =>
                                item.material_detail_id == el.material_detail_id
                            );
                            this.wood_title_count.map((v) => {
                              v.title == el.material_detail_title &&
                                ((v.unit = __temp[0].unit),
                                v.measure_str.push({
                                  num: el.material_detail_num,
                                  id: __temp[0].material_detail_id,
                                  measure: `${__temp[0].long || 0}*${__temp[0]
                                    .wide || 0}*${__temp[0].high || 0}`,
                                }));
                            });
                          } else {
                            this.wood_title_count.map((v) => {
                              v.title == el.material_detail_title &&
                                ((v.unit = el.unit),
                                v.measure_str.push({
                                  num: el.material_detail_num,
                                  id: el.material_detail_id,
                                  measure: `${el.long || 0}*${el.wide ||
                                    0}*${el.high || 0}`,
                                }));
                            });
                          }
                        }
                      } else {
                        // 不存在就新增
                        if (
                          el.material_detail_list &&
                          el.material_detail_list.length > 0
                        ) {
                          const _temp = el.material_detail_list.filter(
                            (item) =>
                              item.material_detail_id == el.material_detail_id
                          );
                          if (_temp && _temp.length > 0) {
                            if (!total_line_unit) {
                              total_line_unit = _temp[0].unit;
                            }
                            this.wood_title_count.push({
                              title: el.material_detail_title,
                              unit: total_line_unit,
                              measure_str: [
                                {
                                  num: el.material_detail_num,
                                  id: _temp[0].material_detail_id,
                                  measure: `${_temp[0].long || 0}*${_temp[0]
                                    .wide || 0}*${_temp[0].high || 0}`,
                                  unit: _temp[0].unit,
                                },
                              ],
                            });
                          }
                        } else {
                          if (!total_line_unit) {
                            total_line_unit = el.unit;
                          }
                          this.wood_title_count.push({
                            title: el.material_detail_title,
                            unit: total_line_unit,
                            measure_str: [
                              {
                                num: el.material_detail_num,
                                id: el.material_detail_id,
                                measure: `${el.long || 0}*${el.wide ||
                                  0}*${el.high || 0}`,
                                unit: el.unit,
                              },
                            ],
                          });
                        }
                      }
                    }
                  });
              }
            });
        }
      });
      // 数线条
      let total_line = 0;
      this.wood_title_count.map((v) => {
        v.measure_str.map((w) => {
          total_line += w.num * 1;
        });
      });
      // 线条合计放进统计
      this.parts_title_count.push({
        title: "线 条",
        num: total_line,
        unit: total_line_unit,
      });
      // 计算价格
      if (type) {
        this.info.order_price = (
          this.info.predict_price - this.info.fax_price
        ).toFixed(2);
      } else {
        this.info.predict_price = sum.toFixed(2);
        this.info.order_price = (
          (this.info.predict_price * this.fax) /
          100
        ).toFixed(2);
        this.info.fax_price = (
          this.info.predict_price - this.info.order_price
        ).toFixed(2);
      }
    },
    getUsers() {
      this.axios("/api/employee_list").then((res) => (this.users = res.data));
    },
    handleExtraAdd(array, type) {
      array.push({
        num: 0,
        price: 0,
        total_price: 0,
        type,
        remark: "",
        title: "",
        id: "",
        is_metal: true,
      });
      this.handleCalcCount();
      this.$forceUpdate();
    },
    handleExtraDele(array, row, index, modalData) {
      array.splice(index, 1);
      if(array.length==0){
         array.push({
        num: 0,
        price: 0,
        total_price: 0,
        type:2,
        remark: "",
        title: "",
        id: "",
        is_metal: true,
      });
      }
      this.handleTotalPriceCalc(row, modalData);
      this.handleCalcCount();
      this.$forceUpdate();
    },
    getCoumstList() {
      this.axios("/api/bpp_list").then((res) => {
        res.data.map((v) => {
          if (v.select) {
            v.cld.map((z) => {
              v.select.map((k) => {
                z.show = k == z.id ? true : false;
              });
            });
          } else {
            v.cld.map((v) => (v.show = false));
          }
        });
        this.coumstList = res.data;
      });
    },
    handleRemarkCreate(val) {
      this.support_remark.push(val);
    },
    handleMTBClick(row) {
      row.addMTB = true;
      const _obj = {
        is_metal: false,
        addMTB: true,
        isBP: false,
        isChoosed: false,
        change_id: "",
        change: this.deepClone(this.MTBList),
        long: "",
        wide: "",
        high: "",
        hide_measure: [],
        part_title:'',
        process: [],
        part_id: '', //门头板ID   没有part_id 通过选择框来确定part_id 就是id
        hide_process: ["1", "2", "3"],
        part_detail: [
          {
            title: "",
            part_detail_title: "",
            material_detail_title: "",
            material_detail_id: "",
            material_detail_list: [
              {
                material_detail_id: "",
                wide: "",
                high: "",
                long: "",
                material_detail_num: "",
              },
            ],
          },
        ],
      };
      _obj.process = JSON.parse(JSON.stringify(this.process_obj))
      row.part.push(_obj);
      this.$forceUpdate();
    },
    getLockList() {
      this.axios("/api/lock_list").then((res) => (this.lock_list = res.data));
    },
    modalVisibleChange(e) {
      if (!e) {
        this.cancelModal();
      }
    },
    unique(array) {
      let arr = JSON.parse(JSON.stringify(array));
      for (var i = 0; i < arr.length; i++) {
        for (var j = i + 1; j < arr.length; j++) {
          if (arr[i].service_name == arr[j].service_name) {
            //第一个等同于第二个，splice方法删除第二个
            arr.splice(j, 1);
            j--;
          }
        }
      }
      return arr;
    },
    handleClientChange(id) {
      if (id) {
        this.axios({
          method: "get",
          url: "/api/custom_detail",
          params: { id },
        }).then((res) => {
          this.info.custom_id = id;
          this.clientDetailList = res.data.list;
          // 去重负责人
          this.clientDetailList_respon = this.unique(res.data.list);
          // 赋值默认负责人
          this.info.custom_detail_name = this.clientDetailList_respon[0].service_name;
          // 取出手机号码是该负责人的
          this.clientDetailList_mobile = this.clientDetailList.filter(
            (item) => item.service_name == this.info.custom_detail_name
          );
          // 赋值默认手机号码
          this.info.custom_detail_mobile = this.clientDetailList_mobile[0].mobile;
          // 去重手机号码
          this.clientDetailList_mobile = this.unique(
            this.clientDetailList_mobile
          );
          // 取出地址是该负责人的
          this.clientDetailList_address = this.clientDetailList.filter(
            (item) => item.service_name == this.info.custom_detail_name
          );
          // 赋值默认地址
          this.info.custom_detail_id = this.clientDetailList_respon[0].id || 0;
          this.info.service_id = res.data.detail.service_id;
          this.fax = res.data.detail.fax;
          this.HandleAutoCreateNewLine();
          this.$forceUpdate();
        });
      } else {
        this.clientDetailList_respon = JSON.parse(
          JSON.stringify(this.charge_list)
        );
        this.clientList = JSON.parse(JSON.stringify(this.cus_list));
      }
    },
    handleSpan({ row, column, rowIndex, columnIndex }) {
      if (row.end) {
        return [1, 6];
      }
    },
    handleSummary({ columns, data }) {
      const sums = {};
      columns.forEach((column, index) => {
        const key = column.key;
        if (index === 0) {
          sums[key] = {
            key,
            value: "合计",
          };
          return;
        }
        const values = data.map((item) => Number(item[key]));
        if (!values.every((value) => isNaN(value))) {
          const v = values.reduce((prev, curr) => {
            const value = Number(curr);
            if (!isNaN(value)) {
              return prev + curr;
            } else {
              return prev;
            }
          }, 0);
          sums[key] = {
            key,
            value: v,
          };
        } else {
          sums[key] = {
            key,
            value: "",
          };
        }
      });
      return sums;
    },
    handleMetalChange(e, row, n, arr) {
      arr[n].ext_id = e.value;
      arr[n].title = e.label;
    },
    handleClientChargeChange(value) {
      if (value) {
        // if (this.info.custom_id) {
        //   this.info.custom_detail_name = value;
        //   // 取出手机号码是该负责人的
        //   this.clientDetailList_mobile = this.clientDetailList.filter(
        //     (item) => item.service_name == this.info.custom_detail_name
        //   );
        //   // 赋值默认手机号码
        //   this.info.custom_detail_mobile = this.clientDetailList_mobile[0].mobile;
        //   // 去重手机号码
        //   this.clientDetailList_mobile = this.unique(
        //     this.clientDetailList_mobile
        //   );
        //   // 取出地址是该负责人的
        //   this.clientDetailList_address = this.clientDetailList.filter(
        //     (item) => item.service_name == this.info.custom_detail_name
        //   );
        //   // 赋值默认地址
        //   this.info.custom_detail_id = this.clientDetailList_address[0].id || 0;
        // } else {
        this.axios
          .get("/api/support_custom_for_service", {
            params: { name: this.info.custom_detail_name },
          })
          .then((res) => {
            this.clientList = res.data.data;
            this.info.custom_id = res.data.data[0].id;
            this.axios({
              method: "get",
              url: "/api/custom_detail",
              params: { id: res.data.data[0].id },
            }).then((re) => {
              this.clientDetailList = re.data.list;
              // 取出手机号码是该负责人的
              this.clientDetailList_mobile = this.clientDetailList.filter(
                (item) => item.service_name == value
              );
              // 赋值默认手机号码
              this.info.custom_detail_mobile = this.clientDetailList_mobile[0].mobile;
              // 去重手机号码
              this.clientDetailList_mobile = this.unique(
                this.clientDetailList_mobile
              );
              // 取出地址是该负责人的
              this.clientDetailList_address = this.clientDetailList.filter(
                (item) => item.service_name == value
              );
              // 赋值默认地址
              this.info.custom_detail_id =
                this.clientDetailList_address[0].id || 0;
              this.info.service_id = re.data.detail.service_id;
              this.fax = re.data.detail.fax;
              this.HandleAutoCreateNewLine();
            });
          });
        // }
      } else {
        this.info.custom_detail_mobile = "";
        this.info.custom_detail_id = "";
        this.info.service_id = "";
        this.clientDetailList_respon = JSON.parse(
          JSON.stringify(this.charge_list)
        );
        this.clientList = JSON.parse(JSON.stringify(this.cus_list));
        this.HandleAutoCreateNewLine();
      }
    },
    handleClientDetailChange(value) {
      if (value) {
        // this.clientDetailList_mobile = this.clientDetailList.filter(
        //   (item) => item.service_name == this.info.custom_detail_name
        // );
        this.info.custom_detail_id = value;
        // this.info.address = row[0].address;
        // this.info.address = row[0].address;
        // this.info.mobile = row[0].mobile;
        this.$forceUpdate();
      }
    },
    getEditData(modalData, curData) {
      // console.log("modalData :>> ", modalData);
      // console.log("curData :>> ", curData);
      modalData.ext_price = curData.ext_price * 1 || 0;
      modalData.model = curData.model;
      modalData.num = curData.num || 1;
      modalData.num_temp_save = modalData.num;
      modalData.over_price = curData.over_price * 1 || 0;
      modalData.position = curData.position;
      modalData.price = curData.price;
      modalData.product_id = curData.product_id;
      modalData.remark = curData.remark;
      modalData.route_id = curData.route_id;
      modalData.total_num = curData.total_num;
      modalData.unit = curData.unit;
      modalData.unit_price = curData.unit_price * 1 || 0;
      modalData.url_number = curData.url_number;
      modalData.extArray = [];

      // 金额=（产品单价）*核算数量+超标金额+附加金额
      modalData.price =
        (modalData.unit_price * 1 || 0) * (modalData.num * 1 || 1) +
        (modalData.over_price_total * 1 || 0) +
        (modalData.ext_price * 1 || 0);
      modalData.price = modalData.price.toFixed(2);
      // 获取产品 type_name
      const temprow = this.productList.filter(
        (item) => item.id == curData.product_id
      );
      modalData.type_name = temprow[0].title;
      // 获取工艺属性
      // 如果route_id是0，工艺属性值取procedure_properties
      if (modalData.route_id == 0) {
        modalData.process_obj.map((v) => {
          v.value = modalData.procedure_properties[v.id] * 1;
        });
      } else {
        this.process_match_list.forEach((element) => {
          if (element.id == curData.route_id) {
            modalData.process_ids = element.detail;
          }
        });
        modalData.process_obj.forEach((element) => {
          //赋值测量字段
          for (const key in modalData.process_ids) {
            const ele = modalData.process_ids[key];
            if (element.id == key) {
              element.value = ele * 1;
            }
          }
        });
      }
      // 产品测量字段
      let product_measure = curData.measurement.split("*");
      for (let index = 0; index < product_measure.length; index++) {
        const item = product_measure[index];
        const product_measure_detail = [
          item.substring(0, 1),
          item.substring(1),
        ];
        modalData.measure.forEach((element) => {
          if (element.measureCalc == product_measure_detail[0]) {
            element.value = product_measure_detail[1];
          }
        });
      }
      // 拆分五金、附加信息
      // if (!curData.ext) {
      //   curData.ext = curData.ext_list;
      // }
      curData.ext &&
        curData.ext.length > 0 &&
        curData.ext.forEach((element) => {
          element.type == 2 && modalData.extArray.push(element);
        });
      modalData.extArray.forEach((element) => {
        element.id = element.ext_id;
        element.total_price = (element.price * element.num).toFixed(2);
      });
      // 同步 curData 、 modalData
      curData.part.map((ele, idx) => {
        //判断是否存在
        if (modalData.part[idx]) {
          //判断是否相等
          if (modalData.part[idx].part_id != ele.part_id) {
            //不相等情况1，是否为替换项
            /////
            //不相等情况2，是否为另一部件
            // if (
            // modalData.part[idx].change.filter(v=>v.id==ele.id).length>0
            // ) {
            modalData.part.splice(
              idx,
              0,
              JSON.parse(JSON.stringify(modalData.part[idx - 1]))
            );
            // }
          }
        } else {
          modalData.part.splice(
            idx,
            0,
            JSON.parse(JSON.stringify(modalData.part[idx - 1]))
          );
        }
      });
      // 处理部件
      curData.part.forEach((element, index) => {
        if (!element.is_metal) {
          modalData.part[index].change_id = element.change_id;
          modalData.part[index].part_title = element.part_title;
          modalData.part[index].org_part_id = modalData.part[index].part_id;
          // 部件测量字段
          if (element.measure && element.measure.length > 0) {
            const part_measure_detail = element.measure.split("*");
            modalData.part[index].long = part_measure_detail[0];
            modalData.part[index].wide = part_measure_detail[1];
            modalData.part[index].high = part_measure_detail[2];
          }
          // 替换项相关 如果选了替换项
          if (element.part_id != modalData.part[index].part_id) {
            const change_obj = modalData.part[index].change.filter(
              (item) => item.part_id == element.part_id
            );
            if (change_obj && change_obj.length > 0) {
              change_obj[0].sub_part.forEach((elem, idx) => {
                modalData.part[index].part_detail[idx].material_detail_title =
                  elem.material_detail_list[0].title;
                modalData.part[index].part_detail[idx].material_detail_id =
                  elem.material_detail_id;
                modalData.part[index].part_detail[idx].material_detail_list =
                  elem.material_detail_list;
              });
            }
          }
          element.sub_part.forEach((elem, idx) => {
            // 零部件字段 、 原材料字段
            modalData.part[index].part_detail[idx].long = elem.long;
            modalData.part[index].part_detail[idx].wide = elem.wide;
            modalData.part[index].part_detail[idx].high = elem.high;
            modalData.part[index].part_detail[idx].material_detail_id =
              elem.material_detail_id;
            modalData.part[index].part_detail[idx].material_detail_num =
              elem.material_detail_num;
            modalData.part[index].part_detail[idx].material_id =
              elem.material_id;
            modalData.part[index].part_detail[idx].num = elem.num;
          });
          modalData.part[index].part_id = element.part_id;
          // // 工艺属性
          // modalData.part[index].procedure_properties = JSON.parse(
          //   JSON.stringify(element.process)
          // );
          for (const k in element.process) {
            const v = element.process[k];
            modalData.part[index].process.map((ele) => {
              if (ele.id == k) {
                ele.value = v;
              }
            });
          }
        }
      });
    },
    handleShowAddProductModal(custom_id, route_id_at_copy) {
      this.$addProduct({
        custom_id,
        route_id_at_copy,
        then: (subAddProductData, support_remark) => {
          this.support_remark = Array.from(
            new Set([...support_remark, ...this.support_remark])
          );
          this.modalArray = subAddProductData;
          this.modalArray.map((element) => {
            // 工艺属性
            if (!element.procedure_properties_str) {
              element.procedure_properties_str = [];
            }
            if (!element.procedure_properties) {
              element.procedure_properties = {};
            }
            element.process_obj = element.process;
            element.process_obj.forEach((elem, index) => {
              const _target = elem.cld ? elem.cld : elem.processList;
              const _temp = _target.filter((item) => item.id == elem.value);
              element.procedure_properties_str[index] =
                _temp.length > 0 ? _temp[0].title : "";
              element.procedure_properties[elem.id] =
                _temp.length > 0 ? _temp[0].id : "";
              element[elem.id] = elem.value;
              element.procedure_properties[elem.id] = elem.value;
            });
            element.process_str = element.procedure_properties_str.join("/");
            // 尺寸
            if (!element.measurement) {
              element.measurement = "";
            }
            if (!element.measurement_no_letter) {
              element.measurement_no_letter = "";
            }
            let tempStr = "";
            let tempStr_no_letter = "";
            element.measure.forEach((elem) => {
              tempStr += elem.measureCalc + elem.value + "*";
              tempStr_no_letter += +elem.value + "*";
              //为了表格上展示，拆解赋值到产品上
              element[elem.e_title] = elem.value;
            });
            element.measurement = tempStr.substring(0, tempStr.length - 1);
            element.measurement_no_letter = tempStr_no_letter.substring(
              0,
              tempStr_no_letter.length - 1
            );
            // 五金、  附加项目
            element.ext = [...element.extArray];
            //其他项
            element.other = element.customize;
            // 部件字段
            element.part.forEach((elem) => {
              if (!elem.is_metal) {
                elem.title ? "" : (elem.title = elem.part_title);
                elem.procedure_properties_str = [];
                elem.process.forEach((item, index) => {
                  const _temp = item.cld.filter(
                    (_cld) => _cld.id == item.value
                  );
                  elem.procedure_properties_str[index] =
                    _temp.length > 0 ? _temp[0].title : "";
                });
                elem.process_str = elem.procedure_properties_str.join("/");
                elem.part_detail.map((_part_detail) => {
                  _part_detail.part_detail_option = [];
                  _part_detail.material_detail_list.map((v) => {
                    _part_detail.part_detail_option.push({
                      label: `${v.long}*${v.wide}*${v.high}`,
                      value: v.material_detail_id,
                    });
                  });
                });
              }
            });
            element.ext &&
              element.ext.length > 0 &&
              (element.ext.map((elem) => {
                if (elem.type == 1) {
                  elem.total_num = elem.num;
                  elem.unit_price = elem.price;
                  elem.ext_price = elem.num * elem.price*1;
                  elem.is_metal = true;
                  element.part.push(elem);
                  if (!element.extra) {
                    element.extra = "";
                  }
                } else {
                  if (!element.extra) {
                    element.extra = "";
                  }
                  element.extra += `${elem.title}/`;
                }
              }),
              (element.extra = element.extra.substring(
                0,
                element.extra.length - 1
              )));
          });
          this.modalArray.forEach((element) => {
            element.part.forEach((elem) => {
              if (!elem.is_metal) {
                elem.measurement = `${elem.long}*${elem.wide}*${elem.high}`;
                elem.title = elem.part_title;
                elem.procedure_properties = {};
                elem.process.map((item) => {
                  elem.procedure_properties[item.id] = item.value;
                });
              }
            });
          });
          this.tableData = [...this.tableData, ...this.modalArray];
          this.currencyIndex = null;
          this.route_id_at_copy = "";
          // 合计 、 线条 统计价格
          this.handleCalcCount();
          this.showAddProduct = false;
          this.$forceUpdate();
        },
      });
    },
    HandleAutoCreateNewLine() {
      let flag = false;
      this.tableData.map((v) => {
        if (!v.position && !v.product_id) {
          flag = true;
        }
      });
      !flag && this.handleTableAdd();
    },
    handleTableAdd() {
      if (this.info.custom_id) {
        this.currentTabIndex = "0";
        let obj = {
          select_all_id: "", //产品五金ID
          product_id: "", //产品ID
          type_name: "", //展示用产品名称
          position: "", //位置
          over_price: "", //超标单价
          over_price_total:"",//超标总价
          unit_price: "", //单价
          ext_price: "", //附加金额
          price: "", //总金额
          remark: "", //备注
          measurement: "", //测量字段拼接
          total_num: "", //数量
          num: "", //核算数量
          num_formula: "", //核算数量公式
          url_number: "", //图号
          url: [], //图纸
          unit: "", //单位
          title: "", //产品名
          process: "", //工艺属性拼接
          procedure_properties: {}, //工艺属性对象
          overdraft: [], //超标公式
          measure: this._measure, //测量字段数组
          support_remark: this.support_remark, //备注列表
          is_metal: false,
          extArray: [
            {
              num: 0,
              price: 0,
              total_price: 0,
              type: 2,
              remark: "",
              title: "",
              id: "",
              is_metal: true,
            },
          ],
          process_obj: JSON.parse(JSON.stringify(this.process_obj)), //工艺属性含选项对象
        };
        obj.process_obj.map(
          (v) => ((obj[v.id] = ""), (obj.procedure_properties[v.id] = ""))
        );
        this.tableData.push(obj);
        this.$forceUpdate();
      } else {
        this.$Message.warning("请先选择客户");
      }
    },
    handleMetalAdd() {
      this.tableData.push({
        type: 1,
        is_metal: true,
        material_id: "",
        product_id: "",
        title: "",
        price: 0,
        single_price: 0,
        num: 0,
        unit: "",
      });
    },
    handleSet(row, index, type) {
      let obj;
      // 1 新增 2 编辑 3 删除 4复制  5详情
      switch (type) {
        case 1:
          this.title_state = 1;
          if (this.info.custom_id) {
            this.currentTabIndex = "0";
            // this.showAddProduct = true;
            this.handleShowAddProductModal(
              this.info.custom_id,
              this.route_id_at_copy
            );
          } else {
            this.$Message.warning("请先选择客户");
          }
          break;
        case 2:
          this.title_state = 2;
          this.isCheck = false;
          if (this.type == 1) {
          
            this.showEditProduct = true;
            this.modalData = JSON.parse(JSON.stringify(row));
            this.currencyIndex = index;
          } else if (this.type == 2) {
            //订单编辑点产品编辑
            // if (row.get_first_data && !row.isEdit) {
            // this.axios
            //   .get("/api/order_product_detail_new", {
            //     params: { order_product_id: row.order_product_id },
            //   })
            //   .then((res) => {
            //     if (res.code == 200) {
            //       this.currencyIndex = index;
            //       this.modalData = JSON.parse(JSON.stringify(row));
            //       this.editForm = res.data;
            //       this.changeProductOnEdit(res.data, 0);
            //     }
            //   });
            // } else {
            // 订单新增点产品编辑
            row.measure.map((v) => {
              v.value = row[v.e_title];
            });
            row.process_obj.map((v) => {
              v.title = v.name;
              v.value = row[v.id];
            });
            this.modalData = JSON.parse(JSON.stringify(row));
            this.currencyIndex = index;
            this.showEditProduct = true;
            // }
          }
          break;
        case 3:
          this.$Modal.confirm({
            title: "确认删除？",
            content: "请确认！",
            onOk: () => {
              this.tableData.splice(index, 1);
              this.handleCalcCount();
            },
            onCancel: () => {},
          });
          break;
        case 4:
          obj = this.deepClone(row);
          obj.isCopied = true;
          if (row.is_metal) {
         
          } else {
            obj.position = "";
            obj.measure.map((v) => {
              v.value = "";
              obj[v.e_title] = "";
            });
            if (!row.is_metal) {
              this.route_id_at_copy = row.route_id;
            }
            this.pre_process_obj = JSON.parse(
              JSON.stringify(row.procedure_properties)
            );
          }
          //复制一条数据，更换了产品之后，
          //线条的内容要保留（不管更换的这个产品的默认线条是什么，都是只展示复制下来的）
          //摘自Tower #2004
          obj.part &&
            obj.part.map((v) => {
              if (v.title.indexOf("线条") != -1) {
                this.copiedLinePart = this.deepClone(v);
              }
            });
          //因为是复制，插件id为_XID会相同导致bug，置空后会自动生成
          obj._XID = "";
          this.tableData.splice(index + 1, 0, obj);
          this.handleCalcCount();
          break;
        case 5:
          this.title_state = 3;
          this.isCheck = true;
          // if (row.get_first_data) {
          //   this.axios
          //     .get("/api/order_product_detail_new", {
          //       params: { order_product_id: row.order_product_id },
          //     })
          //     .then((res) => {
          //       if (res.code == 200) {
          //         this.currencyIndex = index;
          //         this.modalData = JSON.parse(JSON.stringify(row));
          //         this.editForm = res.data;
          //         this.changeProductOnEdit(res.data, 0);
          //       }
          //     });
          // } else {
          row.measure.map((v) => {
            v.value = row[v.e_title];
          });
          row.process_obj.map((v) => {
            v.title = v.name;
            v.value = row[v.id];
          });
          this.modalData = JSON.parse(JSON.stringify(row));
          this.currencyIndex = index;
          this.showEditProduct = true;
          // }
          break;
      }
    },
    deepClone(obj) {
      //定义对象来判断当前的参数是数组还是对象
      let objClone = Array.isArray(obj) ? [] : {};
      //如果obj存在并且为对象
      if (obj && typeof obj == "object") {
        for (let key in obj) {
          if (Object.hasOwnProperty.call(obj, key)) {
            //如果obj的子元素为对象，那么递归（层级遍历）
            if (obj[key] && typeof obj[key] == "object") {
              objClone[key] = this.deepClone(obj[key]);
            } else {
              //如果不是，直接赋值
              objClone[key] = obj[key];
            }
          }
        }
      }
      return objClone;
    },
    async handleBeforeUpload(row) {
      // row.name
      this.uploadData.title = row.name.substring(0, row.name.indexOf("."));
      return true;
    },
    uploadError(err) {
      this.$Message.error(err.msg || "上传失败");
    },
    onProgress(e) {
     
    },
    //导入成功
    uploadSuccess(res) {
      if (res.code == 200) {
        this.$Message.success(res.msg || "上传成功");
        // const temp = res.data;
        // let list = [...this.postInfo.children, ...temp];
      } else {
        this.$Message.warning(res.msg || "上传失败");
      }
    },
    handleExtChange(row, { value, label }, item) {
      row.ext_id = value;
      row.title = label;
      const element = this.extList.filter((item) => item.id == value);
      row.num = element[0].num;
      row.price = element[0].price;
      row.total_price = (row.num * row.price).toFixed(2);
      this.handleTotalPriceCalc(row, item);
      this.handleCalcCount();
    },
    handleSameProcessDisabled(array, currencyChooseValue, currencyChooseIndex) {
      let matchIds = array.selected_ids;
      let target = array.same_process;
      let source = array.same_process_compare;
      let chooseable = [];
      source.forEach((element, index) => {
        element.forEach((elem, idx) => {
          if (elem.id == currencyChooseValue) {
            chooseable = [...chooseable, ...element];
          }
        });
      });
      target.forEach((element) => {
        element.option.forEach((elem) => {
          elem.isAllowSelect = true;
          chooseable.forEach((el) => {
            if (el.id == elem.id) {
              elem.isAllowSelect = false;
            }
          });
        });
      });
      this.$forceUpdate();
    },
    changeLock(value, row, idx) {
      if (row.old_lock_price) {
        row.price = parseInt(row.price) - row.old_lock_price;
      }
      row.old_lock_price = parseInt(value.tag || "0");
      row.price = parseInt(row.price) + parseInt(value.tag || "0");
      this.modalArray[idx] = row;
      this.$forceUpdate();
    },
    handleTotalPriceChange(row, item) {
      row.price = (row.total_price / (row.num == 0 ? 1 : row.num)).toFixed(2);
      let sum = 0;
      item.extArray.map((v) => {
        return (sum += v.total_price * 1);
      });
      this.ext_sum = sum
      item.ext_price = this.ext_sum +this.MTBtotal*1;
      item.price =
        (item.unit_price * 1 || 0) * (item.num * 1 || 1) +
        (item.over_price_total * 1 || 0) +
        (item.ext_price * 1 || 0);
      item.price = item.price.toFixed(2);
      this.$forceUpdate();
    },
    handleTotalPriceCalc(row, item) {
      row.total_price = ((row.price || 0) * (row.num || 0)).toFixed(2);
      let sum2 = 0;
      item.extArray &&
        item.extArray.length > 0 &&
        item.extArray.forEach((element) => {
          sum2 += element.total_price * 1 || 0;
        });
        this.ext_sum = sum2*1
      item.ext_price = this.ext_sum +this.MTBtotal*1;
      item.price =
        (item.unit_price * 1 || 0) * (item.num * 1 || 1) +
        (item.over_price_total * 1 || 0) +
        (item.ext_price * 1 || 0);
      item.price = item.price.toFixed(2);
      this.$forceUpdate();
    },
    handlePartDetailEdit(element, index) {
      element.isShowPartDetail = !element.isShowPartDetail;
      this.$forceUpdate();
    },
    handlePartsApart(element, index, array) {
      let obj = JSON.parse(JSON.stringify(element));
      obj.isBP = false;
      array.splice(index + 1, 0, obj);
      this.$forceUpdate();
    },
    handlePartsDele(element, index, array) {
    //   let data = JSON.parse(JSON.stringify(this.tableData));
    //   data.splice(data.length-1,1);
    //   let state = false;
    //  data.forEach((v,idx)=>{
    //     v.part.forEach(m=>{
          
    //       if(m.part_title.indexOf('门头板')<0){
            
    //         return state=true
    //       }
    //     })
     
    //    if(state){
        
    //      this.tableData[idx].addMTB = false;
    //       console.log(this.tableData[idx])
    //    }
    //  })
    array.addMTB = false;
      array.part.splice(index, 1);
      // this.handleCalcCount();
      // this.$forceUpdate();
    },
    handleProductPositionChange(item, e) {
      item.position = e.target.value;
      this.$forceUpdate();
    },
    handleOrderPriceChange(e) {
      this.info.order_price = e.target.value;
      this.info.fax_price = (this.info.predict_price - e.target.value).toFixed(
        2
      );
      this.$forceUpdate();
    },
    handleClearExtInfo(modalData, pre_id, cur_id) {
      if (cur_id != pre_id) {
        modalData.extArray = [
          {
            num: 0,
            price: 0,
            total_price: 0,
            type: 2,
            remark: "",
            title: "",
            id: "",
            is_metal: true,
          },
        ];
      } else {
        let sum = 0;
        modalData.extArray.map((v) => {
          return (sum += v.total_price * 1);
        });
        modalData.ext_price = sum*1;
        modalData.price =
          (modalData.unit_price * 1 || 0) * (modalData.num * 1 || 1) +
          (modalData.over_price_total * 1 || 0) +
          (modalData.ext_price * 1 || 0);
        modalData.price = modalData.price.toFixed(2);
      }
      this.pre_bp_id = cur_id;
    },
    changeEditProcess(row, obj) {
      row.isEdit = true;
      row.procedure_properties[obj.id] = row[obj.id];
      this.pre_process_obj[obj.id] = row[obj.id];
      row.process_obj.filter((v) => v.id == obj.id)[0].value = row[obj.id];
      row.part.map((item) => {
        if (!item.is_metal) {
          //赋值默认工艺属性
          item.process = JSON.parse(JSON.stringify(this.bpp_list));
          item.procedure_properties[obj.id] = row[obj.id];
          item.process.forEach((elem, index) => {
            row.process_obj.map((v) => {
              if (elem.id == v.id) {
                elem.value = v.value;
              }
            });
            // elem.value = row.process_obj.filter(
            //   (v) => v.id == elem.id
            // )[0].value;
          });
        }
      });
    },
    changeEditLines(row) {
      row.isEdit = true;
      this.handleCalcCount();
    },
    changeEditMeasure(e, row, measure) {
     
      if (e.target.value) {
        row.isEdit = true;
        row.measure.map((v) => {
          if (v.e_title == measure.e_title) {
            v.value = e.target.value;
          }
        });
        this.handleProductMeasureBlur(
          e,
          row,
          row.measure.filter((v) => v.id == measure.id)[0]
        );
      }
    },
    changeEditRemark(row) {
      row.isEdit = true;
      this.handleCalcCount();
    },
    changeEditMetal(row, rowIndex, $event, scope) {
      row.ext_id = row.product_id;
      const match_id = $event.value.split("_")[0];
      row.title = this.metalList.filter((v) => v.id == match_id)[0].title;
      row.unit = this.metalList.filter((v) => v.id == match_id)[0].unit;
    },
    changeEditMetalNum(e, row) {
      row.price = (1 * e.target.value * row.single_price).toFixed(2);
      this.handleCalcCount();
    },
    handleMetailPriceChange(e, row) {
      row.price = 1 * e.target.value * row.num;
      this.handleCalcCount();
    },
    changeEditTotalNum(e, row) {
      console.log(1)
      row.isEdit = true;
      this.handleProductNumChange(e, row);
    },
    changeEditDetailNum(row) {
      row.isEdit = true;
      this.handleCalcCount();
    },
    changeEditExt(row, e, item,arr,idx) {
      if (e) {
        item.isEdit = true;
        row.ext_id = e.value;
        this.handleExtChange(row, e, item);
      } else {

        row.ext_id = "";
        row.title = "";
        this.handleCalcCount();
        this.handleExtraDele(
                        arr,
                        row,
                        idx,
                       item
                      )
      }
    },
    changeEditPart(row, part_type, part_detail, e, rowIndex) {
      if (e) {
        row.isEdit = true;
        part_detail.change_id = e.value;
        part_detail.sub_part = part_detail.change.filter(
          (v) => v.id == e.value
        )[0].sub_part;
        part_detail.title = part_detail.change.filter(
          (v) => v.id == e.value
        )[0].part_title;
        this.handlePartChange(e, part_detail, row.measure, row.total_num);
        this.handleIsSpecialPart(this.tableData[rowIndex]);
        this.handleCalcCount();
      }
    },
    handleSelectProductMetail(row, rowIndex, $event, scope) {
   
      if ($event) {
        const arr = $event.tag.split("_");
        let obj = {};
        // 分类   1产品   2五金
        if (arr[1] == "1") {

          obj = {
            isCopied: row.isCopied,
            select_all_id: $event.value,
            product_id: arr[0] * 1,
            type_name: "", //展示用产品名称
            position: row.position, //位置
            over_price: "", //超标单价
            over_price_total:'',//超标总价
            unit_price: "", //单价
            ext_price: "", //附加金额
            price: "", //总金额
            remark: "", //备注
            measurement: "", //测量字段拼接
            total_num: "", //数量
            num: "", //核算数量
            num_formula: "", //核算数量公式
            url_number: "", //图号
            url: [], //图纸
            unit: "", //单位
            title: "", //产品名
            process: "", //工艺属性拼接
            procedure_properties: this.pre_process_obj || {}, //工艺属性对象
            overdraft: [], //超标公式
            measure: this._measure, //测量字段数组
            support_remark: this.support_remark, //备注列表
            is_metal: false,
            ext: [],
            extArray: [
              {
                num: 0,
                price: 0,
                total_price: 0,
                type: 2,
                remark: "",
                title: "",
                id: "",
                is_metal: true,
              },
            ],
            process_obj: JSON.parse(JSON.stringify(this.process_obj)), //工艺属性含选项对象
          };
          obj.process_obj.map((v) => (obj[v.id] = ""));
        } else {
          obj = {
            select_all_id: $event.value,
            type: 1,
            is_metal: true,
            material_id: "",
            product_id: arr[0] * 1,
            title: "",
            price: 0,
            single_price: 0,
            num: 0,
            unit: "",
          };
        }
        this.tableData.splice(rowIndex, 1, obj);
        if (arr[1] === "1") {
          this.changeEditTableData(obj, rowIndex, $event, scope);
        } else {
          this.changeEditMetal(obj, rowIndex, $event, scope);
        }
        this.HandleAutoCreateNewLine();
      //   let data = [];
      
      //   data = this.tableData;
      //  data.splice(this.tableData.length-1,1)
      
      //   data.forEach(v=>{
      //     console.log(v)
      //       let arr = [];
      //       v.part.forEach(m=>{
      //         console.log(2)
      //         let obj = {};
      //         if(m.part_title.indexOf('线条')>=0){
      //           obj = m;
      //         }
      //         arr.push(obj)
      //       })
      //       this.lineData = [...arr]
      //   })
      //   console.log(this.lineData)
      }
      console.log(this.parts_title_count)
    },
    changeEditTableData(row, rowIndex, $event, scope) {
      const isCopied = row.isCopied || false;
      if ($event) {
        row.type_name = $event.label;
        row.title = $event.label;
        //被编辑过了 标记
        row.isEdit = true;
        this.axios("/api/order_get_product_detail_new", {
          params: {
            product_id: row.product_id,
            custom_id: this.info.custom_id,
          },
        }).then((res) => {

          this.process_match_list = res.data.process.list;
          this.process_all_list = res.data.process_list;
          this.support_remark = Array.from(
            new Set([...res.data.support_remark, ...this.support_remark])
          );
          this.bpp_list.map((v) => (row[v.id] = ""));
          this.measure_total.map((v) => (row[v.e_title] = ""));
          row.addMTB = res.data.addMTB?res.data.addMTB:false;
          row.url = res.data.url;
          row.total_num = res.data.total_num || 1;
          row.ext_price = res.data.ext_price*1 || 0;
          row.unit_price = res.data.price || 0;
          row.num = res.data.num || 1;
          row.over_price = res.data.over_price || 0;
          row.unit = res.data.unit || "";
          row.remark = res.data.remark || "";
          row.url_number = res.data.url_number || "";
          row.overdraft = res.data.overdraft;
          row.num_formula = res.data.num_formula;
          if (!row.num_formula) {
            row.num_temp_save = 1;
          }
          row.bp_id = res.data.bp_id;
          // 金额=（产品单价）*核算数量 +附加金额 + 超标金额
          row.price =
            (row.unit_price * 1 || 0) * (row.num * 1 || 1) +
            (row.over_price_total * 1 || 0) +
            (row.ext_price * 1 || 0);
          row.price = row.price.toFixed(2);
          row.selected_ids = [];
          res.data.part.forEach((element) => {
            // 选择不是附加项目的，
            if (!element.is_metal) {
              // 选择不是线条、或者基础档案中要默认为空的部件
              element.isBP = true;
              element.isChoosed = true;
              element.title = element.part_title;
              element.process = JSON.parse(JSON.stringify(this.bpp_list));
              element.process.forEach((elem) => {
                for (const key in res.data.process.title) {
                  const ele = res.data.process.title[key];
                  if (elem.name == ele) {
                    elem.value = "";
                    //tower #2056
                    // 开始需求是新增之后带上一条填过的工艺属性，后来又不需要，代码保留。
                    // 后来又改成只保留颜色跟线条  颜色的key 为2
                    if (key == 2 && row.isCopied) {
                      // elem.value = this.pre_process_obj[key] * 1;
                      elem.process_id = key;
                    }
                    if (!element.procedure_properties) {
                      element.procedure_properties = {};
                    }
                    //tower #2056
                    if (key == 2 && row.isCopied) {
                      element.procedure_properties[key] =
                        this.pre_process_obj[key] * 1;
                      // element.procedure_properties[key] = "";
                    }
                  }
                }
              });
              if (element.is_null == 1) {
                element.change_id = "";
                // element.part_title = "";
                // element.title = "";
              } else {
                for (const key in this.pre_process_obj) {
                  const item = this.pre_process_obj[key];
                  if (key == 2 && row.isCopied) {
                    row[key] = item * 1;
                  }
                }
                element.change_id = element.change[0].id;
              }
              if (isCopied && element.title.indexOf("线条") != -1) {
                delete this.copiedLinePart.change;
                delete this.copiedLinePart.change_id;
                element = Object.assign(element, this.copiedLinePart);
              }
              element.part_detail = element.sub_part;
              //展示非拆分部件
              // 默认替换部件
              //存计算公式
              element.long ? "" : (element.long = 0);
              element.wide ? "" : (element.wide = 0);
              element.high ? "" : (element.high = 0);
              element.longCalc = element.long + "";
              element.wideCalc = element.wide + "";
              element.highCalc = element.high + "";
              element.part_detail.forEach((elem) => {
                elem.material_detail_title = elem.material_detail_list[0].title;
                elem.material_detail_id =
                  elem.material_detail_list[0].material_detail_id;
                elem.part_detail_option = [];
                elem.material_detail_list.map((v) => {
                  elem.part_detail_option.push({
                    label: `${v.long}*${v.wide}*${v.high}`,
                    value: v.material_detail_id,
                  });
                });
                elem.org_num = elem.num;
                elem.material_detail_org_num = elem.num || 0;
                elem.material_detail_num = elem.num || 0;
                elem.long ? "" : (elem.long = 0);
                elem.wide ? "" : (elem.wide = 0);
                elem.high ? "" : (elem.high = 0);
                elem.longCalc = elem.long + "";
                elem.wideCalc = elem.wide + "";
                elem.highCalc = elem.high + "";
                elem.material_detail_list.forEach((el) => {
                  el.long = el.long || "0";
                  el.wide = el.wide || "0";
                  el.high = el.high || "0";
                });
              });
            }
          });
          row.part = JSON.parse(JSON.stringify(res.data.part));
          // //测量字段
          row.measure = res.data.measure;
          row.measure.forEach((element) => {
            element.value = "";
            element.measureCalc = element.e_title;
          });
          this.tableData.splice(rowIndex, 1, row);
         
          this.handleClearExtInfo(row, this.pre_bp_id, res.data.bp_id);
          row.get_first_data = false;
          this.handleCalcCount();
          // this.$forceUpdate();
        });
      }
    },
    changeEditProduct($event) {
      if ($event) {
        let id = $event.value;
        this.modalData.type_name = $event.label;
        this.modalData.title = $event.label;
        this.axios("/api/order_get_product_detail_new", {
          params: { product_id: id, custom_id: this.info.custom_id },
        }).then((res) => {
          if (res.code == 200) {
            this.process_match_list = res.data.process.list;
            this.process_all_list = res.data.process_list;
            this.support_remark = Array.from(
              new Set([...res.data.support_remark, ...this.support_remark])
            );
            // 赋值默认工艺路线
            let _temp_obj = {};
            if (res.data.process.list.length > 1) {
              for (const key in res.data.process.list[0].detail) {
                res.data.process.list.reduce((pre, cur) => {
                  if (_temp_obj[key] == "") {
                    return pre;
                  } else {
                    if (pre.detail[key] == cur.detail[key]) {
                      _temp_obj[key] = pre.detail[key];
                      return pre;
                    } else {
                      _temp_obj[key] = "";
                      return pre;
                    }
                  }
                });
              }
            } else {
              _temp_obj = res.data.process.list[0].detail;
            }
            this.pre_process_obj = JSON.parse(JSON.stringify(_temp_obj));
            this.modalData.url = res.data.url;
            this.modalData.total_num = res.data.total_num || 1;
            this.modalData.ext_price = res.data.ext_price*1 || 0;
            this.modalData.unit_price = res.data.price || 0;
            this.modalData.num = res.data.num || 1;
            this.modalData.over_price = res.data.over_price || 0;
            this.modelData.over_price_total = res.data.over_price*res.data.total_num*1 ||0;
            this.modalData.unit = res.data.unit || "";
            this.modalData.remark = res.data.remark || "";
            this.modalData.url_number = res.data.url_number || "";
            this.modalData.overdraft = res.data.overdraft;
            this.modalData.num_formula = res.data.num_formula;
            if (!this.modalData.num_formula) {
              this.modalData.num_temp_save = 1;
            }
            this.modalData.bp_id = res.data.bp_id;
            // 金额=（产品单价）*核算数量 +附加金额 + 超标金额
            this.modalData.price =
              (this.modalData.unit_price * 1 || 0) *
                (this.modalData.num * 1 || 1) +
              (this.modalData.over_price_total * 1 || 0) +
              (this.modalData.ext_price * 1 || 0);
            this.modalData.price = this.modalData.price.toFixed(2);
            // this.modalData.model = res.data.model || ''
            // this.modalData.same_process_compare = JSON.parse(JSON.stringify(res.data.intermediate.same_process || []))
            this.modalData.selected_ids = [];
            this.modalData.part = [];
            this.modalData.part = res.data.part;
            // 数据第一次通过接口获取
            this.modalData.get_first_data = false;
            this.modalData.part.forEach((element, index) => {
              // 选择不是附加项目的，
              if (!element.is_metal) {
                // 选择不是线条、或者基础档案中要默认为空的部件
                element.isBP = true;
                element.isChoosed = true;

                if (element.is_null == 1) {
                  element.change_id = "";
                } else {
                  element.part_detail = element.sub_part;
                  //展示非拆分部件
                  // 默认替换部件
                  element.change_id = element.change[0].id;
                  //存计算公式
                  element.long ? "" : (element.long = 0);
                  element.wide ? "" : (element.wide = 0);
                  element.high ? "" : (element.high = 0);
                  element.longCalc = element.long + "";
                  element.wideCalc = element.wide + "";
                  element.highCalc = element.high + "";
                  element.part_detail.forEach((elem) => {
                    elem.material_detail_id = 0;
                    elem.material_detail_title =
                      elem.material_detail_list[0].title;
                    elem.material_detail_id =
                      elem.material_detail_list[0].material_detail_id;
                    elem.org_num = elem.num;
                    elem.material_detail_org_num = elem.num || 0;
                    elem.material_detail_num = elem.num || 0;
                    elem.long ? "" : (elem.long = 0);
                    elem.wide ? "" : (elem.wide = 0);
                    elem.high ? "" : (elem.high = 0);
                    elem.longCalc = elem.long || "";
                    elem.wideCalc = elem.wide || "";
                    elem.highCalc = elem.high || "";
                    elem.material_detail_list.forEach((el) => {
                      el.long = el.long || "0";
                      el.wide = el.wide || "0";
                      el.high = el.high || "0";
                    });
                  });
                  element.part_detail.map((_part_detail) => {
                    _part_detail.material_detail_org_num =
                      _part_detail.num || 0;
                    _part_detail.part_detail_option = [];
                    _part_detail.material_detail_list.map((v) => {
                      _part_detail.part_detail_option.push({
                        label: `${v.long}*${v.wide}*${v.high}`,
                        value: v.material_detail_id,
                      });
                    });
                  });
                }
              }
            });
            //测量字段
            this.modalData.measure = res.data.measure;
            this.modalData.measure.forEach((element) => {
              element.value = "";
              element.measureCalc = element.e_title;
            });
            //工艺属性
            this.modalData.process_obj = [];
            for (const k in res.data.process.title) {
              this.process_obj.map((v) => {
                if (v.id == k) {
                  this.modalData.process_obj.push(v);
                }
              });
            }
            this.modalData.part.forEach((element) => {
              if (!element.is_metal) {
                //赋值默认工艺属性
                element.process = JSON.parse(JSON.stringify(this.bpp_list));
                element.process.forEach((elem, index) => {
                  for (const key in res.data.process.title) {
                    const ele = res.data.process.title[key];
                    if (elem.name == ele) {
                      elem.value = this.pre_process_obj[key] * 1;
                      elem.process_id = key;
                      if (!element.procedure_properties) {
                        element.procedure_properties = {};
                      }
                      element.procedure_properties[key] =
                        this.pre_process_obj[key] * 1;
                    }
                  }
                });
              }
            });
            // this.handleClearExtInfo(
            //   this.modalData,
            //   this.pre_bp_id,
            //   res.data.bp_id
            // );
            // 是否有上一个的工艺属性ID
            this.chooseLastRouteId(this.modalData, res);
            this.$forceUpdate();
          }
        });
      }
    },
    footerMethod({ columns, data }) {
      return [
        columns.map((column, columnIndex) => {
          if (columnIndex === 0) {
            return "合计";
          }
          if (column.title == "附加金额") {
            let sum = 0;
            data.map((v) => {
              v.is_metal ? (sum += v.price * 1) : (sum += v.ext_price * 1);
            });
            return sum;
          }
          if (column.title == "总金额") {
            let sum = 0;
            data.map((v) => {
              v.is_metal ? (sum += v.price * 1) : (sum += v.price * 1);
            });
            this.info.predict_price = sum.toFixed(2);
            return sum.toFixed(2);
          }
          return null;
        }),
      ];
    },
    chooseLastRouteId(modalData, res) {
      // 匹配
      modalData.process_obj.forEach((element) => {
        for (const key in this.pre_process_obj) {
          const item = this.pre_process_obj[key];
          const compare = res.data.process.list.filter(
            (_process) => _process.detail[key] == this.pre_process_obj[key]
          );
          if (element.id == key) {
            if (compare.length > 0) {
              element.value = item * 1;
            } else {
              element.value = "";
            }
          }
        }
      });
      this.$forceUpdate();
    },
    changeProductOnEdit(row, n) {
      if (row) {
        this.modalData.type_name = row.label;
        this.modalData.title = row.label;
        this.axios("/api/order_get_product_detail_new", {
          params: {
            product_id: row.product_id,
            custom_id: this.info.custom_id,
          },
        }).then((res) => {
          if (res.code == 200) {
            this.support_remark = Array.from(
              new Set([...res.data.support_remark, ...this.support_remark])
            );
            this.process_match_list = res.data.process.list;
            this.process_all_list = res.data.process_list;
            //获取产品
            this.modalData.total_num = res.data.total_num || 1;
            this.modalData.ext_price = res.data.ext_price*1 || 0;
            this.modalData.unit_price = res.data.price || 0;
            this.modalData.num = res.data.num || 1;
            this.modalData.num_temp_save = res.data.num || 1;
            this.modalData.over_price = res.data.over_price || 0;
            this.modalData.over_price_total = res.data.over_price*res.data.total_num*1 || 0;
            this.modalData.unit = res.data.unit || "";
            this.modalData.remark = res.data.remark || "";
            this.modalData.url = res.data.url || [];
            this.modalData.url_number = res.data.url_number || "";
            this.modalData.overdraft = res.data.overdraft;
            this.modalData.bp_id = res.data.bp_id;
            // this.modalData.same_process_compare = JSON.parse(JSON.stringify(res.data.intermediate.same_process || []))
            this.modalData.selected_ids = [];
            this.modalData.customize = row.customize;
            this.modalData.get_first_data = false;
            this.modalData.part = res.data.part;
            this.modalData.part.forEach((element) => {
              if (!element.is_metal) {
                element.isBP = true;
                element.isChoosed = true;
                element.part_detail = element.sub_part;
                // 数据第一次通过接口获取
                //展示非拆分部件
                //存计算公式
                element.longCalc = element.long || "";
                element.wideCalc = element.wide || "";
                element.highCalc = element.high || "";
                element.part_detail.forEach((elem) => {
                  elem.org_num = elem.num;
                  elem.material_detail_id = 0;
                  elem.material_detail_title =
                    elem.material_detail_list[0].title;
                  elem.material_detail_num = elem.num || 0;
                  elem.material_detail_org_num = elem.num || 0;
                  elem.longCalc = elem.long || "";
                  elem.wideCalc = elem.wide || "";
                  elem.highCalc = elem.high || "";
                  elem.material_detail_list.forEach((el) => {
                    el.long = el.long || "0";
                    el.wide = el.wide || "0";
                    el.high = el.high || "0";
                  });
                });
              }
            });
            //测量字段
            this.modalData.measure = res.data.measure;
            this.modalData.measure.forEach((element) => {
              element.measureCalc = element.e_title;
            });
            //工艺属性
            this.modalData.part.forEach((element) => {
              if (!element.is_metal) {
                element.process = JSON.parse(JSON.stringify(this.process_obj));
                element.process.forEach((elem) => {
                  elem.value = "";
                });
              }
            });
            this.modalData.process_obj = [];
            for (const k in res.data.process.title) {
              this.process_obj.map((v) => {
                if (v.id == k) {
                  this.modalData.process_obj.push(v);
                }
              });
            }
            (this.type == 2 || this.type == 3) &&
              this.getEditData(this.modalData, this.editForm);
            this.showEditProduct = true;
            this.$forceUpdate();
          }
        });
      }
    },
    handeMTBSelection($event, row) {
      this.axios
        .post("/api/get_part_detail_material", {
          id: $event.value,
        })
        .then((res) => {
          this.modalData.part.map((part) => {
            if (part.addMTB) {
              res.data.sub_part.map((v) => {
                v.material_detail_id =
                  v.material_detail_list[0].material_detail_id;
                v.material_detail_num = 1;
              });
              part.MTBsize = (res.data.long*res.data.wide*1)/1000000>=0.3?(res.data.long*res.data.wide*1)/1000000:0.3;
              part.MTBnum = res.data.MTBnum?res.data.MTBnum:0;
              part.MTBprice = res.data.MTBprice?res.data.MTBprice:0;
              part.part_id = part.change_id;
              part.part_detail = res.data.sub_part;
              part.long = res.data.long;
              part.high = res.data.high;
              part.wide = res.data.wide;
              part.route_id = res.data.route_id;
              part.part_title = res.data.part_title;
              // part.process = res.data.process;
            }
          });
        });
    },
    handlePartChange($event, row, measure, product_num) {
    
      if (row.addMTB) {
        this.handeMTBSelection($event, row);
      } else {
        if ($event) {
          let cur = row.change.filter((item) => item.id == row.change_id);
          row.part_title = cur[0].part_title;
          // row.title = cur[0].part_title;
          row.org_part_id = row.part_id;
          row.part_id = cur[0].part_id;
          row.high = cur[0].high || 0;
          row.highCalc = row.high;
          row.long = cur[0].long || 0;
          row.longCalc = row.long;
          row.wide = cur[0].wide || 0;
          row.wideCalc = row.wide;
          row.sub_part = cur[0].sub_part;
          row.part_detail = row.sub_part;
          row.part_detail.forEach((elem) => {
            elem.longCalc = elem.long || "";
            elem.wideCalc = elem.wide || "";
            elem.highCalc = elem.high || "";
            elem.org_num = elem.num;
            elem.material_detail_org_num = elem.num || 0;
            elem.num =
              ((elem.material_detail_org_num || elem.num) * product_num) || 0;
            elem.material_detail_num =
              elem.material_detail_org_num * product_num;
          });
          row.part_detail.map((_part_detail) => {
            _part_detail.material_detail_org_num = _part_detail.num || 0;
            _part_detail.part_detail_option = [];
            _part_detail.material_detail_list.map((v) => {
              _part_detail.part_detail_option.push({
                label: `${v.long}*${v.wide}*${v.high}`,
                value: v.material_detail_id,
              });
            });
          });
          measure.forEach((element) => {
            if ((row.long + "").indexOf(element.measureCalc) != -1) {
              if (typeof (element.value * 1) == "number") {
                row.long = row.long.replace(
                  new RegExp(element.measureCalc, "g"),
                  element.value | ""
                );
                row.long = eval(row.long);
                row.long += "";
              } else {
                row.long = "";
              }
            }
            if ((row.wide + "").indexOf(element.measureCalc) != -1) {
              if (typeof (element.value * 1) == "number") {
                row.wide = row.wide.replace(
                  new RegExp(element.measureCalc, "g"),
                  element.value | ""
                );
                row.wide = eval(row.wide);
                row.wide += "";
              } else {
                row.wide = "";
              }
            }
            if ((row.high + "").indexOf(element.measureCalc) != -1) {
              if (typeof (element.value * 1) == "number") {
                row.high = row.high.replace(
                  new RegExp(element.measureCalc, "g"),
                  element.value | ""
                );
                row.high = eval(row.high);
                row.high += "";
              } else {
                row.high = "";
              }
            }
            row.part_detail.forEach((item) => {
              item.num =
                row.material_detail_org_num || item.material_detail_org_num;
              if ((item.long || "").indexOf(element.measureCalc) != -1) {
                if (typeof (element.value * 1) == "number") {
                  item.long = item.long.replace(
                    new RegExp(element.measureCalc, "g"),
                    element.value
                  );
                  try {
                    item.long = eval(item.long);
                    item.long += "";
                  } catch (error) {
                    item.long = "";
                  }
                }
              }
              if ((item.wide || "").indexOf(element.measureCalc) != -1) {
                if (typeof (element.value * 1) == "number") {
                  item.wide = item.wide.replace(
                    new RegExp(element.measureCalc, "g"),
                    element.value
                  );
                  try {
                    item.wide = eval(item.wide);
                    item.wide += "";
                  } catch (error) {
                    item.wide = "";
                  }
                }
              }
              if ((item.high || "").indexOf(element.measureCalc) != -1) {
                if (typeof (element.value * 1) == "number") {
                  item.high = item.high.replace(
                    new RegExp(element.measureCalc, "g"),
                    element.value
                  );
                  try {
                    item.high = eval(item.high);
                    item.high += "";
                  } catch (error) {
                    item.high = "";
                  }
                }
              }
              item.material_detail_list.forEach((it) => {
                it.long = it.long || "0";
                it.wide = it.wide || "0";
                it.high = it.high || "0";
              });
              item.long = item.long || "0";
              item.wide = item.wide || "0";
              item.high = item.high || "0";
              item.material_detail_title = item.material_detail_list[0].title;
              item.material_detail_id =
                item.material_detail_list[0].material_detail_id;
              item.material_detail_org_num = item.num || 0;
            });
          });
        } else {
          row.change_id = "";
        }
      }
      this.$forceUpdate();
    },
    handleProductNumChange(e, product) {
      console.log(product);
      product.part.map((element) => {
        element.part_detail.map((elem) => {
          elem.material_detail_num =
            e.target.value * elem.material_detail_org_num;
        });
      });
      product.total_num = e.target.value;
      product.num = (product.total_num*1*product.num_temp_save*1).toFixed(2);
      product.over_price_total = (product.total_num*1*product.over_price).toFixed(2);
      product.price =
        (product.unit_price * 1 || 0) * (product.num * 1 || 1) +
        (product.over_price_total * 1 || 0) +
        (product.ext_price * 1 || 0);
      product.price = product.price.toFixed(2);
      this.handleCalcCount();
      this.$forceUpdate();
    },
    changeExtPrice(e, product){

  product.ext_price = e.target.value * 1;
      product.price =
        (product.unit_price * 1 || 0) * (product.num * 1 || 1) +
        (product.over_price_total * 1 || 0) +
        (product.ext_price * 1 || 0);
      product.price = product.price.toFixed(2);
      this.handleCalcCount();
      
    },
    handleProductUnit_priceChange(e, product) {
      product.unit_price = e.target.value * 1;
      product.price =
        (product.unit_price * 1 || 0) * (product.num * 1 || 1) +
        (product.over_price_total * 1 || 0) +
        (product.ext_price * 1 || 0);
      product.price = product.price.toFixed(2);
      this.handleCalcCount();
      // this.$forceUpdate();
    },
    handleProductExt_priceChange(e, product) {

      product.ext_price = e.target.value * 1;
      product.price =
        (product.unit_price * 1 || 0) * (product.num * 1 || 1) +
        (product.over_price_total * 1 || 0) +
        (product.ext_price * 1 || 0);
      product.price = product.price.toFixed(2);
      this.$forceUpdate();
    },
    handleProductOver_priceChange(e, product) {
      product.over_price_total = e.target.value * 1;
      product.price =
        (product.unit_price * 1 || 0) * (product.num * 1 || 1) +
        (product.over_price_total * 1 || 0) +
        (product.ext_price * 1 || 0);
      product.price = product.price.toFixed(2);
      this.$forceUpdate();
    },
    handleGetProductMeasure(e, e_title, scope) {
      if (scope.row.part.filter((v) => !v.change_id).length > 0) {
        scope.row[e_title] = "";
        scope.row.measure.map((v) => {
          v.e_title == e_title && (v.value = "");
        });
        this.tableData.splice(
          scope.rowIndex,
          1,
          JSON.parse(JSON.stringify(scope.row))
        );
        this.$forceUpdate();
        return this.$Message.warning("请先选择部件！");
      }
    },
    handleGetProductProcess(val, index, product, ele) {
      if (val) {
        let change = [];
        if (product.part.filter((v) => !v.change_id).length > 0) {
          ele.cld = [];
          this.$forceUpdate();
          return this.$Message.warning("请先选择部件！");
        }
        product.part.map((item) => {
          change.push({
            old_id: item.org_part_id || item.part_id,
            new_id: item.change.filter((v) => v.id == item.change_id)[0]
              .part_id||item.part_id,
          });
        });
        let list = product.process_obj.map((item) => {
          return { type_id: item.key || item.id, value: item.value || "" };
        });
        this.axios({
          method: "post",
          url: "/api/order_get_product_process",
          data: {
            product_id: product.product_id,
            type_id: ele.key || ele.id,
            list,
            change,
          },
        }).then((res) => {
          if (res.code == 200) {
            (ele.cld = []), (ele.cld = res.data);
          } else {
            ele.cld = [];
          }
          this.$forceUpdate();
        });
      }
    },
    // 查找最接近
    handleFindNearest(array, value) {
      const temp = JSON.parse(JSON.stringify(array));
      temp.sort((a, b) => {
        return Math.abs(a.long - value) - Math.abs(b.long - value);
      });
      return temp[0].material_detail_id;
    },
    handleCalcPartDetailLong(part_detail, product) {
      for (const key in product.measure) {
        const element = product.measure[key];
        if (element.value) {
          part_detail._longCalc = part_detail.longCalc.replace(
            new RegExp(element.e_title, "g"),
            element.value || ""
          );
        }
      }
      try {
        eval(part_detail._longCalc);
      } catch (error) {
        for (const key in product.measure) {
          const element = product.measure[key];
          part_detail._longCalc = part_detail._longCalc.replace(
            new RegExp(element.e_title, "g"),
            element.value || ""
          );
        }
      }
      return part_detail._longCalc;
    },
    handleIsSpecialPart(product, element) {
      let line = [];
      let flag = false;
      product.part.map((part) => {
        part.part_title.indexOf("线条") != -1 && (line = part.change);
        part.part_title.indexOf("门头板") != -1 && (flag = true);
      });
      this.handleCalcLines(product, line, flag);
    },
    handleCalcLines(product, line, isSpecialPart) {
      const process_ids = product.process_obj.map((v) => {
        return v.value;
      });
      const part_ids = line.map((v) => {
        return v.part_id;
      });
      this.axios
        .post("/api/process_part_for_product", {
          product_id: product.product_id,
          process_ids,
          part_ids,
        })
        .then((res) => {
          for (const key in res.data) {
            const element = res.data[key];
            // 找到部件
            let part_arr = {};
            product.part.map((v) => {
              if (v.part_id == key) {
                part_arr = v;
              }
            });
            for (const k in element) {
              const elem = element[k];
              // 找到零部件
              elem.map((match_item) => {
                // 特殊部件 门头板， 需要在原有产品测量字段H上增加门头板的H
                if (isSpecialPart) {
                  product.part.map((v) => {
                    if (match_item.e_title == "H") {
                      if (
                        match_item.max >= v.long * 1 + product["H"] * 1 &&
                        match_item.min <= v.long * 1 + product["H"] * 1
                      ) {
                        part_arr &&
                          part_arr.part_detail &&
                          part_arr.part_detail.map((v) => {
                            if (v.part_detail_id == k) {
                              console.log(v,3)
                              v.material_detail_id =
                                match_item.material_detail_id;
                              v.material_detail_org_num = match_item.num*product.total_num*1;
                              v.material_detail_num = match_item.num*product.total_num*1;
                            }
                          });
                      }
                    } else {
                     
                      if (
                        match_item.max >= product[match_item.e_title] &&
                        match_item.min <= product[match_item.e_title]
                      ) {

                        part_arr &&
                          part_arr.part_detail &&
                          part_arr.part_detail.map((v) => {
                            if (v.part_detail_id == k) {
                              console.log(v,1)
                              v.material_detail_id =
                                match_item.material_detail_id;
                              v.material_detail_org_num = match_item.num*product.total_num*1;
                              v.material_detail_num = match_item.num*product.total_num*1;
                            }
                          });
                      }
                    }
                  });
                } else {
                  if (
                    match_item.max >= product[match_item.e_title] &&
                    match_item.min <= product[match_item.e_title]
                  ) {
                    part_arr &&
                      part_arr.part_detail &&
                      part_arr.part_detail.map((v) => {
                        if (v.part_detail_id == k) {
                           console.log(product,2)
                          v.material_detail_id = match_item.material_detail_id;
                          v.material_detail_org_num = match_item.num*product.total_num*1;
                          v.material_detail_num = match_item.num*product.total_num*1;
                        }
                      });
                  }
                }
              });
            }
          }
          this.handleCalcCount();
          this.$forceUpdate();
        });
    },
    handleProductMeasureBlur(e, product, measure_detail) {
      this.handleProductMeasureChange(e, product, measure_detail);
      if (e.target.value) {
        try {
          measure_detail.value = eval(e.target.value);
        } catch (error) {
          console.log("error :>> ", error);
        }
        product.part.map((part) => {
          part.part_title ? "" : (part.part_title = part.title);
          part.part_title.indexOf("线条") != -1 && (line = part.change);
          part.part_detail &&
            part.part_detail.length > 0 &&
            part.part_detail.map((part_detail) => {
              part_detail._longCalc = this.handleCalcPartDetailLong(
                part_detail,
                product
              );
              if (part_detail.material_detail_list.length > 1) {
                try {
                  part_detail.longCalcFinal = eval(part_detail._longCalc);
                  // part_detail.material_detail_id = this.handleFindNearest(
                  //   part_detail.material_detail_list,
                  //   part_detail.longCalcFinal
                  // );
                } catch (error) {
                  console.log("error :>> ", error);
                }
              }
            });
        });
        product.process_obj.map((v) => {
          v.value ? "" : (v.value = product[v.id]);
        });
        let line = [];
        let flag = false;
        product.part.map((part) => {
          part.part_title.indexOf("线条") != -1 && (line = part.change);
          part.part_title.indexOf("门头板") != -1 && (flag = true);
        });
        this.handleCalcLines(product, line, flag);
      }
    },
    handleProductMeasureChange(e, product, measure_detail) {
      if (e.target.value) {
        let cur_measure = measure_detail.measureCalc;
        let cur_value = e.target.value;
        product[cur_measure] = cur_value;
        //当前测量字段 L W H  修改部件测量字段
        product.part.forEach((element) => {
          if (!element.is_metal) {
            element.highCalc = element.highCalc + "";
            element.longCalc = element.longCalc + "";
            element.wideCalc = element.wideCalc + "";
            //处理公式
            if (element.highCalc.indexOf(cur_measure) != -1) {
              element.high = element.highCalc.replace(
                new RegExp(cur_measure, "g"),
                cur_value || ""
              );
            }
            if (element.longCalc.indexOf(cur_measure) != -1) {
              element.long = element.longCalc.replace(
                new RegExp(cur_measure, "g"),
                cur_value || ""
              );
            }
            if (element.wideCalc.indexOf(cur_measure) != -1) {
              element.wide = element.wideCalc.replace(
                new RegExp(cur_measure, "g"),
                cur_value || ""
              );
            }
            //判断测量字段公式中是否还含有字母
            let flag_high = false;
            let flag_long = false;
            let flag_wide = false;
            for (let index = 0; index < product.measure.length; index++) {
              const item = product.measure[index];
              if (element.high.toString().indexOf(item.measureCalc) != -1) {
                flag_high = true;
              }
              if (element.long.toString().indexOf(item.measureCalc) != -1) {
                flag_long = true;
              }
              if (element.wide.toString().indexOf(item.measureCalc) != -1) {
                flag_wide = true;
              }
            }
            if (flag_high) {
            } else {
              element.high = eval(element.high);
              element.high += "";
            }
            if (flag_long) {
            } else {
              element.long = eval(element.long);
              element.long += "";
            }
            if (flag_wide) {
            } else {
              element.wide = eval(element.wide);
              element.wide += "";
            }
            element.part_detail.forEach((elem) => {
              elem.highCalc = elem.high + "";
              elem.longCalc = elem.long + "";
              elem.wideCalc = elem.wide + "";
              if (!elem.high) {
              } else if (elem.highCalc.indexOf(cur_measure) != -1) {
                elem.high = elem.highCalc.replace(
                  new RegExp(cur_measure, "g"),
                  cur_value || ""
                );
              }
              if (!elem.long) {
              } else if (elem.longCalc.indexOf(cur_measure) != -1) {
                elem.long = elem.longCalc.replace(
                  new RegExp(cur_measure, "g"),
                  cur_value || ""
                );
              }
              if (!elem.wide) {
              } else if (elem.wideCalc.indexOf(cur_measure) != -1) {
                elem.wide = elem.wideCalc.replace(
                  new RegExp(cur_measure, "g"),
                  cur_value || ""
                );
              }
              //判断测量字段公式中是否还含有字母
              let _flag_high = false;
              let _flag_long = false;
              let _flag_wide = false;
              // Number类型无法使用indexOf
              elem.high += "";
              elem.long += "";
              elem.wide += "";
              for (let index = 0; index < product.measure.length; index++) {
                const item = product.measure[index];
                if (!elem.high) {
                } else if (elem.high.indexOf(item.measureCalc) != -1) {
                  _flag_high = true;
                }
                if (!elem.long) {
                } else if (elem.long.indexOf(item.measureCalc) != -1) {
                  _flag_long = true;
                }
                if (!elem.wide) {
                } else if (elem.wide.indexOf(item.measureCalc) != -1) {
                  _flag_wide = true;
                }
              }
              if (_flag_high) {
              } else {
                elem.high = eval(elem.high);
                elem.high += "";
                elem.high == "null" && (elem.high = 0);
              }
              if (_flag_long) {
              } else {
                elem.long = eval(elem.long);
                elem.long += "";
                elem.long == "null" && (elem.long = 0);
              }
              if (_flag_wide) {
              } else {
                elem.wide = eval(elem.wide);
                elem.wide += "";
                elem.wide == "null" && (elem.wide = 0);
              }
            });
          }
        });
        product.over_price = 0;
        product.part.map((item) => {
          const cur_part = product.overdraft.filter(
            (v) => v.part_id == item.part_id
          );
          cur_part.length > 0 &&
            cur_part.map((element) => {
              // 1 高 2 宽 3 厚
              if (
                element.type == 1 &&
                item.long >= element.min &&
                item.long < element.max
              ) {
                item.formula_temp = JSON.parse(JSON.stringify(element.formula));
                item.formula_temp = item.formula_temp.replace(/H/g, item.long);
                item.formula_temp = item.formula_temp.replace(/W/g, item.wide);
                item.formula_temp = item.formula_temp.replace(/T/g, item.high);
                item.formula_value = eval(item.formula_temp);
                product.over_price =
                  product.over_price * 1 + item.formula_value * 1;
              }
              if (
                element.type == 2 &&
                item.wide >= element.min &&
                item.wide < element.max
              ) {
                item.formula_temp = JSON.parse(JSON.stringify(element.formula));
                item.formula_temp = item.formula_temp.replace(/H/g, item.long);
                item.formula_temp = item.formula_temp.replace(/W/g, item.wide);
                item.formula_temp = item.formula_temp.replace(/T/g, item.high);
                item.formula_value = eval(item.formula_temp).toFixed(2);
                product.over_price =
                  product.over_price * 1 + item.formula_value * 1;
              }
              if (
                element.type == 3 &&
                item.high >= element.min &&
                item.high < element.max
              ) {
                item.formula_temp = JSON.parse(JSON.stringify(element.formula));
                item.formula_temp = item.formula_temp.replace(/H/g, item.long);
                item.formula_temp = item.formula_temp.replace(/W/g, item.wide);
                item.formula_temp = item.formula_temp.replace(/T/g, item.high);
                item.formula_value = eval(item.formula_temp);
                product.over_price =
                  product.over_price * 1 + item.formula_value * 1;
              }
            });
        });
        //修改核算数量
        // 如果没有核算数量公式，核算数量取产品数量
        if (product.num_formula == "") {
          product.total_num = product.num;
        } else {
          product.num_formula_temp = product.num_formula;
          product.measure.forEach((element) => {
            if (product.num_formula.indexOf(element.e_title) != -1) {
              product.num_formula_temp = product.num_formula_temp.replace(
                new RegExp(element.e_title, "g"),
                element.value || 0
              );
            }
          });
          product.num = eval(product.num_formula_temp);
        }
        console.log(product,1234)
      
        // product.over_price = Number(product.over_price*product.total_num*1).toFixed(2);
        // product.save_over_price = JSON.parse(JSON.stringify(product.over_price*1/product.total_num*1));
        product.num_temp_save = product.num*1 || 1;
        product.num = (Number(product.num)*(product.total_num*1)).toFixed(2);
         product.over_price_total = (product.total_num*1*product.over_price).toFixed(2);
        product.price =
          (product.unit_price * 1 || 0) * (product.num * 1 || 1) +
          (product.over_price_total * 1 || 0) +
          (product.ext_price * 1 || 0);
        product.price = product.price.toFixed(2);
      }
      this.$forceUpdate();
    },
    handleSubpartNumChange(e, row) {
      row.material_detail_num = e.target.value;
      this.$forceUpdate();
    },
    //修改材质/颜色/工艺的
    handleProductProcessChange(e, n, modelData, ele) {
      if (e) {
        this.pre_process_obj[ele.id] = e.value;
        modelData[ele.id] = e.value;
        if (!modelData.procedure_properties_str) {
          modelData.procedure_properties_str = [];
        }
        modelData.procedure_properties_str[ele.id - 1] = e.label;
        if (!modelData.procedure_properties) {
          modelData.procedure_properties = {};
        }
        modelData.procedure_properties[ele.id] = e.value;
        let isStart = true;
        // let match_list = []; //当前选中的list
        // this.process_match_list.map((item) => {
        //   if (item.detail[ele.id] == e.value) {
        //     match_list.push(item.detail);
        //   }
        // });
        // this.process_Select_match_list = match_list;
        modelData.process_obj.forEach((element) => {
          if (element.value == "") {
            isStart = false;
          }
        });
        //匹配工艺路线
        if (isStart) {
          let _target = [];
          let _sorce = JSON.parse(JSON.stringify(this.process_match_list));
          modelData.process_obj.forEach((element) => {
            _target.push(element.value);
          });
          _sorce.forEach((element) => {
            let _str = [];
            for (const key in element.detail) {
              const item = element.detail[key];
              _str.push(item);
            }
            element.new_detail = _str.join(",");
          });
          let target = _target.join(",");
          _sorce.forEach((element) => {
            if (element.new_detail == target) {
              modelData.route_id = element.id;
            }
          });
        }
        // 产品 - 部件 工艺属性联动
        modelData.part.forEach((element) => {
          if (!element.is_metal) {
            element.process.forEach((elem) => {
              if (elem.name == ele.name) {
                elem.value = e.value;
                if (!element.procedure_properties) {
                  element.procedure_properties = {};
                }
                if (!element.procedure_properties_str) {
                  element.procedure_properties_str = [];
                }
                element.procedure_properties[ele.id] = e.value;
                element.procedure_properties_str[n] = e.label;
              }
            });
          }
        });
      } else {
        modelData.route_id = "";
        if (typeof modelData.procedure_properties == "string") {
          modelData.procedure_properties = modelData.procedure_properties.split(
            ","
          );
        }
        modelData.procedure_properties[ele.id] = "";
        modelData[ele.id] = "";
      }
      this.$forceUpdate();
    },
    handlePriceFocus() {
      if (this.modalData.price == 0.0 || this.modalData.price == 0) {
        this.modalData.price = "";
      }
    },
    handleUnitPriceFocus() {
      if (this.modalData.unit_price == 0.0 || this.modalData.unit_price == 0) {
        this.modalData.unit_price = "";
      }
    },
    handleExtPriceFocus() {
      if (this.modalData.ext_price == 0.0 || this.modalData.ext_price == 0) {
        this.modalData.ext_price = "";
      }
    },
    handleOverPriceFocus() {
      if (this.modalData.over_price == 0.0 || this.modalData.over_price == 0) {
        this.modalData.over_price = "";
      }
    },
    handleMaterialChange(val, row) {
      if (val) {
        let tempRow = row.material_detail_list.filter(
          (item) => item.material_detail_id == val
        );
        row.material_detail_title = tempRow[0].title;
        // row.material_detail_id = tempRow.length > 0 ? tempRow[0].id : 0
        this.$forceUpdate();
      }
    },
    handleRadioClick(row) {
      row.isChoosed = !row.isChoosed;
      this.$forceUpdate();
    },
    handlePartProcessChange(val, n, row, process_detail) {
      if (!row.procedure_properties) {
        row.procedure_properties = {};
      }
      if (!row.procedure_properties_str) {
        row.procedure_properties_str = [];
      }
      if (val) {
        row.procedure_properties[process_detail.id] = val.value;
        row.procedure_properties_str[n] = val.label;
      } else {
        row.procedure_properties[process_detail.id] = "";
        row.procedure_properties_str[n] = "";
      }
      this.$forceUpdate();
    },
    looks(img) {
      const array = [{ img_url: img }];
      this.$previewImg({
        list: array,
        baseUrl: this.$store.state.ip,
        baseImgField: "img_url",
        baseTitleField: "",
      });
    },
    delItems(n, arr) {
      arr.splice(n, 1);
      this.$forceUpdate();
    },
    changeIpt(e, row) {
      if (this.info.img.length >= 3) {
        return this.$Message.warning("图片最多上传3张");
      }
      let file = e.target.files[0];
      this.postImg(file, row);
      e.target.value = null;
    },
    postImg(file, row) {
      let formData = new FormData();
      formData.append("file", file);
      this.axios.post("/api/upload_pic", formData).then((res) => {
        row.push(res.data.url);
        this.$forceUpdate();
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.product-img {
  padding-top: 10px;
}
.product-add {
  padding: 10px 0;
  display: flex;
  flex-wrap: wrap;
  .ipt {
    position: absolute;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
    outline: none;
    top: 0;
    left: 0;
  }
  .add-items {
    width: 120px;
    height: 120px;
    border: 1px dotted #e7e7e7;
    border-radius: 5px;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    position: relative;
    flex-direction: column;
    background: #f4f5f7;
    .item {
      width: 46px;
      height: 46px;
      background: #3764ff;
      opacity: 0.6;
      display: flex;
      justify-content: center;
      align-items: center;
      border-radius: 50%;
      color: #fff;
    }
  }
  .items {
    width: 120px;
    height: 120px;
    margin-bottom: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #e7e7e7;
    margin-right: 10px;
    border-radius: 5px;
    position: relative;
    img {
      max-width: 108px;
      max-height: 108px;
    }
  }
}
.delete-img {
  position: absolute;
  right: 0px;
  top: 0px;
  color: red;
}
/deep/.ivu-tooltip-rel {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.page-edit {
  overflow: hidden;
  overflow-y: auto;
  position: relative;
  top: 20px;
  height: 85%;
  padding-bottom: 20px;
  /deep/ .ivu-form-item {
    min-width: 300px;
  }
}
.auto-width {
  width: 200px;
}
.items {
  // box-shadow: 0 2px 7px rgba(0, 0, 0, 0.15);
  border-color: transparent;
  position: relative;
  border-radius: 5px;
  .items-header {
    padding: 10px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #f4f4f4;
    .header-left {
      span {
        margin-left: 10px;
      }
    }
  }
  .form-item {
    padding: 20px;
  }
}
.modal-scroll {
  height: 600px;
  overflow: scroll;
}
.modal-items {
  border-radius: 5px;
  border: 1px solid #dedede;
  padding: 0px 10px;
  margin-bottom: 40px;
}
.modal-footer-button {
  display: flex;
  justify-content: flex-end;
  padding: 10px 0;
}
.items-table {
  width: 100%;
  overflow-x: scroll;
}
/deep/ .ivu-table-wrapper {
  overflow: visible;
  color: red;
} //穿透iview
.original-part {
  padding-top: 20px;
}
.column-li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 2px 5px;
}
.hierarchy {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  flex-wrap: wrap;
  .radio-g {
    padding: 10px 0;
    width: 700px;
    display: flex;
    justify-content: flex-start;
    // align-items: flex-start;
    flex-wrap: wrap;
    .radio-us {
      background: #f4f5f7;
      padding: 5px 20px;
      margin-right: 18px;
      margin-bottom: 10px;
      color: #999999;
      border-radius: 15px;
      border: 1px solid #dedede;
      cursor: pointer;
    }
    .radio-us-foc {
      color: #3764ff;
      background: #fff;
      border: 1px solid #3764ff;
    }
  }
}
.nav-product {
  width: 100%;
  height: 50px;
  display: flex;
  align-items: center;
}
/deep/.ivu-poptip-inner {
  max-width: 90%;
  // display: flex;
  // justify-content: center;
}
/deep/.ivu-poptip-body {
  max-height: 600px;
  overflow: hidden;
  overflow-y: auto;
}

.content {
  .content_header {
    display: flex;
    justify-content: space-between;
    padding: 0 10px;
  }
}
.modal_product_info {
  background-color: #f5f5f5;
  border-radius: 10px;
  padding: 10px;
  margin-bottom: 10px;
  .modal_product_info_title {
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 10px;
  }
  .modal_product_info_content {
    .part_detail_form {
      /deep/.ivu-form {
        display: flex;
        justify-content: flex-start;
        flex-wrap: wrap;
      }
      /deep/ .ivu-form-item {
        display: inline-block;
        min-width: 150px;
      }
    }
  }
  .modal_product {
    /deep/.ivu-form {
      display: flex;
      justify-content: flex-start;
      flex-wrap: wrap;
    }
    /deep/ .ivu-form-item {
      display: inline-block;
      min-width: 200px;
    }
  }
  .modal_parts {
    /deep/.ivu-form {
      display: flex;
      justify-content: flex-start;
      flex-wrap: wrap;
    }
    /deep/ .ivu-form-item {
      display: inline-block;
      min-width: 30px;
    }
  }
  .modal_extra {
    /deep/.ivu-form {
      display: flex;
      justify-content: flex-start;
      flex-wrap: wrap;
    }
    /deep/ .ivu-form-item {
      display: inline-block;
      min-width: 100px;
    }
  }
}
/deep/.ivu-modal-body {
  max-height: 800px;
}
.hide_part_detail {
  display: none;
}
/deep/.ivu-form-item-content {
  span {
    vertical-align: middle;
  }
}
/deep/.vxe-table--render-default .vxe-cell {
  padding: 0;
}

/deep/.price .ivu-input[disabled]{
  color: black;
}
</style>