<template>
    <div class="page">
        <div class="searchArea">
            <el-form
                ref="form"
                v-model="search"
                inline
            >
                <el-form-item class="searchItem">
                    <el-input
                        v-model="search.mainTableName"
                        placeholder="主表名"
                        size="small"
                    ></el-input>
                </el-form-item>
                <el-form-item class="searchItem">
                    <el-input
                        v-model="search.mainField"
                        placeholder="主键"
                        size="small"
                    ></el-input>
                </el-form-item>
                <el-form-item class="searchItem">
                    <el-input
                        v-model="search.foreignTableName"
                        placeholder="从表名"
                        size="small"
                    ></el-input>
                </el-form-item>
                <el-form-item class="searchItem">
                    <el-input
                        v-model="search.foreignField"
                        placeholder="外键"
                        size="small"
                    ></el-input>
                </el-form-item>
                <el-form-item
                    class="searchItem"
                    style="width:30%"
                >
                    <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"
                        v-privilege="activeMenu + 'ADD'"
                        @click="addRow"
                    >新增</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="mainTableName"
                    :show-overflow-tooltip="true"
                    align="center"
                    label="主表名"
                ></el-table-column>
                <el-table-column
                    prop="mainField"
                    :show-overflow-tooltip="true"
                    align="center"
                    label="主键"
                ></el-table-column>
                <el-table-column
                    prop="foreignTableName"
                    :show-overflow-tooltip="true"
                    align="center"
                    label="从表名"
                ></el-table-column>
                <el-table-column
                    prop="foreignField"
                    :show-overflow-tooltip="true"
                    align="center"
                    label="外键"
                ></el-table-column>
                <el-table-column
                    prop="isCrt"
                    :show-overflow-tooltip="true"
                    align="center"
                    :formatter="statusFormat"
                    label="是否已创建"
                ></el-table-column>
                <el-table-column
                    prop="relateName"
                    :show-overflow-tooltip="true"
                    align="center"
                    label="关联名"
                ></el-table-column>
                <el-table-column
                    prop="relateDesc"
                    :show-overflow-tooltip="true"
                    align="center"
                    label="关联描述"
                ></el-table-column>
                <el-table-column
                    prop="relateType"
                    :show-overflow-tooltip="true"
                    align="center"
                    :formatter="relTypeFormat"
                    label="关联类型"
                ></el-table-column>
                <el-table-column
                    prop="corrType"
                    :show-overflow-tooltip="true"
                    align="center"
                    :formatter="corrTypeFormat"
                    label="对多关系"
                ></el-table-column>
                <el-table-column
                    align="center"
                    label="操作"
                    width="250"
                    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: 'keyManagement',
    components: {
        detail
    },
    data () {
        return {
            activeMenu: '',
            tableLoading: false,
            search: {
                mainTableName: '',
                mainField: '',
                foreignTableName: '',
                foreignField: ''
            },
            tableData: [],
            yesOrNo: [{
                label: '是',
                value: '1'
            }, {
                label: '否',
                value: '0'
            }],
            arrID: [],
            pageIndex: 1,
            pageSize: 20,
            total: 0,
            searchStatus: false,
            tableHeight: null,
            oprtTitle: '新增关联',
            dialogVisible: false,
            dialogColose: false,
            status: 'add',
            choiceItem: {}

        }
    },
    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/mdtablerelates/';
            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 () {
            let that = this,
                params = {
                    pageSize: that.pageSize,
                    pageNum: 1,
                    mainTableName: that.search.mainTableName,
                    mainField: that.search.mainField,
                    foreignTableName: that.search.foreignTableName,
                    foreignField: that.search.foreignField
                };
            that.pageIndex = 1;
            // if (params.systemCode || params.mainTableName || params.mainField || params.foreignTableName || params.foreignField) {
            that.searchStatus = true;
            that.queryData(params);
            // } else {
            //     that.$message.error('搜索参数不能为空')
            // }
        },
        // 取消
        cancel () {
            let that = this;
            that.searchStatus = false;
            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: 'keyManagementDetail', params: { code: 'add' } })
            this.oprtTitle = '新增关联';
            this.status = 'add';
            this.choiceItem = {};
            this.dialogVisible = true;
            this.dialogColose = false;
        },
        editRow (item) {
            // this.$router.push({ name: 'keyManagementDetail', 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/mdtablerelates/' + 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: 'keyManagementDetail', params: { code: 'show', data: this.arrID[0] } })
            this.oprtTitle = '查看关联';
            this.status = 'show';
            this.dialogVisible = true;
            this.choiceItem = item;
            this.dialogColose = false;
        },
        goPage () { },
        // 计算属性
        relTypeFormat (row, column) {
            let type = row[column.property],
                typeName = '';
            if (type === '1') {
                typeName = '左外关联'
            } else if (type === '2') {
                typeName = '右外关联'
            } else if (type === '3') {
                typeName = '内关联'
            }
            return typeName;
        },
        corrTypeFormat (row, column) {
            let type = row[column.property],
                typeName = '';
            if (type === '1') {
                typeName = '一对一'
            } else if (type === '2') {
                typeName = '一对多'
            } else if (type === '3') {
                typeName = '多对多'
            }
            return typeName;
        },
        statusFormat (row, column) {
            let type = row[column.property] === '0' ? '否' : '是';
            return type;
        },
        localTableName (name) {
            let that = this,
                params = {
                    pageSize: that.pageSize,
                    pageNum: 1,
                    mainTableName: name,
                    mainField: '',
                    foreignTableName: '',
                    foreignField: ''
                };
            that.pageIndex = 1;
            // if (params.systemCode || params.mainTableName || params.mainField || params.foreignTableName || params.foreignField) {
            that.searchStatus = true;
            that.queryData(params);
        },
        saveRow (item) {
            let index = this.getRowIndex(item);
            this.dialogVisible = false;
            this.$nextTick(() => {
                this.$refs['singleTable'].setCurrentRow(this.tableData[index]);
            })
        },
        handleClose () {
            this.dialogColose = true;
            this.dialogVisible = false;
        },
        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;
}
header {
    width: 100%;
    height: 50px;
    background: rgb(248, 248, 248);
    padding-left: 10px;
    font-size: 15px;
    color: #000;
    line-height: 50px;
    margin-bottom: 10px;
}
/* 搜索 */
.searchArea {
    /* border-bottom: solid 1px rgb(68, 68, 68); */
    text-align: left;
}
.searchButton {
    width: 100%;
    text-align: center;
}
.searchButton button {
    display: inline-block;
}
/* 控制条 */
.controlBar {
    margin-top: 10px;
}
/* .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>
