<template>
  <div class="flex-start tableCellFormCheck-com">
    <!-- <div :class="{ require: isRequire }" style="align-self:end" /> -->
    <el-form ref="ruleForm" :model="scope.row" size="small" :rules="rules" label-width="15px">
      <el-form-item :prop="bindKey" label=" ">
        <el-select
          v-model="scope.row[bindKey]"
          size="small"
          v-bind="component"
          @change="change"
          v-on="handler"
        >
          <el-option
            v-for="(option,index) in scope.row[optionsKey]"
            :key="index"
            :value-key="component.valueKey || 'id'"
            v-bind="option"
          />
        </el-select>

      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  name: 'StorageSelect',
  components: {},
  props: {
    // 行对像
    scope: {
      type: Object,
      default: null
    },
    // 需要与列的key值对应
    bindKey: {
      type: String,
      default: ''
    },
    optionsKey: {
      type: String,
      default: ''
    },
    // 控制 * 是否显示
    isRequire: {
      type: Boolean,
      default: false
    },
    // 校验
    formRules: {
      type: Array,
      default: function() {
        return []
      }
    },
    // 事件对象
    handler: {
      type: Object,
      default: null
    },

    component: {
      type: Object,
      default: null
    }
  },
  data() {
    return {
      rules: {},
      selectOptions: []
    }
  },
  watch: {

  },
  created() {

  },
  mounted() {
    this.$set(this.rules, this.bindKey, this.formRules)
    this.validation(this.scope.row[this.bindKey])
  },
  methods: {
    change(val) {
      this.$set(this.scope.row, this.bindKey, val)
      this.validation(val)
    },
    validation(val) {
      this.$refs['ruleForm'].validate().then(res => {
        this.$emit('changeForm', { val: val, row: this.scope.row, index: this.scope.$index, key: this.bindKey, effectiveState: res })
      }).catch(e => {
        this.$emit('changeForm', { val: val, row: this.scope.row, index: this.scope.$index, key: this.bindKey, effectiveState: e })
      })
    }
  }
}
</script>

<style lang="scss">
  .tableCellFormCheck-com{
    height: 66px;
    width: 100%;
    .require:before {
      content: "*";
      color: #f56c6c;
      margin-right: 4px;
    }
    .el-form-item__error{
      margin: 2px auto
    }
  }
</style>