<template>
  <div class="page-body">



    <div class="topbar">
      <a-button type="primary" @click="ok({})">保存</a-button>
      <a-button @click="selectScheme">导入方案</a-button>
      <a-button @click="cancel">取消</a-button>
      <a-button @click="previewScheme">预览方案</a-button>


    </div>

    <a-collapse v-model="groupbox1_activeKey">
      <a-collapse-panel key="1" header="基本信息">

        <vxe-form :data="formOptions.data" ref="xForm" :title-width="formOptions.titleWidth"
          :title-align="formOptions.titleAlign" :rules="formOptions.rules" :items="formOptions.items" titleColon>
        </vxe-form>
      </a-collapse-panel>
      <a-collapse-panel key="2" header="部件部分">

        <vxe-table border show-overflow keep-source ref="fittings_xTable" :data="fittings_detailsData" :keyboard-config="{
          isArrow: true, isDel: true,
          isEnter: false, isTab: true, isEdit: true, isChecked: true
        }" :mouse-config="{ selected: true }" @pulldownSelected="fittings_onPulldownSelected"
          @popupSelected="fittings_onPopupSelected" :export-config="{}" @edit-closed="fittings_afterEditEvent"
          @edit-actived="fittings_beforeEditEvent"
          :edit-config="{ trigger: 'click', mode: 'cell', icon: 'vxe-icon-edit', showStatus: false, beforeEditMethod: fittings_beforeEditMethod }">
          <vxe-column width="60" v-if="!isReadonly">
            <template #default="{ row }">
              <div class="oplinks2">
                <a @click.stop="fittings_pageAdd(row)" title="新增">
                  <a-icon type="plus-circle" />
                </a>
                <a @click.stop="fittings_pageDelete(row)" title="删除">
                  <a-icon type="delete" />
                </a>
              </div>
            </template>
          </vxe-column>
          <vxe-column field="fittings" title="部件" width="160" :params="editorFittings" formatter="formatRef"
            :edit-render="{ name: 'MkGridDataSelector' }"></vxe-column>
          <vxe-column field="material" title="材料（免漆）" width="160" :params="editorMaterial" formatter="formatRef"
            :edit-render="{ name: 'MkGridDataSelector' }"></vxe-column>
          <vxe-column field="paint_material" title="材料（油漆）" width="160" :params="editorMaterial" formatter="formatRef"
            :edit-render="{ name: 'MkGridDataSelector' }"></vxe-column>

          <vxe-column field="long_formula" title="长(公式)" width="220"
            :params="{ moreExpressionsList: getMoreExpressionsList }"
            :edit-render="{ name: 'EditExpressions' }"></vxe-column>
          <vxe-column field="width_formula" title="宽(公式)" width="220"
            :params="{ moreExpressionsList: getMoreExpressionsList }"
            :edit-render="{ name: 'EditExpressions' }"></vxe-column>
          <vxe-column field="height_formula" title="厚(公式)" width="220"
            :params="{ moreExpressionsList: getMoreExpressionsList }"
            :edit-render="{ name: 'EditExpressions' }"></vxe-column>
          <vxe-column field="quantity" title="数量" width="80"
            :edit-render="{ name: '$input', props: { type: 'number' } }"></vxe-column>

          <vxe-column field="banding" title="封边" width="160" :params="editorBanding" formatter="formatRef"
            :edit-render="{ name: 'MkGridDataSelector' }"></vxe-column>

          <vxe-column field="seal_formula" title="封边用量(公式)" width="220"
            :edit-render="{ name: 'EditExpressions' }"></vxe-column>
          <vxe-column field="rate_materials" title="主材利用率" width="80"
            :edit-render="{ name: '$input', props: { type: 'number' } }"></vxe-column>
          <vxe-column field="paint_number" title="油漆面" width="80"
            :edit-render="{ name: '$input', props: { type: 'number' } }"></vxe-column>
          <vxe-column field="board_length_formula" title="板材用量(块)(公式)" width="220"
            :edit-render="{ name: 'EditExpressions' }"></vxe-column>
          <vxe-column field="paint_area_formula" title="油漆面积(㎡)(公式)" width="220"
            :edit-render="{ name: 'EditExpressions' }"></vxe-column>
          <vxe-column field="real_quantity" title="实木用量(立方)" width="80"
            :edit-render="{ name: '$input', props: { type: 'number' } }"></vxe-column>
          <vxe-column field="remark" title="备注" width="120" :edit-render="{ name: 'textarea' }"></vxe-column>

        </vxe-table>

      </a-collapse-panel>
      <a-collapse-panel key="3" header="配件部分">

        <vxe-table border show-overflow keep-source ref="parts_xTable" :data="parts_detailsData" :keyboard-config="{
          isArrow: true, isDel: true,
          isEnter: false, isTab: true, isEdit: true, isChecked: true
        }" :mouse-config="{ selected: true }" @pulldownSelected="parts_onPulldownSelected"
          @popupSelected="parts_onPopupSelected" :export-config="{}" @edit-closed="parts_afterEditEvent"
          @edit-actived="parts_beforeEditEvent"
          :edit-config="{ trigger: 'click', mode: 'cell', icon: 'vxe-icon-edit', showStatus: false, beforeEditMethod: parts_beforeEditMethod }">
          <vxe-column width="60" v-if="!isReadonly">
            <template #default="{ row }">
              <div class="oplinks2">
                <a @click.stop="parts_pageAdd(row)" title="新增">
                  <a-icon type="plus-circle" />
                </a>
                <a @click.stop="parts_pageDelete(row)" title="删除">
                  <a-icon type="delete" />
                </a>
              </div>
            </template>
          </vxe-column>
          <vxe-column field="parts" title="配件" width="260" :params="editorParts" formatter="formatRef"
            :edit-render="{ name: 'MkGridDataSelector' }"></vxe-column>
          <vxe-column field="spec" title="规格" width="120" :edit-render="{ name: '$input' }"></vxe-column>
          <vxe-column field="quantity" title="数量" width="120"
            :edit-render="{ name: '$input', props: { type: 'integer' } }"></vxe-column>
          <vxe-column field="price" title="单价" width="120"
            :edit-render="{ name: '$input', props: { type: 'number' } }"></vxe-column>

          <vxe-column field="amount_formula" title="金额(公式)" width="220" :edit-render="{ name: 'EditExpressions' }"
            :params="{ moreExpressionsList: getMoreExpressionsList }">
          </vxe-column>

        </vxe-table>

      </a-collapse-panel>

      <a-collapse-panel key="4" header="包装部分">

        <vxe-table border show-overflow keep-source ref="packaging_xTable" :data="packaging_detailsData" :keyboard-config="{
          isArrow: true, isDel: true,
          isEnter: false, isTab: true, isEdit: true, isChecked: true
        }" :mouse-config="{ selected: true }" @pulldownSelected="packaging_onPulldownSelected"
          @popupSelected="packaging_onPopupSelected" :export-config="{}" @edit-closed="packaging_afterEditEvent"
          @edit-actived="packaging_beforeEditEvent"
          :edit-config="{ trigger: 'click', mode: 'cell', icon: 'vxe-icon-edit', showStatus: false, beforeEditMethod: packaging_beforeEditMethod }">
          <vxe-column width="60" v-if="!isReadonly">
            <template #default="{ row }">
              <div class="oplinks2">
                <a @click.stop="packaging_pageAdd(row)" title="新增">
                  <a-icon type="plus-circle" />
                </a>
                <a @click.stop="packaging_pageDelete(row)" title="删除">
                  <a-icon type="delete" />
                </a>
              </div>
            </template>
          </vxe-column>
          <vxe-column field="packaging" title="包装" width="260" :params="editorPackaging" formatter="formatRef"
            :edit-render="{ name: 'MkGridDataSelector' }"></vxe-column>
          <vxe-column field="long_formula" title="长(公式)" width="220"
            :edit-render="{ name: 'EditExpressions' }"></vxe-column>
          <vxe-column field="width_formula" title="宽(公式)" width="220"
            :edit-render="{ name: 'EditExpressions' }"></vxe-column>
          <vxe-column field="height_formula" title="高(公式)" width="220"
            :edit-render="{ name: 'EditExpressions' }"></vxe-column>

          <vxe-column field="quantity_formula" title="数量(公式)" width="220"
            :edit-render="{ name: 'EditExpressions' }"></vxe-column>
          <vxe-column field="price" title="单价" width="120"
            :edit-render="{ name: '$input', props: { type: 'number' } }"></vxe-column>
          <vxe-column field="amount_formula" title="金额(公式)" width="220"
            :edit-render="{ name: 'EditExpressions' }"></vxe-column>

        </vxe-table>

      </a-collapse-panel>

    </a-collapse>



    <div class="groupbox">
      <h3>核算表（免漆）</h3>
      <a-collapse v-model="groupbox2_activeKey">
        <a-collapse-panel key="1" header="材料">


          <vxe-table border show-overflow keep-source ref="material_xTable" :data="material_detailsData" :keyboard-config="{
            isArrow: true, isDel: true,
            isEnter: false, isTab: true, isEdit: true, isChecked: true
          }" :mouse-config="{ selected: true }" @pulldownSelected="material_onPulldownSelected"
            @popupSelected="material_onPopupSelected" :export-config="{}" @edit-closed="material_afterEditEvent"
            :edit-config="{ trigger: 'click', mode: 'cell', icon: 'vxe-icon-edit', showStatus: false, beforeEditMethod: material_beforeEditMethod }">
            <vxe-column width="60" v-if="!isReadonly">
              <template #default="{ row }">
                <div class="oplinks2">
                  <a @click.stop="material_pageAdd(row)" title="新增">
                    <a-icon type="plus-circle" />
                  </a>
                  <a @click.stop="material_pageDelete(row)" title="删除">
                    <a-icon type="delete" />
                  </a>
                </div>
              </template>
            </vxe-column>
            <vxe-column field="material" title="材料" width="260" :params="editorMaterial2" formatter="formatRef"
              :edit-render="{ name: 'MkGridDataSelector' }"></vxe-column>

            <vxe-column field="quantity_formula" title="总用量(公式)" width="220" :params="{ hasTotalQuantity: true }"
              :edit-render="{ name: 'EditExpressions' }"></vxe-column>
            <vxe-column field="price" title="单价" width="120"
              :edit-render="{ name: '$input', props: { type: 'number' } }"></vxe-column>
            <vxe-column field="amount_formula" title="金额(公式)" width="220"
              :edit-render="{ name: 'EditExpressions' }"></vxe-column>

          </vxe-table>


        </a-collapse-panel>
        <a-collapse-panel key="2" header="人工" :disabled="false">

          <vxe-table border show-overflow keep-source ref="labor_xTable" :data="labor_detailsData" :keyboard-config="{
            isArrow: true, isDel: true,
            isEnter: false, isTab: true, isEdit: true, isChecked: true
          }" :mouse-config="{ selected: true }" @pulldownSelected="labor_onPulldownSelected"
            @popupSelected="labor_onPopupSelected" :export-config="{}" @edit-closed="labor_afterEditEvent"
            @edit-actived="labor_beforeEditEvent"
            :edit-config="{ trigger: 'click', mode: 'cell', icon: 'vxe-icon-edit', showStatus: false, beforeEditMethod: labor_beforeEditMethod }">
            <vxe-column width="60" v-if="!isReadonly">
              <template #default="{ row }">
                <div class="oplinks2">
                  <a @click.stop="labor_pageAdd(row)" title="新增">
                    <a-icon type="plus-circle" />
                  </a>
                  <a @click.stop="labor_pageDelete(row)" title="删除">
                    <a-icon type="delete" />
                  </a>
                </div>
              </template>
            </vxe-column>
            <vxe-column field="labor" title="项目" width="260" :params="editorLabor" formatter="formatRef"
              :edit-render="{ name: 'MkGridDataSelector' }"></vxe-column>

            <vxe-column field="amount_formula" title="金额(公式)" width="220"
              :edit-render="{ name: 'EditExpressions' }"></vxe-column>

          </vxe-table>
        </a-collapse-panel>
        <a-collapse-panel key="3" header="其他费用" :disabled="false">
          <vxe-table border show-overflow keep-source ref="expense_xTable" :data="expense_detailsData" :keyboard-config="{
            isArrow: true, isDel: true,
            isEnter: false, isTab: true, isEdit: true, isChecked: true
          }" :mouse-config="{ selected: true }" @pulldownSelected="expense_onPulldownSelected"
            @popupSelected="expense_onPopupSelected" :export-config="{}" @edit-closed="expense_afterEditEvent"
            @edit-actived="expense_beforeEditEvent"
            :edit-config="{ trigger: 'click', mode: 'cell', icon: 'vxe-icon-edit', showStatus: false, beforeEditMethod: expense_beforeEditMethod }">
            <vxe-column width="60" v-if="!isReadonly">
              <template #default="{ row }">
                <div class="oplinks2">
                  <a @click.stop="expense_pageAdd(row)" title="新增">
                    <a-icon type="plus-circle" />
                  </a>
                  <a @click.stop="expense_pageDelete(row)" title="删除">
                    <a-icon type="delete" />
                  </a>
                </div>
              </template>
            </vxe-column>
            <vxe-column type="seq" title="序号" width="48"></vxe-column>
            <vxe-column field="item_name" title="项目" width="220" :edit-render="{ name: '$input' }"></vxe-column>
            <vxe-column field="amount_formula" title="金额(公式)" width="220"
              :edit-render="{ name: 'EditExpressions' }"></vxe-column>
          </vxe-table>
        </a-collapse-panel>
      </a-collapse>
    </div>


    <div class="groupbox">
      <h3>核算表（油漆）</h3>
      <a-collapse v-model="groupbox3_activeKey">
        <a-collapse-panel key="1" header="材料">


          <vxe-table border show-overflow keep-source ref="paintMaterial_xTable" :data="paintMaterial_detailsData"
            :keyboard-config="{
              isArrow: true, isDel: true,
              isEnter: false, isTab: true, isEdit: true, isChecked: true
            }" :mouse-config="{ selected: true }" @pulldownSelected="paintMaterial_onPulldownSelected"
            @popupSelected="paintMaterial_onPopupSelected" :export-config="{}" @edit-closed="paintMaterial_afterEditEvent"
            :edit-config="{ trigger: 'click', mode: 'cell', icon: 'vxe-icon-edit', showStatus: false, beforeEditMethod: paintMaterial_beforeEditMethod }">
            <vxe-column width="60" v-if="!isReadonly">
              <template #default="{ row }">
                <div class="oplinks2">
                  <a @click.stop="paintMaterial_pageAdd(row)" title="新增">
                    <a-icon type="plus-circle" />
                  </a>
                  <a @click.stop="paintMaterial_pageDelete(row)" title="删除">
                    <a-icon type="delete" />
                  </a>
                </div>
              </template>
            </vxe-column>
            <vxe-column field="material" title="材料" width="260" :params="editorMaterial2" formatter="formatRef"
              :edit-render="{ name: 'MkGridDataSelector' }"></vxe-column>

            <vxe-column field="quantity_formula" title="总用量(公式)" width="220" :params="{ hasTotalQuantity: true }"
              :edit-render="{ name: 'EditExpressions' }"></vxe-column>
            <vxe-column field="price" title="单价" width="120"
              :edit-render="{ name: '$input', props: { type: 'number' } }"></vxe-column>
            <vxe-column field="amount_formula" title="金额(公式)" width="220"
              :edit-render="{ name: 'EditExpressions' }"></vxe-column>

          </vxe-table>


        </a-collapse-panel>
        <a-collapse-panel key="2" header="人工" :disabled="false">

          <vxe-table border show-overflow keep-source ref="paintLabor_xTable" :data="paintLabor_detailsData"
            :keyboard-config="{
              isArrow: true, isDel: true,
              isEnter: false, isTab: true, isEdit: true, isChecked: true
            }" :mouse-config="{ selected: true }" @pulldownSelected="paintLabor_onPulldownSelected"
            @popupSelected="paintLabor_onPopupSelected" :export-config="{}" @edit-closed="paintLabor_afterEditEvent"
            @edit-actived="paintLabor_beforeEditEvent"
            :edit-config="{ trigger: 'click', mode: 'cell', icon: 'vxe-icon-edit', showStatus: false, beforeEditMethod: paintLabor_beforeEditMethod }">
            <vxe-column width="60" v-if="!isReadonly">
              <template #default="{ row }">
                <div class="oplinks2">
                  <a @click.stop="paintLabor_pageAdd(row)" title="新增">
                    <a-icon type="plus-circle" />
                  </a>
                  <a @click.stop="paintLabor_pageDelete(row)" title="删除">
                    <a-icon type="delete" />
                  </a>
                </div>
              </template>
            </vxe-column>
            <vxe-column field="labor" title="项目" width="260" :params="editorLabor" formatter="formatRef"
              :edit-render="{ name: 'MkGridDataSelector' }"></vxe-column>

            <vxe-column field="amount_formula" title="金额(公式)" width="220"
              :edit-render="{ name: 'EditExpressions' }"></vxe-column>

          </vxe-table>



        </a-collapse-panel>
        <a-collapse-panel key="3" header="其他费用" :disabled="false">
          <vxe-table border show-overflow keep-source ref="paintExpense_xTable" :data="paintExpense_detailsData"
            :keyboard-config="{
              isArrow: true, isDel: true,
              isEnter: false, isTab: true, isEdit: true, isChecked: true
            }" :mouse-config="{ selected: true }" @pulldownSelected="paintExpense_onPulldownSelected"
            @popupSelected="paintExpense_onPopupSelected" :export-config="{}" @edit-closed="paintExpense_afterEditEvent"
            @edit-actived="paintExpense_beforeEditEvent"
            :edit-config="{ trigger: 'click', mode: 'cell', icon: 'vxe-icon-edit', showStatus: false, beforeEditMethod: paintExpense_beforeEditMethod }">
            <vxe-column width="60" v-if="!isReadonly">
              <template #default="{ row }">
                <div class="oplinks2">
                  <a @click.stop="paintExpense_pageAdd(row)" title="新增">
                    <a-icon type="plus-circle" />
                  </a>
                  <a @click.stop="paintExpense_pageDelete(row)" title="删除">
                    <a-icon type="delete" />
                  </a>
                </div>
              </template>
            </vxe-column>
            <vxe-column type="seq" title="序号" width="48"></vxe-column>
            <vxe-column field="item_name" title="项目" width="220" :edit-render="{ name: '$input' }"></vxe-column>
            <vxe-column field="amount_formula" title="金额(公式)" width="220"
              :edit-render="{ name: 'EditExpressions' }"></vxe-column>

          </vxe-table>



        </a-collapse-panel>
      </a-collapse>
    </div>

    <vxe-modal show-footer class-name="vxe-table--ignore-clear edit-popup-box" title="选择数据" width="800" height="600"
      v-model="modalVisible" @confirm="confirmSelectScheme">
      <template #default>
        <vxe-grid :keyboard-config="{ isArrow: true }" auto-resize height="400" ref="scheme_grid"
          :row-config="{ isCurrent: true, isHover: true }" :loading="scheme_loading" :pager-config="scheme_tablePage"
          :data="scheme_tableData" :columns="scheme_tableColumn" @page-change="scheme_pageChangeEvent">
        </vxe-grid>
      </template>
    </vxe-modal>

  </div>
