<template>
  <div>
    <add-page-layout>
      <div slot="Header-Content">
        <!-- <img :src="title=='新增'?addImg:title=='修改'?updImg:detailImg"> -->
        <!-- <svg></svg> -->
        <span>{{ title }}</span>
        <i class="el-icon-close close" @click="closeDialog" />
      </div>
      <div slot="Form-Content">
        <el-form ref="dialogForm" style="margin-left:1.85%;width:96.96%;margin-right:1.19%;margin-top:12px;" :model="dialogForm" :label-position="labelPosition">
          <el-row>
            <el-col :span="10">
              <el-form-item label="任务名称" prop="logAuditask.taskName" label-width="110px" :rules="{required:true,message:'请输入任务名称',trigger:'change'}">
                <el-input v-model="dialogForm.logAuditask.taskName" maxlength="64" show-word-limit :disabled="disabled" />
              </el-form-item>
            </el-col>
            <el-col :span="10">
              <el-form-item label="任务类型" prop="logAuditask.taskType" label-width="130px" :rules="{required:true,message:'请选择任务类型',trigger:'change'}">
                <el-select v-model="dialogForm.logAuditask.taskType" clearable :disabled="disabled" @change="changeTaskType">
                  <el-option
                    v-for="item in taskTypeList"
                    :key="item.dataId"
                    :label="item.dataName"
                    :value="item.dataId"
                  />
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="10">
              <el-form-item label="任务说明" prop="logAuditask.taskRemark" label-width="110px">
                <el-input v-model="dialogForm.logAuditask.taskRemark" maxlength="2048" show-word-limit type="textarea" :autosize="{ minRows: 2, maxRows: 6}" clearable :disabled="disabled" />
              </el-form-item>
            </el-col>
            <el-col :span="10">
              <el-form-item label="日志类型" prop="logAuditask.indexId" label-width="130px" :rules="{required:true,message:'请选择日志类型',trigger:'change'}">
                <el-select v-model="dialogForm.logAuditask.indexId" clearable filterable :disabled="disabled" @change="getFieldList">
                  <el-option v-for="item in logTypeList" :key="item.indexId" :label="item.indexName" :value="item.indexId" />
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col v-if="dialogForm.logAuditask.taskType == '2'" :span="dialogForm.logAuditask.taskCycle != '0'?8:10">
              <el-form-item label="任务周期" prop="logAuditask.taskCycle" label-width="110px" :rules="{required:true,message:'请选择任务周期',trigger:'change'}">
                <el-select v-model="dialogForm.logAuditask.taskCycle" clearable filterable :disabled="disabled" @change="changeStartTime">
                  <el-option v-for="item in taskCycleList" :key="item.dataId" :label="item.dataName" :value="item.dataId" />
                </el-select>
              </el-form-item>
            </el-col>
            <!-- 在“任务类型”为周期任务 2 ,任务周期为日 0-->
            <el-col v-if="dialogForm.logAuditask.taskType == '2' && dialogForm.logAuditask.taskCycle == '0'" :span="10">
              <el-form-item label="任务开始时间" label-width="130px" prop="logAuditask.startTimeHour" :rules="{required:true,message:'请选择任务开始时间',trigger:'change'}">
                <el-time-picker
                  v-model="dialogForm.logAuditask.startTimeHour"
                  arrow-control
                  value-format="HH:mm:ss"
                  :disabled="disabled"
                  :picker-options="{selectableRange: '00:00:00 - 23:00:00'}"
                  placeholder="请选择时间点"
                />
              </el-form-item>
            </el-col>
            <!-- 在“任务类型”为周期任务 2,任务周期为周 1-->
            <el-col v-if="dialogForm.logAuditask.taskType == '2' && dialogForm.logAuditask.taskCycle == '1'" :span="12">
              <el-col :span="12">
                <el-form-item label="任务开始时间" label-width="110px" prop="logAuditask.startTime" :rules="{required:true,message:'请选择任务开始时间',trigger:'change'}">
                  <el-select v-model="dialogForm.logAuditask.startTime" :disabled="disabled">
                    <el-option v-for="item in cycleValueWeek" :key="item.id" :value="item.id" :label="item.label" />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="" label-width="10px" prop="logAuditask.startTimeHour" :rules="{required:true,message:'请选择任务开始时间',trigger:'change'}">
                  <el-time-picker
                    v-model="dialogForm.logAuditask.startTimeHour"
                    arrow-control
                    :disabled="disabled"
                    :picker-options="{selectableRange: '00:00:00 - 23:00:00'}"
                    value-format="HH:mm:ss"
                    placeholder="请选择时间点"
                  />
                </el-form-item>
              </el-col>
            </el-col>
            <el-col v-if="dialogForm.logAuditask.taskType == '2' && dialogForm.logAuditask.taskCycle == '2'" :span="12">
              <el-col :span="12">
                <el-form-item label="任务开始时间" label-width="110px" prop="logAuditask.startTime" :rules="{required:true,message:'请选择任务开始时间',trigger:'change'}">
                  <el-select v-model="dialogForm.logAuditask.startTime" :disabled="disabled">
                    <el-option v-for="item in cycleValueMonth" :key="item.id" :value="item.id" :label="item.label" />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item prop="logAuditask.startTimeHour" label="" label-width="10px" :rules="{required:true,message:'请选择任务开始时间',trigger:'change'}">
                  <el-time-picker
                    v-model="dialogForm.logAuditask.startTimeHour"
                    arrow-control
                    :disabled="disabled"
                    :picker-options="{selectableRange: '00:00:00 - 23:00:00'}"
                    value-format="HH:mm:ss"
                    placeholder="请选择时间点"
                  />
                </el-form-item>
              </el-col>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="dialogForm.logAuditask.timeSeriesType == '0'?10:10">
              <el-form-item v-if="dialogForm.logAuditask.timeSeriesType == '0'" label="日志时序" prop="logAuditask.timeSeriesAry" label-width="110px" :rules="{required:true,message:'请选择日志时序',trigger:'change'}">
                <el-date-picker
                  v-model="dialogForm.logAuditask.timeSeriesAry"
                  type="datetimerange"
                  :disabled="disabled"
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                  value-format="yyyy-MM-dd HH:mm:ss"
                  clearable
                  placeholder="请选择"
                  @input="timeSeriesAryInput"
                />
              </el-form-item>
              <el-form-item v-else label="日志时序" prop="logAuditask.timeSeries" label-width="110px" :rules="{required:true,message:'请选择日志时序',trigger:'change'}">
                <el-input v-model="dialogForm.logAuditask.timeSeries" type="number" :min="0" clearable :disabled="disabled">
                  <template slot="prepend">近</template>
                  <template slot="append">日</template>
                </el-input>
              </el-form-item>
            </el-col>
            <!-- 分析日志时序类型 字典：0-时间范围（历史任务默认），1-单位时间（周期任务和实时任务默认） -->
            <el-col :span="10">
              <el-form-item label="分析日志时序类型" prop="logAuditask.timeSeriesType" label-width="130px">
                <el-select v-model="dialogForm.logAuditask.timeSeriesType" disabled clearable placeholder="请选择分析日志时序类型">
                  <el-option v-for="item in analysisLogTimingTypeList" :key="item.dataId" :label="item.dataName" :value="item.dataId" />
                </el-select>
              </el-form-item>
            </el-col>
            <!-- </el-row>
        <el-row> -->
          </el-row>
          <p class="formLine" />
          <el-row>
            <el-row class="device-title-container">
              <img src="../../../assets/img/device-chart.png" alt="" class="device-img">
              <span class="device-title">图表类型设置</span>
              <el-dropdown v-if="type != 3 && dialogForm.logAuditaskChartConfDto.logAuditaskChartConf.chartType != null" class="device-change-btn" size="mini" split-button @command="handleCommand">
                切换
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item command="0">分组统计表</el-dropdown-item>
                  <el-dropdown-item command="3">柱状图</el-dropdown-item>
                  <el-dropdown-item command="2">饼图</el-dropdown-item>
                  <el-dropdown-item command="1">趋势图</el-dropdown-item>
                  <el-dropdown-item command="4">地图</el-dropdown-item>
                  <el-dropdown-item command="5">雷达图</el-dropdown-item>
                  <el-dropdown-item command="6">一览表</el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
              <span v-if="type != 3 && dialogForm.logAuditaskChartConfDto.logAuditaskChartConf.chartType != null" class="device-reset-btn"><i class="el-icon-refresh" style="font-size:14px;" /><span>重置</span></span>
            </el-row>
            <el-row class="set-type">
              <el-col :span="dialogForm.logAuditaskChartConfDto.logAuditaskChartConf.chartType == null?24:2">
                <el-radio-group v-model="dialogForm.logAuditaskChartConfDto.logAuditaskChartConf.chartType" style="width:100%;">
                  <el-radio
                    v-for="item in typeChartList"
                    v-if="dialogForm.logAuditaskChartConfDto.logAuditaskChartConf.chartType == item.typeId || dialogForm.logAuditaskChartConfDto.logAuditaskChartConf.chartType == null"
                    :key="item.typeId"
                    :disabled="disabled || dialogForm.logAuditask.indexId == undefined"
                    :label="item.typeId"
                    class="radio-chart"
                    @change="chartTypeChange"
                  >
                    <div class="img-ctn">
                      <img class="imgchart" :src="item.imgsrc" :alt="item.typeName">
                      <p class="chartname">{{ item.typeName }}</p>
                    </div>
                  </el-radio>
                </el-radio-group>
              </el-col>
              <el-col v-if="dialogForm.logAuditaskChartConfDto.logAuditaskChartConf.chartType != null " :span="22">
                <el-row v-if="dialogForm.logAuditaskChartConfDto.logAuditaskChartConf.chartType != '4'">
                  <el-col :span="6">
                    <el-form-item label-width="86px" class="label">
                      <span slot="label"><span style="color:red">*</span>维度名称
                        <el-popover placement="top-start" trigger="hover" popper-class="poptooltip" content="统计角度，统计结果按维度分组">
                          <i slot="reference" class="el-icon-question" style="color:orange;font-size:10px;cursor:pointer" />
                        </el-popover>
                      </span>
                      <el-select v-model="dialogForm.logAuditaskChartConfDto.logAuditaskChartConf.statisticalDimension" filterable :disabled="disabled" @change="changeDimension">
                        <el-option v-for="item in statisticalDimensionList" :key="item.fieldId" :label="item.fieldName" :value="item.fieldId" />
                      </el-select>
                    </el-form-item>
                  </el-col>
                  <el-col :span="6">
                    <!-- 默认top10 -->
                    <el-form-item label-width="76px" class="label">
                      <span slot="label"><span style="color:red">*</span>top值</span>
                      <el-input-number v-model="dialogForm.logAuditaskChartConfDto.logAuditaskChartConf.topSize" :disabled="disabled" :min="1" />
                    </el-form-item>
                  </el-col>
                  <!-- 维度名称是时间类型 --展示运算类型+运算值 -->
                  <el-col :span="4">
                    <el-form-item label="运算类型" label-width="70px">
                      <el-select v-model="dialogForm.logAuditaskChartConfDto.logAuditaskChartConf.operationType" clearable :disabled="disabled" @change="selectChange(fieldType, dialogForm.logAuditaskChartConfDto.logAuditaskChartConf)">
                        <el-option v-for="items in operationTypeList" :key="items.dataId" :label="items.dataName" :value="items.dataId" :disabled="(items.dataId == 12 && fieldType != 3) || (!disabledFieldNote[fieldNote] && [3,4,5,6].includes(+items.dataId) && fieldType == 2) || (disabledFieldNote[fieldNote] && disabledFieldNote[fieldNote].includes(+items.dataId))" />
                      </el-select>
                    </el-form-item>
                  </el-col>
                  <el-col :span="4">
                    <el-form-item v-if="fieldType == 3 && dialogForm.logAuditaskChartConfDto.logAuditaskChartConf.operationType == '9'" label="运算值" label-width="60px">
                      <el-select v-model="dialogForm.logAuditaskChartConfDto.logAuditaskChartConf.operationValue" clearable :disabled="disabled">
                        <el-option v-for="items in fieldTypeTimeValueList" :key="items.dataId" :label="items.dataName" :value="items.dataId" />
                      </el-select>
                    </el-form-item>
                  </el-col>
                  <el-col v-if="fieldType != 3 ||(fieldType == 3 && dialogForm.logAuditaskChartConfDto.logAuditaskChartConf.operationType != '9')" :span="4">
                    <el-form-item label="运算值" label-width="76px" class="label">
                      <manager-tree-select 
                        ref="businessTree"
                        v-if="fieldNote == 'business_id'" 
                        :multiple="false"
                        v-model="dialogForm.logAuditaskChartConfDto.logAuditaskChartConf.operationValue" 
                        :data="businessTree" 
                        @clear="dialogForm.logAuditaskChartConfDto.logAuditaskChartConf.operationValue = []; $refs.businessTree.filterText = ''" 
                        :disable="(fieldType != '3' && dialogForm.logAuditaskChartConfDto.logAuditaskChartConf.operationType == '9') || type == 3"
                      >
                      </manager-tree-select>

                      <el-tree-select
                        v-else-if="fieldNote == 'event_group'"
                        :value="selectedEventGroup"
                        key-name="label"  
                        :disable="(fieldType != '3' && dialogForm.logAuditaskChartConfDto.logAuditaskChartConf.operationType == '9') || type == 3"
                        @clear="$refs['eventGroupTree'].setCheckedKeys([]); eventGroupFilterText = ''; selectedEventGroup = []; dialogForm.logAuditaskChartConfDto.logAuditaskChartConf.operationValue = []"
                      >
                        <div class="filter-input" style="padding:0 15px 8px;">
                          <el-input v-model="eventGroupFilterText" placeholder="输入关键字进行过滤" />
                        </div>
                        <el-tree
                          ref="eventGroupTree"
                          v-model="dialogForm.logAuditaskChartConfDto.logAuditaskChartConf.operationValue"
                          :filter-node-method="filterNode"
                          node-key="dataId"
                          :data="event_group"
                          show-checkbox
                          :multiple="false"
                          :check-strictly="true"
                          accordion
                          highlight-current
                          @check-change="(val, selectedNode, selectedLeaf) => eventGroupChange(val, selectedNode, selectedLeaf, dialogForm.logAuditaskChartConfDto.logAuditaskChartConf)"
                        />
                      </el-tree-select>

                      <el-date-picker
                        v-else-if="fieldType == 3"
                        v-model="dialogForm.logAuditaskChartConfDto.logAuditaskChartConf.operationValue" 
                        :key="dialogForm.logAuditaskChartConfDto.logAuditaskChartConf.operationType == '12' ? 'datetimerange' : 'datetime'"
                        :type="dialogForm.logAuditaskChartConfDto.logAuditaskChartConf.operationType == '12' ? 'datetimerange' : 'datetime'"
                        placeholder="选择日期时间"
                        format="yyyy-MM-dd HH:mm:ss"
                        value-format="yyyy-MM-dd HH:mm:ss"
                        :disabled="(fieldType != '3' && dialogForm.logAuditaskChartConfDto.logAuditaskChartConf.operationType == '9') || type == 3"
                      >
                      </el-date-picker>

                      <el-select 
                        v-else-if="selectFiledNote.includes(fieldNote)" 
                        v-model="dialogForm.logAuditaskChartConfDto.logAuditaskChartConf.operationValue" 
                        filterable clearable
                        :disabled="(fieldType != '3' && dialogForm.logAuditaskChartConfDto.logAuditaskChartConf.operationType == '9') || type == 3"
                      >
                        <el-option v-for="item in fieldNote == 'event_level' ? rule_level : this[fieldNote]" :key="item.dataId" :label="item.dataName" :value="fieldNote == 'device_type' ? (item.dataId + '') : item.dataId"></el-option>
                      </el-select>
                      <el-input
                        v-else-if="title == '新增' || fieldNote"
                        v-model="dialogForm.logAuditaskChartConfDto.logAuditaskChartConf.operationValue"
                        clearable
                        class="select-container"
                        :disabled="(fieldType != '3' && dialogForm.logAuditaskChartConfDto.logAuditaskChartConf.operationType == '9') || type == 3"
                      />
                    </el-form-item>
                  </el-col>
                </el-row>
                <!-- 图表类型为地图时 维度名称默认地市 -->
                <el-row v-if="dialogForm.logAuditaskChartConfDto.logAuditaskChartConf.chartType == '4'">
                  <el-col :span="6">
                    <el-form-item label="维度名称" label-width="86px" class="label">
                      <span slot="label"><span style="color:red">*</span>维度名称
                        <el-popover placement="top-start" trigger="hover" popper-class="poptooltip" content="统计角度，统计结果按维度分组">
                          <i slot="reference" class="el-icon-question" style="color:orange;font-size:10px;cursor:pointer" />
                        </el-popover>
                      </span>
                      <el-input v-model="dialogForm.logAuditaskChartConfDto.logAuditaskChartConf.dimensionColumns" disabled />
                    </el-form-item>
                  </el-col>
                  <el-col :span="6">
                    <!-- 默认top10 -->
                    <el-form-item label-width="76px" class="label">
                      <span slot="label"><span style="color:red">*</span>top值</span>
                      <el-input-number v-model="dialogForm.logAuditaskChartConfDto.logAuditaskChartConf.topSize" :disabled="disabled" :min="1" />
                    </el-form-item>
                  </el-col>
                </el-row>
                <div id="dndListContainer" class="dndList-list">
                  <draggable :list="dialogForm.logAuditaskChartConfDto.logAuditaskChartTargetList" v-bind="{group:'article', disabled: disabled}" class="dragArea11" @start="start22" @end="end22">
                    <div v-for="(item,index) in dialogForm.logAuditaskChartConfDto.logAuditaskChartTargetList" :key="index">
                      <el-row style="background:#F5F7FA;border:none;border-bottom:1px dashed #DCDFEf;border-radius:3px;margin-bottom:1.8px;">
                        <el-row>
                          <el-col :span="6">
                            <el-form-item label-width="86px" class="labels">
                              <span slot="label"><span style="color:red">*</span>统计目标
                                <el-popover placement="bottom-start" trigger="hover" popper-class="poptooltips" content="按维度分组统计目标字段。结果名称为展示图例名，可自定义。运算类型非必填，可限制统计目标的数据范围。如果存在主要目标，则统计结果按主要目标排序，否则按第一个目标统计结果排序。如果存在多个主要目标，以第一个主要目标为准。">
                                  <i slot="reference" class="el-icon-question" style="color:orange;font-size:10px;cursor:pointer" />
                                </el-popover>
                              </span>
                              <el-select v-model="item.tarColId" class="select-container" filterable :disabled="disabled" @change="(val)=>{changeTarColId(val, index,item)}">
                                <el-option v-for="items in tarColList" :key="items.fieldId" :value="items.fieldId" :label="items.fieldName" />
                              </el-select>
                            </el-form-item>
                          </el-col>
                          <el-col :span="6">
                            <el-form-item label-width="76px" class="labels">
                              <span slot="label"><span style="color:red">*</span>结果名称</span>
                              <el-input v-model="item.targetValue" clearable :disabled="disabled" />
                            </el-form-item>
                          </el-col>
                          <el-col :span="4">
                            <el-form-item label-width="96px" class="labels">
                              <span slot="label"><span style="color:red">*</span>是否按此排序</span>
                              <el-select v-model="item.mainTag" class="select-container" :disabled="disabled">
                                <el-option v-for="items in isList" :key="items.dataId" :label="items.dataName" :value="items.dataId" />
                              </el-select>
                            </el-form-item>
                          </el-col>
                          <el-col :span="4">
                            <el-form-item label-width="76px" class="labels">
                              <span slot="label"><span style="color:red">*</span>是否去重</span>
                              <el-select v-model="item.distinctTag" class="select-container" :disabled="disabled" placeholder="选择">
                                <el-option v-for="items in isList" :key="items.dataId" :label="items.dataName" :value="items.dataId" />
                              </el-select>
                            </el-form-item>
                          </el-col>
                          <!-- 目标类型默认0-基础目标，超过1个基础目标才可选择复合目标 -->
                          <!-- <el-col :span="6">
                            <el-form-item label="目标类型" label-width="80px" :prop="`logAuditaskChartTargetList.${index}.targetType`">
                              <el-select v-model="item.targetType">
                                <el-option v-for="items in indexTypeList" :key="items.dataId" :value="items.dataId" :label="items.dataName"></el-option>
                              </el-select>
                            </el-form-item>
                          </el-col> -->
                          <el-col :span="4">
                            <el-form-item label-width="80px" class="labels">
                              <span slot="label"><span style="color:red">*</span>是否展示</span>
                              <el-select v-model="item.showTag" class="select-container" :disabled="disabled">
                                <el-option v-for="items in isList" :key="items.dataId" :label="items.dataName" :value="items.dataId" />
                              </el-select>
                            </el-form-item>
                          </el-col>
                        </el-row>
                        <el-row>
                          <el-col :span="6">
                            <el-form-item label="运算类型" label-width="86px" class="labels">
                              <el-select v-model="item.operationType" clearable class="select-container" :disabled="disabled" @change="(val)=>{selectChange(item.fieldType, item); changeOperaType(val,item)}">
                                <el-option v-for="items in operationTypeList" :key="items.dataId" :label="items.dataName" :value="items.dataId" :disabled="(items.dataId == 12 && item.fieldType != 3) || (!disabledFieldNote[item.fieldNote] && [3,4,5,6].includes(+items.dataId) && item.fieldType == 2) || (disabledFieldNote[item.fieldNote] && disabledFieldNote[item.fieldNote].includes(+items.dataId))" />
                              </el-select>
                            </el-form-item>
                          </el-col>
                          <el-col v-if="item.fieldType != 3 ||(item.fieldType == 3 && item.operationType != '9')" :span="6">
                            <el-form-item label="运算值" label-width="76px" class="labels">
                              <manager-tree-select 
                                :ref="item.fieldNote + index"
                                v-if="item.fieldNote == 'business_id'" 
                                :multiple="false"
                                v-model="item.operationValue" 
                                :data="businessTree" 
                                :disable="(item.fieldType != '3' && item.operationType == '9')|| disabled"
                                @clear="item.operationValue = []; $refs[item.fieldId + index][0].filterText = ''" 
                              >
                              </manager-tree-select>

                              <el-tree-select
                                v-else-if="item.fieldNote == 'event_group'"
                                :value="item.selectedEventGroup"
                                key-name="label"  
                                :disable="(item.fieldType != '3' && item.operationType == '9')|| disabled"
                                @clear="$refs[item.fieldNote + index][0].setCheckedKeys([]); item.eventGroupFilterText = ''; item.selectedEventGroup = []; item.operationValue = []; $refs[item.fieldNote + index][0].filter(item.eventGroupFilterText)"
                              >
                                <div class="filter-input" style="padding:0 15px 8px;">
                                  <el-input v-model="item.eventGroupFilterText" placeholder="输入关键字进行过滤" @input="$refs[item.fieldNote + index][0].filter(item.eventGroupFilterText)" />
                                </div>
                                <el-tree
                                  :ref="item.fieldNote + index"
                                  v-model="item.operationValue"
                                  :filter-node-method="filterNode"
                                  node-key="dataId"
                                  :data="event_group"
                                  show-checkbox
                                  :multiple="false"
                                  :check-strictly="true"
                                  accordion
                                  highlight-current
                                  @check-change="(val, selectedNode, selectedLeaf) => itemEventGroupChange(val, selectedNode, selectedLeaf, item, index)"
                                />
                              </el-tree-select>

                              <el-date-picker
                                v-else-if="item.fieldType == 3"
                                v-model="item.operationValue" 
                                :key="item.operationType == '12' ? 'datetimerange' : 'datetime'"
                                :type="item.operationType == '12' ? 'datetimerange' : 'datetime'"
                                placeholder="选择日期时间"
                                format="yyyy-MM-dd HH:mm:ss"
                                value-format="yyyy-MM-dd HH:mm:ss"
                                :disabled="(item.fieldType != '3' && item.operationType == '9')|| disabled"
                              >
                              </el-date-picker>

                              <el-select 
                                v-else-if="selectFiledNote.includes(item.fieldNote)" 
                                v-model="item.operationValue" 
                                filterable 
                                clearable
                                :disabled="(item.fieldType != '3' && item.operationType == '9')|| disabled"
                              >
                                <template v-if="item.fieldNote == 'rule_level' || item.fieldNote == 'event_level'">
                                  <el-option v-for="ruleItem in rule_level" :key="ruleItem.dataId" :label="ruleItem.dataName" :value="ruleItem.dataId"></el-option>
                                </template>
                                <template v-else-if="item.fieldNote == 'source_type'">
                                  <el-option v-for="sourceItem in source_type" :key="sourceItem.dataId" :label="sourceItem.dataName" :value="sourceItem.dataId"></el-option>
                                </template>
                                <template v-else-if="item.fieldNote == 'device_type'">                            
                                  <el-option v-for="deviceItem in device_type" :key="deviceItem.dataId" :label="deviceItem.dataName" :value="deviceItem.dataId + ''"></el-option>
                                </template>
                              </el-select>
                              <el-input
                                v-else-if="title == '新增' || item.fieldNote || !item.tarColId"
                                v-model="item.fieldNote == 'business_id' || item.fieldNote == 'event_group' ? item.operationValue.join() : item.operationValue"
                                clearable
                                class="select-container"
                                :disabled="(item.fieldType != '3' && item.operationType == '9')|| disabled"
                              />
                            </el-form-item>
                          </el-col>
                          <el-col v-if="item.fieldType == 3 && item.operationType == '9'" :span="6">
                            <el-form-item label="运算值" label-width="76px" class="labels">
                              <el-select v-model="item.operationValue" clearable class="select-container" :disabled="disabled">
                                <el-option v-for="items in fieldTypeTimeValueList" :key="items.dataId" :label="items.dataName" :value="items.dataId" />
                              </el-select>
                            </el-form-item>
                          </el-col>
                          <el-col v-show="iconShow" :span="2">
                            <div class="icon-ctn">
                              <!-- v-if="index > 0" -->
                              <img src="../../../assets/img/delete.png" @click="delInput(index)">
                              <img v-if="item.colFlag" src="../../../assets/img/plus.png" @click="addInput(index)">
                            </div>
                          </el-col>
                        </el-row>
                      </el-row>
                    </div>
                  </draggable>
                </div>

              </el-col>
            </el-row>
          </el-row>
          <p class="formLine" style="margin-bottom:22px;" />
          <el-row style="display:none">
            <el-col v-if="dialogForm.logAuditaskChartConfDto.logAuditaskChartConf.chartType == '0'" :span="12">
              <el-form-item label="是否进行相关性匹配" label-width="150px" prop="correlationTag">
                <el-radio-group v-model="dialogForm.logAuditaskChartConfDto.logAuditaskChartConf.correlationTag">
                  <el-radio label="0" :disabled="disabled">否</el-radio>
                  <el-radio label="1" :disabled="disabled">是</el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="是否生成因果关系图" label-width="150px" prop="causalityTag">
                <el-radio-group v-model="dialogForm.logAuditaskChartConfDto.logAuditaskChartConf.causalityTag">
                  <el-radio label="0" :disabled="disabled">否</el-radio>
                  <el-radio label="1" :disabled="disabled">是</el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="10">
              <el-form-item label="设备目标" prop="objType" label-width="110px">
                <el-radio-group v-model="dialogForm.logAuditaskObjDto.objType" @change="changeObjType">
                  <el-radio-button label="1" :disabled="disabled">按业务系统</el-radio-button>
                  <el-radio-button label="2" :disabled="disabled">按资产</el-radio-button>
                </el-radio-group>
              </el-form-item>
            </el-col>
            <el-col v-if="dialogForm.logAuditaskObjDto.objType == 1" :span="10">
              <el-form-item label="选择业务系统" label-width="110px" class="selectTree" prop="businessId">
                <el-tree-select :value="selectBusinessFormList" key-name="label" :disable="disabled" @clear="businessFormClear">
                  <div class="filter-input" style="padding:0 15px 8px;">
                    <el-input v-model="filterFormText" placeholder="输入关键字进行过滤" />
                  </div>
                  <el-tree
                    ref="businessFormTree"
                    v-model="businessId"
                    :filter-node-method="filterNode"
                    node-key="dataId"
                    :data="businessTree"
                    show-checkbox
                    accordion
                    highlight-current
                    @check-change="businessFormChange"
                  />
                </el-tree-select>
              </el-form-item>
            </el-col>
            <el-col v-if="dialogForm.logAuditaskObjDto.objType == 2" :span="10">
              <el-form-item label="选择资产" prop="assetId" label-width="130px">
                <div
                  class="selectWarp"
                  style="max-height:200px;border:1px solid #E9EAF0;border-radius:3px;padding-left:1%;"
                >
                  <i v-show="!showSelectAsset && (type == 1||type == 2)" class="el-icon-close close closeAll" @click="confirmDel" />
                  <p v-if="showSelectAsset" style="color:#97A8CD;font-size:12px;cursor:pointer" @click="showAssetDialog">请点击选择资产</p>
                  <el-tag
                    v-for="tag in aiList"
                    :key="tag.assetId"
                    :closable="tagClose"
                    :type="type != 3 ? 'primary':'gray'"
                    @close="tagCloseHandle(tag)"
                  >
                    {{ tag.assetName }}
                  </el-tag>
                </div>
              <!-- <p @click="showAssetDialog" class="asset-search-btn" v-if="type!='3'">查询</p> -->
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
      <div slot="Footer-Content">
        <el-button class="btnLine" @click="closeDialog" v-text="type !=3 ?'取消':'关闭'" />
        <b v-if="type == 1" v-loading="importLoadingAdd" class="importLoading">
          <el-button class="btnLine" type="primary" @click="addAuditSubmit">提交</el-button>
        </b>
        <b v-if="type == 2" v-loading="importLoadingUpd" class="importLoading">
          <el-button type="primary" @click="updAuditSubmit">修改</el-button>
        </b>
      </div>
    </add-page-layout>
    <!-- 资产查询弹窗-->
    <manager-dialog :visible.sync="assetQuery" :modal-append-to-body="false" title="资产查询" @close="clearAssetForm">
      <el-row>
        <el-col :span="24" class="formWarp" style="background-color: #fbfbfb;padding-top: 10px;margin-bottom:10px">
          <el-row>
            <el-form
              ref="assetForm"
              label-width="100px"
              :label-position="labelPosition"
              :model="queryAssetForm.queryParam"
            >
              <el-col :span="12">
                <el-form-item label="资产名称：" prop="assetName">
                  <el-input v-model="queryAssetForm.queryParam.assetName" />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="业务系统：" prop="businessId">
                  <el-cascader
                    v-model="queryAssetForm.queryParam.businessId"
                    :options="businessTree"
                    :props="defaultprops"
                    filterable
                    :show-all-levels="false"
                    style="width: 100%"
                    placeholder="请选择或输入关键词搜索"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="资产类别：" prop="assetType">
                  <el-select v-model="queryAssetForm.queryParam.assetType" multiple>
                    <el-option
                      v-for="item in assetType"
                      :key="item.dataId"
                      multiple
                      :label="item.dataName"
                      :value="item.dataId"
                    />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item
                  label="安全域："
                  prop="secDomain"
                >
                  <el-select
                    v-model="queryAssetForm.queryParam.secDomain"
                    multiple
                  >
                    <el-option
                      v-for="item in secDomainParam"
                      :key="item.dataId"
                      :label="item.dataName"
                      :value="item.dataId"
                    />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="主识别IP：" prop="mgmtIp">
                  <el-input v-model="queryAssetForm.queryParam.mgmtIp" />
                </el-form-item>
              </el-col>
              <el-col :span="12" style="text-align: center;padding-bottom: 10px">
                <el-button class="asset-search" @click="queryAsset">查询</el-button>
                <el-button class="asset-reset" @click="resetAsset">重置</el-button>
              </el-col>
            </el-form>
          </el-row>
        </el-col>
        <el-col v-loading="loadingAsset" :span="24" class="assetTable">
          <el-table :data="tableData" :row-key="getRowKeys" height="340" @selection-change="handleSelectionChange">
            <el-table-column type="selection" width="40" prop="assetId" :reserve-selection="true" />
            <el-table-column prop="assetName" label="资产名" show-overflow-tooltip />
            <el-table-column prop="mgmtIp" label="主识别IP" show-overflow-tooltip />
            <el-table-column prop="assetTypeName" label="资产类别" show-overflow-tooltip width="100" />
          </el-table>
          <p style="margin-top:5px">
            <span
              v-show="moreBtn"
              style="color: #1c8de0;float: left;cursor: pointer;font-size: 12px"
              @click="more"
              v-text="tipText"
            />
            <span style="float: right;">已选资产：<strong style="color:#409eff">{{ selectData }}/{{ total }}</strong></span>
          </p>
        </el-col>
      </el-row>
      <span slot="footer" class="dialog-footer">
        <el-button style="border-radius: 3px" @click="assetQuery=false">关闭</el-button>
        <el-button style="border-radius: 3px" type="primary" @click="submitAsset">提交</el-button>
      </span>
    </manager-dialog>
  </div>
