<script lang="ts" setup>
import icon_edit_outlined from '@/assets/svg/icon_edit_outlined.svg'
import { PropType, reactive, watch } from 'vue'
import { useI18n } from '@/hooks/web/useI18n'
import { ElIcon, ElMessage } from 'element-plus-secondary'
import { DEFAULT_THRESHOLD } from '@/views/chart/components/editor/util/chart'
import TableThresholdEdit from '@/views/chart/components/editor/editor-senior/components/dialog/TableThresholdEdit.vue'
import TextLabelThresholdEdit from '@/views/chart/components/editor/editor-senior/components/dialog/TextLabelThresholdEdit.vue'
import TextThresholdEdit from '@/views/chart/components/editor/editor-senior/components/dialog/TextThresholdEdit.vue'
import LineThresholdEdit from '@/views/chart/components/editor/editor-senior/components/dialog/LineThresholdEdit.vue'
import { fieldType } from '@/utils/attr'
import { defaultsDeep } from 'lodash-es'
import { iconFieldMap } from '@/components/icon-group/field-list'
import PictureGroupThresholdEdit from '@/views/chart/components/editor/editor-senior/components/dialog/PictureGroupThresholdEdit.vue'
import { dvMainStoreWithOut } from '@/store/modules/data-visualization/dvMain'
import { storeToRefs } from 'pinia'
import { imgUrlTrans } from '@/utils/imgUtils'
const dvMainStore = dvMainStoreWithOut()
const { curComponent } = storeToRefs(dvMainStore)
const { t } = useI18n()

const props = defineProps({
  chart: {
    type: Object as PropType<ChartObj>,
    required: true
  },
  themes: {
    type: String as PropType<EditorTheme>,
    default: 'dark'
  },
  propertyInner: {
    type: Array<string>
  }
})
const showProperty = prop => props.propertyInner?.includes(prop)

const emit = defineEmits(['onThresholdChange'])

watch(
  () => props.chart.senior.threshold,
  () => {
    init()
  },
  { deep: true }
)

const state = reactive({
  thresholdForm: {} as ChartThreshold,
  editTextLabelThresholdDialog: false,
  textThresholdArr: [],
  editLabelThresholdDialog: false,
  thresholdArr: [],
  editTableThresholdDialog: false,
  tableThresholdArr: [],
  editLineThresholdDialog: false,
  lineThresholdArr: []
})

const init = () => {
  const chart = JSON.parse(JSON.stringify(props.chart))
  if (chart.senior) {
    const senior = chart.senior
    if (senior.threshold) {
      state.thresholdForm = defaultsDeep(senior.threshold, DEFAULT_THRESHOLD)
    }
    state.textThresholdArr = JSON.parse(JSON.stringify(state.thresholdForm.textLabelThreshold))
    state.thresholdArr = JSON.parse(JSON.stringify(state.thresholdForm.labelThreshold))
    state.tableThresholdArr = JSON.parse(JSON.stringify(state.thresholdForm.tableThreshold))
    state.lineThresholdArr = JSON.parse(JSON.stringify(state.thresholdForm.lineThreshold ?? []))
  }
}
const changeThreshold = () => {
  emit('onThresholdChange', state.thresholdForm)
}
const changeSplitThreshold = (threshold: string) => {
  // check input
  if (threshold) {
    const regex = /^(\d+)(,\d+)*$/
    if (!regex.test(threshold)) {
      ElMessage.error(t('chart.gauge_threshold_format_error'))
      return
    }
    const arr = threshold.split(',')
    for (let i = 0; i < arr.length; i++) {
      const ele = arr[i]
      if (parseFloat(ele) <= 0 || parseFloat(ele) >= 100) {
        ElMessage.error(t('chart.gauge_threshold_format_error'))
        return
      }
      if (i > 0) {
        if (parseFloat(ele) <= parseFloat(arr[i - 1])) {
          ElMessage.error(t('chart.gauge_threshold_compare_error'))
          return
        }
      }
    }
  }
  changeThreshold()
}
const editLabelThreshold = () => {
  state.editLabelThresholdDialog = true
}
const closeLabelThreshold = () => {
  state.editLabelThresholdDialog = false
}
const changeLabelThreshold = () => {
  // check line config
  for (let i = 0; i < state.thresholdArr.length; i++) {
    const ele = state.thresholdArr[i]
    if (ele.term === undefined || ele.term === '') {
      ElMessage.error(t('chart.exp_can_not_empty'))
      return
    }
    if (ele.term === 'between') {
      if (ele.min === undefined || ele.max === undefined) {
        ElMessage.error(t('chart.value_can_not_empty'))
        return
      }
      if (parseFloat(ele.min).toString() === 'NaN' || parseFloat(ele.max).toString() === 'NaN') {
        ElMessage.error(t('chart.value_error'))
        return
      }
      if (parseFloat(ele.min) > parseFloat(ele.max)) {
        ElMessage.error(t('chart.value_min_max_invalid'))
        return
      }
    } else {
      if (ele.value === undefined) {
        ElMessage.error(t('chart.value_can_not_empty'))
        return
      }
      if (parseFloat(ele.value).toString() === 'NaN') {
        ElMessage.error(t('chart.value_error'))
        return
      }
    }
  }
  state.thresholdForm.labelThreshold = JSON.parse(JSON.stringify(state.thresholdArr))
  changeThreshold()
  closeLabelThreshold()
}
const thresholdChange = val => {
  state.thresholdArr = val
}

