<template>
  <div id="tablecontainer1">
    <el-dialog
      :close-on-click-modal="false"
      :visible.sync="dialogVisible"
      :fullscreen="true"
      title="配置示例"
    >
      <p class="arrow">
        <span
          @click="changePdfPage(0)"
          class="turn"
          :class="{ grey: currentPage == 1 }"
          >上一页
        </span>
        {{ currentPage }} / {{ pageCount }}
        <span
          @click="changePdfPage(1)"
          class="turn"
          :class="{ grey: currentPage == pageCount }"
        >
          下一页</span
        >
      </p>
      <pdf
        :src="src"
        :page="currentPage"
        @num-pages="pageCount = $event"
        @page-loaded="currentPage = $event"
        @loaded="loadPdfHandler"
        style="width: 100%; height: 100%"
      ></pdf>
      <p class="arrow">
        <span
          @click="changePdfPage(0)"
          class="turn"
          :class="{ grey: currentPage == 1 }"
          >上一页
        </span>
        {{ currentPage }} / {{ pageCount }}
        <span
          @click="changePdfPage(1)"
          class="turn"
          :class="{ grey: currentPage == pageCount }"
        >
          下一页</span
        >
      </p>
    </el-dialog>
    <el-col style="text-align: left; margin-left: 15px">
      <el-form :inline="true" :model="table" stripe>
        <el-form-item label="表名:">
          <el-input v-if="getInfo == '1'" v-model="table.name"></el-input>
          <span v-else>{{ table.name }}</span>
        </el-form-item>
        <el-form-item label="表名(英文):">
          <el-input v-if="getInfo == '1'" v-model="table.key"></el-input>
          <span v-else>{{ table.name }}</span>
        </el-form-item>
        <el-form-item label="是否根表">
          <el-select
            size="small"
            v-if="getInfo == '1'"
            v-model="table.isRootTable"
            placeholder="请选择"
          >
            <el-option
              :key="true"
              :label="是"
              :value="true"
            ></el-option>
            <el-option
              :key="false"
              :label="否"
              :value="false"
            ></el-option>
          </el-select>
          <span v-else>{{ table.isRootTable ? '是' : '否' }}</span>
        </el-form-item>
      </el-form>
    </el-col>
    <el-table
      :data="table.fields"
      height="80%"
      highlight-current-row
      style="width: 97%; margin-left: 15px"
      :header-cell-class-name="sinClo"
    >
      <el-table-column type="index" label="序号" width="60"></el-table-column>
      <el-table-column
        prop="key"
        label="关键字"
        width="120"
        ref="id"
        :render-header="renderHeader"
      >
        <template slot-scope="scope">
          <el-input
            v-if="
              scope.row.key != 'ID' &&
              scope.row.key != 'shape' &&
              getInfo == '1'
            "
            size="small"
            v-model="scope.row.key"
            placeholder="请输入内容"
            @blur="testRepeat(scope.$index)"
            :id="'input' + scope.$index"
          ></el-input>
          <span v-else>{{ scope.row.key }}</span>
        </template>
      </el-table-column>
      <el-table-column
        prop="index"
        label="显示顺序"
        width="120"
        :render-header="renderHeader"
      >
        <template slot-scope="scope">
          <el-input
            v-if="
              scope.row.key != 'ID' &&
              scope.row.key != 'shape' &&
              getInfo == '1'
            "
            size="small"
            v-model="scope.row.index"
            placeholder="请输入内容"
          ></el-input>
          <span v-else>{{ scope.row.index }}</span>
        </template>
      </el-table-column>
      <el-table-column
        prop="type"
        label="控件类型"
        width="120"
        :render-header="renderHeader"
      >
        <template slot-scope="scope">
          <el-select
            size="small"
            v-if="
              getInfo == '1' &&
              scope.row.key != 'ID' &&
              scope.row.key != 'shape' &&
              scope.row.autoDate == '' &&
              scope.row.associate === '' &&
              scope.row.collection == '' &&
              scope.row.parentID != true
            "
            v-model="scope.row.type"
            placeholder="请选择"
            @change="makeType(scope.row.type, scope.$index)"
          >
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
          <span v-else>{{ scope.row.type }}</span>
        </template>
      </el-table-column>
      <el-table-column
        prop="mode"
        label="控件选项"
        width="120"
        :render-header="renderHeader"
      >
        <template slot-scope="scope">
          <!--@focus="makeMode(scope.$index)" 移除by lbz 20210703-->
          <el-select
            v-if="
              scope.row.key != 'ID' &&
              scope.row.key != 'shape' &&
              getInfo == '1' &&
              scope.row.associate === '' &&
              scope.row.collection == '' &&
              scope.row.parentID != true
            "
            size="small"
            v-model="scope.row.mode"
            placeholder="请选择"
          >
            <el-option
              v-for="item in getMode(scope.$index)"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
          <span v-else>{{ scope.row.mode }}</span>
        </template>
      </el-table-column>
      <el-table-column
        prop="select"
        label="分组脚本"
        width="120"
        :render-header="renderHeader"
      >
        <template slot-scope="scope">
          <el-input
            v-if="
              scope.row.key != 'ID' &&
              scope.row.key != 'shape' &&
              getInfo == '1' &&
              scope.row.associate === '' &&
              scope.row.collection == '' &&
              scope.row.parentID != true
            "
            size="small"
            v-model="scope.row.select"
            placeholder="请输入内容"
          ></el-input>
          <span v-else>{{ scope.row.select }}</span>
        </template>
      </el-table-column>
      <el-table-column
        prop="resultType"
        label="返回值类型"
        width="120"
        :render-header="renderHeader"
      >
        <template slot-scope="scope">
          <el-select
            v-if="
              scope.row.key != 'ID' &&
              scope.row.key != 'shape' &&
              getInfo == '1'
            "
            size="small"
            v-model="scope.row.resultType"
            placeholder="请选择"
          >
            <el-option
              v-for="item in getResultType(scope.$index)"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
          <span v-else>{{ scope.row.resultType }}</span>
        </template>
      </el-table-column>
      <el-table-column
        prop="name"
        label="名称"
        width="120"
        :render-header="renderHeader"
      >
        <template slot-scope="scope">
          <el-input
            v-if="
              scope.row.type != '' &&
              scope.row.type != 'camera' &&
              getInfo == '1'
            "
            size="small"
            v-model="scope.row.name"
            placeholder="请输入内容"
          ></el-input>
          <span v-else>{{ scope.row.name }}</span>
        </template>
      </el-table-column>

      <el-table-column
        prop="dbType"
        label="数据库类型"
        width="120"
        :render-header="renderHeader"
      >
        <template slot-scope="scope">
          <el-select
            size="small"
            v-model="scope.row.dbType"
            v-if="
              scope.row.type != 'camera' &&
              scope.row.associate == '' &&
              scope.row.collection == '' &&
              getInfo == '1'
            "
            placeholder="请选择"
            @change="makeDbType(scope.$index)"
          >
            <el-option
              v-for="item in dbtypeOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
          <span v-else>{{ scope.row.dbType }}</span>
        </template>
      </el-table-column>

      <el-table-column
        prop="autoDate"
        label="自动日期格式"
        width="120"
        :render-header="renderHeader"
      >
        <template slot-scope="scope">
          <el-select
            clearable
            v-if="
              scope.row.type != 'camera' &&
              scope.row.key != 'ID' &&
              scope.row.key != 'shape' &&
              getInfo == '1' &&
              scope.row.associate === '' &&
              scope.row.collection == '' &&
              scope.row.parentID != true
            "
            size="small"
            v-model="scope.row.autoDate"
            placeholder="请选择"
            @change="makeAutodate(scope.$index)"
          >
            <el-option
              v-for="item in TimeOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
          <span v-else>{{ scope.row.autoDate }}</span>
        </template>
      </el-table-column>
      <el-table-column
        prop="show"
        label="显示条件（脚本）"
        width="150"
        :render-header="renderHeader"
      >
        <template slot-scope="scope">
          <el-input
            v-if="
              scope.row.type != 'camera' &&
              scope.row.key != 'ID' &&
              scope.row.key != 'shape' &&
              getInfo == '1' &&
              scope.row.associate === '' &&
              scope.row.collection == '' &&
              scope.row.parentID != true
            "
            size="small"
            v-model="scope.row.show"
            placeholder="请输入内容"
          ></el-input>
          <span v-else>{{ scope.row.show }}</span>
        </template>
      </el-table-column>
      <el-table-column
        prop="script"
        label="值（脚本）"
        width="120"
        :render-header="renderHeader"
      >
        <template slot-scope="scope">
          <el-input
            v-if="
              scope.row.type != 'camera' &&
              scope.row.key != 'ID' &&
              scope.row.key != 'shape' &&
              getInfo == '1' &&
              scope.row.associate === '' &&
              scope.row.collection == '' &&
              scope.row.parentID != true
            "
            size="small"
            v-model="scope.row.script"
            placeholder="请输入内容"
          ></el-input>
          <span v-else>{{ scope.row.script }}</span>
        </template>
      </el-table-column>
      <el-table-column
        prop="associate"
        label="关联表"
        width="120"
        :render-header="renderHeader"
      >
        <template slot-scope="scope">
          <el-select
            size="small"
            v-if="
              scope.row.type != 'camera' &&
              scope.row.collection == '' &&
              scope.row.key != 'ID' &&
              scope.row.key != 'shape' &&
              getInfo == '1'
            "
            v-model="scope.row.associate"
            placeholder="请选择"
            @change="makeAssociate(scope.$index)"
          >
            <el-option
              v-for="item in TableOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
          <span v-else>{{ scope.row.associate }}</span>
        </template>
      </el-table-column>
      <el-table-column
        prop="collection"
        label="集合表"
        width="120"
        :render-header="renderHeader"
      >
        <template slot-scope="scope">
          <el-select
            size="small"
            v-if="
              scope.row.type != 'camera' &&
              scope.row.associate == '' &&
              scope.row.key != 'ID' &&
              scope.row.key != 'shape' &&
              getInfo == '1'
            "
            v-model="scope.row.collection"
            placeholder="请选择"
            @change="makeCollection(scope.$index)"
          >
            <el-option
              v-for="item in TableOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
          <span v-else>{{ scope.row.collection }}</span>
        </template>
      </el-table-column>
      <el-table-column
        prop="geometry"
        label="是否空间对象"
        width="120"
        :render-header="renderHeader"
      >
        <template slot-scope="scope">
          <el-checkbox
            v-model="scope.row.geometry"
            v-show="scope.row.key == 'shape' && getInfo == '1'"
            @change="makeGeometry(scope.$index, scope.row.geometry)"
          ></el-checkbox>
          <el-checkbox
            v-model="scope.row.geometry"
            disabled
            v-show="scope.row.key == 'shape' && getInfo != '1'"
            @change="makeGeometry(scope.$index, scope.row.geometry)"
          ></el-checkbox>
        </template>
      </el-table-column>
      <el-table-column
        prop="identity"
        label="是否主键"
        width="120"
        :render-header="renderHeader"
      >
        <template slot-scope="scope">
          <el-checkbox
            v-model="scope.row.identity"
            v-show="scope.row.key == 'ID' && getInfo == '1'"
            @change="makeIdentity(scope.$index, scope.row.identity)"
          ></el-checkbox>
          <el-checkbox
            disabled
            v-model="scope.row.identity"
            v-show="scope.row.key == 'ID' && getInfo != '1'"
            @change="makeIdentity(scope.$index, scope.row.identity)"
          ></el-checkbox>
        </template>
      </el-table-column>

      <el-table-column
        prop="uploadName"
        label="是否名称字段"
        width="130"
        :render-header="renderHeader"
      >
        <template slot-scope="scope">
          <el-checkbox
            v-model="scope.row.uploadName"
            v-show="
              scope.row.type != 'camera' &&
              scope.row.key != 'shape' &&
              getInfo == '1'
            "
            @change="makeUploadName(scope.$index, scope.row.uploadName)"
          ></el-checkbox>
          <el-checkbox
            disabled
            v-model="scope.row.uploadName"
            v-show="
              scope.row.type != 'camera' &&
              scope.row.key != 'shape' &&
              getInfo != '1'
            "
            @change="makeUploadName(scope.$index, scope.row.uploadName)"
          ></el-checkbox>
        </template>
      </el-table-column>
      <el-table-column
        prop="enable"
        label="是否有效"
        width="120"
        :render-header="renderHeader"
      >
        <template slot-scope="scope">
          <el-checkbox
            v-model="scope.row.enable"
            v-show="getInfo == '1'"
            @change="makeEnable(scope.$index, scope.row.enable)"
          ></el-checkbox>
          <el-checkbox
            disabled
            v-model="scope.row.enable"
            v-show="getInfo != '1'"
          ></el-checkbox>
        </template>
      </el-table-column>
      <el-table-column
        prop="parentID"
        label="是否父表外键"
        width="120"
        :render-header="renderHeader"
      >
        <template slot-scope="scope">
          <el-checkbox
            v-model="scope.row.parentID"
            v-show="
              scope.row.type != 'camera' &&
              scope.row.key != 'shape' &&
              getInfo == '1'
            "
            @change="makeParentID(scope.$index, scope.row.parentID)"
          ></el-checkbox>
          <el-checkbox
            disabled
            v-model="scope.row.parentID"
            v-show="
              scope.row.type != 'camera' &&
              scope.row.key != 'shape' &&
              getInfo != '1'
            "
          ></el-checkbox>
        </template>
      </el-table-column>
      <el-table-column
        prop="required"
        label="是否必填项"
        width="120"
        :render-header="renderHeader"
      >
        <template slot-scope="scope">
          <el-checkbox
            v-show="getInfo == '1'"
            v-model="scope.row.required"
          ></el-checkbox>
          <el-checkbox
            disabled
            v-show="getInfo != '1'"
            v-model="scope.row.required"
          ></el-checkbox>
        </template>
      </el-table-column>
      <el-table-column
        prop="tooltips"
        label="提示信息"
        width="180"
        :render-header="renderHeader"
      >
        <template slot-scope="scope">
          <el-input
            size="small"
            v-model="scope.row.tooltips"
            placeholder="请输入填写提示信息"
          ></el-input>
        </template>
      </el-table-column>
      <el-table-column
        prop="check"
        label="字段检查"
        width="180"
        :render-header="renderHeader"
      >
        <template slot-scope="scope">
          <el-input
            size="small"
            v-model="scope.row.check"
            placeholder="请输入字段检查脚本"
          ></el-input>
        </template>
      </el-table-column>
      <el-table-column width="200" fixed="right">
        <template slot="header">
          <el-button
            id="buttonStyle1"
            v-show="getInfo == '1'"
            size="small"
            @click="addField()"
            >新建字段</el-button
          >
          <el-button
            id="buttonStyle1"
            size="small"
            @click="dialogVisible = true"
            >配置示例</el-button
          >
        </template>
        <template slot-scope="scope">
          <el-button
            type="text"
            size="small"
            @click.native="makeSelector(scope.$index)"
            v-show="
              scope.row.key != 'ID' &&
              scope.row.key != 'shape' &&
              getInfo == '1'
            "
            >编辑选项</el-button
          >
          <el-button
            type="text"
            size="small"
            @click.native="openSelector(scope.$index)"
            v-show="
              scope.row.key != 'ID' &&
              scope.row.key != 'shape' &&
              getInfo != '1'
            "
            >查看选项</el-button
          >
          <el-button
            type="text"
            size="small"
            @click.native="makeGroupData(scope.$index)"
            v-show="
              scope.row.key != 'ID' &&
              scope.row.key != 'shape' &&
              getInfo == '1'
            "
            >编辑分组值</el-button
          >
          <el-button
            type="text"
            size="small"
            @click.native="makeGroupData(scope.$index)"
            v-show="
              scope.row.key != 'ID' &&
              scope.row.key != 'shape' &&
              getInfo != '1'
            "
            >查看分组值</el-button
          >
          <el-button
            type="text"
            size="small"
            @click.native="deleteField(scope.$index)"
            v-show="scope.row.key != 'ID' && getInfo == '1'"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <el-button
      v-if="getInfo == '1'"
      id="buttonStyle"
      size="small"
      style="margin-top: 10px; margin-bottom: 5px"
      @click="UploadData()"
      >保存</el-button
    >
    <el-button
      v-if="getInfo == '1'"
      type="danger"
      size="small"
      style="margin-top: 10px; margin-bottom: 5px"
      @click="deleteData()"
      >删除此表</el-button
    >

    <!--选择selector-->
    <el-dialog
      title="选项"
      :visible.sync="SelectorVisible"
      :close-on-click-modal="false"
      v-dialogDrag
      class="taskDialog"
    >
      <el-table
        :data="selector"
        stripe
        highlight-current-row
        class="tb-edit"
        :height="340"
        style="width: 100%"
      >
        <el-table-column type="index" width="40"></el-table-column>
        <el-table-column prop="group" label="分组值" min-width="80">
          <template slot-scope="scope">
            <el-select
              size="small"
              v-model="scope.row.group"
              placeholder="请选择"
              @focus="makeGroup()"
            >
              <el-option
                v-for="item in Groupoptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </template>
        </el-table-column>
        <el-table-column prop="key" label="编码/标识" min-width="80">
          <template slot-scope="scope">
            <el-input
              size="small"
              v-model="scope.row.key"
              placeholder="请输入内容"
            ></el-input>
          </template>
        </el-table-column>
        <el-table-column prop="value" label="显示名称" min-width="80">
          <template slot-scope="scope">
            <el-input
              size="small"
              v-model="scope.row.value"
              placeholder="请输入内容"
            ></el-input>
          </template>
        </el-table-column>
        <el-table-column fixed="right" width="200" v-if="getInfo == '1'">
          <template slot="header">
            <el-button
              type="primary"
              size="small"
              v-if="getInfo == '1'"
              @click="addSelector()"
              >添加选项</el-button
            >
          </template>
          <template slot-scope="scope">
            <el-button
              v-if="getInfo == '1'"
              @click.native.prevent="deleteSelector(scope.$index)"
              type="text"
              size="small"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <el-button
        type="primary"
        size="small"
        v-if="getInfo == '1'"
        @click="UploadSelector()"
        >保存</el-button
      >
    </el-dialog>

    <!--分组group-->
    <el-dialog
      title="分组"
      :visible.sync="GroupVisible"
      :close-on-click-modal="false"
      v-dialogDrag
      class="taskDialog"
    >
      <el-table
        :data="groupdata"
        :height="340"
        stripe
        highlight-current-row
        class="tb-edit"
        style="width: 100%"
      >
        <el-table-column type="index" width="100"></el-table-column>
        <el-table-column prop="group" label="分组值" min-width="120">
          <template slot-scope="scope">
            <el-input
              size="small"
              v-model="scope.row.group"
              placeholder="请输入内容"
            ></el-input>
          </template>
        </el-table-column>
        <el-table-column fixed="right" width="200" v-if="getInfo == '1'">
          <template slot="header">
            <el-button
              type="primary"
              size="small"
              v-if="getInfo == '1'"
              @click="addGroup()"
              >添加选项</el-button
            >
          </template>
          <template slot-scope="scope">
            <el-button
              @click.native.prevent="deleteGroup(scope.$index)"
              v-if="getInfo == '1'"
              type="text"
              size="small"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <el-button
        type="primary"
        size="small"
        @click="UploadGroup()"
        v-if="getInfo == '1'"
        >保存</el-button
      >
    </el-dialog>
  </div>
