<template>
    <div class="page">
        <div class="searchArea">
            <el-form
                ref="search"
                v-model="search"
                inline
            >
                <el-form-item class="searchItem">
                    <el-input
                        v-model="search.systemCode"
                        placeholder="系统编码"
                        size="small"
                    ></el-input>
                </el-form-item>
                <el-form-item class="searchItem">
                    <el-input
                        v-model="search.systemName"
                        placeholder="系统名称"
                        size="small"
                    ></el-input>
                </el-form-item>
                <el-form-item class="searchItem">
                    <el-select
                        size="small"
                        v-model="search.systemType"
                        placeholder="系统类型"
                        class="dataItem"
                    >
                        <el-option
                            v-for="item in systemClassList"
                            :key="item.index"
                            :label="item.label"
                            :value="item.value"
                        >
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item class="searchItem">
                    <el-input
                        v-model="search.systemDesc"
                        placeholder="系统描述"
                        size="small"
                    ></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button
                        type="primary"
                        @click="searchData"
                        size="small"
                        icon="el-icon-search"
                        v-privilege="activeMenu + 'QUERY'"
                    >查询</el-button>
                </el-form-item>
                <el-form-item>
                    <el-button
                        type="primary"
                        @click="cancel"
                        size="small"
                        icon="el-icon-refresh"
                        v-privilege="activeMenu + 'QUERY'"
                    >重置</el-button>
                </el-form-item>
                <el-form-item>
                    <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-item>
                    <el-button
                        type="primary"
                        size="small"
                        icon="el-icon-menu"
                        @click="goPage('库表管理')"
                        v-privilege="activeMenu + 'QUERY'"
                    >库表</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>
        <li @click="goPage('库表')">
          <i class="el-icon-menu"></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
                    type="selection"
                    align="center"
                ></el-table-column>
                <el-table-column
                    prop="systemCode"
                    :show-overflow-tooltip="true"
                    align="center"
                    width="100"
                    label="系统编码"
                ></el-table-column>
                <el-table-column
                    prop="systemName"
                    :show-overflow-tooltip="true"
                    align="center"
                    width="150"
                    label="系统名称"
                ></el-table-column>
                <el-table-column
                    prop="systemType"
                    :show-overflow-tooltip="true"
                    align="center"
                    width="100"
                    :formatter="sysFormat"
                    label="系统类型"
                ></el-table-column>
                <el-table-column
                    prop="ipAddr"
                    :show-overflow-tooltip="true"
                    align="center"
                    width="150"
                    label="IP地址"
                ></el-table-column>
                <el-table-column
                    prop="systemDesc"
                    :show-overflow-tooltip="true"
                    align="center"
                    label="系统描述"
                ></el-table-column>
                <el-table-column
                    label="操作"
                    align="center"
                    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: 'appManagement',
    components: {
        detail
    },
    data () {
        return {
            activeMenu: '',
            tableLoading: false,
            search: {
                systemCode: '',
                systemName: '',
                systemType: '',
                systemDesc: ''
            },
            tableData: [],
            yesOrNo: [{
                label: '是',
                value: true
            }, {
                label: '否',
                value: false
            }],
            systemClassList: [{
                label: '源系统',
                value: '1'
            }, {
                label: '目标系统',
                value: '2'
            }],
            arrID: 0,
            pageIndex: 1,
            pageSize: 20,
            total: 0,
            tableHeight: null,
            oprtTitle: '新增系统',
            dialogVisible: false,
            dialogColose: false,
            status: 'add',
            choiceItem: {}
        }
    },
    mounted: function () {
        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;
        },
        // 表格计算属性
        sysFormat (row, column) {
            let status = '';
            status = row[column.property] === '1' ? '源系统 ' : '目标系统';
            return status;
        },
        // 获取&查询数据
        queryData: function (status, url) {
            let that = this,
                defaultParms = {
                    pageSize: that.pageSize,
                    pageNum: that.pageIndex
                },
                params = status || defaultParms,
                getUrl = url || 'pass/v1/mdsystems/';
            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 (num) {
            let that = this,
                params = {
                    pageSize: that.pageSize,
                    pageNum: that.pageIndex,
                    systemCode: that.search.systemCode,
                    systemName: that.search.systemName,
                    systemType: that.search.systemType,
                    systemDesc: that.search.systemDesc
                };
            // if (params.systemCode || params.systemName || params.systemType || params.systemDesc) {
            that.searchStatus = true;
            that.queryData(params);
            // } else {
            //     that.$message.error('搜索参数不能为空')
            // }
        },
        // 取消
        cancel () {
            let that = this;
            that.searchStatus = false;
            that.search.systemCode = '';
            that.search.systemName = '';
            that.search.systemType = '';
            that.search.systemDesc = '';
            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();
        },
        // 刷新
        refreshAll () {

        },
        refreshChoice () {

        },
        // 编辑 新增 删除 查看 前往其他页面
        addRow () {
            //   this.$router.push({ name: 'appManagementDetail', params: { code: 'add' } })
            this.oprtTitle = '新增系统';
            this.status = 'add';
            this.choiceItem = {};
            this.dialogVisible = true;
            this.dialogColose = false;
        },
        editRow (item) {
            //   if (this.arrID.length > 1) {
            //     this.$message.error('最多编辑一条数据');
            //   } else if (!this.arrID.length) {
            //     this.$message.error('请选中一条数据');
            //   } else {
            // this.$router.push({ name: 'appManagementDetail', 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/mdsystems/' + 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: 'appManagementDetail', params: { code: 'show', data: this.arrID[0] } })
            this.oprtTitle = '查看系统';
            this.status = 'show';
            this.dialogVisible = true;
            this.choiceItem = item;
            this.dialogColose = false;
        },
        goPage (pageName) {
            let that = this;
            if (that.arrID.length > 1) {
                that.$message.error('最多选择一条数据');
            } else if (!that.arrID.length) {
                that.$message.error('请选择一条数据');
            } else {
                localStorage.setItem('tableName', that.arrID[0].systemCode)
                let menuList = window.top.document.getElementsByClassName('el-menu-item');
                let tabList = window.top.document.getElementsByClassName('el-tabs__item');
                for (let i = 0; i < tabList.length; i++) {
                    if (tabList[i].childNodes[0].innerText.replace(/\s/g, '') === pageName) {
                        tabList[i].childNodes[1].click();
                    }
                }
                for (let i = 0; i < menuList.length; i++) {
                    if (menuList[i].innerHTML === pageName) {
                        setTimeout(() => {
                            menuList[i].click();
                        }, 100)
                    }
                }
            }
        },
        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
        },
        saveRow (item) {
            let index = this.getRowIndex(item);
            this.dialogVisible = false;
            this.$nextTick(() => {
                this.$refs['singleTable'].setCurrentRow(this.tableData[index]);
            })
        }
    }
}
</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>
