<template>
  <div>
    <p class="panel-tabs">
      <a v-for="(v,i) in fieldType" :key="i"
      :class="selectType.code===v.code? 'is-active' : ''"
      @click="selectType = v"
      >
        {{v.name}}
      </a>
    </p>
            
     <template v-if="selectType.code==='formula'">
    <div class="field mt-1 px-0 mx-0">
      <label class="label fs-14"> Chọn trường để tạo công thức <span class="has-text-danger"> * </span> </label>
      <div class="control">
        <b-taginput
        size="is-small"
          v-model="tags"
          :data="pageData? pageData.fields.filter(v=>v.format==='number') : []"
          type="is-primary is-light"
          autocomplete
          :open-on-focus="true"
          field="label"
          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="tags.find(v=>v.id===props.option.id)? 'has-text-primary' : ''"> {{props.option.label}} </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==='tags')"> {{errors.find(v=>v.name==='tags').message}} </p>
    </div>

      <div class="field mt-3" v-if="tags.length>0">
      <p class="help is-primary"> Click đúp vào để thêm vào công thức tính.</p>
      <div class="tags">
        <a @dblclick="formula = formula? (formula + ' ' + v.name) : v.name" class="tag is-rounded" v-for="(v,i) in tags" :key="i">{{v.name}}</a>
      </div>
    </div>
        <div class="field mt-3 px-0 mx-0">
          <label class="label fs-14">Công thức tính <span class="has-text-danger"> * </span> </label>
          <p class="control">
          <textarea class="textarea is-small" rows="3" type="text" v-model="formula"> </textarea>
          </p>
            <p class="help has-text-danger" v-if="errors.find(v=>v.name==='formula')"> {{errors.find(v=>v.name==='formula').message}} </p>
        </div>
      <div class="field is-horizontal mt-3 px-0 mx-0">
          <div class="field-body">
        <div class="field">
        <label class="label fs-14">Hiển thị theo <span class="has-text-danger">*</span> </label>
        <div class="control">
          <b-autocomplete
            size="is-small"
            icon-right="magnify"
            :value="selectUnit? selectUnit.name : ''"
            placeholder=""
            :keep-first=true
            :open-on-focus=true
            :data="moneyunit"
            field="name"
            @select="option => selectUnit = option">
          </b-autocomplete>
        </div>
        </div>
        <div class="field">
        <label class="label fs-14">Phần thập phân</label>
        <div class="control">
           <input class="input is-small" type="text" placeholder="" v-model="decimal">
        </div>
        </div>
          </div>
      </div>
        </template>

        <div class="field mt-3 px-0 mx-0">
        <label class="label fs-14">Tên trường <span class="has-text-danger"> * </span> </label>
        <p class="control">
          <input class="input is-small" type="text" placeholder="Tên trường phải là duy nhất" v-model="name" 
          :readonly="selectType? selectType.code==='formula': false">
        </p>
        <p class="help has-text-danger" v-if="errors.find(v=>v.name==='name')"> {{errors.find(v=>v.name==='name').message}} </p>
        <p class="help has-text-primary" v-else> Tên trường do hệ thống tự sinh.</p>
      </div>

      <div class="field mt-3">
        <label class="label fs-14"> Mô tả <span class="has-text-danger"> * </span> </label>
        <p class="control is-expanded">
          <input class="input is-small" type="text" placeholder="" v-model="label">
        </p>
        <p class="help has-text-danger" v-if="errors.find(v=>v.name==='label')"> {{errors.find(v=>v.name==='label').message}} </p>
      </div>
      
        <div class="field mt-3" v-if="selectType.code==='empty'">
      <label class="label fs-14"
        >Kiểu dữ liệu
        <span class="has-text-danger"> * </span>
      </label>
      <div class="control fs-14">
            <b-radio v-for="(v,i) in datatype.filter(x=>x.code!=='date')" :key="i" v-model="radioType" :native-value="v">
            {{v.name}}
          </b-radio>
      </div>
    </div>
  
      <div class="field mt-4">
        <p class="control">
          <a class="button is-primary is-small is-outlined is-rounded" 
          @click="selectType.code==='formula'? createField() : createEmptyField()"> Tạo trường</a>
        </p>
      </div>
  </div>
</template>