</template>

<script>
import BASE_URL from '@/services/Middle/bathroom/BathroomScheme/api.js';
const settings = require('../../basic/settings.js');

import Vue from 'vue'
import VXETable from 'vxe-table'
import EditExpressions from '../../basic/EditExpressions.vue'
Vue.component(EditExpressions.name, EditExpressions)
// 创建一个下拉表格渲染
VXETable.renderer.add('EditExpressions', {
  autofocus: '.vxe-input--inner',
  renderEdit(h, renderOpts, params) {
    return <edit-expressions params={params}></edit-expressions>
  }
})

export default {

  name: 'BathroomSchemeUpdate',
  i18n: require('./i18n'),
  components: {},
  props: {
    pageMode: {
      type: String,
      default: "edit"
    },
    dataId: {
    }

  },
  data() {

    // 页面数据变量
    var pageData = {
      // 当前项目名称
      currentConfigName: "",
      // 当前项目ID
      currentBeid: 0,
      settignsValues: {},
      groupbox1_activeKey: ["1", "2"],
      groupbox2_activeKey: [],
      groupbox3_activeKey: [],
      isReadonly: false,

      fittings_detailsData: [],


      parts_detailsData: [],


      modalVisible: false,
      scheme_loading: false, // 加载中
      scheme_tableData: [], // 表格数据
      scheme_tableColumn: [ // 表格列
        { field: 'type', sortable: true, title: '类型', params: settings.options_schemeType, formatter: 'formatEnum' }, // 类型:1.主柜,2.抽屉
        { field: 'name', sortable: true, title: '设计方案名称' }, // 设计方案名称
      ],
      scheme_tablePage: { // 表格分页
        total: 0, // 总数
        currentPage: 1, // 当前页
        pageSize: 100 // 每页显示条数
      },


      editorFittings: {
        dataUrl: `${BASE_URL.BASE_URL}/BathroomFittings/v1/bathroom/fittings/list`,
        listdataFieldName: 'BathroomFittings',
        columns: [
          { field: 'name', title: '名称' },
          { field: 'remark', title: '备注' }
        ],
        placeholder: "请输入名称",
        searchFieldNames: ['name'],
        textField: 'name'
      },
      editorMaterial: {
        dataUrl: `${BASE_URL.BASE_URL}/BathroomMaterial/v1/bathroom/material/list`,
        listdataFieldName: 'BathroomMaterial',
        columns: [
          { field: 'name', title: '名称' },
          { field: 'remark', title: '备注' }
        ],
        placeholder: "请输入名称",
        searchFieldNames: ['name'],
        textField: 'name'
      },

      editorMaterial2: {
        dataUrl: `${BASE_URL.BASE_URL}/BathroomMaterial/v1/bathroom/material/list`,
        listdataFieldName: 'BathroomMaterial',
        columns: [
          { field: 'name', title: '名称' },
          { field: 'remark', title: '备注' }
        ],
        placeholder: "请输入名称",
        searchFieldNames: ['name'],
        extendData: [{ id: '封边条', name: '封边条' }],
        textField: 'name'
      },
      editorBanding: {
        dataUrl: `${BASE_URL.BASE_URL}/BathroomBanding/v1/bathroom/banding/list`,
        listdataFieldName: 'BathroomBanding',
        columns: [
          { field: 'name', title: '名称' },
          { field: 'remark', title: '备注' }
        ],
        placeholder: "请输入名称",
        searchFieldNames: ['name'],
        textField: 'name'
      },
      editorParts: {
        dataUrl: `${BASE_URL.BASE_URL}/BathroomParts/v1/bathroom/parts/list`,
        listdataFieldName: 'BathroomParts',
        columns: [
          { field: 'name', title: '名称' },
          { field: 'remark', title: '备注' }
        ],
        placeholder: "请输入名称",
        searchFieldNames: ['name'],
        textField: 'name'
      },
      editorPackaging: {
        dataUrl: `${BASE_URL.BASE_URL}/BathroomPackaging/v1/bathroom/packaging/list`,
        listdataFieldName: 'BathroomPackaging',
        columns: [
          { field: 'name', title: '名称' },
          { field: 'remark', title: '备注' }
        ],
        placeholder: "请输入名称",
        searchFieldNames: ['name'],
        textField: 'name'
      },
      editorLabor: {
        dataUrl: `${BASE_URL.BASE_URL}/BathroomLabor/v1/bathroom/labor/list`,
        listdataFieldName: 'BathroomLabor',
        columns: [
          { field: 'name', title: '名称' },
          { field: 'remark', title: '备注' }
        ],
        placeholder: "请输入名称",
        searchFieldNames: ['name'],
        textField: 'name'
      },




      packaging_detailsData: [],


      material_detailsData: [],
      labor_detailsData: [],
      paintMaterial_detailsData: [],
      paintLabor_detailsData: [],

      bathroomMaterial_list: [],//材料的数据
      moreExpressionsList_material_height: [],//材料的厚度 变量列表 
      moreExpressionsList_fittings: [],

      expense_detailsData: [ // 其他费用
        {
          item_name: "材料小计", amount_formula: "{免漆材料总费用}+{配件总费用}+{包装总费用}"
        },
        {
          item_name: "人工费", amount_formula: "{免漆人工总费用}"
        },
        {
          item_name: "抽屉费用", amount_formula: "{免漆抽屉总费用}"
        },

        {
          item_name: "制，造，费，用", amount_formula: "({免漆材料总费用}+{配件总费用}+{包装总费用} + {免漆人工总费用}+{免漆抽屉总费用})*0.22"
        }
      ],
      paintExpense_detailsData: [ // 油漆费用结算
        {
          item_name: "材料小计", amount_formula: "{油漆材料总费用}+{配件总费用}+{包装总费用}"
        },
        {
          item_name: "人工费", amount_formula: "{油漆人工总费用}"
        },

        {
          item_name: "抽屉费用", amount_formula: "{油漆抽屉总费用}"
        },
        {
          item_name: "制，造，费，用", amount_formula: "({油漆材料总费用}+{配件总费用}+{包装总费用} + {油漆人工总费用}+{油漆抽屉总费用})*0.22"
        }

      ],

      uploadDefaultImg: null,
      detailDataFieldName: "bathroom_scheme",

      actions: {

        // =============================== 接口地址 自动生成 Start ===============================
        BathroomSchemeList: `${BASE_URL.BASE_URL}/BathroomScheme/v1/bathroom/scheme/list`, // 设计方案列表
        BathroomSchemeDetail: `${BASE_URL.BASE_URL}/BathroomScheme/v1/bathroom/scheme/detail`, // 设计方案详情
        BathroomSchemeCreate: `${BASE_URL.BASE_URL}/BathroomScheme/v1/bathroom/scheme/create`, // 创建设计方案
        BathroomSchemeUpdate: `${BASE_URL.BASE_URL}/BathroomScheme/v1/bathroom/scheme/update`, // 更新设计方案
        BathroomSchemeDelete: `${BASE_URL.BASE_URL}/BathroomScheme/v1/bathroom/scheme/detele`, // 删除设计方案
        BathroomSchemeBatchDelete: `${BASE_URL.BASE_URL}/BathroomScheme/v1/bathroom/scheme/batchDelete`, // 批量删除设计方案
        BathroomSchemeBatchUpdate: `${BASE_URL.BASE_URL}/BathroomScheme/v1/bathroom/scheme/batchUpdate`, // 批量更新设计方案
        BathroomSchemeBatchCreate: `${BASE_URL.BASE_URL}/BathroomScheme/v1/bathroom/scheme/batchCreate`, // 批量创建设计方案
        BathroomSchemeExportExcel: `${BASE_URL.BASE_URL}/BathroomScheme/v1/bathroom/scheme/export/excel`, // 导出设计方案数据到EXCEL
        BathroomSchemeImportExcel: `${BASE_URL.BASE_URL}/BathroomScheme/v1/bathroom/scheme/import/excel`, // 批量导入EXCEL设计方案数据
        BathroomSchemeFittingsList: `${BASE_URL.BASE_URL}/BathroomScheme/v1/bathroom/scheme/fittings/list`, // 报价单部件列表
        BathroomSchemeFittingsDetail: `${BASE_URL.BASE_URL}/BathroomScheme/v1/bathroom/scheme/fittings/detail`, // 报价单部件详情
        BathroomSchemeFittingsCreate: `${BASE_URL.BASE_URL}/BathroomScheme/v1/bathroom/scheme/fittings/create`, // 创建报价单部件
        BathroomSchemeFittingsUpdate: `${BASE_URL.BASE_URL}/BathroomScheme/v1/bathroom/scheme/fittings/update`, // 更新报价单部件
        BathroomSchemeFittingsDelete: `${BASE_URL.BASE_URL}/BathroomScheme/v1/bathroom/scheme/fittings/detele`, // 删除报价单部件
        BathroomSchemeFittingsBatchDelete: `${BASE_URL.BASE_URL}/BathroomScheme/v1/bathroom/scheme/fittings/batchDelete`, // 批量删除报价单部件
        BathroomSchemeFittingsBatchUpdate: `${BASE_URL.BASE_URL}/BathroomScheme/v1/bathroom/scheme/fittings/batchUpdate`, // 批量更新报价单部件
        BathroomSchemeFittingsBatchCreate: `${BASE_URL.BASE_URL}/BathroomScheme/v1/bathroom/scheme/fittings/batchCreate`, // 批量创建报价单部件
        BathroomSchemeFittingsExportExcel: `${BASE_URL.BASE_URL}/BathroomScheme/v1/bathroom/scheme/fittings/export/excel`, // 导出报价单部件数据到EXCEL
        BathroomSchemeFittingsImportExcel: `${BASE_URL.BASE_URL}/BathroomScheme/v1/bathroom/scheme/fittings/import/excel`, // 批量导入EXCEL报价单部件数据
        BathroomSchemePartsList: `${BASE_URL.BASE_URL}/BathroomScheme/v1/bathroom/scheme/parts/list`, // 报价单配件列表
        BathroomSchemePartsDetail: `${BASE_URL.BASE_URL}/BathroomScheme/v1/bathroom/scheme/parts/detail`, // 报价单配件详情
        BathroomSchemePartsCreate: `${BASE_URL.BASE_URL}/BathroomScheme/v1/bathroom/scheme/parts/create`, // 创建报价单配件
        BathroomSchemePartsUpdate: `${BASE_URL.BASE_URL}/BathroomScheme/v1/bathroom/scheme/parts/update`, // 更新报价单配件
        BathroomSchemePartsDelete: `${BASE_URL.BASE_URL}/BathroomScheme/v1/bathroom/scheme/parts/detele`, // 删除报价单配件
        BathroomSchemePartsBatchDelete: `${BASE_URL.BASE_URL}/BathroomScheme/v1/bathroom/scheme/parts/batchDelete`, // 批量删除报价单配件
        BathroomSchemePartsBatchUpdate: `${BASE_URL.BASE_URL}/BathroomScheme/v1/bathroom/scheme/parts/batchUpdate`, // 批量更新报价单配件
        BathroomSchemePartsBatchCreate: `${BASE_URL.BASE_URL}/BathroomScheme/v1/bathroom/scheme/parts/batchCreate`, // 批量创建报价单配件
        BathroomSchemePartsExportExcel: `${BASE_URL.BASE_URL}/BathroomScheme/v1/bathroom/scheme/parts/export/excel`, // 导出报价单配件数据到EXCEL
        BathroomSchemePartsImportExcel: `${BASE_URL.BASE_URL}/BathroomScheme/v1/bathroom/scheme/parts/import/excel`, // 批量导入EXCEL报价单配件数据
        BathroomSchemeMaterialList: `${BASE_URL.BASE_URL}/BathroomScheme/v1/bathroom/scheme/material/list`, // 报价单材料列表
        BathroomSchemeMaterialDetail: `${BASE_URL.BASE_URL}/BathroomScheme/v1/bathroom/scheme/material/detail`, // 报价单材料详情
        BathroomSchemeMaterialCreate: `${BASE_URL.BASE_URL}/BathroomScheme/v1/bathroom/scheme/material/create`, // 创建报价单材料
        BathroomSchemeMaterialUpdate: `${BASE_URL.BASE_URL}/BathroomScheme/v1/bathroom/scheme/material/update`, // 更新报价单材料
        BathroomSchemeMaterialDelete: `${BASE_URL.BASE_URL}/BathroomScheme/v1/bathroom/scheme/material/detele`, // 删除报价单材料
        BathroomSchemeMaterialBatchDelete: `${BASE_URL.BASE_URL}/BathroomScheme/v1/bathroom/scheme/material/batchDelete`, // 批量删除报价单材料
        BathroomSchemeMaterialBatchUpdate: `${BASE_URL.BASE_URL}/BathroomScheme/v1/bathroom/scheme/material/batchUpdate`, // 批量更新报价单材料
        BathroomSchemeMaterialBatchCreate: `${BASE_URL.BASE_URL}/BathroomScheme/v1/bathroom/scheme/material/batchCreate`, // 批量创建报价单材料
        BathroomSchemeMaterialExportExcel: `${BASE_URL.BASE_URL}/BathroomScheme/v1/bathroom/scheme/material/export/excel`, // 导出报价单材料数据到EXCEL
        BathroomSchemeMaterialImportExcel: `${BASE_URL.BASE_URL}/BathroomScheme/v1/bathroom/scheme/material/import/excel`, // 批量导入EXCEL报价单材料数据
        BathroomSchemeLaborList: `${BASE_URL.BASE_URL}/BathroomScheme/v1/bathroom/scheme/labor/list`, // 报价单人工费用列表
        BathroomSchemeLaborDetail: `${BASE_URL.BASE_URL}/BathroomScheme/v1/bathroom/scheme/labor/detail`, // 报价单人工费用详情
        BathroomSchemeLaborCreate: `${BASE_URL.BASE_URL}/BathroomScheme/v1/bathroom/scheme/labor/create`, // 创建报价单人工费用
        BathroomSchemeLaborUpdate: `${BASE_URL.BASE_URL}/BathroomScheme/v1/bathroom/scheme/labor/update`, // 更新报价单人工费用
        BathroomSchemeLaborDelete: `${BASE_URL.BASE_URL}/BathroomScheme/v1/bathroom/scheme/labor/detele`, // 删除报价单人工费用
        BathroomSchemeLaborBatchDelete: `${BASE_URL.BASE_URL}/BathroomScheme/v1/bathroom/scheme/labor/batchDelete`, // 批量删除报价单人工费用
        BathroomSchemeLaborBatchUpdate: `${BASE_URL.BASE_URL}/BathroomScheme/v1/bathroom/scheme/labor/batchUpdate`, // 批量更新报价单人工费用
        BathroomSchemeLaborBatchCreate: `${BASE_URL.BASE_URL}/BathroomScheme/v1/bathroom/scheme/labor/batchCreate`, // 批量创建报价单人工费用
        BathroomSchemeLaborExportExcel: `${BASE_URL.BASE_URL}/BathroomScheme/v1/bathroom/scheme/labor/export/excel`, // 导出报价单人工费用数据到EXCEL
        BathroomSchemeLaborImportExcel: `${BASE_URL.BASE_URL}/BathroomScheme/v1/bathroom/scheme/labor/import/excel`, // 批量导入EXCEL报价单人工费用数据
        BathroomSchemeProcessList: `${BASE_URL.BASE_URL}/BathroomScheme/v1/bathroom/scheme/process/list`, // 报价单工序列表
        BathroomSchemeProcessDetail: `${BASE_URL.BASE_URL}/BathroomScheme/v1/bathroom/scheme/process/detail`, // 报价单工序详情
        BathroomSchemeProcessCreate: `${BASE_URL.BASE_URL}/BathroomScheme/v1/bathroom/scheme/process/create`, // 创建报价单工序
        BathroomSchemeProcessUpdate: `${BASE_URL.BASE_URL}/BathroomScheme/v1/bathroom/scheme/process/update`, // 更新报价单工序
        BathroomSchemeProcessDelete: `${BASE_URL.BASE_URL}/BathroomScheme/v1/bathroom/scheme/process/detele`, // 删除报价单工序
        BathroomSchemeProcessBatchDelete: `${BASE_URL.BASE_URL}/BathroomScheme/v1/bathroom/scheme/process/batchDelete`, // 批量删除报价单工序
        BathroomSchemeProcessBatchUpdate: `${BASE_URL.BASE_URL}/BathroomScheme/v1/bathroom/scheme/process/batchUpdate`, // 批量更新报价单工序
        BathroomSchemeProcessBatchCreate: `${BASE_URL.BASE_URL}/BathroomScheme/v1/bathroom/scheme/process/batchCreate`, // 批量创建报价单工序
        BathroomSchemeProcessExportExcel: `${BASE_URL.BASE_URL}/BathroomScheme/v1/bathroom/scheme/process/export/excel`, // 导出报价单工序数据到EXCEL
        BathroomSchemeProcessImportExcel: `${BASE_URL.BASE_URL}/BathroomScheme/v1/bathroom/scheme/process/import/excel`, // 批量导入EXCEL报价单工序数据
        BathroomSchemePackagingList: `${BASE_URL.BASE_URL}/BathroomScheme/v1/bathroom/scheme/packaging/list`, // 包装材料列表
        BathroomSchemePackagingDetail: `${BASE_URL.BASE_URL}/BathroomScheme/v1/bathroom/scheme/packaging/detail`, // 包装材料详情
        BathroomSchemePackagingCreate: `${BASE_URL.BASE_URL}/BathroomScheme/v1/bathroom/scheme/packaging/create`, // 创建包装材料
        BathroomSchemePackagingUpdate: `${BASE_URL.BASE_URL}/BathroomScheme/v1/bathroom/scheme/packaging/update`, // 更新包装材料
        BathroomSchemePackagingDelete: `${BASE_URL.BASE_URL}/BathroomScheme/v1/bathroom/scheme/packaging/detele`, // 删除包装材料
        BathroomSchemePackagingBatchDelete: `${BASE_URL.BASE_URL}/BathroomScheme/v1/bathroom/scheme/packaging/batchDelete`, // 批量删除包装材料
        BathroomSchemePackagingBatchUpdate: `${BASE_URL.BASE_URL}/BathroomScheme/v1/bathroom/scheme/packaging/batchUpdate`, // 批量更新包装材料
        BathroomSchemePackagingBatchCreate: `${BASE_URL.BASE_URL}/BathroomScheme/v1/bathroom/scheme/packaging/batchCreate`, // 批量创建包装材料
        BathroomSchemePackagingExportExcel: `${BASE_URL.BASE_URL}/BathroomScheme/v1/bathroom/scheme/packaging/export/excel`, // 导出包装材料数据到EXCEL
        BathroomSchemePackagingImportExcel: `${BASE_URL.BASE_URL}/BathroomScheme/v1/bathroom/scheme/packaging/import/excel`, // 批量导入EXCEL包装材料数据
        BathroomSchemeOutsourcingList: `${BASE_URL.BASE_URL}/BathroomScheme/v1/bathroom/scheme/outsourcing/list`, // 外购产品列表
        BathroomSchemeOutsourcingDetail: `${BASE_URL.BASE_URL}/BathroomScheme/v1/bathroom/scheme/outsourcing/detail`, // 外购产品详情
        BathroomSchemeOutsourcingCreate: `${BASE_URL.BASE_URL}/BathroomScheme/v1/bathroom/scheme/outsourcing/create`, // 创建外购产品
        BathroomSchemeOutsourcingUpdate: `${BASE_URL.BASE_URL}/BathroomScheme/v1/bathroom/scheme/outsourcing/update`, // 更新外购产品
        BathroomSchemeOutsourcingDelete: `${BASE_URL.BASE_URL}/BathroomScheme/v1/bathroom/scheme/outsourcing/detele`, // 删除外购产品
        BathroomSchemeOutsourcingBatchDelete: `${BASE_URL.BASE_URL}/BathroomScheme/v1/bathroom/scheme/outsourcing/batchDelete`, // 批量删除外购产品
        BathroomSchemeOutsourcingBatchUpdate: `${BASE_URL.BASE_URL}/BathroomScheme/v1/bathroom/scheme/outsourcing/batchUpdate`, // 批量更新外购产品
        BathroomSchemeOutsourcingBatchCreate: `${BASE_URL.BASE_URL}/BathroomScheme/v1/bathroom/scheme/outsourcing/batchCreate`, // 批量创建外购产品
        BathroomSchemeOutsourcingExportExcel: `${BASE_URL.BASE_URL}/BathroomScheme/v1/bathroom/scheme/outsourcing/export/excel`, // 导出外购产品数据到EXCEL
        BathroomSchemeOutsourcingImportExcel: `${BASE_URL.BASE_URL}/BathroomScheme/v1/bathroom/scheme/outsourcing/import/excel`, // 批量导入EXCEL外购产品数据
        BathroomSchemePaintList: `${BASE_URL.BASE_URL}/BathroomScheme/v1/bathroom/scheme/paint/list`, // 油漆列表
        BathroomSchemePaintDetail: `${BASE_URL.BASE_URL}/BathroomScheme/v1/bathroom/scheme/paint/detail`, // 油漆详情
        BathroomSchemePaintCreate: `${BASE_URL.BASE_URL}/BathroomScheme/v1/bathroom/scheme/paint/create`, // 创建油漆
        BathroomSchemePaintUpdate: `${BASE_URL.BASE_URL}/BathroomScheme/v1/bathroom/scheme/paint/update`, // 更新油漆
        BathroomSchemePaintDelete: `${BASE_URL.BASE_URL}/BathroomScheme/v1/bathroom/scheme/paint/detele`, // 删除油漆
        BathroomSchemePaintBatchDelete: `${BASE_URL.BASE_URL}/BathroomScheme/v1/bathroom/scheme/paint/batchDelete`, // 批量删除油漆
        BathroomSchemePaintBatchUpdate: `${BASE_URL.BASE_URL}/BathroomScheme/v1/bathroom/scheme/paint/batchUpdate`, // 批量更新油漆
        BathroomSchemePaintBatchCreate: `${BASE_URL.BASE_URL}/BathroomScheme/v1/bathroom/scheme/paint/batchCreate`, // 批量创建油漆
        BathroomSchemePaintExportExcel: `${BASE_URL.BASE_URL}/BathroomScheme/v1/bathroom/scheme/paint/export/excel`, // 导出油漆数据到EXCEL
        BathroomSchemePaintImportExcel: `${BASE_URL.BASE_URL}/BathroomScheme/v1/bathroom/scheme/paint/import/excel`, // 批量导入EXCEL油漆数据

        // =============================== 接口地址 自动生成 End ===============================
      },

      keyName: 'id',
      // 是否编辑模式
      isEdit: false,
      // 表单数据
      formOptions: {
        data: {
          // =============================== 表单数据 自动生成 Start ===============================

          id: 0,
          type: "",
          code: "",
          name: "",
          model: "",
          description: "",
          image: "",
          BathroomSchemeFittings: "",
          BathroomSchemeLabor: "",
          BathroomSchemeMaterial: "",
          BathroomSchemeOutsourcing: "",
          BathroomSchemePackaging: "",
          BathroomSchemeProcess: "",
          BathroomSchemeParts: "",
          BathroomSchemePaint: "",
          create_uid: 0,
          update_uid: 0,
          create_time: new Date(2100, 1, 1).getTime() / 10000,
          update_time: new Date(2100, 1, 1).getTime() / 10000,

          // =============================== 表单数据 自动生成 End ===============================
        },
        // 标题宽度
        titleWidth: 160,
        // 标题对齐方式
        titleAlign: 'right',

        // 表单校验规则
        rules: {
          // =============================== 表单校验 自动生成 Start ===============================


          name: [
            { required: true, message: '请输入设计方案名称' }
          ]

          // =============================== 表单校验 自动生成 End ===============================
        },
        // 表单项
        items: [

          {
            title: '左侧',
            span: 16,
            children: [
              { field: 'name', title: '设计方案名称', span: 24, itemRender: { name: '$input' } },
              { field: 'code', title: '编码', span: 24, itemRender: { name: '$input' } },
              { field: 'model', title: '型号', span: 24, itemRender: { name: '$input' } },
              { field: 'type', title: '类型', span: 24, itemRender: { name: '$radio', options: settings.options_schemeType } },


            ]
          },
          {
            title: '右侧',
            span: 8,
            children: [
              {
                field: 'image', span: 24, itemRender: {
                  name: 'MkFormCropper', props: {
                  }
                }
              },
            ]
          },
          { field: 'description', title: '描述', span: 24, itemRender: { name: '$input' } },

        ]
      },
      // 新增模式表单项
      addModeItems: [

      ],


    };

    pageData.actions.get = pageData.actions.BathroomSchemeDetail;
    pageData.actions.create = pageData.actions.BathroomSchemeCreate;
    pageData.actions.update = pageData.actions.BathroomSchemeUpdate;

    // 合并表单数据及配置
    pageData.formOptions = Object.assign({}, this.$mk.config.defaults.formOptions, pageData.formOptions);

    return pageData;
  },

  computed: {
    desc() {
      return this.$t('editPageDesc')
    }
  },

  mounted() {

  },
  created() {
    this.loadSettings();
    // 获取路由的id参数
    let dataId = this.getDataId();

    // 如果有id参数，说明是编辑模式
    if (dataId) {
      const json = `{"id":${dataId}}`;
      this.$mk.post({
        url: this.actions.get,
        loading: "加载中...",
        data: json,
        config: {
          headers: {
            'Content-Type': 'application/json'
          }
        }
      }).then(a => {
        // =============================== 时间字段判断 自动生成 Start ===============================

        if (a.data[this.detailDataFieldName].create_time) {
          a.data[this.detailDataFieldName].create_time = new Date(a.data[this.detailDataFieldName].create_time * 1000);
        }
        if (a.data[this.detailDataFieldName].update_time) {
          a.data[this.detailDataFieldName].update_time = new Date(a.data[this.detailDataFieldName].update_time * 1000);
        }
        // =============================== 时间字段判断 自动生成 End ===============================


        let data = a.data[this.detailDataFieldName]

        this.formOptions.data = data;

        this.fittings_detailsData = JSON.parse(data.fittingsList || "[]");
        console.log(this.fittings_detailsData)
        this.parts_detailsData = JSON.parse(data.partsList || "[]");
        this.packaging_detailsData = JSON.parse(data.packagingList || "[]");


        this.labor_detailsData = JSON.parse(data.laborList || "[]");
        this.material_detailsData = JSON.parse(data.materialList || "[]");
        this.paintLabor_detailsData = JSON.parse(data.paintLaborList || "[]");
        this.paintMaterial_detailsData = JSON.parse(data.paintMaterialList || "[]");


        this.expense_detailsData = JSON.parse(data.expense_list || "[]"); // 其他费用
        this.paintExpense_detailsData = JSON.parse(data.paint_expenseList || "[]"); // 油漆费用结算

        this.materialHeightInit();
        this.fittingsListInit();
        this.detailDataInit();

      }).catch((a) => {
        this.$mk.error(a.data.msg);
      });

      this.isEdit = true;
    } else {
      // 如果没有id参数，说明是新增模式
      this.addModeItems.forEach(item => {
        this.formOptions.items.push(item);
      });
      this.detailDataInit();


    }

  },

  beforeDestroy() {
  },
  // 函数
  methods: {


    fittingsListInit() { // 获取部件数据

      this.$mk.post({ // 获取材料列表
        url: `${BASE_URL.BASE_URL}//BathroomFittings/v1/bathroom/fittings/list`,
        data: { "page": 1, "limit": 100, "order_bys": [], "search_rules": [] }
      }).then(a => {

        this.fittings_list = a.data.BathroomFittings || [];
        this.moreExpressionsList_fittings = [];


        this.fittings_list.forEach(o => {
          if (o.IsShowExpression) {
            this.moreExpressionsList_fittings.push(this.formatName(o.name) + "的长");
            this.moreExpressionsList_fittings.push(this.formatName(o.name) + "的宽");
            this.moreExpressionsList_fittings.push(this.formatName(o.name) + "的厚");
          }


        });

      });
    },
    materialHeightInit() {

      this.$mk.post({
        url: `${BASE_URL.BASE_URL}/BathroomMaterial/v1/bathroom/material/list`,
        data: { "page": 1, "limit": 100, "order_bys": [], "search_rules": [] }
      }).then(a => {


        this.bathroomMaterial_list = a.data.BathroomMaterial || [];
        this.moreExpressionsList_material_height = [];

        this.bathroomMaterial_list.forEach(o => {
          this.fittings_detailsData.forEach(item => {
            if (item.material && item.material[0] && item.material[0].toString() == o.id.toString()) {

              item.material_default_height = o.spec || "15";
            }
          });

        });

        this.bathroomMaterial_list.forEach(o => { // 遍历材料列表

          this.moreExpressionsList_material_height.push(this.formatName(o.name) + "的厚度");

        });


        console.log(this.fittings_detailsData)

      });
    },

    getMoreExpressionsList() {
      return [...this.moreExpressionsList_material_height, ...this.moreExpressionsList_fittings]
    },

    loadSettings() {

      this.$mk.post({
        url: `${BASE_URL.BASE_URL}/BathroomScheme/v1/settings/list`,
        data: {
        }
      }).then(a => {

        let data = {};
        let getName = (info) => {
          for (let name in info) {
            return name;
          }
          return null;
        }
        a.data.settings.forEach(o => {
          let name = getName(o.setting);
          if (!name) return;
          data[name] = o.setting[name];
        });

        this.settignsValues = data;
      }).catch((a) => {
        this.$mk.error(a.data.msg);
      });
    },



    detailDataInit() {
      for (let i = this.fittings_detailsData.length; i < settings.table_min_count; i++) {
        this.fittings_detailsData.push({});
      }


      for (let i = this.parts_detailsData.length; i < settings.table_min_count; i++) {
        this.parts_detailsData.push({});
      }

      for (let i = this.packaging_detailsData.length; i < settings.table_min_count; i++) {
        this.packaging_detailsData.push({});
      }


      for (let i = this.material_detailsData.length; i < settings.table_min_count; i++) {
        this.material_detailsData.push({});
      }
      for (let i = this.labor_detailsData.length; i < settings.table_min_count; i++) {
        this.labor_detailsData.push({});
      }
      for (let i = this.paintMaterial_detailsData.length; i < settings.table_min_count; i++) {
        this.paintMaterial_detailsData.push({});
      }
      for (let i = this.paintLabor_detailsData.length; i < settings.table_min_count; i++) {
        this.paintLabor_detailsData.push({});
      }


      for (let i = this.expense_detailsData.length; i < settings.table_min_count; i++) { // 遍历费用结算列表
        this.expense_detailsData.push({});
      }
      for (let i = this.paintExpense_detailsData.length; i < settings.table_min_count; i++) { // 遍历油漆费用结算列表
        this.paintExpense_detailsData.push({});
      }

    },
    // 获取路由的id参数
    getDataId() {
      let dataId = this.dataId;
      if (this.$route.params.id) {
        dataId = this.$route.params.id;
      }
      if (!dataId) {
        dataId = 0;
      }
      return dataId;
    },



    // 返回
    back() {
      // 如果是新增模式，关闭当前页面
      if (!this.isEdit) {
        this.$closePage({
          closeRoute: "/BathroomScheme/BathroomSchemeAdd"
        });
      } else {
        // 如果是编辑模式，关闭当前页面
        this.$closePage({
          closeRoute: "/BathroomScheme/BathroomSchemeUpdate"
        });
      }
      // 打开列表页面
      this.$openPage('/BathroomScheme/BathroomSchemeList')
    },


    fittings_onPulldownSelected({ row, selectedData, column }) {
      console.log(row, selectedData, column);
      if (column.field == "banding") {
        if (selectedData.formula) {
          row.seal_formula = selectedData.formula;
        }

      }



      if (column.field == "paint_material") {
        this.resetPaintMaterial();
      }
      if (column.field == "material") {
        this.resetMaterial();

        if (selectedData.spec) {
          row.material_default_height = selectedData.spec;
        }

      }

      if (!row.height_formula) {
        row.height_formula = '{板材的厚}';
      }

      if (!row.rate_materials && this.settignsValues.Main_material_utilization_rate) {
        row.rate_materials = this.settignsValues.Main_material_utilization_rate;
      }
      if (!row.paint_number && this.settignsValues.Default_rate_of_paint_surface) {
        row.paint_number = this.settignsValues.Default_rate_of_paint_surface;
      }
      if (!row.board_length_formula) {
        row.board_length_formula = this.settignsValues.Default_board_length_formula || '{板材的长}*{板材的宽}*{部件的数量}/{主材利用率}/1000000/2.96';
      }

      if (!row.paint_area_formula) {
        row.paint_area_formula = this.settignsValues.Default_paint_area_formula || '{板材的长}*{板材的宽}*{部件的数量}*{油漆面}/1000000';
      }
    },
    fittings_onPopupSelected({ rows, name, params }) {
      console.log(rows, name, params);
    },
    fittings_beforeEditMethod({ column, row }) {
      console.log(row, column);
      return true;
    },
    fittings_afterEditEvent({ column, row }) {
      console.log(row, column);


    },
    fittings_beforeEditEvent({ column, row }) {
      console.log(row, column);
    },
    fittings_pageAdd(row) {
      const $table = this.$refs.fittings_xTable
      const record = {
      }
      if (row) {

        this.fittings_detailsData.splice($table.getRowSeq(row), 0, record);
      } else {
        this.fittings_detailsData.push(record)
      }
    },
    fittings_pageDelete(row) {
      const $table = this.$refs.fittings_xTable;
      this.fittings_detailsData.splice($table.getRowSeq(row) - 1, 1);
      this.resetMaterial();
      this.resetPaintMaterial();
    },



    parts_onPulldownSelected({ selectedData, row }) {
      console.log(row, selectedData);
      if (selectedData.spec) {
        row.spec = selectedData.spec;

      }
      if (selectedData.price) {
        row.price = selectedData.price;

      }
    },
    parts_onPopupSelected({ rows, name, params }) {
      console.log(rows, name, params);
    },
    parts_beforeEditMethod({ column, row }) {
      console.log(row, column);
      return true;
    },
    parts_afterEditEvent({ column, row }) {

      if (column.field == "price" || column.field == "quantity") {
        row.amount = parseFloat(row.quantity || 0) * parseFloat(row.price || 0)
      }
    },
    parts_beforeEditEvent({ column, row }) {
      console.log(row, column);
    },
    parts_pageAdd(row) {
      const $table = this.$refs.parts_xTable
      const record = {
      }
      if (row) {

        this.parts_detailsData.splice($table.getRowSeq(row), 0, record);
      } else {
        this.parts_detailsData.push(record)
      }
    },
    parts_pageDelete(row) {
      const $table = this.$refs.parts_xTable;
      this.parts_detailsData.splice($table.getRowSeq(row) - 1, 1);
    },



    // 包装下拉选择事件
    packaging_onPulldownSelected({ row, name, column, params, selectedData }) {
      console.log(row, name, params);

      if (column.field == "packaging") {

        if (selectedData && selectedData.default_quantity) {
          row.quantity = selectedData.default_quantity; // 设置默认数量

          row.quantity_formula = selectedData.default_quantity;
        }
      }

    },
    packaging_onPopupSelected({ rows, name, params }) {
      console.log(rows, name, params);
    },
    packaging_beforeEditMethod({ column, row }) {
      console.log(row, column);
      return true;
    },
    packaging_afterEditEvent({ column, row }) {
      console.log(row, column);
    },
    packaging_beforeEditEvent({ column, row }) {
      console.log(row, column);
    },
    packaging_pageAdd(row) {
      const $table = this.$refs.packaging_xTable
      const record = {
      }
      if (row) {

        this.packaging_detailsData.splice($table.getRowSeq(row), 0, record);
      } else {
        this.packaging_detailsData.push(record)
      }
    },
    packaging_pageDelete(row) {
      const $table = this.$refs.packaging_xTable;

      this.packaging_detailsData.splice($table.getRowSeq(row) - 1, 1);
    },



    material_onPulldownSelected({ row, name, params }) {
      console.log(row, name, params);

    },
    material_onPopupSelected({ rows, name, params }) {
      console.log(rows, name, params);
    },
    material_beforeEditMethod({ column, row }) {
      console.log(row, column);

      return true;
    },
    material_afterEditEvent({ column, row }) {
      console.log(row, column);
    },
    material_pageAdd(row) {
      const $table = this.$refs.material_xTable
      const record = {

      }
      if (row) {

        this.material_detailsData.splice($table.getRowSeq(row), 0, record);
      } else {
        this.material_detailsData.push(record)
      }
    },
    material_pageDelete(row) {
      const $table = this.$refs.material_xTable;
      this.material_detailsData.splice($table.getRowSeq(row) - 1, 1);
    },



    labor_onPulldownSelected({ row, name, params }) {
      console.log(row, name, params);

    },
    labor_onPopupSelected({ rows, name, params }) {
      console.log(rows, name, params);
    },
    labor_beforeEditMethod({ column, row }) {
      console.log(row, column);
      return true;
    },
    labor_afterEditEvent({ column, row }) {
      console.log(row, column);
    },
    labor_beforeEditEvent({ column, row }) {
      console.log(row, column);
    },
    labor_pageAdd(row) {
      const $table = this.$refs.labor_xTable
      const record = {
      }
      if (row) {

        this.labor_detailsData.splice($table.getRowSeq(row), 0, record);
      } else {
        this.labor_detailsData.push(record)
      }
    },
    labor_pageDelete(row) {
      const $table = this.$refs.labor_xTable;
      this.labor_detailsData.splice($table.getRowSeq(row) - 1, 1);
    },



    // 油漆人工下拉选择事件
    expense_onPulldownSelected({ row, name, params }) {
      console.log(row, name, params);

    },
    // 油漆人工弹出选择事件
    expense_onPopupSelected({ rows, name, params }) {
      console.log(rows, name, params);
    },
    // 油漆人工编辑前事件
    expense_beforeEditMethod({ column, row }) {
      console.log(row, column);
      return true;
    },
    // 油漆人工编辑后事件
    expense_afterEditEvent({ column, row }) {
      console.log(row, column);
    },
    // 油漆人工编辑前事件
    expense_beforeEditEvent({ column, row }) {
      console.log(row, column);
    },
    // 油漆人工表格添加事件
    expense_pageAdd(row) {
      const $table = this.$refs.expense_xTable
      const record = {
      }
      if (row) {
        this.expense_detailsData.splice($table.getRowSeq(row), 0, record);
      } else {
        this.expense_detailsData.push(record)
      }
    },
    // 油漆人工表格删除事件
    expense_pageDelete(row) {
      const $table = this.$refs.expense_xTable;
      this.expense_detailsData.splice($table.getRowSeq(row) - 1, 1);
    },
    // 油漆人工表格添加事件
    expense_footerCellClassName({ columnIndex }) {
      if (columnIndex === 0) {
        return 'col-blue'
      }
    },
    expense_footerMethod({ columns }) {
      const sums = []
      columns.forEach((column, columnIndex) => {
        if (columnIndex === 0) {
          sums.push('')
        } else {
          let sumCell = ''
          switch (column.field) {
            case 'amount_formula':
              sumCell = parseFloat(this.formOptions.data.expense_total_amount || 0).toFixed(2)
              break
          }
          sums.push(sumCell)
        }
      })
      return [sums]
    },


    paintMaterial_onPulldownSelected({ row, name, params }) {
      console.log(row, name, params);

    },
    paintMaterial_onPopupSelected({ rows, name, params }) {
      console.log(rows, name, params);
    },
    paintMaterial_beforeEditMethod({ column, row }) {
      console.log(row, column);


      return true;
    },
    paintMaterial_afterEditEvent({ column, row }) {
      console.log(row, column);
    },
    paintMaterial_pageAdd(row) {
      const $table = this.$refs.paintMaterial_xTable
      const record = {

      }
      if (row) {

        this.paintMaterial_detailsData.splice($table.getRowSeq(row), 0, record);
      } else {
        this.paintMaterial_detailsData.push(record)
      }
    },
    paintMaterial_pageDelete(row) {
      const $table = this.$refs.paintMaterial_xTable;
      this.paintMaterial_detailsData.splice($table.getRowSeq(row) - 1, 1);
    },



    paintLabor_onPulldownSelected({ row, name, params }) {
      console.log(row, name, params);

    },
    paintLabor_onPopupSelected({ rows, name, params }) {
      console.log(rows, name, params);
    },
    paintLabor_beforeEditMethod({ column, row }) {
      console.log(row, column);
      return true;
    },
    paintLabor_afterEditEvent({ column, row }) {
      console.log(row, column);
    },
    paintLabor_beforeEditEvent({ column, row }) {
      console.log(row, column);
    },
    paintLabor_pageAdd(row) {
      const $table = this.$refs.paintLabor_xTable
      const record = {
      }
      if (row) {

        this.paintLabor_detailsData.splice($table.getRowSeq(row), 0, record);
      } else {
        this.paintLabor_detailsData.push(record)
      }
    },
    paintLabor_pageDelete(row) {
      const $table = this.$refs.paintLabor_xTable;
      this.paintLabor_detailsData.splice($table.getRowSeq(row) - 1, 1);
    },


    paintExpense_onPulldownSelected({ row, name, params }) {
      console.log(row, name, params);

    },
    paintExpense_onPopupSelected({ rows, name, params }) {
      console.log(rows, name, params);
    },
    paintExpense_beforeEditMethod({ column, row }) {
      console.log(row, column);
      return true;
    },
    paintExpense_afterEditEvent({ column, row }) {
      console.log(row, column);
    },
    paintExpense_beforeEditEvent({ column, row }) {
      console.log(row, column);
    },
    paintExpense_pageAdd(row) {
      const $table = this.$refs.paintExpense_xTable
      const record = {
      }
      if (row) {
        this.paintExpense_detailsData.splice($table.getRowSeq(row), 0, record);
      } else {
        this.paintExpense_detailsData.push(record)
      }
    },
    paintExpense_pageDelete(row) {
      const $table = this.$refs.paintExpense_xTable;
      this.paintExpense_detailsData.splice($table.getRowSeq(row) - 1, 1);
    },
    paintExpense_footerCellClassName({ columnIndex }) {
      if (columnIndex === 0) {
        return 'col-blue'
      }
    },
    paintExpense_footerMethod({ columns }) {
      const sums = []
      columns.forEach((column, columnIndex) => {
        if (columnIndex === 0) {
          sums.push('')
        } else {
          let sumCell = ''
          switch (column.field) {
            case 'amount_formula':
              sumCell = parseFloat(this.formOptions.data.paintExpense_total_amount || 0).toFixed(2)
              break
          }
          sums.push(sumCell)
        }
      })
      return [sums]
    },



    formatName(v) {
      return (v || "").replace("\r", "").replace("\n", "").replace("\t", "").replace(" ", "");

    },

    resetMaterial() {
      let material_items = [];

      this.fittings_detailsData.forEach(item => {

        if (item.material && item.material[0]) {

          if (material_items.filter(a => a && a[0] == item.material[0]).length == 0) {
            material_items.push(item.material);
          }

        }
      });

      let material_list = [];
      material_items.forEach(item => {

        let name = this.formatName(item[1]);
        let old = this.material_detailsData.filter(a => a.material && a.material[0] == item[0] ? true : false);
        let info = {
          isMain: true,
          material: item,
          quantity_formula: `{${name}的总用量}`,
          price: 0
        };
        if (old.length) {
          info.quantity_formula = `{${name}的总用量}`;
          info.price = old[0].price;
          info.amount_formula = old[0].amount_formula;
        }
        material_list.push(info)
      })


      var b1 = true;
      if (b1) {
        let info = {
          isBanding: true,
          material: ['封边条', '封边条'],
          quantity_formula: '',
          price: 0
        };
        let old = this.material_detailsData.filter(a => a.isBanding ? true : false);

        if (old.length) {
          info.quantity_formula = old[0].quantity_formula;
          info.amount_formula = old[0].amount_formula;
          info.price = old[0].price;
        }
        material_list.push(info)
      }


      let ds = [];
      this.material_detailsData.forEach(item => {
        if (item.isMain) return;
        if (item.isBanding) return;
        ds.push(item);
      });
      this.material_detailsData = [...material_list, ...ds];

    },



    resetPaintMaterial() {
      let material_items = [];

      this.fittings_detailsData.forEach(item => {

        if (item.paint_material && item.paint_material[0]) {

          if (material_items.filter(a => a && a[0] == item.paint_material[0]).length == 0) {
            material_items.push(item.paint_material);
          }

        }
      });

      let material_list = [];
      material_items.forEach(item => {
        let name = this.formatName(item[1]);
        let old = this.material_detailsData.filter(a => a.material && a.material[0] == item[0] ? true : false);
        let info = {
          isMain: true,
          material: item,
          quantity_formula: `{${name}的总用量}`,
          price: 0
        };
        if (old.length) {
          info.quantity_formula = `{${name}的总用量}`;
          info.price = old[0].price;
          info.amount_formula = old[0].amount_formula;
        }
        material_list.push(info)
      })


      var b1 = true;
      if (b1) {
        let info = {
          isBanding: true,
          material: ['封边条', '封边条'],
          quantity_formula: '',
          price: 0
        };
        let old = this.paintMaterial_detailsData.filter(a => a.isBanding ? true : false);

        if (old.length) {
          info.quantity_formula = old[0].quantity_formula;
          info.amount_formula = old[0].amount_formula;
          info.price = old[0].price;
        }
        material_list.push(info)
      }


      let ds = [];
      this.paintMaterial_detailsData.forEach(item => {
        if (item.isMain) return;
        if (item.isBanding) return;
        ds.push(item);
      });
      this.paintMaterial_detailsData = [...material_list, ...ds];

    },


    formatDetailsData(data) {

      if (!data) return;
      data.forEach(item => {
        delete item._X_ROW_KEY;
        if (!item.id) {
          item.id = settings.getGuid();
        }
      });
    },

    // 保存
    ok({ callback }) {

      let save = () => {


        // 如果是新增模式，提交新增接口 如果是编辑模式，提交编辑接口
        let action = !this.isEdit ? this.actions.create : this.actions.update;
        // 如果是新增模式，提交的数据中加入id 如果是编辑模式，提交的数据中不加入id
        let postdata = Object.assign({}, this.formOptions.data);
        // 如果是编辑模式
        if (this.isEdit) {
          // postdata = { BathroomScheme: postdata }
        }

        postdata.fittingsList = JSON.parse(JSON.stringify(this.fittings_detailsData));
        postdata.partsList = JSON.parse(JSON.stringify(this.parts_detailsData));
        postdata.packagingList = JSON.parse(JSON.stringify(this.packaging_detailsData));
        postdata.laborList = JSON.parse(JSON.stringify(this.labor_detailsData));
        postdata.materialList = JSON.parse(JSON.stringify(this.material_detailsData));
        postdata.paintLaborList = JSON.parse(JSON.stringify(this.paintLabor_detailsData));
        postdata.paintMaterialList = JSON.parse(JSON.stringify(this.paintMaterial_detailsData));

        postdata.expense_list = JSON.parse(JSON.stringify(this.expense_detailsData));
        postdata.paint_expenseList = JSON.parse(JSON.stringify(this.paintExpense_detailsData));


        postdata.fittingsList = postdata.fittingsList.filter(item => item.fittings && item.fittings[1] ? true : false);
        postdata.partsList = postdata.partsList.filter(item => item.parts && item.parts[1] ? true : false);
        postdata.packagingList = postdata.packagingList.filter(item => item.packaging && item.packaging[1] ? true : false);
        postdata.laborList = postdata.laborList.filter(item => item.labor && item.labor[1] ? true : false);
        postdata.materialList = postdata.materialList.filter(item => item.material && item.material[1] ? true : false);


        postdata.paintLaborList = postdata.paintLaborList.filter(item => item.labor && item.labor[1] ? true : false);
        postdata.paintMaterialList = postdata.paintMaterialList.filter(item => item.material && item.material[1] ? true : false);


        postdata.expense_list = postdata.expense_list.filter(item => item.item_name ? true : false);
        postdata.paint_expenseList = postdata.paint_expenseList.filter(item => item.item_name ? true : false);

        this.formatDetailsData(postdata.fittingsList);
        this.formatDetailsData(postdata.partsList);
        this.formatDetailsData(postdata.packagingList);
        this.formatDetailsData(postdata.laborList);
        this.formatDetailsData(postdata.materialList);
        this.formatDetailsData(postdata.paintLaborList);
        this.formatDetailsData(postdata.paintMaterialList);


        postdata.fittingsList = JSON.stringify(postdata.fittingsList);
        postdata.partsList = JSON.stringify(postdata.partsList);
        postdata.packagingList = JSON.stringify(postdata.packagingList);
        postdata.laborList = JSON.stringify(postdata.laborList);
        postdata.materialList = JSON.stringify(postdata.materialList);
        postdata.paintLaborList = JSON.stringify(postdata.paintLaborList);
        postdata.paintMaterialList = JSON.stringify(postdata.paintMaterialList);
        postdata.expense_list = JSON.stringify(postdata.expense_list);
        postdata.paint_expenseList = JSON.stringify(postdata.paint_expenseList);

        // 格式化提交的数据
        this.$mk.formatFormData({ data: postdata, rules: this.formOptions.items });


        // 提交数据
        this.$mk.post({
          url: action,
          loading: "保存中...",
          data: postdata,
          useBigInt: true,
        }).then(() => { // 成功回调
          if (typeof (callback) == "function") {
            callback();
          } else {
            this.$mk.success("保存成功");
            if (!this.isEdit) { // 如果是新增模式，关闭当前页面
              this.back();
            }
          }

        }).catch((a) => { // 失败回调
          this.$mk.error(a.data.msg); // 显示错误信息
        });


      };


      // 验证表单
      this.$mk.validateForm({ form: this.$refs.xForm }).then(() => { // 验证表单
        save(); // 提交保存
      }).catch(count => { // 验证失败
        this.$mk.error(`存在${count}项错误，请检查`);
      });


    },


    // 取消 返回
    cancel() {
      this.back();
    },


    scheme_pageChangeEvent({ currentPage, pageSize }) { // 分页改变事件
      this.scheme_tablePage.currentPage = currentPage
      this.scheme_tablePage.pageSize = pageSize
      this.scheme_loading = true
      this.scheme_load();
    },
    scheme_load() {
      let parms = {
        "page": this.scheme_tablePage.currentPage,
        "limit": this.scheme_tablePage.pageSize,
        "order_bys": [
        ],
        "search_rules": [
        ],
        "start_time": 0,
        "end_time": 0
      };

      this.$mk.post({ // 发送请求
        url: this.actions.BathroomSchemeList, // 地址
        data: parms
      }).then(r => {
        this.scheme_loading = false
        let data = r.data;
        this.scheme_tablePage.total = data.total;
        this.scheme_tableData = data.BathroomScheme;
      });
    },
    selectScheme() {
      this.modalVisible = true;
      this.scheme_load();
    },
    getTabsViewPageComponent() {

      let target = null;

      let find = (component) => {

        if (component && component.pageList) {
          target = component;
        }
        if (component.$parent) {
          find(component.$parent)
        }
      }

      find(this.$parent);


      return target;
    },
    //找到定义了loadSchemeDataById方法 的页面组件
    findQuotationPageComponent(key) { 
      let target = null; 
      let find = (children) => {
        children.forEach(item => { 
          if(item.loadSchemeDataById){
            console.log(item.getDataId())
          }
          if (item.loadSchemeDataById && item.getDataId() == key) {
            target = item;
            return;
          }
          if (item.$children && item.$children.length) {
            find(item.$children)
          }
        })
      }
      let tabsview = this.getTabsViewPageComponent();
      if (tabsview == null) {
        return null;
      }
      find(tabsview.$children);


      return target;
    },

    previewScheme() {
      this.ok({
        callback: () => {

          let dataId = this.getDataId();
          let pageUrl = "/BathroomQuotation/BathroomQuotationUpdate/d" + dataId;
          let pageComponent = this.findQuotationPageComponent(dataId); 
          if(pageComponent){
            pageComponent.loadSchemeDataById(dataId);
     
            setTimeout(()=>{
              this.$openPage(pageUrl); // 打开页面
            },100);

          }else{
            this.$openPage(pageUrl); // 打开页面
          }
         
        }
      })

    },
    confirmSelectScheme() {
      let row = this.$refs.scheme_grid.getCurrentRecord(); // 获取当前行

      let fittingsList = JSON.parse(row.fittingsList || "[]");
      fittingsList = fittingsList.filter(a => a.fittings && a.fittings[0]);
      let partsList = JSON.parse(row.partsList || "[]");
      partsList = partsList.filter(a => a.parts && a.parts[0]);
      let packagingList = JSON.parse(row.packagingList || "[]");
      packagingList = packagingList.filter(a => a.packaging && a.packaging[0]);

      let laborList = JSON.parse(row.laborList || "[]");
      laborList = laborList.filter(a => a.labor && a.labor[0]);
      let materialList = JSON.parse(row.materialList || "[]");
      materialList = materialList.filter(a => a.material && a.material[0]);


      let paintLaborList = JSON.parse(row.paintLaborList || "[]");
      paintLaborList = paintLaborList.filter(a => a.labor && a.labor[0]);
      let paintMaterialList = JSON.parse(row.paintMaterialList || "[]");
      paintMaterialList = paintMaterialList.filter(a => a.material && a.material[0]);


      this.labor_detailsData = laborList;
      this.parts_detailsData = partsList;
      this.fittings_detailsData = fittingsList;
      this.material_detailsData = materialList;
      this.packaging_detailsData = packagingList;
      this.paintLabor_detailsData = paintLaborList;
      this.paintMaterial_detailsData = paintMaterialList;


      this.expense_detailsData = JSON.parse(row.expense_list || "[]"); // 其他费用
        this.paintExpense_detailsData = JSON.parse(row.paint_expenseList || "[]"); // 油漆费用结算

      this.detailDataInit();

      this.modalVisible = false;
    },

  },
  // 监听属性
  watch: {

  }
};

</script>


<style scoped lang="less">
.page-body {
  padding: 30px;
  background: @base-bg-color;
}

.formtabs .ant-tabs-tabpane {
  /* background: white; */
  padding: 12px;
}

.gridPanel {
  height: calc(100vh - 600px);
}

.footerbar {
  padding-left: 10px;
}

.imagePanel {
  cursor: pointer;
  padding: 10px;
  width: 100px;

  img {
    width: 80px;
    height: 80px;
  }
}

p.tip {
  padding: 12px 20px 12px 20px;
  margin: 8px 0;
  background-color: #f8f8f8;
  border-left: 4px solid #409eff;
}

.oplinks2 a {
  margin-left: 6px;
}


.groupbox {
  margin: 8px;
  border: 1px solid #ddd;
  padding: 10px;

  h3 {
    font-weight: bold;
  }
}

.topbar {
  margin-bottom: 10px;

  button {
    margin-right: 8px;
  }
}
</style>
