<template>
  <el-dialog :title="dialogListFromTiTle + $t('view.list')" :visible.sync="dialogListVisible" top="30px" :before-close="resetDialogList" :append-to-body="true" width="60%">
    <div class="obpm-title">
      <div class="d-inline-block">
        <el-tabs v-model="activeNameList" @tab-click="tabListClick">
          <el-tab-pane :label="$t('view.basic')" name="basicList"></el-tab-pane>
          <el-tab-pane :label="$t('view.format')" name="formatList"></el-tab-pane>
        </el-tabs>
      </div>
    </div>
    <div class="obpm-main mt-3" v-loading="loading">
      <div id="contentTable" class="dialog-content">
        <!-- 基本 -->
        <!-- <ViewColumnBasic /> -->
        <el-form :model="listFrom" :rules="rules" ref="listfrom" size="small" label-position="left" v-show="isBasicList" label-width="100px">
          <el-form-item :label="$t('view.list_name')"  prop="name">
            <el-input v-model="listFrom.name" autocomplete="off" class="width-400" ></el-input>
          </el-form-item>
          <el-form-item :label="$t('view.width')" >
            <el-input v-model="listFrom.width" autocomplete="off"  class="width-400" type='number'
            onKeypress="return (/[\d]/.test(String.fromCharCode(event.keyCode)))" :min="0"
            ></el-input>
            <span>px</span>
          </el-form-item>
          <el-form-item :label="$t('view.multi_language_tag')" >
            <el-input v-model="listFrom.multiLanguageLabel" autocomplete="off" class="width-400"  readonly></el-input>
            <el-button plain @click="showMultiLanguage('listFormMultiLang')" style="margin-left : 5px">{{$t('btns.choose')}}</el-button>
          </el-form-item>
          <el-form-item :label="$t('view.type')" >
            <el-radio-group v-model="listFrom.type" @change="changeType">
              <el-radio label="COLUMN_TYPE_FIELD">{{$t('view.field')}}</el-radio>
              <el-radio label="COLUMN_TYPE_SCRIPT">{{$t('view.script')}}</el-radio>
              <el-radio label="COLUMN_TYPE_OPERATE">{{$t('view.op')}}</el-radio>
              <el-radio label="COLUMN_TYPE_LOGO">{{$t('view.logo_url')}}</el-radio>
              <el-radio label="COLUMN_TYPE_ROWNUM">{{$t('view.row_num')}}</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item :label="$t('view.value_type')"  v-if="listFrom.type == 'COLUMN_TYPE_FIELD'">
            <el-radio-group v-model="listFrom.showType">
              <el-radio label="01">{{$t('view.text_value')}}</el-radio>
              <el-radio label="00">{{$t('view.real_value')}}</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item :label="$t('view.form')"  prop="formid" v-if="showFormField">
            <el-select v-model="listFrom.formid" :placeholder="$t('placeholder.select')" @change="fromChange" class="width-400" >
              <el-option v-for="item in fromOptions" :key="item.value" :label="item.label" :value="item.value"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item :label="$t('view.form_field')"  prop="fieldName" v-if="showFormField">
            <el-select v-model="listFrom.fieldName" :placeholder="$t('placeholder.select')" class="width-400" @change="changeFieldName">
              <el-option v-for="item in showfieldNameOptions" :key="item.id" :label="item.name" :value="item.id"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item :label="$t('view.form_field')" v-if="(currentDataSources.editMode == '02' || currentDataSources.editMode == '03') &&  listFrom.type == 'COLUMN_TYPE_FIELD'" prop="fieldName">
            <el-input v-model="listFrom.fieldName"  class="width-400" ></el-input>
          </el-form-item>
          <el-form-item :label="$t('view.default_sorting')"  v-if="listFrom.type == 'COLUMN_TYPE_FIELD'">
            <el-radio-group v-model="listFrom.isOrderByField">
              <el-radio label="false">{{$t('view.no')}}</el-radio>
              <el-radio label="true">{{$t('view.yes')}}</el-radio>
            </el-radio-group>
            <span class="color-success px-2">{{$t('view.same_time')}}</span>
          </el-form-item>
          <el-form-item :label="$t('view.order_by')"  v-if="listFrom.type == 'COLUMN_TYPE_FIELD'">
            <div class="width-400">
              <el-select v-model="listFrom.sortStandard" :placeholder="$t('placeholder.select')" class="marginR10" style="width: 49%">
                <el-option :label="$t('view.default_db')" value="00"></el-option>
                <el-option :label="$t('view.chinese')" value="01"></el-option>
              </el-select>
              <el-select v-model="listFrom.orderType" :placeholder="$t('placeholder.select')" style="width: 48%">
                <el-option :label="$t('view.asc')" value="ASC"></el-option>
                <el-option :label="$t('view.desc')" value="DESC"></el-option>
              </el-select>
            </div>
          </el-form-item>
          <el-form-item :label="$t('view.value_script')" v-if="listFrom.type == 'COLUMN_TYPE_SCRIPT'">
            <el-input v-model="listFrom.valueScript" autocomplete="off" type="textarea" class="width-400" 
            :placeholder="$t('placeholder.valueScript')"></el-input>
            <i class="el-icon-edit-outline" @click="showScriptEditor('valueScript')"></i>
          </el-form-item>
          <el-form-item :label="$t('view.name')"  v-if="listFrom.type == 'COLUMN_TYPE_OPERATE'" prop="buttonName">
            <el-input v-model="listFrom.buttonName" autocomplete="off" class="width-400" ></el-input>
          </el-form-item>
          <el-form-item :label="$t('view.op_type')"  v-if="listFrom.type == 'COLUMN_TYPE_OPERATE'">
            <el-select v-model="listFrom.buttonType" class="width-400" @change="changeOpType">
              <el-option :label="$t('view.del')" value="00"></el-option>
              <el-option :label="$t('view.submission_process')" value="01"></el-option>
              <el-option :label="$t('view.open_by_template_form')" value="03"></el-option>
              <el-option :label="$t('view.script')" value="04"></el-option>
              <el-option :label="$t('view.jump')" value="05"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item :label="$t('view.icon')" v-if="listFrom.type == 'COLUMN_TYPE_LOGO'">
            <img class="imgIcon" :src="setLogoUrl(listFrom.icon)" v-show="listFrom.icon"/>
            <el-button @click="selectTypeIcon" size="mini" plain type="primary">{{$t('btns.choose')}}</el-button>
            <IconSelect :visible.sync="iconSelectShow" :innerDialog="true"  @select-ok="onIconSelectShow"/>
            <el-button @click.prevent="clearTypeIcon" size="mini">{{$t('btns.clean')}}</el-button>
          </el-form-item>
          <el-form-item :label="$t('view.label_play')" v-if="showMobileLabel">
            <el-radio-group v-model="listFrom.showAsLabel">
              <el-radio :label="false">{{$t('view.no')}}</el-radio>
              <el-radio :label="true">{{$t('view.yes')}}</el-radio>
            </el-radio-group>
            <span class="color-success px-2">{{$t('view.support_phone')}}</span>
          </el-form-item>
          <el-form-item :label="$t('view.isfilter')">
            <el-radio-group v-model="listFrom.isFilter">
              <el-radio :label="false">{{$t('view.no')}}</el-radio>
              <el-radio :label="true">{{$t('view.yes')}}</el-radio>
            </el-radio-group>
          </el-form-item>
          
          <el-form-item :label="$t('view.btn_play')" v-if="showMobileButton">
            <el-radio-group v-model="listFrom.showAsButton">
              <el-radio :label="false">{{$t('view.no')}}</el-radio>
              <el-radio :label="true">{{$t('view.yes')}}</el-radio>
            </el-radio-group>
            <span class="color-success px-2">{{$t('view.support_phone')}}</span>
          </el-form-item>
          
          <el-form-item :label="$t('view.flow_Return_Css')"  v-if="showListFromFlowReturnCssAndSummaryAndIcon">
            <el-checkbox v-model="listFrom.flowReturnCss" @change="changeFlowReturnCss"></el-checkbox>
          </el-form-item>
          <div v-if="listFrom.flowReturnCss && listFrom.type == 'COLUMN_TYPE_FIELD'">
            <el-form-item :label="$t('view.image_Name')" >
              <el-select v-model="listFrom.imageName" :placeholder="$t('placeholder.select')" class="width-400">
                <el-option :label="$t('view.light')" value="01"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item :label="$t('view.font_Color')" >
              <!-- <el-checkbox v-model="listFrom.fontColor"></el-checkbox> -->
              <Color-Picker @setColor="setColor" :colorValue="listFrom.fontColor" valueLabel='listFrom.fontColor'></Color-Picker>
            </el-form-item>
          </div>
          <el-form-item :label="$t('view.sum')"  v-show="showListFromFlowReturnCssAndSummaryAndIcon">
            <el-checkbox v-model="listFrom.sum">{{$t('view.current_page_total')}}</el-checkbox>
            <el-checkbox v-model="listFrom.total">{{$t('view.grand_total')}}</el-checkbox>
          </el-form-item>
          <el-form-item :label="$t('view.template_form')" v-if="listFrom.type=='COLUMN_TYPE_OPERATE' &&listFrom.buttonType == '03'" prop="templateForm">
            <el-select v-model="listFrom.templateForm" :placeholder="$t('placeholder.select')" class="width-400">
              <el-option v-for="item in templateFormList" :key="item.id" :label="item.name" :value="item.id"></el-option>
            </el-select>
          </el-form-item>
          <!-- 映射 -->
          <el-form-item :label="$t('view.mapping')"  v-if="listFrom.buttonType == '05' && listFrom.type == 'COLUMN_TYPE_OPERATE'">
            <template>
              <el-form-item :label="$t('view.target_form')" prop="mappingform">
                <el-select v-model="listFrom.mappingform">
                  <el-option v-for="item in dataSourcesOptions" :key="item.id" :label="item.name" :value="item.id"></el-option>
                </el-select>
              </el-form-item>
              <el-table :data="listFrom.dispatcherParams">
                  <el-table-column min-width="40%" :label="$t('view.parametername')">
                    <template slot-scope="scope">
                      {{$t('view.from')}}:<el-input v-model="scope.row.paramKey" size="mini"></el-input>
                    </template>
                  </el-table-column>
                  <el-table-column min-width="40%" :label="$t('view.parametervalue')">
                    <template slot-scope="scope">
                      {{$t('view.to')}}:
                      <el-select v-model="scope.row.paramValue" style="width: 100%" size="mini">
                        <el-option v-for="item in listTableData" :key="item.id" :label="item.name" :value="item.id">{{item.name}}</el-option>
                      </el-select>
                    </template>
                  </el-table-column>
                  <el-table-column min-width="20%">
                    <template slot="header">
                      <el-button size="small" @click="addRows">{{$t('btns.add')}}</el-button>
                    </template>
                    <template slot-scope="scope">
                      <el-button size="mini" type="danger" @click="delRow(scope.$index)">{{$t("btns.delete")}}</el-button>
                    </template>
                  </el-table-column>
              </el-table>
            </template>
          </el-form-item>
          <el-form-item :label="$t('view.show_column_setup')" >
            <el-checkbox v-model="listFrom.visible">{{$t('view.visible')}}</el-checkbox>
            <el-checkbox v-model="listFrom.visible4ExpExcel">{{$t('view.visible4ExpExcel')}}</el-checkbox>
            <el-checkbox v-model="listFrom.visible4PagePrint">{{$t('view.visible4PagePrint')}}</el-checkbox>
            <div class="color-success px-2">*{{$t('view.can_use')}}</div>
          </el-form-item>
          <el-form-item :label="$t('view.show_icon')"  v-if="showListFromFlowReturnCssAndSummaryAndIcon">
            <el-checkbox v-model="listFrom.showIcon"></el-checkbox>
             <div v-if="listFrom.showIcon" class="icon-wrapper">
              <div class="d-flex flex-row ">
                <el-form-item class="text-center" style="width: 30%">
                  <span>{{$t('view.value')}}</span>
                </el-form-item>
                <el-form-item class="text-left" style="width: 30%">
                  <span>{{$t('view.icon')}}</span>
                </el-form-item>
                <el-form-item class="addBtn" style="width: 39%">
                  <el-button @click="addIcon" size="mini" type="primary">{{$t('btns.add')}}</el-button>
                </el-form-item>
              </div>
              <el-form-item
                v-for="(icon, index) in listFrom.icons"
                :key="icon.key"
                :prop="'icons.' + index + '.iconValue'"
                :rules="{
                  required: true,
                  message: $t('msg.value_notnull'),
                  trigger: 'blur',
                }"
              >
                <el-input v-model="icon.iconValue" style="width: 30%" size="mini"></el-input>
                <img class="imgIcon" :src="setLogoUrl(icon.imgUrl)" ref="iconImg" v-show="icon.imgUrl" />
                <span class="btnWrapper">
                  <el-button @click="selectIconImg(icon, index)" size="mini" plain type="primary">{{$t('btns.add')}}{{$t('menu.icon')}}</el-button>
                  <el-button @click.prevent="clearIconImg(icon)" size="mini">{{$t('btns.clean')}}</el-button>
                </span>
                <span class="delBtn">
                  <el-button @click.prevent="removeIcon(icon)" size="mini" type="danger">{{$t("btns.delete")}}</el-button>
                </span>
                <IconSelect :visible.sync="listFrom.iconSelectCheck" @select-ok="onSelectIconOk" :innerDialog="true" />
              </el-form-item>
            </div>
          </el-form-item>
          <!-- 图标的表单内容 -->
        
          <el-form-item :label="$t('view.actionscript')" v-if="listFrom.buttonType == '04'">
            <el-input 
              v-model="listFrom.actionScript" 
              autocomplete="off" 
              type="textarea" 
              class="width-400"
              :rows="3"
              :placeholder="$t('placeholder.action_script')"
              ></el-input>
            <i class="el-icon-edit-outline" @click="showScriptEditor('listFromActionScript')"></i>
          </el-form-item>
          <!-- 动作执行前脚本 -->
          <el-form-item :label="$t('view.before_action_script')" v-if="listFrom.type=='COLUMN_TYPE_OPERATE' &&listFrom.buttonType == '00'">
            <el-input 
              v-model="listFrom.beforeScript" 
              autocomplete="off" 
              type="textarea" 
              class="width-400"
              :placeholder="$t('placeholder.boolean_value')"
              ></el-input>
            <i class="el-icon-edit-outline" @click="showScriptEditor('listFromBeforeScript')"></i>
          </el-form-item>
          <el-form-item :label="$t('view.hidden_script')" >
            <el-input 
              v-model="listFrom.hiddenScript" 
              autocomplete="off" 
              type="textarea" 
              class="width-400"
              :placeholder="$t('placeholder.boolean_value')"
              ></el-input>
            <i class="el-icon-edit-outline" @click="showScriptEditor('listFromHiddenScript')"></i>
          </el-form-item>
          
          <!-- 只在日历视图显示 -->
          <el-form-item :label="$t('view.month_play')" v-if="currentDataSources.intValue == 16">
            <el-checkbox v-model="listFrom.showMoon"></el-checkbox><span style="color: red">{{$t('view.no_config')}}</span>
          </el-form-item>
          <el-form-item :label="$t('view.mapping_field')" v-if="currentDataSources.intValue != 20 && currentDataSources.intValue != 1">
            <el-select v-model="listFrom.mappingField" class="width-400" :disabled="mappingFiledDisables">
              <el-option :label="$t('placeholder.select')" value></el-option>
              <!-- 日历视图 -->
              <div v-if="currentDataSources.intValue == 16">
                <el-option
                  v-for="item in calendarData"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </div>
              <!-- 地图视图 -->
              <div v-if="currentDataSources.intValue == 18">
                <el-option
                  v-for="item in mapData"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </div>
              <!-- 树形视图 -->
              <div v-if="currentDataSources.intValue == 17">
                <el-option
                  v-for="item in treeData"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </div>
              <!-- 甘特视图 -->
              <div v-if="currentDataSources.intValue == 19">
                <el-option
                  v-for="item in ganttData"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </div>
            </el-select>
            <span :style="{ color: 'red' }" v-if="currentDataSources.intValue == 16">{{$t('view.calendar')}}</span>
            <span :style="{ color: 'red' }" v-else-if="currentDataSources.intValue == 17">{{$t('view.tree')}}</span>
            <span :style="{ color: 'red' }" v-else-if="currentDataSources.intValue == 18">{{$t('view.map')}}</span>
            <span :style="{ color: 'red' }" v-else-if="currentDataSources.intValue == 19">{{$t('view.gantt')}}</span>
          </el-form-item>
        </el-form>

        <!-- 格式 -->
        <el-form ref="form" :model="formatList" size="small" label-position="right" v-show="isFormat">
          <el-form-item :label="$t('view.type')">
            <div class="format-dashed">
              <div class="format-regin">
                <el-select v-model="formatList.formatType" :placeholder="$t('placeholder.area')" @change="formatTypeChange">
                  <el-option :label="$t('view.simple')" value="simple"></el-option>
                  <el-option :label="$t('view.number')" value="number"></el-option>
                  <el-option :label="$t('view.currency')" value="currency"></el-option>
                </el-select>
              </div>
              <div class="format-show">
                <div class="format-title">{{$t('view.case')}}</div>
                <div v-show="isSimple">
                  <div>{{$t('view.filed_one')}}</div>
                  <div class="color-success px-2">{{$t('view.format_normal_explain')}}</div>
                </div>
                <div v-show="isNumber">
                  <template>
                    <div>{{ decimalsNumValue }}</div>
                  </template>
                  <div>
                    <span>{{$t('view.decimal_digits')}}:</span>
                    <el-select v-model="formatList.decimalsNum" :placeholder="$t('placeholder.select')" @change="decimalsNumChange">
                      <el-option v-for="item in decimalsNumOptions" :key="item.value" :value="item.value" :label="item.label"></el-option>
                    </el-select>
                  </div>
                  <div>
                    <el-checkbox v-model="formatList.thouSign" @change="thouSignChange"></el-checkbox>
                    <span class="px-2">{{$t('view.thousandsign')}}</span>
                  </div>
                  <div>{{$t('view.format_number_explain')}}</div>
                </div>
                <div v-show="isCurrency">
                  <template>
                    <div>{{ decimalsCurrSymbol }}{{ decimalsCurrValue }}</div>
                  </template>
                  <div>
                    <span>{{$t('view.decimal_digits')}}:</span>
                    <el-select v-model="formatList.decimalsCurr" :placeholder="$t('placeholder.select')" @change="decimalsCurrChange">
                      <el-option v-for="item in decimalsCurrOptions" :key="item.value" :value="item.value" :label="item.label"></el-option>
                    </el-select>
                  </div>
                  <div>
                    <span>{{$t('view.currency_type')}}:</span>
                    <el-select v-model="formatList.currType" @change="currTypeChange">
                      <el-option value="zh_CN" :label="$t('view.rmb')"></el-option>
                      <el-option value="en_US" :label="$t('view.en')"></el-option>
                      <el-option value="ja_JP" :label="$t('view.jp')"></el-option>
                      <el-option value="en_GB" :label="$t('view.gb')"></el-option>
                    </el-select>
                  </div>
                  <div>{{$t('view.format_currency_explain')}}</div>
                </div>
              </div>
            </div>
          </el-form-item>
          <el-form-item :label="$t('view.font')">
            <div class="format-dashed">
              <div class="format-regin">
                <el-row>
                  <span>{{$t('view.color')}}:</span>
                  <Color-Picker @setColor="setColor" :colorValue="formatList.color" valueLabel='formatList.color' class="top10"></Color-Picker>
                </el-row>
                <el-row>
                  <span>{{$t('view.bg')}}:</span>
                  <Color-Picker @setColor="setColor" :colorValue="formatList.groundColor" valueLabel='formatList.groundColor' class="top10"></Color-Picker>
                </el-row>
                <el-row>
                  <span>{{$t('view.size')}}:</span>
                  <el-select v-model="formatList.fontSize" :placeholder="$t('placeholder.select')">
                    <el-option v-for="item in fontSizeOptions" :key="item.value" :label="item.label" :value="item.value"></el-option>
                  </el-select>
                </el-row>
              </div>
              <div class="format-show">
                <span class="format-title">{{$t('view.example')}}</span>
                {{formatList.fontSize}}
                <div class="format-exampleSpan" :style="{ color: formatList.color, backgroundColor: formatList.groundColor, fontSize: formatList.fontSize + 'px' }">{{$t('view.filed_one')}}</div>
              </div>
            </div>
          </el-form-item>
          <el-form-item :label="$t('view.display_type')">
            <el-radio-group v-model="formatList.displayType">
              <el-radio label="00">{{$t('view.all')}}</el-radio>
              <el-radio label="01">{{$t('view.part')}}</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item :label="$t('view.display_length')" v-if="formatList.displayType == '01'" prop="displayLength" :key="displayLength">
            <el-input v-model="formatList.displayLength" class="width-400" type="number" min="0" onKeypress="return (/[\d]/.test(String.fromCharCode(event.keyCode)))"></el-input>
            <span class="color-success px-2">{{$t('view.must')}}</span>
          </el-form-item>
          <el-form-item :label="$t('view.show_text')">
            <el-checkbox v-model="formatList.showTitle"></el-checkbox>
          </el-form-item>
        </el-form>
      </div>
    </div>
    <div slot="footer" class="dialog-footer">
      <el-button size="small" @click="resetDialogList">{{$t('btns.cancel')}}</el-button>
      <el-button type="primary" size="small" @click="saveNewListFrom('listfrom')">{{$t('btns.save_new')}}</el-button>
      <el-button type="primary" size="small" @click="saveListFrom('listfrom')">{{$t('btns.confirm')}}</el-button>
    </div>

    <!-- 多语言弹窗 -->
    <!-- multiVisible: 弹框显示  closeMultiLanguage： 关闭前回调  selectRowValue：选择行  isNested：是否为内置嵌套的弹窗 languageData: 多语言数据  delMultiLanguage：删除多语言  changeLanguageParams：参数改变 -->
    <MultiLanguages 
      :multiVisible="languagesVisible" 
      @closeMultiLanguage="languagesVisible = false" 
      @selectRowValue="handelMultiLanguage"
      :isNested="true"
      :languageData="languageData"
      @delMultiLanguage="delMultiLanguage"
      @changeLanguageParams="changeLanguageParams"
      @resetMultiLanguage="resetMultiLanguage"
    />

    <!-- 脚本选择器弹窗 -->
    <!-- scriptEditorVisible:弹窗显示   showScritptEditorCode：将文本框的值传给编译器  handleScriptEditor：将编译器的值传给textarea-->
    <ScriptEditorSelect
      v-if="scriptEditorVisible"
      :scriptEditorVisible="scriptEditorVisible"
      :editorCode="showScritptEditorCode"
      @closeScriptEditorDialog="scriptEditorVisible = false"
      @saveScriptEditor="handleScriptEditor"
      :isNested="true"
    />
  </el-dialog>
