<template>
  <div class="parabar-container">

    <div class="parabar-select">
      <div style="display: flex;justify-content: space-between">
          <div class="parabar-title" style="margin-bottom: 10px">{{ paraBarTitle }}</div>
          <div>
            <CustomButton icon="el-icon-circle-check" type="primary" v-if="!disableFlag" :label="$t('common.confirm')"
              @handleClick="submitDataScope('form')" />
            <CustomButton icon="el-icon-remove-outline" :label="$t('common.cancel')" plain @handleClick="cancel" />
          </div>
        </div>
    </div>

    <div class="content">
      <div class="card card-base">

        <div class="flex-center-left mb16">
          <img class="item-size" src="../../../assets/images/account-item.png" alt="">
          <div class="card-title">参数包信息</div>
        </div>
        <el-form class="parabar-form" ref="form" :model="form" :rules="rules" label-position="top">
          <el-row>
            <el-col :span="8" class="col-padding-right">
              <el-form-item label="参数包名称" prop="parabarName">
                <el-input v-model="form.parabarName" placeholder="请输入参数包名称" style="width: 16vw;" :maxlength="100"
                  :disabled="disableFlag" />
              </el-form-item>
            </el-col>
            <el-col :span="8" class="col-padding-right">
              <el-form-item label="参数包名称(英)" prop="parabarNameUS">
                <el-input v-model="form.parabarNameUS" placeholder="请输入参数包名称(英)" style="width: 16vw;" :maxlength="100"
                  :disabled="disableFlag" />
              </el-form-item>
            </el-col>
            <el-col :span="8" class="col-padding-right">
              <el-form-item label="参数包名称(俄)" prop="parabarNameRU">
                <el-input v-model="form.parabarNameRU" placeholder="请输入参数包名称(俄)" style="width: 16vw;" :maxlength="100"
                  :disabled="disableFlag" />
              </el-form-item>
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="8" class="col-padding-right">
              <el-form-item label="参数包名称(西)" prop="parabarNameES">
                <el-input v-model="form.parabarNameES" placeholder="请输入参数包名称(西)" style="width: 16vw;" :maxlength="100"
                  :disabled="disableFlag" />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="是否装潢包" prop="decorateFlag" label-width="150px">
                <el-select v-model="form.decorateFlag" placeholder="请选择是否装潢包" style="width: 16vw;"
                  :disabled="disableFlag">
                  <el-option v-for="item in dict.type.decorate_flag" :key="item.value" :label="item.label"
                    :value="item.value"></el-option>
                </el-select>
              </el-form-item>
            </el-col>

            <!--            <el-col :span="8" >-->
            <!--              <el-form-item label="关联梯型" prop="selectedModelIds" label-width="150px">-->
            <!--                <el-select  v-model="selectedModelIds" @change="relatedModelChange" multiple filterable placeholder="请选择" style="width: 16vw;" :disabled="disableFlag">-->
            <!--                  <el-option-->
            <!--                    v-for="item in relatedModelList"-->
            <!--                    :key="item.value"-->
            <!--                    :label="item.label"-->
            <!--                    :value="item.value"-->
            <!--                  ></el-option>-->
            <!--                </el-select>-->
            <!--              </el-form-item>-->
            <!--            </el-col>-->
          </el-row>

          <Row>
            <div class="parabar-select">
            </div>
            <div class="flex-center-left mb16">
              <img class="item-size" src="../../../assets/images/account-item.png" alt="">
              <div class="card-title">关联梯型</div>
            </div>
            <ElevatorModelTable :span="24" :sm-span="24" :lg-span="24" :md-span="24" :xs-span="24"
              :disabled="type === 4 || disableFlag" ref="relationEnters" :modal-data="relationEnters"
              @handleConfirm="handleModelTableConfirm" @handleDeleteRow="handleDeleteRow"
              class="parabar-elevator-table" />
          </Row>

          <el-row v-if="!disableFlag">
            <el-col :span="24">
              <div class="parabar-select">
              </div>
              <div class="flex-center-left mb16">
                <img class="item-size" src="../../../assets/images/account-item.png" alt="">
                <div class="card-title">关联参数</div>
              </div>
              <el-form-item prop="selectedParaIds" label-width="150px">
                <el-transfer v-model="selectedParaIds" @change="sendParaIntoItemList" :titles="['梯形参数列表', '已选择']"
                  filter-placeholder="请输入检索条件" filterable :data="relatedParas" class="parabar-transfer"></el-transfer>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row v-if="disableFlag">
            <el-col :span="24">
              <div class="parabar-select">
              </div>
              <div class="flex-center-left mb16">
                <img class="item-size" src="../../../assets/images/account-item.png" alt="">
                <div class="card-title">关联参数</div>
              </div>
              <el-table :data="selectCommmonPara" max-height="280px" style="max-width: 100%">
                <el-table-column width="55">
                  <template slot-scope="scope">{{ scope.$index + 1 }}</template>
                </el-table-column>
                <Column min-width="150px" label="参数编码">
                  <template #default="{ row }">{{ row.paraCode }}</template>
                </Column>
                <Column min-width="150px" label="参数大类">
                  <template #default="{ row }">{{ formatDict(row.paraCategory, 'para_category') }}</template>
                </Column>
                <Column min-width="150px" label="入力方式">
                  <template #default="{ row }">{{ formatDict(row.inputType, 'input_type') }}</template>
                </Column>
                <Column min-width="200px" label="参数名称">
                  <template #default="{ row }">{{ row.paraName }}</template>
                </Column>
                <Column min-width="200px" label="参数名称(英)">
                  <template #default="{ row }">{{ row.paraNameUS }}</template>
                </Column>
                <Column min-width="200px" label="参数名称(俄)">
                  <template #default="{ row }">{{ row.paraNameRU }}</template>
                </Column>
                <Column min-width="200px" label="参数名称(西)">
                  <template #default="{ row }">{{ row.paraNameES }}</template>
                </Column>
              </el-table>
            </el-col>
          </el-row>
        </el-form>
      </div>
    </div>
    <div class="parabar-select">
    </div>
    <div class="content">
      <div class="card card-base">
        <div class="contact-box">
          <div class="flex-center-left mb16">
            <img class="item-size" src="../../../assets/images/account-item.png" alt="">
            <div class="card-title">配置列表</div>
          </div>
          <div>
            <el-button type="primary" icon="el-icon-plus" size="mini" @click="addLine"
              v-if="!disableFlag">新增行</el-button>
            <el-button size="mini" plain icon="el-icon-delete" @click="deleteLine" v-if="!disableFlag">删除行</el-button>
          </div>
          <el-table :data="detailValueList" @selection-change="handleSelectionChange" max-height="280px"
            style="max-width: 100%" ref="table">
            <el-table-column type="selection" width="55" v-if="!disableFlag"></el-table-column>
            <el-table-column width="55">
              <template slot-scope="scope">{{ scope.$index + 1 }}</template>
            </el-table-column>

            <el-table-column label="配置名称" width="200px">
              <template slot-scope="scope">
                <el-input type="input" v-model="scope.row.parabarDetailName" placeholder="请输入"
                  :disabled="disableFlag"></el-input>
              </template>
            </el-table-column>
            <el-table-column label="配置名称(英)" width="200px">
              <template slot-scope="scope">
                <el-input type="input" v-model="scope.row.parabarDetailNameUS" placeholder="请输入"
                  :disabled="disableFlag"></el-input>
              </template>
            </el-table-column>
            <el-table-column label="配置名称(俄)" width="200px">
              <template slot-scope="scope">
                <el-input type="input" v-model="scope.row.parabarDetailNameRU" placeholder="请输入"
                  :disabled="disableFlag"></el-input>
              </template>
            </el-table-column>
            <el-table-column label="配置名称(西)" width="200px">
              <template slot-scope="scope">
                <el-input type="input" v-model="scope.row.parabarDetailNameES" placeholder="请输入"
                  :disabled="disableFlag"></el-input>
              </template>
            </el-table-column>
            <el-table-column v-for="(item, index) in selectedParaIdsDetail" :key="item.value" :label="item.label"
              width="220px">
              <template slot-scope="scope">
                <el-input v-model="scope.row['param@' + item.value + '@' + item.paraCode + '@' + item.label]"
                  placeholder="请输入" v-if="item.inputType === '00'" :maxlength="50" :disabled="disableFlag" />
                <el-input-number v-model="scope.row['param@' + item.value + '@' + item.paraCode + '@' + item.label]"
                  placeholder="请输入" :min="0" :max="99999999" :precision="0" :controls="false"
                  v-else-if="item.inputType === '01'" :disabled="disableFlag" class="text-align-left" />
                <el-input-number v-model="scope.row['param@' + item.value + '@' + item.paraCode + '@' + item.label]"
                  placeholder="请输入" :precision="2" :step="0.01" :min="0" :max="99999999" :controls="false"
                  v-else-if="item.inputType === '03'" :disabled="disableFlag" class="text-align-left" />
                <el-select v-model="scope.row['param@' + item.value + '@' + item.paraCode + '@' + item.label]"
                  placeholder="请选择" v-else :disabled="disableFlag" clearable>
                  <el-option v-for="selectItem in selectedParaIdsDetail[index].selectItemList" :key="selectItem.value"
                    :label="selectItem.label" :value="selectItem.value"></el-option>
                </el-select>
              </template>
            </el-table-column>
            <el-table-column label="状态" width="200px">
              <template slot-scope="scope">
                <el-select v-model="scope.row.status" placeholder="请选择" :disabled="disableFlag">
                  <el-option v-for="item in dict.type.status_switch" :key="item.value" :label="item.label"
                    :value="item.value"></el-option>
                </el-select>
              </template>
            </el-table-column>
            <el-table-column label="装潢图片" width="220px" v-if="!disableFlag" align="center">
              <template slot-scope="scope">
                <el-upload accept=".jpg, .png" :limit="limit"
                  :class="{ 'disabled-upload': Boolean(detailValueList[scope.$index].file) }"
                  :file-list="scope.row.fileList" :before-upload="beforeImageUpload" :headers="headers"
                  :on-remove="(file, fileList) => handleRemove(file, fileList, scope.$index)"
                  :on-success="(response, file) => handleUploadSuccess(response, file, scope.$index)"
                  :on-exceed="handleExceed" :on-preview="() => handlePictureCardPreview2(scope.row.file)"
                  :show-file-list="Boolean(detailValueList[scope.$index].file)" :action="uploadImgUrl">
                  <el-button size="small" v-if="!detailValueList[scope.$index].file">上传图片</el-button>
                </el-upload>
              </template>
            </el-table-column>
            <el-table-column label="装潢图片" width="220px" v-else show-overflow-tooltip>
              <template slot-scope="scope">
                <span v-if="scope.row.fileList.length > 0" @click="handlePictureCardPreview2(scope.row.file)"
                  class="link-type">{{ scope.row.fileName }}</span>
              </template>
            </el-table-column>

            <el-table-column label="配置排序" width="220px">
              <template slot-scope="scope">
                <el-input-number type="input" v-model="scope.row.sortNumber" :min="1" placeholder="请输入"
                  :controls="false" :max="99999999" :disabled="disableFlag"></el-input-number>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <!--          <div class="button-group" v-if="type != 'view'">-->
        <!--            <el-button @click="cancel">取消</el-button>-->
        <!--            <el-button type="primary" @click="submitDataScope('form')" v-if="!disableFlag">确认</el-button>-->
        <!--          </div>-->
      </div>
    </div>
    <el-dialog :visible.sync="dialogVisible" :title="$t('common.priview')" width="800" append-to-body>
      <img :src="dialogImageUrl" style="display: block; max-width: 100%; margin: 0 auto" />
    </el-dialog>
  </div>

