<template>
  <div class="relation-wrapper">
    <div class="global-box">
      <el-button type="success" size="small" class="el-icon-plus" @click="handleAddGlobal">{{ $t('editor.etab03') }}</el-button>
    </div>
    <el-table :data="relations" v-show="showTable">
      <el-table-column :label="$t('editor.etab24')">
        <template slot-scope="scope">
          <el-select v-model="scope.row.tarQName" filterable @change="handleChangeTarQ(scope.row)" size="small">
            <el-option v-for="item in questionOptions" :title="item.questionTitle" :value="item.name" :label="item.displayName" :key="item.name" v-if="item.name != question.name"></el-option>
          </el-select>
        </template>
      </el-table-column>
      <el-table-column :label="$t('editor.etab05')" width="135">
        <template slot-scope="scope">
          <el-select v-model="scope.row.condition" @change="handleChangeCondition(scope.row)" size="small">
            <el-option v-for="item in conditionList" :value="item.value" :label="item.label" :key="item.value"></el-option>
          </el-select>
        </template>
      </el-table-column>
      <el-table-column :label="$t('editor.questOptValue')">
        <template slot-scope="scope">
          <div v-if="!!scope.row.condition && ['empty', 'notempty'].indexOf(scope.row.condition) == -1">
            <el-select v-model="scope.row.relationVal" v-if="['radiogroup', 'dropdown'].indexOf(scope.row.tarQType) > -1 || ('imagepicker' == scope.row.tarQType && scope.row.multiSelect != true)" size="small">
              <el-option v-for="item in getQuestionByName(scope.row.tarQName).choices" :value="item.value" :label="item.text" :key="item.value"></el-option>
            </el-select>
            <el-select v-model="scope.row.relationVal" v-else-if="'checkbox' == scope.row.tarQType || ('imagepicker' == scope.row.tarQType && scope.row.multiSelect == true)" multiple size="small">
              <el-option v-for="item in getQuestionByName(scope.row.tarQName).choices" :value="item.value" :label="item.text" :key="item.value"></el-option>
            </el-select>
            <el-switch v-model="scope.row.relationVal" v-else-if="'boolean' == scope.row.tarQType"></el-switch>
            <el-input v-model="scope.row.relationVal" v-else  size="small"/>
          </div>
          <el-input v-model="scope.row.relationVal" v-else  size="small" :disabled="true"/>
        </template>
      </el-table-column>
      <el-table-column :label="$t('editor.etab25')" width="110">
        <template slot-scope="scope">
          <el-select v-model="scope.row.connectSymbol" size="small" :disabled="scope.$index === 0">
            <el-option v-for="item in connectSymbolList" :value="item.value" :label="item.label" :key="item.value"></el-option>
          </el-select>
        </template>
      </el-table-column>
      <el-table-column :label="$t('editor.etab08')" width="90">
        <template slot-scope="scope">
          <el-button circle size="mini" icon="el-icon-plus" @click="handleAdd(relations, scope.$index)"></el-button>
          <el-button circle size="mini" icon="el-icon-minus" @click="handleDelete(relations, scope.$index)"></el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>
<script>
export default {
  props: ['question'],
  data () {
    return {
      connectSymbolList: [ // 与前条件关系列表
        {
          value: 'and',
          label: this.$t('editor.etab26')
        },
        {
          value: 'or',
          label: this.$t('editor.etab27')
        }
      ],
      questionOptions: this.$store.getters.queryQuestionAndBuild(this.question), // 所有的问题选项
      conditionList: [// 条件列表
        {
          value: 'empty',
          label: this.$t('question.condEmpty')
        },
        {
          value: 'notempty',
          label: this.$t('question.condNotEmpty')
        },
        {
          value: '=',
          label: this.$t('question.condEqual')
        },
        {
          value: '<>',
          label: this.$t('question.condNotEqual')
        },
        {
          value: 'contains',
          label: this.$t('question.condContains')
        },
        {
          value: 'notcontains',
          label: this.$t('question.condNotContains')
        },
        // TODO 添加anyof、allof
        // {
        //   value: "anyof",
        //   label: "any of"
        // },
        // {
        //   value: "allof",
        //   label: "all of"
        // },
        {
          value: '>',
          label: this.$t('question.condGreater')
        },
        {
          value: '<',
          label: this.$t('question.condSmaller')
        },
        {
          value: '>=',
          label: this.$t('question.condGELE')
        },
        {
          value: '<=',
          label: this.$t('question.condSMLE')
        }
      ],
      showTable: false
    }
  },
  computed: {
    relations: {
      get () {
        let resRelations = []
        const qRelations = this.question.relations
        if (Array.isArray(qRelations)) {
          resRelations = qRelations
          if (qRelations.length > 0) {
            this.showTable = true
          }
        }
        return resRelations
      },
      set (value) {
        this.question.relations = value
        if (value.length > 0) {
          this.showTable = true
        } else {
          this.showTable = false
        }
      }
    }
  },
  methods: {
    handleAddGlobal () {
      const resRelations = this.relations
      resRelations.push({
        connectSymbol: '',
        tarQName: '',
        tarQType: '',
        condition: '',
        relationVal: ''
      })
      this.relations = resRelations
    },
    handleAdd (relations, idx) {
      const resRelations = this.relations
      resRelations.splice(idx + 1, 0, {
        connectSymbol: '',
        tarQName: '',
        tarQType: '',
        condition: '',
        relationVal: ''
      })
      this.relations = resRelations
    },
    handleDelete (relations, idx) {
      const resRelations = this.relations
      resRelations.splice(idx, 1)
      this.relations = resRelations
    },
    getQuestionByName (name) {
      let q = {}
      this.questionOptions.forEach(item => {
        if (item.name == name) {
          q = item
        }
      })
      return q
    },
    handleChangeTarQ (question) {
      _.merge(question, {
        tarQType: this.getQuestionByName(question.tarQName).type, // 设置类型
        condition: '', // 置空
        relationVal: '' // 置空
      })
      if (this.getQuestionByName(question.tarQName).type == 'imagepicker') {
        _.merge(question, {
          multiSelect: this.getQuestionByName(question.tarQName).multiSelect
        })
      }
    },
    handleChangeCondition (question) {
      let val = question.relationVal
      // 布尔类型时，初始化值为true
      if (question.tarQType == 'boolean' && !String(question.relationVal)) {
        val = true
      }
      // 条件改变为empty和notempty时，置空值
      if (['empty', 'notempty'].indexOf(question.condition) > -1) {
        val = ''
      }
      _.merge(question, {
        relationVal: val // 初始化
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.relation-wrapper{
  .global-box{
    .el-button--success {
      background: #48A736;
      border-radius: 2px;
      min-width: 80px;
    }
  }
}
</style>
