<template>
    <div class="detail-page">
        <!-- <header>
      <i class="el-icon-arrow-left"
         @click="goBack"></i>
      字段管理—{{status}}
    </header> -->
        <el-form
            ref="form"
            class="form"
            :model="form"
            :rules="rules"
            label-width="100px"
        >
            <!-- <el-form-item label="系统名"
                    prop="systemCode"
                    class="dataItem">
        <el-select size="small"
                    clearable
                    filterable
                    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-select
                    size="small"
                    style="width: 100%;"
                    clearable
                    filterable
                    @change="changeTable"
                    :disabled="code === 'edit' || isShow"
                    v-model="form.tableName"
                    placeholder="请选择主表"
                >
                    <el-option
                        v-for="(item, index) in tableData"
                        :key="index"
                        :label="item.tableName"
                        :value="item.tableName"
                    >
                    </el-option>
                </el-select>
            </el-form-item>
            <!-- <el-form-item label="表ID"
                    prop="tableId"
                    class="dataItem">
        <el-input v-model="form.tableId"
                  :disabled="isShow"
                  size="small"></el-input>
      </el-form-item> -->
            <el-form-item
                label="字段(英)"
                prop="fieldName"
                class="dataItem"
            >
                <el-input
                    v-model="form.fieldName"
                    style="width: 100%;"
                    :disabled="code === 'edit' || isShow"
                    size="small"
                ></el-input>
            </el-form-item>
            <el-form-item
                label="字段名(中)"
                prop="fieldCnName"
                class="dataItem"
            >
                <el-input
                    v-model="form.fieldCnName"
                    style="width: 100%;"
                    :disabled="code === 'edit' || isShow"
                    size="small"
                ></el-input>
            </el-form-item>
            <el-form-item
                label="字段描述"
                prop="fieldDesc"
                class="dataItem"
            >
                <el-input
                    v-model="form.fieldDesc"
                    style="width: 100%;"
                    :disabled="isShow"
                    size="small"
                ></el-input>
            </el-form-item>
            <el-form-item
                label="字段类型"
                prop="fieldType"
                class="dataItem"
            >
                <el-select
                    size="small"
                    style="width: 100%;"
                    clearable
                    :disabled="code === 'edit' || isShow"
                    filterable
                    v-model="form.fieldType"
                    placeholder="请选择系统"
                >
                    <el-option
                        v-for="(item, index) in fieldTypeList"
                        :key="index"
                        :label="item.dictCode"
                        :value="item.dictCode"
                    >
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item
                label="字段长度"
                prop="fieldLen"
                class="dataItem"
            >
                <el-input
                    v-model="form.fieldLen"
                    style="width: 100%;"
                    :disabled="isShow"
                    size="small"
                ></el-input>
            </el-form-item>
            <el-form-item
                label="实体类属性名"
                prop="objName"
                class="dataItem"
            >
                <el-input
                    v-model="form.objName"
                    style="width: 100%;"
                    :disabled="isShow"
                    size="small"
                ></el-input>
            </el-form-item>
            <el-form-item
                label="显示顺序"
                prop="fieldSeq"
                class="dataItem"
            >
                <el-input
                    v-model="form.fieldSeq"
                    style="width: 100%;"
                    :disabled="isShow"
                    size="small"
                ></el-input>
            </el-form-item>
            <el-form-item
                label="数据格式"
                prop="dataFmt"
                class="dataItem"
            >
                <el-input
                    v-model="form.dataFmt"
                    style="width: 100%;"
                    :disabled="isShow"
                    size="small"
                ></el-input>
            </el-form-item>
            <el-form-item
                label="代码字典"
                prop="dictType"
                class="dataItem"
            >
                <el-input
                    v-model="form.dictType"
                    style="width: 100%;"
                    :disabled="isShow"
                    size="small"
                ></el-input>
            </el-form-item>
            <el-form-item
                label="约束条件"
                prop="consCond"
                class="dataItem"
            >
                <el-input
                    v-model="form.consCond"
                    style="width: 100%;"
                    :disabled="isShow"
                    size="small"
                ></el-input>
            </el-form-item>
            <el-form-item
                label="默认值"
                prop="defVal"
                class="dataItem"
            >
                <el-input
                    v-model="form.defVal"
                    style="width: 100%;"
                    :disabled="isShow"
                    size="small"
                ></el-input>
            </el-form-item>
            <el-form-item
                label="输入框默认信息"
                prop="bankTextInf"
                class="dataItem"
            >
                <el-input
                    v-model="form.bankTextInf"
                    style="width: 100%;"
                    :disabled="isShow"
                    size="small"
                ></el-input>
            </el-form-item>
            <el-form-item
                label="输入框提示信息"
                prop="tipInf"
                class="dataItem"
            >
                <el-input
                    v-model="form.tipInf"
                    style="width: 100%;"
                    :disabled="isShow"
                    size="small"
                ></el-input>
            </el-form-item>
            <el-form-item
                label="label文本"
                prop="labelInf"
                class="dataItem"
            >
                <el-input
                    v-model="form.labelInf"
                    style="width: 100%;"
                    :disabled="isShow"
                    size="small"
                ></el-input>
            </el-form-item>
            <el-form-item
                label="字段是否为空"
                prop="isNull"
                class="dataItem"
            >
                <el-select
                    size="small"
                    style="width: 100%;"
                    v-model="form.isNull"
                    :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="isTableView"
                    class="dataItem">
        <el-select size="small"
                   v-model="form.isTableView"
                   :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="isAddRead"
                    class="dataItem">
        <el-select size="small"
                   v-model="form.isAddRead"
                   :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="isUpdRead"
                    class="dataItem">
        <el-select size="small"
                   v-model="form.isUpdRead"
                   :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="status"
                class="dataItem"
            >
                <el-select
                    size="small"
                    style="width: 100%;"
                    v-model="form.status"
                    :disabled="isShow"
                    class="dataItem"
                >
                    <el-option
                        v-for="item in fieldStatus"
                        :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,
    checkNumber,
    checkChinese,
    checkURL} from '@/utils/validator.js';
