<template>
  <div style="width: 100%;">
    <el-col>
      <el-form
        ref="markForm"
        :model="markForm"
        label-width="40px"
        size="mini"
        :rules="rules"
      >

        <el-form-item
          class="form-item"
          :label="$t('chart.mark_field')"
          prop="fieldId"
        >
          <el-select
            v-model="markForm.fieldId"
            style="width: 100%;"
            clearable
            :placeholder="($t('commons.please_select') + $t('chart.mark_field'))"
            @change="changeFields"
          >

            <el-option-group
              v-for="group in fieldOptions"
              :key="group.label"
              :label="group.label"
            >
              <el-option
                v-for="item in group.options"
                :key="item.id"
                :label="item.name"
                :value="item.id"
                :disabled="item.disabled"
              />
            </el-option-group>
          </el-select>
        </el-form-item>

        <el-form-item
          v-for="(condition, index) in markForm.conditions"
          :key="index"
          :label="$t('chart.mark_value')"
          class="form-item"
        >
          <el-col
            class="col-start"
            :span="6"
          >
            <el-select
              v-model="condition.calc"
              placeholder="请选择"
              @change="changeMarkAttr('conditions')"
            >
              <el-option
                v-for="item in currentCalcOption"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-col>
          <el-col
            v-if="condition.calc === 'between'"
            class="col-center"
            :span="10"
          >
            <el-input
              v-model="condition.startv"
              class="number-range-input"
              placeholder=""
              @input="changeMarkAttr('conditions')"
            />
            <span
              class="number-range-span"
              style="padding: 0 2px;"
            >-</span>
            <el-input
              v-model="condition.endv"
              class="number-range-input"
              placeholder=""
              @input="changeMarkAttr('conditions')"
            />
          </el-col>
          <el-col
            v-else
            class="col-center"
            :span="10"
          >
            <el-input
              v-model="condition.value"
              placeholder=""
              @input="changeMarkAttr('conditions')"
            />
          </el-col>
          <el-col
            class="col-center"
            :span="6"
          >
            <de-icon-group-picker
              v-model="condition.icon"
              :options="iconOptions"
              :color="condition.color"
              size="mini"
              @change="changeMarkAttr('conditions')"
              @set-color="c => {setConditionColor(index, c)}"
            />
          </el-col>
          <el-col
            class="col-end"
            :span="2"
          >
            <div>
              <div
                v-if="markForm.conditions.length > 1"
                class="i-row-container"
                :class="index === (markForm.conditions.length - 1) ? 'flex-column': ''"
              >
                <i
                  class="ope-item el-icon-minus"
                  @click.stop="del(index)"
                />
              </div>
              <div
                v-if="index === (markForm.conditions.length - 1)"
                class="i-row-container"
                :class="markForm.conditions.length > 1 ? 'flex-column': ''"
              >
                <i
                  class="ope-item el-icon-plus"
                  @click.stop="add"
                />
              </div>
            </div>
          </el-col>
        </el-form-item>
      </el-form>

    </el-col>
  </div>
</template>

