<template>
    <div class="propertyeditor-condition">
        <el-row :gutter="20">
            <el-form size="small">
                <el-form-item>
                    <el-col :span="6">
                        <el-select v-model="selectedQuestionKey" filterable @change="selectedQuestionByName">
                            <template v-for="(item,index) in questionOptions">
                                <el-option
                                     v-if="item.name !== element.name"
                                    :title="item.questionTitle"
                                    :key="index"
                                    :label="item.displayName"
                                    :value="item.name">
                              </el-option>
                            </template>
                        </el-select>
                    </el-col>
                    <el-col :span="6">
                        <el-select v-model="selectedOperation">
                            <el-option
                                    v-for="item in operateOptions"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value">
                            </el-option>
                        </el-select>
                    </el-col>
                    <el-col :span="6">
                        <el-input v-model="selectedQuestionValue" :disabled="controlQuestionValueDisabled"></el-input>
                    </el-col>
                    <el-col :span="6">
                        <el-button type="primary" size="mini" :disabled="controlQuestionExpressie"
                                   @click="addQuestionExpressie">{{ $t('editor.etab01') }}
                        </el-button>
                    </el-col>
                </el-form-item>

                <!-- 单选 多选 下拉控制 -->
                <el-form-item class='choose' v-if="selectedQuestion && questionValueDisabledType.indexOf(selectedOperation) == -1">
                    <el-col :span="24">
                        <p class="chooseItem" v-if="selectedQuestion.type == 'dropdown'" style="margin-bottom: 0px">{{ $t('editor.etab02') }}</p>
                        <el-radio-group
                                v-if="selectedQuestion.type == 'radiogroup'"
                                v-model="radioSelectedValue" @change="radioChange">
                            <p class="chooseItem">{{ $t('editor.etab02') }}</p>
                            <el-radio v-for="item in selectedQuestion.choices"
                                      :label="typeof item === 'object'?item.value : item"
                                      :key="typeof item === 'object'?item.value : item">
                                {{typeof item === 'object'? item.text : item}}
                            </el-radio>
                        </el-radio-group>

                        <el-checkbox-group
                                v-else-if="selectedQuestion.type == 'checkbox'"
                                v-model="checkboxSelectedValue" @change="checkboxChange">
                            <p class="chooseItem">{{ $t('editor.etab02') }}</p>
                            <el-checkbox v-for="item in selectedQuestion.choices"
                                         :label="typeof item === 'object'?item.value : item"
                                         :key="typeof item === 'object'?item.value : item">
                                {{typeof item === 'object'?item.text : item}}
                            </el-checkbox>
                        </el-checkbox-group>

                        <el-dropdown trigger="click" v-else-if="selectedQuestion.type == 'dropdown'">
                            <!-- <p class="chooseItem">请选择</p> -->
                            <span class="el-dropdown-link">{{dropdownSelectedValue}}<i
                                    class="el-icon-arrow-down el-icon--right"></i></span>
                            <el-dropdown-menu slot="dropdown">
                                <template v-for="item in selectedQuestion.choices">
                                  <template>
                                     <el-dropdown-item :key="item.choices" @click.native="dropdownClick(item)"  >
                                      {{ getChoiceTitle(item)}}
                                    </el-dropdown-item>
                                  </template>
                                </template>
                            </el-dropdown-menu>
                        </el-dropdown>

                        <el-switch v-else-if="selectedQuestion.type == 'boolean'"
                                   @change="switchChange" v-model="switchValue"
                                   active-text="Yes" inactive-text="No">
                        </el-switch>
                    </el-col>
                </el-form-item>
                <!-- 表达式框 -->
                <el-form-item>
                    <el-col :span="24">
                        <el-input type="textarea" v-model="element[type]"></el-input>
                    </el-col>
                </el-form-item>
            </el-form>
        </el-row>
    </div>
</template>

