<template>
  <div class="page">
    <!-- <header>
      <i class="el-icon-arrow-left"
         @click="goBack"></i>
      库表—{{status}}
    </header> -->
    <el-form ref="form"
             class="form"
             :model="form"
             :rules="rules">
      <el-form-item label="系统名"
                    prop="systemCode"
                    class="dataItem">
        <el-select size="small"
                    clearable
                    filterable
                    :disabled="code === 'edit' || isShow"
                    v-model="form.systemCode"
                    placeholder="请选择系统">
            <el-option v-for="(item, index) in dataSource"
                    :key="index"
                    :label="item.systemCode"
                    :value="item.systemCode">
            </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="表名(英)"
                    prop="tableName"
                    class="dataItem">
        <el-input v-model="form.tableName"
                :disabled="code === 'edit' || isShow"
                  size="small"></el-input>
      </el-form-item>
      <el-form-item label="表名(中)"
                    prop="tableCnName"
                    class="dataItem">
        <el-input v-model="form.tableCnName"
                    :disabled="code === 'edit' || isShow"
                  size="small"></el-input>
      </el-form-item>
      <el-form-item label="表描述"
                    prop="tableDesc"
                    class="dataItem">
        <el-input v-model="form.tableDesc"
                    :disabled="isShow"
                  size="small"></el-input>
      </el-form-item>
      <el-form-item label="表类型"
                    prop="tableType"
                    class="dataItem">
        <el-select size="small"
                   v-model="form.tableType"
                    :disabled="isShow"
                   placeholder="表类型"
                   class="dataItem">
          <el-option v-for="item in dataType"
                     :key="item.index"
                     :label="item.typeName"
                     :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="UI界面"
                    prop="uiUrl"
                    class="dataItem">
        <el-input v-model="form.uiUrl"
                    :disabled="isShow"
                  size="small"></el-input>
      </el-form-item>
      <el-form-item label="Action类"
                    prop="actionName"
                    class="dataRow">
        <el-input v-model="form.actionName"
                    :disabled="isShow"
                  size="small"></el-input>
      </el-form-item>
      <el-form-item label="SERVICE类"
                    prop="serviceName"
                    class="dataRow">
        <el-input v-model="form.serviceName"
                    :disabled="isShow"
                  size="small"></el-input>
      </el-form-item>
      <el-form-item label="MAPPER类"
                    prop="mapperName"
                    class="dataRow">
        <el-input v-model="form.mapperName"
                    :disabled="isShow"
                  size="small"></el-input>
      </el-form-item>
      <el-form-item label="PO类"
                    prop="daoName"
                    class="dataRow">
        <el-input v-model="form.daoName"
                    :disabled="isShow"
                  size="small"></el-input>
      </el-form-item>
      <el-form-item label="表空间"
                    prop="tbsName"
                    class="dataItem">
        <el-input v-model="form.tbsName"
                    :disabled="isShow"
                  size="small"></el-input>
      </el-form-item>
      <el-form-item label="历史表名"
                    prop="hisTabCode"
                    class="dataItem">
        <el-input v-model="form.hisTabCode"
                    :disabled="isShow"
                  size="small"></el-input>
      </el-form-item>
      <el-form-item label="加载方式"
                    prop="loadMethod"
                    class="dataItem">
        <el-input v-model="form.loadMethod"
                    :disabled="isShow"
                  size="small"></el-input>
      </el-form-item>
      <el-form-item label="数据存储状态"
                    prop="dataStatus"
                    class="dataItem">
        <el-select size="small"
                   v-model="form.dataStatus"
                    :disabled="isShow"
                   class="dataItem">
          <el-option v-for="item in dataStatusList"
                     :key="item.value"
                     :label="item.label"
                     :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="树型结构"
                    prop="isTreeStruct"
                    class="dataItem">
        <el-select size="small"
                   v-model="form.isTreeStruct"
                    :disabled="isShow"
                   class="dataItem">
          <el-option v-for="item in yesOrNo"
                     :key="item.index"
                     :label="item.label"
                     :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="记操作日志"
                    prop="isLog"
                    class="dataItem">
        <el-select size="small"
                   v-model="form.isLog"
                    :disabled="isShow"
                   class="dataItem">
          <el-option v-for="item in yesOrNo"
                     :key="item.index"
                     :label="item.label"
                     :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="关闭保存"
                    prop="isCloseSaved"
                    class="dataItem">
        <el-select size="small"
                   v-model="form.isCloseSaved"
                    :disabled="isShow"
                   class="dataItem">
          <el-option v-for="item in yesOrNo"
                     :key="item.index"
                     :label="item.label"
                     :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="数据权限控制"
                    prop="isDaControl"
                    class="dataItem">
        <el-select size="small"
                   v-model="form.isDaControl"
                    :disabled="isShow"
                   class="dataItem">
          <el-option v-for="item in yesOrNo"
                     :key="item.index"
                     :label="item.label"
                     :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="是否虚表"
                    prop="isVirtual"
                    class="dataItem">
        <el-select size="small"
                    :disabled="isShow"
                   v-model="form.isVirtual"
                   class="dataItem">
          <el-option v-for="item in yesOrNo"
                     :key="item.index"
                     :label="item.label"
                     :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="状态"
                    prop="status"
                    class="dataItem">
        <el-select size="small"
                   v-model="form.status"
                    :disabled="isShow"
                   class="dataItem">
          <el-option v-for="item in tableStatus"
                     :key="item.index"
                     :label="item.label"
                     :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>
      <div class="searchButton"
           v-if="!isShow">
        <el-button type="primary"
                   @click="saveData"
                   size="small"
                   icon="el-icon-document">保存</el-button>
      </div>
    </el-form>
  </div>