<script>
import { DEFAULT_MARK } from '../../chart/chart'
import DeIconGroupPicker from '@/components/deIconPicker/deIconGroupPicker'
import deSvgIcons from '@/deicons'
import { getItemType } from '@/views/chart/components/dragItem/utils'
import bus from '@/utils/bus'
export default {
  name: 'MapMarkSelector',
  components: { DeIconGroupPicker },
  props: {
    param: {
      type: Object,
      required: true
    },
    chart: {
      type: Object,
      required: true
    },
    dimensionData: {
      type: Array,
      required: true
    },
    quotaData: {
      type: Array,
      required: true
    },
    view: {
      type: Object,
      required: true
    }
  },
  data() {
    return {
      markForm: JSON.parse(JSON.stringify(DEFAULT_MARK)),
      values: null,
      rules: {
        fieldId: [
          { validator: this.fieldIdValidator, trigger: 'blur' }
        ]
      },
      calcOptions: [{
        value: 'eq',
        label: '等于',
        type: 'String'
      }, {
        value: 'contain',
        label: '包含',
        type: 'String'
      }, {
        value: 'uncontain',
        label: '不包含',
        type: 'String'
      }, {
        value: 'start',
        label: '开头是',
        type: 'String'
      }, {
        value: 'end',
        label: '结尾是',
        type: 'String'
      }, {
        value: 'eq',
        label: '=',
        type: 'Number'
      }, {
        value: 'ne',
        label: '!=',
        type: 'Number'
      }, {
        value: 'gt',
        label: '>',
        type: 'Number'
      }, {
        value: 'ge',
        label: '>=',
        type: 'Number'
      }, {
        value: 'lt',
        label: '<',
        type: 'Number'
      }, {
        value: 'le',
        label: '<=',
        type: 'Number'
      }, {
        value: 'between',
        label: 'between',
        type: 'Number'
      }
      ],
      iconOptions: {
        FontAwesome: false,
        ElementUI: false,
        addIconList: [],
        removeIconList: []
      }
    }
  },
  computed: {
    fieldOptions() {
      const xaxis = this.view.xaxis
      const yaxis = this.view.yaxis
      const locationIds = this.view.viewFields.filter(item => item.busiType === 'locationXaxis' || item.busiType === 'locationYaxis').map(item => item.id)
      const xIds = xaxis ? xaxis.map(item => item.id) : []
      const yIds = yaxis ? yaxis.map(item => item.id) : []
      const disableIds = [...xIds, ...yIds, ...locationIds]

      return [
        {
          label: this.$t('chart.dimension'),
          options: this.dimensionData && this.dimensionData.map(item => {
            item.disabled = disableIds.includes(item.id)
            return item
          })
        },
        {
          label: this.$t('chart.quota'),
          options: this.quotaData && this.quotaData.map(item => {
            item.disabled = disableIds.includes(item.id)
            return item
          })
        }
      ]
    },
    currentCalcOption() {
      const field = this.getField(this.markForm.fieldId)
      if (!field) {
        return []
      }
      const numberType = [2, 3]
      const excludeCalcType = numberType.includes(field.deType) ? 'String' : 'Number'
      return this.calcOptions.filter(option => option.type !== excludeCalcType)
    }

  },
  watch: {
    'chart': {
      handler: function() {
        this.initData()
      }
    }
  },

  beforeDestroy() {
    bus.$off('reset-change-table', this.getItemTagType)
  },
  mounted() {
    bus.$on('reset-change-table', this.getItemTagType)
    this.initData()
    this.loadSvg()
  },
  methods: {
    fieldIdValidator(rule, value, callback) {
      if (!value) {
        return callback()
      }
      const field = this.getField(value)
      if (!field) {
        return callback(new Error(this.$t('chart.mark_field_error')))
      }
      const tagType = getItemType(this.dimensionData, this.quotaData, field)
      if (tagType === 'danger') {
        return callback(new Error(this.$t('chart.mark_field_error')))
      }
      callback()
    },
    setConditionColor(index, color) {
      this.markForm.conditions[index].color = color
      this.changeMarkAttr('conditions')
    },
    loadSvg() {
      const svgList = deSvgIcons
      const groupMap = {}
      svgList.forEach(svg => {
        const arr = svg.split('-')
        if (arr?.length > 3) {
          const groupName = arr[0] + '-' + arr[1]
          const svgName = svg
          groupMap[groupName] = groupMap[groupName] || []
          groupMap[groupName].push(svgName)
        }
      })
      this.iconOptions.addIconGroup = groupMap
    },
    initData() {
      const chart = JSON.parse(JSON.stringify(this.chart))
      if (chart.customAttr) {
        let customAttr = null
        if (Object.prototype.toString.call(chart.customAttr) === '[object Object]') {
          customAttr = JSON.parse(JSON.stringify(chart.customAttr))
        } else {
          customAttr = JSON.parse(chart.customAttr)
        }
        if (customAttr.mark) {
          this.markForm = customAttr.mark
          if (this.markForm.fieldId) {
            this.getItemTagType()
          }
        }
      }
    },

    add() {
      const newRow = {
        fieldId: this.markForm.fieldId,
        calc: 'eq',
        value: '',
        icon: '',
        color: 'rgba(255, 0, 0, 1)'
      }
      this.markForm.conditions.push(newRow)
    },
    del(index) {
      this.markForm.conditions.splice(index, 1)
      this.changeMarkAttr('modifyName')
    },

    changeMarkAttr(modifyName) {
      this.markForm['modifyName'] = modifyName
      this.$emit('onMarkChange', this.markForm)
    },
    getField(fieldId) {
      const fields = [...JSON.parse(JSON.stringify(this.dimensionData)), ...JSON.parse(JSON.stringify(this.quotaData))]
      return fields.find(item => item.id === fieldId)
    },
    changeFields(fieldId) {
      const baseConditions = [
        {
          fieldId: fieldId,
          calc: 'eq',
          value: '',
          icon: '',
          color: 'rgba(255, 0, 0, 1.0)'
        }
      ]
      this.view.viewFields = this.view.viewFields.filter(item => item.busiType !== 'daxis')
      if (fieldId) {
        this.markForm.conditions = JSON.parse(JSON.stringify(baseConditions))

        const field = this.getField(fieldId)
        if (field) {
          field.busiType = 'daxis'
          this.view.viewFields.push(field)
        }
      } else {
        this.markForm.conditions = []
      }

      this.changeMarkAttr('fieldId')
    },
    getItemTagType() {
      this.$refs['markForm'].validate((valid) => {
      })
    }
  }
}
</script>

<style lang="scss" scoped>

  .color-picker-style{
    cursor: pointer;
    z-index: 1003;
  }
  .col-end {
    text-align: end;
  }
  .col-center {
    padding: 0 5px;
  }
  .ope-item {
    height: 100%;
    line-height: 100%;
    background-color: #FFFFFF;
    background-image: none;
    border: 1px solid #DCDFE6;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;

  }
  .i-row-container {
    width: 15px;
    font-size: 12px !important;
    float: right;
    i {
      cursor: pointer;
      &:hover {
        color: var(--primary, #3370ff);
        border-color: var(--primary, #3370ff);
      }
    }
  }
  .flex-column {
    display: flex;
    flex: none;
    flex-direction: column;
  }
  .number-range-input {
    width: 45%;
  }
  .number-range-span {
    padding: 0 2px;
  }
</style>
