<template>
  <div>
    <Modal v-model="opened" scrollable :mask-closable="layout.maskClosable" :draggable="layout.draggable" :sticky="true" :reset-drag-position="true" width="800">
      <div slot="header">
        <span class="title">{{ $t('Front_Label_Column_Setting') }}</span>
        <span class="description">{{ $t('Front_Label_Column_Setting_Desc') }}</span>
      </div>
      <div class="ivu-ml-8 ivu-mr-8">
        <Form ref="form" :model="data" label-position="top" label-colon="：" class="ivu-mt" :rules="rules" @submit.native.prevent>
          <Row :gutter="24" type="flex">
            <Col v-bind="grid8">
              <FormItem label="名称" key="name" prop="name">
                <Input type="text" v-model="data.name" maxlength="200" />
              </FormItem>
            </Col>
            <Col v-bind="grid8" v-if="data.dataView && !data.dataView.isVirtual">
              <FormItem label="虚拟字段" key="isVirtual" prop="isVirtual">
                <Switch :value="!!data.isVirtual" @input="isVirtualChange" />
              </FormItem>
            </Col>
            <Col
              v-bind="grid8"
              v-if="!data.isVirtual && (data.controlType != 'Table' || (data.controlType == 'Table' && data.tableStoreType == 'Inner')) && data.controlType != 'List'"
            >
              <FormItem label="字段代码" key="code" prop="code">
                <Input type="text" readonly v-model="data.code" @on-focus="openSelect()">
                  <Button slot="prepend" custom-icon="fa fa-search" @click="openSelect()"></Button>
                </Input>
              </FormItem>
            </Col>
            <Col v-bind="grid8" v-if="data.isVirtual || (data.controlType == 'Table' && data.tableStoreType == 'Outer')">
              <FormItem label="字段代码" key="code" prop="code">
                <Input type="text" v-model="data.code" maxlength="200" />
              </FormItem>
            </Col>
            <Col v-bind="grid8" v-if="data.isVirtual == true">
              <FormItem label="字段类型" key="dataType" prop="dataType">
                <Select v-model="data.dataType" :transfer="true">
                  <Option v-for="item in getEnumList('DataType')" :key="item.id" :value="item.id">{{ item.name }}</Option>
                </Select>
              </FormItem>
            </Col>
            <Col v-bind="grid8" v-if="data.isVirtual != true">
              <FormItem label="字段类型" key="dataType" prop="dataType">
                {{ data.dataType }}
              </FormItem>
            </Col>
            <Col v-bind="grid8">
              <FormItem label="控件类型" key="controlType" prop="controlType">
                <Select v-model="data.controlType" :transfer="true" @on-change="controlTypeChange">
                  <Option v-for="item in getEnumList('ControlType')" :key="item.id" :value="item.id">{{ item.name }}</Option>
                </Select>
              </FormItem>
            </Col>
            <Col v-bind="grid8" v-if="data.controlType == 'Table'">
              <FormItem label="数据存储方式" key="tableStoreType" prop="tableStoreType">
                <RadioGroup v-model="data.tableStoreType" @on-change="tableStoreTypeChange">
                  <Radio label="Outer">外部关联表</Radio>
                  <Radio label="Inner">表内存储</Radio>
                </RadioGroup>
              </FormItem>
            </Col>
            <Col
              v-bind="grid8"
              v-if="
                data.controlType == 'Select' ||
                data.controlType == 'SelectWithOther' ||
                data.controlType == 'ComboSelect' ||
                data.controlType == 'MultiSelect' ||
                data.controlType == 'Radio' ||
                data.controlType == 'CheckGroup'
              "
            >
              <FormItem label="固定选项" key="isStaticItem" prop="isStaticItem">
                <Switch
                  :value="!!data.isStaticItem"
                  @input="
                    $event => {
                      data.isStaticItem = $event;
                      $forceUpdate();
                    }
                  "
                />
              </FormItem>
            </Col>
            <Col v-bind="grid8" v-if="data.controlType == 'Select' || data.controlType == 'SelectWithOther' || data.controlType == 'ComboSelect'">
              <FormItem label="默认第一项" key="isDefaultFirst" prop="isDefaultFirst">
                <Switch
                  :value="!!data.isDefaultFirst"
                  @input="
                    $event => {
                      data.isDefaultFirst = $event;
                      $forceUpdate();
                    }
                  "
                />
              </FormItem>
            </Col>
            <Col
              v-bind="grid24"
              v-if="
                data.isStaticItem &&
                (data.controlType == 'Select' ||
                  data.controlType == 'SelectWithOther' ||
                  data.controlType == 'ComboSelect' ||
                  data.controlType == 'MultiSelect' ||
                  data.controlType == 'Radio' ||
                  data.controlType == 'CheckGroup')
              "
            >
              <FormItem label="选项内容（每一行为一项，key/value用冒号分隔，没有冒号表示key/value一致）" key="itemData" prop="itemData">
                <Input type="textarea" :rows="5" v-model="data.itemData" />
              </FormItem>
            </Col>
            <Col
              v-bind="grid8"
              v-if="needDataSource && data.controlType != 'DialogSelect' && data.controlType != 'MultiDialogSelect' && data.controlType != 'Table' && data.controlType != 'List'"
            >
              <FormItem label="数据源" key="source" prop="source">
                <dialog-select
                  ref="select"
                  v-model="data.source"
                  source="EntitySelect"
                  source-data-code="name"
                  source-display-code="name"
                  @on-change="sourceChange"
                ></dialog-select>
              </FormItem>
            </Col>
            <Col v-bind="grid8" v-if="data.controlType == 'DialogSelect' || data.controlType == 'MultiDialogSelect' || data.controlType == 'Table' || data.controlType == 'List'">
              <FormItem label="视图" key="dataViewSource" prop="dataViewSource">
                <dialog-select
                  ref="dataViewSource"
                  v-model="data.source"
                  source="DataViewSelect"
                  source-data-code="code"
                  source-display-code="code"
                  :param="{ viewType: 'TableView' }"
                  @on-change="sourceChange"
                ></dialog-select>
              </FormItem>
            </Col>
            <Col
              v-bind="grid8"
              v-if="data.source && needDataSource && (data.controlType != 'Table' || (data.controlType == 'Table' && data.tableStoreType == 'Outer')) && data.controlType != 'List'"
            >
              <FormItem label="数据字段" prop="sourceDataCode">
                <Input type="text" :readonly="true" v-model="data.sourceDataCode" @on-focus="openColumnSelect(data, 'sourceDataCode')">
                  <Button slot="prepend" custom-icon="fa fa-search" @click="openColumnSelect(data, 'sourceDataCode')"></Button>
                </Input>
              </FormItem>
            </Col>
            <Col v-bind="grid8" v-if="data.source && needDataSource && data.controlType != 'Table' && data.controlType != 'List'">
              <FormItem label="显示字段" key="sourceDisplayCode" prop="sourceDisplayCode">
                <Input type="text" :readonly="true" v-model="data.sourceDisplayCode" @on-focus="openColumnSelect(data, 'sourceDisplayCode')">
                  <Button slot="prepend" custom-icon="fa fa-search" @click="openColumnSelect(data, 'sourceDisplayCode')"></Button>
                </Input>
              </FormItem>
            </Col>
            <Col v-bind="grid16" v-if="data.source && needDataSource && data.controlType != 'Table'">
              <FormItem label="参数" key="param" prop="param">
                <Input type="text" @click.native="paramOpen" :readonly="true" v-model="data.param" maxlength="200" />
              </FormItem>
            </Col>
            <Col v-bind="grid8" v-if="data.controlType == 'Hyperlink'">
              <FormItem label="链接地址" key="hyperlink" prop="hyperlink">
                <Input type="text" v-model="data.hyperlink" maxlength="200" />
              </FormItem>
            </Col>
            <Col v-bind="grid8" v-if="data.controlType == 'Hyperlink'">
              <FormItem label="打开新页面" key="isNewWindow" prop="isNewWindow">
                <Switch
                  :value="!!data.isNewWindow"
                  @input="
                    $event => {
                      data.isNewWindow = $event;
                      $forceUpdate();
                    }
                  "
                />
              </FormItem>
            </Col>
            <Col v-bind="grid8">
              <FormItem label="是否显示" key="isShow" prop="isShow">
                <Switch
                  :value="!!data.isShow"
                  v-if="showCheck(data.showJson)"
                  @input="
                    $event => {
                      data.isShow = $event;
                      $forceUpdate();
                    }
                  "
                  @on-change="checkChange('showJson', 'isShow')"
                />
                <Button style="margin-left: 8px" @click="$refs.conditionEdit.open(data, 'showJson', 'isShow', data.dataView.model)" type="primary" size="small" icon="ios-settings">
                  {{ $t('Front_Btn_Condition') }}
                </Button>
              </FormItem>
            </Col>
            <Col v-bind="grid8">
              <FormItem label="是否只读" key="isReadonly" prop="isReadonly">
                <Switch
                  :value="!!data.isReadonly"
                  v-if="showCheck(data.readonlyJson)"
                  @input="
                    $event => {
                      data.isReadonly = $event;
                      $forceUpdate();
                    }
                  "
                  @on-change="checkChange('readonlyJson', 'isReadonly')"
                />
                <Button
                  style="margin-left: 8px"
                  @click="$refs.conditionEdit.open(data, 'readonlyJson', 'isReadonly', data.dataView.model)"
                  type="primary"
                  size="small"
                  icon="ios-settings"
                >
                  {{ $t('Front_Btn_Condition') }}
                </Button>
              </FormItem>
            </Col>
            <Col v-bind="grid8" v-if="viewType == 'FormView'">
              <FormItem label="栏目宽度" key="columnWidth" prop="columnWidth">
                <Select v-model="data.columnWidth" clearable :transfer="true">
                  <Option v-for="item in getEnumList('ColumnWidth')" :key="item.id" :value="item.id">{{ item.name }}</Option>
                </Select>
              </FormItem>
            </Col>
            <Col v-bind="grid8">
              <FormItem label="控件宽度" key="controlWidth" prop="controlWidth">
                <Input type="number" style="width: 100px" number v-model="data.controlWidth" />
              </FormItem>
            </Col>
            <Col v-bind="grid8" v-if="data.controlType == 'TextArea' || data.controlType == 'RichEditor' || data.controlType == 'Image'">
              <FormItem label="控件高度" key="controlHeight" prop="controlHeight">
                <Input type="number" style="width: 100px" number v-model="data.controlHeight" />
              </FormItem>
            </Col>
            <Col v-bind="grid8">
              <FormItem label="显示格式" key="displayFormat" prop="displayFormat">
                <Select v-model="data.displayFormat" clearable :transfer="true">
                  <Option v-for="item in getDisplayFormats()" :key="item.id" :value="item.code">{{ item.name }}</Option>
                </Select>
              </FormItem>
            </Col>
            <Col v-bind="grid8">
              <FormItem label="是否必填" key="isRequired" prop="isRequired">
                <Switch
                  :value="!!data.isRequired"
                  v-if="showCheck(data.requiredJson)"
                  @input="
                    $event => {
                      data.isRequired = $event;
                      $forceUpdate();
                    }
                  "
                  @on-change="checkChange('requiredJson', 'isRequired')"
                />
                <Button
                  style="margin-left: 8px"
                  @click="$refs.conditionEdit.open(data, 'requiredJson', 'isRequired', data.dataView.model)"
                  type="primary"
                  size="small"
                  icon="ios-settings"
                >
                  {{ $t('Front_Btn_Condition') }}
                </Button>
              </FormItem>
            </Col>
            <Col v-bind="grid8">
              <FormItem label="禁用排序" key="sortDisable" prop="sortDisable">
                <Switch
                  :model-value="!!data.sortDisable"
                  @update:model-value="
                    $event => {
                      data.sortDisable = $event;
                      //$forceUpdate();
                    }
                  "
                />
              </FormItem>
            </Col>
            <Col v-bind="grid8">
              <FormItem label="默认值" key="defaultValue" prop="defaultValue">
                <Input type="text" v-model="data.defaultValue" maxlength="200" />
              </FormItem>
            </Col>
            <Col v-bind="grid8">
              <FormItem label="描述" key="description" prop="description">
                <Input type="text" v-model="data.description" maxlength="200" />
              </FormItem>
            </Col>
            <Col v-bind="grid8" v-if="data.controlType == 'TextInput' || data.controlType == 'TextArea'">
              <FormItem label="最大字符数量" key="maxLength" prop="maxLength">
                <Input type="number" style="width: 100px" number v-model="data.maxLength" />
              </FormItem>
            </Col>
            <Col v-bind="grid8" v-if="data.controlType == 'Attachment' || data.controlType == 'Image'">
              <FormItem label="最大文件数量" key="maxLength" prop="maxLength">
                <Input type="number" style="width: 100px" number v-model="data.maxLength" />
              </FormItem>
            </Col>
            <Col v-bind="grid8" v-if="data.controlType == 'NumberInput' || data.controlType == 'Slider'">
              <FormItem
                label="
                            输入范围"
              >
                <Input type="number" style="width: 60px" number v-model="data.minValue" />
                -
                <Input type="number" style="width: 60px" number v-model="data.maxValue" />
              </FormItem>
            </Col>
            <Col v-bind="grid8">
              <FormItem
                label="
                            显示保留小数位"
                key="digit"
                prop="digit"
              >
                <Input type="number" style="width: 100px" number v-model="data.digit" />
              </FormItem>
            </Col>
            <Col v-bind="grid8">
              <FormItem label="固定保留小数位" key="fixedDigit" prop="fixedDigit">
                <Switch
                  :value="!!data.fixedDigit"
                  @input="
                    $event => {
                      data.fixedDigit = $event;
                      $forceUpdate();
                    }
                  "
                />
              </FormItem>
            </Col>
            <Col v-bind="grid8" v-if="viewType == 'FormView'">
              <FormItem label="强制换行" key="newLine" prop="newLine">
                <Switch
                  :value="!!data.newLine"
                  @input="
                    $event => {
                      data.newLine = $event;
                      $forceUpdate();
                    }
                  "
                />
              </FormItem>
            </Col>
            <Col v-bind="grid8" v-if="viewType == 'TableView'">
              <FormItem label="父单元格代码" key="parentCode" prop="parentCode">
                <Input type="text" v-model="data.parentCode" maxlength="200" />
              </FormItem>
            </Col>
            <Col v-bind="grid8" v-if="viewType == 'TableView'">
              <FormItem label="合并单元格" key="mergeSame" prop="mergeSame">
                <Switch
                  :value="!!data.mergeSame"
                  @input="
                    $event => {
                      data.mergeSame = $event;
                      $forceUpdate();
                    }
                  "
                />
              </FormItem>
            </Col>
            <Col v-bind="grid8" v-if="data.controlType == 'TextInput'">
              <FormItem label="验证表达式" key="pattern" prop="pattern">
                <Input type="text" v-model="data.pattern" maxlength="100" />
              </FormItem>
            </Col>
            <Col v-bind="grid8" v-if="data.controlType == 'SelectWithOther'">
              <FormItem label="其他文本" key="pattern" prop="pattern">
                <Input type="text" v-model="data.pattern" maxlength="100" />
              </FormItem>
            </Col>
            <Col v-bind="grid8" v-if="data.controlType == 'Attachment'">
              <FormItem label="接受的文件类型" key="pattern" prop="pattern">
                <Input type="text" v-model="data.pattern" maxlength="100" />
              </FormItem>
            </Col>
            <Col v-bind="grid8" v-if="viewType == 'FormView'">
              <FormItem label="选项卡序号" key="tabIndex" prop="tabIndex">
                <Input type="number" style="width: 100px" number v-model="data.tabIndex" />
              </FormItem>
            </Col>
            <Col v-bind="grid24">
              <FormItem label="计算表达式" key="calculate" prop="calculate">
                <Input type="text" v-model="data.calculate" maxlength="500" />
              </FormItem>
            </Col>
          </Row>
        </Form>
      </div>
      <div slot="footer">
        <Button type="primary" custom-icon="fa fa-check" @click="finish">{{ $t('Front_Btn_OK') }}</Button>
        <Button type="default" custom-icon="fa fa-times" @click="close">{{ $t('Front_Btn_Close') }}</Button>
      </div>
    </Modal>
    <Modal v-model="paramOpened" scrollable :mask-closable="layout.maskClosable" :draggable="layout.draggable" :sticky="true" :reset-drag-position="true" width="600">
      <div slot="header">
        <slot name="header">
          <span class="title">参数</span>
          <span class="description">Param</span>
        </slot>
      </div>
      <div class="i-table-no-border">
        <Table :columns="parpamColumns" :data="params" stripe size="small" no-data-text="暂无数据...">
          <template slot-scope="{ index }" slot="command">
            <Button size="small" :title="$t('Front_Btn_Edit')" type="primary" ghost custom-icon="fa fa-edit" @click="paramEdit(params[index], index)"></Button>
            <Button size="small" :title="$t('Front_Btn_Up')" type="primary" ghost custom-icon="fa fa-chevron-up" @click="upParam(params[index], index)"></Button>
            <Button size="small" :title="$t('Front_Btn_Down')" type="primary" ghost custom-icon="fa fa-chevron-down" @click="downParam(params[index], index)"></Button>
            <Button size="small" :title="$t('Front_Btn_Remove')" type="primary" ghost custom-icon="fa fa-times" @click="paramRemove(params[index], index)"></Button>
          </template>
        </Table>
      </div>
      <div slot="footer">
        <Button type="primary" ghost custom-icon="fa fa-plus" @click="paramEdit()">{{ $t('Front_Btn_Add') }}</Button>
        <Button type="primary" custom-icon="fa fa-check" @click="paramSave">{{ $t('Front_Btn_OK') }}</Button>
      </div>
    </Modal>
    <Modal v-model="paramItemOpened" scrollable :mask-closable="layout.maskClosable" :draggable="layout.draggable" :sticky="true" :reset-drag-position="true" width="800">
      <div slot="header">
        <span class="title">参数设置</span>
        <span class="description">Param Setting</span>
      </div>
      <div class="ivu-ml-8 ivu-mr-8">
        <Form ref="paramItemForm" :rules="paramItemFormRules" :model="paramData" label-position="top" label-colon="：" class="ivu-mt" @submit.native.prevent>
          <Row :gutter="24" type="flex">
            <Col v-bind="grid8">
              <FormItem label="字段" key="code" prop="code">
                <Input type="text" v-model="paramData.code">
                  <Button slot="prepend" custom-icon="fa fa-search" @click="openColumnSelect(paramData, 'code')"></Button>
                </Input>
              </FormItem>
            </Col>
            <Col v-bind="grid8">
              <FormItem label="字段类型" key="keyType" prop="keyType">
                <RadioGroup v-model="paramData.keyType" @on-change="keyTypeChange">
                  <Radio label="常量"></Radio>
                  <Radio label="变量"></Radio>
                </RadioGroup>
              </FormItem>
            </Col>
            <Col v-bind="grid8" v-if="paramData.keyType == '常量'">
              <FormItem label="值" key="val" prop="val">
                <Input type="text" v-model="paramData.val" />
              </FormItem>
            </Col>
            <Col v-bind="grid8" v-if="paramData.keyType == '变量'">
              <FormItem label="值" key="val2" prop="val">
                <Input type="text" v-model="paramData.val">
                  <Button slot="prepend" custom-icon="fa fa-search" @click="openValueSelect"></Button>
                </Input>
              </FormItem>
            </Col>
          </Row>
        </Form>
      </div>
      <div slot="footer">
        <Button type="primary" custom-icon="fa fa-check" @click="paramItemSave">{{ $t('Front_Btn_OK') }}</Button>
        <Button type="default" custom-icon="fa fa-times" @click="paramItemClose">{{ $t('Front_Btn_Close') }}</Button>
      </div>
    </Modal>
    <column-check ref="columnCheck" />
    <condition-edit ref="conditionEdit" />
  </div>
