<template>
  <div>
    <slot name="top" :form="this" />
    <Form ref="form" :model="data" label-position="top" label-colon="：" class="ivu-mt draggable">
      <draggable :list="columns" :animation="500" :scroll="true" group="sort" ghostClass="ghost-style">
        <template v-for="(column, index) in columns">
          <!-- <div v-if="column.newLine"
                        style="width: 100%; display: flex"></div> -->
          <div :key="index" :style="'width:' + getWidth(column) + '%; float:left;'" @mouseover="mouseover(column)" @mouseleave="mouseleave(column)">
            <div style="float: right; margin-right: 20px">
              <Button
                size="small"
                v-show="column.showButton"
                @click="edit(column, index)"
                icon="md-cog"
                type="primary"
                style="margin-right: 4px; width: 22px; height: 22px"
              ></Button>
              <Button
                size="small"
                v-show="column.showButton"
                @click="remove(column, index)"
                icon="md-close"
                type="warning"
                style="margin-right: 4px; width: 22px; height: 22px"
              ></Button>
            </div>
            <div :key="column.code" v-if="column.controlType === 'Placeholder'" style="margin-bottom: 0px"></div>
            <div :key="column.code" v-if="column.controlType === 'Title'">
              <div class="form-title" :style="{ width: column.controlWidth == null ? null : column.controlWidth + 'px' }" v-html="column.name"></div>
            </div>
            <div v-if="column.controlType === 'Table'">
              <Divider :plain="true" dashed orientation="left" size="small">
                <span class="title">{{ column.name }}</span>
              </Divider>
              <view-table :static="true" :view-code="column.source" :readonly="column.isReadonly" :pageEnable="false" :embedded="true"></view-table>
            </div>
            <div v-if="column.controlType === 'List'">
              <Divider :plain="true" dashed orientation="left" size="small">
                <span class="title">{{ column.name }}</span>
              </Divider>
              <view-table :static="true" :view-code="column.source" :readonly="true" :pageEnable="false" :embedded="true"></view-table>
            </div>
            <FormItem
              :label="column.name"
              :prop="column.code"
              :key="column.code"
              :error="column.code == null ? $t('Front_Label_Column_Not_Bind') : null"
              v-if="column.controlType !== 'Placeholder' && column.controlType !== 'Title' && column.controlType !== 'Table' && column.controlType !== 'List'"
            >
              <template v-if="column.controlType === 'Custom'"></template>
              <template v-else-if="column.controlType === 'Label'">
                <div class="label" :title="compareData == null ? showData(data, column) : showData(compareData, column)">
                  <div :class="{ error: compareData != null && parseData(data, column.code) != parseData(compareData, column.code) }" v-html="showData(data, column)"></div>
                </div>
              </template>
              <template v-if="column.controlType === 'Hyperlink'">
                <a :href="getHyperlink(data, column.hyperlink)" :target="column.isNewWindow ? '_blank' : ''">
                  <span v-html="showData(data, column)"></span>
                </a>
              </template>
              <template v-else-if="column.controlType === 'TextInput'">
                <Input
                  type="text"
                  :value="parseData(data, column.code)"
                  @input="$event => setData(data, column.code, $event)"
                  :readonly="column.isReadonly"
                  :style="{ width: column.controlWidth == null ? null : column.controlWidth + 'px' }"
                  :maxlength="column.maxLength"
                  :placeholder="column.description"
                  @on-change="onDataChange(column)"
                />
              </template>
              <template v-else-if="column.controlType === 'NumberInput'">
                <Input
                  type="number"
                  number
                  :value="parseData(data, column.code)"
                  @input="$event => setData(data, column.code, $event)"
                  :readonly="column.isReadonly"
                  :style="{ width: column.controlWidth == null ? '100px' : column.controlWidth + 'px' }"
                  :placeholder="column.description"
                  @on-change="onDataChange(column)"
                />
              </template>
              <template v-else-if="column.controlType === 'Select'">
                <Select
                  :value="parseData(data, column.code)"
                  @input="$event => setData(data, column.code, $event)"
                  :disabled="column.isReadonly"
                  clearable
                  :style="{ width: column.controlWidth == null ? null : column.controlWidth + 'px' }"
                  :placeholder="column.description"
                  :transfer="true"
                  @on-change="onDataChange(column)"
                >
                  <Option v-for="item in getDataSource(data, column)" :key="item.id" :value="item.id">{{ item.name }}</Option>
                </Select>
              </template>
              <template v-else-if="column.controlType === 'MultiSelect'">
                <Select
                  :value="parseArrayData(data, column.code)"
                  @input="$event => setArrayData(data, column.code, $event)"
                  :disabled="column.isReadonly"
                  :multiple="true"
                  clearable
                  :style="{ width: column.controlWidth == null ? null : column.controlWidth + 'px' }"
                  :placeholder="column.description"
                  :transfer="true"
                  @on-change="onDataChange(column)"
                >
                  <Option v-for="item in getDataSource(data, column)" :key="item.id" :value="item.id">{{ item.name }}</Option>
                </Select>
              </template>
              <template v-else-if="column.controlType === 'TreeSelect'">
                <TreeSelect
                  :value="parseTreeData(data, column.code)"
                  @input="$event => setData(data, column.code, $event)"
                  :data="getDataSource(data, column)"
                  :disabled="column.isReadonly"
                  :clearable="true"
                  :style="{ width: column.controlWidth == null ? null : column.controlWidth + 'px' }"
                  :placeholder="column.description"
                  :transfer="true"
                ></TreeSelect>
              </template>
              <template v-else-if="column.controlType === 'MultiTreeSelect'">
                <TreeSelect
                  :value="parseArrayData(data, column.code)"
                  @input="$event => setArrayData(data, column.code, $event)"
                  :data="getDataSource(data, column)"
                  :disabled="column.isReadonly"
                  :multiple="true"
                  :show-checkbox="true"
                  :clearable="true"
                  :style="{ width: column.controlWidth == null ? null : column.controlWidth + 'px' }"
                  :placeholder="column.description"
                  :transfer="true"
                ></TreeSelect>
              </template>
              <template v-else-if="column.controlType === 'SelectWithOther'">
                <Select
                  :value="parseDataWithOther(data, column)"
                  @input="$event => setDataWithOther(data, column.code, $event)"
                  :disabled="column.isReadonly"
                  clearable
                  :style="{ width: column.controlWidth == null ? '40%' : column.controlWidth + 'px' }"
                  :placeholder="column.description"
                  :transfer="true"
                  @on-change="onDataChange(column)"
                >
                  <Option v-for="item in getDataSource(data, column)" :key="item.id" :value="item.id">{{ item.name }}</Option>
                  <Option key="__Other" value="__Other">{{ !!(column.pattern || '').trim() ? column.pattern : $t('Front_Label_Others') }}</Option>
                </Select>
                <Input
                  type="text"
                  v-show="parseDataWithOther(data, column) == '__Other'"
                  :value="parseData(data, column.code)"
                  @input="$event => setData(data, column.code, $event)"
                  :readonly="column.isReadonly"
                  :style="{ width: column.controlWidth == null ? '40%' : column.controlWidth + 'px' }"
                  style="margin-left: 4px"
                  :maxlength="column.maxLength"
                  :placeholder="column.description"
                  @on-change="onDataChange(column)"
                />
              </template>
              <!-- <template v-else-if="column.controlType === 'AutoComplete'">
                                <AutoComplete :value="parseData(data, column.code) ? parseData(data, column.code) : ''"
                                    @input="$event => setData(data, column.code, $event)"
                                    :disabled="column.isReadonly"
                                    clearable
                                    @on-search="search => loadOption(data, column, search)"
                                    @on-clear="() => loadOption(data, column)"
                                    :style="{ width: column.controlWidth == null ? null : column.controlWidth + 'px' }"
                                    :placeholder="column.description"
                                    :transfer="true"
                                    @on-change="selected => onDataChange(column, selected)">
                                    <Option v-for="item in getDataSource(data, column)"
                                        :key="item.id"
                                        :value="item.name">{{ item.name }}</Option>
                                </AutoComplete>
                            </template> -->
              <template v-else-if="column.controlType === 'ComboSelect'">
                <Select
                  :value="parseData(data, column.code)"
                  @input="$event => setData(data, column.code, $event)"
                  :disabled="column.isReadonly"
                  clearable
                  filterable
                  :style="{ width: column.controlWidth == null ? null : column.controlWidth + 'px' }"
                  :placeholder="column.description"
                  :transfer="true"
                  @on-change="onDataChange(column)"
                >
                  <Option v-for="item in getDataSource(data, column)" :key="item.id" :value="item.id">{{ item.name }}</Option>
                </Select>
              </template>
              <template v-else-if="column.controlType === 'DialogSelect'">
                <dialog-select
                  :value="parseData(data, column.code)"
                  @input="$event => setData(data, column.code, $event)"
                  :readonly="column.isReadonly"
                  :source="column.source"
                  :source-data-code="column.sourceDataCode"
                  :source-display-code="column.sourceDisplayCode"
                  :param="getParam(data, column)"
                  :controlWidth="column.controlWidth"
                  @on-change="selected => onDataChange(column, selected)"
                ></dialog-select>
              </template>
              <template v-else-if="column.controlType === 'MultiDialogSelect'">
                <dialog-select
                  :value="parseData(data, column.code)"
                  @input="$event => setData(data, column.code, $event)"
                  :multi="true"
                  :readonly="column.isReadonly"
                  :source="column.source"
                  :source-data-code="column.sourceDataCode"
                  :source-display-code="column.sourceDisplayCode"
                  :param="getParam(data, column)"
                  :controlWidth="column.controlWidth"
                  @on-change="selected => onDataChange(column, selected)"
                ></dialog-select>
              </template>
              <template
                v-else-if="
                  column.controlType === 'Date' ||
                  column.controlType === 'DateTime' ||
                  column.controlType === 'Year' ||
                  column.controlType === 'Month' ||
                  column.controlType === 'DateRange'
                "
              >
                <DatePicker
                  :type="column.controlType.toLowerCase()"
                  :value="parseData(data, column.code)"
                  :readonly="column.isReadonly"
                  :placeholder="column.description"
                  :transfer="true"
                  :style="{ width: column.controlWidth == null ? null : column.controlWidth + 'px' }"
                  @on-change="
                    time => {
                      setData(data, column.code, time);
                      onDataChange(column);
                    }
                  "
                ></DatePicker>
              </template>
              <template v-else-if="column.controlType === 'Time'">
                <TimePicker
                  type="time"
                  :value="parseData(data, column.code)"
                  @input="$event => setData(data, column.code, $event)"
                  :readonly="column.isReadonly"
                  :placeholder="column.description"
                  :transfer="true"
                  :style="{ width: column.controlWidth == null ? null : column.controlWidth + 'px' }"
                  @on-change="onDataChange(column)"
                ></TimePicker>
              </template>
              <template v-else-if="column.controlType === 'Check'">
                <Checkbox
                  :value="!!parseData(data, column.code)"
                  @input="$event => setData(data, column.code, $event)"
                  :disabled="column.isReadonly"
                  size="large"
                  @on-change="onDataChange(column)"
                />
              </template>
              <template v-else-if="column.controlType === 'Switch'">
                <Switch
                  :value="!!parseData(data, column.code)"
                  @input="$event => setData(data, column.code, $event)"
                  :disabled="column.isReadonly"
                  @on-change="onDataChange(column)"
                />
              </template>
              <template v-else-if="column.controlType === 'Radio'">
                <RadioGroup :value="parseData(data, column.code)" @input="$event => setData(data, column.code, $event)" @on-change="onDataChange(column)">
                  <Radio v-for="item in getDataSource(data, column)" :key="item.id" :label="item.id" :disabled="column.isReadonly">
                    <span>{{ item.name }}</span>
                  </Radio>
                </RadioGroup>
              </template>
              <template v-else-if="column.controlType === 'CheckGroup'">
                <CheckboxGroup :value="parseArrayData(data, column.code)" @input="$event => setArrayData(data, column.code, $event)" @on-change="onDataChange(column)">
                  <Checkbox v-for="item in getDataSource(data, column)" :key="item.id" :label="item.id" :disabled="column.isReadonly">
                    <span>{{ item.name }}</span>
                  </Checkbox>
                </CheckboxGroup>
              </template>
              <template v-else-if="column.controlType === 'TextArea'">
                <Input
                  type="textarea"
                  :value="parseData(data, column.code)"
                  @input="$event => setData(data, column.code, $event)"
                  :readonly="column.isReadonly"
                  :style="{ width: column.controlWidth == null ? null : column.controlWidth + 'px' }"
                  :rows="column.controlHeight / 20"
                  :maxlength="column.maxLength"
                  :placeholder="column.description"
                />
              </template>
              <template v-else-if="column.controlType === 'RichEditor'">
                <rich-editor
                  :value="parseData(data, column.code)"
                  @input="$event => setData(data, column.code, $event)"
                  :readonly="column.isReadonly"
                  :height="column.controlHeight"
                  :width="column.controlWidth"
                />
              </template>
              <template v-else-if="column.controlType === 'Attachment'">
                <upload-attachment
                  :value="parseData(data, column.code)"
                  @input="$event => setData(data, column.code, $event)"
                  :readonly="column.isReadonly"
                  :maxCount="column.maxLength"
                />
              </template>
              <template v-else-if="column.controlType === 'Image'">
                <upload-image
                  :value="parseData(data, column.code)"
                  @input="$event => setData(data, column.code, $event)"
                  :readonly="column.isReadonly"
                  :maxCount="column.maxLength"
                  :height="column.controlHeight"
                  :width="column.controlWidth"
                />
              </template>
              <template v-else-if="column.controlType === 'Slider'">
                <Slider
                  v-if="!column.isReadonly"
                  :value="parseData(data, column.code)"
                  @input="$event => setData(data, column.code, $event)"
                  show-input
                  :style="{ width: column.controlWidth == null ? null : column.controlWidth + 'px' }"
                  :max="column.maxValue"
                  :min="column.minValue"
                />
                <Input
                  v-if="column.isReadonly"
                  type="number"
                  number
                  readonly
                  :value="parseData(data, column.code)"
                  :style="{ width: column.controlWidth == null ? '100px' : column.controlWidth + 'px' }"
                  :placeholder="column.description"
                />
              </template>
            </FormItem>
          </div>
        </template>
      </draggable>
    </Form>
    <slot name="bottom" :form="this" />
    <!-- <FooterToolbar>
            <Button type="primary" size="large">{{ $t('Front_Btn_Submit') }}</Button>
        </FooterToolbar>-->
  </div>
