<template>
  <div class="pens-data right-box__container">
    <div class="form-row-box chart-config">
      <div class="form-row-item">
        <div class="form-row-key">
          Time Range
        </div>
        <div class="form-row-value">
          <el-select v-model="dataTimeType"/>
        </div>
      </div>
      <div class="form-row-item form-row-item-full">
        <div
          v-if="elements && elements.length"
          class="metrics-input-box"
        >
          <draggable
            v-model="elements"
            :move="move"
            @end="end"
            @start="start"
            :scroll-sensitivity="150"
            :options="{
            dragClass:'drag-chart-class',
            fallbackClass:'fallback-class',
            forceFallback:true,
            ghostClass:'chart-ghost',
            chosenClass:'choose-class',
            scroll:true,
            filter: '.drag-disabled',
            animation: 150,
            handle: '.drag-sort'
          }">
            <el-row
              class="element-item form-row-item form-row-item-full thresholds-from-item"
              style="margin-bottom: 10px !important"
              v-for="index of elements.length"
              :key="index"
            >
              <div class="chart-title chart-title-config">
            <span class="chart-title-content el-form-item" :class="{
              'is-error' : expressionsShow[index-1].error,
              'hide-input': expressionsShow[index-1].hideInput
            }">
              <i class="nz-icon nz-icon-arrow-down" :class="expressionsShow[index-1].show?'':'is-active'" @click.stop="showExpression(index)"></i>
              <el-input
                style="width: 120px"
                @mousedown.stop
                v-model="expressionName[index-1]"
                size="small"
                @input="(val)=>{expressionNameInput(val,index-1)}"
                @change="expressionNameChange(index-1)"
                @focus.stop="showInput(index-1,false)"
                @blur="showInput(index-1,true)"
              />
              <div v-if="expressionsShow[index-1].error"  class="el-form-item__error" style="top: 10px;left: 164px"> {{expressionsShow[index-1].error}}</div>
            </span>
                <span>
              <!-- 显示隐藏 -->
              <span v-if="expressionsShow[index-1].state === 1" @click="()=>{switchExpression(index - 1,1)}" :title="$t('overall.visible')" style="margin-right: 5px;padding-left: 10px">
                <i class="nz-icon nz-icon-mimakejian"></i>
              </span>
              <span v-else @click="()=>{switchExpression(index - 1,0)}" :title="$t('overall.invisible')" style="margin-right: 5px;padding-left: 10px">
                <i class="nz-icon nz-icon-mimabukejian"></i>
              </span>
              <span @click="()=>{addExpression()}" style="margin-right: 5px" :title="$t('tip.add')">
                <i class="nz-icon nz-icon-create-square" style="font-weight: normal; font-size: 17px; cursor: pointer;"></i>
              </span>
              <span @click="copyExpression(index - 1)" style="margin-right: 5px" :title="$t('overall.duplicate')">
                <i class="nz-icon nz-icon-override"></i>
              </span>
              <span @click="removeExpression(index - 1)" class="nz-icon-minus-medium" style="margin-right: 5px" :title="$t('overall.delete')">
                <i class="nz-icon nz-icon-minus"></i>
              </span>
              <span style="margin-right: 5px;fontSize:17px;cursor: grab;" class="drag-sort" :title="$t('dashboard.panel.chartForm.sort')">
                <i class="nz-icon nz-icon-sort" style="cursor: grab;"></i>
              </span>
            </span>
              </div>
              <transition name="el-zoom-in-top">
                <el-row v-show="expressionsShow[index-1].show">
                  <div :prop="'elements.' + (index -1) + '.expression'" :rules="{ required: true, message: $t('validate.required'), trigger: 'change'}">
                    <promql-input
                      :from-father-data="true"
                      :metricOptionsParent="metricOptions"
                      :expressionList="expressions"
                      :id="'promqlKeys' + [index-1]"
                      :index="index-1"
                      :required = 'true'
                      :type="promqlType"
                      :key="index-1"
                      :plugins="['metric-selector', 'metric-input', 'remove']"
                      :ref="'promql-'+(index-1)"
                      :showRemove="false"
                      :styleType="2"
                      @change="expressionChange"
                      @removeExpression="removeExpression"
                    ></promql-input>
                  </div>
                  <el-row style="margin-top: 18px;display: flex">
                    <el-col class="legend-title">
                      <span class="legend-title__span">{{$t('dashboard.panel.chartForm.legend')}}&nbsp;</span>
                      <el-popover placement="top" trigger="hover" width="211" popper-class="prevent-clickoutside">
                        <div style="white-space: normal" :style="{'word-break':language!=='zh'?'keep-all':'break-all'}">{{$t('dashboard.panel.chartForm.legendTip')}}</div>
                        <!-- <div :style="{'word-break':language!=='cn'?'keep-all':'break-all'}">{{$t('dashboard.panel.chartForm.legendTip')}}</div> -->
                        <i @mouseover="rz" class="nz-icon nz-icon-info-normal" slot="reference" style="font-size: 14px; -webkit-transform:scale(0.75);display:inline-block;"></i>
                      </el-popover>
                    </el-col>
                    <el-col style="flex: 1">
                      <el-input maxlength="512" show-word-limit size="small" type="text" v-model="expressionsShow[index-1].legend" @change="expressionChange"></el-input>
                    </el-col>
                  </el-row>
                </el-row>
              </transition>
            </el-row>
          </draggable>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import promqlInput from '@/components/page/dashboard/explore/promqlInput'
