<template>
  <el-dialog
    ref="enlargeDialog"
    :append-to-body="true"
    v-model="dialogShow"
    width="70vw"
    top="10vh"
    trigger="click"
  >
    <linkage-set-option
      v-if="curComponent && curComponent.actionSelection"
      :action-selection="customLinkageActive"
    ></linkage-set-option>
    <div
      v-loading="loading"
      @keydown.stop
      @keyup.stop
      v-if="state.initState"
      style="height: 550px; margin-top: 22px"
    >
      <el-row style="flex-direction: row">
        <div class="top-area">
          <span class="top-area-text" style="margin-left: 0"
            >{{ t('visualization.selected_view') }}：</span
          >
          <span class="top-area-value">
            <Icon class-name="view-type-icon"
              ><component
                class="svg-icon view-type-icon"
                :is="iconChartMap[state.curLinkageViewInfo.type]"
              ></component
            ></Icon>
            {{ state.curLinkageViewInfo.title }}</span
          >
          <span class="top-area-text">{{ t('visualization.used_dataset') }}：</span>
          <span class="top-area-value">
            <Icon class-name="view-type-icon" name="dataset-outline"
              ><datasetOutline style="vertical-align: -0.2em" class="svg-icon view-type-icon"
            /></Icon>
            {{ state.curDatasetInfo.name }}</span
          >
        </div>
      </el-row>
      <el-row>
        <el-row class="preview">
          <el-col :span="8" style="height: 100%; overflow-y: auto">
            <el-row class="tree-head">
              <span class="head-text">{{ t('visualization.to_select_view') }}</span>
              <span class="head-filter"
                >{{ t('visualization.show_selected_only') }}
                <el-switch size="small" v-model="state.showSelected" />
              </span>
            </el-row>
            <el-row class="tree-dataset-head" v-show="sameDsShow"
              ><span
                ><el-icon class="toggle-icon" @click="() => (toggleSameDs = !toggleSameDs)">
                  <CaretBottom v-show="toggleSameDs" />
                  <CaretRight v-show="!toggleSameDs" /> </el-icon
                ><span>{{ t('visualization.same_dataset') }}</span></span
              >
              <el-checkbox
                v-model="sameDatasetComponentCheckAll"
                :indeterminate="checkAllIsIndeterminate"
                @change="batchSelectChange"
                >{{ t('visualization.select_all') }}</el-checkbox
              ></el-row
            >
            <el-tree
              v-show="toggleSameDs && sameDsShow"
              class="custom-tree"
              menu
              ref="linkageInfoTree"
              :empty-text="t('visualization.no_available_view')"
              :filter-node-method="filterNodeMethod"
              :data="curLinkageTargetViewsInfoSameDs"
              node-key="targetViewId"
              highlight-current
              :props="state.treeProp"
              @node-click="nodeClickPre($event, 'sameDs')"
            >
              <template #default="{ data }">
                <span class="custom-tree-node">
                  <span>
                    <div @click.stop>
                      <span class="auth-span">
                        <!--？？？-->
                        <el-checkbox
                          v-model="data.linkageActive"
                          @change="targetViewCheckedChange('sameDs', data)"
                        />
                      </span>
                    </div>
                  </span>
                  <span>
                    <span class="tree-select-field">
                      <Icon class-name="view-type-icon"
                        ><component
                          :is="iconChartMap[data.targetViewType]"
                          style="margin-right: 4px"
                          class="svg-icon view-type-icon"
                        ></component
                      ></Icon>
                      {{ data.targetViewName }}
                    </span>
                  </span>
                </span>
              </template>
            </el-tree>
            <el-row class="tree-dataset-head tree-dataset-head-top" v-show="diffDsShow"
              ><span
                ><el-icon class="toggle-icon" @click="() => (toggleDiffDs = !toggleDiffDs)">
                  <CaretBottom v-show="toggleDiffDs" />
                  <CaretRight v-show="!toggleDiffDs" /> </el-icon
                ><span>{{ t('visualization.diff_dataset') }}</span></span
              >
            </el-row>
            <el-tree
              v-show="toggleDiffDs && diffDsShow"
              class="custom-tree"
              menu
              ref="linkageInfoTreeDiffDs"
              :empty-text="t('visualization.no_available_view')"
              :filter-node-method="filterNodeMethod"
              :data="curLinkageTargetViewsInfoDiffDs"
              node-key="targetViewId"
              highlight-current
              :props="state.treeProp"
              @node-click="nodeClickPre($event, 'diffDs')"
            >
              <template #default="{ data }">
                <span class="custom-tree-node">
                  <span>
                    <div @click.stop>
                      <span class="auth-span">
                        <!--？？？-->
                        <el-checkbox
                          v-model="data.linkageActive"
                          @change="targetViewCheckedChange('diffDs', data)"
                        />
                      </span>
                    </div>
                  </span>
                  <span>
                    <span class="tree-select-field">
                      <Icon :name="data.targetViewType"
                        ><component
                          class="svg-icon view-type-icon"
                          style="margin-right: 4px"
                          :is="iconChartMap[data.targetViewType]"
                        ></component
                      ></Icon>
                      {{ data.targetViewName }}
                    </span>
                  </span>
                </span>
              </template>
            </el-tree>
          </el-col>
          <el-col :span="16" class="preview-show">
            <el-row class="content-head">{{ t('visualization.linkage_setting_tips1') }}</el-row>
            <el-row
              v-if="
                state.linkageInfo &&
                state.linkageInfo.linkageActive &&
                curComponent?.innerType === 'indicator'
              "
              style="height: 100%"
              class="custom-position"
            >
              <Icon name="dv-empty"
                ><dvEmpty style="width: 125px; height: 125px" class="svg-icon"
              /></Icon>
              <span style="margin-top: 8px; font-size: 14px">
                {{ t('visualization.indicator_linkage') }}</span
              >
            </el-row>
            <el-row v-else-if="state.linkageInfo && state.linkageInfo.linkageActive">
              <el-row style="margin-top: 5px">
                <div style="display: flex" class="inner-content">
                  <div style="flex: 1">{{ t('visualization.current_chart_source_field') }}</div>
                  <div style="width: 36px"></div>
                  <div style="flex: 1">
                    {{ t('visualization.link_view_field') }}
                  </div>
                  <div style="width: 32px"></div>
                </div>
                <div style="width: 100%; max-height: 350px; overflow-y: auto">
                  <div
                    style="display: flex; padding: 0 16px 8px"
                    v-for="(itemLinkage, index) in state.linkageInfo.linkageFields"
                    :key="index"
                  >
                    <div style="flex: 1">
                      <div class="select-filed">
                        <el-select
                          v-model="itemLinkage.sourceField"
                          :placeholder="t('chart.pls_select_field')"
                          style="width: 100%"
                        >
                          <el-option
                            v-for="item in sourceLinkageInfoFilter"
                            :key="item.id"
                            :label="item.name"
                            :value="item.id"
                          >
                            <span class="custom-option">
                              <Icon
                                ><component
                                  style="width: 14px; height: 14px"
                                  :class="`field-icon-${fieldType[item.deType]}`"
                                  class="svg-icon"
                                  :is="iconFieldMap[fieldType[item.deType]]"
                                ></component
                              ></Icon>
                              <span style="float: left; margin-left: 4px; font-size: 14px">{{
                                item.name
                              }}</span>
                            </span>
                          </el-option>
                        </el-select>
                      </div>
                    </div>
                    <el-icon class="link-icon-join">
                      <Icon style="width: 20px; height: 20px" name="dv-link-target"
                        ><dvLinkTarget style="width: 20px; height: 20px" class="svg-icon"
                      /></Icon>
                    </el-icon>
                    <div style="flex: 1">
                      <div class="select-filed">
                        <el-select
                          v-model="itemLinkage.targetField"
                          :placeholder="t('common.selectText')"
                          style="width: 100%"
                        >
                          <el-option
                            v-for="item in state.linkageInfo.targetViewFields"
                            :key="item.id"
                            :label="item.name"
                            :value="item.id"
                          >
                            <span class="custom-option">
                              <Icon
                                ><component
                                  style="width: 14px; height: 14px"
                                  class="svg-icon"
                                  :class="`field-icon-${fieldType[item.deType]}`"
                                  :is="iconFieldMap[fieldType[item.deType]]"
                                ></component
                              ></Icon>
                              <span style="float: left; margin-left: 4px; font-size: 14px">{{
                                item.name
                              }}</span>
                            </span>
                          </el-option>
                        </el-select>
                      </div>
                    </div>

                    <el-button class="m-del-icon-btn" text @click="deleteLinkageField(index)">
                      <el-icon size="16px">
                        <Icon name="icon_delete-trash_outlined"
                          ><icon_deleteTrash_outlined class="svg-icon"
                        /></Icon>
                      </el-icon>
                    </el-button>
                  </div>
                </div>
                <el-row style="width: 100%; padding-left: 16px">
                  <el-button type="primary" icon="Plus" text @click="addLinkageField('', '')">
                    {{ t('visualization.add_linkage_dependency_fields') }}
                  </el-button>
                </el-row>
              </el-row>
            </el-row>
            <el-row v-else style="height: 100%" class="custom-position">
              <Icon name="dv-empty"
                ><dvEmpty style="width: 125px; height: 125px" class="svg-icon"
              /></Icon>
              <span style="margin-top: 8px; font-size: 14px">
                {{ t('visualization.select_linkage_tips') }}</span
              >
            </el-row>
          </el-col>
        </el-row>
      </el-row>
      <el-row class="root-class">
        <el-button size="mini" @click="cancel()">{{ t('common.cancel') }} </el-button>
        <el-button type="primary" size="mini" @click="saveLinkageSetting()">
          {{ t('dataset.confirm') }}
        </el-button>
      </el-row>
    </div>
  </el-dialog>