</template>
<script>
  import mixinPage from '../../mixins/page';
  import modelApi from '../../api/model';
  import columnCheck from './column-check';
  import conditionEdit from './condition-edit';

  export default {
    mixins: [mixinPage],
    components: { columnCheck, conditionEdit },
    data() {
      return {
        data: {},
        index: null,
        columns: [],
        opened: false,
        callback: null,
        displayFormats: [],
        parpamColumns: [
          { title: '参数', resizable: true, align: 'center', key: 'code' },
          { title: '值', align: 'center', resizable: true, key: 'val' },
          { slot: 'command', title: ' ', align: 'center', resizable: true, fixed: 'right' }
        ],
        params: [],
        paramData: {},
        rules: {
          code: {
            type: 'string',
            required: true,
            message: '请输入字段',
            trigger: 'blur,change'
          },
          // name: {
          //     type: 'string',
          //     required: true,
          //     message: '请输入名称',
          //     trigger: 'blur,change'
          // },
          controlType: {
            type: 'string',
            required: true,
            message: '请输入控件类型',
            trigger: 'blur,change'
          },
          columnWidth: {
            type: 'string',
            required: true,
            message: '请输入栏目宽度',
            trigger: 'blur,change'
          }
        },
        paramItemFormRules: {
          code: {
            type: 'string',
            required: true,
            message: '请输入字段名称',
            trigger: 'blur,change'
          },
          keyType: {
            type: 'string',
            required: true,
            message: '请选择字段类型',
            trigger: 'blur,change'
          },
          val: {
            type: 'string',
            required: true,
            message: '请输入值',
            trigger: 'blur,change'
          }
        },
        paramOpened: false,
        paramItemOpened: false,
        sourceBefore: null
      };
    },
    async created() {
      // 获取所有显示格式
      let res = await modelApi.query('DisplayFormat', {});
      this.displayFormats = res.data;
    },
    props: {
      // 视图类型
      viewType: {
        type: String
      }
    },
    computed: {
      // 选择框，或复选框组，且非枚举类型，需要输入数据源
      needDataSource() {
        if (this.data) {
          return (
            ((this.data.controlType === 'Select' ||
              this.data.controlType === 'MultiSelect' ||
              this.data.controlType === 'TreeSelect' ||
              this.data.controlType === 'MultiTreeSelect' ||
              this.data.controlType === 'SelectWithOther' ||
              this.data.controlType === 'ComboSelect' ||
              this.data.controlType === 'Radio' ||
              this.data.controlType === 'CheckGroup') &&
              !this.data.isStaticItem &&
              this.data.dataType &&
              this.data.dataType.indexOf('Enum:') !== 0) ||
            this.data.controlType === 'DialogSelect' ||
            this.data.controlType === 'MultiDialogSelect' ||
            this.data.controlType === 'Table' ||
            this.data.controlType === 'List'
          );
        } else {
          return false;
        }
      }
    },
    methods: {
      // 打开
      open(row, index, columns, callback) {
        this.data = this.copy(row);

        this.callback = callback;
        this.opened = true;
        this.$refs.form.resetFields();
        this.controlTypeBefore = this.data.controlType;
        this.index = index;
        this.columns = columns;
      },
      // 关闭
      close() {
        this.opened = false;
      },
      // 确认
      async finish() {
        let isOK = await this.$refs.form.validate();

        if (!isOK) {
          this.error('Front_Msg_Form_Validate_Fail');
        } else {
          if (
            this.columns.some((item, index) => {
              return item.code == this.data.code && index != this.index;
            })
          ) {
            this.error('字段有重复！');
            return;
          }

          this.callback(this.copy(this.data));
          this.opened = false;
        }
      },
      // 过滤显示格式
      getDisplayFormats() {
        return this.displayFormats.filter(item => {
          return item.dataType === this.data.dataType;
        });
      },
      // 控件类型变更
      controlTypeChange() {
        if (this.data.sourceModel) {
          if (this.data.controlType == 'DialogSelect' || this.data.controlType == 'MultiDialogSelect') {
            this.data.source = this.data.sourceModel + 'Select';
          } else {
            this.data.source = this.data.sourceModel;
          }
        }

        setTimeout(() => {
          this.$forceUpdate();
        });
      },
      // 数据源变更
      sourceChange(row) {
        if (this.sourceBefore != this.data.source) {
          this.data.sourceDisplayCode = null;
          this.data.sourceDataCode = null;
          this.data.sourceModel = null;
          this.data.param = null;
        }

        if (row) {
          this.data.sourceModel = row.model;
        }

        this.sourceBefore = this.data.source;
      },
      // 打开字段选择界面
      openColumnSelect(data, code) {
        if (this.data.source == null) {
          return;
        }

        let model;
        if (this.data.controlType == 'DialogSelect' || this.data.controlType == 'MultiDialogSelect' || this.data.controlType == 'Table' || this.data.controlType == 'List') {
          model = this.$refs.dataViewSource.selectedData.model;
        } else {
          model = this.data.source;
        }

        this.$refs.columnCheck.open(model, checked => {
          data[code] = checked.code;
          this.$forceUpdate();
        });
      },
      // 打开变量字段选择界面
      openValueSelect() {
        if (this.data.dataView.model != null) {
          this.$refs.columnCheck.open(this.data.dataView.model, checked => {
            this.paramData.val = checked.code;
            this.$forceUpdate();
          });
        }
      },
      // 打开参数弹框
      paramOpen() {
        this.params = [];
        this.paramOpened = true;
        if (this.data.param != null && this.data.param != '') {
          let obj = JSON.parse(this.data.param);
          for (let key in obj) {
            let type = '变量';
            if (obj[key].indexOf('[') == 0 && obj[key].indexOf(']') + 1 == obj[key].length) {
              type = '常量';
            }
            this.params.push({
              code: key,
              val: obj[key],
              type: type
            });
          }
        }
      },
      // 参数框确认
      async paramItemSave() {
        let isOK = await this.$refs.paramItemForm.validate();

        if (!isOK) {
          this.error('Front_Msg_Form_Validate_Fail');
          return;
        }
        let val = this.paramData.val;

        if (this.paramData.keyType == '常量') {
          let len = this.paramData.val.length;
          val = this.paramData.val.padStart(len + 1, '[').padEnd(len + 2, ']');
        }

        if (this.paramData.source) {
          this.paramData.source.code = this.paramData.code;
          this.paramData.source.val = val;
          this.paramData.source.type = this.paramData.keyType;
        } else {
          this.params.push({
            code: this.paramData.code,
            val: val,
            type: this.paramData.keyType
          });
        }
        this.paramItemOpened = false;
        this.$refs.paramItemForm.resetFields();
      },
      paramItemClose() {
        this.paramItemOpened = false;
        this.$refs.paramItemForm.resetFields();
      },
      keyTypeChange() {
        setTimeout(() => {
          this.paramData.val = null;
          this.$forceUpdate();
        });
      },
      // 保存参数
      paramSave() {
        let obj = {};
        this.params.forEach(item => {
          obj[item.code] = item.val;
        });

        this.data.param = this.params.length > 0 ? JSON.stringify(obj) : '';
        this.paramOpened = false;
      },
      // 编辑参数项
      paramEdit(row) {
        if (row) {
          this.paramData = {
            code: row.code,
            val: row.val.replace('[', '').replace(']', ''),
            keyType: row.type,
            source: row
          };
        } else {
          this.paramData = {
            code: '',
            val: '',
            keyType: '常量'
          };
        }
        this.paramItemOpened = true;
      },
      // 上移参数项
      upParam(row, index) {
        if (index > 0) {
          this.params.splice(index, 1);
          this.params.splice(index - 1, 0, row);
        }
      },
      // 下移参数项
      downParam(row, index) {
        if (index < this.params.length - 1) {
          this.params.splice(index, 1);
          this.params.splice(index + 1, 0, row);
        }
      },
      // 删除参数项
      paramRemove(row, index) {
        this.params.splice(index, 1);
      },
      // 打开字段选择界面
      openSelect() {
        this.$refs.columnCheck.openView(this.data.dataView, checked => {
          this.data.code = checked.code;
          this.data.name = checked.name;
          this.data.dataType = checked.dataType;

          if (checked.objColumn) {
            this.data.source =
              this.data.controlType == 'DialogSelect' || this.data.controlType == 'MultiDialogSelect' ? checked.objColumn.dataType + 'Select' : checked.objColumn.dataType;
            this.data.sourceDataCode = 'id';
            this.data.sourceModel = checked.objColumn.dataType;
            this.data.sourceDisplayCode = checked.objColumn.columns.some(column => {
              return column.code === checked.objColumn.code + '.name';
            })
              ? 'name'
              : null;
          }

          setTimeout(() => {
            this.$forceUpdate();
          });
        });
      },
      // 是否虚拟字段变化
      isVirtualChange($event) {
        this.data.isVirtual = $event;
        this.$forceUpdate();
      },
      // 表格存储方式变化
      tableStoreTypeChange() {
        if (this.data.tableStoreType == 'Outer') {
          this.data.isVirtual = true;
          this.$forceUpdate();
        }
      },
      // 是否显示选择框
      showCheck(json) {
        if (!(json || '').trim()) {
          return true;
        } else {
          let setting = JSON.parse(json);

          return setting.type == 'True' || setting.type == 'False';
        }
      },
      // 选择框变化
      checkChange(jsonKey, checkKey) {
        if (!!(this.data[jsonKey] || '').trim()) {
          let setting = JSON.parse(this.data[jsonKey]);
          if (this.data[checkKey]) {
            setting.type = 'True';
          } else {
            setting.type = 'False';
          }
          this.data[jsonKey] = JSON.stringify(setting);
        }
      }
    }
  };
</script>