<script>
import _ from 'lodash'
export default {
  name: 'ExpressieCreator',
  props: ['element', 'type'],
  data: function () {
    return {
      questionOptions: this.$store.getters.queryQuestionAndBuild(this.element), // 所有的问题选项
      operateOptions: [], // 所有操作符
      selectedQuestionKey: '', // 选择的问题key
      selectedQuestion: null, // 选择的问题对象
      selectedQuestionValue: '', // 选择的问题的值
      selectedTypes: ['radiogroup', 'checkbox', 'dropdown', 'boolean'], // 选择类型
      questionValueDisabledType: ['empty', 'notempty'], // 输入框禁用的操作类型
      selectedOperation: '=', // 选择的操作符
      radioSelectedValue: null, // 单选
      checkboxSelectedValue: [], // 多选
      switchValue: true, // 开关切换
      dropdownSelectedValue: 'Choose' // 下拉选择
    }
  },

  computed: {
    // 问题表达式
    questionExpressie: {
      get: function () {
        return this.element[this.type]
      },
      set: function (val) {
        this.element[this.type] = val
      }
    },
    // 控制条件输入框
    controlQuestionValueDisabled: function () {
      // 1.条件为questionValueDisabledType类型时禁用
      if (this.questionValueDisabledType.indexOf(this.selectedOperation) !== -1) {
        return true
      }

      // 2.选择selectedTypes类型的题 且操作符不为questionValueDisabledType时禁用
      if (this.selectedQuestion && this.selectedQuestion.type && this.selectedTypes.indexOf(this.selectedQuestion.type) !== -1 &&
                    this.questionValueDisabledType.indexOf(this.selectedOperation) === -1) {
        return true
      }

      return false
    },

    // 控制添加表达式按钮
    controlQuestionExpressie: function () {
      // 1.未选中题目时禁用
      if (this.selectedQuestionKey === '') {
        return true
      }
      // 2.条件不为questionValueDisabledType 且输入值为空时禁用
      if (this.questionValueDisabledType.indexOf(this.selectedOperation) === -1 && this.selectedQuestionValue === '') {
        return true
      }

      return false
    },

    // 当前页面
    currentPage: function () {
      return this.$store.state.survey.model.pages[this.$store.state.survey.pageIndex]
    },
    // 编辑的当前问题
    currentQuestion: function () {
      return this.currentPage.elements[this.$store.state.survey.questionIndex]
    }
  },

  methods: {
    getChoiceTitle(item){
      let title = item
      if(typeof item === 'object'){
        title = item.pText ?  [item.pText,item.text].join('.') : item.text
      }
      return title
    },
    // 题目选择事件
    selectedQuestionByName: function (value) {
      if (value) {
        const selectQuestion = this.$store.getters.getBuildQuestionByName(this.element, value)
        this.selectedQuestion = _.merge({}, selectQuestion)
        this.selectedQuestionValue = ''
        this.radioSelectedValue = null
        this.checkboxSelectedValue = []
        this.dropdownSelectedValue = this.$t('editor.questChoices')
        this.switchValue = true
        if(this.selectedQuestion.hasOther && this.selectedQuestion.choices){
          this.selectedQuestion.choices.push({
            text: this.selectedQuestion.otherText || this.$t('editor.hasOther'),
            value: 'other'
          })
        }
        // 针对boolean类型的值，默认选择中的Yes，此时需要将值赋给 selectedQuestionValue 显示出来
        if (this.selectedQuestion && this.selectedQuestion.type === 'boolean') {
          this.selectedQuestionValue = String(this.switchValue)
        }
      }
    },

    // 单选选择事件
    radioChange: function () {
      this.selectedQuestionValue = '"' + this.radioSelectedValue + '"'
    },

    // 多选选择事件
    checkboxChange: function (value) {
      if (value != null && value.length > 0) {
        this.selectedQuestionValue = '["' + value.join('","') + '"]'
      }
    },

    // 下来选择事件
    dropdownClick: function (obj) {
      if (typeof obj === 'object') {
        this.selectedQuestionValue = '"' + obj.value + '"'
        this.dropdownSelectedValue = this.getChoiceTitle(obj)
      } else {
        this.selectedQuestionValue = '"' + obj + '"'
        this.dropdownSelectedValue = obj
      }
    },

    // 开关切换选择事件
    switchChange: function (val) {
      this.switchValue = val
      this.selectedQuestionValue = String(val)
    },

    // 添加条件表达式
    addQuestionExpressie: function () {
      let questionExpression = this.element[this.type]
      // 不是指定的数据类型，对填写的值进行组装
      if (this.selectedTypes.indexOf(this.selectedQuestion.type) === -1) {
        // 判断输入的是否是数字 --非数字需要加引号
        if (isNaN(this.selectedQuestionValue)) {
          this.selectedQuestionValue = '"' + this.selectedQuestionValue + '"'
        }
      }
      if (questionExpression === null || questionExpression.length === 0) {
        questionExpression = ' {' + this.selectedQuestionKey + '} ' + this.selectedOperation + ' ' + this.selectedQuestionValue
      } else {
        questionExpression += ' and' + ' {' + this.selectedQuestionKey + '} ' + this.selectedOperation + ' ' + this.selectedQuestionValue
      }
      this.questionExpressie = `${questionExpression}`
      this.selectedQuestion = null
      this.selectedQuestionKey = ''
      this.selectedQuestionValue = ''
    },

    // 初始化操作选项
    initOperateOptions: function () {
      this.operateOptions = [{ // 操作选项
        value: 'empty',
        label: 'is empty'
      }, {
        value: 'notempty',
        label: 'is not empty'
      }, {
        value: '=',
        label: 'equals'
      }, {
        value: '<>',
        label: 'notequal'
      }, {
        value: 'contains',
        label: 'contains'
      }, {
        value: 'notcontains',
        label: 'not contains'
      }, {
        value: 'anyof',
        label: 'any of'
      }, {
        value: 'allof',
        label: 'all of'
      }, {
        value: '>',
        label: 'greater'
      }, {
        value: '<',
        label: 'less'
      }, {
        value: '>=',
        label: 'greater or equals'
      }, {
        value: '<=',
        label: 'less or equals'
      }]
    }

  },

  created: function () {
    if (this.element[this.type] === undefined) {
      this.$set(this.element, this.type, '')
    }
  },

  mounted: function () {
    this.initOperateOptions()
  }
}

</script>

<style scoped>
    .el-checkbox, .el-radio {
        width: 100%;
    }

    .choose {
        text-align: left;
    }

    .chooseItem {
        font-size: 14px;
        line-height: 14px;
        margin: 0px 0px 10px 0px;
    }

    .el-form-item {
        margin-bottom: 15px;
    }

    .el-dropdown {
        cursor: pointer;
    }
</style>