</template>

<script lang="ts" setup>
import { iconFieldMap } from '@/components/icon-group/field-list'
import { iconChartMap } from '@/components/icon-group/chart-list'
import datasetOutline from '@/assets/svg/dataset-outline.svg'
import dvLinkTarget from '@/assets/svg/dv-link-target.svg'
import icon_deleteTrash_outlined from '@/assets/svg/icon_delete-trash_outlined.svg'
import dvEmpty from '@/assets/svg/dv-empty.svg'
import { queryVisualizationJumpInfo } from '@/api/visualization/linkJump'
import { reactive, ref, nextTick, watch, computed } from 'vue'
import { dvMainStoreWithOut } from '@/store/modules/data-visualization/dvMain'
import { storeToRefs } from 'pinia'
import { ElMessage } from 'element-plus-secondary'
import { useI18n } from '@/hooks/web/useI18n'
import { fieldType } from '@/utils/attr'
import {
  getPanelAllLinkageInfo,
  getViewLinkageGatherArray,
  saveLinkage
} from '@/api/visualization/linkage'
import { getDatasetDetails } from '@/api/dataset'
import { findAllViewsId } from '@/utils/canvasUtils'
import { snapshotStoreWithOut } from '@/store/modules/data-visualization/snapshot'
import LinkageSetOption from '@/components/visualization/LinkageSetOption.vue'
import { deepCopy } from '@/utils/utils'
import { ACTION_SELECTION } from '@/custom-component/component-list'
const dvMainStore = dvMainStoreWithOut()
const { dvInfo, canvasViewInfo, componentData, curComponent } = storeToRefs(dvMainStore)
const linkageInfoTree = ref(null)
const linkageInfoTreeDiffDs = ref(null)
const { t } = useI18n()
const dialogShow = ref(false)
const loading = ref(false)
const curLinkageTargetViewsInfo = ref([])
const curLinkageTargetViewsInfoSameDs = ref([])
const curLinkageTargetViewsInfoDiffDs = ref([])
const snapshotStore = snapshotStoreWithOut()
const state = reactive({
  sourceLinkageInfo: {},
  showSelected: false,
  curLinkageViewInfo: {},
  curDatasetInfo: {},
  initState: false,
  viewId: null,
  tableId: null,
  treeProp: {
    id: 'targetViewId',
    label: 'targetViewName',
    children: 'children'
  },
  linkageInfo: null
})
const sameDatasetComponentCheckAll = ref(false)

