<template>
  <div>
    <Modal v-model="showEditModal" v-drag :mask-closable="false" width="1200px">
      <p slot="header">
        {{ modalTitle }}
      </p>
      <div>
        <Form
          id="edit-form-online-table-edit"
          ref="formObj"
          :model="formObj"
          :rules="ruleValidate"
          :label-width="80"
          inline
        >
          <Form-item label="表名" prop="tableName" class="width-32">
            <Input v-model="formObj.tableName" name="tableName" placeholder="请输入表名" clearable />
          </Form-item>
          <Form-item label="表描述" prop="tableTxt" class="width-32">
            <Input v-model="formObj.tableTxt" name="tableTxt" placeholder="请输入表描述" clearable />
          </Form-item>

          <Form-item label="表类型" prop="tableType" class="width-32">
            <!--            <Input v-model="formObj.tableType" name="name" placeholder="请选择表类型" clearable />-->

            <el-select v-model="formObj.tableType" style="width: 100%" placeholder="请选择表类型">
              <el-option label="单表" value="0" />
              <el-option label="主表" value="1" />
              <el-option label="附表" value="2" />
            </el-select>
          </Form-item>
          <Form-item label="表单分类" prop="formCategory" class="width-32">
            <!--            <Input v-model="formObj.formCategory" name="name" placeholder="请选择表单分类" clearable />-->
            <el-select v-model="formObj.formCategory" style="width: 100%" placeholder="请选择表单分类">
              <el-option label="导入表单" value="导入表单" />
              <el-option label="普通表单" value="普通表单" />
              <el-option label="复杂表单" value="复杂表单" />
              <el-option label="VIP表单" value="VIP表单" />
            </el-select>
          </Form-item>
          <Form-item label="主键策略" prop="idType" class="width-32">
            <!--            <Input v-model="formObj.idType" name="idType" placeholder="请选择主键策略" clearable />-->
            <el-select v-model="formObj.idType" style="width: 100%" placeholder="请选择主键策略">
              <el-option label="IdWorker生成主键" value="IdWorker" />
              <el-option label="自增长" value="AutoGrow" />
            </el-select>
          </Form-item>
          <Form-item label="查询模式" prop="queryMode" class="width-32">
            <!--            <Input v-model="formObj.queryMode" name="queryMode" placeholder="请选择查询模式" clearable />-->
            <el-select v-model="formObj.queryMode" style="width: 100%" placeholder="请选择查询模式">
              <el-option label="单表查询" value="单表查询" />
              <el-option label="组合查询" value="组合查询" />
            </el-select>
          </Form-item>
          <Form-item label="主题模板" prop="themeTemplate" class="width-32">
            <!--            <Input v-model="formObj.themeTemplate" name="themeTemplate" placeholder="请选择主题模板" clearable />-->
            <el-select v-model="formObj.themeTemplate" style="width: 100%" placeholder="请选择主题模板">
              <el-option label="默认主题" value="默认主题" />
              <el-option label="ERP主题（一对多）" value="ERP主题" />
            </el-select>
          </Form-item>
          <Form-item label="表单风格" prop="formTemplate" class="width-32">
            <!--            <Input v-model="formObj.formTemplate" name="formTemplate" placeholder="请选择表单风格" clearable />-->
            <el-select v-model="formObj.formTemplate" style="width: 100%" placeholder="请选择表单风格">
              <el-option label="一列" value="一列" />
              <el-option label="两列" value="两列" />
              <el-option label="三列" value="三列" />
              <el-option label="四列" value="四列" />
              <el-option label="自适应" value="自适应" />
            </el-select>
          </Form-item>
          <Form-item label="滚动条" prop="scroll" class="width-32">
            <!--            <Input v-model="formObj.scroll" name="scroll" placeholder="请选择是否显示滚动条" clearable />-->
            <el-select v-model="formObj.scroll" style="width: 100%" placeholder="请选择是否显示滚动条">
              <el-option label="无" value="0" />
              <el-option label="有" value="1" />
            </el-select>
          </Form-item>
          <Form-item label="显示复选框" prop="isCheckbox" class="width-32">
            <!--            <Input v-model="formObj.isCheckbox" name="isCheckbox" placeholder="请选择是否显示复选框" clearable />-->

            <el-select v-model="formObj.isCheckbox" style="width: 100%" placeholder="请选择是否显示复选框">
              <el-option label="否" value="0" />
              <el-option label="是" value="1" />
            </el-select>
          </Form-item>

          <Form-item label="是否分页" prop="isPage" class="width-32">
            <!--            <Input v-model="formObj.isPage" name="isPage" placeholder="请选择是否分页" clearable />-->
            <el-select v-model="formObj.isPage" style="width: 100%" placeholder="请选择是否分页">
              <el-option label="否" value="0" />
              <el-option label="是" value="1" />
            </el-select>
          </Form-item>

          <Form-item label="是否树" prop="isTree" class="width-32">
            <!--            <Input v-model="formObj.isTree" name="isTree" placeholder="请选择是否树" clearable />-->
            <el-select v-model="formObj.isTree" style="width: 100%" placeholder="请选择是否树">
              <el-option label="否" value="0" />
              <el-option label="是" value="1" />
            </el-select>
          </Form-item>
        </Form>
      </div>

      <div style="margin-left: 10px">
        <el-tabs v-model="activeName" @tab-click="handleClick">
          <el-tab-pane label="数据库属性" name="first">
            <FormField ref="formFieldRef" @on-result-change="_filedBack" />
          </el-tab-pane>
          <el-tab-pane label="页面属性" name="second">
            <FormAttribute ref="formAttributeRef" />
          </el-tab-pane>
          <el-tab-pane label="校验字段" name="third">
            <FormVerification ref="formVerificationRef" />
          </el-tab-pane>
          <el-tab-pane label="定时任务补偿" name="fourth">
            定时任务补偿
          </el-tab-pane>
        </el-tabs>
      </div>

      <div slot="footer">
        <modal-footer ref="footerModal" :footer="footerList" @on-result-change="_footerResult" />
      </div>
    </Modal>
  </div>