</template>


<script>
import { getParabar, addParabar, updateParabar, getRelatedModelList, getCommmonPara, listParabarDetail } from "../../../api/business/crm/parabar/parabar";
import { getCommmonParaAndItem } from "../../../api/business/crm/parabar/parabar";
import { listModel } from "../../../api/business/crm/parabar/model";
import { listLibraryForParabar } from "../../../api/business/crm/paralibrary/library";
import { getToken } from "@/utils/auth";
import ElevatorModelTable from "../../components/ElevatorModelTable.vue";
import { listForComponents } from "../../../api/business/crm/elevatorModel";
import CustomButton from '../../../components/CustomElement/CustomButton'
import {downloadFileByPath} from "@/api/file/file.js";

export default {
  name: "ParabarView",
  dicts: ['decorate_flag', 'status_switch', 'para_category', 'input_type'],
  components: {
    CustomButton,
    ElevatorModelTable,
  },
  data() {
    return {
      basicInfo: {},
      relationEnters: [],
      dialogVisible: false,
      dialogImageUrl: "",
      headers: {
        Authorization: "Bearer " + getToken(),
      },
      // 文件上传上限
      limit: 1,
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      baseUrl: process.env.VUE_APP_BASE_FILE_URL,
      uploadImgUrl: process.env.VUE_APP_BASE_API + "/common/upload", // 上传的图片服务器地址
      // 图片上传格式
      fileType: ["jpg", "png", "jpeg"],
      // 配置list
      detailValueList: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 关联梯型下拉框选项list
      relatedModels: [],
      // 已选择的关联梯型
      selectedModelIds: [],
      // 关联参数穿梭框选项list
      relatedParas: [],
      // 已选的关联参数
      selectedParaIds: [],
      // 配置列表动态加载用的参数list
      selectedParaIdsDetail: [],
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        parabarId: null,
        parabarDetailName: null,
        sortNumber: null,
        status: null,
      },
      // 表单参数
      form: {
        parabarName: null,
        parabarNameUS: null,
        parabarNameRU: null,
        parabarNameES: null,
        decorateFlag: null
      },
      // 表单校验
      rules: {
        parabarName: [
          { required: true, message: '请输入参数包名称', trigger: "blur" }
        ],
        parabarNameUS: [
          { required: true, message: '请输入参数包名称(英)', trigger: "blur" }
        ],
        parabarNameRU: [
          { required: true, message: '请输入参数包名称(俄)', trigger: "blur" }
        ],
        parabarNameES: [
          { required: true, message: '请输入参数包名称(西)', trigger: "blur" }
        ],
        decorateFlag: [
          { required: true, message: '请选择是否装潢包', trigger: "blur" }
        ],
      },
      paraBarTitle: '',
      disableFlag: false,
      // 关联梯型下拉框
      relatedModelList: [],
      // 配置列表check信息
      detailCheckMsg: [],
      // 参数包ID
      parabarId: null,
      CommmonPara: [],
      selectCommmonPara: [],
      multipleSelection: [],
      //
    };
  },
  created() {
    this.language = this.$i18n.locale;
    this.initType();
    this.getRelatedModelList();
  },
  methods: {
    handleDeleteRow(val) {
      this.basicInfo.deleteRelationEnterIds = val
      // 获取删除后剩余的区域梯型
      this.selectedModelIds = this.$refs.relationEnters.tableData.map(item => item.elevatorModelId);
      this.relatedModelChange(this.selectedModelIds);
    },

    initType() {
      this.type = this.$route.query && this.$route.query.type;
      this.parabarId = this.$route.params && this.$route.params.id;
      switch (this.type) {
        case 'add':
          this.paraBarTitle = "新增参数包";
          break;
        case 'edit':
          this.paraBarTitle = "编辑参数包";
          this.getParabarInfo(this.parabarId);
          break;
        case 'view':
          this.paraBarTitle = "查看参数包";
          this.getParabarInfo(this.parabarId);
          break;
      }
      this.disableFlag = this.type == 'view';
    },
    /** 编辑/查看的场合，原参数包信息获取 */
    getParabarInfo(parabarId) {
      let id = parabarId;
      debugger

      getParabar(id).then(response => {
        this.form.parabarName = response.data.parabarName;
        this.form.parabarNameUS = response.data.parabarNameUS;
        this.form.parabarNameRU = response.data.parabarNameRU;
        this.form.parabarNameES = response.data.parabarNameES;
        this.form.decorateFlag = response.data.decorateFlag;
        this.form.updateTime = response.data.updateTime;

        let paramsForRelatedModel = {
          parabarId: response.data.id
        };

        // 获取关联梯型的值
        listModel(paramsForRelatedModel).then(response => {
          this.selectedModelIds = [];
          for (let i = 0; i < response.rows.length; i++) {
            this.selectedModelIds.push(response.rows[i].elevatorModelId);
          }
          // 关联梯形列表回显用data
          let paramForComponents = {
            selectedModelIds: this.selectedModelIds
          }
          listForComponents(paramForComponents).then(res => {
            this.relationEnters = res.rows;
          })

          // 获取关联参数的data
          this.relatedModelChange(this.selectedModelIds);

          // 获取该参数包的动态参数
          let params = {
            parabarId: id
          }
          listLibraryForParabar(params).then(response => {
            this.selectCommmonPara = response;
            for (let i = 0; i < response.length; i++) {
              this.selectedParaIds.push(response[i].id);
            }

            // 把获取到的动态参数反映到配置列表中
            this.sendParaIntoItemList();

            // 获取配置列表数据
            let paramsForDetailValue = {
              parabarId: id
            }
            listParabarDetail(paramsForDetailValue).then(response => {
              this.detailValueList = [];
              let detailFileList;
              for (let i = 0; i < response.length; i++) {

                if (response[i].file && response[i].file.length > 0) {
                  let fileName = this.getFileName(response[i].file);
                  let fileUrl = this.baseUrl + response[i].file;
                  detailFileList = [{ name: fileName, url: fileUrl }]
                } else {
                  detailFileList = [];
                }

                // 固定参数值编辑（配置名称、排序、状态）
                let param = {
                  id: response[i].id,
                  index: this.detailValueList.length,
                  parabarDetailName: response[i].parabarDetailName,
                  parabarDetailNameUS: response[i].parabarDetailNameUS,
                  parabarDetailNameRU: response[i].parabarDetailNameRU,
                  parabarDetailNameES: response[i].parabarDetailNameES,
                  status: response[i].status,
                  sortNumber: response[i].sortNumber,
                  fileId: response[i].fileId,
                  file: response[i].file,
                  fileList: detailFileList,
                  fileName: this.getFileName(response[i].file)
                }

                // 动态参数的值编辑
                for (let j = 0; j < response[i].parabarDetailValue.length; j++) {
                  param['param@' + response[i].parabarDetailValue[j].paraId + '@' + response[i].parabarDetailValue[j].paraCode + '@' + response[i].parabarDetailValue[j].paraName] = response[i].parabarDetailValue[j].paraValue;
                }
                this.detailValueList.push(param)
              }
              console.log("this.detailValueList::::", this.detailValueList)
            });
          });
        });

      })

    },
    // 从文件URL中获取文件名
    getFileName(fileNameUrl) {
      let fileName = '';
      if (fileNameUrl) {
        fileName = fileNameUrl.substring(fileNameUrl.lastIndexOf('/') + 1);
      }
      return fileName;
    },
    /** 多选 */
    handleSelectionChange(val) {
      this.multipleSelection = val;
      this.deleteDisabled = this.multipleSelection.length === 0;
    },
    beforeImageUpload(file) {
      const isJPG = file.type === "image/jpeg" || file.type === "image/png";
      const isLt5M = file.size / 1024 / 1024 < 5;
      if (!isJPG) {
        this.$message.error("上传图片只能是 JPG或PNG 格式!");
      }
      if (!isLt5M) {
        this.$message.error("上传图片不能超过5M!");
      }
      return isJPG;
    },
    /** 新增配置行 */
    addLine() {
      if (this.selectedParaIdsDetail.length == 0) {
        this.$message.error('请选择关联参数');
        return false;
      }

      let param = {
        index: this.detailValueList.length,
        parabarDetailName: "",
        parabarDetailNameUS: "",
        parabarDetailNameRU: "",
        parabarDetailNameES: "",
        status: '0',
        sortNumber: '1',
        file: null,
        fileList: [],
        fileName: ''
      }
      for (let i = 0; i < this.selectedParaIdsDetail.length; i++) {
        if (this.selectedParaIdsDetail[i].selectItemList && this.selectedParaIdsDetail[i].selectItemList[0]) {
          param['param@' + this.selectedParaIdsDetail[i].value + '@' + this.selectedParaIdsDetail[i].paraCode + '@' + this.selectedParaIdsDetail[i].label] = this.selectedParaIdsDetail[i].selectItemList[0].value
        } else {
          param['param@' + this.selectedParaIdsDetail[i].value + '@' + this.selectedParaIdsDetail[i].paraCode + '@' + this.selectedParaIdsDetail[i].label] = ''
        }
      }
      this.detailValueList.push(param)
    },
    /** 删除配置行 */
    deleteLine() {
      this.multipleSelection.forEach(detail => {
        this.detailValueList = this.detailValueList.filter(item => {
          return item.index !== detail.index;
        });
      });
      for (let i = 0; i < this.detailValueList.length; i++) {
        this.detailValueList[i].index = i;
      }
    },
    /**  获取关联梯型list */
    getRelatedModelList() {
      this.queryParams.language = this.$i18n.locale;
      let params;
      params = {
        language: this.queryParams.language,
      }
      getRelatedModelList(params).then(response => {
        this.relatedModelList = [];
        response.forEach(item => {
          this.relatedModelList.push(
            {
              value: item.parabarId,
              label: item.relatedModel,
              key: item.parabarId,
              areaId: item.areaId,
              elevatorType: item.elevatorType,
              elevatorModel: item.elevatorModel
            }
          )
        });
      });
    },
    // 关联梯型发生变化
    relatedModelChange(value) {
      let params;
      params = {
        language: this.$i18n.locale,
        relatedModel: value,
        modelCount: value.length,
      }
      getCommmonPara(params).then(response => {
        this.CommmonPara = response;
        console.log("response:", response)
        this.relatedParas = [];
        response.forEach(item => {
          this.relatedParas.push({
            value: item.paraId,
            label: item.paraName + ' [' + item.paraCategoryName + ']',
            key: item.paraId,
          })
        });
      });

      //
      let tempArray = [];
      for (let i = 0; i < this.selectedParaIds.length; i++) {
        if (this.arrayContainsKey(this.relatedParas, "value", this.selectedParaIds[i])) {
          tempArray.push(this.selectedParaIds[i]);
        }
      }
      this.selectedParaIds = tempArray;
      // 把获取到的动态参数反映到配置列表中
      this.sendParaIntoItemList();

    },
    arrayContainsKey(array, key, value) {
      return array.some(item => item[key] === value);
    },
    // 导入参数至配置列表
    async sendParaIntoItemList() {
      let params;
      params = {
        language: this.$i18n.locale,
        relatedModel: this.selectedModelIds,
        modelCount: this.selectedModelIds.length,
        selectedPara: this.selectedParaIds,
      }

      this.selectedParaIdsDetail = [];
      if (this.selectedParaIds.length > 0) {
        const response = await getCommmonParaAndItem(params)
        this.selectedParaIdsDetail = [];
        response.forEach(item => {
          this.selectedParaIdsDetail.push({
            value: item.paraId,
            label: item.paraName,
            key: item.paraId,
            paraCode: item.paraCode,
            inputType: item.inputType,
            selectItemList: item.selectItemList
          })
        });
        this.$forceUpdate()
      }

      const paramProps = this.selectedParaIdsDetail.map(item => 'param@' + item.value + '@' + item.paraCode + '@' + item.label)
      this.detailValueList.forEach(item => {
        Object.keys(item).forEach(key => {
          if (key.startsWith('param@') && !paramProps.includes(key)) {
            delete item[key]
          }
        })
      })


    },
    /** 提交表单submit */
    submitDataScope(form) {
      this.$refs["form"].validate(valid => {
        if (valid) {
          if (this.selectedModelIds.length == 0) {
            this.$message.error('请选择关联梯型');
            return false;
          }
          if (this.selectedParaIds.length == 0) {
            this.$message.error('请选择关联参数');
            return false;
          }
          this.detailCheckMsg = [];
          this.validateForDetail();
          if (this.detailCheckMsg.length > 0) {
            let msgMerge = "";
            this.detailCheckMsg.forEach(msg => {
              let rowIndex = msg.index + 1
              // this.$message.error( '配置列表第' + rowIndex + '行： ' + msg.msg);
              msgMerge = msgMerge + '配置列表第' + rowIndex + '行： ' + msg.msg + ";";
            });
            this.$message.error(msgMerge);
            return false;
          }

          // 以下为数据库更新
          let parabarVO = null;
          // 参数包信息
          parabarVO = {
            id: this.parabarId != 0 ? this.parabarId : null,
            parabarId: this.parabarId != 0 ? this.parabarId : null,
            parabarName: this.form.parabarName,
            parabarNameUS: this.form.parabarNameUS,
            parabarNameRU: this.form.parabarNameRU,
            parabarNameES: this.form.parabarNameES,
            decorateFlag: this.form.decorateFlag,
            updateTime: this.form.updateTime,
            selectedRrelatedModel: this.selectedModelIds,
            parabarDetail: [],
          }
          let parabarDetail = [];
          let index = 0;
          let parabarDetailValue = [];
          console.log("this.detailValueList", this.detailValueList)
          this.detailValueList.forEach(item => {
            let parabarDetailVO;
            parabarDetailVO = {
              parabarDetailName: null,
              parabarDetailNameUS: null,
              parabarDetailNameRU: null,
              parabarDetailNameES: null,
              sortNumber: null,
              status: null,
              file: null,
              fileId: 0,
              parabarDetailValue: [],
            };
            parabarDetailValue = [];
            let keys = Object.keys(item);
            for (let i = 0; i < keys.length; i++) {
              let key = keys[i];
              let array = key.split("@");
              if (array[0] === "param") {
                // 判断是否是穿梭框已选择的参数，如果不是扔掉
                if (this.selectedParaIds.find(v => v == array[1])) {
                  // 动态参数的编辑
                  parabarDetailValue.push({
                    paraId: array[1],
                    paraCode: array[2],
                    paraValue: item[key],
                  });
                }
              } else {
                //  固定参数（配置名称、排序、状态等）的编辑
                parabarDetailVO[key] = item[key];
              }
            }
            parabarDetailVO.parabarDetailValue = parabarDetailValue;
            parabarDetailVO.id = item.id
            console.log("parabarDetailVO ", parabarDetailVO)
            parabarDetail.push(parabarDetailVO);
          });

          console.log("parabarDetail", parabarDetail)
          parabarVO.parabarDetail = parabarDetail;
          console.log("parabarVO", parabarVO)
          if (this.parabarId != 0) {
            updateParabar(parabarVO).then(response => {
              if (response.code == 200) {
                this.$modal.msgSuccess('编辑成功');
                this.cancel();
              } else {
                this.$modal.msgError(response.msg);
              }
            })
          } else {
            addParabar(parabarVO).then(response => {
              if (response.code == 200) {
                this.$modal.msgSuccess('新增成功');
                this.cancel();
              } else {
                this.$modal.msgError(response.msg);
              }
            })
          }
        }
      });
    },
    // 校验配置列表
    validateForDetail() {
      let keys;
      this.detailCheckMsg = [];
      let index = 0;
      const names = []
      const namesES = []
      const namesRU = []
      const namesUS = []
      for (let j = 0; j < this.detailValueList.length; j++) {
        let detailValue = this.detailValueList[j];
        console.log("validateForDetail  detailValue:", detailValue)
        keys = Object.keys(detailValue);
       /* for (let i = 0; i < keys.length; i++) {
          let key = keys[i];
          if (!detailValue[key] && key != 'index' && key != 'file' && key != 'fileId' && key != 'fileList' && key != 'fileName') {
            this.detailCheckMsg.push({
              index: index,
              msg: '配置列表中项目不能为空'
            });
            break;
          }
        }*/
        const { parabarDetailName, parabarDetailNameES, parabarDetailNameRU, parabarDetailNameUS } = detailValue
        if (parabarDetailName) {
          if (names.includes(parabarDetailName)) {
            this.detailCheckMsg.push({
              index: index,
              msg: '配置名称不能重复'
            });
            break;
          } else {
            names.push(parabarDetailName)
          }
        }
        if (parabarDetailNameUS) {
          if (namesUS.includes(parabarDetailNameUS)) {
            this.detailCheckMsg.push({
              index: index,
              msg: '配置名称(英)不能重复'
            });
            break;
          } else {
            namesUS.push(parabarDetailNameUS)
          }
        }
        if (parabarDetailNameRU) {
          if (namesRU.includes(parabarDetailNameRU)) {
            this.detailCheckMsg.push({
              index: index,
              msg: '配置名称(俄)不能重复'
            });
            break;
          } else {
            namesRU.push(parabarDetailNameRU)
          }
        }
        if (parabarDetailNameES) {
          if (namesES.includes(parabarDetailNameES)) {
            this.detailCheckMsg.push({
              index: index,
              msg: '配置名称(西)不能重复'
            });
            break;
          } else {
            namesES.push(parabarDetailNameES)
          }
        }

        if (this.detailCheckMsg.length > 0) {
          return;
        }
        index++;
      }
    },
    /** 关闭当前页面 */
    cancel() {
      this.$tab.closePage();
    },
    // 字典值format
    formatDict(value, dictType) {
      let labelStr = '';
      for (let i = 0; i < this.dict.type[dictType].length; i++) {
        let item = this.dict.type[dictType][i]
        if (item.value == value) {
          labelStr = item.label;
          break;
        }
      }
      return labelStr;
    },

    // 以下为图片上传事件
    beforeRemove(file, fileList) {
      return this.$confirm(`确定移除 ${file.name}？`);
    },
    handleRemove(file, fileList, index) {
      this.detailValueList[index].fileList.splice(0, 1)
      this.$set(this.detailValueList[index], 'file', undefined);
    },
    handleExceed(files, fileList) {
      this.$modal.msgError(this.$t('common.fileCountAlert', [this.limit]));
    },
    // 预览
    handlePictureCardPreview(file) {
      if (file.fileName) {
        this.dialogImageUrl = process.env.VUE_APP_BASE_FILE_URL + file.fileName;
        this.dialogVisible = true;
      } else {
        this.dialogImageUrl = process.env.VUE_APP_BASE_FILE_URL + file.response.fileName;
        this.dialogVisible = true;
      }
    },
    async handlePictureCardPreview2(file) {
      this.dialogImageUrl = await downloadFileByPath(file);
      this.dialogVisible = true;
    },
    // 上传成功
    handleUploadSuccess(res, file, index) {
      if (res.code === 200) {
        this.$set(this.detailValueList[index], 'file', file.response.fileName || undefined);
      } else {
        this.$modal.msgError(res.msg);
        this.$set(this.detailValueList[index], 'file', undefined);
        this.detailValueList[index].fileList.splice(0, 1)
      }
    },
    handleModelTableConfirm(val) {
      this.relationEnters = [...val];
      this.selectedModelIds = this.$refs.relationEnters.tableData.map(item => item.elevatorModelId);
      this.relatedModelChange(this.selectedModelIds);
    },
  }
};
</script>
<style lang="scss" scoped>
::v-deep .parabar-form .el-form-item--medium .el-form-item__label {
  line-height: 10px;
}

