eta_front/src/views/dataEntry_manage/addChart.vue

<template>
  <div class="addchart-container" id="box">
    <span
      class="slide-icon slide-right"
      @click="isSlideLeft = !isSlideLeft"
      v-show="isSlideLeft"
    >
      <i class="el-icon-d-arrow-right"></i>
    </span>
    <div class="left-cont" v-show="!isSlideLeft" id="left">
      <div class="left-top">
        <el-button 
					type="primary" 
					@click="saveHandle"
					:disabled="chartInfo.ChartType === 5 && tableData.length !== 2"
				><!-- 保存 -->{{$t('Dialog.confirm_save_btn')}}</el-button>
        <el-button type="primary" plain @click="$router.back()"><!-- 取消 -->{{$t('Dialog.cancel_btn')}}</el-button>
      </div>
			<div class="left-min">

				<el-form
					ref="diaForm"
					label-position="top"
					label-width="80px"
					:model="chartInfo"
					:rules="chartRules"
				>
					<el-form-item :label="$t('EtaChartAddPage.label_chart_type')" prop="ChartType">
						<chartTypeSelect v-model="chartInfo.ChartType" style="width:90%"/>
					</el-form-item>

					<el-form-item :label="$t('EtaChartAddPage.label_chart_theme')" prop="Theme">
						<el-select
							v-model="chartInfo.ChartThemeId"
							placeholder="请选择图表主题"
							style="width: 90%"
							@change="changeThemeHandle"
						>
							<el-option
								v-for="item in chartThemeArr"
								:key="item.ChartThemeId"
								:label="item.ChartThemeName"
								:value="item.ChartThemeId"
							>
							</el-option>
						</el-select>
					</el-form-item>

					<el-form-item label="">
						<div class="search-cont" v-if="![10,14].includes(chartInfo.ChartType)">
							<div>
								<label><!-- 选择指标 -->{{$t('Edb.choose_edb')}}：</label>
								<el-radio-group v-model="edbFromType">
									<el-radio :label="0" style="margin-right: 15px"><!-- ETA指标 -->{{$t('Edb.eta_name')}}</el-radio>
									<el-radio :label="1"><!-- ETA预测指标 -->{{$t('Edb.eta_predictor_name')}}</el-radio>
								</el-radio-group>
							</div>
							<el-select
								v-model="search_txt"
								v-loadMore="searchLoad"
								ref="searchRef"
								:filterable="!search_txt"
								remote
								clearable
								:placeholder="$t('Edb.InputHolderAll.input_name_orid')"
								style="width:90%;margin-top: 10px;display: block;"
								:remote-method="searchHandle"
								@click.native="inputFocusHandle"
								@change="selectTarget($event && searchOptions.find(_ => _.EdbInfoId === $event))"
							>
								<i slot="prefix" class="el-input__icon el-icon-search"></i>
								<el-option
									v-for="item in searchOptions"
									:key="item.EdbInfoId"
									:label="chart_lang==='en'?(item.EdbNameEn||item.EdbName):item.EdbName"
									:value="item.EdbInfoId"
									:disabled="!item.HaveOperaAuth"
								>
									<edbDetailPopover :info="item">
										<div slot="reference">
											<img 
												:src="$icons.lock_ico2" 
												width="18" 
												height="18" 
												style="vertical-align:middle" 
												v-if="!item.HaveOperaAuth"
											/>
											{{chart_lang==='en'?(item.EdbNameEn||item.EdbName):item.EdbName }}
										</div>
									</edbDetailPopover>
								</el-option>
							</el-select>
						</div>
					</el-form-item>

					<el-form-item :label="$t('Chart.Detail.chart_name')" prop="ChartName">
						<el-input
							v-model="chartInfo.ChartName"
							style="width: 90%"
							:placeholder="$t('Dialog.require_vaild')"
							clearable
						/>
					</el-form-item>
					<!-- 图表别名 -->
					<el-form-item :label="$t('Chart.Detail.chart_alias')" prop="ChartAlias" v-if="[1,4,5,6,11,14].includes(chartInfo.ChartType)">
						<el-input
							v-model="chartInfo.ChartAlias"
							style="width: 90%"
							:placeholder="$t('Chart.InputHolderAll.input_common',{label:$t('Chart.Detail.chart_alias')})"
							clearable
						/>
						<el-tooltip effect="dark" placement="right">
							<div
								slot="content"
								style="line-height: 20px;width:300px"
								>{{$t('Chart.OptMsg.set_chart_alias')}}</div>
							<i class="el-icon-question" style="color: #666" />
						</el-tooltip>
					</el-form-item>
					<el-form-item :label="$t('Chart.Detail.chart_classify')" prop="classify">
						<el-cascader
							v-model="chartInfo.classify"
							:options="classifyOptions"
							:props="{
								label: currentLang==='en'?'ChartClassifyNameEn':'ChartClassifyName',
								value: 'ChartClassifyId',
								children: 'Children',
							}"
							style="width: 90%"
							:placeholder="$t('Chart.InputHolderAll.input_classify')"
						/>
					</el-form-item>
					<el-form-item :label="$t('Chart.Detail.chart_unit')" prop="Unit" v-if="[7,11].includes(chartInfo.ChartType)">
						<el-select
							v-model="chartInfo.Unit"
							filterable
							allow-create
							default-first-option
							clearable
							@change="changeUnit"
							:placeholder="$t('Chart.InputHolderAll.input_common',{label:$t('Chart.Detail.chart_unit')})">
							<el-option
								v-for="item in UnitOptions"
								:key="item.label"
								:label="item.label"
								:value="item.value">
							</el-option>
						</el-select>
					</el-form-item>
				</el-form>

				<div class="xaxis-range-cont" v-if="chartInfo.ChartType===2 && tableData && tableData.length>0">
					<!-- 仅用于季节性图配置 -->
					<div style="margin-bottom: 12px;" class="xaxis-range-tip">
						{{$t('EtaChartAddPage.label_xserie_range')}}<!-- 横坐标显示范围 --> 
						<el-tooltip>
							<div slot="content" v-html="$t('EtaChartAddPage.xserie_range_tip')">
							</div>
							<img src="~@/assets/img/icons/question_mark_black.png" style="height: 16px;cursor: pointer;margin-left: 6px;" />
						</el-tooltip>
					</div>
					<el-date-picker
						style="width: 45%;"
						v-model="SeasonExtraConfig.XStartDate"
						value-format="MM-dd"
						popper-class="x-range-picker-date"
						format="MM-dd"
						:placeholder="$t('Common.ph_time_start')"
						@change="xAxisChange"
						:clearable="false"
					></el-date-picker>
					<el-date-picker
						style="width: 45%;"
						v-model="SeasonExtraConfig.XEndDate"
						value-format="MM-dd"
						popper-class="x-range-picker-date"
						format="MM-dd"
						:placeholder="$t('Common.ph_time_end')"
						@change="xAxisChange"
						:clearable="false"
					></el-date-picker>
					<el-checkbox 
						:label="$t('EtaChartAddPage.label_cross_year')" 
						v-model="isSpanYear" 
						:disabled="isSpanYearDisable"
						style="margin-top: 12px;" 
						@change="changeIsSpanYear"
					></el-checkbox>
					<br />
					<div class="legend-set-text" @click="openLegendEditDia">
						<span>{{$t('EtaChartAddPage.label_legend_set')}}<!-- 图例名称设置 --></span>
						<img src="~@/assets/img/icons/edit-blue.png" />
					</div>
				</div>

				<div class="targetset-cont">
					<!-- 仅用于散点图配置 -->
					<div class="scatter-setting" v-if="chartInfo.ChartType === 5 && tableData.length">
						<div style="display: flex;margin-right: 15px;">
							<span style="margin-right: 3px"><!-- 散点颜色： -->{{$t('Chart.Detail.scatter_color')}}：</span>
							<el-color-picker
								v-model="tableData[0].ChartColor"
								size="mini"
								show-alpha
								:predefine="predefineColors"
							></el-color-picker>
						</div>
						<el-checkbox v-model="tableData[0].IsOrder"><!-- 逆序 -->{{$t('Chart.Detail.re_order')}}</el-checkbox>
					</div>
					
					<!-- 配置区  柱形 截面 雷达不需要-->
          <el-collapse v-model="activeNames" class="target-list" v-if="tableData.length&&![7,10,11,14].includes(chartInfo.ChartType)">
            <el-collapse-item v-for="(item,index) in tableData" :key="item.EdbInfoId" :disabled="[2,5].includes(chartInfo.ChartType)">
              <template slot="title">
                <span class="text_oneLine">{{currentLang==='en'?(item.EdbNameEn||item.EdbName):item.EdbName}}</span>
								<!-- 当为季节性图的第二个轴时,隐藏删除按钮 -->
								<i class="el-icon-delete del-icon" @click.stop="delTarget(item)" v-if="!(chartInfo.ChartType===2&&index===1)"></i>
              </template>
              <ul class="setting-cont" v-if="sameOptionType.includes(chartInfo.ChartType)">

								<!-- 堆叠图 或组合图中的堆叠类型 非第一项隐藏配置 -->
								<template v-if="showYOptionsHandle(item,index)">
									<li>
										<el-checkbox v-model="item.IsOrder"><!-- 逆序 -->{{$t('Chart.Detail.re_order')}}</el-checkbox>
									</li>
									<li>
										<el-radio-group v-model="item.IsAxis" size="mini" @input="isChangeEdbAxis=true">
											<el-radio-button :label="1"><!-- 左轴 -->{{$t('Chart.Detail.l_axis')}}</el-radio-button>
											<el-radio-button :label="0"><!-- 右轴 -->{{$t('Chart.Detail.r_axis')}}</el-radio-button>

											<!-- 指标有右轴时才可以选右2轴 不然没有右2这个概念的意义 -->
											<el-radio-button 
												v-if="[1,6].includes(chartInfo.ChartType)"
												:label="2" 
												:disabled="(tableData.findIndex(_ => _.IsAxis===0) === -1) 
												|| (tableData.findIndex(_ => _.IsAxis===0) === index 
														&& tableData.filter(_ => _.IsAxis===0).length === 1)"
											><!-- 右2轴 -->{{$t('Chart.Detail.rtwo_axis')}}</el-radio-button>
										</el-radio-group>
									</li>
								</template>
                <li style="min-width: 250px">
                  <el-radio
                    v-model="item.EdbInfoType"
                    :label="1"
                    @change="getPreviewSplineInfo"
                    ><!-- 标准指标 -->{{$t('Chart.Detail.stand_lead')}}</el-radio
                  >
                  <div style="margin-top: 15px">
                    <el-radio
                      v-model="item.EdbInfoType"
                      :label="0"
                      style="margin-right: 10px"
                      @change="getPreviewSplineInfo"
                      ><!-- 领先指标 -->{{$t('Chart.Detail.leading_lead')}}</el-radio
                    >
                    <template v-if="item.EdbInfoType === 0">
                      <!-- 领先 -->{{$t('EtaChartAddPage.label_lead')}}
                      <el-input
                        style="width: 60px"
                        size="mini"
                        type="number"
												min="0"
                        v-model="item.LeadValue"
                        @change="getPreviewSplineInfo"
                        @keyup.native="filterCode(item)"
                      ></el-input>
                      <el-select
                        v-model="item.LeadUnit"
                        placeholder=""
                        style="width: 60px"
                        size="mini"
                        @change="getPreviewSplineInfo"
                      >
                        <el-option
                          v-for="item in fre_options"
                          :key="item"
                          :label="item"
                          :value="item"
                        >
                        </el-option>
                      </el-select>
                    </template>
                  </div>
                </li>
                <li>
                  <div style="display: flex">
                    <span style="margin-right: 3px"><!-- 线条颜色 -->{{$t('Chart.Detail.line_color')}}：</span>
                    <el-color-picker
                      v-model="item.ChartColor"
                      size="mini"
											show-alpha
                      :predefine="predefineColors"
                    ></el-color-picker>
                  </div>
									<div style="display: flex;margin-top: 12px" v-if="item.EdbInfoCategoryType === 1">
                    <span style="margin-right: 3px"><!-- 预测值颜色 -->{{$t('Chart.Detail.predict_color')}}：</span>
                    <el-color-picker
                      v-model="item.PredictChartColor"
                      size="mini"
											show-alpha
                      :predefine="predefineColors"
                    ></el-color-picker>
                  </div>
                  <div 
										style="margin-top: 12px" 
										v-if="chartInfo.ChartType === 1 
										|| (chartInfo.ChartType === 6 &&item.ChartStyle==='spline')"
									>
                    <!-- 线条粗细 -->{{$t('Chart.Detail.line_size')}}：
                    <el-input
                      style="width: 60px"
                      size="mini"
                      type="number"
                      :min="1"
                      v-model="item.ChartWidth"
                    />
                  </div>
                </li>
                <li v-if="chartInfo.ChartType === 6">
                  <div style="display: flex">
                    <span style="margin-right: 3px"><!-- 生成样式 -->{{$t('Chart.label_create_sty')}}：</span>
                    <el-select
											v-model="item.ChartStyle"
											placeholder="请选择生成样式"
											style="width: 50%"
											class="edb-item-style"
										>
											<el-option
												v-for="item in chartItemStyleArr"
												:key="item.key"
												:label="item.label"
												:value="item.value"
											>
											</el-option>
										</el-select>
                  </div>
                </li>
              </ul>
							<div style="margin: 10px;text-align: center;color: #999;" v-else><!-- 暂无配置 -->{{$t('EtaChartAddPage.no_set_msg')}}</div>
            </el-collapse-item>
          </el-collapse>

					<!-- 奇怪柱状图配置 雷达图也要用 -->
					<bar-option
						v-if="[7,11].includes(chartInfo.ChartType)"
						ref="BarOptRef"
						:chartInfo="chartInfo"
						:edblist="tableData"
						:datedata="chartInfo.ChartType===7?barDateList:radarChartData.YDataList"
						@getData="barOptionPreviewMap"
					/>

					<!-- 截面散点图 -->
					<sectional-scatter-option
						v-if="chartInfo.ChartType===10"
						ref="SectionScatterOptRef"
						:chartInfo="chartInfo"
						@getData="getSectionScatterData"
						@modifySeriesName="IsNameDefault = false"
					/>

					<!-- 截面组合图 -->
					<sectional-combination-option 
						ref="sectionalCombinationIns"
						v-if="chartInfo.ChartType===14"
						:chartInfo="chartInfo"
						:defaultData="sectionalCombinationData"
						@getData="getSectionalCombination"
						@hideChart="tableData=[];"
						@updateChart="handleUpdateSectionalCombinationChart"
					/>


					<!-- 标识区 标记线 图表说明 -->
					<markersSection
						v-if="tableData.length"
						ref="markerSectionRef"
						:chartInfo="chartInfo"
						:tableData="tableData"
						@update="setChartMarkerInfo"
						@updateSeason="updateSeasonChart"
						@previewSeason="previewSeasonChart"
						@previewSeasonRight="previewSeasonRight"
					/>
        </div>

			</div>
      <span
        class="move-btn resize"
        v-drag
        id="resize"
      ></span>
      <span class="slide-icon slide-left" @click="isSlideLeft = !isSlideLeft">
				<i class="el-icon-d-arrow-left"></i>
			</span>
    </div>
    <div class="right-cont" id="right" :style="isSlideLeft ? 'width:100%' : `width:80%`">
			<div class="chart-min-cont" v-if="tableData.length">
				<div class="cont-top">
					<div class="top-left">
						<!-- 默认曲线图 -->
						<template v-if="sameOptionType.includes(chartInfo.ChartType)">
							<el-button
								type="primary"
								v-for="item in yearSelector"
								:key="item.value"
								size="medium"
								:plain="item.value !== year_select"
								class="year-btn"
								@click.native="changeYear(item)"
								>{{ item.name }}</el-button
							>
							<el-button type="text" class="btn-sty" @click="openDateDia">{{
								dateTip
							}}</el-button>
						</template>
						<!-- 季节性图选择年份区间 -->
						<!-- <date-picker
							v-else-if="chartInfo.ChartType === 2"
							v-model="season_year"
							type="month"
							value-type="format"
							range
							placeholder="年份日期选择"
							@change="seasonYearChange"
						/> -->
						<div v-else-if="chartInfo.ChartType === 2" @click="openDateDia" class="date-setting">
							{{ season_year && season_year.length>0 ? season_year[0]+'~'+season_year[1]:"年份日期选择" }}
						</div>
					</div>
				</div>
				<div class="cont-bottom">
					<div class="chart-show-cont" v-show="options.series">
						<div class="chartWrapper" id="chartWrapper">
							<h2 
								class="chart-title" 
								v-show="chartInfo.ChartName"
								:style="`
									textAlign:${JSON.parse(chartInfo.ChartThemeStyle).titleOptions.align};
									fontSize:${JSON.parse(chartInfo.ChartThemeStyle).titleOptions.style.fontSize}px;
									color:${JSON.parse(chartInfo.ChartThemeStyle).titleOptions.style.color}
								`"
							>
								{{ chartInfo.ChartName }}
							</h2>

							<Chart :options="options" :chartInfo="chartInfo" ref="chartRef"/>
							<!-- <div class="range-cont left" v-if="leftIndex != -1">
								<el-input
									style="width: 60px; display: block"
									size="mini"
									type="number"
									placeholder="上限"
									v-model="tableData[leftIndex].MaxData"
								/>
								<el-input
									class="min-data-input"
									size="mini"
									type="number"
									placeholder="下限"
									v-model="tableData[leftIndex].MinData"
								/>
							</div>
							<div class="range-cont right" v-if="rightIndex != -1">
								<el-input
									style="width: 60px; display: block"
									size="mini"
									type="number"
									placeholder="上限"
									v-model="tableData[rightIndex].MaxData"
								/>
								<el-input
									class="min-data-input"
									size="mini"
									type="number"
									placeholder="下限"
									v-model="tableData[rightIndex].MinData"
								/>
							</div>
							<div class="range-cont rightTwo" v-if="rightTwoIndex != -1">
								<el-input
									style="width: 60px; display: block"
									size="mini"
									type="number"
									placeholder="上限"
									v-model="tableData[rightTwoIndex].MaxData"
								/>
								<el-input
									class="min-data-input"
									size="mini"
									type="number"
									placeholder="下限"
									v-model="tableData[rightTwoIndex].MinData"
								/>
							</div> -->
							<!-- 需求:曲线图、堆积柱状图、组合图加入新指标时上下限自动调整 -->
							<template v-if="![7,10,11].includes(chartInfo.ChartType)">
								<div class="range-cont left" v-if="leftIndex !== -1">
									<el-input
										style="width: 60px; display: block"
										size="mini"
										type="number"
										placeholder="上限"
										v-model="chartLimit.max"
										@change="changeLimit"
									/>
									<el-input
										class="min-data-input"
										size="mini"
										type="number"
										placeholder="下限"
										v-model="chartLimit.min"
										@change="changeLimit"
									/>
								</div>
								<div class="range-cont right" v-if="rightIndex !== -1">
									<el-input
										style="width: 60px; display: block"
										size="mini"
										type="number"
										placeholder="上限"
										v-model="chartLimit.rightMax"
										@change="changeLimit"
									/>
									<el-input
										class="min-data-input"
										size="mini"
										type="number"
										placeholder="下限"
										v-model="chartLimit.rightMin"
										@change="changeLimit"
									/>
								</div>
								<!-- 右2上下限设置 -->
								<div class="range-cont rightTwo" v-if="rightTwoIndex !== -1">
									<el-input
										style="width: 60px; display: block"
										size="mini"
										type="number"
										placeholder="上限"
										v-model="chartLimit.rightTwoMax"
										@change="changeLimit"
									/>
									<el-input
										class="min-data-input"
										size="mini"
										type="number"
										placeholder="下限"
										v-model="chartLimit.rightTwoMin"
										@change="changeLimit"
									/>
								</div>
							</template>

							<!-- 后续新图专用上下限 和其他数据依赖不公用 柱形图 截面散点-->
							<template v-if="[7,10,11].includes(chartInfo.ChartType)">	
								<div class="range-cont left">
									<el-input
										style="width: 60px; display: block"
										size="mini"
										type="number"
										placeholder="上限"
										v-model="chartLimit.max"
										@change="changeLimit"
									/>
									<el-input
										class="min-data-input"
										size="mini"
										type="number"
										placeholder="下限"
										v-model="chartLimit.min"
										@change="changeLimit"
									/>
								</div>
								<!-- x轴上下限 -->
								<div class="range-cont bottom" v-if="chartLimit.x_min||chartLimit.x_max">
									<el-input
										class="left"
										size="mini"
										type="number"
										placeholder="下限"
										v-model="chartLimit.x_min"
										@change="changeLimit"
									/>
									<el-input
										class="left"
										size="mini"
										type="number"
										placeholder="上限"
										v-model="chartLimit.x_max"
										@change="changeLimit"
									/>
								</div>
							</template>
						</div>

						<div class="chart-bottom-insruction-info">

							<div class="chart-source">
								<span
									v-if="chartInfo.SourcesFrom"
									:style="`
									color: ${JSON.parse(chartInfo.SourcesFrom).isShow ? JSON.parse(chartInfo.SourcesFrom).color : '#999'};
									fontSize: ${ JSON.parse(chartInfo.SourcesFrom).fontSize }px;
								`"
								><!-- 来源 -->{{$t('Chart.Detail.source')}}:{{ JSON.parse(chartInfo.SourcesFrom).text}}
								</span>

								<el-switch
									v-if="chartInfo.SourcesFrom"
									v-model="chartInfo.SourcesFromVisable"
									:active-value="true"
									:inactive-value="false"
									style="margin:0 15px;"
									@change="changeSourceVisable"
								/>
								<span class="editsty" @click="isShowSourceDialog=true"><!-- 编辑 -->{{$t('Chart.chart_edit_btn')}}</span>
							</div>

							<!-- 是否堆积 -->
							<div v-if="showIsHeap">
								<span>{{$t('EtaChartAddPage.bar_stacking')}}</span>
								<el-tooltip
                  :content="$t('EtaChartAddPage.stack_tips')"
                  placement="top"
                >
                  <i class="el-icon-info"></i>
                </el-tooltip>
                <el-switch
                  style="margin-left: 20px"
                  v-model="IsHeap"
									@change="handleHeapChange"
                >
                </el-switch> 
							</div>


							<!-- 公历农历切换 只用于季节性图 -->
							<el-radio-group
								v-model="calendar_type"
								class="calendar-cont"
								v-if="chartInfo.ChartType === 2"
								@change="getPreviewSplineInfo"
							>
								<el-radio-button label="公历">{{$t('Chart.calendar_gre')}}</el-radio-button>
								<el-radio-button label="农历">{{$t('Chart.calendar_lunar_text')}}</el-radio-button>
							</el-radio-group>

							<!-- 图表说明 -->
							<div 
								class="chart-instruction" 
								v-if="chartInfo.Instructions&&JSON.parse(chartInfo.Instructions).isShow"
								v-text="JSON.parse(chartInfo.Instructions).text"
								:style="`
									color: ${JSON.parse(chartInfo.Instructions).color};
									fontSize: ${ JSON.parse(chartInfo.Instructions).fontSize }px
								`"
							></div>
						</div>


						<span class="chart-author"
							><!-- 作者 -->{{$t('Chart.Detail.author')}}:{{ chartInfo.SysUserRealName || roleName }}</span
						>
					</div>
					
					<!-- 关联指标 -->
					<chartRelationEdbList
						:chartInfo="chartInfo"
						:tableData="tableData"
						:updateData="updateData"
						@changeTableData="changeTableData"
						@delTarget="delTarget"
						@copyCode="copyCode"
						@viewTarget="viewTarget"
					/>
				</div>
      </div>
			<div class="nodata" v-else>
				<tableNoData :text="$t('Common.no_info_msg')"/>
			</div>
		</div>

		<!-- 日期端选择弹窗 -->
    <DateChooseDia
      :isDateDia="isDateDia"
      :dateForm="dateForm"
			:earliestDate="earliestDate"
      @cancel="isDateDia = false"
      @dateBack="dataChangeBack"
    />

		<!-- 季节性 图例设置 -->
		<LegendEditDia
      :isEditLegend="legendEditDiaShow"
			:legendList="SeasonExtraConfig.ChartLegend"
      @cancel="legendEditDiaShow = false"
      @saveLegend="saveLegend"
    />

		<!-- 数据来源编辑弹窗 -->
		<chartSourceEditDia
			:isShow.sync="isShowSourceDialog"
			:chartInfo="chartInfo"
			@update="value => {chartInfo.SourcesFrom=JSON.stringify({...value,isShow:chartInfo.SourcesFromVisable})}"
		/>
  </div>
</template>

<script>
import { dataBaseInterface } from '@/api/api.js';
import { chartSetMixin } from './mixins/chartPublic';
import {unitSelectList} from '@/utils/defaultOptions.js';
import addOrEditMixn from './mixins/addOreditMixin';
import Chart from './components/chart';
import DateChooseDia from './components/DateChooseDia';
import barOption from './components/barOptionSection.vue';
import sectionalScatterOption from './components/sectionalScatterOption.vue';
import LegendEditDia from './components/LegendEditDia.vue';
import markersSection from './components/markersSection.vue';
import chartSourceEditDia from './components/chartSourceEditDialog.vue';
import chartRelationEdbList from './components/chartReleationEdbTable.vue';
import sectionalCombinationOption from './components/sectionalCombination/sectionalCombinationOption.vue';
export default {
  components: { 
		Chart,
		DateChooseDia,
		barOption,
		sectionalScatterOption,
		LegendEditDia,
		markersSection,
		chartSourceEditDia,
		chartRelationEdbList,
		sectionalCombinationOption
	},
	directives: {
    drag(el, bindings) {
      el.onmousedown = function (e) {
        var init = e.clientX;
        // console.log(init);
        var box = $('#box')[0];
        // console.log(box.clientWidth)
        let total_wid = box.offsetWidth;
        var left = $('#left')[0];
        var right = $('#right')[0];
        var initWidth = left.offsetWidth;
        document.onmousemove = function (e) {
          var end = e.clientX;
          var newWidth = end - init + initWidth;
          left.style.width = newWidth + 'px';
          right.style.width = newWidth > 300 ? total_wid - newWidth + 'px' : total_wid - 320 + 'px';
        };
        document.onmouseup = function () {
          document.onmousemove = document.onmouseup = null;
          e.releaseCapture && e.releaseCapture();
        };
        e.setCapture && e.setCapture();
        return false;
      };
    },
  },
	watch: {
		tableData: {
      handler(newval, oldval) {
				if(newval.length) {
					if([7,10,11,14].includes(this.chartInfo.ChartType)) {
						// 奇怪柱形图
						this.chartInfo.ChartType === 7 && this.barDateList.length && this.$refs.BarOptRef.getBarData();

						//雷达图
						this.chartInfo.ChartType === 11 && this.$refs.BarOptRef.getBarData();
				
					}else {
						//拼接标题
						this.chartInfo.ChartName =  this.sameOptionType.includes(this.chartInfo.ChartType) 
							? newval.map((item,index) => index === newval.length-1 
								? (this.currentLang==='en'?item.EdbNameEn:item.EdbName) 
								: `${(this.currentLang==='en'?item.EdbNameEn:item.EdbName)}和`).join('') 
							: `${this.currentLang==='en'?newval[0].EdbNameEn:newval[0].EdbName}季节性`;
						if(this.updateLimit){
							this.EdbAxisChange()
						}
						
						this.setAddChartDefault();
						this.setChartOptionHandle(newval);
					}
					
					// 设置起始日期和最新日期
					this.setExtremumDate()

				}else {
					this.chartInfo.ChartName = '';
				}
      },
      deep: true,
    }
	},
	computed: {
		roleName() {
			return localStorage.getItem('userName');
		},
        UnitOptions(){
            return unitSelectList()
        }
	},
	mixins: [chartSetMixin,addOrEditMixn],
  data() {
    return {
			isSlideLeft: false,
			search_txt: '',

			calendar_type: '公历',//默认公历
			season_year:'',//季节图时间段
			activeNames:'',

			needWatch: true,
			IsNameDefault:true,

			/* UnitOptions:unitArr, */

			useUnit:''

    };
  },
  methods: {
		/* 保存 */
		saveHandle() {
			if(!this.tableData.length) 
				return this.$message.warning(/* '暂未选择指标' */this.$t('ToolBox.CommodityPriceChart.tips_msg05'));
			console.log(this.chartInfo)
			this.$refs.diaForm.validate((valid) => {
				if(valid) {
					// 季节图只允许添加一个指标
					if(this.chartInfo.ChartType === 2 && this.tableData.length > 1){}
						//return this.$message.warning(/* '您选择的图表样式为季节性图表，只支持单指标画图' */this.$t('Chart.OptMsg.season_one_msg'));

					else if([7,11].includes(this.chartInfo.ChartType)  && !this.$refs.BarOptRef.dateList.length)  
						return this.$message.warning(/*'请添加日期'*/this.$t('ToolBox.CommodityPriceChart.tips_msg06'));

					else if(this.chartInfo.ChartType === 10 && !this.$refs.SectionScatterOptRef.seriesArr[0].edbs)  
						return this.$message.warning(/* '请添加系列指标' */this.$t('Chart.OptMsg.season_add_hint'));

					if(this.chartInfo.ChartType === 2){
						if(!(this.SeasonExtraConfig.XStartDate && this.SeasonExtraConfig.XEndDate)){
							return this.$message.warning(/* '横坐标显示范围不能为空' */this.$t('Chart.OptMsg.season_area_hint'));
						}
					}

					let db_arr = this.tableData.map((item,index) => ({
							ChartColor: item.ChartColor,
							PredictChartColor: item.PredictChartColor,
							ChartStyle: item.ChartStyle,
							ChartWidth: Number(item.ChartWidth),
							EdbInfoId: item.EdbInfoId,
							EdbAliasName: item.EdbAliasName,
							EdbInfoType: item.EdbInfoType,
							IsAxis: item.IsAxis,
							IsOrder: item.IsOrder,
							LeadUnit: item.EdbInfoType ? '' : item.LeadUnit,
							LeadValue: item.EdbInfoType ? 0 : Number(item.LeadValue),
							MaxData: Number(item.MaxData),
							MinData: Number(item.MinData)
						})
					)
					let hasLimitChange = false
					//需检测上下限是否修改
					if(![7,10,11].includes(this.chartInfo.ChartType)){
						const limitSame= this.getLimitInfo()
						hasLimitChange = !limitSame
					}
					
					if(![10,11,14].includes(this.chartInfo.ChartType)){
						//每个数据转换需要检测是否合法
						for(let i=0;i<db_arr.length;i++){
							const {IsConvert,ConvertType,ConvertValue} = this.updateData[i]
							//计算方式是否合法
							if(IsConvert&&!this.checkConver(ConvertType,ConvertValue)){
								//提示语:第${i+1}个指标数据转换不合法，请检查数值
								return this.$message.warning(this.$t('EtaChartAddPage.data_transformation_list_hint',{num:i+1}))
							}
							//如果类型为对数，检测数据是否包含负数
							if(IsConvert&&ConvertType===3){
								if(!this.checkEdbData(this.tableData[i].DataList)){
									//提示语:第${i+1}个指标数据含有负数或0，无法进行对数运算，请检查
									return this.$message.warning(this.$t('EtaChartAddPage.data_transformation_list_hint2',{num:i+1}))
								}
							}
						}
						db_arr = db_arr.map((item,index)=>{
							const {IsConvert,ConvertType,ConvertValue,ConvertUnit,ConvertEnUnit} = this.updateData[index]
							return {
								...item,
								IsConvert:Number(IsConvert),
								ConvertType:IsConvert?ConvertType:1,
								ConvertValue:IsConvert?Number(ConvertValue):100,
								ConvertUnit:IsConvert?ConvertUnit:'',
								ConvertEnUnit:IsConvert?ConvertEnUnit:''
							}
						})
					}
					

					const { ChartType,ChartName,ChartThemeId,SourcesFrom,Instructions,MarkersLines,MarkersAreas,ChartThemeStyle,ChartAlias } = this.chartInfo;
					let public_param = {
						ChartClassifyId: this.chartInfo.classify.length ? this.chartInfo.classify[this.chartInfo.classify.length - 1] : 0,
						ChartEdbInfoList: db_arr,
						ChartName,
						ChartType,
						ChartThemeId,
						SourcesFrom,
						Instructions,
						MarkersLines,
						MarkersAreas,
						ChartThemeStyle,
						ChartAlias,//别名
					}

					//提交参数
					const typePrams = this.getSaveParamsByChartType(public_param);

					let params = this.sameOptionType.includes(this.chartInfo.ChartType) 
						? {
								...public_param,
								DateType: this.year_select,
								StartYear: this.count_year || 0,
								StartDate:
										[5,6].includes(this.year_select)
											? this.select_date[0]
											: '',
								EndDate: this.year_select === 5 ? this.select_date[1] : '',
								ExtraConfig:JSON.stringify({IsHeap:this.IsHeap?1:0})//时间序列组合图是否堆积控制
							} 
						: typePrams
					if(![7,10,11].includes(this.chartInfo.ChartType)){
						const {
							min,max,rightMin,rightMax,rightTwoMin,rightTwoMax
						} = this.chartLimit
						params = {
							...params,
							LeftMin:min+'',
							LeftMax:max+'',
							RightMin:rightMin+'',
							RightMax:rightMax+'',
							Right2Min:rightTwoMin+'',
							Right2Max:rightTwoMax+'',
							MinMaxSave:Number(hasLimitChange)
						}
					}
					//如果是季节性图,在这里加上同期/右轴的参数
					if(this.chartInfo.ChartType===2){
						//const {MaxMinLimits={},SamePeriodAverage={},SamePeriodStandardDeviation={}} = this.chartInfo.SeasonAverageConfig||{}
						const {SeasonRightConfig={}} = this.chartInfo
						const tempData = _.cloneDeep(this.chartInfo.SeasonAverageConfig||{})
						const {MaxMinLimits={},SamePeriodAverage={},SamePeriodStandardDeviation={}} = tempData||{}
						delete MaxMinLimits.List
						delete SamePeriodAverage.List
						delete SamePeriodStandardDeviation.List
						const tempConfig = _.cloneDeep(SeasonRightConfig)
						delete tempConfig.EdbInfoList
						params.SeasonExtraConfig = {
							...this.SeasonExtraConfig,
							MaxMinLimits:MaxMinLimits.IsAdd?MaxMinLimits:{},
							SamePeriodAverage:SamePeriodAverage.IsAdd?SamePeriodAverage:{},
							SamePeriodStandardDeviation:SamePeriodStandardDeviation.IsAdd?SamePeriodStandardDeviation:{},
							RightAxis:SeasonRightConfig.IsAdd?tempConfig:{}//右轴的具体配置
						}
					}
					dataBaseInterface.chartAdd(params).then(res => {
						if(res.Ret !== 200) return;
							this.setChartImage(res.Data);
					})
				}
			})
		},

		 /* 设置图表封面图片 */
    setChartImage(data) {
      let svg = this.$refs.chartRef.chart.getSVG({
        chart: {
          width: 340,
          height: 230,
        }
      });
      let form = new FormData();
      form.append('Img', svg);
      this.setImageHandle(form,data);
    },
    async setImageHandle(form,{ UniqueCode,ChartInfoId }) {
      // let { Data } = await dataBaseInterface.uploadImgSvg(form);
      // // let { Data } = await dataBaseInterface.uploadImg(form);
      // await dataBaseInterface.setChartImage({
      //   ChartInfoId: ChartInfoId,
      //   ImageUrl: Data.ResourceUrl,
      // });
      form.append('ChartInfoId',ChartInfoId)
      await dataBaseInterface.setChartThumbnail(form)
			// this.$message.success('添加成功');
			this.$message.success(this.$t('MsgPrompt.add_msg2'));
			this.$router.replace({
				path: '/chartsetting',
				query: {
					code: UniqueCode,
					id: ChartInfoId
				}
			})

    },
	},
  mounted() {
		this.getMenu();
		this.getChartBaseSetting()
		this.getThemeList('init');
		window.addEventListener('resize', this.reloadRightWid);
	},
	destroyed() {
		window.removeEventListener('resize', this.reloadRightWid);
	}
};
</script>
<style lang="scss">
.addchart-container {
	$font-small: 12px; $font-normal: 14px;

  display: flex;
	*{ box-sizing: border-box; }
	.el-form--label-top .el-form-item__label {
		padding: 0;
	}
	.el-form-item {
		margin-bottom: 8px;
	}
	.el-input-number .el-input__inner {
		padding: 0 34px 0 4px;
	}
	.target-other-name .el-input__inner {
		padding: 0 30px 0 5px !important;
		height: 40px !important;
		line-height: 40px !important;
	}
	.el-color-picker--mini .el-color-picker__trigger {
		width: 60px;
		height: 25px;
		padding: 0;
	}
	.el-color-picker--mini .el-color-picker__mask {
		width: 60px;
		height: 25px;
	}

	.slide-icon {
		padding: 20px 0;
		/* display: block; */
		box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.3);
		border-radius: 5px;
		cursor: pointer;
		position: absolute;
		top: 50%;
		transform: translateY(-50%);
		z-index: 99;
		&:hover {
			background-color: rgba(0, 0, 0, 0.05);
		}
		&.slide-left {
			right: 0;
		}
		&.slide-right {
			left: 0;
		}
	}
  .left-cont {
    width: 400px;
    min-width: 300px;
    background: #fff;
    margin-right: 20px;
    border: 1px solid #ececec;
    border-radius: 4px;
    box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.05);
    height: calc(100vh - 113px);
    overflow: hidden;
    position: relative;
    box-sizing: border-box;
    .left-top {
      padding: 15px 20px;
      border: 1px solid #ececec;
      box-shadow: 0px 3px 6px rgba(167, 167, 167, 0.09);
    }
		.left-min {
			padding: 30px 20px;
			max-height: calc(100vh - 194px);
			overflow-y: auto;
			.search-cont {
				color: #606266;
			}
			.xaxis-range-cont{
				color: #606266;
				margin-top: 20px;
				.xaxis-range-tip{
					display: flex;
					align-items: center;
					justify-content: flex-start;
					.hint-message{
						font-size: 15px;
						line-height: 22px;
					}
				}
				.legend-set-text{
					font-size: 15px;
					color: #1B7BDE;
					display: inline-flex;
					align-items: center;
					justify-content: flex-start;
					margin-top: 20px;
					cursor: pointer;
					img{
						height: 16px;
						margin-left: 5px;
					}
				}
			}
			.targetset-cont {
				padding: 30px 0 20px;
				.el-input__inner {
					height: 27px;
					line-height: 27px;
					padding: 0 4px;
				}
				.el-collapse-item.is-disabled .el-collapse-item__header {
					color: #333;
				}
				.target-list {
					border: 1px solid #DCDFE6;
					.del-icon {
						position: absolute;
						right: 10px;
						font-size: 16px;
						color: #f00;
						cursor: pointer;
					}
					.setting-cont {
						padding: 20px 20px 0;
						li {
							padding-bottom: 20px;
							margin-bottom: 20px;
							border-bottom: 1px solid #DCDFE6;
							&:last-child {
								padding-bottom: 0;
								margin-bottom: 0;
								border-bottom: none;
							}
						}
					}
				}
				.el-collapse-item__header {
					background-color: #F0F2F5;
					margin-bottom: 0;
					border-bottom: 1px solid #DCDFE6;
					padding: 0 30px;
					.el-collapse-item__arrow {
						position: absolute;
						left: 8px;
					}
				}

				.scatter-setting {
					display: flex;
					margin-bottom: 20px;
				}
			}
		}
		.move-btn {
			height: 100%;
			width: 4px;
			position: absolute;
			right: 0px;
			top: 0;
			&:hover {
				cursor: col-resize;
			}
		}
  }
	.right-cont {
		width: 80%;
    .mx-datepicker {
      width: 220px !important;
    }
		 /* =================== */
		.chart-min-cont {
			background: #fff;
			border: 1px solid #ececec;
			height: calc(100vh - 118px);
			overflow: auto;
			/* overflow: hidden; */
			border-radius: 4px;
			box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.05);
			.cont-top {
				padding: 12px 30px;
				border-bottom: 1px solid #ececec;
				display: flex;
				justify-content: space-between;
				align-items: center;
				box-shadow: 0px 3px 6px rgba(167, 167, 167, 0.09);
				.top-left {
					.year-btn {
						margin-right: 5px;
						margin-bottom: 5px;
					}
					.btn-sty {
						border: 1px solid #409eff;
					}
					.date-setting{
						border: 1px solid #DCDFE6;
						border-radius: 4px;
						cursor: pointer;
						color: #333333;
						line-height: 16px;
					}
				}
				.top-right {
					font-size: 16px;
					.join_txt {
						color: #409eff;
						cursor: pointer;
						&:hover {
							text-decoration: underline;
						}
					}
					.collected {
						color: #f00;
						cursor: pointer;
						&:hover {
							text-decoration: underline;
						}
					}
					.span-item {
						color: #409eff;
						cursor: pointer;
						&:hover {
							text-decoration: underline;
						}
						.el-icon-collection,
						.el-icon-document-copy {
							color: #409eff;
						}
					}
				}
			}
			.cont-bottom {
				padding: 20px 30px;
				/* height: calc(100vh - 250px);
				overflow: auto; */
				.el-input__inner {
					height: 27px;
					line-height: 27px;
					padding: 0 4px;
				}
				.el-input-number .el-input__inner {
					padding: 0 34px 0 4px;
				}
				.highcharts-range-selector-group {
					display: none;
					.highcharts-input-group {
						display: none;
					}
				}
				.highcharts-axis-title {
					display: block;
				}
				/* =================== */
				.chart-show-cont {
					min-height: 300px;
					padding: 0 150px 60px 120px;
					position: relative;
					.chart-title {
						font-size: 16px;
						font-weight: normal;
						text-align: center;
						margin-bottom: 10px;
					}
					.chart-author {
						font-size: 14px;
						color: #333;
						position: absolute;
						bottom: 20px;
						right: 50px;
					}
					.chartWrapper {
						position: relative;
						.range-cont {
							position: absolute;
							top: 15%;
							.min-data-input {
								width: 60px;
								display: block;
							}
							&.left {
								left: -80px;
							}
							&.right {
								right: -65px;
							}
							&.rightTwo {
								right: -130px;
							}
							&.bottom {
								width: 100%;
								display: flex;
								justify-content: space-between;
								top: auto;
								right: 0;
								bottom: -2%;
								.left {
									width: 60px;
									display: block;
									flex-shrink: 0;
								}
							}
						}
					}
				}
				.options-cont {
					display: flex;
					flex-wrap: wrap;
					justify-content: space-between;
				}
			}

		}
    .nodata {
      height: calc(100vh - 120px);
			background-color: #fff;
      text-align: center;
      font-size: 16px;
      color: #666;
			padding: 100px 0;
    }
		
		@media screen and (min-width: 1711px){
			.min-data-input {
				margin-top: 310px;
			}
			.btn-sty {
				padding: 10px;
			}
			.year-btn,.btn-sty {
				font-size: $font-normal;
			}
			.date-setting{
				width: 210px;
				height: 40px;
				padding: 12px;
				font-size: $font-normal;
			}
		}

		@media screen and (max-width: 1710px){
			.min-data-input {
				margin-top: 230px;
			}
			.year-btn {
				font-size: $font-small;
				margin-left: 5px;
				margin-right: 5px;
				margin-bottom: 5px;
				padding: 6px 12px;
			}
			.btn-sty {
				font-size: $font-small;
				margin-left: 5px;
				padding: 6px;
				border: 1px solid #409eff;
			}
			.date-setting{
				width: 180px;
				height: 36px;
				padding: 10px;
				font-size: $font-small;
			}
		}
	}
	.expand-wrap{
		display: flex;
		justify-content: center;
		align-items: center;
		gap:30px;
		.el-checkbox{
			margin-right: 15px;
		}
		.el-input{
			width:100px;
			height:27px;
			line-height: 27px;
			.el-input__icon{
				line-height: 27px;
			}
		}
	}
}
</style>
<style lang="scss">
.edb-item-style .el-input__icon {
	line-height: 27px;
}
/*他不要下拉选择框 QAQ */
.x-range-picker-date {
	display: none;
}
</style>