<script>
export default {
  props: ['pagename'],
  data() {
    return {
      selectUnit: undefined,
      data: [],
      current: 1,
      filterData: [],
      loading: false,
      fieldType: [{code: 'formula', name: 'Công thức'}, {code: 'empty', name: 'Trường rỗng'}],
      tags: [],
      formula: undefined,
      name: 'f' + this.$dayjs(new Date()).format("hhmmss"),
      label: undefined,
      errors: [],
      selectType: undefined,
      radioType: undefined,
      decimal: undefined
    }
  },
  created() {
    this.radioType = this.datatype.find(v=>v.code==='string')
    this.selectType = this.fieldType.find(v=>v.code==='formula')
    this.selectUnit = this.moneyunit.find(v=>v.code==='one')
  },
  computed: {
    moneyunit: {
      get: function() {return this.$store.state.moneyunit},
      set: function(val) {this.$store.commit("updateMoneyUnit", {moneyunit: val})}
    },
    pageData: {
      get: function() {return this.$store.state[this.pagename]},
      set: function(val) {this.$store.commit('updateStore', {name: this.pagename, data: val})}
    },
    tablesetting: {
      get: function() {return this.$store.state.tablesetting},
      set: function(val) {this.$store.commit("updateTableSetting", {tablesetting: val})}
    },
    datatype: {
      get: function() {return this.$store.state.datatype},
      set: function(val) {this.$store.commit("updateDataType", {datatype: val})}
    }
  },
  methods: {
    checkValid() {
			this.errors = []
			if(this.tags.length===0) {
        this.errors.push({name: 'tags', message: 'Chưa chọn trường xây dựng công thức.'})
      }
			
			if(!this.$empty(this.formula)? this.$empty(this.formula.trim()) : true) {
        this.errors.push({name: 'formula', message: 'Công thức không được bỏ trống.'})
      }

      if(!this.$empty(this.label)? this.$empty(this.label.trim()) : true )
        this.errors.push({name: 'label', message: 'Mô tả không được bỏ trống.'})
      else if(this.pageData.fields.find(v=>v.label.toLowerCase()===this.label.toLowerCase())) {
        this.errors.push({name: 'label', message: 'Mô tả bị trùng. Hãy đặt mô tả khác.'})
      }

      if(this.errors.length>0) return false 
      //check formula
      let val = this.$copy(this.formula)
			this.tags.forEach(v => {
				let myRegExp = new RegExp(v.name, 'g')
				val = val.replace(myRegExp, Math.random())				
			})

			try {
				let value = this.$calc(val)
				if(isNaN(value) || value===Number.POSITIVE_INFINITY || value===Number.NEGATIVE_INFINITY) {
					this.errors.push({name: 'formula', message: 'Công thức không hợp lệ'})
				}
			}
			catch(err) {
				this.errors.push({name: 'formula', message: 'Công thức không hợp lệ'})
      }
      return this.errors.length>0? false : true
		},
    createField() {
      if(!this.checkValid()) return
      let field = this.$createField(this.name.trim(), this.label.trim(), 'number', true)
      field.formula = this.formula.trim()
      field.tags = this.tags.map(v=>v.name)
      field.level = Math.max(...this.tags.map(v=>v.level? v.level : 0)) + 1
      field.unit = this.selectUnit.detail
      field.decimal = this.decimal
      field.disable = 'search,value'
      let copy = this.$copy(this.pageData.fields)
      copy.push(field)
      this.$store.commit("updateState", {name: this.pagename, key: "update", data: {fields: copy}})
      this.$emit('newfield', field)
      this.tags = []
      this.formula = undefined
      this.label = undefined
      this.name = 'f' + this.$dayjs(new Date()).format("hhmmss")
    },
    createEmptyField() {
      this.errors = []
       if(!this.$empty(this.name)? this.$empty(this.name.trim()) : true )
        this.errors.push({name: 'name', message: 'Tên không được bỏ trống.'})
      else if(this.pageData.fields.find(v=>v.name.toLowerCase()===this.name.toLowerCase())) {
        this.errors.push({name: 'name', message: 'Tên trường bị trùng. Hãy đặt tên khác.'})
      }
      if(!this.$empty(this.label)? this.$empty(this.label.trim()) : true )
        this.errors.push({name: 'label', message: 'Mô tả không được bỏ trống.'})
      else if(this.pageData.fields.find(v=>v.label.toLowerCase()===this.label.toLowerCase())) {
        this.errors.push({name: 'label', message: 'Mô tả bị trùng. Hãy đặt mô tả khác.'})
      }
      if(this.errors.length>0) return
      let field = this.$createField(this.name.trim(), this.label.trim(), this.radioType.code, true)
      let copy = this.$copy(this.pageData.fields)
      copy.push(field)
      this.$store.commit("updateState", {name: this.pagename, key: "fields", data: copy})
      this.$emit('newfield', field)
      this.label = undefined
      this.name = 'f' + this.$dayjs(new Date()).format("hhmmss")
    }
  }
}
</script>