</template>

<script>
import { store } from '@/components/vuex/store.js'
import pdf from 'vue-pdf'
export default {
  components: { pdf },
  created () {
    // 初始化时处理root字段
    let config = sessionStorage['Data']
    if (config) {
      config = JSON.parse(config)
      if (config.tables && config.tables[this.index] && config.tables[this.index].hasOwnProperty('root')) {
        this.table.isRootTable = config.tables[this.index].root
      }
    }
  },
  data () {
    return {
      // Todo:pdf文件地址
      src: '/static/pdf/infor1.pdf',
      dialogVisible: false,
      currentPage: 1,
      // Todo:总页数
      pageCount: 11,

      getInfo: sessionStorage.getItem('getInfo'),
      Groupoptions: [],
      tables: [],
      name: '',
      id: '',
      key: '',
      SelectorVisible: false,
      GroupVisible: false,
      SelectorIndex: -1,
      GroupIndex: -1,
      selector: [],
      groupdata: [],
      index: this.$route.params.index,
      table: {
        name: '',
        key: '',
        fields: []
      },
      FieldIndex: -1,
      options: [
        {
          value: '',
          label: ''
        },
        {
          value: 'recorder',
          label: '录音器'
        },
        {
          value: 'checkbox',
          label: '多选框(CheckBox)'
        },
        {
          value: 'selector',
          label: '下拉框(Selector)'
        },
        {
          value: 'check_view',
          label: '选择列表(CheckView)'
        },
        {
          value: 'radiobutton',
          label: '单选框(RadioButton)'
        },

        {
          value: 'input_int',
          label: '输入框(Int)'
        },
        {
          value: 'input_double',
          label: '输入框(Double)'
        },
        {
          value: 'input_phone',
          label: '输入框(Phone)'
        },
        {
          value: 'input_text',
          label: '输入框(Text)'
        },
        {
          value: 'camera',
          label: '多媒体'
        },
        {
          value: 'photo',
          label: '照片'
        },
        {
          value: 'date_picker',
          label: '日期选择器'
        },
        {
          value: 'city_picker',
          label: '城市选择器'
        },
        {
          value: 'label',
          label: '标签'
        },
        {
          value: 'speech_view',
          label: '语音输入框'
        },
        {
          value: 'divider',
          label: '分割线'
        }
      ],
      TableOptions: [
        {
          value: '',
          label: ''
        }
      ],
      dbtypeOptions: [
        {
          value: 'blob',
          label: 'Blob'
        },
        {
          value: 'long',
          label: '长整型'
        },
        {
          value: 'integer',
          label: '短整型'
        },
        {
          value: 'text',
          label: '文本'
        },
        {
          value: 'date',
          label: '日期'
        },
        {
          value: 'float',
          label: '单精度'
        },
        {
          value: 'double',
          label: '双精度'
        },
        {
          value: 'string',
          label: '字符串'
        }
      ],
      // 简化选项逻辑
      resultTypeOptions: [
        {
          value: 'key',
          label: '编码/标识'
        },
        {
          value: 'value',
          label: '显示名称'
        }
      ],
      // ResultTypeOptions: [
      //   {
      //     value: "编码/标识",
      //     label: "编码/标识",
      //   },
      //   {
      //     value: "显示名称",
      //     label: "显示名称",
      //   },
      // ],
      // modeOptions: [
      //   {
      //     value: "MULTIPLE",
      //     label: "多选",
      //   },
      //   {
      //     value: "SINGLE",
      //     label: "单选",
      //   },
      //   {
      //     value: "edit",
      //     label: "全部",
      //   },
      //   {
      //     value: "show",
      //     label: "显示",
      //   },
      //   {
      //     value: "photo",
      //     label: "仅拍照",
      //   },
      //   {
      //     value: "video",
      //     label: "仅视频",
      //   },
      // ],
      modeOptions1: [
        {
          value: 'MULTIPLE',
          label: '多选'
        },
        {
          value: 'SINGLE',
          label: '单选'
        }
      ],
      modeOptions2: [
        {
          value: 'edit',
          label: '全部'
        },
        {
          value: 'show',
          label: '显示'
        },
        {
          value: 'photo',
          label: '仅拍照'
        },
        {
          value: 'video',
          label: '仅视频'
        }
      ],
      modeOptions3: [
        {
          value: 'MULTIPLE',
          label: '多选'
        }
      ],
      modeOptions4: [
        {
          value: 'SINGLE',
          label: '单选'
        }
      ],
      modeOptions5: [
        {
          value: 'insert',
          label: '插入时'
        },
        {
          value: 'update',
          label: '更新时'
        }
      ],
      TimeOptions: [
        {
          value: 'yyyy-MM-dd HH:mm:ss',
          label: 'yyyy-MM-dd HH:mm:ss'
        },
        {
          value: 'yyyy-MM-dd hh:mm:ss a',
          label: 'yyyy-MM-dd hh:mm:ss a'
        },
        {
          value: 'yyyy/MM/dd HH:mm:ss',
          label: 'yyyy/MM/dd HH:mm:ss'
        },
        {
          value: 'yyyy/MM/dd hh:mm:ss a',
          label: 'yyyy/MM/dd hh:mm:ss a'
        },
        {
          value: 'yyyy年MM月dd日 HH时mm分ss秒',
          label: 'yyyy年MM月dd日 HH时mm分ss秒'
        }
      ]
    }
  },
  methods: {
    changePdfPage (val) {
      if (val === 0 && this.currentPage > 1) {
        this.currentPage--
      }
      if (val === 1 && this.currentPage < this.pageCount) {
        this.currentPage++
      }
    },

    // pdf加载时
    loadPdfHandler (e) {
      this.currentPage = 1 // 加载的时候先加载第一页
    },
    addField () {
      this.table.fields.push({
        index: '',
        name: '',
        type: '',
        selector: [],
        select: '',
        group: [],
        mode: '',
        key: '',
        parentID: '',
        required: '',
        dbType: 'text',
        resultType: '',
        geometry: '',
        identity: '',
        uploadName: '',
        // zipField: "",
        autoDate: '',
        show: '',
        enable: true,
        script: '',
        associate: '',
        collection: '',
        tooltips: '',
        check: ''
      })
    },
    addSelector () {
      this.selector.push({
        group: '',
        key: '',
        value: ''
      })
    },
    addGroup () {
      this.groupdata.push({
        group: ''
      })
    },
    deleteSelector (index) {
      this.$confirm('确认删除吗？', '提示', {}).then(() => {
        this.selector.splice(index, 1)
      })
    },
    deleteGroup (index) {
      let that = this
      if (that.groupdata[index].group != '') {
        this.$confirm('确认删除吗？', '提示', {}).then(() => {
          for (
            var i = that.table.fields[that.GroupIndex].selector.length - 1;
            i >= 0;
            i--
          ) {
            if (
              that.table.fields[that.GroupIndex].selector[i].group ==
              that.groupdata[index].group
            ) {
              that.table.fields[that.GroupIndex].selector.splice(i, 1)
            }
          }
          that.groupdata.splice(index, 1)
        })
      } else {
        that.groupdata.splice(index, 1)
      }
    },
    // 删除字段
    deleteField (index) {
      this.$confirm('确认删除吗？', '提示', {}).then(() => {
        // 如果删除的是geometry 需要判断是否有camera 也需要删除
        // this.table.fields.splice(index, 1);
        let field = this.table.fields.splice(index, 1)
        if (field[0].geometry) {
          this.$alert('非根表不能有多媒体组件，如存在将删除！', '提示', {
            confirmButtonText: '确定',
            callback: (action) => {
              let indexes = []
              for (let i = 0; i < this.table.fields.length; i++) {
                if (this.table.fields[i].type == 'camera') {
                  indexes.push(i)
                }
              }
              indexes.forEach((element) => {
                this.table.fields.splice(element, 1)
              })
            }
          })
        }
      })
    },
    // 确认selector
    UploadSelector () {
      let that = this
      if (this.selector.length > 0) {
        for (var i = 0; i < this.selector.length; i++) {
          if (this.selector[i].key == '') {
            this.$message.error('关键字不可为空')
            return
          }
        }
      }
      this.table.fields[this.SelectorIndex].selector = this.selector
      this.SelectorVisible = false
      this.$notify.success({
        title: '提示',
        message: '保存成功'
      })
    },
    UploadGroup () {
      let that = this
      if (this.groupdata.length > 0) {
        for (var i = 0; i < this.groupdata.length; i++) {
          if (this.groupdata[i].group == '') {
            this.$message.error('分组值不可为空')
            return
          }
        }
      }
      this.table.fields[this.GroupIndex].group = this.groupdata
      this.GroupVisible = false
      this.$notify.success({
        title: '提示',
        message: '保存成功'
      })
    },
    UploadData () {
      let that = this
      // 确定主键
      var tmp = 0
      if (this.table.name == '') {
        this.$message.error('表名不可为空！')
        return
      }
      if (this.table.key == '') {
        this.$message.error('表名(英文)不可为空！')
        return
      }
      if (this.table.fields.length > 0) {
        for (var j = 0; j < this.table.fields.length; j++) {
          if (this.table.fields[j].key == '') {
            this.$message.error('字段关键字不可为空！')
            return
          }
          if (this.table.fields[j].identity == true) {
            tmp = 1
          }
          var test1 = 0
          for (var k = 0; k < this.table.fields[j].selector.length; k++) {
            if (this.table.fields[j].selector[k].group != '') {
              test1 = 1
            }
          }
          if (this.table.fields[j].select == '' && test1 == 1) {
            this.$message.error('请输入分组脚本！')
            return
          }
          if (
            this.table.fields[j].name == '' &&
            this.table.fields[j].type != 'camera' &&
            this.table.fields[j].type != ''
          ) {
            this.$message.error('除控件类型为空或多媒体外字段名称不可为空！')
            return
          }
        }
        if (tmp == 0) {
          this.$message.error('请选择主键！')
          return
        }
      }
      // 判断表key是否重复
      //					var tables1=this.$store.state.config.tables
      var tables1 = {}
      let config = sessionStorage['Data']
      if (config) {
        config = JSON.parse(config)
        tables1 = config.tables
      } else tables1 = this.$store.state.config.tables

      for (var i = 0; i < tables1.length; i++) {
        if (this.table.key == tables1[i].key && this.index != i) {
          this.$message.error('表名(英文)重复！')
          return
        }
      }
      tables1[this.index] = this.table
      this.$store.dispatch('updateTables', { tables: tables1 })
      this.$notify.success({
        title: '提示',
        message: '保存成功'
      })
    },
    testRepeat (index) {
      if (this.table.fields) {
        if (
          this.table.fields.length > 1 &&
          this.table.fields[index].key != ''
        ) {
          for (var i = 0; i < this.table.fields.length; i++) {
            if (i != index) {
              if (this.table.fields[i].key == this.table.fields[index].key) {
                this.$message.error('关键字重复')
                this.table.fields[index].key = ''
                document.getElementById('input' + index).focus()
                return
              }
            }
          }
        }
        if (
          this.table.fields[index].key == 'geometry' ||
          this.table.fields[index].key == 'date'
        ) {
          this.$message.error('关键字违法，不可为geometry、date')
          document.getElementById('input' + index).focus()
        }
      }
    },
    deleteData () {
      let that = this
      this.$confirm('确认删除该表？', '提示', {
        cancelButtonText: '取消',
        confirmButtonText: '确定',
        type: 'warning'
      })
        .then(() => {
          // 确认identity是否填写 tmp为符合要求的标志
          //					var tables1=this.$store.state.config.tables
          var tables1 = {}
          let config = sessionStorage['Data']
          if (config) {
            config = JSON.parse(config)
            tables1 = config.tables
          } else tables1 = that.$store.state.config.tables
          tables1.splice(that.index, 1)
          that.$store.dispatch('updateTables', { tables: tables1 })
          if (that.$store.state.config.tables.length - 1 >= that.index) {
            that.table = JSON.parse(
              JSON.stringify(that.$store.state.config.tables[that.index])
            )
            that.tables = JSON.parse(
              JSON.stringify(that.$store.state.config.tables)
            )
          } else if (that.$store.state.config.tables.length > 0) {
            that.table = JSON.parse(
              JSON.stringify(
                that.$store.state.config.tables[
                  that.$store.state.config.tables.length - 1
                ]
              )
            )
            that.tables = JSON.parse(
              JSON.stringify(that.$store.state.config.tables)
            )
            that.$router.push({
              path:
                '/home/' +
                that.name +
                '/' +
                that.key +
                '/' +
                that.id +
                '/' +
                (that.$store.state.config.tables.length - 1).toString() +
                '/tablecon'
            })
          } else {
            that.$router.push({
              path:
                '/home/' +
                that.name +
                '/' +
                that.key +
                '/' +
                that.id +
                '/creattable'
            })
          }
        })
        .catch(() => {
          /*					this.$notify.error({
						title:'提示',
						message:'删除失败'
					}) */
        })
    },
    makeSelector (index) {
      if (
        this.table.fields[index].type == 'radiobutton' ||
        this.table.fields[index].type == 'selector' ||
        this.table.fields[index].type == 'check_view' ||
        this.table.fields[index].type == 'city_picker' ||
        this.table.fields[index].type == 'checkbox'
      ) {
        this.SelectorVisible = true
        this.selector = this.table.fields[index].selector
        this.SelectorIndex = index
        this.GroupIndex = index
      } else {
        this.$message.info('所选控件类型无选项！')
      }
    },
    openSelector (index) {
      if (
        this.table.fields[index].type == '单选框(RadioButton)' ||
        this.table.fields[index].type == '下拉框(Selector)' ||
        this.table.fields[index].type == '选择列表(CheckView)' ||
        this.table.fields[index].type == '城市选择器' ||
        this.table.fields[index].type == '多选框(CheckBox)'
      ) {
        this.SelectorVisible = true
        this.selector = this.table.fields[index].selector
        this.SelectorIndex = index
        this.GroupIndex = index
      } else {
        this.$message.info('所选控件类型无选项！')
      }
    },
    makeGroup () {
      this.Groupoptions = []
      this.Groupoptions.push({
        value: '',
        label: ''
      })
      if (this.GroupIndex != -1) {
        if (this.table.fields[this.GroupIndex].group) {
          for (
            var i = 0;
            i < this.table.fields[this.GroupIndex].group.length;
            i++
          ) {
            this.Groupoptions.push({
              value: this.table.fields[this.GroupIndex].group[i].group,
              label: this.table.fields[this.GroupIndex].group[i].group
            })
          }
        }
      }
    },
    makeGroupData (index) {
      if (
        this.table.fields[index].type == 'radiobutton' ||
        this.table.fields[index].type == 'selector' ||
        this.table.fields[index].type == 'check_view' ||
        this.table.fields[index].type == 'checkbox'
      ) {
        this.groupdata = this.table.fields[index].group
        this.GroupIndex = index
        this.GroupVisible = true
      } else {
        this.$message.info('所选控件类型无分组！')
      }
    },
    // type改变
    makeType (type, index) {
      // 清空selector
      this.table.fields[index].selector = []
      this.table.fields[index].group = []
      // 自增
      this.table.fields[index].identity = false
      if (type == 'input_int') {
        this.table.fields[index].dbType = 'integer'
        this.$message.info('该控件类型对应数据库类型只可为整型！')
      }
      if (type == 'recorder') {
        this.table.fields[index].dbType = 'text'
        this.$message.info('该控件类型对应数据库类型只可为文本！')
      }
      if (type == 'input_double') {
        this.table.fields[index].dbType = 'double'
        this.$message.info('该控件类型对应数据库类型只可为双精度！')
      }
      if (type == 'photo') {
        this.table.fields[index].dbType = 'string'
        this.$message.info('该控件类型对应数据库类型只可为字符串！')
      }
      if (type == 'input_text' || type == 'input_phone') {
        this.table.fields[index].dbType = 'text'
        this.$message.info('该控件类型对应数据库类型只可为文本！')
      }
      if (type == '') {
        // 没有type 没有name
        this.table.fields[index].name = ''
      }
      // 无resulttype
      if (
        type != 'check_view' &&
        type != 'checkbox' &&
        type != 'selector' &&
        type != 'radiobutton'
      ) {
        this.table.fields[index].resultType = ''
        this.table.fields[index].select = ''
        this.table.fields[index].group = []
      } else {
        // this.table.fields[index].resultType = "编码/标识";
        this.table.fields[index].resultType = 'key'
      }
      if (type == 'city_picker')
      // this.table.fields[index].resultType = "编码/标识";
      { this.table.fields[index].resultType = 'key' }
      // 无mode
      if (
        type != 'check_view' &&
        type != 'camera' &&
        type != 'checkbox' &&
        type != 'selector' &&
        type != 'radiobutton'
      ) {
        this.table.fields[index].mode = ''
      } else if (type == 'check_view') {
        this.table.fields[index].mode = 'SINGLE'
        // this.modeOptions = this.modeOptions1;
      } else if (type == 'selector' || type == 'radiobutton') {
        this.table.fields[index].mode = 'SINGLE'
        // this.modeOptions = this.modeOptions4;
      } else if (type == 'checkbox') {
        this.table.fields[index].mode = 'MULTIPLE'
        // this.modeOptions = this.modeOptions3;
      } else if (type == 'camera') {
        // 增加一个判断 只有根表才能有camera 且只能有一个 by 20210703
        let rootTable = false
        let cameraCount = 0
        for (let i = 0; i < this.table.fields.length; i++) {
          let field = this.table.fields[i]
          rootTable = rootTable || this.table.fields[i].geometry
          if (field.type == 'camera') {
            cameraCount++
          }
        }
        if (!rootTable || cameraCount > 1) {
          this.$message.info('只有根表才能有多媒体组件，且只能存在一个！')
          this.table.fields[index].type = ''
          return
        }

        this.table.fields[index].mode = 'edit'
        this.table.fields[index].dbType = ''
        this.table.fields[index].autoDate = ''
        this.table.fields[index].show = ''
        this.table.fields[index].script = ''
        this.table.fields[index].associate = ''
        this.table.fields[index].collection = ''
        this.table.fields[index].geometry = false
        this.table.fields[index].identity = false
        this.table.fields[index].uploadName = false
        this.table.fields[index].enable = true
        this.table.fields[index].parentID = false
      }
    },
    getResultType (index) {
      if (
        this.table.fields[index].type == 'check_view' ||
        this.table.fields[index].type == 'city_picker' ||
        this.table.fields[index].type == 'checkbox' ||
        this.table.fields[index].type == 'selector' ||
        this.table.fields[index].type == 'radiobutton' ||
        this.table.fields[index].type == 'city_picker'
      ) {
        return this.resultTypeOptions
      } else {
        return []
      }
    },
    getMode (index) {
      if (this.table.fields[index].type == 'check_view') {
        return this.modeOptions1
      } else if (this.table.fields[index].type == 'camera') {
        return this.modeOptions2
      } else if (this.table.fields[index].type == 'checkbox') {
        return this.modeOptions3
      } else if (
        this.table.fields[index].type == 'radiobutton' ||
        this.table.fields[index].type == 'selector'
      ) {
        return this.modeOptions4
      } else if (this.table.fields[index].autoDate != '') {
        return this.modeOptions5
      } else return []
    },
    /* makeZipField(index) {
      this.table.fields[index].zipField = true;
    }, */
    // 使得geometry唯一
    makeGeometry (index, type) {
      if (this.table.fields[index].key == 'shape') {
        this.table.fields[index].geometry = true
      } else {
        this.table.fields[index].geometry = false
      }
      // if (type == true) {
      //   //遍历让别的为false
      //   for (var i = 0; i < this.table.fields.length; i++) {
      //     if (i != index) {
      //       this.table.fields[i].geometry = false;
      //     }
      //   }
      //   //控制空间对象的数据库类型
      //   if (this.table.fields[index].dbType != "blob") {
      //     this.$message.info("空间对象的数据库类型只可为Blob！");
      //     this.table.fields[index].dbType = "blob";
      //   }
      // }
    },
    makeIdentity (index, type) {
      if (this.table.fields[index].key == 'ID') {
        this.table.fields[index].identity = true
      } else {
        this.table.fields[index].identity = false
      }
      // if (type == true) {
      //   //遍历让别的为false
      //   for (var i = 0; i < this.table.fields.length; i++) {
      //     if (i != index) {
      //       this.table.fields[i].identity = false;
      //     }
      //   }
      //   //控制字段的数据库类型
      //   if (
      //     this.table.fields[index].dbType != "integer" &&
      //     this.table.fields[index].dbType != "long"
      //   ) {
      //     this.$message.info("主键字段的数据库类型只可为长整型和短整型！");
      //     this.table.fields[index].dbType = "integer";
      //   }
      // }
    },
    makeUploadName (index, type) {
      if (type == true) {
        // 遍历让别的为false
        for (var i = 0; i < this.table.fields.length; i++) {
          if (i != index) {
            this.table.fields[i].uploadName = false
          }
        }
      }
    },
    makeEnable (index, enable) {
      if (
        enable == false &&
        (this.table.fields[index].type == '' ||
          this.table.fields[index].type == 'camera')
      ) {
        this.table.fields[index].enable = true
      }
    },
    makeParentID (index, type) {
      if (type == true) {
        // 遍历让别的为false
        for (var i = 0; i < this.table.fields.length; i++) {
          if (i != index) {
            this.table.fields[i].parentID = false
          }
        }
        this.table.fields[index].autoDate = ''
        this.table.fields[index].show = ''
        this.table.fields[index].script = ''
        this.table.fields[index].select = ''
        this.table.fields[index].type = ''
        this.table.fields[index].mode = ''
      }
    },
    makeDbType (index) {
      // 限制主键字段数据库类型的改变
      if (
        this.table.fields[index].identity == true ||
        this.table.fields[index].key == 'ID'
      ) {
        if (
          this.table.fields[index].dbType != 'integer' &&
          this.table.fields[index].dbType != 'long'
        ) {
          this.$message.info('主键字段的数据库类型只可为短整型和长整型！')
          this.table.fields[index].dbType = 'integer'
        }
      }
      // 录音器只可为文本
      if (
        this.table.fields[index].type == 'recorder' &&
        this.table.fields[index].dbType != 'text'
      ) {
        this.$message.info('录音器的数据库类型只可为文本！')
        this.table.fields[index].dbType = 'text'
      }
      if (
        this.table.fields[index].geometry == true &&
        this.table.fields[index].dbType != 'blob'
      ) {
        this.$message.info('空间对象的数据库类型只可为Blob！')
        this.table.fields[index].dbType = 'blob'
      }
      if (this.table.fields[index].type == 'input_int') {
        if (
          this.table.fields[index].dbType != 'integer' &&
          this.table.fields[index].dbType != 'long'
        ) {
          this.$message.info('该控件类型对应数据库类型只可为短整型或长整型！')
          this.table.fields[index].dbType = 'integer'
        }
      }
      if (
        this.table.fields[index].type == 'input_double' &&
        this.table.fields[index].dbType != 'double'
      ) {
        this.table.fields[index].dbType = 'double'
        this.$message.info('该控件类型对应数据库类型只可为双精度！')
      }
      if (
        this.table.fields[index].type == 'photo' &&
        this.table.fields[index].dbType != 'string'
      ) {
        this.table.fields[index].dbType = 'string'
        this.$message.info('该控件类型对应数据库类型只可为字符串！')
      }
      if (
        (this.table.fields[index].type == 'input_text' ||
          this.table.fields[index].type == 'input_phone' ||
          this.table.fields[index].type == 'date_picker' ||
          this.table.fields[index].type == 'city_picker' ||
          this.table.fields[index].type == 'label' ||
          this.table.fields[index].type == 'speech_view') &&
        this.table.fields[index].dbType != 'text'
      ) {
        this.table.fields[index].dbType = 'text'
        this.$message.info('该控件类型对应数据库类型只可为文本！')
      }
    },
    makeAssociate (index) {
      if (this.table.fields[index].associate != '') {
        this.table.fields[index].key = this.table.fields[index].associate
        this.table.fields[index].dbType = ''
        this.table.fields[index].collection = ''
        this.table.fields[index].autoDate = ''
        this.table.fields[index].show = ''
        this.table.fields[index].script = ''
        this.table.fields[index].select = ''
        this.table.fields[index].type = ''
        this.table.fields[index].mode = ''
      }
    },
    makeCollection (index) {
      if (this.table.fields[index].collection != '') {
        this.table.fields[index].key = this.table.fields[index].collection
        this.table.fields[index].dbType = ''
        this.table.fields[index].associate = ''
        this.table.fields[index].autoDate = ''
        this.table.fields[index].show = ''
        this.table.fields[index].script = ''
        this.table.fields[index].select = ''
        this.table.fields[index].type = ''
        this.table.fields[index].mode = ''
      }
    },
    makeAutodate (index) {
      if (this.table.fields[index].autoDate != '') {
        this.table.fields[index].type = ''
        this.table.fields[index].dbType = 'date'
        this.table.fields[index].resultType = ''
        if (
          this.table.fields[index].mode != 'insert' &&
          this.table.fields[index].mode != 'update'
        ) { this.table.fields[index].mode = 'insert' }
      } else {
        this.table.fields[index].mode = ''
      }
    },
    sinClo ({ row, column, rowIndex, columnIndex }) {
      return 'sinCl'
    },
    renderHeader (h, { column }) {
      // h即为cerateElement的简写，具体可看vue官方文档
      if (column.label === '关键字') {
        return h('div', [
          h('span', column.label),
          h(
            'el-tooltip',
            {
              props: {
                effect: 'dark',
                content:
                  '输入必须为英文、数字或下划线，且作为属性的字段名存于数据库中。',
                placement: 'top'
              }
            },
            [
              h('i', {
                class: 'el-icon-info',
                style: 'margin-left:5px;cursor:pointer;'
              })
            ]
          )
        ])
      } else if (column.label === '显示顺序') {
        return h('div', [
          h('span', column.label),
          h(
            'el-tooltip',
            {
              props: {
                effect: 'dark',
                content:
                  '控件在手机端的显示顺序，随着数字的增大，控件从上往下依次排列。',
                placement: 'top'
              }
            },
            [
              h('i', {
                class: 'el-icon-info',
                style: 'margin-left:5px;cursor:pointer;'
              })
            ]
          )
        ])
      } else if (column.label === '分组脚本') {
        return h('div', [
          h('span', column.label),
          h(
            'el-tooltip',
            {
              props: {
                effect: 'dark',
                content:
                  '当选择器需要分组时填写，用于监听一个字段，根据脚本计算监听字段产生的值即为选择器的分组值。',
                placement: 'top'
              }
            },
            [
              h('i', {
                class: 'el-icon-info',
                style: 'margin-left:5px;cursor:pointer;'
              })
            ]
          )
        ])
      } else if (column.label === '返回值类型') {
        return h('div', [
          h('span', column.label),
          h(
            'el-tooltip',
            {
              props: {
                effect: 'dark',
                content:
                  '当控件类型为单选框、多选框、选择列表、城市选择器时，返回值类型可以选择编码/标识和显示名称。',
                placement: 'top'
              }
            },
            [
              h('i', {
                class: 'el-icon-info',
                style: 'margin-left:5px;cursor:pointer;'
              })
            ]
          )
        ])
      } else if (column.label === '显示条件（脚本）') {
        return h('div', [
          h('span', column.label),
          h(
            'el-tooltip',
            {
              props: {
                effect: 'dark',
                content:
                  '通过脚本控制当前控件的显示和隐藏，脚本为判断语句，例如#{type}==1，当type控件的值为1，显示当期的控件。',
                placement: 'top'
              }
            },
            [
              h('i', {
                class: 'el-icon-info',
                style: 'margin-left:5px;cursor:pointer;'
              })
            ]
          )
        ])
      } else if (column.label === '值（脚本）') {
        return h('div', [
          h('span', column.label),
          h(
            'el-tooltip',
            {
              props: {
                effect: 'dark',
                content:
                  '当前值可由其他控件的值计算得到，如#{num1}+#{num2}，表示当前控件的值为num1和num2的值的和。',
                placement: 'top'
              }
            },
            [
              h('i', {
                class: 'el-icon-info',
                style: 'margin-left:5px;cursor:pointer;'
              })
            ]
          )
        ])
      } else if (column.label === '关联表') {
        return h('div', [
          h('span', column.label),
          h(
            'el-tooltip',
            {
              props: {
                effect: 'dark',
                content:
                  '与非根表建立 1:1 联系，但不要建立循环关系，且一个字段不可同时设置关联和集合。',
                placement: 'top'
              }
            },
            [
              h('i', {
                class: 'el-icon-info',
                style: 'margin-left:5px;cursor:pointer;'
              })
            ]
          )
        ])
      } else if (column.label === '集合表') {
        return h('div', [
          h('span', column.label),
          h(
            'el-tooltip',
            {
              props: {
                effect: 'dark',
                content:
                  '与非根表建立 1:1 联系，但不要建立循环关系，且一个字段不可同时设置关联和集合。',
                placement: 'top'
              }
            },
            [
              h('i', {
                class: 'el-icon-info',
                style: 'margin-left:5px;cursor:pointer;'
              })
            ]
          )
        ])
      } else if (column.label === '是否名称字段') {
        return h('div', [
          h('span', column.label),
          h(
            'el-tooltip',
            {
              props: {
                effect: 'dark',
                content:
                  'App中在数据模块或者网络模块中，用于标识一条采集记录的名称的字段。',
                placement: 'top'
              }
            },
            [
              h('i', {
                class: 'el-icon-info',
                style: 'margin-left:5px;cursor:pointer;'
              })
            ]
          )
        ])
      } else if (column.label === '是否有效') {
        return h('div', [
          h('span', column.label),
          h(
            'el-tooltip',
            {
              props: {
                effect: 'dark',
                content: '字段是否不可以被修改，控制字段的可用性。',
                placement: 'top'
              }
            },
            [
              h('i', {
                class: 'el-icon-info',
                style: 'margin-left:5px;cursor:pointer;'
              })
            ]
          )
        ])
      } else if (column.label === '是否必填项') {
        return h('div', [
          h('span', column.label),
          h(
            'el-tooltip',
            {
              props: {
                effect: 'dark',
                content: '若勾选，则采集过程中该字段内容必须填写。',
                placement: 'top'
              }
            },
            [
              h('i', {
                class: 'el-icon-info',
                style: 'margin-left:5px;cursor:pointer;'
              })
            ]
          )
        ])
      } else if (column.label === '控件类型') {
        return h('div', [
          h('span', column.label),
          h(
            'el-tooltip',
            {
              props: {
                effect: 'dark',
                content: '移动端用于信息采集的控件类型。',
                placement: 'top'
              }
            },
            [
              h('i', {
                class: 'el-icon-info',
                style: 'margin-left:5px;cursor:pointer;'
              })
            ]
          )
        ])
      } else if (column.label === '控件选项') {
        return h('div', [
          h('span', column.label),
          h(
            'el-tooltip',
            {
              props: {
                effect: 'dark',
                content: '控件对应的可选子项或控件类型。',
                placement: 'top'
              }
            },
            [
              h('i', {
                class: 'el-icon-info',
                style: 'margin-left:5px;cursor:pointer;'
              })
            ]
          )
        ])
      } else if (column.label === '名称') {
        return h('div', [
          h('span', column.label),
          h(
            'el-tooltip',
            {
              props: {
                effect: 'dark',
                content: '移动端展示的用于信息采集的控件的具体名称。',
                placement: 'top'
              }
            },
            [
              h('i', {
                class: 'el-icon-info',
                style: 'margin-left:5px;cursor:pointer;'
              })
            ]
          )
        ])
      } else if (column.label === '数据库类型') {
        return h('div', [
          h('span', column.label),
          h(
            'el-tooltip',
            {
              props: {
                effect: 'dark',
                content: '控件采集的信息存储在数据库中的字段类型。',
                placement: 'top'
              }
            },
            [
              h('i', {
                class: 'el-icon-info',
                style: 'margin-left:5px;cursor:pointer;'
              })
            ]
          )
        ])
      } else if (column.label === '自动日期格式') {
        return h('div', [
          h('span', column.label),
          h(
            'el-tooltip',
            {
              props: {
                effect: 'dark',
                content:
                  '如选择自动记录时间，则需要指定时间的格式，如yyyy-MM-dd HH:mm:ss。',
                placement: 'top'
              }
            },
            [
              h('i', {
                class: 'el-icon-info',
                style: 'margin-left:5px;cursor:pointer;'
              })
            ]
          )
        ])
      } else if (column.label === '是否空间对象') {
        return h('div', [
          h('span', column.label),
          h(
            'el-tooltip',
            {
              props: {
                effect: 'dark',
                content:
                  '表示空间要素存储的字段，系统一般会默认产生，一个表最多只需一个。',
                placement: 'top'
              }
            },
            [
              h('i', {
                class: 'el-icon-info',
                style: 'margin-left:5px;cursor:pointer;'
              })
            ]
          )
        ])
      } else if (column.label === '是否主键') {
        return h('div', [
          h('span', column.label),
          h(
            'el-tooltip',
            {
              props: {
                effect: 'dark',
                content:
                  '表示当前字段是否为当前表的主键，一个表必须包含一个主键，默认为ID字段。',
                placement: 'top'
              }
            },
            [
              h('i', {
                class: 'el-icon-info',
                style: 'margin-left:5px;cursor:pointer;'
              })
            ]
          )
        ])
      } else if (column.label === '是否父表外键') {
        return h('div', [
          h('span', column.label),
          h(
            'el-tooltip',
            {
              props: {
                effect: 'dark',
                content: '关联表中用于存储与其关联的主表中的主键的信息。',
                placement: 'top'
              }
            },
            [
              h('i', {
                class: 'el-icon-info',
                style: 'margin-left:5px;cursor:pointer;'
              })
            ]
          )
        ])
      } else if (column.label === '提示信息') {
        return h('div', [
          h('span', column.label),
          h(
            'el-tooltip',
            {
              props: {
                effect: 'dark',
                content: '在Android端字段名处点击弹出提示的配置（MarkDown格式）',
                placement: 'top'
              }
            },
            [
              h('i', {
                class: 'el-icon-info',
                style: 'margin-left:5px;cursor:pointer;'
              })
            ]
          )
        ])
      } else if (column.label === '字段检查') {
        return h('div', [
          h('span', column.label),
          h(
            'el-tooltip',
            {
              props: {
                effect: 'dark',
                content: '用于填写字段检查脚本',
                placement: 'top'
              }
            },
            [
              h('i', {
                class: 'el-icon-info',
                style: 'margin-left:5px;cursor:pointer;'
              })
            ]
          )
        ])
      } else {
      }
    }
  },
  watch: {
    // 用watch监听变化
    $route: {
      handler (to, from) {
        this.index = to.params.index
        this.name = to.params.name
        this.key = to.params.key
        this.id = to.params.id
        let config = sessionStorage['Data']
        if (config) {
          config = JSON.parse(config)
          this.tables = config.tables
          this.table = config.tables[this.index]
          // 根据root字段设置isRootTable
          if (this.table.hasOwnProperty('root')) {
            this.table.isRootTable = this.table.root
          }
        } else {
          if (this.$store.state.config.tables.length - 1 >= this.index) {
            this.table = JSON.parse(
              JSON.stringify(this.$store.state.config.tables[this.index])
            )
            this.tables = JSON.parse(
              JSON.stringify(this.$store.state.config.tables)
            )
          }
        }
      },
      immediate: true
    },
    index: {
      handler () {
        this.TableOptions = [
          {
            value: '',
            label: ''
          }
        ]
        var isGeoTable = false
        for (var i = 0; i < this.table.fields.length; i++) {
          if (this.table.fields[i].geometry == true) {
            isGeoTable = true
          }
        }
        if (isGeoTable) {
          var tmp = 0
          for (var i = 0; i < this.$store.state.config.tables.length; i++) {
            if (i != this.index) {
              for (
                var j = 0;
                j < this.$store.state.config.tables[i].fields.length;
                j++
              ) {
                if (
                  this.$store.state.config.tables[i].fields[j].geometry == true
                ) {
                  tmp = 1
                }
              }
              if (tmp == 0) {
                this.TableOptions.push({
                  value: this.$store.state.config.tables[i].key,
                  label: this.$store.state.config.tables[i].name
                })
              }
            }
            tmp = 0
          }
        } else {
          for (var i = 0; i < this.$store.state.config.tables.length; i++) {
            if (i != this.index) {
              this.TableOptions.push({
                value: this.$store.state.config.tables[i].key,
                label: this.$store.state.config.tables[i].name
              })
            }
          }
        }
      },
      immediate: true
    },
    table: {
      handler () {
        if (this.table.fields) {
          for (var i = 0; i < this.table.fields.length; i++) {
            let reg = /[^\w_]+$/
            if (reg.test(this.table.fields[i].key)) {
              if (this.table.fields[i].key != '') { this.$message.info('关键字只可为字母、数字、下划线组合！') }
            }
            this.table.fields[i].key = this.table.fields[i].key.replace(
              /[^\w_]/g,
              ''
            )
            reg = /\D/
            if (reg.test(this.table.fields[i].index)) {
              if (this.table.fields[i].index != '') { this.$message.info('显示顺序只可为数字') }
            }
            this.table.fields[i].index = this.table.fields[i].index.replace(
              /\D/,
              ''
            )
          }
        }
      },
      deep: true
    },
    'table.key': {
      handler () {
        let reg = /[^\w_]+$/
        if (reg.test(this.table.key)) {
          if (this.table.key != '') { this.$message.info('表名(英文)只可为字母、数字、下划线组合！') }
        }
        this.table.key = this.table.key.replace(/[^\w_]/g, '')
      },
      deep: true
    }
  },
  store,
  mounted () {
    let config = sessionStorage['Data']
    if (config) {
      config = JSON.parse(config)
      this.tables = config.tables
      this.table = config.tables[this.$route.params.index]
    } else {
      if (
        this.$store.state.config.tables.length - 1 >=
        this.$route.params.index
      ) {
        this.tables = JSON.parse(
          JSON.stringify(this.$store.state.config.tables)
        )
        this.table = JSON.parse(
          JSON.stringify(
            this.$store.state.config.tables[this.$route.params.index]
          )
        )
      }
    }
    if (this.getInfo != 1) {
      // 查看时做转义
      for (var i = 0; i < this.table.fields.length; i++) {
        this.table.fields[i].enable =
          !!(this.table.fields[i].enable == 'true' ||
          this.table.fields[i].enable == true ||
          !this.table.fields[i].enable)
        this.table.fields[i].parentID =
          !!(this.table.fields[i].parentID == 'true' ||
          this.table.fields[i].parentID == true)
        if (this.table.fields[i].type == 'checkbox') {
          this.table.fields[i].type = '多选框(CheckBox)'
        } else if (this.table.fields[i].type == 'selector') {
          this.table.fields[i].type = '下拉框(Selector)'
        } else if (this.table.fields[i].type == 'check_view') {
          this.table.fields[i].type = '选择列表(CheckView)'
        } else if (this.table.fields[i].type == 'radiobutton') {
          this.table.fields[i].type = '单选框(RadioButton)'
        } else if (this.table.fields[i].type == 'input_int') {
          this.table.fields[i].type = '输入框(Int)'
        } else if (this.table.fields[i].type == 'input_double') {
          this.table.fields[i].type = '输入框(Double)'
        } else if (this.table.fields[i].type == 'input_phone') {
          this.table.fields[i].type = '输入框(Phone)'
        } else if (this.table.fields[i].type == 'input_text') {
          this.table.fields[i].type = '输入框(Text)'
        } else if (this.table.fields[i].type == 'camera') {
          this.table.fields[i].type = '多媒体'
        } else if (this.table.fields[i].type == 'photo') {
          this.table.fields[i].type = '照片'
        } else if (this.table.fields[i].type == 'date_picker') {
          this.table.fields[i].type = '日期选择器'
        } else if (this.table.fields[i].type == 'label') {
          this.table.fields[i].type = '标签'
        } else if (this.table.fields[i].type == 'speech_view') {
          this.table.fields[i].type = '语音输入框'
        } else if (this.table.fields[i].type == 'city_picker') {
          this.table.fields[i].type = '城市选择器'
        } else if (this.table.fields[i].type == 'divider') {
          this.table.fields[i].type = '分割线'
        }
        if (this.table.fields[i].dbType == 'blob') {
          this.table.fields[i].dbType = 'Blob'
        } else if (this.table.fields[i].dbType == 'long') {
          this.table.fields[i].dbType = '长整型'
        } else if (this.table.fields[i].dbType == 'integer') {
          this.table.fields[i].dbType = '短整型'
        } else if (this.table.fields[i].dbType == 'text') {
          this.table.fields[i].dbType = '文本'
        } else if (this.table.fields[i].dbType == 'date') {
          this.table.fields[i].dbType = '日期'
        } else if (this.table.fields[i].dbType == 'float') {
          this.table.fields[i].dbType = '单精度'
        } else if (this.table.fields[i].dbType == 'double') {
          this.table.fields[i].dbType = '双精度'
        } else if (this.table.fields[i].dbType == 'string') {
          this.table.fields[i].dbType = '字符串'
        }
        if (this.table.fields[i].mode == 'MULTIPLE') {
          this.table.fields[i].mode = '多选'
        } else if (this.table.fields[i].mode == 'SINGLE') {
          this.table.fields[i].mode = '单选'
        } else if (this.table.fields[i].mode == 'edit') {
          this.table.fields[i].mode = '全部'
        } else if (this.table.fields[i].mode == 'show') {
          this.table.fields[i].mode = '显示'
        } else if (this.table.fields[i].mode == 'photo') {
          this.table.fields[i].mode = '仅拍照'
        } else if (this.table.fields[i].mode == 'video') {
          this.table.fields[i].mode = '仅视频'
        }
        if (this.table.fields[i].associate != '') {
          for (var j = 0; j < this.TableOptions.length; j++) {
            if (this.table.fields[i].associate == this.TableOptions[j].value) {
              this.table.fields[i].associate == this.TableOptions[j].label
            }
          }
        }
        if (this.table.fields[i].collection != '') {
          for (var j = 0; j < this.TableOptions.length; j++) {
            if (this.table.fields[i].collection == this.TableOptions[j].value) {
              this.table.fields[i].collection == this.TableOptions[j].label
            }
          }
        }
      }
    } else {
      for (var i = 0; i < this.table.fields.length; i++) {
        this.table.fields[i].enable =
          !!(this.table.fields[i].enable == 'true' ||
          this.table.fields[i].enable == true ||
          !this.table.fields[i].enable)
        this.table.fields[i].parentID =
          !!(this.table.fields[i].parentID == 'true' ||
          this.table.fields[i].parentID == true ||
          this.table.fields[i].parentID == '')
      }
    }
  }
}
</script>

<style scoped lang="scss" >
>>> .el-table td,
>>> .el-table th.is-leaf {
  border: 1px solid rgba(211, 226, 246, 0.5) !important;
}
</style>