export default {
    props: {
        code: String,
        item: Object,
        dialogColose: {
            type: Boolean,
            default: function () {
                return false;
            }
        }
    },
    data () {
        return {
            isShow: false,
            status: '查看',
            form: {
                id: '',
                fieldId: '',
                tableId: '',
                systemCode: '',
                tableName: '',
                fieldName: '',
                fieldCnName: '',
                fieldDesc: '',
                fieldType: '',
                fieldLen: '',
                precision: '',
                fieldSeq: '',
                dataFmt: '',
                dictType: '',
                objName: '',
                consCond: '',
                defVal: '',
                isNull: '',
                isPk: '',
                isUqIdx: '',
                isRedundant: '',
                srcFieldName: '',
                isDataAuth: '',
                isParentid: '',
                bankTextInf: '',
                tipInf: '',
                labelInf: '',
                isTableView: '',
                isAddRead: '',
                isUpdRead: '',
                eleType: '',
                isAddView: '',
                isUpdView: '',
                isQueryCond: '',
                status: '1',
                crtUserCode: '',
                crtOrgCode: '',
                crtDate: '',
                updUserCode: '',
                updOrgCode: '',
                updDate: ''
            },
            rules: {
                systemCode: [
                    { required: true, message: '请选择系统', trigger: 'blur' }
                ],
                tableName: [
                    { required: true, message: '请选择表', trigger: 'blur' }
                ],
                fieldName: [
                    { required: true, message: '字段名不能为空', trigger: 'blur' },
                    { validator: checkCharLength, max: 100, trigger: 'change' },
                    { validator: checkCharNoChinese, trigger: 'change' }
                ],
                fieldCnName: [
                    { validator: checkCharLength2, max: 500, trigger: 'change' },
                    { validator: checkChar, trigger: 'change' }
                ],
                fieldDesc: [
                    { validator: checkCharLength2, max: 500, trigger: 'change' },
                    { validator: checkChar, trigger: 'change' }
                ],
                fieldSeq: [
                    { validator: checkNumber, trigger: 'change' },
                    { validator: checkCharLength, max: 100, trigger: 'change' }
                ],
                fieldType: [
                    { required: true, message: '字段类型不能为空', trigger: 'blur' }
                ],
                fieldLen: [
                    { required: true, message: '字段长度不能为空', trigger: 'blur' },
                    { validator: checkNumber, trigger: 'change' },
                    { validator: checkCharLength, max: 100, trigger: 'change' }
                ],
                dataFmt: [
                    { validator: checkCharLength, max: 100, trigger: 'change' },
                    { validator: checkCharNoChinese, trigger: 'change' }
                ],
                dictType: [
                    { validator: checkCharLength, max: 36, trigger: 'change' },
                    { validator: checkCharNoChinese, trigger: 'change' }
                ],
                consCond: [
                    { validator: checkCharLength, max: 255, trigger: 'change' },
                    { validator: checkCharNoChinese3, trigger: 'change' }
                ],
                defVal: [],
                bankTextInf: [],
                tipInf: [],
                labelInf: []
            },
            yesOrNo: [{
                label: '是',
                value: '1'
            }, {
                label: '否',
                value: '0'
            }],
            fieldStatus: [{
                label: '有效',
                value: '1'
            }, {
                label: '无效',
                value: '0'
            }],
            isEdit: false,
            dataSource: [],
            fieldTypeList: [],
            tableData: []

        }
    },
    mounted: function () {
        this.clearForm();
        this.getDataSource();
        this.getFieldType();
        this.queryTable();
        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) {
            this.clearForm();
            if (!newValue) {
                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]
            }
        },
        goBack () {
            this.$router.go(-1)
        },
        saveData () {
            let that = this;
            this.$refs['form'].validate((valid) => {
                if (valid) {
                    if (this.isEdit) {
                        that.axios.put('pass/v1/mdfields/' + 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;
                        that.axios.post('pass/v1/mdfields/', 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('保存失败，请填写必填项!')
                }
            })
        },
        clearForm () {
            for (let item in this.form) {
                this.form[item] = ''
            }
            this.form['status'] = '1'
        },
        getDataSource () {
            let that = this;
            that.axios.get('pass/v1/mdtables/queryDatasource').then(res => {
                if (res.code === '0') {
                    that.dataSource = res.data;
                }
            }).catch(() => { })
        },
        getFieldType () {
            let that = this;
            that.axios.get('pass/v1/sysdicts/?pDictId=*FIELD_TYPE').then(res => {
                if (res.code === '0') {
                    that.fieldTypeList = res.data.list
                }
            })
        },
        // 获取表
        queryTable: function () {
            let that = this,
                defaultParms = {
                    pageSize: 1000,
                    pageNum: 1
                },
                params = defaultParms,
                getUrl = 'pass/v1/mdtables/';
            that.axios.get(getUrl, {
                params: params
            }
            ).then(function (response) {
                if (response) {
                    let data = response.data;
                    that.tableData = data.list;
                }
            }).catch(function () {
            });
        },
        changeTable (val) {
            for (let i = 0; i < this.tableData.length; i++) {
                if (this.tableData[i].tableName === val) {
                    this.form.tableId = this.tableData[i].id;
                    break;
                }
            }
        }
    }
}
</script>
<style scoped>
.detail-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%;
    display: inline-block;
}
.el-select--small {
    width: 100% !important;
}
.dataRow {
    width: 96.4%;
}
.searchButton {
    width: 100%;
    text-align: center;
}
.searchButton button {
    display: inline-block;
}
</style>