const checkAllIsIndeterminate = ref(false)

const customLinkageActive = ref(deepCopy(ACTION_SELECTION))

const toggleSameDs = ref(true)

const toggleDiffDs = ref(true)

const sameDsTreeSelectedChange = () => {
  const checkedCount = curLinkageTargetViewsInfoSameDs.value.filter(
    viewInfo => viewInfo.linkageActive
  ).length
  sameDatasetComponentCheckAll.value = checkedCount === curLinkageTargetViewsInfoSameDs.value.length
  checkAllIsIndeterminate.value =
    checkedCount > 0 && checkedCount < curLinkageTargetViewsInfoSameDs.value.length
}

const batchSelectChange = value => {
  // do change
  curLinkageTargetViewsInfoSameDs.value.forEach(viewInfo => {
    if (value) {
      viewInfo.linkageActive = true
      sameDatasetComponentCheckAll.value = true
      linkageFieldAdaptor(viewInfo)
    } else {
      viewInfo.linkageActive = false
      sameDatasetComponentCheckAll.value = false
    }
  })
  checkAllIsIndeterminate.value = false
}

const sameDsShow = computed(
  () => curLinkageTargetViewsInfoSameDs.value && curLinkageTargetViewsInfoSameDs.value.length > 0
)

const diffDsShow = computed(
  () =>
    curLinkageTargetViewsInfoDiffDs.value &&
    curLinkageTargetViewsInfoDiffDs.value.length > 0 &&
    curComponent.value.innerType !== 'indicator'
)

