<template>
    <div class="page">
        <div class="searchArea">
            <el-form
                ref="form"
                v-model="search"
                inline
            >
                <el-form-item class="searchItem">
                    <el-input
                        class="auto-input-width"
                        v-model="search.tableName"
                        placeholder="表名(英)"
                        size="small"
                    ></el-input>
                </el-form-item>
                <!-- <el-form-item class="searchItem">
                    <el-input
                        class="auto-input-width"
                        v-model="search.tableCnName"
                        placeholder="表名(中)"
                        size="small"
                    ></el-input>
                </el-form-item> -->
                <el-form-item class="searchItem">
                    <el-input
                        class="auto-input-width"
                        v-model="search.fieldName"
                        placeholder="字段名(英)"
                        size="small"
                    ></el-input>
                </el-form-item>
                <el-form-item class="searchItem">
                    <el-input
                        class="auto-input-width"
                        v-model="search.fieldCnName"
                        placeholder="字段名(中)"
                        size="small"
                    ></el-input>
                </el-form-item>
                <el-form-item
                    class="searchItem"
                >
                    <el-select
                        size="small"
                        style="width: 95px;"
                        v-model="search.isPk"
                        placeholder="是否主键"
                        class="searchItem"
                    >
                        <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
                    class="searchItem"
                >
                    <el-button
                        type="primary"
                        @click="searchData(1)"
                        size="small"
                        icon="el-icon-search"
                        v-privilege="activeMenu + 'QUERY'"
                    >查询</el-button>
                    <el-button
                        type="primary"
                        @click="cancel"
                        size="small"
                        icon="el-icon-refresh"
                        v-privilege="activeMenu + 'QUERY'"
                    >重置</el-button>
                    <el-button
                        type="primary"
                        size="small"
                        icon="el-icon-circle-plus-outline"
                        @click="addRow"
                        v-privilege="activeMenu + 'ADD'"
                    >新增</el-button>
                </el-form-item>
            </el-form>
        </div>
        <!-- <div class="controlBar">
    </div> -->
        <!-- <div class="controlBar">
      <ul>
        <li @click="addRow">
          <i class="el-icon-circle-plus-outline"></i>
          <span>新增</span>
        </li>
        <li @click="editRow">
          <i class="el-icon-edit"></i>
          <span>修改</span>
        </li>
        <li @click="deletRow">
          <i class="el-icon-delete"></i>
          <span>删除</span>
        </li>
        <li @click="showRow">
          <i class="el-icon-view"></i>
          <span>查看</span>
        </li>
      </ul>
    </div> -->
        <div class="table">
            <el-table
                v-loading="tableLoading"
                :data="tableData"
                ref="singleTable"
                :height="tableHeight"
                border
                @selection-change="selsChange"
            >
                <el-table-column
                    prop="tableName"
                    :show-overflow-tooltip="true"
                    align="center"
                    label="表名(英)"
                ></el-table-column>
                <el-table-column
                    prop="fieldName"
                    :show-overflow-tooltip="true"
                    align="center"
                    label="字段名(英)"
                ></el-table-column>
                <el-table-column
                    prop="fieldCnName"
                    :show-overflow-tooltip="true"
                    align="center"
                    label="字段名(中)"
                ></el-table-column>
                <el-table-column
                    prop="objName"
                    :show-overflow-tooltip="true"
                    align="center"
                    label="实体类属性名"
                ></el-table-column>
                <el-table-column
                    prop="fieldType"
                    :show-overflow-tooltip="true"
                    align="center"
                    label="字段类型"
                ></el-table-column>
                <el-table-column
                    prop="dictType"
                    :show-overflow-tooltip="true"
                    align="center"
                    width="80"
                    label="代码字典"
                ></el-table-column>
                <el-table-column
                    prop="fieldLen"
                    :show-overflow-tooltip="true"
                    align="center"
                    width="70"
                    label="字段长度"
                ></el-table-column>
                <el-table-column
                    prop="isPk"
                    :show-overflow-tooltip="true"
                    :formatter="statusFormat"
                    align="center"
                    width="80"
                    label="是否主键"
                ></el-table-column>
                <el-table-column
                    prop="isNull"
                    :show-overflow-tooltip="true"
                    :formatter="statusFormat"
                    align="center"
                    width="80"
                    label="是否为空"
                ></el-table-column>
                <!-- <el-table-column prop="isQueryCond"
                         :show-overflow-tooltip="true"
                         :formatter="statusFormat"
                         align="center"
                         width="100"
                         label="是否查询条件"></el-table-column> -->
                <el-table-column
                    prop="status"
                    width="80"
                    :show-overflow-tooltip="true"
                    :formatter="statusFormat"
                    align="center"
                    label="状态"
                ></el-table-column>
                <el-table-column
                    prop="fieldDesc"
                    :show-overflow-tooltip="true"
                    align="center"
                    width="300"
                    label="字段描述"
                ></el-table-column>
                <el-table-column
                    align="center"
                    width="250"
                    label="操作"
                    fixed="right"
                >
                    <template slot-scope="scope">
                        <el-button
                            type="danger"
                            size="small"
                            icon="el-icon-delete"
                            @click="deletRow(scope.row)"
                            v-privilege="activeMenu + 'DELETE'"
                        >删除</el-button>
                        <el-button
                            type="primary"
                            size="small"
                            icon="el-icon-edit"
                            @click="editRow(scope.row)"
                            v-privilege="activeMenu + 'PUT'"
                        >编辑</el-button>
                        <el-button
                            type="primary"
                            size="small"
                            icon="el-icon-view"
                            @click="showRow(scope.row)"
                            v-privilege="activeMenu + 'QUERY'"
                        >查看</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <div class="yt-table-page">
            <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="pageIndex"
                :page-sizes="[10, 20, 30, 40, 100, 200]"
                :page-size="pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total"
            >
            </el-pagination>
        </div>
        <el-dialog
            :title="oprtTitle"
            :visible.sync="dialogVisible"
            :before-close="handleClose"
            width="60%"
        >
            <detail
                v-if="dialogVisible"
                :code="status"
                :item="choiceItem"
                :dialogColose="dialogColose"
                @save="saveRow"
                @add="detailAddRow"
            ></detail>
        </el-dialog>
    </div>
