<template>
  <el-dialog
    v-dialogDrag
    class="dispatcher-cmd chengdou-03__systerm"
    :title="title"
    :visible.sync="show"
    width="960px"
    :before-close="doClose"
    :z-index="2010"
    :modal="false"
    :close-on-click-modal="false"
    append-to-body
  >
    <div class="main">
      <el-row style="height: 100%;">
        <el-col :span="6" style="height: 100%;">
          <div class="left">
            <el-tabs v-model="activeTab" type="card" @tab-click="tabClick">
              <el-tab-pane label="操作" name="operate">
                <div class="operate-box">
                  <div>数据库正常</div>
                  <div>缓存命令</div>
                  <div>接受命令</div>
                  <div>发送命令</div>
                  <div>签收完成</div>
                </div>
              </el-tab-pane>
              <el-tab-pane label="查询" name="search">
                <div class="search-box">
                  <div>查询</div>
                </div>
              </el-tab-pane>
            </el-tabs>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="middle">
            <el-tabs v-model="cmdTab" type="card">
              <el-tab-pane label="调度命令" name="cmd">
                <div class="cmd-box">
                  <div>命令标题</div>
                </div>
              </el-tab-pane>
            </el-tabs>
            <el-tabs v-model="textTab" type="card">
              <el-tab-pane label="命令正文" name="text">
                <div class="cmd-box">
                  <div>正文字体</div>
                </div>
              </el-tab-pane>
            </el-tabs>
            <div>
              <div>受令列表</div>
            </div>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="right">
            常用词汇
          </div>
        </el-col>
      </el-row>
    </div>
  </el-dialog>
</template>
<script>
export default {
    name:'DispatcherCmd',
    data() {
        return {
            dialogShow: false,
            activeTab: 'operate',
            cmdTab: 'cmd',
            textTab: 'text'
        };
    },
    computed: {
        show() {
            return this.dialogShow;
        },
        title() {
            return '调度命令管理系统';
        }
    },
    watch: {},
    beforeDestroy() {},
    mounted() {},
    methods:{
        doShow() {
            this.dialogShow = true;
        },
        doClose() {
            this.dialogShow = false;
        },
        tabClick() {
            console.log('tabClick');
        }
    }

};
</script>
<style lang="scss" scoped>
// .dispatcher-cmd{
// }
.main {
	height: 100%;
	.left {
		height: 100%;
	}
}
</style>