::v-deep .el-form-item {
  margin-bottom: 20px;
}

::v-deep .upload-file-list .ele-upload-list__item-content {
  width: 500px;
}

::v-deep .upload {
  .upload-file-uploader {
    height: 0;
  }
}

.parabar-container {
  padding: 16px 1vw;

  .parabar-title {
    font-family: Arial, Arial;
    font-weight: bold;
    font-size: 18px;
    line-height: 21px;
  }

  .mt16 {
    margin-top: 16px;
  }

  .mb16 {
    margin-bottom: 16px;
  }

  .ml20 {
    margin-left: 1vw;
  }

  .contact-box {
    margin-bottom: 50px;
  }

  .col-padding-left {
    padding-left: 10px;
  }

  .col-padding-right {
    padding-right: 10px;
  }

  .max-width {
    max-width: 20vw;
  }

  .flex-center-left {
    display: flex;
    align-items: center;
    justify-content: left;
  }

  .parabar-select {
    margin: 16px 0;
  }

  .select-box {
    display: flex;
  }

  .select-item {
    cursor: pointer;
    margin-right: 10px;
    padding: 10px 20px;
    font-family: Arial, Arial;
    font-weight: bold;
    font-size: 18px;
    color: #3C485B;
    line-height: 21px;
    border: 1px solid transparent;
  }

  .selected {
    border-radius: 6px;
    background: #FFFFFF;
    box-shadow: 0px 2px 10px 0px #CED6DD;
    color: #D31017;
    border: 1px solid #D31017;
  }

  .content {
    width: 100%;
    display: flex;

    .card {
      background: #FFFFFF;
      box-shadow: 0px 2px 10px 0px #CED6DD;
      border-radius: 6px;
      padding: 20px;
    }

    .card-title {
      font-family: Arial, Arial;
      font-size: 16px;
      font-weight: bold;
      color: rgba(0, 0, 0, 0.85);
      line-height: 18px;
    }

    .card-base {
      width: 100%;
      position: relative;

      .button-group {
        position: absolute;
        bottom: 16px;
        right: 20px;
      }
    }

    .card-height {
      height: 1272px;
    }

    .card-mini {
      width: 43vw;
      height: 420px;
    }

    .card-full {
      width: 97.6vw;
    }
  }

  .item-size {
    width: 14px;
    height: 14px;
    margin-right: 6px;
  }
}

::v-deep .el-transfer-panel {
  width: 300px;
  height: 450px;
}

::v-deep .el-transfer-panel__list.is-filterable {
  height: 340px;
}

::v-deep .el-transfer-panel__body {
  height: 390px;
}

::v-deep .el-upload-list__item:first-child {
  margin-top: 0px;
}

::v-deep .disabled-upload .el-upload--text {
  display: none !important;
}

::v-deep .parabar-elevator-table .card-body {
  padding: 0;
}

::v-deep .el-input-number.is-without-controls .el-input__inner {
  text-align: left;
}

::v-deep .parabar-transfer .el-input {
  width: calc(100% - 30px);
}
</style>
