<template>
  <el-dialog
    v-dialogDrag
    :visible.sync="dialogShow"
    class="iscs_device_control_dialog"
    width="600px"
    :before-close="doClose"
    :z-index="2000"
    :modal="false"
    border
    :close-on-click-modal="false"
  >
    <div style="position:relative; width: 90%; left: 5%;">
      <el-row style="font-size: 14px;color: #6F49FE; height: 30px; line-height: 30px;">
        <el-col :span="4"><div>设备名称</div></el-col>
        <el-col :span="4"><div style="width: 100%; background: #FFF;">{{ modeName }}</div></el-col>
        <el-col :span="8"><div style="width: 100%; background: #FFF;">{{ stationName }}</div></el-col>
        <el-col :span="8"><div style="width: 100%; background: #FFF;">{{ deviceType }}</div></el-col>
      </el-row>
      <el-row v-if="operation==='home'" style="margin-top: 10px;font-size: 14px;color: #6F49FE; height: 30px; line-height: 30px;">
        <el-col :span="4"><div>状态</div></el-col>
        <el-col :span="20"><div style="width: 100%; background: #FFF;">运行</div></el-col>
      </el-row>
      <el-row v-if="operation==='control'" style="margin-top: 10px;font-size: 14px;color: #6F49FE;">
        <el-col :span="7" :offset="2">
          <div style="border: 1px solid #AAA7A4; border-radius: 4px;text-align: center; height: 80px;">
            <el-row style="height: 40px; line-height: 40px;"><div>当前运行状况</div></el-row>
            <el-row><div style="height: 25px;width: 80px;background: #FFF;margin: auto; line-height: 25px;">运行</div></el-row>
          </div>
        </el-col>
        <el-col :span="14" :offset="1">
          <div style="border: 1px solid #AAA7A4; border-radius: 4px;text-align: center; height: 80px;">
            <el-row style="height: 40px; line-height: 40px;"><div>目标状况</div></el-row>
            <el-row><el-button style="margin-right: 15px">运行</el-button><el-button>停止</el-button></el-row>
          </div>
        </el-col>
      </el-row>
      <el-row v-if="operation==='home'" style="margin-top: 20px">
        <el-button style="margin-right: 13px;" @click="clickEvent('control')">控制</el-button>
        <el-button style="margin-right: 13px;">标记</el-button>
        <el-button style="margin-right: 13px;">详情</el-button>
        <el-button style="margin-right: 13px;">锁闭详情</el-button>
        <el-button style="margin-right: 12px;">指派趋势</el-button>
        <el-button>取消</el-button>
      </el-row>
      <el-row v-if="operation==='control'" style="margin-top: 20px">
        <el-button style="margin-right: 13px;">取消</el-button>
        <el-button style="margin-right: 13px;">执行</el-button>
      </el-row>
    </div>
  </el-dialog>
</template>

<script>

export default {
    name: 'GraphicEle',
    data() {
        return {
            dialogShow: false,
            loading: false,
            deviceType: '',
            stationName: '',
            modeName: '',
            status: '',
            operation: 'home',
            deviceMap: {
                ManualAlarmButton:'手动报警按钮',
                SmokeDetector: '消火栓按钮',
                FireHydranAlarmButton: '点型火灾探测器',
                GasFireControl:'气体灭火控制器'
            },
            modeMap: {
                standFAS: '火灾报警',
                stationHallFAS: '火灾报警',
                systemFAS: '火灾报警',
                bigSystem: '机电',
                smallSystem: '机电',
                waterSystem: '机电',
                lighting: '机电',
                electricEscalator: '机电',
                waterSupply: '机电',
                controlBAS: '机电',
                tunnelVentilation: '机电',
                schedules: '机电',
                controlPermissionBAS: '机电',
                sensor: '机电',
                stationNetwork: '机电',
                mainScreenPA: '广播',
                radioListeningPA: '广播',
                timePreviewPA: '广播',
                MainScreen: '乘客信息',
                LCDcontrol: '乘客信息',
                TimePreview: '乘客信息',
                StationNetwork: '乘客信息',
                EmergencyRelease: '乘客信息',
                controlCCTV: '闭路电视',
                timeCCTV: '闭路电视',
                timeEditCCTV: '闭路电视',
                statusCCTV: '闭路电视',
                centerStatusCCTV: '闭路电视',
                PSD: '屏蔽门',
                AFC: '售检票',
                stationHallACS: '门禁',
                standACS: '门禁',
                doorFG: '防淹门'
            }
        };
    },
    computed: {

    },
    mounted() {
    },
    methods: {
        doShow(device) {
            this.deviceType = this.deviceMap[device._type];
            this.modeName = this.modeMap[this.$route.params.mode];
            this.stationName = this.$route.query.stationName;
            this.dialogShow = true;
        },
        doClose() {
            this.loading = false;
            this.dialogShow = false;
        },
        clickEvent(type) {
        	this.operation = type;
        }
    }
};
</script>
<style>
    .iscs_device_control_dialog .el-dialog .el-dialog__header {
		width: 100%;
		height: 30px;
		background-image: linear-gradient(#F0DBCE,#ECB85E, #F0DBCE);
    }
	.iscs_device_control_dialog .el-dialog .el-dialog__headerbtn{
		position: absolute;
		top: 5px;
		right: 10px;
		padding: 0;
		background: 0 0;
		outline: 0;
		cursor: pointer;
		font-size: 16px;
		border: 1px solid #FFF;
		width: 20px;
		height: 18px;
	}
	.iscs_device_control_dialog .el-dialog .el-dialog__body {
		padding: 30px 20px;
		color: #606266;
		font-size: 14px;
		word-break: break-all;
		background: #CDC6C0;
	}
	.iscs_device_control_dialog .el-dialog .el-button {
		display: inline-block;
		line-height: 1;
		white-space: nowrap;
		cursor: pointer;
		background: #CACACA;
		border: 1px solid #777675;
		color: #000;
		-webkit-appearance: none;
		text-align: center;
		-webkit-box-sizing: border-box;
		box-sizing: border-box;
		outline: 0;
		margin: 0;
		-webkit-transition: .1s;
		transition: .1s;
		padding: 0;
		font-weight: 500;
		font-size: 12px;
		height: 30px;
		width: 70px;
		border-radius: 0;
	}
	.iscs_device_control_dialog .el-dialog .el-button:hover {
		background-image: linear-gradient(#E2E4E5,#D5D6D8,#E2E4E5);
	}
</style>