</template>

<script>
import { getFormValueStoreFields, updateColumnsView, saveColumnsView } from "@/service/ViewApi.js";
import { getLogoUrl } from "@/service/CommontoolsAPI.js";
import { getMultiLanguageList, deleteMultiLanguageList } from "@/service/MultiLanguageAPI.js";
import { getModuleFormList,getFieldData } from "@/service/FormApi.js";

// import ViewColumnBasic from '@/components/modulesDetail/ViewColumnBasic'

import ColorPicker from "@/components/Common/ColorPicker";
import MultiLanguages from "@/components/Common/languages_select";
import ScriptEditorSelect from "@/components/Common/scriptEditor";
import IconSelect from "@/components/Common/icon_select";
import { nameCheck } from "@/utils/utils.js";
import config from '@/assets/json/config.json'
import configData from  '@/assets/js/config'
import {delMsg} from '@/utils/elementui'
export default {
  data() {
    let templateFormCheck = (rule,value,callback) =>{
      if(this.listFrom.buttonType=='03' && !value){
        callback(new Error(this.$t('msg.cant_null')))
      }else{
        callback();
      }
    }
    return {
      activeNameList: "basicList", //列标签切换
      isBasicList: true, //列标签基本
      isFormat: false, //列标签格式

      rules: {
        //校验
        name: [
          { required: true, message: this.$t('placeholder.name'), trigger: "blur" },
          { validator: nameCheck, trigger: "blur" },
        ],
        formid: [{ required: true, message: this.$t('msg.select_gold_form'), trigger: "blur" }],
        fieldName: [
          { required: true, message: this.$t('msg.set_field'), trigger: "blur" },
        ],
        buttonName: [
          { required: true, message: this.$t('placeholder.name'), trigger: "blur" },
          { validator: nameCheck, trigger: "blur" },
        ],
        templateForm:[
          { validator: templateFormCheck, trigger: "change" },
        ],
        mappingform: [{ required: true, message:this.$t('msg.select_gold_form'), trigger: "blur" }],
      },

      iconSelectShow: false, // 类型为图标时显示

      fieldNameOptions: [], //表单字段
      templateFormList: [], // 模板表单
      fromOptions: [], //表单数组

      languagesVisible: false, // 多语言弹窗
      currentMultiLanguage: "", // 当前点击的是哪一个多语言弹窗
      languageData: {}, // 多语言数据
      languageParams:{
        label:'',
        text:'',
        type:'',
        currpage: 1,
        pagelines: 10,
      },
      calendarData: configData.calendarData,
      mapData: configData.mapData,
      treeData: configData.treeData,
      ganttData: configData.ganttData,

      currentDataSources: {},

      scriptEditorVisible: false, // 脚本编辑器弹窗

      isSimple: true, //类型常规显示
      isNumber: false, //类型数值显示
      isCurrency: false, //类型货币显示
      decimalsNumOptions: config.decimalsCurrOptions, //数值小数位数组

      decimalsNumValue: "1234.0", //数值
      decimalsCurrValue: "1234.0", //货币
      decimalsCurrSymbol: "￥", //货币符号
      decimalsCurrOptions: config.decimalsCurrOptions, //货币小数位数组

      fontSizeOptions: config.fontSizeOptions,
      dataSourcesOptions: [], // 目标表单

      loading: true,
      mappingFiledDisables:true,//标识日历视图的映射字段是否可选择
      isCustomIcon:false,//接收是否为自定义图标上传
    };
  },
  components: {
    ColorPicker,
    MultiLanguages,
    ScriptEditorSelect,
    IconSelect,
    // ViewColumnBasic
  },
  created(){
    this.getListFrom();
    this.currentDataSources = this.$store.state.currentDataSourcesOption;
  },
  methods: {
    /**
     * 获取列表单的表单模块和表单字段
     */
    getListFrom () {
      let params = {
        moduleId: this.$route.query.moduleId,
        name:'',
        description: "",
        type:'',
        pageNo: 1,
        linesPerPage: 10000,
      };
      this.loading = true;
      getModuleFormList(params, {
        onSucess: (response) => {
          if (response.data.errcode == 0) {
            this.loading = false;
            this.fromOptions = [];
            let dataArr = [];
            let data = response.data.data.datas;
            for (let i = 0; i < data.length; i++) {
              if (data[i].id == this.$store.state.currentDataSourcesOption.relatedForm) {
                let arr = {};
                arr.value = data[i].id;
                arr.label = data[i].name;
                this.fromOptions.push(arr);
              }
              if (data[i].type == 1) {
                dataArr.push(data[i]);
              } else if (data[i].type == 65536) {
                dataArr.push(data[i]);
              }else if(data[i].type == 1048576){ // 模板表单
                this.templateFormList.push(data[i])
              }
            }
            this.dataSourcesOptions = dataArr; // 普通表单和映射表单的数组
            if((this.currentDataSources.editMode == '02' || this.currentDataSources.editMode == '03') &&  this.listFrom.type == 'COLUMN_TYPE_FIELD'){
               this.mappingFiledDisables = false;
              }
          }
        },
      });
    },

    /**
     * 视图列类型切换
     */
    changeType(){
      // 重置流程回退标识，标识图像，字体颜色
      this.listFrom.flowReturnCss = false
      this.listFrom.imageName = ''
      this.listFrom.fontColor = ""
      this.$nextTick(() => this.$refs['listfrom'].clearValidate())
    },
    /**
     * 视图操作类型切换
     */
    changeOpType(){
      if(this.listFrom.type=='COLUMN_TYPE_OPERATE'&&this.listFrom.buttonType=='03'){
        if(this.templateFormList.length>0){
           this.listFrom.templateForm=this.templateFormList[0].id
        }
      }
    },
    /**
     * 重置流程回退标识为false的内容
     */
    changeFlowReturnCss(){
      this.listFrom.imageName = ''
      this.listFrom.fontColor = ""
    },
    /**
     * 列模块标签切换
     */
    tabListClick(row) {
      if (row.name == "formatList") {
        this.isBasicList = false;
        this.isFormat = true;
        if(this.formatList.formatType=='number'){
          this.isNumber=true;
          this.isCurrency=false;
          this.isSimple=false;
        }else if(this.formatList.formatType=='currency'){
          this.isNumber=false;
          this.isCurrency=true;
          this.isSimple=false;
        }else{
          this.isNumber=false;
          this.isCurrency=false;
          this.isSimple=true;
        }
      } else {
        this.isBasicList = true;
        this.isFormat = false;
      }
    },

    /**
     * 列表单保存并新建
     */
    saveNewListFrom(listfrom) {
      this.saveListFrom(listfrom,'andnew')
    },
    
    /**
     * 列表单更新
     */
    saveListFrom(listfrom, type) {
      this.$refs[listfrom].validate((valid) => {
        if (valid) {
          // 判断列宽是否为负值
          if(this.listFrom.width.indexOf('-')!= -1) return this.$message.error(this.$t('cant_minus'))
          if (this.listFrom.icons.length > 0) {
            this.listFrom.iconMapping = this.formatIconMapping(this.listFrom.icons);
          }else{
            this.listFrom.iconMapping=''
          }
          // 列-【类型】操作-【操作类型】跳转-映射
          if(this.listFrom.type == 'COLUMN_TYPE_OPERATE' && this.listFrom.buttonType == '05'){
            // 判断映射的内容是否为空
            let mapFlag = false;
            this.listFrom.dispatcherParams.some(item => {
              if(item.paramKey == '' && item.paramValue != ''){
                this.$message.error(this.$t('msg.params_name'))
                mapFlag = true
              }else if(item.paramKey != '' && item.paramValue == ''){
                item.paramKey = ''
              }
            })
            if(mapFlag) return false
          }

          if(this.listFrom.icon){
            let index = this.listFrom.icon.lastIndexOf('/')
            this.listFrom.icon = this.listFrom.icon.slice(index);
          }
          let params = {
            appId: sessionStorage.getItem("appId"),
            moduleId: "",
            viewId: this.viewId,
            viewType: "",
          };
          // 列同名自动补位
          if(!this.listFromColumnId){
            // 不是编辑加排序
            let len = this.$parent.listTableData.length;
            this.listFrom.orderno = len==0?0:this.$parent.listTableData[len - 1].orderno+1;
            // this.listFrom.orderno = this.$parent.listTableData.length
            // console.log("final orderno:"+this.listFrom.orderno);
            // 同名时自动补位
            let index=1;
            let indexFlag = 0
            this.$parent.listTableData.map((elm)=>{
              if(elm.name === this.listFrom.name){
                indexFlag = 1
              }else if(elm.name.search(new RegExp(eval("/"+ this.listFrom.name+'_[0-9]*'+'/')))!=-1){ // 匹配到有_的值
                index++;
                indexFlag = 2
              }
            })
            switch(indexFlag){
              case 1:
                this.listFrom.name = this.listFrom.name + '_1';
                break;
              case 2:
                this.listFrom.name = this.listFrom.name + '_' + index;
                break;
              default:
                break;
            }
          }

          // 判断文字长度是否为空
          if(this.formatList.displayType == '01' && !this.formatList.displayLength){
            this.$message.error(this.$t('msg.long'))
            return false
          }
          //判断文字长度是否含有小数点
          if((this.formatList.displayLength).indexOf('.')!=-1){
            this.$message.error(this.$t('msg.inputInt'))
            return false;
          }

          let listForm = {
            ...this.listFrom,
            jumpMapping: this.formatJumpMapping(this.listFrom.dispatcherParams),
            parentView:this.viewId,
          }
          delete listForm.dispatcherParams

          // 兼容旧数据的颜色缺少#
          let formatList = {
            ...this.formatList,
            color: this.changeColor(this.formatList.color, false),
            groundColor: this.changeColor(this.formatList.groundColor, true),
          }
          
          let datJson = JSON.parse((JSON.stringify(listForm) + JSON.stringify(formatList)).replace(/}{/, ","));
          //判断是否自定义图标
          if( this.isCustomIcon ){
            datJson.customIcon=true
          }else datJson.customIcon=false
          // 判断是新建的确认还是编辑的确认
          if (this.dialogListFromTiTle === this.$t('form.edit')) {
            // 编辑确认为更新
            updateColumnsView(params, this.listFromColumnId, datJson, {
              onSucess: (response) => {
                if (response.data.errcode == 0) {
                  if(this.currentDataSources.intValue == 17){
                    this.$message.success(this.$t('msg.successfully'))
                  }else{
                    this.$message({
                      message: this.$t('msg.ss'),
                      type: "success",
                    });
                  }
                  
                  // 判断弹窗是否关闭
                  if(type=='andnew'){
                    this.$parent.create()
                  }else{
                    this.$emit("closeListDialog");
                  }
                  this.$parent.columnsList(this.viewId);
                  // 更新initData的relationForm
                  this.$parent.initData.viewtype = this.currentDataSources.intValue
                }
              },
            });
          } else {
            // 新建确认为添加
            saveColumnsView(params, datJson, {
              onSucess: (response) => {
                if (response.data.errcode == 0) {
                  if(this.currentDataSources.intValue == 17){
                    this.$message.success(this.$t('msg.successfully'))
                  }else{
                    this.$message({
                      message: this.$t('msg.ss'),
                      type: "success",
                    });
                  }
                  
                  // 判断弹窗是否关闭
                  if(type=='andnew'){
                    this.$parent.create()
                  }else{
                    this.$emit("closeListDialog");
                  }
                  this.$parent.columnsList(this.viewId);
                  this.$parent.initData.viewtype = this.currentDataSources.intValue
                }
              },
            });
            // console.log(datJson);
          }
        } else {
          return false;
        }
      });
    },

    /**
     * 表单选择
     */
    async fromChange(val) {
      let type=new Map();
      await getFieldData(val,{
        onSucess: (response) => {
          if (response.data.errcode == 0) {
            let arr_type=response.data.data
            response.data.data.forEach((elm)=>{
              type.set(elm.name,elm.type)
            })
        let flag = false
        getFormValueStoreFields(val, {
        onSucess: (response) => {
          if (response.data.errcode == 0) {
            let list = [];
            let arr = response.data.data;
            for (let key in arr) {
              let obj = {};
              obj.id = key;
              obj.name = arr[key];
              if(type.get(obj.name)){
                obj.type=type.get(obj.name)
              }else if(obj.name=='$表单创建时间'){
                obj.type='VALUE_TYPE_DATE'
              }else{
                obj.type=null;
              }
             if((obj.name).indexOf('$')!=-1) list.push(obj);
              // 判断有没有那个值的存在
              if(this.listFrom.fieldName == key){
                flag = true
                continue;
              }
            }
           for(let i=0;i<arr_type.length;i++){
	            let obj1 = {};
              obj1.id = arr_type[i].name;
              obj1.name =arr_type[i].name;
              if(type.get(obj1.name)){
                obj1.type=type.get(obj1.name)
              }else if(obj1.name=='$表单创建时间'){
                obj1.type='VALUE_TYPE_DATE'
              }else{
                obj1.type=null;
              }
             list.push(obj1);
              // 判断有没有那个值的存在
              if(this.listFrom.fieldName ==arr_type[i].name){
                flag = true
                continue;
              }
           }
            this.fieldNameOptions = list;
            
            // 如果没有当前的表单字段就清空值
            if(!flag){
              // this.listFrom.fieldName = ''
              console.log(" no clear fieldName for dynamic fields...");
            }

            //判断当前字段是否可以映射
            for (let i = 0; i < list.length; i++) {
              if(this.listFrom.fieldName == list[i].id && list[i].type == 'VALUE_TYPE_DATE' && this.currentDataSources.intValue == 16){
                this.mappingFiledDisables = false;
              }else if (this.listFrom.fieldName == list[i].id && this.currentDataSources.intValue == 16) {
                this.mappingFiledDisables = true;
              }else if (this.listFrom.fieldName == list[i].id ) {
                this.mappingFiledDisables = false
              }    
            }
          }
        },
      });
          }
        }
      })

    },
    /**
     *改变表单字段的时候
     */
    changeFieldName(val){
      for(let i=0;i<this.fieldNameOptions.length;i++){
        if(this.fieldNameOptions[i].id==val && this.fieldNameOptions[i].type=='VALUE_TYPE_DATE' && this.currentDataSources.intValue == 16){
          this.mappingFiledDisables=false;
        } else if (this.fieldNameOptions[i].id==val && this.currentDataSources.intValue == 16) {
          this.mappingFiledDisables=true;
        }else {
          this.mappingFiledDisables=false;
        }
      }
    },

    /**
     * 动作为跳转时添加的参数
     */
    addRows(){
      this.listFrom.dispatcherParams.push({ paramKey: "", paramValue: "" });
    },
    /**
     * 动作为跳转时删除的参数
     */
    delRow(index){
      this.listFrom.dispatcherParams.splice(index, 1)
    },

    /**
     * 格式化按图标显示的值【arr2str】
     */
    formatIconMapping(targetArr) {
        let str = "";
        targetArr.map((item) => {
          str += item.iconValue + ":" + item.imgUrl + ";";
        });
        str = str.substring(0, str.length - 1);

        if(str.indexOf(':') == 0){
          str = ""
        }
        return str;
      
    },

    /**
     * 格式化映射参数
     */
    formatJumpMapping(targetArr) {
        let str = "";
        targetArr.map((item) => {
          str += item.paramKey + ":" + item.paramValue + ";";
        });
        str = str.substring(0, str.length - 1);

        if(str.indexOf(':') == 0){
          str = ""
        }
        return str;
      
    },

    /**
     * 显示多语言弹框
     */
    showMultiLanguage(val) {
      this.languagesVisible = true;
      this.currentMultiLanguage = val;
      this.getMultiLanguagetions()
    },

    /**
     * 多语言列表
     */
    async getMultiLanguagetions() {
      let appId = sessionStorage.getItem("appId");
      
      const response = await getMultiLanguageList(this.languageParams, appId);
      if (response.data.errcode == 0) {
        let list = response.data.data;
        if(list.data == null){
          list.data = []
        }
        list.data.map((item) => {
          if (item.type == 1) {
            item.language = "English";
          } else if (item.type == 2) {
            item.language = "简体中文";
          } else if (item.type == 3) {
            item.language = "繁體中文";
          }
        });
        this.languageData = list;
      }
    },

    /**
     * 删除多语言
     */
    async delMultiLanguage(arr){
      try{
        await delMsg(this.$t('msg.delConfirm'), this.$t('msg.tip'))
        const response = await deleteMultiLanguageList(arr)
        if (response.data.errcode == 0) {
          this.$message.success(this.$t('msg.remove_ss'));
          this.getMultiLanguagetions();
        }
      }catch(e){
        console.log(e)
      }
    },

    /**
     * 多语言参数改变时重新请求
     */
    changeLanguageParams(params){
      this.languageParams = params
      this.getMultiLanguagetions()
    },

    /**
     * 清空多语言的值
     */
    resetMultiLanguage(){
      this.listFrom.multiLanguageLabel = ''
    },

    /**
     * 选择多语言的值
     */
    handelMultiLanguage(row) {
      if (this.currentMultiLanguage === "listFormMultiLang") {
        this.listFrom.multiLanguageLabel = row.label;
      }
    },

    /**
     * 视图列类型为图标
     */
    selectTypeIcon() {
      this.iconSelectShow = true
    },

    /**
     * 视图列类型为图标清空图标图片
     */
    clearTypeIcon(){
      this.listFrom.icon = ''
    },
    //显示的时候要加上contextpath
    setLogoUrl(url){
      return getLogoUrl(url)
    },
    /**
     * 视图列类型为图标选择成功字体图标
     */
    onIconSelectShow(item,flag){
      this.isCustomIcon=flag?true:false;
      if (item && item.path) {
        this.listFrom.icon = item.path;
      } else {
        this.$message({
          showClose: true,
          type: "error",
          message: this.$t('msg.select_fail'),
        });
      }
    },

    /**
     * 视图列选择自定义图标
     */
    selectIconImg(icon, index) {
      this.listFormIconsIndex = index;
      this.listFrom.iconSelectCheck = true;
    },
    /**
     * 视图列清空按图标显示
     */
    removeIcon(item) {
      var index = this.listFrom.icons.indexOf(item);
      if (index !== -1) {
        this.listFrom.icons.splice(index, 1);
      }
    },
    
    /**
     * 视图列添加多个按图标显示的表单
     */
    addIcon() {
      this.listFrom.icons.push({
        value: "", // 值
        key: Date.now(),
        imgUrl: "", // 图标地址
      });
    },

    /**
     * 视图列清空选择后的图标图片
     */
    clearIconImg(icon) {
      icon.imgUrl = "";
    },
    
    /**
     * 字体图标组件成功选择图片
     */
    onSelectIconOk(item) {
      if (item && item.path) {
        this.listFrom.icontype = "img";
        this.listFrom.icons[this.listFormIconsIndex].imgUrl = item.path;
      } else {
        this.$message({
          showClose: true,
          type: "error",
          message: this.$t('msg.select_fail'),
        });
      }
    },
    /**
     * 显示脚本编辑器弹框
     */
    showScriptEditor(val) {
      this.scriptEditorVisible = true;
      this.currentScriptEditor = val;
    },

    /**
     * 将脚本编辑器的值写入到textarea中
     */
    handleScriptEditor(val) {
      if (this.currentScriptEditor === "listFromHiddenScript") {
        // 视图列隐藏条件
        this.listFrom.hiddenScript = val;
      }else if(this.currentScriptEditor === "listFromActionScript"){
        this.listFrom.actionScript = val;
      }else if(this.currentScriptEditor === "valueScript"){
        this.listFrom.valueScript = val;
      }else if(this.currentScriptEditor === "listFromBeforeScript"){
        this.listFrom.beforeScript = val;
      }
    },

    /**
     * 视图列新建编辑弹窗关闭
     */
    resetDialogList() {
      this.$parent.intViewColumnData()
      this.$emit("closeListDialog");
      this.activeNameList = "basicList";
      this.isBasicList = true;
      this.isFormat = false;
    },
    
    //格式

    /**
     * 设置颜色
     */
    setColor(val,label) {
      this[label.split(".")[0]][label.split(".")[1]]=val
    },

    /**
     * 转换颜色
     */
    changeColor(color, bg=false){
      if(color){
        if(color.indexOf('rgba')!= -1){
          return color
        }else{
          if(color.includes('#'))
            return color
          else
            if(bg) return "rgba(255, 255, 255, 0)"
            else return "rgba(0, 0, 0, 1)"
        }
      }else{
        return "rgba(255, 255, 255, 0)"
      }
    },

    /**
     * 视图列格式类型选择
     */
    formatTypeChange(val) {
      this.isSimple = false;
      this.isNumber = false;
      this.isCurrency = false;
      if (val == "simple") {
        this.isSimple = true;
      } else if (val == "number") {
        this.isNumber = true;
      } else {
        this.isCurrency = true;
      }
    },
    /**
     * 视图列格式数值小数点
     */
    decimalsNumChange(val) {
      let num = 1234;
      this.decimalsNumValue = num.toFixed(val);
    },
    /**
     * 视图列格式数值千位符
     */
    thouSignChange(val) {
      let newThouSign = "";
      let thouSign = this.decimalsNumValue;
      if (val) {
        if (typeof thouSign === "number") {
          newThouSign = thouSign.toFixed(this.formatList.decimalsNum).replace(/(\d)(?=(\d{3})+\.)/g, "$1,");
        } else if (typeof thouSign === "string") {
          newThouSign = parseInt(thouSign)
            .toFixed(this.formatList.decimalsNum)
            .replace(/(\d)(?=(\d{3})+\.)/g, "$1,");
        }
        this.decimalsNumValue = newThouSign;
      } else {
        this.decimalsNumValue = thouSign.replace(/,/gi, "");
      }
    },
    /**
     * 视图列格式货币小数点
     */
    decimalsCurrChange(val) {
      let num = 1234;
      this.decimalsCurrValue = num.toFixed(val);
    },
    /**
     * 视图列格式货币类型
     */
    currTypeChange(val) {
      if (val == "zh_CN") {
        this.decimalsCurrSymbol = "￥";
      } else if (val == "en_US") {
        this.decimalsCurrSymbol = "$";
      } else if (val == "ja_JP") {
        this.decimalsCurrSymbol = "￥";
      } else {
        this.decimalsCurrSymbol = "£";
      }
    },
  },
  computed: {
    /**
     * 以标签的形式显示
     */
    showMobileLabel(){
      let flag;
      if (this.listFrom.type === "COLUMN_TYPE_FIELD" || this.listFrom.type === "COLUMN_TYPE_SCRIPT") {
        flag = true;
      } else {
        flag = false;
      }
      return flag;
    },

    /**
     * 以按钮的形式显示
     */
    showMobileButton(){
      let flag;
      if (this.listFrom.type === "COLUMN_TYPE_OPERATE" || this.listFrom.type === "COLUMN_TYPE_SCRIPT") {
        flag = true;
      } else {
        flag = false;
      }
      return flag;
    },

    /**
     * 视图列流程回退&&汇总&&图标显示
     */
    showListFromFlowReturnCssAndSummaryAndIcon() {
      let flag;
      if (this.listFrom.type === "COLUMN_TYPE_FIELD" || this.listFrom.type === "COLUMN_TYPE_SCRIPT") {
        flag = true;
      } else {
        flag = false;
      }
      return flag;
    },

    /**
     * 脚本编辑器的值
     */
    showScritptEditorCode() {
      let code;
      if (this.currentScriptEditor === "listFromHiddenScript") {
        // 视图列隐藏条件
        code = this.listFrom.hiddenScript;
      }else if(this.currentScriptEditor === "listFromActionScript"){
        code = this.listFrom.actionScript
      }else if(this.currentScriptEditor === "valueScript"){
        code = this.listFrom.valueScript
      }else if(this.currentScriptEditor === "listFromBeforeScript"){
        code = this.listFrom.beforeScript
      }
      return code;
    },

    /**
     * 显示表单和表单字段
     */
    showFormField(){
      let flag = false
      if(this.listFrom.type == 'COLUMN_TYPE_FIELD' && this.currentDataSources.editMode != '02' && this.currentDataSources.editMode != '03'){
        flag = true
      }
      return flag
    },
    /**
     * 判断视图列的表单字段的数组是否清空
     * 
     */
    showfieldNameOptions(){
      if(!this.listFrom.formid)
        return []
      else
        return this.fieldNameOptions
    },
  },
  props: {
    dialogListVisible: Boolean,
    dialogListFromTiTle: String,
    listFrom: Object,
    listFromColumnId: String,
    formatList: Object,
    viewId: String,// 当前视图id
    listTableData:Array,
  },
};
</script>
