<template>
  <div>
    <el-form-item label-width="0">
      <el-divider class="custom-divider-margin-top">弹框设置</el-divider>
    </el-form-item>

    <el-form-item :label="i18nt('表单编码')">
      <el-input
        class="search-input"
        max="200"
        v-model="optionModel.formCode"
        @clear="
        optionModel.formVersion=null;
        optionModel.formName=null;
        $forceUpdate();
      "
        v-el-readonly
        clearable
      >
        <i slot="suffix" class="el-input__icon el-icon-search" @click="showFormTemplateDialog = true"></i>
      </el-input>
    </el-form-item>
    <el-form-item :label="i18nt('表单名称')">
      {{ optionModel.formName }}
    </el-form-item>
    <el-form-item :label="i18nt('单据展示key')">
      <el-input
        class="search-input"
        max="200"
        v-model="optionModel.showFormField"
        clearable
      ></el-input>
    </el-form-item>
    <formTemplateDialog v-if="showFormTemplateDialog" :visiable.sync="showFormTemplateDialog"
                        @confirm="confirmFormTemplate" multi="false"/>
  </div>
</template>

<script>
import i18n from "../../../../../../components/xform/utils/i18n"
import formTemplateDialog from '../../../../../../views/user/form/form_template/dialog'
import eventMixin from "../../../../../../components/xform/form-designer/setting-panel/property-editor/event-handler/eventMixin"

export default {
  name: "vabSearchField-editor",
  mixins: [i18n, eventMixin],
  props: {
    designer: Object,
    selectedWidget: Object,
    optionModel: Object,
  },
  components: {
    formTemplateDialog
  },
  data() {
    return {
      showFormTemplateDialog: false,
      showFormFieldDialog: false,
      showVabsearchConfigDialog: false,
      eventParams: [],
    }
  },
  watch: {
    'optionModel.formCode': function () {
      this.optionModel.showFormField = null;
    }
  },
  methods: {
    confirmFormTemplate(rows) {
      if (rows.length) {
        let row = rows[0];
        /*this.optionModel.formCode = row.formCode;
        this.optionModel.formVersion = row.formVersion;
        this.optionModel.formName = row.formName;*/
        this.$set(this.optionModel, "formCode", row.formCode);
        this.$set(this.optionModel, "formVersion", row.formVersion);
        this.$set(this.optionModel, "formName", row.formName);
      }
    },
    confirmFormField(rows) {
      if (rows.length) {
        let row = rows[0];
        this.optionModel.showFormField = row.fieldName;
      }
    },
    openFormFieldDialog() {
      if (!this.optionModel.formCode) {
        return
      }
      this.showFormFieldDialog = true;
    },
    changeDialogModel() {
      this.optionModel.formCode = null;
      this.optionModel.formVersion = null;
    }
  }
}
</script>

<style scoped>

</style>