const dialogInit = viewItem => {
  state.showSelected = false
  dialogShow.value = true
  state.initState = false
  init(viewItem)
}

const linkageSetting = curViewId => {
  // sourceViewId 也加入查询
  const targetViewIds = []
  findAllViewsId(componentData.value, targetViewIds)

  // 获取当前仪表板当前图表联动信息
  const requestInfo = {
    dvId: dvInfo.value.id,
    sourceViewId: curViewId,
    targetViewIds: targetViewIds,
    linkageInfo: null,
    resourceTable: 'snapshot'
  }
  getViewLinkageGatherArray(requestInfo).then(rsp => {
    // 获取当前仪表板的图表(去掉当前图表)
    curLinkageTargetViewsInfo.value = rsp.data || []
    curLinkageTargetViewsInfo.value.forEach(item => {
      if (item.targetViewId === curViewId) {
        state.sourceLinkageInfo = item
      }
    })
    curLinkageTargetViewsInfo.value = curLinkageTargetViewsInfo.value.filter(
      viewInfo => viewInfo.targetViewId !== state.viewId
    )

    curLinkageTargetViewsInfoSameDs.value = curLinkageTargetViewsInfo.value.filter(
      viewInfo => viewInfo.tableId === state.tableId
    )

    curLinkageTargetViewsInfoDiffDs.value = curLinkageTargetViewsInfo.value.filter(
      viewInfo => viewInfo.tableId !== state.tableId
    )

    let firstNode
    let linkageTreeName
    if (curLinkageTargetViewsInfoSameDs.value && curLinkageTargetViewsInfoSameDs.value.length > 0) {
      firstNode = curLinkageTargetViewsInfoSameDs.value[0]
      linkageTreeName = 'sameDs'
    } else if (
      curLinkageTargetViewsInfoDiffDs.value &&
      curLinkageTargetViewsInfoDiffDs.value.length > 0
    ) {
      firstNode = curLinkageTargetViewsInfoDiffDs.value[0]
      linkageTreeName = 'diffDs'
    }
    state.initState = true
    nextTick(() => {
      if (firstNode) {
        const linkageTree =
          linkageTreeName === 'sameDs' ? linkageInfoTree.value : linkageInfoTreeDiffDs.value
        linkageTree.setCurrentKey(firstNode.targetViewId)
      }
      nodeClick(firstNode)
      sameDsTreeSelectedChange()
    })
  })
}