const editTextLabelThreshold = () => {
  state.editTextLabelThresholdDialog = true
}
const closeTextLabelThreshold = () => {
  state.editTextLabelThresholdDialog = false
}
const changeTextLabelThreshold = () => {
  // check line config
  for (let i = 0; i < state.textThresholdArr.length; i++) {
    const ele = state.textThresholdArr[i]
    if (!ele.term || ele.term === '') {
      ElMessage.error(t('chart.exp_can_not_empty'))
      return
    }
    if (!ele.value) {
      ElMessage.error(t('chart.value_can_not_empty'))
      return
    }
  }
  state.thresholdForm.textLabelThreshold = JSON.parse(JSON.stringify(state.textThresholdArr))
  changeThreshold()
  closeTextLabelThreshold()
}
const thresholdTextChange = val => {
  state.textThresholdArr = val
}

const tableThresholdChange = val => {
  state.tableThresholdArr = val
}
const editTableThreshold = () => {
  state.editTableThresholdDialog = true
}
const closeTableThreshold = () => {
  state.editTableThresholdDialog = false
}
const changeTableThreshold = () => {
  // check line config
  for (let i = 0; i < state.tableThresholdArr.length; i++) {
    const field = state.tableThresholdArr[i]
    if (!field.fieldId) {
      ElMessage.error(t('chart.field_can_not_empty'))
      return
    }
    if (!field.conditions || field.conditions.length === 0) {
      ElMessage.error(t('chart.conditions_can_not_empty'))
      return
    }
    for (let j = 0; j < field.conditions.length; j++) {
      const ele = field.conditions[j]
      if (!ele.term || ele.term === '') {
        ElMessage.error(t('chart.exp_can_not_empty'))
        return
      }
      if (ele.type !== 'dynamic') {
        if (ele.term === 'between') {
          if (
            !ele.term.includes('null') &&
            !ele.term.includes('empty') &&
            (ele.min === '' || ele.max === '')
          ) {
            ElMessage.error(t('chart.value_can_not_empty'))
            return
          }
          if (
            (field.field.deType === 2 || field.field.deType === 3 || field.field.deType === 4) &&
            (parseFloat(ele.min).toString() === 'NaN' || parseFloat(ele.max).toString() === 'NaN')
          ) {
            ElMessage.error(t('chart.value_error'))
            return
          }
          if (
            (field.field.deType === 2 || field.field.deType === 3 || field.field.deType === 4) &&
            parseFloat(ele.min) > parseFloat(ele.max)
          ) {
            ElMessage.error(t('chart.value_min_max_invalid'))
            return
          }
        } else {
          if (!ele.term.includes('null') && !ele.term.includes('empty') && ele.value === '') {
            ElMessage.error(t('chart.value_can_not_empty'))
            return
          }
          if (
            (field.field.deType === 2 || field.field.deType === 3 || field.field.deType === 4) &&
            parseFloat(ele.value).toString() === 'NaN'
          ) {
            ElMessage.error(t('chart.value_error'))
            return
          }
        }
      } else {
        if (ele.term === 'between') {
          if (
            !ele.term.includes('null') &&
            !ele.term.includes('empty') &&
            (!ele.dynamicMinField?.fieldId || !ele.dynamicMaxField?.fieldId)
          ) {
            ElMessage.error(t('chart.field_can_not_empty'))
            return
          }
        } else {
          if (
            !ele.term.includes('null') &&
            !ele.term.includes('empty') &&
            !ele.dynamicField?.fieldId
          ) {
            ElMessage.error(t('chart.field_can_not_empty'))
            return
          }
        }
      }
    }
  }
  state.thresholdForm.tableThreshold = JSON.parse(JSON.stringify(state.tableThresholdArr))
  changeThreshold()
  closeTableThreshold()
}

const lineThresholdChange = val => {
  state.lineThresholdArr = val
}
const editLineThreshold = () => {
  state.editLineThresholdDialog = true
}
const closeLineThreshold = () => {
  state.editLineThresholdDialog = false
}
const changeLineThreshold = () => {
  // check line config
  for (let i = 0; i < state.lineThresholdArr?.length; i++) {
    const field = state.lineThresholdArr[i]
    if (!field.fieldId) {
      ElMessage.error(t('chart.field_can_not_empty'))
      return
    }
    if (!field.conditions || field.conditions.length === 0) {
      ElMessage.error(t('chart.conditions_can_not_empty'))
      return
    }
    for (let j = 0; j < field.conditions.length; j++) {
      const ele = field.conditions[j]
      if (!ele.term || ele.term === '') {
        ElMessage.error(t('chart.exp_can_not_empty'))
        return
      }
      if (ele.term === 'between') {
        if (
          !ele.term.includes('null') &&
          !ele.term.includes('empty') &&
          (ele.min === '' || ele.max === '')
        ) {
          ElMessage.error(t('chart.value_can_not_empty'))
          return
        }
        if (
          (field.field.deType === 2 || field.field.deType === 3 || field.field.deType === 4) &&
          (parseFloat(ele.min).toString() === 'NaN' || parseFloat(ele.max).toString() === 'NaN')
        ) {
          ElMessage.error(t('chart.value_error'))
          return
        }
        if (
          (field.field.deType === 2 || field.field.deType === 3 || field.field.deType === 4) &&
          parseFloat(ele.min) > parseFloat(ele.max)
        ) {
          ElMessage.error(t('chart.value_min_max_invalid'))
          return
        }
      } else {
        if (!ele.term.includes('null') && !ele.term.includes('empty') && ele.value === '') {
          ElMessage.error(t('chart.value_can_not_empty'))
          return
        }
        if (
          (field.field.deType === 2 || field.field.deType === 3 || field.field.deType === 4) &&
          parseFloat(ele.value).toString() === 'NaN'
        ) {
          ElMessage.error(t('chart.value_error'))
          return
        }
      }
    }
  }
  state.thresholdForm.lineThreshold = JSON.parse(JSON.stringify(state.lineThresholdArr ?? []))
  changeThreshold()
  closeLineThreshold()
}