</template>

<script>
import draggable from 'vuedraggable'
import sourceData from './data'
import staticsData from '@ability/mixins/staticsData'
import { auditAnalysisTaskAdd, auditAnalysisTaskUpdate, getTaskInfo, getLogTypeList, getFieldsList, getQuepAsset } from '../api/analysis-audit-manage'
import { getAllDeviceType, getEventGroup } from '../api/log-retrival-manage'
export default {
  name: '',
  components: {
    draggable
  },
  mixins: [staticsData],
  data() {
    return sourceData
  },
  computed: {
    secDomainParam: function() {
      return this.$store.getters.secDomainParam
    },
    assetType: function() {
      return this.$store.getters.assetType
    },
    showSelectAsset: function() {
      if (this.aiList.length >= 1) {
        return false
      } else {
        return true
      }
    }
  },
  watch: {
    filterFormText(val) {
      this.$refs.businessFormTree.filter(val)
    },
    eventGroupFilterText(val) {
      this.$refs['eventGroupTree'].filter(val);
    },
  },
  created() {
    this.judgeYear()
    this.cycleUnitChange(3)
    this.cycleUnitChange(1)
    // 获取日志类型
    this.getlogTypeListData()
    this.getAllDeviceType()
    this.getBusinessTree()
  },
  async mounted() {
    const oper = this.$route.params.oper; const taskId = this.$route.params.taskId
    this.type = this.$route.params.type
    await this.getEventGroup()
    if (oper == 'detail') {
      this.disabled = true
      this.iconShow = false
      this.title = '查看'
      this.getSingleTaskInfo(taskId)
    } else if (oper == 'modify') {
      this.disabled = false
      this.iconShow = true
      this.title = '修改'
      this.getSingleTaskInfo(taskId)
    } else if (oper == 'add') {
      this.disabled = false
      this.iconShow = true
      this.title = '新增'
    }
  },
  methods: {
    selectChange(fieldType, item) {
      if (fieldType == 3 && Object.prototype.toString.call(item.operationValue) == '[object Array]') {
        item.operationValue = ''
      }
    },
    recursiveArray(list) {
      let source = []
      list.forEach(el => {
          source.push(el)
          if (el.children) {
              let childList = this.recursiveArray(el.children)
              source.push(...childList)
          }        
      })
      return source
    },
    eventGroupChange(val, selectedNode, selectedLeaf, item_child) {
        if (selectedNode) {
            if (this.selectedEventGroup.length != 0) {
                this.$refs['eventGroupTree'].setChecked(this.selectedEventGroup[0].dataId, false)
                this.selectedEventGroup = []
                item_child.operationValue = []
            }
            this.selectedEventGroup = [{dataId: val.dataId, label: val.label }]
            item_child.operationValue = [val.dataId]
        }
    },
    itemEventGroupChange(val, selectedNode, selectedLeaf, item_child, index) {
        if (selectedNode) {
            if (item_child.selectedEventGroup && item_child.selectedEventGroup.length != 0) {
                this.$refs[item_child.fieldNote + index][0].setChecked(item_child.selectedEventGroup[0].dataId, false)
                item_child.selectedEventGroup = []
                item_child.operationValue = []
            }
            item_child.selectedEventGroup = [{dataId: val.dataId, label: val.label }]
            item_child.operationValue = [val.dataId]
        }
        console.log(item_child)
    },
    // 获取事件分组
    getEventGroup() {
      return new Promise((resole, reject) => {
        this.event_group = []
        getEventGroup().then(resp => {
          if (resp.data.returnCode == '0') {
            this.event_group.push(resp.data.data.list)
          }
          resole()
        }, error => {
          this.$message.error('事件分组获取失败')
          reject()
        })
      })
    },
    // 获取设备来源
    getAllDeviceType() {
      getAllDeviceType().then(resp => {
        if (resp.data.returnCode == '0') {
          this.device_type = resp.data.data.list
        }
      }, error => {
        this.$message.error('设备类型获取失败')
      })
    },
    // 获取表单详情
    getSingleTaskInfo(taskId) {
      getTaskInfo(taskId).then(async resp => {
        if (resp.data.returnCode == '0') {
          this.dialogForm.logAuditask = Object.assign(this.dialogForm.logAuditask, resp.data.data.logAuditask)
          this.dialogForm.logAuditaskObjDto = resp.data.data.logAuditaskObjDto
          
          let eventGroupList = this.recursiveArray(this.event_group)
          let { dimensionColumns, operationValue, operationType } = resp.data.data.logAuditaskChartConfDto.logAuditaskChartConf
          if (dimensionColumns == '业务系统' || dimensionColumns == '事件分组') {
            if (Object.prototype.toString.call(operationValue) == "[object String]") {
              resp.data.data.logAuditaskChartConfDto.logAuditaskChartConf.operationValue = resp.data.data.logAuditaskChartConfDto.logAuditaskChartConf.operationValue.split()
              if (dimensionColumns == '事件分组') {
                let field = eventGroupList.find(element => element.dataId == resp.data.data.logAuditaskChartConfDto.logAuditaskChartConf.operationValue[0])                
                this.selectedEventGroup = [{dataId: field.dataId, label: field.label}]                
              }
            } else {
              resp.data.data.logAuditaskChartConfDto.logAuditaskChartConf.operationValue = []
            }
          }
          resp.data.data.logAuditaskChartConfDto.logAuditaskChartTargetList.forEach((el, index) => {
            if (el.targetValue == '业务系统' || el.targetValue == '事件分组') {
              if (Object.prototype.toString.call(el.operationValue) == "[object String]") { 
                el.operationValue = el.operationValue.split()
                
                if (el.targetValue == '事件分组') {
                  let field = eventGroupList.find(element => element.dataId == el.operationValue[0])
                  el.selectedEventGroup = [{dataId: field.dataId, label: field.label}]
                }
              }
              else el.operationValue = []
            }
          })
          this.dialogForm.logAuditaskChartConfDto = resp.data.data.logAuditaskChartConfDto
          if (dimensionColumns == '事件分组') {
            setTimeout(() => {
              this.$refs['eventGroupTree'] && this.$refs['eventGroupTree'].setCheckedKeys(this.dialogForm.logAuditaskChartConfDto.logAuditaskChartConf.operationValue, true)
            }, 1000);
          }

          // 运算类型为范围（12）且有值
          if (operationType == '12' && operationValue) {
            this.dialogForm.logAuditaskChartConfDto.logAuditaskChartConf.operationValue = JSON.parse(operationValue)
          }
          this.dialogForm.logAuditaskChartConfDto.logAuditaskChartTargetList.forEach(el => {
            if (el.operationType == '12' && el.operationValue) {
              el.operationValue = JSON.parse(el.operationValue)
            }
          })

          if (this.dialogForm.logAuditask.timeSeriesType == '0') {
            const arr = this.dialogForm.logAuditask.timeSeries.split(',')
            this.$set(this.dialogForm.logAuditask, 'timeSeriesAry', [
              arr[0], arr[1]
            ])
          }
          if (this.type == 2) {
            const length = this.dialogForm.logAuditaskChartConfDto.logAuditaskChartTargetList.length
            for (let i = 0; i < length; i++) {
              this.$set(this.dialogForm.logAuditaskChartConfDto.logAuditaskChartTargetList[length - 1], 'colFlag', true)
            }
          }
          this.aiList = []
          await this.getFieldList(this.dialogForm.logAuditask.indexId)
          // console.log(this.dialogForm.logAuditaskChartConfDto.logAuditaskChartTargetList)
          for (let i = 0; i < this.dialogForm.logAuditaskChartConfDto.logAuditaskChartTargetList.length; i++) {
            this.dialogForm.logAuditaskChartConfDto.logAuditaskChartTargetList[i].tarColId = Number(this.dialogForm.logAuditaskChartConfDto.logAuditaskChartTargetList[i].tarColId)
            // this.$set(this.dialogForm.logAuditaskChartConfDto.logAuditaskChartTargetList[i],'tarColId',Number(logAuditaskChartTargetList[i].tarColId))
            let fieldName = {}
            fieldName = this.tarColList.find((item) => {
              return item.fieldId == Number(this.dialogForm.logAuditaskChartConfDto.logAuditaskChartTargetList[i].tarColId)
            })
            this.$set(this.dialogForm.logAuditaskChartConfDto.logAuditaskChartTargetList[i], 'fieldType', fieldName.fieldType)
            this.$set(this.dialogForm.logAuditaskChartConfDto.logAuditaskChartTargetList[i], 'fieldNote', fieldName.fieldNote)
            if (fieldName.fieldNote == 'event_group') { 
              setTimeout(() => {
                this.$refs['event_group' + i][0] && this.$refs['event_group' + i][0].setCheckedKeys(this.dialogForm.logAuditaskChartConfDto.logAuditaskChartTargetList[i].operationValue, true)
              }, 1000);
            }
          }
          if (this.dialogForm.logAuditaskObjDto.objType == '1') {
            const businessIds = []
            for (let i = 0; i < this.dialogForm.logAuditaskObjDto.logAuditaskObjList.length; i++) {
              businessIds.push(this.dialogForm.logAuditaskObjDto.logAuditaskObjList[i].businessId)
            }
            if (businessIds.length != 0) {
              setTimeout(() => {
                this.$refs.businessFormTree.setCheckedKeys(businessIds)
              }, 100)
            }
          } else {
            if (this.type == 3) {
              this.tagClose = false
            } else {
              this.tagClose = true
            }
            for (let m = 0; m < this.dialogForm.logAuditaskObjDto.logAuditaskObjList.length; m++) {
              const obj = { assetName: '', businessId: null, assetId: null }; const item = this.dialogForm.logAuditaskObjDto.logAuditaskObjList[m]
              obj.assetName = item.assetName
              obj.businessId = item.businessId
              obj.assetId = item.assetId
              this.aiList.push(obj)
            }
          }
        }
      })
    },
    closeDialog() {
      this.$refs.dialogForm.resetFields()
      this.dialogForm.logAuditask.taskName = ''
      this.dialogForm.logAuditask.taskType = ''
      this.dialogForm.logAuditask.taskRemark = ''
      this.dialogForm.logAuditask.taskId = null
      this.dialogForm.logAuditask.taskRemark = ''// 任务说明
      this.dialogForm.logAuditask.taskCycle = null// 任务周期 周期0日、1周、2月
      this.dialogForm.logAuditask.startTime = ''// 任务开始时间 周 月
      this.dialogForm.logAuditask.startTimeHour = ''// 任务开始时间 小时 hh:mm:ss
      this.dialogForm.logAuditask.indexId = null// 日志类型
      this.dialogForm.logAuditask.timeSeriesType = ''// 分析日志时序类型 字典：0-时间范围（历史任务默认），1-单位时间（周期任务和实时任务默认）
      this.dialogForm.logAuditask.timeSeries = null// 当“分析日志时序类型”为0时，为日期范围，如“2020-01-02 00:00:00~2020-01-03 00:00:00” 当“分析日志时序类型”为1时，填写近N个时间单位（日、周、月、年）
      this.dialogForm.logAuditask.timeSeriesAry = null
      this.dialogForm.logAuditaskObjDto.objType = ''
      
      this.fieldNote = ''
      
      if (this.dialogForm.logAuditaskObjDto.objType == '1') {
        // 清空业务系统选中数据
        this.selectBusinessFormList = []
        this.$refs['businessFormTree'].setCheckedKeys([])
        this.filterFormText = ''
      } else {
        this.aiList = []
      }
      // 图表配置重置
      this.clearChartConf()
      this.$router.push({
        name: 'auditAnalysis'
      })
    },
    // 获取日志类型
    getlogTypeListData() {
      // 获取日志类型
      getLogTypeList().then(
        resp => {
          if (resp.data.returnCode == '0') {
            this.logTypeList = resp.data.data
          }
        },
        error => {
          this.$message.error(error.message)
        }
      )
    },
    // 任务类型改变-分析日志时序类型变化+任务周期
    changeTaskType(val) {
      if (val == '1') {
        this.dialogForm.logAuditask.timeSeriesType = '0'
      } else {
        this.dialogForm.logAuditask.timeSeriesType = '1'
      }
      this.dialogForm.logAuditask.taskCycle = ''
    },
    chartTypeChange(val) {
      if (val == '4') {
        this.dialogForm.logAuditaskChartConfDto.logAuditaskChartConf.dimensionColumns = '地市'
        this.dialogForm.logAuditaskChartConfDto.logAuditaskChartTargetList = [
          {
            'targetValue': '', // 根据日志类型关联出的关键字字段名
            'tarColId': null, // 根据日志类型关联出的关键字字段id
            'targetType': 0, // 指标类型 0-基础指标 1-复合指标
            'mainTag': '0', // 否展示 0-否 1-是 默认1
            'distinctTag': '0', // 是否去重
            'targerOrder': null, // 排序 页面先不做
            'showTag': '1', // 是否展示 0-否 1-是 默认1
            'operationType': null, // 运算类型 下拉
            'operationValue': '', // 运算值
            'colFlag': true,// 展示加号按钮
            'selectedEventGroup': [], // 事件分组 选中
            'eventGroupFilterText': ''   // 事件分组过滤文本
          }
        ]
      }
    },
    // 任务周期改变
    changeStartTime(val) {
      this.dialogForm.logAuditask.startTime = null
      this.dialogForm.logAuditask.startTimeHour = ''
    },
    // 若选择的维度名称类型是时间,展示运算类型、运算值
    changeDimension(fieldId) {
      let fieldName = {}
      fieldName = this.statisticalDimensionList.find((item) => {
        return item.fieldId === fieldId
      })
      this.dialogForm.logAuditaskChartConfDto.logAuditaskChartConf.dimensionColumns = fieldName.fieldName
      this.fieldType = fieldName.fieldType
      this.fieldNote = fieldName.fieldNote
      if (this.managerTreeSelectFieldNote.includes(this.fieldNote)) {
        this.dialogForm.logAuditaskChartConfDto.logAuditaskChartConf.operationValue = []
      } else {
        this.dialogForm.logAuditaskChartConfDto.logAuditaskChartConf.operationValue = ''
      }
      // if (this.fieldType == 3) {
      //   this.dialogForm.logAuditaskChartConfDto.logAuditaskChartConf.operationType = '9'
      // } else {
      //   this.dialogForm.logAuditaskChartConfDto.logAuditaskChartConf.operationType = null
      // }
      this.dialogForm.logAuditaskChartConfDto.logAuditaskChartConf.operationType = null
    },
    // 根据日志类型获取：指标和维度的下拉数据
    getFieldList(indexId) {
      return new Promise((resolve, reject) => {
        // 获取字段信息
        getFieldsList(indexId).then(
          resp => {
            if (resp.data.returnCode == '0') {
              let i = 0; let listLength = 0
              var list = resp.data.data
              listLength = list.length
              this.tarColList = [] // 维度名称
              this.statisticalDimensionList = [] // 指标维度
              for (i = 0; i < listLength; i++) {
                const obj = list[i]
                if (obj.conditionFlag == '1') {
                  this.tarColList.push(obj)
                }
                if (obj.dimensionsFlag == '1') {
                  this.statisticalDimensionList.push(obj)
                }
              }
              let fieldName = {}
              fieldName = this.statisticalDimensionList.find((item) => {
                return item.fieldId === this.dialogForm.logAuditaskChartConfDto.logAuditaskChartConf.statisticalDimension
              }) || {}
              this.fieldNote = fieldName.fieldNote || ''
            }
            resolve()
          },
          error => {
            this.$message.error(error.message)
            reject(error)
          }
        )
        if (this.type == 1) {
          this.clearChartConf()
        }
      })
    },
    // 日志类型改变时--清空图表配置
    clearChartConf() {
      this.dialogForm.logAuditaskChartConfDto.logAuditaskChartConf = {
        'chartType': null, // 图表类型  字典：0-列表，1-趋势图（x轴默认时间轴，y轴需选择维度），2-饼图（需选择维度），3-柱状图（x轴默认时间轴，y轴需选择维度），4-地图（需选择省份及维度），5-雷达图（需选择维度）
        'statisticalDimension': null, // 根据日志类型关联出的关键字id
        'topSize': 10, // top值
        'dimensionColumns': '', // 根据日志类型关联出的关键字字段名
        'causalityTag': '0', // 是否生成因果关系图
        'correlationTag': '0', // 是否进行相关性匹配
        'operationType': null, // 运算类型 下拉
        'operationValue': null// 运算值
      }
      this.dialogForm.logAuditaskChartConfDto.logAuditaskChartTargetList = [
        {
          'targetValue': '', // 根据日志类型关联出的关键字字段名
          'tarColId': null, // 根据日志类型关联出的关键字字段id
          'targetType': 0, // 指标类型 0-基础指标 1-复合指标
          'mainTag': '0', // 否展示 0-否 1-是 默认1
          'distinctTag': '0', // 是否去重
          'targerOrder': null, // 排序 页面先不做
          'showTag': '1', // 是否展示 0-否 1-是 默认1
          'operationType': null, // 运算类型 下拉
          'operationValue': '', // 运算值
          'colFlag': true,// 展示加号按钮
          'selectedEventGroup': [], // 事件分组 选中
          'eventGroupFilterText': ''   // 事件分组过滤文本
        }
      ]
    },
    // 指标字段选择时回填label到指标名称
    changeTarColId(val, index, item) {
      let fieldName = {}
      fieldName = this.tarColList.find((item) => {
        return item.fieldId === val
      })
      this.dialogForm.logAuditaskChartConfDto.logAuditaskChartTargetList[index].targetValue = fieldName.fieldName
      this.$set(item, 'fieldType', fieldName.fieldType)
      this.$set(item, 'fieldNote', fieldName.fieldNote)
      this.$set(item, 'operationValue', this.managerTreeSelectFieldNote.includes(fieldName.fieldNote) ? [] : '')
      // if (item.fieldType == 3) {
      //   this.$set(item, 'operationType', '9')
      // } else {
      //   this.$set(item, 'operationType', null)
      // }
      this.$set(item, 'operationType', null)
    },
    changeOperaType(val, item) {
      this.$set(item, 'operationValue', this.managerTreeSelectFieldNote.includes(item.fieldNote) ? [] : '')
    },
    businessFormClear() {
      this.selectBusinessFormList = []
      this.filterFormText = ''
      this.dialogForm.businessId = []
      this.$refs.businessFormTree.setCheckedKeys([])
    },
    filterNode(value, data, node) {
      if (!value) {
        node.expanded = false
        return true
      }
      return data.label.indexOf(value) !== -1
    },
    handleCommand(command) {
      if (this.dialogForm.logAuditaskChartConfDto.logAuditaskChartConf.chartType == 4) {
        this.dialogForm.logAuditaskChartConfDto.logAuditaskChartConf.statisticalDimension = null
      }
      if (command == '0') {
        this.dialogForm.logAuditaskChartConfDto.logAuditaskChartConf.chartType = '0'
      } else if (command == '2') {
        this.dialogForm.logAuditaskChartConfDto.logAuditaskChartConf.chartType = '2'
      } else if (command == '3') {
        this.dialogForm.logAuditaskChartConfDto.logAuditaskChartConf.chartType = '3'
      } else if (command == '4') {
        this.dialogForm.logAuditaskChartConfDto.logAuditaskChartConf.chartType = '4'
        this.dialogForm.logAuditaskChartConfDto.logAuditaskChartConf.dimensionColumns = '地市'
      } else if (command == '5') {
        this.dialogForm.logAuditaskChartConfDto.logAuditaskChartConf.chartType = '5'
      } else if (command == '6') {
        this.dialogForm.logAuditaskChartConfDto.logAuditaskChartConf.chartType = '6'
      } else {
        this.dialogForm.logAuditaskChartConfDto.logAuditaskChartConf.chartType = '1'
      }
      if (command != '0') {
        var logAuditaskChartTargetList = this.dialogForm.logAuditaskChartConfDto.logAuditaskChartTargetList
        for (var i = 0; i < logAuditaskChartTargetList.length; i++) {
          if (logAuditaskChartTargetList[i].operationType == '9') {
            this.dialogForm.logAuditaskChartConfDto.logAuditaskChartTargetList[i].operationType = null
            this.dialogForm.logAuditaskChartConfDto.logAuditaskChartTargetList[i].operationValue = null
          }
        }
      }
    },
    // 图表重置
    resetChartType() {
      if (this.dialogForm.logAuditaskChartConfDto.logAuditaskChartConf.chartType == '4') {
        this.dialogForm.logAuditaskChartConfDto.logAuditaskChartConf.statisticalDimension = null
        this.dialogForm.logAuditaskChartConfDto.logAuditaskChartConf.topSize = 10// top值
        this.dialogForm.logAuditaskChartConfDto.logAuditaskChartConf.dimensionColumns = ''// 根据日志类型关联出的关键字字段名
        this.dialogForm.logAuditaskChartConfDto.logAuditaskChartConf.causalityTag = '0'// 是否生成因果关系图
        this.dialogForm.logAuditaskChartConfDto.logAuditaskChartConf.correlationTag = '0'// 是否进行相关性匹配
        this.dialogForm.logAuditaskChartConfDto.logAuditaskChartConf.operationType = null// 运算类型 下拉
        this.dialogForm.logAuditaskChartConfDto.logAuditaskChartConf.operationValue = null// 运算值
        this.dialogForm.logAuditaskChartConfDto.logAuditaskChartTargetList = [
          {
            'targetValue': '', // 根据日志类型关联出的关键字字段名
            'tarColId': null, // 根据日志类型关联出的关键字字段id
            'targetType': 0, // 指标类型 0-基础指标 1-复合指标
            'mainTag': '0', // 否展示 0-否 1-是 默认1
            'distinctTag': '0', // 是否去重
            'targerOrder': null, // 排序 页面先不做
            'showTag': '1', // 是否展示 0-否 1-是 默认1
            'operationType': null, // 运算类型 下拉
            'operationValue': '', // 运算值
            'colFlag': true,// 展示加号按钮
            'selectedEventGroup': [], // 事件分组 选中
            'eventGroupFilterText': ''   // 事件分组过滤文本
          }
        ]
      }
      this.dialogForm.logAuditaskChartConfDto.logAuditaskChartConf.chartType = null
    },
    businessFormChange() {
      // 获取选中节点
      const _this = this
      _this.selectBusinessFormList = _this.$refs['businessFormTree'].getCheckedNodes(true)
    },
    addAuditSubmit() {
      this.$refs.dialogForm.validate(valid => {
        if (valid) {
          const objType = this.dialogForm.logAuditaskObjDto.objType
          this.dialogForm.logAuditaskObjDto.logAuditaskObjList = []
          if (objType == '1') {
            for (let i = 0; i < this.selectBusinessFormList.length; i++) {
              const item = this.selectBusinessFormList[i]; const obj = { objType: '', businessId: null, assetId: null, assetName: null }
              obj.objType = objType
              obj.businessId = item.dataId
              this.dialogForm.logAuditaskObjDto.logAuditaskObjList.push(obj)
            }
          } else {
            for (let m = 0; m < this.aiList.length; m++) {
              const item = this.aiList[m]; const obj = { objType: '', businessId: null, assetId: null, assetName: '' }
              obj.objType = objType
              obj.assetId = item.assetId
              obj.businessId = item.businessId
              obj.assetName = item.assetName
              this.dialogForm.logAuditaskObjDto.logAuditaskObjList.push(obj)
            }
          }
          let dialogForm = JSON.parse(JSON.stringify(this.dialogForm))
          if (dialogForm.logAuditaskChartConfDto.logAuditaskChartConf.operationValue && 
              (dialogForm.logAuditaskChartConfDto.logAuditaskChartConf.dimensionColumns == '业务系统' 
                || dialogForm.logAuditaskChartConfDto.logAuditaskChartConf.dimensionColumns == '事件分组')) {
            dialogForm.logAuditaskChartConfDto.logAuditaskChartConf.operationValue = dialogForm.logAuditaskChartConfDto.logAuditaskChartConf.operationValue.join()
          }
          dialogForm.logAuditaskChartConfDto.logAuditaskChartTargetList.forEach(el => {
            if (el.targetValue == '业务系统' || el.targetValue == '事件分组') el.operationValue = el.operationValue.join()
          })
          let { operationType, operationValue } = dialogForm.logAuditaskChartConfDto.logAuditaskChartConf
          // 运算类型为范围（12）且有值
          if (operationType == '12' && operationValue) {
            dialogForm.logAuditaskChartConfDto.logAuditaskChartConf.operationValue = JSON.stringify(operationValue)
          }
          dialogForm.logAuditaskChartConfDto.logAuditaskChartTargetList.forEach(el => {
            if (el.operationType == '12' && el.operationValue) {
              el.operationValue = JSON.stringify(el.operationValue)
            }
          })
          auditAnalysisTaskAdd(dialogForm).then(resp => {
            if (resp.data.returnCode == '0') {
              this.$message.success('审计分析任务新增成功')
              this.closeDialog() // 关闭弹窗
            }
          }, error => {
            this.$message.error(error.returnMsg)
          })
        }
      })
    },
    updAuditSubmit() {
      this.$refs.dialogForm.validate(valid => {
        if (valid) {
          const objType = this.dialogForm.logAuditaskObjDto.objType
          this.dialogForm.logAuditaskObjDto.logAuditaskObjList = []
          if (objType == '1') {
            for (let i = 0; i < this.selectBusinessFormList.length; i++) {
              const item = this.selectBusinessFormList[i]; const obj = { objType: '', businessId: null, assetId: null, assetName: null }
              obj.objType = objType
              obj.businessId = item.dataId
              this.dialogForm.logAuditaskObjDto.logAuditaskObjList.push(obj)
            }
          } else {
            for (let m = 0; m < this.aiList.length; m++) {
              const item = this.aiList[m]; const obj = { objType: '', businessId: null, assetId: null, assetName: '' }
              obj.objType = objType
              obj.assetId = item.assetId
              obj.businessId = item.businessId
              obj.assetName = item.assetName
              this.dialogForm.logAuditaskObjDto.logAuditaskObjList.push(obj)
            }
          }
          let dialogForm = JSON.parse(JSON.stringify(this.dialogForm))
          if (dialogForm.logAuditaskChartConfDto.logAuditaskChartConf.operationValue && 
              (dialogForm.logAuditaskChartConfDto.logAuditaskChartConf.dimensionColumns == '业务系统' 
                || dialogForm.logAuditaskChartConfDto.logAuditaskChartConf.dimensionColumns == '事件分组')) {
            dialogForm.logAuditaskChartConfDto.logAuditaskChartConf.operationValue = dialogForm.logAuditaskChartConfDto.logAuditaskChartConf.operationValue.join()
          }
          dialogForm.logAuditaskChartConfDto.logAuditaskChartTargetList.forEach(el => {
            if (el.targetValue == '业务系统' || el.targetValue == '事件分组') el.operationValue = el.operationValue.join()
          })
          let { operationType, operationValue } = dialogForm.logAuditaskChartConfDto.logAuditaskChartConf
          // 运算类型为范围（12）且有值
          if (operationType == '12' && operationValue) {
            dialogForm.logAuditaskChartConfDto.logAuditaskChartConf.operationValue = JSON.stringify(operationValue)
          }
          dialogForm.logAuditaskChartConfDto.logAuditaskChartTargetList.forEach(el => {
            if (el.operationType == '12' && el.operationValue) {
              el.operationValue = JSON.stringify(el.operationValue)
            }
          })
          auditAnalysisTaskUpdate(dialogForm).then(resp => {
            if (resp.data.returnCode == '0') {
              this.$message.success('审计分析任务修改成功')
              this.closeDialog() // 关闭弹窗
            }
          }, error => {
            this.$message.error(error.returnMsg)
          })
        }
      })
    },
    timeSeriesAryInput(e) {
      if (e === null) {
        this.minDate = ''
        this.maxDate = ''
        this.pickerBeginDateBefore = {
          disabledDate: (time) => {
            const three = 30 * 24 * 3600 * 1000
            if (this.minDate) {
              return (
                time.getTime() > Date.now() ||
                      time > new Date(this.minDate.getTime() + three) ||
                      time < new Date(this.minDate.getTime() - three)
              )
            }
            return time.getTime() > Date.now()
          }
        }
      }
    },
    // 2月天数展示 闰年or平年判断
    judgeYear() {
      const nowDate = new Date()
      const year = nowDate.getFullYear()
      // 闰年公式：是4的倍数且不是100的倍数 或者是400的倍数
      if (year % 2 == 0 && year % 100 != 0 || year % 400 == 0) {
        this.leapYear = false
      } else {
        this.leapYear = true
      }
    },
    // 周期时间切换
    cycleUnitChange(cycleUnit) {
      const changeNum = ['日', '一', '二', '三', '四', '五', '六']
      if (cycleUnit == 1) {
        this.cycleValueWeek = []
        for (let i = 0; i < changeNum.length; i++) {
          this.cycleValueWeek.push({
            id: i + '',
            label: `周${changeNum[i]}`
          })
        }
      } else if (cycleUnit == 2) {
        this.cycleValueMonthDayBig = []
        for (let i = 1; i <= 31; i++) {
          this.cycleValueMonthDayBig.push({
            id: i + '',
            label: `${i}号`
          })
        }
      } else if (cycleUnit == 3) {
        this.cycleValueMonth = []
        for (let i = 1; i <= 31; i++) {
          this.cycleValueMonth.push({
            id: i + '',
            label: `${i}号`
          })
        }
      } else if (cycleUnit == 4) {
        this.cycleValueMonthDaySmall = []
        for (let i = 1; i <= 30; i++) {
          this.cycleValueMonthDaySmall.push({
            id: i + '',
            label: `${i}号`
          })
        }
      } else if (cycleUnit == 5) {
        this.cycleValueMonthDayYeap = []
        if (this.leapYear == false) {
          for (let i = 1; i <= 29; i++) {
            this.cycleValueMonthDayYeap.push({
              id: i + '',
              label: `${i}号`
            })
          }
        } else {
          for (let i = 1; i <= 28; i++) {
            this.cycleValueMonthDayYeap.push({
              id: i + '',
              label: `${i}号`
            })
          }
        }
      } else {
        this.cycleValueWeek = []
        this.cycleValueMonth = []
        this.cycleValueDay = []
      }
    },
    addInput(index) {
      // 添加
      const typePropertyList = this.dialogForm.logAuditaskChartConfDto.logAuditaskChartTargetList
      if (typePropertyList[index].tarColId != null && typePropertyList[index].targetValue != '' && typePropertyList[index].mainTag != '' && typePropertyList[index].showTag != '') {
        // if(index == 0){
        this.dialogForm.logAuditaskChartConfDto.logAuditaskChartTargetList.push({
          targetValue: '', // 根据日志类型关联出的关键字字段名
          tarColId: null, // 根据日志类型关联出的关键字字段id
          targetType: 0, // 指标类型 0-基础指标 1-复合指标
          mainTag: '0', // 否展示 0-否 1-是 默认1
          distinctTag: '0',
          targerOrder: null, // 排序 页面先不做
          showTag: '1', // 是否展示 0-否 1-是 默认1
          operationType: null, // 运算类型 下拉
          operationValue: null, // 运算值
          colFlag: true,// 展示加号按钮
          selectedEventGroup: [], // 事件分组 选中
          eventGroupFilterText: ''   // 事件分组过滤文本
        }) // 添加行内一个对象
        this.dialogForm.logAuditaskChartConfDto.logAuditaskChartTargetList[index].colFlag = false // 行内+号消失
        // }
        // else{
        //   for(let i =0 ;i < typePropertyList.length-1;i++){
        //     if(typePropertyList[i].tarColId == typePropertyList[i+1].tarColId){
        //       this.$message.error('当前维度类型已存在')
        //       return false
        //       isExit = true
        //     }else{
        //       isExit = false
        //     }
        //   }
        //   if(!isExit){
        //     this.dialogForm.logAuditaskChartConfDto.logAuditaskChartTargetList.push({
        //       targetValue: "",//根据日志类型关联出的关键字字段名
        //       tarColId: null,//根据日志类型关联出的关键字字段id
        //       targetType: 0,//指标类型 0-基础指标 1-复合指标
        //       mainTag: '0',//否展示 0-否 1-是 默认1
        //       targerOrder: null,//排序 页面先不做
        //       showTag:'1',//是否展示 0-否 1-是 默认1
        //       operationType: null,//运算类型 下拉
        //       operationValue: null,//运算值
        //       colFlag:true,//展示加号按钮
        //     }); //添加行内一个对象
        //     this.dialogForm.logAuditaskChartConfDto.logAuditaskChartTargetList[index].colFlag = false; //行内+号消失
        //   }
        // }
      } else {
        this.$message.warning('请先确认必填项是否已输入！')
      }
    },
    delInput(index) {
      if (this.dialogForm.logAuditaskChartConfDto.logAuditaskChartTargetList.length == 1 && index == 0) {
        this.$message.info('至少保留一个')
        return
      }
      // 删除
      if (this.oper != 'detail') {
        // if(index < this.dialogForm.logAuditaskChartConfDto.logAuditaskChartTargetList.length - 1) {
        //   this.dialogForm.logAuditaskChartConfDto.logAuditaskChartTargetList.splice(
        //     index,
        //     this.dialogForm.logAuditaskChartConfDto.logAuditaskChartTargetList.length - 1
        //   );
        // } else {
        this.dialogForm.logAuditaskChartConfDto.logAuditaskChartTargetList.splice(index, 1) // 删除行内一个对象
        // }
        if (index == this.dialogForm.logAuditaskChartConfDto.logAuditaskChartTargetList.length) {
          this.dialogForm.logAuditaskChartConfDto.logAuditaskChartTargetList[index - 1].colFlag = true
        }
      }
    },
    start22(event) {},
    end22(ev) {},
    handleDel(index, id) {},
    // 资产查询弹窗
    // 重置资产查询条件
    resetAsset: function() {
      this.clearAssetForm()
    },
    // 关闭弹窗
    clearAssetForm: function() {
      this.$refs['assetForm'].resetFields()
      this.assetCheckbox = []
      this.assetAll = false
      this.tableData = []
      this.total = 0
      this.moreBtn = false
      this.tipText = ''
      this.queryAssetCurrentPage = 1
      this.queryAssetTotal = 0
    },
    // 更多
    more: function() {
      this.queryAssetForm.page.current++
      if (this.queryAssetForm.page.current <= this.totalPage) {
        this.loadingAsset = true
        getQuepAsset(this.queryAssetForm).then((resp) => {
          if (resp.data.returnCode == '0') {
            var list = resp.data.data.list
            this.totalPage = resp.data.data.page.pages
            list.forEach((item, index) => {
              this.tableData.push(item)
              this.total = this.tableData.length
            })
          }
          this.loadingAsset = false
        }, (error) => {
          this.loadingAsset = false
          this.$message.error(error.message)
        })
      } else {
        this.tipText = '没有更多了'
      }
    },
    getRowKeys(row) {
      return row.assetId
    },
    // 多选
    handleSelectionChange: function(val) {
      this.multipleSelection = val
      this.selectData = val.length
    },
    showAssetDialog: function() {
      this.moreBtn = false
      this.assetQuery = true
    },
    // 查询资产
    queryAsset: function() {
      this.tableData = []
      this.loadingAsset = true
      this.queryAssetForm.page.current = 1
      getQuepAsset(this.queryAssetForm).then((resp) => {
        if (resp.data.returnCode == '0') {
          this.size = resp.data.data.page.size
          this.currentPage = resp.data.data.page.current
          var list = resp.data.data.list
          var tip = resp.data.data.tip
          this.queryAssetSize = resp.data.data.page.size
          this.queryAssetCurrentPage = resp.data.data.page.current
          this.queryAssetTotal = resp.data.data.page.total
          if (tip != null) {
            this.open3(tip)
          }
          this.totalPage = resp.data.data.page.pages
          if (list.length) {
            list.forEach((item, index) => {
              this.tableData.push(item)
              this.total = this.tableData.length
            })
            if (this.totalPage === 1) {
              this.moreBtn = false
            } else {
              this.tipText = '更多'
              this.moreBtn = true
            }
          } else {
            this.moreBtn = false
            this.tipText = ''
          }
        }
        this.loadingAsset = false
      }, (error) => {
        this.loadingAsset = false
        this.$message.error(error.message)
      })
    },
    submitAsset() {
      let aiList = [].concat(this.aiList)
      for (const option of this.multipleSelection) {
        aiList.push({ assetId: option.assetId, assetName: option.assetName, businessId: option.businessId, mgmtIp: option.mgmtIp })
      }
      aiList = this.$util.unique(aiList, 'assetId')
      this.$util.delete(this.aiList).push(...aiList)
      this.assetQuery = false
    },
    // 删除资产
    tagCloseHandle: function(tag) {
      this.aiList.splice(this.aiList.indexOf(tag), 1)
      // this.selectAsset.splice(this.selectAsset.indexOf(tag.assetId), 1);
    },
    // 全部删除
    closeAll: function() {
      this.aiList = []
      // this.selectAsset = [];
    },
    // 删除前确认
    confirmDel() {
      this.$confirm('是否确定删除所有资产?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.closeAll()
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    changeObjType(val) {
      if (val == '1') {
        this.selectBusinessFormList = []
        this.$refs.businessFormTree.setCheckedKeys([])
        this.filterFormText = ''
      } else {
        this.aiList = []
      }
    }
  }
}
</script>
<style>
.asset-search{
  border-color:#b0d5fe;
  color:#3e9cfd;
  background:#ebf4fe;
}
.asset-reset{
  border-color:#f5dab1;
  color:#e6a23c ;
  background: #fdf6ec;
}
.dndList-list{
  /* width:100%; */
  width:auto;
  /* border:2px solid #dedede; */
  margin-bottom:5px;
  /* height: 314px; */
  background:#F8F8F8;
  padding:2px;
}
.dndList-list::-webkit-scrollbar{
  width:1px;
  height:1px;
}
.list-complete-item-layout{
  cursor: pointer;
  position: relative;
  display: inline-block;
  transition: all 1s;
  text-align: center;
  background-color:#dae6fa;
  border:1px solid #dedede;
}
.list-complete-item-layout:hover{
  background-color:#dae6ff;
  opacity:0.8;
}
.select-container .el-input__inner{
  padding:0 8px;
}
.label .el-form-item__label{
  padding:0 6px 0px 0px;
}
.label{
  margin-bottom:5px !important;
}
.labels{
  margin-top:5px !important;
  margin-bottom:3px !important;
}
.poptooltip{
  font-size:13px !important;
  padding:6px !important;
}
.poptooltips{
  font-size:13px !important;
  padding:6px !important;
  width:300px;
}
.radio-chart .el-radio__label{
  padding-left:0px;
}
</style>
<style lang="scss" scoped>
.device-title-container{
  margin-top:2.15%;
  .device-img{
    width: 22px;
    height:22px;
    vertical-align: middle;
    margin-right:7px;
    display: inline-block;
  }
  .device-title{
    width: 4.95%;
    height: 14px;
    font-size: 14px;
    font-family: SimHei;
    font-weight: 400;
    color: #606266;
    line-height: 16px;
    margin-right:1.82%;
    vertical-align: middle;
  }
  .device-change-btn{
    margin-right:0.36%;
    display: inline-block;
    background:#fff !important;
    vertical-align: middle;
    color:#333333;
  }
  .device-reset-btn{
    width: 79px;
    height: 28px;
    background: #ECF5FF;
    border: 1px solid #B3D8FF;
    border-radius: 3px;
    display: inline-block;
    vertical-align: middle;
    font-size: 12px;
    font-family: SimHei;
    font-weight: 400;
    color: #409EFF;
    line-height: 28px;
    text-align: center;
  }
}
.asset-search-btn{
  width: 60px;
  height: 26px;
  background: #4A89E8;
  border-radius: 16px;
  font-size: 12px;
  font-family: SimHei;
  color: #effeff;
  line-height: 26px;
  text-align: center;
  margin-top:1%;
  float:right;
}
.btnLine{
  margin-right:6px;
}
.icon-ctn{
  margin-left:20px;
  width: 100%;
  height:40px;
  display: flex;
  align-items: center
}
.icon-ctn img{
  cursor: pointer;
  width: 23px;
  height:23px;
  margin-right:10px;
  display: inline-block;
  align-items: center;
}
.icon-hover{
  font-weight:600;
}
.icon-hover:hover{
  cursor: pointer;
  color:#409EFF;
}
.selectWarp .el-tag {
  width: 48%;
  margin-right: 1%;
  position: relative;
}
.selectWarp .el-tag .el-icon-close {
  /* float:right;
    margin-top: 4px;*/
  position: absolute;
  right: 0;
  top: 4px;
}
.selectWarp {
  position: relative;
}
.selectWarp .el-icon-close.closeAll {
  color: red;
  float: right;
  position: absolute;
  top: 5px;
  right: 5px;
  cursor: pointer;
  font-size: 10px;
  font-weight: bold;
}
.set-name{
  line-height:14px;
  font-size: 14px;
  height:14px;
  color:#666666;
  padding-left: 6px;
  font-weight: 500;
}
.btn-reset{
  width: 66px;
  height: 28px;
  float: right;
  line-height: 28px;
  text-align: center;
  font-size: 12px;
  cursor: pointer;
  background:#F8B500;
  /* background:#4185F4; */
  color: #fff;
  border-radius: 3px;
  margin-left:6px;
}
.btn-reset:hover{
  opacity: 0.9;
}
.set-type{
  margin-top:23px;
  margin-left:2.11%;
  height:auto;
}
.img-ctn{
  height:110px;
  /* width:40px; */
  width:60px;
  vertical-align: middle;
  text-align: center;
}
.img-ctn .imgchart{
  padding-top:6px;
  background-size: contain;
  /* height:32px; */
  height:70px;
  max-width: 100%;
}
.img-ctn .chartname{
  width:100%;
  margin-top:8px;
  height:30px;
  line-height:30px;
  font-size:12px;
}
.radio-chart{
  text-align: center;
  margin-right:2.71%;
  vertical-align: middle;
}
</style>