const init = viewItem => {
  state.initState = false
  state.viewId = viewItem.id
  curLinkageTargetViewsInfo.value = []
  const chartDetails = canvasViewInfo.value[state.viewId]
  state.curLinkageViewInfo = chartDetails
  if (chartDetails.tableId) {
    state.tableId = chartDetails.tableId
    // 获取当前数据集信息
    getDatasetDetails(chartDetails.tableId).then(res => {
      state.curDatasetInfo = res || {}
    })
  }
  customLinkageActive.value = curComponent.value.actionSelection
  linkageSetting(state.viewId)
}

const saveLinkageSetting = () => {
  // 字段检查
  let subCheckCountAll = 0
  curLinkageTargetViewsInfo.value.forEach(linkageInfo => {
    let subCheckCount = 0
    const linkageFields = linkageInfo['linkageFields']
    if (linkageFields && linkageInfo.linkageActive) {
      linkageFields.forEach(function (linkage) {
        if (!(linkage.sourceField && linkage.targetField)) {
          subCheckCount++
          subCheckCountAll++
        }
      })
    }

    if (subCheckCount > 0) {
      ElMessage.error(
        '【' + linkageInfo.targetViewName + '】-' + t('visualization.exit_un_march_linkage_field')
      )
      return
    }
  })
  if (subCheckCountAll) {
    return
  }

  const request = {
    dvId: dvInfo.value.id,
    sourceViewId: state.viewId,
    linkageInfo: curLinkageTargetViewsInfo.value
  }
  loading.value = true
  saveLinkage(request)
    .then(() => {
      curComponent.value.actionSelection.linkageActive = customLinkageActive.value.linkageActive
      snapshotStore.recordSnapshotCache('saveLinkageSetting')
      ElMessage.success('保存成功')
      // 刷新联动信息
      getPanelAllLinkageInfo(dvInfo.value.id).then(rsp => {
        dvMainStore.setNowPanelTrackInfo(rsp.data)
      })
      cancelLinkageSetting()
      // 刷新跳转信息
      queryVisualizationJumpInfo(dvInfo.value.id).then(rsp => {
        dvMainStore.setNowPanelJumpInfo(rsp.data)
        cancel()
      })
      loading.value = false
    })
    .catch(() => {
      loading.value = false
    })
}

const cancelLinkageSetting = () => {
  dvMainStore.clearLinkageSettingInfo()
}

const nodeClickPre = (data, treeName) => {
  if (treeName === 'sameDs') {
    linkageInfoTree.value.setCurrentKey(data.targetViewId)
    linkageInfoTreeDiffDs.value.setCurrentKey(null)
  } else {
    linkageInfoTree.value.setCurrentKey(null)
    linkageInfoTreeDiffDs.value.setCurrentKey(data.targetViewId)
  }
  nodeClick(data)
}

const nodeClick = data => {
  state.linkageInfo = data
}

const addLinkageFieldAdaptor = (data, sourceFieldId?, targetFieldId?) => {
  const linkageFieldItem = {
    sourceField: sourceFieldId,
    targetField: targetFieldId
  }
  data.linkageFields.push(linkageFieldItem)
}

