<template>
  <div class="app-container" style="overflow: hidden">
    <el-container v-loading="containerLoading" :element-loading-text="$t('elevator.rulesChecking')">
      <el-header style="padding: 0px;height: 30px">
        <span style="float: right">
        <el-button @click="debug = !debug">DEBUG {{ debug }}</el-button>
        <el-button v-if="this.type === 'add' || this.type === 'edit'" type="primary" @click="submitForm" icon="el-icon-circle-check">{{ $t('common.confirm') }}</el-button>
        <el-button @click="cancel" icon="el-icon-remove-outline">{{ $t('common.cancel') }}</el-button>
        </span>
      </el-header>
      <el-container style="margin-top: 5px">
        <el-aside class="container-aside">
          <el-card class="aside-card">
            <div v-for="(item,index) in asideCardList" :class="asideCardList[index].value === true?'aside-div-checked':'aside-div-unchecked'" @click="clickAside(index)">
              {{ item.label }}
            </div>
          </el-card>
        </el-aside>
        <el-main class="container-main">
          <div ref="scrollContainer" style="overflow: auto;height: calc(100vh - 200px);border-radius: 6px" @scroll="listenScroll">
            <el-form ref="form" :model="form" :rules="rules" label-width="200px" label-position="top">
              <!--基本信息-->
              <el-card class="main-card">
                <div class="form-div">
                  <!-- 电梯类型-->
                  <el-form-item :label="$t('paraLibrary.elevatorType')" prop="elevatorType">
                    <el-select :disabled="disableFlag" v-model="form.elevatorType" class="w-100" @change="elevatorTypeChange" clearable
                               :placeholder="$t('common.pleaseSelect') + $t('paraLibrary.elevatorType')">
                      <el-option v-for="dict in dict.type.elevator_type" :key="dict.value"
                                 :label="dict.label" :value="dict.value"/>
                    </el-select>
                  </el-form-item>
                </div>
                <div class="form-div">
                  <!-- 电梯型号-->
                  <el-form-item :label="$t('elevatorModel.elevatorModel')" prop="elevatorModelId">
                    <el-select :disabled="disableFlag" v-model="form.elevatorModelId" class="w-100" @change="elevatorModelChange" clearable
                               :placeholder="$t('common.pleaseSelect') + $t('elevatorModel.elevatorModel')">
                      <el-option v-for="dict in elevatorModelList" :key="Number(dict.value)"
                                 :label="dict.label" :value="Number(dict.value)"/>
                    </el-select>
                  </el-form-item>
                </div>
                <div class="form-div">
                  <!-- 数量-->
                  <el-form-item :label="$t('quotation.count')" prop="count">
                    <el-input :disabled="disableFlag" v-model.trim="form.count" :placeholder="$t('common.pleaseInput') + $t('quotation.count')"
                              maxlength="100"/>
                  </el-form-item>
                </div>
              </el-card>

              <!-- 后台获取参数-->
              <el-card class="main-card mt30" v-for="(card,pIndex) in paramCategoryList" :id="'renderCard' + pIndex" v-if="(card.isShow && card.enabled) || debug">
                <div v-for="(item,index) in card.paramList" :key="'basic'+index" class="form-div" v-if="(item.isShow && item.enabled) || debug">
                  <el-form-item :label="(item.paramType==='01'?'+（参数包配置）+':'') + (item.paramType==='02'?'+(参数包配置参数)+':'')+item['label'+localLabelSuffix]"
                                :prop="paramCategoryList[pIndex].paramList[index].paraCode">
                    <el-input :disabled="disableFlag||getUnEditable(paramCategoryList[pIndex].paramList[index].paraCode)" v-model="paramCategoryList[pIndex].paramList[index].finalValue"
                              :placeholder="$t('common.pleaseInput') + item['label'+localLabelSuffix]" v-if="item.inputType == '00'" maxlength="100" @change="paramChange(item)"/>
                    <el-input-number :disabled="disableFlag||getUnEditable(paramCategoryList[pIndex].paramList[index].paraCode)" v-model="paramCategoryList[pIndex].paramList[index].finalValue" class="w-100" @change="paramChange(item)"
                                     :placeholder="$t('common.pleaseInput') + item['label'+localLabelSuffix]" v-if="item.inputType == '01'" maxlength="100"/>
                    <el-select :disabled="disableFlag||getUnEditable(paramCategoryList[pIndex].paramList[index].paraCode)"
                               v-model="paramCategoryList[pIndex].paramList[index].finalValue" class="w-100" @change="item.paramType === '01'?parabarChange(item):paramChange(item)"
                               :placeholder="$t('common.pleaseSelect') + item['label'+localLabelSuffix]" v-if="item.inputType == '02'">
                      <el-option v-for="dict in item.paramOptionList" :key="dict.value" v-if="dict.isShow"
                                 :label="dict['label'+localLabelSuffix]" :value="dict.value"/>
                    </el-select>
                  </el-form-item>
                </div>
              </el-card>

            </el-form>
          </div>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>


