<script lang="tsx" setup>
import icon_edit_outlined from '@/assets/svg/icon_edit_outlined.svg'
import icon_info_outlined from '@/assets/svg/icon_info_outlined.svg'
import { onMounted, reactive, watch, computed, PropType } from 'vue'
import { useI18n } from '@/hooks/web/useI18n'
import { ElIcon, ElMessage } from 'element-plus-secondary'
import AssistLineEdit from '@/views/chart/components/editor/editor-senior/components/dialog/AssistLineEdit.vue'
import { defaultsDeep, find } from 'lodash-es'
import { DEFAULT_ASSIST_LINE_CFG } from '../../util/chart'

const { t } = useI18n()

const emit = defineEmits(['onAssistLineChange'])

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

const quotaFields = computed<Array<any>>(() => {
  return props.quotaData.filter(ele => ele.summary !== '' && ele.id !== '-1')
})

const quotaExtFields = computed<Array<any>>(() => {
  return props.quotaExtData.filter(ele => ele.summary !== '' && ele.id !== '-1')
})

const useQuotaExt = computed<boolean>(() => {
  return props.chart.type.includes('chart-mix')
})

const state = reactive({
  assistLineCfg: {
    enable: false,
    assistLine: []
  },
  editLineDialog: false,
  lineArr: [],
  quotaFields: []
})

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

const changeAssistLine = () => {
  const flag = state.assistLineCfg.assistLine.findIndex(ele => ele.field === '1') !== -1
  emit('onAssistLineChange', { data: state.assistLineCfg, requestData: flag })
}

const lineChange = val => {
  state.lineArr = val
}

const editLine = () => {
  state.editLineDialog = true
}
const closeEditLine = () => {
  state.editLineDialog = false
}

const changeLine = () => {
  // check line config
  for (let i = 0; i < state.lineArr.length; i++) {
    const ele = state.lineArr[i]
    if (!ele.name || ele.name === '') {
      ElMessage.error(t('chart.name_can_not_empty'))
      return
    }
    if (ele.field === '0') {
      if (ele.value === null || ele.value === undefined || ele.value === '') {
        ElMessage.error(t('chart.value_can_not_empty'))
        return
      }
      if (parseFloat(ele.value).toString() === 'NaN') {
        ElMessage.error(t('chart.value_error'))
        return
      }
    } else {
      if (!ele.fieldId || ele.fieldId === '') {
        ElMessage.error(t('chart.field_not_empty'))
        return
      }
      if (!ele.summary || ele.summary === '') {
        ElMessage.error(t('chart.summary_not_empty'))
        return
      }
    }
  }
  state.assistLineCfg.assistLine = JSON.parse(JSON.stringify(state.lineArr))
  changeAssistLine()
  closeEditLine()
}

function existField(line) {
  if (useQuotaExt.value) {
    return (
      !!find(quotaFields.value, d => d.id === line.id) ||
      !!find(quotaExtFields.value, d => d.id === line.id)
    )
  } else {
    return !!find(quotaFields.value, d => d.id === line.id)
  }
}

const init = () => {
  const chart = JSON.parse(JSON.stringify(props.chart))
  if (chart.senior) {
    const senior = chart.senior
    if (senior.assistLineCfg?.assistLine) {
      const assistLine = senior.assistLineCfg.assistLine
      for (let i = 0; i < assistLine.length; i++) {
        if (!assistLine[i].fontSize) {
          assistLine[i].fontSize = 10
        }
      }
      state.assistLineCfg = defaultsDeep(senior.assistLineCfg, DEFAULT_ASSIST_LINE_CFG)
    }
    state.lineArr = JSON.parse(JSON.stringify(state.assistLineCfg.assistLine))
  }
}

onMounted(() => {
  init()
})
</script>