</template>
<script>
import qs from 'qs';
import { checkCharLength,
        checkCharLength2,
        checkCharNoChinese,
        checkCharNoChinese2,
        checkCharNoChinese3,
        checkChar,
        checkChinese,
        checkURL} from '@/utils/validator.js';
export default {
    props: {
        code: String,
        item: Object,
        dialogColose: {
            type: Boolean,
            default: function () {
                return false;
            }
        }
    },
    data () {
        return {
            status: '查看',
            isShow: false,
            form: {
                id: '',
                systemCode: '',
                tableName: '',
                tableCnName: '',
                tableDesc: '',
                tableType: '1',
                uiUrl: '',
                actionName: '',
                serviceName: '',
                mapperName: '',
                daoName: '',
                tbsName: '',
                hisTabCode: '',
                loadMethod: '',
                dataStatus: '',
                isTreeStruct: '0',
                isLog: '0',
                isCloseSaved: '0',
                isDaControl: '0',
                isVirtual: '0',
                status: '1'
            },
            rules: {
                    systemCode: [
                        { required: true, message: '请选择系统', trigger: 'blur' },
                        { validator: checkCharLength, max: 100, trigger: 'change' }
                    ],
                    tableName: [
                        { required: true, message: '请输入表名', trigger: 'blur' },
                        { validator: checkCharNoChinese, trigger: 'change' },
                        { validator: checkCharLength, max: 36, trigger: 'change' }
                    ],
                    dataType: [
                        { required: true, message: '请选择表类型', trigger: 'blur' }
                    ],
                    tableCnName: [
                        { validator: checkChar, trigger: 'change' },
                        { validator: checkCharLength2, max: 500, trigger: 'change' }
                    ],
                    tableDesc: [
                        { validator: checkChar, trigger: 'change' },
                        { validator: checkCharLength2, max: 500, trigger: 'change' }
                    ],
                    uiUrl: [
                        { validator: checkURL, trigger: 'change' },
                        { validator: checkCharLength, max: 255, trigger: 'change' }
                    ],
                    actionName: [
                        { validator: checkCharNoChinese, trigger: 'change' },
                        { validator: checkCharLength, max: 255, trigger: 'change' }
                    ],
                    serviceName: [
                        { validator: checkCharNoChinese, trigger: 'change' },
                        { validator: checkCharLength, max: 255, trigger: 'change' }
                    ],
                    mapperName: [
                        { validator: checkCharNoChinese, trigger: 'change' },
                        { validator: checkCharLength, max: 255, trigger: 'change' }
                    ],
                    daoName: [
                        { validator: checkCharNoChinese, trigger: 'change' },
                        { validator: checkCharLength, max: 255, trigger: 'change' }
                    ],
                    tbsName: [
                        { validator: checkCharNoChinese, trigger: 'change' },
                        { validator: checkCharLength, max: 100, trigger: 'change' }
                    ],
                    hisTabCode: [
                        { validator: checkCharNoChinese, trigger: 'change' },
                        { validator: checkCharLength, max: 36, trigger: 'change' }
                    ],
                    loadMethod: [
                        { validator: checkCharNoChinese, trigger: 'change' },
                        { validator: checkCharLength, max: 10, trigger: 'change' }
                    ]
                },
            dataType: [{
                typeName: '系统表',
                value: '1'
            }, {
                typeName: '业务（应用）表',
                value: '2'
            }, {
                typeName: '平台表',
                value: '3'
            }],
            yesOrNo: [{
                label: '是',
                value: '1'
            }, {
                label: '否',
                value: '0'
            }],
            tableStatus: [{
                label: '有效',
                value: '1'
            }, {
                label: '无效',
                value: '0'
            }],
            dataStatusList: [
                {
                    value: '1',
                    label: '只保存最新数据'
                }, {
                    value: '2',
                    label: '保存历史数据'
                }, {
                    value: '3',
                    label: '历史'
                }
            ],
            dataSource: [],
            isEdit: false
        }
    },
  mounted: function () {
    this.clearForm();
    this.getDataSource();
    if (this.code === 'show') {
      this.isShow = true;
      this.status = '查看'
      this.setForm(this.item)
    } else if (this.code === 'add') {
      this.status = '新增';
    } else {
      this.status = '修改';
      this.isEdit = true;
      this.setForm(this.item)
    }
  },
  watch: {
      dialogColose: function (newValue) {
          if (!newValue) {
                this.clearForm();
                if (this.code === 'show') {
                    this.isShow = true;
                    this.status = '查看'
                    this.setForm(this.item)
                } else if (this.code === 'add') {
                    this.status = '新增';
                } else {
                    this.status = '修改';
                    this.isEdit = true;
                    this.setForm(this.item)
                }
          } else {
            this.isShow = false;
          }
      }
  },
  methods: {
    setForm (data) {
      let that = this;
      for (let i in that.form) {
        that.form[i] = data[i]
      }
    },
    clearForm () {
        for (let item in this.form) {
            this.form[item] = ''
        }
        this.form['isTreeStruct'] = '0'
        this.form['isTreeStruct'] = '0'
        this.form['isLog'] = '0'
        this.form['isCloseSaved'] = '0'
        this.form['isDaControl'] = '0'
        this.form['isVirtual'] = '0'
        this.form['status'] = '1'
        this.form['tableType'] = '1'
        this.form['dataStatus'] = '1'
    },
    goBack () {
      this.$router.go(-1)
    },
    saveData () {
        let that = this;
        this.$refs['form'].validate((valid) => {
            if (valid) {
                if (this.isEdit) {
                    that.axios.put('pass/v1/mdtables/' + that.form.id,
                    that.form
                    ).then(function (response) {
                        if (response.code === '0') {
                            that.$message.success('编辑成功');
                            that.$emit('save', response.data);
                            that.clearForm();
                        } else {
                            that.$message.error(response.message);
                        }
                    }).catch(function () {
                        that.clearForm();
                    });
                } else {
                    delete that.form.id;
                    for (let i in that.form) {
                        if (!that.form[i]) {
                            delete that.form[i]
                        }
                    }
                    that.axios.post('pass/v1/mdtables/', that.form).then(function (response) {
                        if (response.code === '0') {
                            that.$message.success('新增成功');
                            that.$emit('add', response.data);
                            that.clearForm();
                        } else {
                            that.$message.error(response.message);
                        }
                    }).catch(function () {
                        that.clearForm();
                    });
                }
            } else {
                // this.$message.error('保存失败，请填写必填项!')
            }
        })
    },
    getDataSource () {
        let that = this;
        that.axios.get('pass/v1/mdtables/queryDatasource').then(res => {
            if (res.code === '0') {
                that.dataSource = res.data;
            }
        }).catch(() => {})
    }
  }
}
</script>
<style scoped>
.page {
  padding: 10px;
}
header {
  width: 100%;
  height: 50px;
  background: rgb(248, 248, 248);
  padding-left: 60px;
  font-size: 15px;
  color: #000;
  line-height: 50px;
  position: relative;
}
header i {
  display: block;
  width: 50px;
  height: 50px;
  position: absolute;
  left: 0;
  top: 0;
  text-align: center;
  line-height: 50px;
  font-size: 25px;
  cursor: pointer;
}
header i:hover {
  color: #70baf2;
}
.form {
  width: 100%;
  height: auto;
  padding: 10px 0;
  text-align: left;
}
.dataItem {
  width: 48.7%;
  display: inline-block;
  margin: 0 0.5%
}
.el-select--small {
  width: 100% !important;
}
.dataRow {
  width: 99%;
  margin: 0 0.5%;
}
.searchButton {
  width: 100%;
  text-align: center;
}
.searchButton button {
  display: inline-block;
}
.el-form-item {
    margin-bottom: 10px !important;
}
</style>