</template>
<script>
import detail from './detail'
export default {
    name: 'fieldManagement',
    components: {
        detail
    },
    data () {
        return {
            activeMenu: '',
            tableLoading: false,
            search: {
                tableName: '',
                tableCnName: '',
                fieldName: '',
                fieldCnName: '',
                isPk: ''
            },
            tableData: [],
            yesOrNo: [{
                label: '是',
                value: 1
            }, {
                label: '否',
                value: 0
            }],
            arrID: 0,
            pageIndex: 1,
            pageSize: 20,
            total: 0,
            searchStatus: false,
            tableHeight: null,
            dialogVisible: false,
            dialogColose: false,
            choiceItem: {},
            oprtTitle: '新增字段',
            status: 'add'

        }
    },
    mounted () {
        let tableName = localStorage.getItem('tableName');
        if (tableName) {
            this.localTableName(tableName);
            localStorage.removeItem('tableName')
        } else {
            this.queryData();
        }
        this.$nextTick(() => {
            this.tableHeight = this.getRoleHeight(this.$refs['singleTable'].$el) - 70;
        });
    },
    created () {
        this.activeMenu = window.localStorage.getItem('activeMenu');
    },
    methods: {
        //  计算树区域高度
        getRoleHeight (dom) {
            return window.innerHeight - dom.offsetTop;
        },
        // 获取&查询数据
        queryData: function (status, url) {
            let that = this,
                defaultParms = {
                    pageSize: that.pageSize,
                    pageNum: that.pageIndex
                },
                params = status || defaultParms,
                getUrl = url || 'pass/v1/mdfields/';
            that.tableLoading = true;
            that.axios.get(getUrl, {
                params: params
            }
            ).then(function (response) {
                if (response) {
                    let data = response.data;
                    that.tableData = data.list;
                    that.total = data.total
                }
                that.tableLoading = false;
            }).catch(function () {
                that.tableLoading = false;
            });
        },
        // 选中事件切换
        selsChange (val) {
            var valIdx = [];
            for (var i = 0; i < val.length; i++) {
                var arrIDsame = false;
                valIdx.push(val[i]);
            }
            this.arrID = valIdx;
        },
        // 搜索
        searchData (status) {
            this.pageIndex = status || this.pageIndex;
            let that = this,
            params = {
                pageSize: that.pageSize,
                pageNum: that.pageIndex,
                tableName: that.search.tableName,
                tableCnName: that.search.tableCnName,
                fieldName: that.search.fieldName,
                fieldCnName: that.search.fieldCnName,
                isPk: that.search.isPk
            };
            that.searchStatus = true;
            that.queryData(params);
        },
        // 库表字段搜索
        localTableName (name) {
            let that = this,
                params = {
                    pageSize: that.pageSize,
                    pageNum: 1,
                    tableName: name,
                    tableCnName: '',
                    fieldName: '',
                    fieldCnName: '',
                    isPk: ''
                };
            that.pageIndex = 1
            that.searchStatus = true;
            that.queryData(params);
        },
        // 取消
        cancel () {
            let that = this;
            that.searchStatus = false;
            that.search.systemCode = '';
            that.search.tableName = '';
            that.search.tableCnName = '';
            that.search.tableDesc = '';
            that.search.fieldName = '';
            that.search.fieldCnName = '';
            that.search.isPk = '';
            that.pageIndex = 1;
            that.queryData();
        },
        // 分页方法
        handleCurrentChange (pageIndex) {
            this.pageIndex = pageIndex;
            this.searchStatus ? this.searchData() : this.queryData();
        },
        handleSizeChange (pageSize) {
            this.pageIndex = 1
            this.pageSize = pageSize;
            this.searchStatus ? this.searchData() : this.queryData();
        },
        // 编辑 新增 删除 查看 前往其他页面
        addRow () {
            //   this.$router.push({ name: 'fieldManagementDetail', params: { code: 'add' } })
            this.oprtTitle = '新增字段';
            this.status = 'add';
            this.choiceItem = {};
            this.dialogVisible = true;
            this.dialogColose = false;
        },
        editRow (item) {
            // this.$router.push({ name: 'fieldManagementDetail', params: { code: 'edit', data: this.arrID[0] } })
            this.oprtTitle = '修改字段';
            this.status = 'edit';
            this.choiceItem = item;
            this.dialogVisible = true;
            this.dialogColose = false;
        },
        deletRow (item) {
            let that = this;
            const h = this.$createElement;
            this.$msgbox({
                title: '删除数据',
                message: h('p', null, [
                    h('span', null, '确定要删除该条数据吗？ ')
                ]),
                showCancelButton: true,
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                beforeClose: (action, instance, done) => {
                    if (action === 'confirm') {
                        instance.confirmButtonText = '删除中...';
                        that.axios.delete('pass/v1/mdfields/' + item.id).then(function (response) {
                            if (response) {
                                done();
                                that.queryData();
                            }
                            that.tableLoading = false;
                        }).catch(function () {
                            that.tableLoading = false;
                        });
                    } else {
                        done();
                    }
                }
            }).then(action => {
                this.$message.success('删除成功');
            });
        },
        showRow (item) {
            // this.$router.push({ name: 'fieldManagementDetail', params: { code: 'show', data: this.arrID[0] } })
            this.oprtTitle = '查看字段';
            this.status = 'show';
            this.dialogVisible = true;
            this.choiceItem = item;
            this.dialogColose = false;
        },
        goPage () { },
        // 表格计算属性
        statusFormat (row, column) {
            let status = '';
            if (column.property !== 'status') {
                status = row[column.property] === '1' ? '是 ' : '否';
            } else {
                status = row[column.property] === '1' ? '无效 ' : '有效';
            }
            return status;
        },
        handleClose () {
            this.dialogColose = true;
            this.dialogVisible = false;
        },
        saveRow (item) {
            let index = this.getRowIndex(item);
            this.dialogVisible = false;
            this.$nextTick(() => {
                this.$refs['singleTable'].setCurrentRow(this.tableData[index]);
            })
        },
        detailAddRow (item) {
            this.tableData.unshift(item);
            this.dialogVisible = false;
            this.$nextTick(() => {
                this.$refs['singleTable'].setCurrentRow(this.tableData[0]);
            })
        },
        getRowIndex (item) {
            let index = 0;
            for (let i = 0; i < this.tableData.length; i++) {
                if (this.tableData[i].id === item.id) {
                    for (let a in item) {
                        this.tableData[i][a] = item[a]
                    }
                    index = i;
                    break;
                }
            }
            return index
        }
    },
    beforeDestroy () {
        localStorage.removeItem('tableName')
    }
}
</script>