</template>
<script>
  import mixinPage from '../../mixins/page';
  import mixin from './mixin';
  import { mapActions } from 'vuex';
  import modelApi from '../../api/model';
  import customModelApi from '../../api/customModel';
  import richEditor from '../richEditor';
  import uploadAttachment from '../upload/upload-attachment';
  import uploadImage from '../upload/upload-image';
  import draggable from 'vuedraggable';
  import dateFormat from 'date-fns/format';

  export default {
    mixins: [mixin, mixinPage],
    components: { richEditor, uploadAttachment, uploadImage, draggable },
    data() {
      return {
        formView: {},
        columns: [],
        tabs: [],
        tabName: '',
        rules: {},
        data: null,
        compareData: null
      };
    },
    async created() {},
    props: {},
    computed: {},
    methods: {
      ...mapActions('admin/dataView', { loadDataView: 'load' }),
      // 获取表格宽度
      getWidth(column) {
        switch (column.columnWidth) {
          case 'Column12':
            return (100 * 24) / 24;
          case 'Column9':
            return (100 * 18) / 24;
          case 'Column8':
            return (100 * 16) / 24;
          case 'Column6':
            return (100 * 12) / 24;
          case 'Column4':
            return (100 * 8) / 24;
          case 'Column3':
            return (100 * 6) / 24;
          case 'Column2':
            return (100 * 4) / 24;
        }
      },
      // 根据选项卡序号返回列
      tabColumns(index) {
        return this.columns.filter(item => {
          return item.tabIndex === index || item.tabIndex == null;
        });
      },
      // 初始化
      init(formView, columns) {
        this.formView = formView;
        this.columns = columns;

        // 设置初始值
        this.data = this.getDefaultData();

        setTimeout(() => {
          // 初始化板块
          this.initTab();

          // 初始化静态选项
          this.initStaticItem();

          // 初始化触发规则
          this.initTrigger();

          this.onDataChange();
        });
      },
      // 初始化板块
      initTab() {
        if (!!(this.formView.tab || '').trim()) {
          this.tabs = this.formView.tab.split(',');
        } else {
          this.tabs = [this.formView.name];
        }

        this.tabName = this.tabs[0];
      },
      // 初始化静态选项
      initStaticItem() {
        this.columns.forEach(column => {
          if (column.isStaticItem) {
            column.dataSource = [];

            if (!!(column.itemData || '').trim()) {
              column.itemData.split(/[\n]/).forEach(item => {
                if (!!(item || '').trim()) {
                  if (item.split(':').length > 1) {
                    let key = item.split(':')[0];
                    let value = item.split(':')[1];

                    column.dataSource.push({
                      id: key,
                      name: value
                    });
                  } else {
                    column.dataSource.push({
                      id: item,
                      name: item
                    });
                  }
                }
              });
            }
          }
        });
      },
      // 初始化触发规则
      initTrigger() {
        // 触发规则
        this.columns.forEach(column => {
          column.triggers = [];
        });

        // 数据源中包含变量需要刷新
        this.columns
          .filter(column => {
            return !!(column.source || '').trim() && !!(column.param || '').trim();
          })
          .forEach(column => {
            let param = JSON.parse(column.param);
            for (let key in param) {
              this.columns
                .filter(item => {
                  return param[key] == item.code || param[key].split('.')[0] + 'ID' == item.code;
                })
                .forEach(item => {
                  item.triggers.push(this.copy(column));
                });
            }
          });
      },
      // 填充数据源
      async fillDataSource(data, column, param) {
        // 参数完整，查询数据
        let res;
        if (column.isSourceCustom) {
          res = await customModelApi.query(column.source, param);
        } else {
          res = await modelApi.query(column.source, param);
        }

        column.rawData = res.data;

        if (column.controlType === 'TreeSelect' || column.controlType === 'MultiTreeSelect') {
          let data = res.data.map(item => {
            return {
              id: !(column.sourceDataCode || '').trim() ? item.id : this.parseData(item, column.sourceDataCode),
              name: this.parseData(item, column.sourceDisplayCode),
              parentID: item.parentID
            };
          });

          column.dataSource = this.getTreeDataSource(data, column, null);
        } else {
          column.dataSource = res.data.map(item => {
            return {
              id: !(column.sourceDataCode || '').trim() ? item.id : this.parseData(item, column.sourceDataCode),
              name: this.parseData(item, column.sourceDisplayCode)
            };
          });

          // 默认第一项
          if (data) {
            if (this.parseData(data, column.code) == null && column.isDefaultFirst && res.data.length > 0) {
              this.setData(data, column.code, this.parseData(res.data[0], column.sourceDataCode));

              if (column.sourceDataCode == 'id' && column.code.length > 2) {
                let code = column.code.substr(0, column.code.length - 2);
                let model = column.rawData.find(item => {
                  return item.id == this.parseData(data, column.code);
                });

                this.setData(data, code, model);
              }
            }
          }
        }

        this.$forceUpdate();

        // 级联更新时清空数据
        if (column.controlType == 'Select' || column.controlType == 'ComboSelect' || column.controlType == 'Radio') {
          if (
            !column.dataSource.some(item => {
              return item.id == this.parseData(data, column.code);
            })
          ) {
            // 数据不存在于此数据源，清空数据
            this.setData(data, column.code, null);

            // 触发
            column.triggers.forEach(item => {
              item.needClear = true;
            });
          }
        }
      },
      // 获取树结构数据源
      getTreeDataSource(data, column, parentID) {
        let result = data
          .filter(item => {
            return item.parentID == parentID;
          })
          .map(item => {
            return {
              value: !(column.sourceDataCode || '').trim() ? item.id : this.parseData(item, column.sourceDataCode),
              title: this.parseData(item, column.sourceDisplayCode),
              selected: false,
              checked: false
            };
          });

        if (result.length > 0) {
          for (let item of result) {
            item.expand = true;
            item.children = this.getTreeDataSource(data, column, item.value);
          }
        }

        return result;
      },
      // 获取数据源
      getDataSource(data, column) {
        if (column.dataType && column.dataType.indexOf('Enum:') === 0) {
          // 枚举
          return this.getEnumList(column.dataType.split(':')[1]);
        } else {
          return column.dataSource == null ? [] : column.dataSource;
        }
      },
      // // 可筛选下拉框加载数据
      // loadOption(data, column, keyword) {
      //     let param = this.getParam(data, column);

      //     if (param != null) {
      //         if (!(keyword || '').trim() && this.parseData(data, column.code) != null && column.controlType !== 'AutoComplete') {
      //             param[column.sourceDataCode] = this.parseData(data, column.code);
      //         } else {
      //             param.keyword = keyword;
      //         }
      //         param.per = 20;

      //         this.fillDataSource(data, column, param);
      //     } else {
      //         // 参数不完整，清空数据
      //         column.dataSource = [];
      //         this.setData(data, column.code, null);
      //         // column.displayValue = null;

      //         // 触发
      //         column.triggers.forEach(item => {
      //             item.needRefresh = true;
      //         });
      //     }
      // },
      // 数据变化事件
      async onDataChange(sender) {
        // 计算需要刷新的字段
        if (sender == null || sender.triggers !== []) {
          this.columns.forEach(function (column) {
            if (
              !!(column.source || '').trim() &&
              (sender == null ||
                sender.triggers.some(item => {
                  return item.id === column.id;
                }))
            ) {
              column.needRefresh = true;
            }
          });
        }

        // 刷新数据源
        while (true) {
          let column = this.columns.filter(item => {
            return item.needRefresh == true || item.needClear == true;
          })[0];

          if (column == null) {
            // 没有需要刷新的字段
            break;
          }

          // 重新加载数据源
          if (column.needClear && this.parseData(this.data, column.code) != null) {
            this.setData(this.data, column.code, null);
            // 触发
            column.triggers.forEach(item => {
              item.needClear = true;
            });
          } else if (column.needRefresh && !!(column.source || '').trim()) {
            let param = this.getParam(this.data, column);

            if (
              column.controlType === 'Select' ||
              column.controlType === 'MultiSelect' ||
              column.controlType === 'TreeSelect' ||
              column.controlType === 'MultiTreeSelect' ||
              column.controlType === 'SelectWithOther' ||
              column.controlType === 'ComboSelect' ||
              column.controlType === 'Radio' ||
              column.controlType === 'CheckGroup'
              // column.controlType === 'AutoComplete'
            ) {
              // 选择框、单选框组
              if (param != null) {
                this.fillDataSource(this.data, column, param);
              } else {
                // 参数不完整，清空数据
                column.dataSource = [];
                this.setData(this.data, column.code, null);
                // column.displayValue = null;

                // 触发
                column.triggers.forEach(item => {
                  item.needClear = true;
                });
              }
            } else if (column.controlType === 'List') {
              if (param != null) {
                // 参数完整，查询数据
                let res;

                let tableView = this.$refs['list_' + column.code][0].tableView;

                let filtering = tableView.filtering;

                if (!!(filtering || '').trim()) {
                  param = {
                    ...param,
                    ...JSON.parse(filtering)
                  };
                }

                if (column.isSourceCustom) {
                  res = await customModelApi.query(column.sourceModel, param);
                } else {
                  res = await modelApi.query(column.sourceModel, param, tableView.functionName, tableView.functionType);
                }

                this.$refs['list_' + column.code][0].loadData(res.data);
              }
            }
          }

          // 重新加载公式
          // if (!!(column.calculate || '').trim()) {
          //     let data = this.calculate(column.calculate, this.data);
          //     this.setData(this.data, column.code, data);
          // }

          column.needClear = false;
          column.needRefresh = false;
        }
      },
      // 获取默认值
      getDefaultData() {
        let data = {};
        this.columns.forEach(item => {
          if (item.defaultValue) {
            if (item.defaultValue == '{today}') {
              // 当前日期
              let date = new Date();
              let value = date.toISOString().replace(/T.*/, '');
              this.setData(data, item.code, new Date(value));
            } else if (item.defaultValue.startsWith('{today(') && item.defaultValue.endsWith(')}')) {
              // 当前时间转字符串
              let format = item.defaultValue.substr(7, item.defaultValue.length - 9);
              this.setData(data, item.code, dateFormat(new Date(), format));
            } else if (item.defaultValue == '{currentUserID}') {
              // 当前用户编号
              this.setData(data, item.code, this.info.id);
            } else if (item.defaultValue == '{currentUser}') {
              // 当前用户姓名
              this.setData(data, item.code, this.info.name);
            } else {
              if (item.dataType === 'Integer') {
                this.setData(data, item.code, parseInt(item.defaultValue));
              } else if (item.dataType === 'Decimal') {
                this.setData(data, item.code, parseFloat(item.defaultValue));
              } else if (item.dataType === 'Boolean' && item.defaultValue.toUpperCase == 'TRUE') {
                this.setData(data, item.code, true);
              } else if (item.dataType === 'Boolean' && item.defaultValue.toUpperCase == 'FALSE') {
                this.setData(data, item.code, false);
              } else {
                this.setData(data, item.code, item.defaultValue);
              }
            }
          } else {
            if (item.dataType === 'Boolean') {
              this.setData(data, item.code, false);
            } else {
              this.setData(data, item.code, null);
            }
          }
        });

        for (let key in this.defaultData) {
          this.setData(data, key, this.defaultData[key]);
        }

        return data;
      },
      // 鼠标移入
      mouseover(column) {
        column.showButton = true;
        this.$forceUpdate();
      },
      // 鼠标移出
      mouseleave(column) {
        column.showButton = false;
        this.$forceUpdate();
      },
      // 编辑
      edit(column, index) {
        this.$emit('edit', { column, index });
      },
      // 删除
      remove(column, index) {
        this.$emit('remove', { column, index });
      },
      // 根据表达式取值（带其他）
      parseDataWithOther(model, column) {
        let expression = column.code;
        let selectValue = this.parseData(model, expression + '_o');

        let value = this.parseData(model, expression);
        let dataSource = this.getDataSource(model, column);

        if (selectValue != null) {
          return selectValue;
        } else if (value == null) {
          return null;
        } else if (
          dataSource &&
          dataSource.some(item => {
            return item.id == value;
          })
        ) {
          return value;
        } else {
          return '__Other';
        }
      },
      // 根据表达式赋值（带其他）
      setDataWithOther(model, expression, value) {
        this.setData(model, expression + '_o', value);
        if (value != '__Other') {
          this.setData(model, expression, value);
        } else {
          this.setData(model, expression, null);
        }
      },
      // 根据表达式取值（树）
      parseTreeData(data, code) {
        let value = this.parseData(data, code);

        if (value == null) {
          return '';
        } else {
          return value;
        }
      }
    }
  };
</script>

<style>
  .draggable .ivu-form-item-content {
    margin-bottom: 8px;
  }
</style>
