<template>
  <div>
    <el-form-item label-width="0">
      <el-divider class="custom-divider">选择弹框配置</el-divider>
    </el-form-item>
    <el-form-item label="是否多选">
      <el-switch v-model="eventConfig.multipleChoices"
                 v-if="selectedWidget.type !== 'singerSearch' && selectedWidget.type !== 'multiSearch'"></el-switch>
      <span v-else>{{eventConfig.multipleChoices?'是':'否'}}</span>
    </el-form-item>
    <el-form-item label="弹框表单编码">
      <el-input type="text" v-model="eventConfig.formCode"></el-input>
    </el-form-item>
    <el-form-item label="弹框查询参数">
      <a href="javascript:void(0);" class="a-link link-oneLind"
         @click="editEventHandler('confirmCallback', ['dataId', 'formCode','rows'], option2)">
        <span>{{ eventConfig.dialogQueryParam }}</span>
        <i class="el-icon-edit"></i>
      </a>
    </el-form-item>
    <el-form-item label="弹框自定义参数">
      <a href="javascript:void(0);" class="a-link link-oneLind"
         @click="editEventHandler('dialogCustomParam', ['dataId', 'formCode','rows'], option3)">
        <span>{{ eventConfig.dialogCustomParam }}</span>
        <i class="el-icon-edit"></i>
      </a>
    </el-form-item>
    <template v-if="hasConfig('vabsearchFlag')">
      <el-form-item label="关联来源字段">
        <el-input type="text" v-model="eventConfig.valueSourceField"></el-input>
      </el-form-item>

      <el-form-item label="展示来源字段">
        <el-input type="text" v-model="eventConfig.labelSourceField"></el-input>
      </el-form-item>
    </template>
    <!--      <el-form-item label="多选">
          <el-switch v-model="optionModel.multiple"></el-switch>
        </el-form-item>-->
    <template v-if="!hasConfig('vabsearchFlag')">
      <el-form-item label="关联表格">
        <el-switch v-model="eventConfig.tableEnabled"></el-switch>
      </el-form-item>
      <template v-if="eventConfig.tableEnabled">
        <el-form-item label="关联表格ID">
          <el-input type="text" v-model="eventConfig.tableRef"></el-input>
        </el-form-item>
        <el-form-item label="关联表格唯一字段">
          <el-input type="text" v-model="eventConfig.tableUniqueKey"></el-input>
        </el-form-item>
      </template>
    </template>
    <el-form-item label="数据回填">
      <el-button type="primary" plain="" round="" @click="openDialog">{{
          i18nt('designer.setting.editAction')
        }}
      </el-button>
    </el-form-item>
    <el-form-item label="确认回调">
      <a href="javascript:void(0);" class="a-link link-oneLind"
         @click="editEventHandler('confirmCallback', ['dataId', 'formCode','rows'], option1)">
        <span>{{ eventConfig.confirmCallback }}</span>
        <i class="el-icon-edit"></i>
      </a>
    </el-form-item>

    <el-dialog
      custom-class="dialog-style list-dialog"
      title="数据回填"
      :visible.sync="showDialog"
      :modal="false"
      :show-close="!0"
      :close-on-click-modal="!1"
      :close-on-press-escape="!1"
      :destroy-on-close="!0"
      top="5vh"
      width="600px"
      v-dialog-drag
    >
      <div class="cont">
        <el-table
          ref="singleTable"
          width="100%"
          height="500"
          :data="tableData"
          border=""
          stripe=""
          default-expand-all
        >
          <el-table-column label="目标字段" width="150" prop="targetField">
            <template slot-scope="scope">
              <el-input v-model="scope.row.targetField"></el-input>
            </template>
          </el-table-column>
          <el-table-column label="目标数据属性名称" width="150" prop="targetField">
            <template slot-scope="scope">
              <el-input v-model="scope.row.targetFormField"></el-input>
            </template>
          </el-table-column>
          <el-table-column label="来源字段" width="150" prop="sourceField">
            <template slot-scope="scope">
              <el-input v-model="scope.row.sourceField"></el-input>
            </template>
          </el-table-column>
          <el-table-column label="操作" min-width="50" fixed="right">
            <template #header="{ row, $index }">
              <el-tooltip
                :hide-after="500"
                class="item"
                effect="dark"
                content="添加"
                placement="top"
              >
                <el-button
                  size="mini" type="" circle=""
                  icon="el-icon-plus"
                  @click="tableData.push({})"
                />
              </el-tooltip>
            </template>
            <template #default="{ row, $index }">
              <el-tooltip
                effect="dark"
                content="删除"
                placement="top"
              >
                <el-button
                  size="mini" type="" circle=""
                  icon="el-icon-delete"
                  @click="tableData.splice($index,1)"
                />
              </el-tooltip>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="dialog-footer" slot="footer">
        <span class="fl tips">注：'目标字段'与'目标数据属性名称'只需要维护一个即可。</span>
        <el-button @click="showDialog=false" class="button-sty" icon="el-icon-close">
          {{ i18nt('designer.hint.cancel') }}
        </el-button>
        <el-button type="primary" @click="confirmDialog" class="button-sty" icon="el-icon-check">
          {{ i18nt('designer.hint.confirm') }}
        </el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import i18n from "../../../../../../components/xform/utils/i18n"
import eventMixin
  from "../../../../../../components/xform/form-designer/setting-panel/property-editor/event-handler/eventMixin"
import propertyMixin from "../../../../../../components/xform/form-designer/setting-panel/property-editor/propertyMixin"

export default {
  mixins: [i18n, eventMixin, propertyMixin],
  props: {
    designer: Object,
    selectedWidget: Object,
    optionModel: Object,
  },
  inject: ['defaultClickBindEventConfig'],
  data() {
    return {
      showDialog: false,
      tableData: [],
      option1: {
        customCode: () => {
          return this.eventConfig.confirmCallback;
        },
        callback: (code) => {
          this.eventConfig.confirmCallback = code;
          this.$forceUpdate()
        }
      },
      option2: {
        customCode: () => {
          return this.eventConfig.dialogQueryParam;
        },
        callback: (code) => {
          this.eventConfig.dialogQueryParam = code;
          this.$forceUpdate()
        }
      },
      option3: {
        customCode: () => {
          return this.eventConfig.dialogCustomParam;
        },
        callback: (code) => {
          this.eventConfig.dialogCustomParam = code;
          this.$forceUpdate()
        }
      },
    }
  },
  computed: {
    eventConfig() {
      return this.optionModel.searchDialogConfig || {};
    }
  },
  created() {

  },
  methods: {
    openDialog() {
      this.tableData = this.$baseLodash.cloneDeep(this.eventConfig.tableData);
      this.showDialog = true;
    },
    confirmDialog() {
      this.eventConfig.tableData = this.$baseLodash.cloneDeep(this.tableData);
      this.showDialog = false;
    }
  }
}
</script>

<style scoped>

</style>