<template>
  <div @keydown.stop @keyup.stop class="assist-line-container">
    <div class="inner-container">
      <span class="label" :class="'label-' + props.themes">{{
        t('chart.assist_line_settings')
      }}</span>
      <span class="right-btns">
        <span
          class="set-text-info"
          :class="{ 'set-text-info-dark': themes === 'dark' }"
          v-if="state.assistLineCfg.assistLine.length > 0"
        >
          {{ t('visualization.already_setting') }}
        </span>
        <button
          :class="'label-' + props.themes"
          :style="{ marginLeft: '6px' }"
          :disabled="!state.assistLineCfg.enable"
          class="circle-button_icon"
          @click="editLine"
        >
          <el-icon>
            <Icon
              ><icon_edit_outlined
                :class="state.assistLineCfg.enable && 'primary-color'"
                class="svg-icon"
            /></Icon>
          </el-icon>
        </button>
      </span>
    </div>

    <el-row v-for="(item, index) in state.assistLineCfg.assistLine" :key="index" class="line-style">
      <el-col :span="8" class="line-style">
        <span :title="item.name">{{ item.name }}</span>
      </el-col>
      <el-col :span="6" class="line-style">
        <span v-if="item.field === '0'" :title="t('chart.field_fixed')">{{
          t('chart.field_fixed')
        }}</span>
        <span v-if="item.field === '1'" :title="t('chart.field_dynamic')">{{
          t('chart.field_dynamic')
        }}</span>
      </el-col>
      <el-col v-if="item.field === '0'" :span="10" class="line-style">
        <span :title="item.value">{{ item.value }}</span>
      </el-col>
      <el-col v-else-if="item.field === '1'" :span="10" class="line-style">
        <template v-if="existField(item.curField)">
          <span :title="item.curField.name + '(' + t('chart.' + item.summary) + ')'">
            {{ item.curField.name + '(' + t('chart.' + item.summary) + ')' }}
          </span>
        </template>
        <template v-else>
          <span style="color: red">{{ t('chart.invalid_field') }}</span>
        </template>
      </el-col>
    </el-row>

    <!--编辑辅助线-->
    <el-dialog
      v-if="state.editLineDialog"
      v-model="state.editLineDialog"
      :visible="state.editLineDialog"
      width="1000px"
      class="dialog-css"
    >
      <assist-line-edit
        :chart="props.chart"
        :line="state.assistLineCfg.assistLine"
        :quota-fields="quotaFields"
        :quota-ext-fields="quotaExtFields"
        :use-quota-ext="useQuotaExt"
        @onAssistLineChange="lineChange"
      />
      <template #header>
        <div class="assist-line-cfg-header">
          <span class="ed-dialog__title">{{ t('chart.assist_line') }}</span>
          <el-tooltip class="item" effect="light" placement="top">
            <template #content>
              <span> {{ t('chart.assist_line_tip') }}</span>
            </template>
            <el-icon class="hint-icon" :class="{ 'hint-icon--dark': themes === 'dark' }">
              <Icon name="icon_info_outlined"><icon_info_outlined class="svg-icon" /></Icon>
            </el-icon>
          </el-tooltip>
        </div>
      </template>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="closeEditLine">{{ t('chart.cancel') }}</el-button>
          <el-button type="primary" @click="changeLine">{{ t('chart.confirm') }}</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<style lang="less" scoped>
.assist-line-container {
  width: 100%;
  margin-bottom: 16px;

  .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);
      }
    }
  }
  .assist-line-cfg-header {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    .ed-dialog__title {
      margin-right: 4px;
      font-size: 16px;
    }
  }
}

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

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

.line-style {
  width: 100%;
  font-weight: 400;
  display: flex;
  flex-direction: row;
  align-items: center;
  flex-wrap: nowrap;

  &:deep(span) {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    cursor: default;
  }
}

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

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

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

.label-dark {
  font-family: var(--de-custom_font, 'PingFang');
  font-style: normal;
  font-weight: 400;
  line-height: 20px;
  color: #a6a6a6;
  &.ed-button {
    color: var(--ed-color-primary) !important;
  }
  &.is-disabled {
    color: #5f5f5f !important;
  }
}

.font14 {
  :deep(.ed-icon) {
    font-size: 14px;
  }
}
.hint-icon {
  cursor: pointer;
  font-size: 14px;
  color: #646a73;

  &.hint-icon--dark {
    color: #a6a6a6;
  }
}
</style>