</template>
<script>
/**
 * 添加编辑
 */
import { onlFormHead } from '../../api'
import FormField from './FormField'
import FormAttribute from './FormAttribute'
import FormVerification from './FormVerification'
export default {
  components: { FormField, FormAttribute, FormVerification },
  data() {
    return {
      id: '',
      tableData: [],
      modalTitle: '添加',
      formObj: {
        tableName: '',
        tableTxt: '',
        tableType: '0',
        formCategory: '导入表单',
        idType: 'IdWorker',
        queryMode: '单表查询',
        themeTemplate: '默认主题',
        formTemplate: '一列',
        scroll: '0',
        isCheckbox: '1',
        isPage: '1',
        isTree: '0'
      },
      activeName: 'first',
      ruleValidate: {
        tableName: [
          { required: true, message: '表名称不能为空', trigger: 'blur' }
        ],
        tableTxt: [
          { required: true, message: '表描述不能为空', trigger: 'blur' }
        ]
      },
      showEditModal: false,
      footerList: [
        { id: '', name: '取消', type: '' },
        { id: '', name: '保存', type: 'primary' }
      ]
    }
  },
  mounted() {},
  methods: {
    // modal
    _footerResult(name) {
      switch (name) {
        case '取消':
          this._cancel()
          break
        case '保存':
          this._ok()
          break
      }
    },
    _initTabs() {
      this.tableData = []
      const id = {
        dbFieldName: 'id',
        dbFieldTxt: '主键',
        dbLength: '64',
        dbPointLength: '0',
        dbDefaultVal: '',
        dbType: 'Long',
        dbIsKey: '1',
        dbIsNull: '',
        isShowForm: 0,
        isShowList: 0,
        isReadOnly: 1,
        fieldShowType: 'text',
        fieldLength: 120,
        isQuery: 0,
        queryMode: 'single'
      }
      const createBy = {
        dbFieldName: 'create_by',
        dbFieldTxt: '创建人',
        dbLength: '50',
        dbPointLength: '0',
        dbDefaultVal: '',
        dbType: 'String',
        dbIsKey: '0',
        dbIsNull: '1',
        isShowForm: 0,
        isShowList: 0,
        isReadOnly: 1,
        fieldShowType: 'text',
        fieldLength: 120,
        isQuery: 0,
        queryMode: 'single'
      }
      const createTime = {
        dbFieldName: 'create_time',
        dbFieldTxt: '创建日期',
        dbLength: '20',
        dbPointLength: '0',
        dbDefaultVal: '',
        dbType: 'Date',
        dbIsKey: '0',
        dbIsNull: '1',
        isShowForm: 0,
        isShowList: 0,
        isReadOnly: 1,
        fieldShowType: 'datetime',
        fieldLength: 120,
        isQuery: 0,
        queryMode: 'single'
      }
      const updateBy = {
        dbFieldName: 'update_by',
        dbFieldTxt: '更新人',
        dbLength: '50',
        dbPointLength: '0',
        dbDefaultVal: '',
        dbType: 'String',
        dbIsKey: '0',
        dbIsNull: '1',
        isShowForm: 0,
        isShowList: 0,
        isReadOnly: 1,
        fieldShowType: 'text',
        fieldLength: 120,
        isQuery: 0,
        queryMode: 'single'
      }

      const updateTime = {
        dbFieldName: 'update_time',
        dbFieldTxt: '更新日期',
        dbLength: '20',
        dbPointLength: '0',
        dbDefaultVal: '',
        dbType: 'Date',
        dbIsKey: '0',
        dbIsNull: '1',
        isShowForm: 0,
        isShowList: 0,
        isReadOnly: 1,
        fieldShowType: 'datetime',
        fieldLength: 120,
        isQuery: 0,
        queryMode: 'single'
      }
      this.tableData.push(id)
      this.tableData.push(createBy)
      this.tableData.push(createTime)
      this.tableData.push(updateBy)
      this.tableData.push(updateTime)
      this.$refs.formFieldRef._initTableData(this.tableData)
    },
    _filedBack(data) {
      if (data === '添加') {
        this.tableData.push({})
      }
      console.log('--_filedBack--', data)
    },
    handleClick(tab, event) {
      console.log('--tab--', tab)
      console.log('--event--', event)
      if (tab.name === 'second') {
        console.log('tab.name', tab.name)
        this.$refs.formAttributeRef._initTableData(this.tableData)
      } else if (tab.name === 'first') {
        console.log('tab.name', tab.name)
        this.$refs.formFieldRef._initTableData(this.tableData)
      } else if (tab.name === 'third') {
        console.log('tab.name', tab.name)
        this.$refs.formVerificationRef._initTableData(this.tableData)
      }
    },
    _hideLoading() {
      this.$refs.footerModal._hideLoading()
    },
    _resultChange(result, msg) {
      if (result) {
        this.showEditModal = false
        this.$Message.success(msg)
        this.$emit('on-result-change')
      }
      this._hideLoading()
    },
    _ok() {
      this.$refs.formObj.validate(valid => {
        if (valid) {
          const data = this.$serialize('edit-form-online-table-edit')
          this.$extend(data, this.formObj)
          const tables = { head: data, fields: this.tableData }
          console.log('---tables---', tables)
          this._save(tables)
        } else {
          this.$Message.error('表单验证失败')
          this._hideLoading()
        }
      })
    },
    // 添加、编辑保存
    _save: async function(data) {
      // 添加
      if (this.$string(this.id).isEmpty()) {
        const result = await onlFormHead.addOnlineTable(data)
        this._resultChange(result, '添加成功')
      } else {
        // 编辑
        const result = await onlFormHead.edit({
          id: this.formObj.id,
          obj: data
        })
        this._resultChange(result, '编辑成功')
      }
    },
    _cancel() {
      this.showEditModal = false
    },
    _open(formObj) {
      this._initTabs()
      this.$refs.formObj.resetFields()
      this.showEditModal = true
      this._hideLoading()
      if (this.$string(formObj).isEmpty()) {
        this.id = ''
        this.modalTitle = '添加物料类型'
      } else {
        this.id = formObj.id
        this.formObj = formObj
        this.modalTitle = '编辑物料类型'
      }
    }
  }
}
</script>