const addLinkageField = (sourceFieldId?, targetFieldId?) => {
  const linkageFieldItem = {
    sourceField: sourceFieldId,
    targetField: targetFieldId
  }
  state.linkageInfo.linkageFields.push(linkageFieldItem)
}
const deleteLinkageField = index => {
  state.linkageInfo.linkageFields.splice(index, 1)
}

const linkageFieldAdaptor = async data => {
  if (data.linkageActive) {
    // 初始化映射关系 如果当前是相同的数据集且没有关联关系，则自动补充映射关系
    const targetChartDetails = canvasViewInfo.value[data.targetViewId]
    if (targetChartDetails && targetChartDetails.tableId && data.linkageFields.length === 0) {
      if (state.curLinkageViewInfo.tableId === targetChartDetails.tableId) {
        // 只匹配联动字段为0的 避免已经匹配过的重新匹配
        if (data.linkageFields && data.linkageFields.length === 0) {
          const curCheckAllAxisStr =
            JSON.stringify(state.curLinkageViewInfo.xAxis) +
            JSON.stringify(state.curLinkageViewInfo.xAxisExt) +
            JSON.stringify(state.curLinkageViewInfo.extStack) +
            (state.curLinkageViewInfo.type.includes('chart-mix')
              ? JSON.stringify(state.curLinkageViewInfo.extBubble)
              : '') +
            (['indicator'].includes(state.curLinkageViewInfo.type)
              ? JSON.stringify(state.curLinkageViewInfo.yAxis)
              : '')
          const targetCheckAllAxisStr =
            JSON.stringify(targetChartDetails.xAxis) +
            JSON.stringify(targetChartDetails.xAxisExt) +
            JSON.stringify(state.curLinkageViewInfo.extStack) +
            (targetChartDetails.type.includes('chart-mix')
              ? JSON.stringify(targetChartDetails.extBubble)
              : '') +
            (['indicator'].includes(state.curLinkageViewInfo.type)
              ? JSON.stringify(state.curLinkageViewInfo.yAxis)
              : '')
          state.sourceLinkageInfo.targetViewFields.forEach(item => {
            if (
              curCheckAllAxisStr.includes(item.id) &&
              targetCheckAllAxisStr.includes(item.id) &&
              data.linkageFields
            ) {
              addLinkageFieldAdaptor(data, item.id, item.id)
            }
          })
        }
      } else {
        addLinkageFieldAdaptor(data, '', '')
      }
    }
  }
}

const sourceLinkageInfoFilter = computed(() => {
  if (state.sourceLinkageInfo.targetViewFields) {
    const curCheckAllAxisStr =
      JSON.stringify(state.curLinkageViewInfo.xAxis) +
      JSON.stringify(state.curLinkageViewInfo.drillFields) +
      JSON.stringify(state.curLinkageViewInfo.xAxisExt) +
      JSON.stringify(state.curLinkageViewInfo.extStack) +
      (state.curLinkageViewInfo.type.includes('chart-mix')
        ? JSON.stringify(state.curLinkageViewInfo.extBubble)
        : '') +
      (['table-normal', 'indicator'].includes(state.curLinkageViewInfo.type)
        ? JSON.stringify(state.curLinkageViewInfo.yAxis)
        : '')
    return state.sourceLinkageInfo.targetViewFields.filter(item =>
      curCheckAllAxisStr.includes(item.id)
    )
  } else {
    return []
  }
})

const targetViewCheckedChange = (treeName, data) => {
  nextTick(() => {
    if (treeName === 'sameDs') {
      linkageInfoTree.value.setCurrentKey(data.targetViewId)
      linkageInfoTreeDiffDs.value.setCurrentKey(null)
    } else {
      linkageInfoTree.value.setCurrentKey(null)
      linkageInfoTreeDiffDs.value.setCurrentKey(data.targetViewId)
    }
    nodeClick(data)
    linkageFieldAdaptor(data)
    sameDsTreeSelectedChange()
  })
}
const cancel = () => {
  dialogShow.value = false
  state.initState = false
}