<script>
import {listModelNewAll, listNewAllParam} from "@/api/business/crm/elevatorModel";
import {getInfoByTpElevatorModelId} from "@/api/business/crm/paraRelatedCase/relatedCase";
import store from '@/store'
import {checkElevatorParam} from "@/api/business/crm/paraValidation/paraValidation";

const labelSuffix = {
  chinese: '',
  english: 'US',
  russia: 'RU',
  spanish: 'ES',
}

export default {
  name: "Elevator",
  components: {},
  dicts: ['elevator_type'],
  data() {
    return {
      debug: false,
      baseApi: process.env.VUE_APP_BASE_API,
      paramCategoryList: [],
      // 侧面卡片
      asideCardList: [{'label': this.$t('lead.baseInfo'), 'value': true}],
      // 每个模块的滚定条值
      mainScrollList: [0],
      scrollTop: 10,
      form: {
        count: null,
        elevatorType: null,
        elevatorModelId: null,
      },
      type: null,
      quotationType: null,
      disableFlag: false,
      // 电梯型号列表（下拉）
      elevatorModelList: [],
      // 电梯型号列表（全部）
      allElevatorModelList: [],
      rules: {
        elevatorType: [
          {required: true, message: this.$t('common.pleaseSelect'), trigger: 'change'}
        ],
        elevatorModelId: [
          {required: true, message: this.$t('common.pleaseSelect'), trigger: 'change'}
        ],
        count: [
          {required: true, message: this.$t('common.pleaseInput'), trigger: 'blur'}
        ],
      },
      quotationId: null,
      plotId: null,
      elevatorId: null,
      ruleList: [],
      unEditAble: new Set(),
      scrollDisabledFlag: false,
      decoratePicList: [],
      decorateSelectionList: [],
      checkPicInfo: {},
      lastDecorateList: [],
      containerLoading: false,
    };
  },
  async created() {
    this.quotationId = this.$route.query && this.$route.query.quotationId;
    this.plotId = this.$route.query && this.$route.query.plotId;
    await this.initElevatorModel();
    // 页面回填
    this.initType();
    await this.fillData();
    // this.renderAsideCard();
  },
  async activated() {
    this.initType();
  },
  computed: {
    localLabelSuffix() {
      return labelSuffix[this.$i18n.locale] || '';
    }
  },
  watch: {
    asideCardList() {
      setTimeout(() => {
        this.initScrollList()
        console.log('滚动条渲染结束')
      }, 1000)
    }
  },
  methods: {
    restoreLastDecorateList() {
      let decorateSet = new Set();
      this.lastDecorateList.forEach(item => {
        decorateSet.add(item.paraCode)
      })
      for (let a = 0; a < this.paramCategoryList.length; a++) {
        let paramCategory = this.paramCategoryList[a]
        for (let b = 0; b < paramCategory.paramList.length; b++) {
          let param = paramCategory.paramList[b];
          // 需要联动还原
          if (decorateSet.has(param.paraCode)) {
            this.paramCategoryList[a].paramList[b].decorateValue = null
            this.paramChange(this.paramCategoryList[a].paramList[b])
          }
        }
      }
    },
    decorateSelectionChange(selection, needCheck) {
      if (needCheck === true && (this.type === 'view' || this.type === 'detail')) {
        // 查看/详情时点击图片失效
        return
      }
      // 重置图片点击状态
      this.decoratePicList.forEach(item => {
        item.checked = item.parabarDetailId === selection.parabarDetailId
      })
      // 设置选中大图信息
      this.checkPicInfo = {
        parabarDetailId: selection.parabarDetailId,
        parbarId: selection.parbarId,
        url: selection.url
      }
      // 还原上次联动
      this.restoreLastDecorateList()
      // 设置选中配置参数信息
      for (let i = 0; i < this.decoratePicList.length; i++) {
        if (selection.parabarDetailId === this.decoratePicList[i].parabarDetailId) {
          this.decorateSelectionList = this.decoratePicList[i].paramList
          this.lastDecorateList = this.decoratePicList[i].paramList
          break
        }
      }

      // check装潢参数 是否覆盖其他类型参数
      let decorateSet = new Set();
      let decorateMap = new Map();
      this.decorateSelectionList.forEach(item => {
        decorateSet.add(item.paraCode)
        decorateMap.set(item.paraCode, item.finalValue)
      })

      // STEP1 设置参数不可用
      for (let a = 0; a < this.paramCategoryList.length; a++) {
        let paramCategory = this.paramCategoryList[a]
        for (let b = 0; b < paramCategory.paramList.length; b++) {
          let param = paramCategory.paramList[b];
          this.paramCategoryList[a].paramList[b].enabled = !decorateSet.has(param.paraCode)
          let finalValue = decorateMap.get(this.paramCategoryList[a].paramList[b].paraCode);
          if (finalValue != null) {
            this.paramCategoryList[a].paramList[b].decorateValue = finalValue
          }
        }
      }
      // STEP2 设置CARD
      for (let a = 0; a < this.paramCategoryList.length; a++) {
        let paramCategory = this.paramCategoryList[a]
        let cardEnabled = false;
        for (let b = 0; b < paramCategory.paramList.length; b++) {
          let param = paramCategory.paramList[b];
          if (param.enabled) {
            cardEnabled = true
            break
          }
        }
        this.paramCategoryList[a].enabled = cardEnabled;
      }
      //STEP3 装潢选型触发参数联动
      for (let i = 0; i < this.decorateSelectionList.length; i++) {
        // 触发参数联动
        this.paramChange(this.decorateSelectionList[i])
      }

      console.log('装潢选择后的卡片', this.paramCategoryList)
      // STEP4 页面重新渲染
      this.renderAsideCard()
    },
    parabarChange: function (item) {
      console.log('参数包变更', item)
      if (item.paramOptionList == null) {
        console.log('参数报配置参数为空')
        return;
      }
      // 获取参数包配置对应的值，转map
      let codeValueMap = new Map();
      for (let i = 0; i < item.paramOptionList.length; i++) {
        let param = item.paramOptionList[i]
        if (param.value == item.finalValue) {
          let detailValueList = param.parabarDetailValueList
          if (detailValueList == null) {
            console.log('参数报配置参数详情为空')
            return;
          }
          for (let j = 0; j < detailValueList.length; j++) {
            let detail = detailValueList[j];
            codeValueMap.set(detail.paraCode, detail.paraValue)
          }
        }
      }
      console.log('参数包配置参数值map', codeValueMap)
      for (let a = 0; a < this.paramCategoryList.length; a++) {
        let paramCategory = this.paramCategoryList[a]
        for (let b = 0; b < paramCategory.paramList.length; b++) {
          let param = paramCategory.paramList[b];
          let paramValue = codeValueMap.get(param.paraCode);
          if (paramValue != null) {
            this.paramCategoryList[a].paramList[b].finalValue = paramValue
            console.log('参数包配置参数变化联动', this.paramCategoryList[a].paramList[b])
            // 触发参数联动
            this.paramChange(this.paramCategoryList[a].paramList[b])
          }
        }
      }
    },
    paramChange(item) {
      console.log('参数变更', item)
      for (let i = 0; i < this.ruleList.length; i++) {
        let ruleItem = this.ruleList[i]
        //判断项目是否存在联动关系中
        if (ruleItem.conditionKeys.indexOf(item.paraCode) > -1) {
          let ruleItemConditionList = ruleItem.condition
          let rule = ""
          //判断if条件中 是 and 还是or
          if (ruleItemConditionList.length > 1) {
            rule = ruleItem.rule === 'Match All' ? "&&" : "||"
          }
          //判断结果，存多个，后面如果if条件是and,那resultList中，但凡有一个FALSE，就不满足，如果条件是or，但凡有一个True，就满足
          let resultList = []
          for (let j = 0; j < ruleItemConditionList.length; j++) {
            let condition = ruleItemConditionList[j]
            //判断当前修改的控件对应的项目，所选值是否满足联动条件
            if (condition.param == item.paraCode) {
              let formualResult = this.formualCalc(item.finalValue, condition.formula, condition.value)
              resultList.push(formualResult)
            } else {
              //判断联动条件中，非当前修改的控件对应的项目，所选值是否满足联动条件
              for (let a = 0; a < this.paramCategoryList.length; a++) {
                let paramCategory = this.paramCategoryList[a]
                for (let b = 0; b < paramCategory.paramList.length; b++) {
                  let otherItem = paramCategory.paramList[b];
                  if (otherItem.paraCode == condition.paraCode) {
                    let calcValue = otherItem.decorateValue
                    if (otherItem.enabled) {
                      calcValue = otherItem.finalValue
                    }
                    let otherResult = this.formualCalc(calcValue, condition.operation, condition.value)
                    resultList.push(otherResult)
                  }
                }
              }
            }
          }
          console.log('判断结果', resultList)
          //只有一个条件的情况
          if (ruleItemConditionList.length === 1) {
            //满足条件
            if (resultList[0]) {
              console.log('开始满足一个条件，执行联动结果')
              //满足条件，执行联动结果
              this.executeLinkResult(ruleItem.result)
            } else {
              console.log('开始不满足一个条件，执行联动结果')
              //   不满足条件，执行联动结果
              this.restoreLinkResult(ruleItem.result)
            }
          } else {
            //存在多个条件的情况，也要考虑不满足条件，联动结果的选项，退回原来的可选list
            //都要满足 and
            if ('00' == rule) {
              if (resultList.indexOf(false) < 0) {
                //执行联动结果
                console.log('开始满足多个条件 && ，执行联动结果')
                //满足条件，执行联动结果
                this.executeLinkResult(ruleItem.result)
              } else {
                console.log('开始不满足多个条件 && ，执行联动结果')
                //   不满足条件，执行联动结果
                this.restoreLinkResult(ruleItem.result)
              }
            } else {
              //满足其一 or
              if (resultList.indexOf(true) > 0) {
                //执行联动结果
                console.log('开始满足多个条件 || ，执行联动结果')
                //满足条件，执行联动结果
                this.executeLinkResult(ruleItem.result)
              } else {
                console.log('开始不满足多个条件 || ，执行联动结果')
                //   不满足条件，执行联动结果
                this.restoreLinkResult(ruleItem.result)
              }
            }
          }
        }
      }
    },
    executeLinkResult(ruleResultList) {
      ruleResultList.forEach(result => {
        for (let a = 0; a < this.paramCategoryList.length; a++) {
          let paramCategory = this.paramCategoryList[a]
          for (let b = 0; b < paramCategory.paramList.length; b++) {
            let param = paramCategory.paramList[b];
            if (param.paraCode == result.paraCode) {
              // 参数包配置参数不修改
              if (param.paramType === '02') {
                console.log('跳过参数包配置参数', param)
                continue
              }
              // 修改选中的值
              // this.paramCategoryList[a].paramList[b].finalValue = result.value
              this.paramCategoryList[a].paramList[b].finalValue = null
              // 修改下拉的可选项
              if (result.optionList !== null && result.optionList.length > 0) {
                this.paramCategoryList[a].paramList[b].paramOptionList.forEach(dpItem => {
                  console.log('满足一个条件，执行联动结果选项日志', result.optionList, dpItem.value, result.optionList.includes(dpItem.value))
                  !result.optionList.some(item => item.value == dpItem.value)
                  dpItem.isShow = result.optionList.some(item => item.value == dpItem.value)
                })
              } else {
                console.log(result.paraName + '无下拉选项', result)
              }
              console.log('满足一个条件，执行联动结果', this.paramCategoryList[a].paramList[b])
              // 非活性时禁止编辑
              if ('1' === result.editable) {
                this.unEditAble.add(result.paraCode)
              }
            }
          }
        }
      })
    },
    restoreLinkResult(ruleResultList) {
      ruleResultList.forEach(result => {
        for (let a = 0; a < this.paramCategoryList.length; a++) {
          let paramCategory = this.paramCategoryList[a]
          for (let b = 0; b < paramCategory.paramList.length; b++) {
            let param = paramCategory.paramList[b];
            if (param.paraCode == result.paraCode) {
              // 参数包配置参数不修改
              if (param.paramType === '02') {
                console.log('跳过参数包配置参数', param)
                continue
              }
              // 修改下拉的可选项
              console.log('不满足一个条件，执行联动结果选项日志,【' + result.paraCode + '】重置')
              if (this.paramCategoryList[a].paramList[b] !== null) {
                this.paramCategoryList[a].paramList[b].paramOptionList.forEach(dpItem => {
                  dpItem.isShow = true
                })
              }
              this.unEditAble.delete(result.paraCode)
            }

          }
        }
      })
    },
    formualCalc(param, formula, value) {
      console.log('[' + param + ']   [' + formula + ']  [' + value + ']')
      switch (formula) {
        case '<':
          return Number(param) <= Number(value)
        case '>':
          return Number(param) <= Number(value)
        case '<=':
          return Number(param) <= Number(value)
        case '>=':
          return Number(param) >= Number(value)
        case '=':
          return param == value
        case 'contains':
          return value.indexOf(param) > -1
        case 'noContains':
          return value.indexOf(param) < 0
      }
    },
    async fillData() {
      console.log('页面数据回填 [' + this.type + ']', this.type === 'view' || this.type === 'edit' || this.type === 'detail')
      if (this.type === 'view' || this.type === 'edit' || this.type === 'detail') {
        this.elevatorId = this.$route.query && this.$route.query.elevatorId;
        let fillData = this.$store.state.elevators[this.elevatorId]
        console.log('页面回填数据', fillData);
        if (fillData === undefined) {
          console.log('页面回填数据获取失败');
          return
        }
        this.form.elevatorType = fillData.elevatorType
        this.elevatorTypeChange(fillData.elevatorType)
        this.form.elevatorModelId = fillData.elevatorModelId
        await this.elevatorModelChange(fillData.elevatorModelId)
        this.form.count = fillData.elevatorNumber

        // 参数值列表 =》 参数值map   key: category_code  value： value
        let fillParamMap = new Map();
        if (fillData.paramList != null && fillData.paramList.length > 0) {
          fillData.paramList.forEach(item => {
            fillParamMap.set(item.paraCategory + '_' + item.paraCode, item.paraValue)
          })
        }

        console.log('回填数据map', fillParamMap)
        for (let j = 0; j < this.paramCategoryList.length; j++) {
          // 参数类别
          let paramCategory = this.paramCategoryList[j]
          for (let k = 0; k < paramCategory.paramList.length; k++) {
            let fillValue = fillParamMap.get(paramCategory.paraCategory + '_' + paramCategory.paramList[k].paraCode)
            this.paramCategoryList[j].paramList[k].finalValue = fillValue;

          }
        }
        // 装潢参数回填
        let decorateTempList = fillData.paramList.filter(item => item.paraCategory === '05');
        if (decorateTempList != null && decorateTempList.length > 0) {
          for (let i = 0; i < this.decoratePicList.length; i++) {
            if (this.decoratePicList[i].parabarDetailId === decorateTempList[0].parabarDetailId) {
              this.decorateSelectionChange(this.decoratePicList[i])
              break;
            }
          }
        }
      }
    },
    // 电梯型号切换
    async elevatorModelChange(key) {
      if (key) {
        this.decorateSelectionList = []
        this.checkPicInfo = {}
        await listNewAllParam(key).then(response => {
          this.paramCategoryList = response.data.categoryList
          this.decoratePicList = response.data.eleDecorateConfigList
          if (this.decoratePicList.length > 0) {
            this.decorateSelectionChange(this.decoratePicList[0])
          }
          console.log('电梯参数列表', this.paramCategoryList)
          this.renderAsideCard()
        });
        let cases = await getInfoByTpElevatorModelId(key)
        console.log('参数联动规则', cases.data)
        this.ruleList = cases.data
      } else {
        this.renderAsideCard()
      }
    },
    // 电梯类型切换
    elevatorTypeChange(key) {
      let checkElevatorModeList = this.allElevatorModelList.filter(item => item.elevatorType === key)
      this.elevatorModelList = []
      checkElevatorModeList.forEach(item => {
        this.elevatorModelList.push(
          {
            'label': item.elevatorModel,
            'value': item.id,
          }
        )
      })
      // 清空电梯型号，选配参数，侧边卡片
      this.form.elevatorModelId = null
      this.paramCategoryList = []
      this.decorateSelectionList = []
      this.decoratePicList = []
      this.checkPicInfo = {}
      this.unEditAble = new Set();
      this.renderAsideCard()
    },
    async initElevatorModel() {
      const response = await listModelNewAll();
      if (response.rows) {
        this.allElevatorModelList = response.rows
      }
    },
    initScrollList() {
      this.mainScrollList = [0]
      for (let i = 0; i < this.paramCategoryList.length; i++) {
        if (this.paramCategoryList[i].isShow && this.paramCategoryList[i].enabled) {
          // 计算每个卡片的滚动条位置
          let div = document.getElementById('renderCard' + i);
          // console.log(('renderCard' + i), div)
          this.mainScrollList.push(div.offsetTop - 57)
        }
      }
      if (this.decoratePicList != null && this.decoratePicList.length > 0) {
        let div = document.getElementById('renderCard999');
        this.mainScrollList.push(div.offsetTop - 57)
      }
    },
    // 渲染左侧卡片
    renderAsideCard() {
      let index = 0
      for (let i = 0; i < this.asideCardList.length; i++) {
        if (this.asideCardList[i].value) {
          index = i
        }
      }
      let newAsideCardList = []
      newAsideCardList.push({'label': this.$t('lead.baseInfo'), 'value': false})
      let newList = this.paramCategoryList.filter(item => item.isShow && item.enabled)
      for (let i = 0; i < newList.length; i++) {
        newAsideCardList.push({'label': newList[i]['label' + this.localLabelSuffix], 'value': false})
      }
      if (this.decoratePicList != null && this.decoratePicList.length > 0) {
        newAsideCardList.push({'label': this.$t('validation.decorationParam'), 'value': false})
      }
      if (newAsideCardList.length > index) {
        newAsideCardList[index].value = true
      }
      this.asideCardList = newAsideCardList;
    },
    initType() {
      this.type = this.$route.query && this.$route.query.type;
      // this.quotationType = this.$route.query && this.$route.query.quotationType;
      this.accountTitle = this.$t('elevator.view');
      switch (this.type) {
        case 'add':
          this.accountTitle = this.$t('elevator.add');
          this.disableFlag = false
          break;
        case 'edit':
          this.accountTitle = this.$t('elevator.edit');
          this.disableFlag = false
          break;
        case 'view':
          this.accountTitle = this.$t('elevator.view');
          this.disableFlag = true
          break;
        case 'detail':
          this.accountTitle = this.$t('elevator.view');
          this.disableFlag = true
          break;
      }
      console.log('标题', this.accountTitle)
      const obj = Object.assign({}, this.$route, {title: this.accountTitle})
      this.$tab.updatePage(obj);
    },
    async submitForm() {
      this.$refs['form'].validate((valid) => {
        if (valid) {
          // 组装传递数据
          let elevatorModelName = this.elevatorModelList.filter(item => item.value === this.form.elevatorModelId)[0].label
          let storage = {...this.form}
          if (this.elevatorId) {
            storage.id = this.elevatorId
          } else {
            storage.id = Date.now()
          }
          // 获取规则的各项参数，拼接展示
          let sobj = {}
          storage.elevatorModel = elevatorModelName
          storage.elevatorNumber = storage.count
          storage.addType = '01'
          let paramListForm = []
          for (let j = 0; j < this.paramCategoryList.length; j++) {
            // 参数类别
            let paramCategory = this.paramCategoryList[j]
            for (let k = 0; k < paramCategory.paramList.length; k++) {
              if (paramCategory.paramList[k].enabled) {
                paramListForm.push({
                  paramType: paramCategory.paramList[k].paramType,
                  parabarId: paramCategory.paramList[k].parabarId,
                  parabarDetailId: paramCategory.paramList[k].parabarDetailId,
                  paraValue: paramCategory.paramList[k].finalValue,
                  paraCode: paramCategory.paramList[k].paraCode,
                  paraCategory: paramCategory.paraCategory
                })
              } else {
                console.log('跳过参数', paramCategory.paramList[k])
              }
              // 载重
              if (paramCategory.paramList[k].paraCode === 'PV') sobj.load = paramCategory.paramList[k].finalValue
              // 速度
              if (paramCategory.paramList[k].paraCode === 'UV') sobj.rate = paramCategory.paramList[k].finalValue
              // 轿厢宽度
              if (paramCategory.paramList[k].paraCode === 'DOORS') sobj.carWidth = paramCategory.paramList[k].finalValue
              // 轿厢深度
              if (paramCategory.paramList[k].paraCode === 'DOORS') sobj.carDepth = paramCategory.paramList[k].finalValue
              // 轿厢高度
              if (paramCategory.paramList[k].paraCode === 'DOORS') sobj.carHeight = paramCategory.paramList[k].finalValue
              // 开门方式
              if (paramCategory.paramList[k].paraCode === 'OPEN') sobj.openStyle = paramCategory.paramList[k].finalValue
              // 开门宽度
              if (paramCategory.paramList[k].paraCode === 'DOORS') sobj.openWidth = paramCategory.paramList[k].finalValue
              // 开门高度
              if (paramCategory.paramList[k].paraCode === 'DOORS') sobj.openHeight = paramCategory.paramList[k].finalValue
              // 层数
              if (paramCategory.paramList[k].paraCode === 'DOORS') sobj.floors = paramCategory.paramList[k].finalValue
              // 站数
              if (paramCategory.paramList[k].paraCode === 'STOPS') sobj.stations = paramCategory.paramList[k].finalValue
              // 门数
              if (paramCategory.paramList[k].paraCode === 'DOORS') sobj.doors = paramCategory.paramList[k].finalValue
            }
          }
          // 装潢包参数组装
          if (this.decorateSelectionList != null && this.decorateSelectionList.length > 0) {
            for (let i = 0; i < this.decorateSelectionList.length; i++) {
              paramListForm.push({
                paramType: '02',
                parabarId: this.decorateSelectionList[i].parabarId,
                parabarDetailId: this.decorateSelectionList[i].parabarDetailId,
                paraValue: this.decorateSelectionList[i].finalValue,
                paraCode: this.decorateSelectionList[i].paraCode,
                paraCategory: '05'
              })
            }
          }
          // 载重/速度/轿厢宽*深*高/开门方式/开门宽*高/层数/站数/门数
          storage.specification = sobj.load + '/' + sobj.rate + '/' + sobj.carWidth + '*' + sobj.carDepth + '*' + sobj.carHeight + '/' + sobj.openStyle + '/'
            + sobj.openWidth + '*' + sobj.openHeight + '/' + sobj.floors + '/' + sobj.stations + '/' + sobj.doors
          storage.paramList = paramListForm
          store.commit('PUT_ELEVATOR', storage)
          console.log('电梯保存 ' + storage.id + '  ,', storage)
          // let quotationIdFlag = this.quotationId != null
          let checkParamForm = {
            elevatorModelId: this.form.elevatorModelId,
            paramList: paramListForm
          }
          console.log('电梯参数校验参数', checkParamForm)
          this.containerLoading = true
          checkElevatorParam(checkParamForm).then(response => {
            if (response.data != null && response.data.length > 0) {
              let message = ''
              for (let i = 0; i < response.data.length; i++) {
                let item = response.data[i]
                message += item['resultFalse' + this.localLabelSuffix]
                if (i !== response.data.length - 1) {
                  message += '<br>'
                }
              }
              this.$notify.error({
                title: this.$t('elevator.rulesResult'),
                message: message,
                // 毫秒
                duration: 1000 * 30,
                dangerouslyUseHTMLString: true,
              });
            } else {
              if (this.plotId) {
                this.$tab.closeOpenPage({path: "/civil/plot-view", query: {elevatorId: storage.id}})
              } else {
                this.$tab.closeOpenPage({path: "/civil/plot-add", query: {elevatorId: storage.id}})
              }
              // this.$tab.closeOpenPage({path: "/quotation/editQuotation?type=" + this.quotationType + '&elevatorId=' + storage.id + (quotationIdFlag ? "&quotationId=" + this.quotationId : "")});
            }
          }).finally(() => {
            this.containerLoading = false
          })
        }
      });
    },
    cancel() {
      if (this.plotId) {
        this.$tab.closeOpenPage({path: "/civil/plot-view", query:{id:this.plotId}})
      } else {
        this.$tab.closeOpenPage({path: "/civil/plot-add"})
      }
    },
    // 监听滚动条
    listenScroll(event) {
      if (this.scrollDisabledFlag) {
        this.scrollDisabledFlag = false
        return;
      }
      let scrollTop = event.target.scrollTop;
      // console.log('垂直滚动位置：' + scrollTop);
      // console.log('列表值：', this.mainScrollList[0], this.mainScrollList[1]);
      for (let i = 0; i < this.mainScrollList.length - 1; i++) {
        // console.log('前', this.mainScrollList[i] <= scrollTop)
        // console.log('后', scrollTop < this.mainScrollList[i + 1])

        if (this.mainScrollList[i] <= scrollTop && scrollTop < this.mainScrollList[i + 1]) {
          this.checkAside(i)
          return
        }
      }
    }
    ,
    // 左侧导航条点击事件
    clickAside(index) {
      this.checkAside(index)
      this.scrollDisabledFlag = true
      const container = this.$refs.scrollContainer;
      container.scrollTop = this.mainScrollList[index]
    }
    ,
    // 高亮左侧导航条
    checkAside(index) {
      this.asideCardList.forEach(item => item.value = false);
      this.asideCardList[index].value = true
    },
    // 从参数联动设定管理获取（活性 false/非活性 true）
    getUnEditable(item) {
      return false
      // return this.unEditAble.has(item)
    }
  }
};
</script>