import promqlInputMixin from '@/components/common/mixin/promqlInput.js'
import {isStat} from "@/components/chart/chart/tools";
import {ColorReverse, randomcolor} from "@/components/common/js/radomcolor/randomcolor";
import {getUUID, resetZIndex} from "@/components/common/js/common";
import lodash from "lodash";
import draggable from 'vuedraggable'
const rz = {
  methods: {
    rz (e) {
      resetZIndex(e)
    }
  }
}
export default {
  name: 'meta2dData',
  mixins: [promqlInputMixin, rz],
  components: {
    draggable,
    promqlInput
  },
  data () {
    return {
      language: localStorage.getItem('nz-language') || 'en',
      elements: [],
      promqlType: 'metrics',
      expressions: [],
      expressionName: [],
      expressionsShow: [],
      letter: [
        'A', 'B', 'C', 'D', 'E', 'F', 'G',
        'H', 'I', 'J', 'K', 'L', 'M', 'N',
        'O', 'P', 'Q', 'R', 'S', 'T',
        'U', 'V', 'W', 'X', 'Y', 'Z'
      ],
      dataTimeType: 1
    }
  },
  mounted () {
    this.init()
  },
  methods: {
    expressionChange: function () {
      if (this.expressions.length) {
        this.elements = []
        this.expressions.forEach((expr, i) => {
          this.elements.push({
            id: this.expressionsShow[i].elementId,
            expression: expr,
            type: 'expert',
            legend: this.expressionsShow[i].legend,
            name: this.expressionName[i],
            state: this.expressionsShow[i].state,
            orderNum: i
          })
        })
      } else {
        this.elements = []
      }
      this.change()
    },
    switchExpression (index, flag) {
      if (flag === 1) {
        this.$set(this.expressionsShow[index], 'state', 0)
      } else {
        this.$set(this.expressionsShow[index], 'state', 1)
      }
      this.expressionChange()
    },
    expressionNameChange (index) {
      if (this.expressionsShow[index].error) {
        this.expressionName[index] = this.expressionsShow[index].oldName
        this.expressionsShow[index].error = ''
      } else if (!this.expressionName[index]) {
        this.expressionName[index] = this.expressionsShow[index].oldName
      } else {
        this.param.rightYAxis && this.param.rightYAxis.elementNames.forEach((item, index) => {
          if (item == this.expressionsShow[index].oldName) {
            this.param.rightYAxis.elementNames[index] = this.expressionName[index]
          }
        })
        this.expressionsShow[index].oldName = this.expressionName[index]
      }
      this.expressionChange()
    },
    expressionNameInput (val, index) {
      const findIndex = this.expressionName.indexOf(val)
      const lastIndex = this.expressionName.lastIndexOf(val)
      if (findIndex !== -1 && lastIndex != -1 && lastIndex !== findIndex) {
        this.expressionsShow[index].error = this.$t('error.nameDuplicate')
      } else if (!val) {
        this.expressionsShow[index].error = this.$t('validate.required')
      } else {
        this.expressionsShow[index].error = ''
      }
    },
    showInput (index, flag) {
      this.expressionsShow[index].hideInput = flag
    },
    transformNumToLetter (num) { // 相当于26进制 获取idaddExpression
      const self = this
      let letter = ''
      const loopNum = parseInt(num / 26)
      if (loopNum > 0) {
        letter += this.transformNumToLetter(loopNum - 1)
      }
      letter += self.letter[num % 26]
      return letter
    },
    getExpressionName () {
      let name = ''
      for (let i = 0; i <= this.expressionName.length; i++) {
        name = this.transformNumToLetter(i)
        if (this.expressionName.indexOf(name) === -1) { // 判断当前id是否存在 必须走了break 返回的id才是对的
          break
        }
      }
      return name
    },
    addExpression (item) {
      if (!item) {
        this.expressions.push('')
        const expressionName = this.getExpressionName()
        this.expressionName.push(expressionName)
        this.expressionsShow.push({
          show: true,
          hideInput: true,
          oldName: expressionName,
          error: '',
          legend: '',
          elementId: '',
          state: 1
        })
        this.expressionChange()
      } else {
        this.expressions.push(item.expression)
        this.expressionName.push(item.name)
        this.expressionsShow.push({
          show: true,
          hideInput: true,
          oldName: item.name,
          error: '',
          elementId: item.id,
          legend: item.legend,
          state: item.state
        })
      }
    },
    copyExpression (index) {
      this.expressions.push(this.expressions[index])
      const expressionName = this.getExpressionName()
      this.expressionName.push(expressionName)
      this.expressionsShow.push(
        {
          ...this.expressionsShow[index],
          show: true,
          hideInput: true,
          oldName: expressionName,
          error: '',
          elementId: ''
        }
      )
      this.$nextTick(() => {
        this.expressions.forEach((ex, index) => {
          this.$refs[`promql-${index}`][0].metricChange(ex)
          this.$refs[`promql-${index}`][0].promqlInputChange(ex)
        })
      })
      this.expressionChange()
    },
    removeExpression (index) {
      if (this.expressionsShow.length > 1) {
        this.param.rightYAxis && this.param.rightYAxis.elementNames.forEach((elementName, subIndex) => {
          if (elementName == this.expressionName[index]) {
            this.param.rightYAxis.elementNames.splice(subIndex, 1)
          }
        })

        this.expressions.splice(index, 1)
        this.expressionName.splice(index, 1)
        this.expressionsShow.splice(index, 1)
        this.$nextTick(() => {
          this.expressions.forEach((ex, index) => {
            this.$refs[`promql-${index}`][0].metricChange(ex)
            this.$refs[`promql-${index}`][0].promqlInputChange(ex)
          })
        })
        this.expressionChange()
      }
    },
    showExpression (index) {
      this.expressionsShow[index - 1].show = !this.expressionsShow[index - 1].show
      this.$set(this.expressionsShow, index - 1, this.expressionsShow[index - 1])
    },
    unitSelected: function (value) {
      // this.unit=value[value.length-1];
      this.change()
    },
    change (key, index) {
      this.$nextTick(() => {
        if (key) {
          this.hideError(key, index)
        }
        this.$emit('change', this)
      })
    },
    showError () {
    },
    hideError (key, index) {
      if (!this.param[key] || !this.param[key].length) {
        return
      }
      this.param[key][index].error = false
      this.$forceUpdate()
    },
    move () {

    },
    end (event) {
      this.expressions = []
      this.expressionName = []
      if (!this.elements.length) {
        this.addExpression()
      } else {
        const expressionsShow = this.$loadsh.cloneDeep(this.expressionsShow)
        this.elements.forEach((item, index) => {
          this.expressions.push(item.expression)
          this.expressionName.push(item.name)
          // 更新promqlInput视图
          this.$nextTick(() => {
            this.$refs[`promql-${index}`][0].promqlInputChange(item)
          })
          // 设置orderNum排序
          item.orderNum = index
          // expressionsShow调整顺序
          expressionsShow.forEach((subItem) => {
            if (item.name == subItem.oldName) {
              this.$set(this.expressionsShow, index, this.$loadsh.cloneDeep(subItem))
            }
          })
        })
      }
      this.change()
    },
    start () {

    },
    init () {
      // 重置相关属性
      this.expressions = []
      this.expressionsShow = []
      this.expressionName = []
      if (!this.elements.length) {
        this.addExpression()
      } else {
        // 根据orderNum排序
        this.elements = this.elements.sort((a, b) => a.orderNum - b.orderNum)
        this.elements.forEach(item => {
          this.addExpression(item)
        })
        this.expressionChange()
      }
    }
  }
}
</script>

<style scoped>

</style>