const filterNodeMethod = (value, data) => {
  return !value || data.linkageActive
}

watch(
  () => state.showSelected,
  newValue => {
    linkageInfoTree.value?.filter(newValue)
    linkageInfoTreeDiffDs.value?.filter(newValue)
  }
)

defineExpose({
  dialogInit
})
</script>

<style scoped lang="less">
.root-class {
  margin: 15px 0px 5px;
  justify-content: right;
}

.preview {
  margin-top: 5px;
  border: 1px solid #e6e6e6;
  border-radius: 4px;
  height: 470px !important;
  overflow: hidden;
  background-size: 100% 100% !important;
}

.preview-show {
  border-left: 1px solid #e6e6e6;
  height: 470px;
  background-size: 100% 100% !important;
}

.slot-class {
  color: white;
}

.bottom {
  margin-top: 10px;
  justify-content: center;
}

.ellip {
  margin-left: 10px;
  margin-right: 10px;
  overflow: hidden; /*超出部分隐藏*/
  white-space: nowrap; /*不换行*/
  text-overflow: ellipsis; /*超出部分文字以...显示*/
  text-align: center;
  background-color: #f7f8fa;
  color: #3d4d66;
  font-size: 12px;
  line-height: 24px;
  height: 24px;
  border-radius: 3px;
}

.select-filed {
  overflow: hidden; /*超出部分隐藏*/
  white-space: nowrap; /*不换行*/
  text-overflow: ellipsis; /*超出部分文字以...显示*/
  color: #3d4d66;
  font-size: 12px;
  border-radius: 3px;
}

.custom-position {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  flex-flow: row nowrap;
  color: #9ea6b2;
  flex-direction: column;
  span {
    line-height: 22px;
    color: #646a73;
  }
}

.tree-style {
  padding: 10px 15px;
  height: 100%;
  overflow-y: auto;
}
.custom-tree-node {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
}

.auth-span {
  float: left;
  width: 30px;
  margin-left: -8px;
}

.tree-head {
  height: 40px;
  line-height: 40px;
  font-size: 12px;
  color: #3d4d66;
  .head-text {
    margin-left: 16px;
    font-weight: 500;
    font-size: 14px;
    color: #1f2329;
  }
  .head-filter {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: end;
    margin-right: 16px;
    font-weight: 400;
    font-size: 12px;
    color: #646a73;
    .ed-switch {
      margin-left: 8px;
    }
  }
}

.padding-lr {
  padding: 0 4px;
}

.field-height {
  height: calc(100% - 25px);
  margin-top: 12px;
}

.drag-list {
  height: calc(100% - 26px);
  overflow: auto;
}

