<template>
  <div>
    <div class="field mt-3 mb-1" v-if="field.format==='number'">
      <label class="label fs-14">Chọn trường<span class="has-text-danger"> * </span> </label>
      <div class="control">
        <b-taginput
        size="is-small"
          v-model="tagsField"
          :data="pageData? pageData.fields.filter(v=>v.format==='number') : []"
          type="is-dark is-light"
          autocomplete
          :open-on-focus="true"
          field="name"
          icon="plus"
          placeholder="Chọn trường"
         >
          <template slot-scope="props">
            <span class="mr-3 has-text-danger has-text-weight-bold"> {{props.option.name}}</span> 
            <span :class="tagsField.find(v=>v.id===props.option.id)? 'has-text-dark' : ''"> {{$stripHtml(props.option.label, 60)}} </span>
          </template>
          <template slot="empty">
            Không có trường thỏa mãn
          </template>
        </b-taginput>
      </div>
      <p class="help has-text-danger" v-if="errors.find(v=>v.name==='tagsField')"> {{errors.find(v=>v.name==='tagsField').message}} </p>
    </div>
    <div class="mt-2" v-if="tagsField.length>0">
      <a @dblclick="expression = expression? (expression + ' ' + v.name) : v.name" 
      class="tag is-rounded" v-for="(v,i) in tagsField" :key="i">
      <span class="tooltip">
        {{ v.name }}
        <span class="tooltiptext" style="top: 60%; bottom: unset; min-width: max-content; left: 25px;">{{ $stripHtml(v.label) }}</span>
      </span>
      </a>
    </div>
      <div class="field is-horizontal mt-3">
        <div class="field-body">
        <div class="field" v-if="field.format==='number'">
          <label class="label fs-14">Biểu thức có dạng Đúng / Sai <span class="has-text-danger"> * </span> </label>
          <p class="control is-expanded">
            <input class="input is-small" type="text" v-model="expression">
           </p>
            <p class="help has-text-danger" v-if="errors.find(v=>v.name==='expression')"> {{errors.find(v=>v.name==='expression').message}} </p>
        </div>

        <div class="field" v-else>
          <label class="label"> Chuỗi kí tự <span class="has-text-danger"> * </span>
          </label>
          <p class="control">
            <input
              class="input is-small"
              type="text"
              placeholder=""
              v-model="searchText"
              @change="changeStyle()"
            />
          </p>
          <p
            class="help has-text-danger"
            v-if="errors.find((v) => v.name === 'searchText')"
          >
            {{ errors.find((v) => v.name === "searchText").msg }}
          </p>
        </div>
        <div class="field is-narrow" v-if="filterType==='color'">
            <label class="label fs-14"> Mã màu <span class="has-text-danger"> * </span> </label>
            <p class="control fs-14">
              <input type="color" v-model="color" @change="changeStyle()">
            </p>
            <p class="help has-text-danger" v-if="errors.find(v=>v.name==='color')"> {{errors.find(v=>v.name==='color').message}} </p>
          </div>
        <div class="field is-narrow" v-else-if="filterType==='size'">
            <label class="label fs-14"> Cỡ chữ <span class="has-text-danger"> * </span> </label>
            <p class="control fs-14">
            <input class="input is-small" type="text" placeholder="Nhập số" v-model="size" @change="changeStyle()">
            </p>
            <p class="help has-text-danger" v-if="errors.find(v=>v.name==='size')"> {{errors.find(v=>v.name==='size').message}} </p>
          </div>
        </div>
      </div>
  </div>
</template>
<script>
export default {
  props: ['filterObj', 'filterType', 'pagename', 'field'],
  data() {
    return {
      tagsField: [],
      expression: undefined,
      form: undefined,
      color: undefined,
      size: undefined,
      errors: [],
      searchText: undefined
    }
  },
  created() {
    this.color = this.filterObj.color
    this.size = this.filterObj.size
    this.expression = this.filterObj.expression? this.filterObj.expression : this.field.name
    if(this.filterObj.tags) {
      this.filterObj.tags.map(v=>{
        this.tagsField.push(this.pageData.fields.find(x=>x.name===v))
      })
    } else if(this.field.format==='number') this.tagsField.push(this.pageData.fields.find(v=>v.name===this.field.name))
  },
  watch: {
    expression: function(newVal) {
      if(this.$empty(newVal)) return
      else this.changeStyle()
    }
  },
  computed: {
    colorscheme: {
      get: function() {return this.$store.state.colorscheme},
      set: function(val) {this.$store.commit("updateColorScheme", {colorscheme: val})}
    },
    pageData: {
      get: function() {return this.$store.state[this.pagename]},
      set: function(val) {this.$store.commit('updateStore', {name: this.pagename, data: val})}
    },
    colorchoice: {
      get: function() {return this.$store.state.colorchoice},
      set: function(val) {this.$store.commit("updateColorChoice", {colorchoice: val})}
    }
  },
  methods: {
    changeStyle() {
      let check = this.field.format==='number'? this.checkExpression() : this.checkCondition()
      if(!check) return
      var row = this.field.format==='number'? {expression: this.expression, tags: this.tagsField.map(v=>v.name)}
      : {keyword: this.searchText, type: 'search'}
      this.filterType==='color'? row.color = this.color : row.size = this.size
      this.$emit('databack', row)
    },
    checkCondition() {
      this.errors = []
      if(this.filterType==='color' && this.$empty(this.color)) this.errors.push({name: 'color', message: 'Chọn màu'})
      if(this.filterType==='size' && this.$empty(this.size)) this.errors.push({name: 'size', message: 'Nhập cỡ chữ'})
      if(this.$empty(this.searchText))  this.errors.push({name: 'searchText', message: 'Chưa nhập chuỗi kí tự'})
      return this.errors.length>0? false : true
    },
    checkExpression() {
      this.errors = []
      if(this.filterType==='color' && this.$empty(this.color)) this.errors.push({name: 'color', message: 'Chọn màu'})
      if(this.filterType==='size' && this.$empty(this.size)) this.errors.push({name: 'size', message: 'Nhập cỡ chữ'})
      let val = this.$copy(this.expression)
      let exp = this.$copy(this.expression)
			this.tagsField.forEach(v => {
				let myRegExp = new RegExp(v.name, 'g')
        val = val.replace(myRegExp, Math.random())
        exp = exp.replace(myRegExp, "field.formatNumber(row['" + v.name + "'])")		
      })
			try {
        let value = this.$calc(val)
				if(isNaN(value) || value===Number.POSITIVE_INFINITY || value===Number.NEGATIVE_INFINITY) {
					this.errors.push({name: 'expression', message: 'Biểu thức không hợp lệ'})
				} else if(!(eval(value)===true || eval(value)===false)) {
          this.errors.push({name: 'expression', message: 'Biểu thức không hợp lệ'})
        }
			}
			catch(err) {
				this.errors.push({name: 'expression', message: 'Biểu thức không hợp lệ'})
      }
      return this.errors.length>0? false : true
    }
  }
}
</script>