<!--style-->
<style scoped>
.aside-div-unchecked {
  height: 50px;
  font-family: Arial, Arial;
  font-weight: normal;
  font-size: 18px;
  color: #3C485B;
  line-height: 23px;
  text-align: left;
  font-style: normal;
  padding-top: 14px;
  padding-left: 24px;
  cursor: pointer;
}

.aside-div-checked {
  height: 50px;
  background: #D31017;
  border-radius: 6px;
  font-family: Arial, Arial;
  font-weight: normal;
  font-size: 18px;
  color: #FFFFFF;
  line-height: 23px;
  text-align: left;
  font-style: normal;
  padding-top: 14px;
  padding-left: 24px;
  cursor: pointer;
}

.container-aside {
  overflow: hidden;
  width: 20% !important;
  background: #f1f5f9 !important;
}

.container-main {
  padding-top: 8px !important;
  padding-right: 0px !important;
}

.aside-card {
  border-radius: 6px;
}

.w-100 {
  width: 100%;
}

.mt30 {
  margin-top: 30px;
}

.check-div {
  position: absolute;
}

.check-img {
  background-color: red;
  width: 1vw;
  position: relative;
  float: right;
}

.br6 {
  border-radius: 6px;
}

.out-check-div {
  display: inline-block;
  margin-left: 5px;
  width: 31%;
  cursor: pointer;
}

.form-div {
  width: calc(33% - 10px) !important;
  display: inline-block;
  margin-right: 10px
}
</style>