.item-dimension {
  display: flex !important;
  align-items: center;
  padding: 2px 10px;
  margin: 2px 2px 0 2px;
  border: solid 1px #eee;
  text-align: left;
  color: #606266;
  font-size: 14px;
  background-color: white;
  display: block;
  word-break: break-all;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.item-dimension + .item-dimension {
  margin-top: 2px;
}

.item-dimension:hover {
  color: #1890ff;
  background: #e8f4ff;
  border-color: #a3d3ff;
  cursor: pointer;
}

.item-quota {
  padding: 2px 10px;
  margin: 2px 2px 0 2px;
  border: solid 1px #eee;
  text-align: left;
  color: #606266;
  background-color: white;
  display: block;
  word-break: break-all;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.item-quota + .item-quota {
  margin-top: 2px;
}

.item-quota:hover {
  color: #67c23a;
  background: #f0f9eb;
  border-color: #b2d3a3;
  cursor: pointer;
}

.blackTheme .item-quota:hover {
}

span {
  font-size: 12px;
}

.set-name-area {
  font-weight: 600;
  margin-right: 20px;
}

:deep(.ed-row) {
  width: 100%;
}

.dv-selector {
  width: 100%;
}

.top-area {
  float: left;
  line-height: 33px;
  display: flex;
  flex-direction: row;
  align-items: center;
}

.top-area-text {
  font-weight: 400;
  font-size: 14px;
  color: #d2d2d2;
  margin-left: 24px;
}

.top-area-value {
  font-weight: 400;
  font-size: 14px;
  color: #1f2329;
  display: flex;
  flex-direction: row;
  align-items: center;
}
.view-type-icon {
  color: var(--ed-color-primary);
  width: 22px;
  height: 16px;
}
.content-head {
  height: 22px;
  margin-top: 10px;
  margin-left: 16px;
  font-weight: 500;
  font-size: 14px;
  color: #d2d2d2;
  line-height: 32px;
  margin-right: 16px;
}
.link-icon-join {
  font-size: 20px;
  margin-top: 7px;
  margin-left: 8px;
  margin-right: 8px;
}
.inner-content {
  width: 100%;
  padding: 16px 16px 8px 16px;
  font-size: 14px !important;
}

.outer-content {
  height: 340px;
  border-radius: 4px;
}

.padding-lr {
  height: 500px;
  border: 1px solid var(--deCardStrokeColor, #dee0e3);
  border-radius: 4px;
  padding: 12px;
  box-sizing: border-box;
  margin-left: 12px;
  width: 214px;
  overflow-y: hidden;
}

.mb8 {
  margin-bottom: 8px;
  display: inline-flex;
  align-items: center;

  i {
    margin-left: 4.67px;
  }
}

.field-height {
  height: calc(50% - 41px);
  margin-top: 4px;
  overflow-y: auto;
}

.class-na {
  margin-top: 8px;
  text-align: center;
  font-size: 14px;
  color: var(--deTextDisable);
}
.outer-content-mirror {
  border: 1px solid #bbbfc4;
  border-radius: 4px;
  height: 100%;
  overflow: hidden;
}
.url-text {
  width: 100%;
  line-height: 14px;
  margin-bottom: 8px;
}

.tree-select-field {
  font-size: 14px;
  display: flex;
  align-items: center;
}

.custom-tree {
  overflow-y: auto;
}
.m-del-icon-btn {
  color: #646a73;
  margin-top: 4px;
  margin-left: 4px;

  &:hover {
    background: rgba(31, 35, 41, 0.1) !important;
  }
  &:focus {
    background: rgba(31, 35, 41, 0.1) !important;
  }
  &:active {
    background: rgba(31, 35, 41, 0.2) !important;
  }
}

.custom-option {
  font-size: 14px;
  display: flex;
  align-items: center;
}

.tree-dataset-head {
  height: 40px;
  font-size: 14px;
  align-items: center;
  padding: 0 14px;
  justify-content: space-between;
  span {
    font-size: 14px;
    font-weight: 400;
    text-align: left;
    color: #fff;
  }
}

.tree-dataset-head-top {
  border-top: 1px solid rgba(31, 35, 41, 0.15);
}

.toggle-icon {
  cursor: pointer;
  margin-right: 8px;
  color: #FFF;
}
:deep(.ed-checkbox__inner){
  border:1px solid #5f5f5f;
  background-color:transparent;
}
:deep(.ed-tree){
  background: transparent;
  color: #fff;
}
:deep(.ed-tree--highlight-current .ed-tree-node.is-current>.ed-tree-node__content){
  background-color:rgb(61,61,61);
}
:deep(.ed-input__wrapper){
  background-color: #252424 ;
  box-shadow: none;
  border: 1px solid #636363;
}
.root-class .ed-button{
    color: #F2F4F5;
    background-color: #212121;
    border: 1px solid #434343;
  }
.root-class .ed-button--primary{
  background-color:#0089FF;
  border: 1px solid #0089FF;
}

</style>