<style scoped>
.page {
    padding: 15px;
    min-width: 820px;
}
header {
    width: 100%;
    height: 50px;
    background: rgb(248, 248, 248);
    padding-left: 10px;
    font-size: 15px;
    color: #000;
    line-height: 50px;
    margin-bottom: 10px;
}
/* 搜索 */
.searchButton {
    width: 100%;
    text-align: center;
}
.searchButton button {
    display: inline-block;
}
/* 控制条 */
.controlBar {
    margin-top: 10px;
}
@media screen and (max-width: 1100px) {
    .auto-input-width {
        width: 130px;
    }
}
@media screen and (max-width: 950px) {
    .auto-input-width {
        width: 100px;
    }
}

/* .controlBar {
  padding: 0px 10px 10px 10px;
  border-bottom: solid 1px rgb(68, 68, 68);
  text-align: left;
  margin-top: 10px;
} */
/* .controlBar ul li {
  list-style: none;
  width: 60px;
  height: 40px;
  cursor: pointer;
  display: inline-block;
  margin-right: 5px;
}
.controlBar ul li:hover {
  color: #70baf2;
}
.controlBar ul li i {
  width: 60px;
  height: 20px;
  font-size: 20px;
  text-align: center;
}
.controlBar ul li span {
  display: inline-block;
  width: 60px;
  height: 20px;
  font-size: 12px;
  line-height: 20px;
  text-align: center;
} */
.table {
    margin-bottom: 10px;
}
</style>
