<template>
  <el-dialog title="字段选项列表" :visible.sync="myFieldOptionsDialog">
      <el-form :model="fieldOptions" :rules="fieldOptions.rules" ref="fieldOptionsForm" label-width="128px">
          <el-form-item label="选项数据来源">
            <el-radio-group v-model="fieldOptions.key" @change="fieldOptionsChangeHandler">
              <el-radio-button label="Code">从系统代码表中选择</el-radio-button>
              <el-radio-button label="Input">手工输入</el-radio-button>
              <el-radio-button label="Method">从后台方法</el-radio-button>
            </el-radio-group>
          </el-form-item>
          <el-form-item v-show="fieldOptions.key === 'Code'" prop="value">
            <el-select v-model="fieldOptions.value" placeholder="请选择">
              <el-option v-for="item in fieldOptions.codeTypes" :key="item.codeType" :label="item.codeName" :value="item.codeType"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item v-show="fieldOptions.key === 'Input'" prop="value">
            <el-input type="textarea" :rows="4" placeholder="每行文本表示一个选项，支持key=value格式。" v-model="fieldOptions.value">
            </el-input>
          </el-form-item>
          <el-form-item v-show="fieldOptions.key === 'Method'" prop="value">
            <el-input placeholder="方法返回类型必须是Mapx" v-model="fieldOptions.value">
            </el-input>
          </el-form-item>
      </el-form>
      <div slot="footer">
        <el-button @click="myFieldOptionsDialog = false">取 消</el-button>
        <el-button type="primary" :loading="confirmLoading" @click="confirmFieldOptionsClickHandler">确 定</el-button>
      </div>
    </el-dialog>
</template>

<style scoped>

</style>

<script>
import util from '@src/common/util.js'

export default {
  props: ['fieldOptions', 'fieldOptionsDialog', 'tmpField'],
  data() {
    return {
      confirmLoading: false,
      myFieldOptionsDialog: this.fieldOptionsDialog
    }
  },
  watch: {
    fieldOptionsDialog(val) {
      this.myFieldOptionsDialog = val
    },
    myFieldOptionsDialog(val) {
      this.$emit('update:fieldOptionsDialog', val)
    }
  },
  methods: {
    fieldOptionsChangeHandler() {
      this.fieldOptions.value = ''
    },
    async confirmFieldOptionsClickHandler() {
    // console.log("ttttt")
      try {
        await util.validateForm(this.$refs['fieldOptionsForm'])
      } catch (e) {
        util.showErrorMessageBox(e)
        return
      }
      if (this.fieldOptions.key === 'Input') {
        this.fieldOptions.value = this.fieldOptions.value.replace(/\n/g, '<br>')
      }
      this.tmpField.listOptions = this.fieldOptions.key + ':' + this.fieldOptions.value
      this.myFieldOptionsDialog = false
    }
  }
}
</script>