const getFieldName = field => (field.chartShowName ? field.chartShowName : field.name)

const getDynamicStyleLabel = (item, fieldObj) => {
  const handleSummary = field => {
    if (!field?.field) {
      return ''
    }
    if (field.summary === 'value') {
      return getFieldName(field.field) + '(' + t('chart.field') + ')'
    } else {
      let suffix = field.summary === 'avg' ? t('chart.drag_block_label_value') : ''
      return getFieldName(field.field) + '(' + t('chart.' + field.summary) + suffix + ')'
    }
  }
  if (item.type === 'dynamic') {
    return handleSummary(fieldObj)
  }
}
init()
</script>

<template>
  <div @keydown.stop @keyup.stop style="width: 100%; margin-bottom: 16px">
    <!--仪表盘-->
    <el-col v-show="showProperty('gaugeThreshold')">
      <el-form
        :model="state.thresholdForm"
        ref="thresholdForm"
        label-position="top"
        @submit.prevent
      >
        <el-form-item
          :label="t('chart.threshold_range') + '(%)'"
          class="form-item"
          label-width="auto"
        >
          <span>0,</span>
          <el-input
            :effect="themes"
            :placeholder="t('chart.threshold_range')"
            :disabled="!state.thresholdForm.enable"
            v-model="state.thresholdForm.gaugeThreshold"
            style="width: 100px; margin: 0 10px"
            size="small"
            clearable
            @change="changeSplitThreshold"
          />
          <span>,100</span>
          <el-tooltip effect="dark" placement="bottom">
            <el-icon style="margin-left: 10px"><InfoFilled /></el-icon>
            <template #content>
              <span v-html="t('chart.gauge_condition_style_tips')"></span>
            </template>
          </el-tooltip>
        </el-form-item>
      </el-form>
    </el-col>
    <el-col v-show="showProperty('liquidThreshold')">
      <el-form
        :model="state.thresholdForm"
        ref="thresholdForm"
        label-position="top"
        @submit.prevent
      >
        <el-form-item
          :label="t('chart.threshold_range') + '(%)'"
          class="form-item"
          label-width="auto"
        >
          <span>0,</span>
          <el-input
            :effect="themes"
            :placeholder="t('chart.threshold_range')"
            :disabled="!state.thresholdForm.enable"
            v-model="state.thresholdForm.liquidThreshold"
            style="width: 100px; margin: 0 10px"
            size="small"
            clearable
            @change="changeSplitThreshold"
          />
          <span>,100</span>
          <el-tooltip effect="dark" placement="bottom">
            <el-icon style="margin-left: 10px"><InfoFilled /></el-icon>
            <template #content>
              <span v-html="t('chart.liquid_condition_style_tips')"></span>
            </template>
          </el-tooltip>
        </el-form-item>
      </el-form>
    </el-col>

    <!--文本卡-->
    <el-col v-if="props.chart.type && props.chart.type === 'label'">
      <el-col>
        <el-button
          :title="t('chart.edit')"
          class="circle-button"
          type="primary"
          text
          size="small"
          style="width: 24px; margin-left: 4px"
          @click="editTextLabelThreshold"
        >
          <template #icon>
            <el-icon size="14px">
              <Icon name="icon_edit_outlined"><icon_edit_outlined class="svg-icon" /></Icon>
            </el-icon>
          </template>
        </el-button>
        <el-col style="padding: 0 18px">
          <el-row
            v-for="(item, index) in state.thresholdForm.textLabelThreshold"
            :key="index"
            class="line-style"
          >
            <el-col :span="6">
              <span v-if="item.term === 'eq'" :title="t('chart.filter_eq')">{{
                t('chart.filter_eq')
              }}</span>
              <span v-else-if="item.term === 'not_eq'" :title="t('chart.filter_not_eq')">{{
                t('chart.filter_not_eq')
              }}</span>
              <span v-else-if="item.term === 'like'" :title="t('chart.filter_like')">{{
                t('chart.filter_like')
              }}</span>
              <span v-else-if="item.term === 'not like'" :title="t('chart.filter_not_like')">{{
                t('chart.filter_not_like')
              }}</span>
              <span v-else-if="item.term === 'null'" :title="t('chart.filter_null')">{{
                t('chart.filter_null')
              }}</span>
              <span v-else-if="item.term === 'not_null'" :title="t('chart.filter_not_null')">{{
                t('chart.filter_not_null')
              }}</span>
            </el-col>
            <el-col :span="12">
              <span v-if="!item.term.includes('null')" :title="item.value + ''">{{
                item.value
              }}</span>
              <span v-else>&nbsp;</span>
            </el-col>
            <el-col :span="6">
              <span
                :style="{
                  width: '14px',
                  height: '14px',
                  backgroundColor: item.color,
                  border: 'solid 1px #e1e4e8'
                }"
              />
            </el-col>
          </el-row>
        </el-col>
      </el-col>
    </el-col>

    <!--指标卡-->
    <el-col v-if="props.chart.type && props.chart.type === 'indicator'">
      <el-col>
        <div class="inner-container">
          <span class="label" :class="'label-' + props.themes">{{
            $t('visualization.condition_style_set')
          }}</span>
          <span class="right-btns">
            <span
              class="set-text-info"
              :class="{ 'set-text-info-dark': themes === 'dark' }"
              v-if="state.thresholdForm?.labelThreshold?.length > 0"
            >
              {{ t('visualization.already_setting') }}
            </span>
            <el-button
              :title="t('chart.edit')"
              :class="'label-' + props.themes"
              :style="{ width: '24px', marginLeft: '6px' }"
              :disabled="!state.thresholdForm.enable"
              class="circle-button"
              text
              size="small"
              @click="editLabelThreshold"
            >
              <template #icon>
                <el-icon size="14px">
                  <Icon name="icon_edit_outlined"><icon_edit_outlined class="svg-icon" /></Icon>
                </el-icon>
              </template>
            </el-button>
          </span>
        </div>

        <div
          class="threshold-container"
          :class="{ 'threshold-container-dark': themes === 'dark' }"
          v-if="state.thresholdForm.labelThreshold.length > 0"
        >
          <div class="field-style" :class="{ 'field-style-dark': themes === 'dark' }">
            <span class="field-text" style="padding-left: 12px">
              {{ t('chart.indicator_value') }}
            </span>
          </div>

          <div
            v-for="(item, index) in state.thresholdForm.labelThreshold"
            :key="index"
            class="line-style"
          >
            <div style="flex: 1">
              <span v-if="item.term === 'eq'" :title="t('chart.filter_eq')">{{
                t('chart.filter_eq')
              }}</span>
              <span v-else-if="item.term === 'not_eq'" :title="t('chart.filter_not_eq')">{{
                t('chart.filter_not_eq')
              }}</span>
              <span v-else-if="item.term === 'lt'" :title="t('chart.filter_lt')">{{
                t('chart.filter_lt')
              }}</span>
              <span v-else-if="item.term === 'gt'" :title="t('chart.filter_gt')">{{
                t('chart.filter_gt')
              }}</span>
              <span v-else-if="item.term === 'le'" :title="t('chart.filter_le')">{{
                t('chart.filter_le')
              }}</span>
              <span v-else-if="item.term === 'ge'" :title="t('chart.filter_ge')">{{
                t('chart.filter_ge')
              }}</span>
              <span v-else-if="item.term === 'between'" :title="t('chart.filter_between')">{{
                t('chart.filter_between')
              }}</span>
            </div>
            <div style="flex: 1; margin: 0 8px">
              <span v-if="item.term !== 'between'" :title="item.value + ''">{{ item.value }}</span>
              <span v-if="item.term === 'between'">
                {{ item.min }}&nbsp;≤{{ t('chart.drag_block_label_value') }}≤&nbsp;{{ item.max }}
              </span>
            </div>
            <div
              :title="t('chart.textColor')"
              :style="{
                backgroundColor: item.color
              }"
              class="color-div"
              :class="{ 'color-div-dark': themes === 'dark' }"
            ></div>
            <div
              :title="t('chart.backgroundColor')"
              :style="{
                backgroundColor: item.backgroundColor
              }"
              class="color-div"
              :class="{ 'color-div-dark': themes === 'dark' }"
            ></div>
          </div>
        </div>
      </el-col>
    </el-col>

    <!--表格-->
    <el-col v-show="showProperty('tableThreshold')">
      <el-col>
        <div class="inner-container">
          <span class="label" :class="'label-' + props.themes">{{
            $t('visualization.condition_style_set')
          }}</span>
          <span class="right-btns">
            <span
              class="set-text-info"
              :class="{ 'set-text-info-dark': themes === 'dark' }"
              v-if="state.thresholdForm?.tableThreshold?.length > 0"
            >
              {{ t('visualization.already_setting') }}
            </span>
            <el-button
              :title="t('chart.edit')"
              :class="'label-' + props.themes"
              :style="{ width: '24px', marginLeft: '6px' }"
              :disabled="!state.thresholdForm.enable"
              class="circle-button"
              text
              size="small"
              @click="editTableThreshold"
            >
              <template #icon>
                <el-icon size="14px">
                  <Icon name="icon_edit_outlined"><icon_edit_outlined class="svg-icon" /></Icon>
                </el-icon>
              </template>
            </el-button>
          </span>
        </div>

        <div
          class="threshold-container"
          :class="{ 'threshold-container-dark': themes === 'dark' }"
          v-if="state.thresholdForm.tableThreshold.length > 0"
        >
          <el-row
            v-for="(fieldItem, fieldIndex) in state.thresholdForm.tableThreshold"
            :key="fieldIndex"
            style="flex-direction: column"
          >
            <div class="field-style" :class="{ 'field-style-dark': themes === 'dark' }">
              <el-icon>
                <Icon :className="`field-icon-${fieldType[fieldItem.field.deType]}`"
                  ><component
                    class="svg-icon"
                    :class="`field-icon-${fieldType[fieldItem.field.deType]}`"
                    :is="iconFieldMap[fieldType[fieldItem.field.deType]]"
                  ></component
                ></Icon>
              </el-icon>
              <span :title="fieldItem.field.name" class="field-text">{{
                fieldItem.field.name
              }}</span>
            </div>
            <div v-for="(item, index) in fieldItem.conditions" :key="index" class="line-style">
              <div style="flex: 1">
                <span v-if="item.term === 'eq'" :title="t('chart.filter_eq')">
                  {{ t('chart.filter_eq') }}
                </span>
                <span v-else-if="item.term === 'not_eq'" :title="t('chart.filter_not_eq')">
                  {{ t('chart.filter_not_eq') }}
                </span>
                <span v-else-if="item.term === 'lt'" :title="t('chart.filter_lt')">
                  {{ t('chart.filter_lt') }}
                </span>
                <span v-else-if="item.term === 'gt'" :title="t('chart.filter_gt')">
                  {{ t('chart.filter_gt') }}
                </span>
                <span v-else-if="item.term === 'le'" :title="t('chart.filter_le')">
                  {{ t('chart.filter_le') }}
                </span>
                <span v-else-if="item.term === 'ge'" :title="t('chart.filter_ge')">
                  {{ t('chart.filter_ge') }}
                </span>
                <span v-else-if="item.term === 'between'" :title="t('chart.filter_between')">
                  {{ t('chart.filter_between') }}
                </span>
                <span v-else-if="item.term === 'like'" :title="t('chart.filter_like')">
                  {{ t('chart.filter_like') }}
                </span>
                <span v-else-if="item.term === 'not like'" :title="t('chart.filter_not_like')">
                  {{ t('chart.filter_not_like') }}
                </span>
                <span v-else-if="item.term === 'null'" :title="t('chart.filter_null')">
                  {{ t('chart.filter_null') }}
                </span>
                <span v-else-if="item.term === 'not_null'" :title="t('chart.filter_not_null')">
                  {{ t('chart.filter_not_null') }}
                </span>
                <span v-else-if="item.term === 'empty'" :title="t('chart.filter_empty')">
                  {{ t('chart.filter_empty') }}
                </span>
                <span v-else-if="item.term === 'not_empty'" :title="t('chart.filter_not_empty')">
                  {{ t('chart.filter_not_empty') }}
                </span>
                <span v-else-if="item.term === 'default'" title="默认"> 默认 </span>
              </div>
              <div v-if="item.type !== 'dynamic'" style="flex: 1; margin: 0 8px">
                <span style="margin: 0 8px">
                  {{ t('chart.fix') }}
                </span>
              </div>
              <div v-else style="flex: 1; margin: 0 8px">
                <span style="margin: 0 8px">
                  {{ t('chart.dynamic') }}
                </span>
              </div>
              <div v-if="item.type !== 'dynamic'" style="flex: 1; margin: 0 8px">
                <span
                  v-if="
                    !item.term.includes('null') &&
                    !item.term.includes('default') &&
                    !item.term.includes('empty') &&
                    item.term !== 'between'
                  "
                  :title="item.value + ''"
                  >{{ item.value }}</span
                >
                <span
                  v-else-if="
                    !item.term.includes('null') &&
                    !item.term.includes('empty') &&
                    item.term === 'between'
                  "
                  :title="item.min + ' ≤= ' + t('chart.drag_block_label_value') + ' ≤ ' + item.max"
                >
                  {{ item.min }}&nbsp;≤{{ t('chart.drag_block_label_value') }}≤&nbsp;{{ item.max }}
                </span>
                <span v-else>&nbsp;</span>
              </div>
              <div v-else style="flex: 1; margin: 0 8px">
                <span
                  v-if="
                    !item.term.includes('null') &&
                    !item.term.includes('default') &&
                    !item.term.includes('empty') &&
                    item.term !== 'between'
                  "
                  :title="getDynamicStyleLabel(item, item.dynamicField) + ''"
                >
                  {{ getDynamicStyleLabel(item, item.dynamicField) }}</span
                >
                <span
                  v-else-if="
                    !item.term.includes('null') &&
                    !item.term.includes('empty') &&
                    item.term === 'between'
                  "
                  :title="
                    getDynamicStyleLabel(item, item.dynamicMinField) +
                    '≤' +
                    t('chart.drag_block_label_value') +
                    '≤' +
                    getDynamicStyleLabel(item, item.dynamicMaxField)
                  "
                >
                  {{ getDynamicStyleLabel(item, item.dynamicMinField) }}≤{{
                    t('chart.drag_block_label_value')
                  }}≤{{ getDynamicStyleLabel(item, item.dynamicMaxField) }}
                </span>
                <span v-else>&nbsp;</span>
              </div>
              <template v-if="chart.type === 'picture-group'">
                <div title="显示图片" class="pic-group-main">
                  <img
                    draggable="false"
                    v-if="item.url"
                    class="pic-group-img"
                    :src="imgUrlTrans(item.url)"
                  />
                </div>
              </template>

              <template v-if="chart.type !== 'picture-group'">
                <div
                  :title="t('chart.textColor')"
                  :style="{
                    backgroundColor: item.color
                  }"
                  class="color-div"
                  :class="{ 'color-div-dark': themes === 'dark' }"
                ></div>
                <div
                  :title="t('chart.backgroundColor')"
                  :style="{
                    backgroundColor: item.backgroundColor
                  }"
                  class="color-div"
                  :class="{ 'color-div-dark': themes === 'dark' }"
                ></div>
              </template>
            </div>
          </el-row>
        </div>
      </el-col>
    </el-col>
    <!--折线-->
    <el-col v-show="showProperty('lineThreshold')">
      <el-col>
        <div class="inner-container">
          <span class="label" :class="'label-' + props.themes">{{
            $t('visualization.condition_style_set')
          }}</span>
          <span class="right-btns">
            <span
              class="set-text-info"
              :class="{ 'set-text-info-dark': themes === 'dark' }"
              v-if="state.thresholdForm?.lineThresholdArr?.length > 0"
            >
              $t('visualization.already_setting')
            </span>
            <el-button
              :title="t('chart.edit')"
              :class="'label-' + props.themes"
              :style="{ width: '24px', marginLeft: '6px' }"
              :disabled="!state.thresholdForm.enable"
              class="circle-button"
              text
              size="small"
              @click="editLineThreshold"
            >
              <template #icon>
                <el-icon size="14px">
                  <Icon name="icon_edit_outlined"><icon_edit_outlined class="svg-icon" /></Icon>
                </el-icon>
              </template>
            </el-button>
          </span>
        </div>

        <div
          class="threshold-container"
          :class="{ 'threshold-container-dark': themes === 'dark' }"
          v-if="state.thresholdForm.lineThreshold?.length > 0"
        >
          <el-row
            v-for="(fieldItem, fieldIndex) in state.thresholdForm.lineThreshold"
            :key="fieldIndex"
            style="flex-direction: column"
          >
            <div class="field-style" :class="{ 'field-style-dark': themes === 'dark' }">
              <el-icon>
                <Icon :className="`field-icon-${fieldType[fieldItem.field.deType]}`"
                  ><component
                    class="svg-icon"
                    :class="`field-icon-${fieldType[fieldItem.field.deType]}`"
                    :is="iconFieldMap[fieldType[fieldItem.field.deType]]"
                  ></component
                ></Icon>
              </el-icon>
              <span :title="fieldItem.field.name" class="field-text">{{
                fieldItem.field.name
              }}</span>
            </div>
            <div v-for="(item, index) in fieldItem.conditions" :key="index" class="line-style">
              <div style="flex: 1">
                <span v-if="item.term === 'eq'" :title="t('chart.filter_eq')">
                  {{ t('chart.filter_eq') }}</span
                >
                <span v-else-if="item.term === 'not_eq'" :title="t('chart.filter_not_eq')">
                  {{ t('chart.filter_not_eq') }}</span
                >
                <span v-if="item.term === 'lt'" :title="t('chart.filter_lt')">
                  {{ t('chart.filter_lt') }}
                </span>
                <span v-else-if="item.term === 'gt'" :title="t('chart.filter_gt')">
                  {{ t('chart.filter_gt') }}
                </span>
                <span v-else-if="item.term === 'le'" :title="t('chart.filter_le')">
                  {{ t('chart.filter_le') }}
                </span>
                <span v-else-if="item.term === 'ge'" :title="t('chart.filter_ge')">
                  {{ t('chart.filter_ge') }}
                </span>
                <span v-else-if="item.term === 'between'" :title="t('chart.filter_between')">
                  {{ t('chart.filter_between') }}
                </span>
                <span v-else-if="item.term === 'default'" title="默认"> 默认 </span>
              </div>
              <div v-if="item.type !== 'dynamic'" style="flex: 1; margin: 0 8px">
                <span style="margin: 0 8px">
                  {{ t('chart.fix') }}
                </span>
              </div>
              <div v-else style="flex: 1; margin: 0 8px">
                <span style="margin: 0 8px">
                  {{ t('chart.dynamic') }}
                </span>
              </div>
              <div v-if="item.type !== 'dynamic'" style="flex: 1; margin: 0 8px">
                <span
                  v-if="
                    !item.term.includes('null') &&
                    !item.term.includes('default') &&
                    !item.term.includes('empty') &&
                    item.term !== 'between'
                  "
                  :title="item.value + ''"
                  >{{ item.value }}</span
                >
                <span
                  v-else-if="
                    !item.term.includes('null') &&
                    !item.term.includes('empty') &&
                    item.term === 'between'
                  "
                  :title="item.min + ' ≤= ' + t('chart.drag_block_label_value') + ' ≤ ' + item.max"
                >
                  {{ item.min }}&nbsp;≤{{ t('chart.drag_block_label_value') }}≤&nbsp;{{ item.max }}
                </span>
                <span v-else>&nbsp;</span>
              </div>
              <template v-if="chart.type !== 'picture-group'">
                <div
                  :title="t('chart.color')"
                  :style="{
                    backgroundColor: item.color
                  }"
                  class="color-div"
                  :class="{ 'color-div-dark': themes === 'dark' }"
                ></div>
              </template>
            </div>
          </el-row>
        </div>
      </el-col>
    </el-col>

    <!--  symbolic map  -->
    <el-col v-show="showProperty('symbolicBubbleThreshold')">
      <el-col>
        <div class="inner-container">
          <span class="label" :class="'label-' + props.themes">{{
            $t('visualization.condition_style_set')
          }}</span>
          <span class="right-btns">
            <span
              class="set-text-info"
              :class="{ 'set-text-info-dark': themes === 'dark' }"
              v-if="state.thresholdForm?.tableThreshold?.length > 0"
            >
              $t('visualization.already_setting')
            </span>
            <el-button
              :title="t('chart.edit')"
              :class="'label-' + props.themes"
              :style="{ width: '24px', marginLeft: '6px' }"
              :disabled="!state.thresholdForm.enable"
              class="circle-button"
              text
              size="small"
              @click="editLineThreshold"
            >
              <template #icon>
                <el-icon size="14px">
                  <Icon name="icon_edit_outlined"><icon_edit_outlined class="svg-icon" /></Icon>
                </el-icon>
              </template>
            </el-button>
          </span>
        </div>

        <div
          class="threshold-container"
          :class="{ 'threshold-container-dark': themes === 'dark' }"
          v-if="state.thresholdForm.lineThreshold?.length > 0"
        >
          <el-row
            v-for="(fieldItem, fieldIndex) in state.thresholdForm.lineThreshold"
            :key="fieldIndex"
            style="flex-direction: column"
          >
            <div class="field-style" :class="{ 'field-style-dark': themes === 'dark' }">
              <el-icon>
                <Icon :className="`field-icon-${fieldType[fieldItem.field.deType]}`"
                  ><component
                    class="svg-icon"
                    :class="`field-icon-${fieldType[fieldItem.field.deType]}`"
                    :is="iconFieldMap[fieldType[fieldItem.field.deType]]"
                  ></component
                ></Icon>
              </el-icon>
              <span :title="fieldItem.field.name" class="field-text">{{
                fieldItem.field.name
              }}</span>
            </div>
            <div v-for="(item, index) in fieldItem.conditions" :key="index" class="line-style">
              <div style="flex: 1">
                <span v-if="item.term === 'lt'" :title="t('chart.filter_lt')">
                  {{ t('chart.filter_lt') }}
                </span>
                <span v-else-if="item.term === 'gt'" :title="t('chart.filter_gt')">
                  {{ t('chart.filter_gt') }}
                </span>
                <span v-else-if="item.term === 'le'" :title="t('chart.filter_le')">
                  {{ t('chart.filter_le') }}
                </span>
                <span v-else-if="item.term === 'ge'" :title="t('chart.filter_ge')">
                  {{ t('chart.filter_ge') }}
                </span>
                <span v-else-if="item.term === 'between'" :title="t('chart.filter_between')">
                  {{ t('chart.filter_between') }}
                </span>
                <span v-else-if="item.term === 'default'" title="默认"> 默认 </span>
              </div>
              <div v-if="item.type !== 'dynamic'" style="flex: 1; margin: 0 8px">
                <span style="margin: 0 8px">
                  {{ t('chart.fix') }}
                </span>
              </div>
              <div v-else style="flex: 1; margin: 0 8px">
                <span style="margin: 0 8px">
                  {{ t('chart.dynamic') }}
                </span>
              </div>
              <div v-if="item.type !== 'dynamic'" style="flex: 1; margin: 0 8px">
                <span
                  v-if="
                    !item.term.includes('null') &&
                    !item.term.includes('default') &&
                    !item.term.includes('empty') &&
                    item.term !== 'between'
                  "
                  :title="item.value + ''"
                  >{{ item.value }}</span
                >
                <span
                  v-else-if="
                    !item.term.includes('null') &&
                    !item.term.includes('empty') &&
                    item.term === 'between'
                  "
                  :title="item.min + ' ≤= ' + t('chart.drag_block_label_value') + ' ≤ ' + item.max"
                >
                  {{ item.min }}&nbsp;≤{{ t('chart.drag_block_label_value') }}≤&nbsp;{{ item.max }}
                </span>
                <span v-else>&nbsp;</span>
              </div>
              <template v-if="chart.type !== 'picture-group'">
                <div
                  :title="t('chart.color')"
                  :style="{
                    backgroundColor: item.color
                  }"
                  class="color-div"
                  :class="{ 'color-div-dark': themes === 'dark' }"
                ></div>
              </template>
            </div>
          </el-row>
        </div>
      </el-col>
    </el-col>

    <!--编辑文本卡阈值-->
    <el-dialog
      v-if="state.editTextLabelThresholdDialog"
      v-model="state.editTextLabelThresholdDialog"
      :title="t('chart.threshold')"
      :visible="state.editTextLabelThresholdDialog"
      width="800px"
      class="dialog-css"
      append-to-body
    >
      <text-label-threshold-edit
        :threshold="state.thresholdForm.textLabelThreshold"
        @onTextLabelThresholdChange="thresholdTextChange"
      />
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="closeTextLabelThreshold">{{ t('chart.cancel') }}</el-button>
          <el-button type="primary" @click="changeTextLabelThreshold">{{
            t('chart.confirm')
          }}</el-button>
        </div>
      </template>
    </el-dialog>

    <!--编辑指标卡阈值-->
    <el-dialog
      v-if="state.editLabelThresholdDialog"
      v-model="state.editLabelThresholdDialog"
      :title="t('chart.threshold')"
      :visible="state.editLabelThresholdDialog"
      width="800px"
      class="dialog-css"
      append-to-body
    >
      <text-threshold-edit
        :threshold="state.thresholdForm.labelThreshold"
        @onLabelThresholdChange="thresholdChange"
      />
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="closeLabelThreshold">{{ t('chart.cancel') }}</el-button>
          <el-button type="primary" @click="changeLabelThreshold">{{
            t('chart.confirm')
          }}</el-button>
        </div>
      </template>
    </el-dialog>

    <!--编辑表格阈值-->
    <el-dialog
      v-if="state.editTableThresholdDialog"
      v-model="state.editTableThresholdDialog"
      :title="t('chart.threshold')"
      :visible="state.editTableThresholdDialog"
      width="1050px"
      class="dialog-css"
      append-to-body
    >
      <picture-group-threshold-edit
        v-if="chart.type === 'picture-group' && curComponent"
        :threshold="state.thresholdForm.tableThreshold"
        :chart="chart"
        :element="curComponent"
        @onTableThresholdChange="tableThresholdChange"
      ></picture-group-threshold-edit>
      <table-threshold-edit
        v-else
        :threshold="state.thresholdForm.tableThreshold"
        :chart="chart"
        @onTableThresholdChange="tableThresholdChange"
      />
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="closeTableThreshold">{{ t('chart.cancel') }}</el-button>
          <el-button type="primary" @click="changeTableThreshold">{{
            t('chart.confirm')
          }}</el-button>
        </div>
      </template>
    </el-dialog>
    <!--编辑折线阈值-->
    <el-dialog
      v-if="state.editLineThresholdDialog"
      v-model="state.editLineThresholdDialog"
      :title="t('chart.threshold')"
      :visible="state.editLineThresholdDialog"
      width="1050px"
      class="dialog-css"
      append-to-body
    >
      <line-threshold-edit
        :threshold="state.thresholdForm.lineThreshold"
        :chart="chart"
        @onLineThresholdChange="lineThresholdChange"
      />
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="closeLineThreshold">{{ t('chart.cancel') }}</el-button>
          <el-button type="primary" @click="changeLineThreshold">{{
            t('chart.confirm')
          }}</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<style lang="less" scoped>
.shape-item {
  padding: 6px;
  border: none;
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.form-item-slider :deep(.el-form-item__label) {
  font-size: 12px;
  line-height: 38px;
}
.form-item :deep(.el-form-item__label) {
  font-size: 12px;
}
.el-select-dropdown__item {
  padding: 0 20px;
}
span {
  font-size: 12px;
}
.el-form-item {
  margin-bottom: 6px;
}

.switch-style {
  position: absolute;
  right: 10px;
  margin-top: -4px;
}
.color-picker-style {
  cursor: pointer;
  z-index: 1003;
}

.dialog-css :deep(.el-dialog__title) {
  font-size: 14px;
}

.dialog-css :deep(.el-dialog__header) {
  padding: 20px 20px 0;
}

.dialog-css :deep(.el-dialog__body) {
  padding: 10px 20px 20px;
}

.field-text {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: #8492a6;
  font-size: 12px;
}

.label-dark {
  color: #a6a6a6;
}

.inner-container {
  display: flex;
  align-items: center;
  flex-direction: row;
  justify-content: space-between;

  .label {
    cursor: default;
    color: #646a73;
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 20px;
  }

  .right-btns {
    display: flex;
    align-items: center;
    flex-direction: row;
  }

  .set-text-info {
    cursor: default;
    padding: 1.5px 4px;
    border-radius: 2px;
    background: rgba(31, 35, 41, 0.1);

    color: #646a73;

    font-size: 10px;
    font-style: normal;
    font-weight: 500;
    line-height: 13px;

    &.set-text-info-dark {
      color: #a6a6a6;
      background: rgba(235, 235, 235, 0.1);
    }
  }
}

.line-style {
  width: 100%;
  font-weight: 400;
  padding: 4px 8px;
  display: flex;
  flex-direction: row;
  align-items: center;
  flex-wrap: nowrap;
  :nth-child(1) {
    width: 48px;
  }
  :nth-child(2) {
    width: 40px !important;
  }
  :nth-child(3) {
    width: 30px !important;
  }
  &:deep(span) {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    cursor: default;
    display: block;
  }
}

.threshold-container {
  border-radius: 4px;
  border: 1px solid #dee0e3;

  margin-top: 8px;

  max-height: 500px;
  overflow-y: auto;

  .color-div {
    margin-right: 8px;
    width: 14px;
    height: 14px;
    border: solid 1px #e1e4e8;
    border-radius: 2px;

    &:last-child {
      margin-right: unset;
    }

    &.color-div-dark {
      border-color: rgba(255, 255, 255, 0.15);
    }
  }

  &.threshold-container-dark {
    border-color: rgba(255, 255, 255, 0.15);
  }

  .field-style {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    background: #f5f6f7;
    &.field-style-dark {
      background: #1a1a1a;
      :deep(.field-text) {
        color: #a6a6a6;
      }
    }
  }
}
.label-dark {
  font-family: var(--de-custom_font, 'PingFang');
  font-style: normal;
  font-weight: 400;
  line-height: 20px;
  color: #a6a6a6 !important;
  &.ed-button {
    color: var(--ed-color-primary) !important;
  }
  &.is-disabled {
    color: #5f5f5f !important;
  }
}

.pic-group-main {
  margin-right: 8px;
  width: 24px;
  height: 24px;
  border: solid 1px #e1e4e8;
  border-radius: 2px;
}
.pic-group-img {
  width: 100% !important;
  height: 100% !important;
}
</style>
