<template>
  <el-dialog
    v-dialogDrag
    class="dispatcher-cmd chengdou-03__systerm"
    :title="title"
    :visible.sync="show"
    width="1300px"
    :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="border-card" @tab-click="tabClick">
              <el-tab-pane label="操作" name="operate">
                <div class="operate-box">
                  <div class="create-cmd">
                    <!-- <span>数据库正常</span> -->
                    <div>
                      <!-- <el-input-number v-model="numTime" controls-position="right" :min="1" :max="24" size="mini" style="width: 83px" /> -->
                      <el-select v-model="numTime" placeholder="请选择" style="width: 66px;">
                        <el-option label="24" value="24" />
                        <el-option label="12" value="12" />
                      </el-select>
                      <span>小时</span>
                    </div>
                    <span style="width: 85px; font-weight: bold; text-align: end;">{{ getSimulationTime }}</span>
                  </div>
                  <div class="create-cmd">
                    <!-- <span>通信正常</span> -->
                    <el-button type="primary" @click="refreshSearch">刷新</el-button>
                    <el-button type="primary" style="width: 100px" @click="createCmd">新建调度命令</el-button>
                  </div>
                  <div class="box-title">
                    <div class="contant-null" />
                    <div class="contant-text">缓存命令</div>
                    <div class="contant-icon" @click="active1=!active1">
                      <i v-if="active1" class="el-icon-arrow-down" />
                      <i v-else class="el-icon-arrow-up" />
                    </div>
                  </div>
                  <div v-show="active1" class="left-table1">
                    <el-table ref="table1" :data="cacheTableData" border style="width: 100%" height="100" highlight-current-row @current-change="handleCurrentChange($event, 'table1')">
                      <el-table-column prop="number" label="命令号" width="80" />
                      <el-table-column prop="deviceName" label="识别号" width="80" />
                      <el-table-column prop="title" label="命令标题" show-overflow-tooltip />
                      <el-table-column prop="sendTime" label="接收单位" show-overflow-tooltip width="160">
                        <template slot-scope="scope">
                          <span style="margin-left: 10px">{{ JoinDeviceNameStr(scope.row.receiverInfos) || '' }}</span>
                        </template>
                      </el-table-column>
                      <el-table-column prop="senderName" label="发令人" />
                      <el-table-column prop="companyOfSender" label="发令单位" />
                      <el-table-column label="命令类型" width="100">
                        <template slot-scope="scope">
                          <span style="margin-left: 10px">{{ typeObj[scope.row.type] || '' }}</span>
                        </template>
                      </el-table-column>
                      <el-table-column prop="content" label="命令正文" show-overflow-tooltip />
                    </el-table>
                  </div>
                  <div class="box-title">
                    <div class="contant-null" />
                    <div class="contant-text">接受命令</div>
                    <div class="contant-icon" @click="active2=!active2">
                      <i v-if="active2" class="el-icon-arrow-down" />
                      <i v-else class="el-icon-arrow-up" />
                    </div>
                  </div>
                  <div v-show="active2" class="left-table1">
                    <el-table ref="table2" :data="receivedTableData" border style="width: 100%" height="100" highlight-current-row @current-change="handleCurrentChange($event, 'table2')">
                      <el-table-column prop="number" label="命令号" width="80" />
                      <el-table-column prop="title" label="命令标题" show-overflow-tooltip />
                      <el-table-column prop="sendTime" label="接收单位" show-overflow-tooltip width="160">
                        <template slot-scope="scope">
                          <span style="margin-left: 10px">{{ JoinDeviceNameStr(scope.row.receiverInfos) || '' }}</span>
                        </template>
                      </el-table-column>
                      <el-table-column prop="senderName" label="发令人" />
                      <el-table-column prop="companyOfSender" label="发令单位" />
                      <el-table-column label="命令类型" width="100">
                        <template slot-scope="scope">
                          <span style="margin-left: 10px">{{ typeObj[scope.row.type] || '' }}</span>
                        </template>
                      </el-table-column>
                      <el-table-column prop="content" label="命令正文" show-overflow-tooltip />
                    </el-table>
                  </div>
                  <div class="box-title">
                    <div class="contant-null" />
                    <div class="contant-text">发送命令</div>
                    <div class="contant-icon" @click="active3=!active3">
                      <i v-if="active3" class="el-icon-arrow-down" />
                      <i v-else class="el-icon-arrow-up" />
                    </div>
                  </div>
                  <div v-show="active3" class="left-table1">
                    <el-table ref="table3" :data="sendTableData" border style="width: 100%" height="150" highlight-current-row @current-change="handleCurrentChange($event, 'table3')">
                      <el-table-column prop="number" label="命令号" width="80" />
                      <el-table-column prop="title" label="命令标题" show-overflow-tooltip />
                      <el-table-column prop="sendTime" label="接收单位" show-overflow-tooltip width="160">
                        <template slot-scope="scope">
                          <span style="margin-left: 10px">{{ JoinDeviceNameStr(scope.row.receiverInfos) || '' }}</span>
                        </template>
                      </el-table-column>
                      <el-table-column prop="sendTime" label="发令时间" width="160" />
                      <el-table-column prop="senderName" label="发令人" />
                      <el-table-column prop="companyOfSender" label="发令单位" />
                      <el-table-column label="命令类型" width="100">
                        <template slot-scope="scope">
                          <span style="margin-left: 10px">{{ typeObj[scope.row.type] || '' }}</span>
                        </template>
                      </el-table-column>
                      <el-table-column prop="content" label="命令正文" show-overflow-tooltip />
                    </el-table>
                  </div>
                  <div class="box-title">
                    <div class="contant-null" />
                    <div class="contant-text">签收完成</div>
                    <div class="contant-icon" @click="active4=!active4">
                      <i v-if="active4" class="el-icon-arrow-down" />
                      <i v-else class="el-icon-arrow-up" />
                    </div>
                  </div>
                  <div v-show="active4" class="left-table1">
                    <el-table ref="table4" :data="allSignedTableData" border style="width: 100%" height="170" highlight-current-row @current-change="handleCurrentChange($event, 'table4')">
                      <el-table-column prop="number" label="命令号" width="80" />
                      <el-table-column prop="title" label="命令标题" show-overflow-tooltip />
                      <el-table-column prop="sendTime" label="接收单位" show-overflow-tooltip width="160">
                        <template slot-scope="scope">
                          <span style="margin-left: 10px">{{ JoinDeviceNameStr(scope.row.receiverInfos) || '' }}</span>
                        </template>
                      </el-table-column>
                      <el-table-column prop="sendTime" label="发令时间" width="160" />
                      <el-table-column prop="senderName" label="发令人" />
                      <el-table-column prop="companyOfSender" label="发令单位" />
                      <el-table-column label="命令类型" width="100">
                        <template slot-scope="scope">
                          <span style="margin-left: 10px">{{ typeObj[scope.row.type] || '' }}</span>
                        </template>
                      </el-table-column>
                      <el-table-column prop="content" label="命令正文" show-overflow-tooltip />
                    </el-table>
                  </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="border-card">
              <el-tab-pane label="调度命令" name="cmd">
                <el-form ref="form" :model="command" label-width="80px">
                  <el-form-item label="命令标题">
                    <el-input v-model="command.title" />
                  </el-form-item>
                  <el-row>
                    <el-col :span="12">
                      <el-form-item label="命令号">
                        <el-input v-model="command.number" />
                      </el-form-item>
                    </el-col>
                    <el-col :span="12">
                      <el-form-item label="发令时间">
                        <el-date-picker v-model="command.sendTime" type="datetime" placeholder="选择日期时间" style="width: 100%;" value-format="yyyy-MM-dd HH:mm:ss" />
                      </el-form-item>
                    </el-col>
                  </el-row>
                  <el-col :span="12">
                    <el-form-item label="发令人">
                      <el-select v-model="command.senderName" disabled placeholder="请选择" style="width: 100%;" @change="senderChange">
                        <el-option
                          v-for="item in memberDataList"
                          :key="item.id"
                          :label="item.labelName"
                          :value="item.labelName"
                        />
                      </el-select>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="发令单位">
                      <el-input v-model="command.companyOfSender" />
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="授权时间">
                      <el-date-picker v-model="command.authorizationTime" type="datetime" placeholder="选择日期时间" style="width: 100%;" value-format="yyyy-MM-dd HH:mm:ss" />
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="授权状态">
                      <el-input v-model="command.authorizationStatus" />
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="定稿时间">
                      <el-date-picker v-model="command.finalizationTime" type="datetime" placeholder="选择日期时间" style="width: 100%;" value-format="yyyy-MM-dd HH:mm:ss" />
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="审核人">
                      <el-select v-model="command.reviewerId" placeholder="请选择" style="width: 100%;">
                        <el-option
                          v-for="item in simulationUserList"
                          :key="item.memberId"
                          :label="item.nickName"
                          :value="item.memberId"
                        />
                      </el-select>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="拟令人">
                      <el-select v-model="command.author" placeholder="请选择" style="width: 100%;">
                        <el-option
                          v-for="item in simulationUserList"
                          :key="item.memberId"
                          :label="item.nickName"
                          :value="item.memberId"
                        />
                      </el-select>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="命令分类">
                      <el-select v-model="command.type" placeholder="请选择" style="width: 100%;">
                        <el-option
                          v-for="item in typeOptions"
                          :key="item.value"
                          :label="item.label"
                          :value="item.value"
                        />
                      </el-select>
                    </el-form-item>
                  </el-col>
                </el-form>
              </el-tab-pane>
            </el-tabs>
            <el-tabs v-model="textTab" type="border-card">
              <el-tab-pane label="命令正文" name="text">
                <div class="cmd-box">
                  <div>
                    <el-input v-model="command.content" type="textarea" :rows="6" placeholder="请输入内容" />
                  </div>
                </div>
              </el-tab-pane>
            </el-tabs>
            <div>
              <div class="table-title">
                <span>受令列表</span>
                <!-- <el-checkbox v-model="tableChecked">全选</el-checkbox> -->
              </div>
              <div class="table">
                <el-table ref="table" :data="getTableData" border style="width: 100%" height="200" @selection-change="selectionChange">
                  <el-table-column type="selection" width="50" />
                  <el-table-column label="受令单位" width="160">
                    <template slot-scope="scope">
                      <span style="margin-left: 10px">{{ getDeviceName(scope.row.receiverId) }}</span>
                    </template>
                  </el-table-column>
                  <el-table-column prop="copyers" label="抄送" width="120" show-overflow-tooltip />
                  <el-table-column label="签收状态">
                    <template slot-scope="scope">
                      <span style="margin-left: 10px">{{ signedStatusObj[scope.row.signedStatus] || '' }}</span>
                    </template>
                  </el-table-column>
                  <el-table-column label="签收人">
                    <template slot-scope="scope">
                      <span style="margin-left: 10px">{{ getSignedBy(scope.row) || '' }}</span>
                    </template>
                  </el-table-column>
                  <el-table-column prop="time" label="签收时间" width="160" />
                </el-table>
              </div>
            </div>
            <div class="midle-bottom">
              <el-button type="primary" @click="sendCmd">下达</el-button>
              <el-button type="primary" @click="doClose">关闭</el-button>
            </div>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="right">
            常用词汇
          </div>
        </el-col>
      </el-row>
    </div>
  </el-dialog>
</template>
<script>
import { sendCommandNew } from '@/api/jmap/training';
import { mapState } from 'vuex';
import { parseTime } from '@/utils/index';
export default {
    name:'DispatcherCmd',
    data() {
        return {
            dialogShow: false,
            activeTab: 'operate',
            cmdTab: 'cmd',
            textTab: 'text',
            typeObj: {
                NORMAL: '正常调度命令'
            },
            signedStatusObj: {
                UNSIGNED: '未签收',
                SIGNED: '签收',
                REFUSE: '拒签'
            },
            command: {
                title: '',
                number: '',
                sendTime: '',
                senderId: '',
                senderName: '',
                companyOfSender: '',
                authorizationTime: '',
                authorizationStatus: '',
                finalizationTime: '',
                reviewerId: '',
                author: '',
                receiverIds: [],
                type: '',
                content: '',
                allSigned: ''
            },
            tableChecked: false,
            memberDataList: [],
            active1: true,
            active2: true,
            active3: true,
            active4: true,
            numTime: 24,
            seachData: [],
            cacheTableData: [],
            currentInfo: {}
        };
    },
    computed: {
        ...mapState('training', [
            'memberList', 'memberData', 'simulationUserList', 'initTime'
        ]),
        typeOptions() {
            const list = [];
            Object.keys(this.typeObj).forEach(item => {
                list.push({
                    label: this.typeObj[item],
                    value: item
                });
            });
            return list;
        },
        getSimulationTime() {
            const t = parseTime(this.initTime, '{h}:{i}:{s}');
            const tArr = t.split(':');
            let s = '  ';
            let h = tArr[0];
            if (this.numTime != 24) {
                s = '上午';
                if (h > 12) {
                    s = '下午';
                    h = h - 12;
                }
            }
            return `${s} ${h}:${tArr[1]}:${tArr[2]}`;
        },
        show() {
            return this.dialogShow;
        },
        group() {
            return this.$route.query.group;
        },
        title() {
            return '调度命令管理系统';
        },
        mapSimulationUserList() {
            const obj = {};
            this.simulationUserList.forEach(item => {
                obj[item.userId] = item;
            });
            return obj;
        },
        getTableData() {
            const mList = [];
            const filterArr = this.memberList.filter(item => {
                return item.type == 'STATION_SUPERVISOR';
            });
            filterArr.forEach(item => {
                let cInfo = {};
                if (this.currentInfo.receiverInfos && this.currentInfo.receiverInfos[item.deviceCode]) {
                    cInfo = this.currentInfo.receiverInfos[item.deviceCode];
                }
                mList.push({
                    receiverId: item.deviceCode || '',
                    signedBy: '',
                    receivedTime: '',
                    signedStatus: '',
                    time: '',
                    ...cInfo
                });
            });
            return mList;
        },
        getActiveSender() {
            const userInfo = this.memberDataList.find(item => {
                return item.userId == this.$store.state.user.id;
            });
            const activeUser = userInfo || {};
            return activeUser;
        },
        receivedTableData() {
            const list = this.seachData.filter(item => {
                return item.receiverInfos[this.getActiveSender.deviceCode];
            });
            return list;
        },
        sendTableData() {
            const list = this.seachData.filter(item => {
                return item.senderName == this.getActiveSender.labelName;
            });
            return list;
        },
        allSignedTableData() {
            const list = this.seachData.filter(item => {
                return item.allSigned;
            });
            return list;
        }
    },
    watch: {},
    beforeDestroy() {},
    mounted() {},
    methods:{
        setCurrentRow(obj, refName) {
            const tableArr = ['table1', 'table2', 'table3', 'table4'];
            tableArr.forEach(key => {
                if (key != refName) {
                    this.$refs[key].setCurrentRow();
                } else {
                    this.$refs[key].setCurrentRow(obj);
                }
            });
        },
        handleCurrentChange(obj, refName) {
            if (!obj) { return; }
            this.currentInfo = obj;
            this.command = {...obj};
            this.setCurrentRow(obj, refName);
            const infoList = Object.keys(this.currentInfo.receiverInfos || {});
            if (infoList.length) {
                this.command.receiverIds = infoList;
                setTimeout(() => {
                    infoList.forEach(item => {
                        const findObj = this.getTableData.find(ii => {
                            return ii.receiverId == item;
                        });
                        findObj && this.$refs.table.toggleRowSelection(findObj, true);
                    });
                }, 200);
            } else {
                this.$refs.table.clearSelection();
            }
        },
        getSignedBy(info) {
            const signedInfo = this.simulationUserList.find(item => {
                return item.memberId == info.signedBy;
            });
            let name = '';
            if (signedInfo) {
                name = signedInfo.nickName;
            }
            return name;
        },
        getDeviceName(receiverId) {
            let name = '';
            if (receiverId) {
                const device = this.$store.getters['map/getDeviceByCode'](receiverId);
                name = device ? device.name : '';
            }
            return name;
        },
        JoinDeviceNameStr(info) {
            let name = '';
            const devCodeArr = Object.keys(info);
            const nameArr = [];
            devCodeArr.forEach(ii => {
                const device = this.$store.getters['map/getDeviceByCode'](ii);
                nameArr.push(device ? device.name : '');
            });
            name = nameArr.join(',');
            return name;
        },
        refreshSearch() {
            console.log('刷新');
            this.searchCmd();
        },
        createCmd() {
            this.$confirm('当前调度命令已经被编辑修改过了，你要放弃所有的修改吗？', '操作提示', {
                confirmButtonText: '是',
                cancelButtonText: '否'
            }).then(() => {
                this.initData();
            }).catch(() => {
                console.log('取消新建调度命令!');
            });
        },
        initData() {
            this.command = {
                title: '',
                number: '',
                sendTime: '',
                senderId: '',
                senderName: this.command.senderName,
                companyOfSender: '',
                authorizationTime: '',
                authorizationStatus: '',
                finalizationTime: '',
                reviewerId: '',
                author: '',
                receiverIds: [],
                type: '',
                content: '',
                allSigned: ''
            };
            this.currentInfo = {};
            this.$refs.table.clearSelection();
            this.setCurrentRow();
        },
        senderChange(memberId) {
            const obj = this.mapSimulationUserList.find(item => {
                return item.memberId == memberId;
            });
            if (obj) {
                const device = this.$store.getters['map/getDeviceByCode'](obj.deviceCode);
                this.command.companyOfSender = device ? device.name : '';
            }
        },
        getSenderName() {
            this.memberDataList = Object.values(this.memberData);
            const activeUser = this.memberDataList.find(item => {
                return item.userId == this.$store.state.user.id;
            });
            if (activeUser) {
                // this.command.senderId = activeUser.id;
                this.command.senderName = activeUser.labelName;
            }
        },
        doShow() {
            this.searchCmd();
            this.getSenderName();
            this.dialogShow = true;
            this.initData();
        },
        doClose() {
            this.dialogShow = false;
        },
        tabClick() {
            console.log('tabClick');
        },
        selectionChange(selection) {
            const arr = [];
            selection.forEach(item => {
                arr.push(item.receiverId);
            });
            this.command.receiverIds = arr;
        },
        sendCmd() {
            const test = `【${this.command.number}】号调度命令下达到以下受令人：`;
            const messageData = [test];
            const h = this.$createElement;
            this.command.receiverIds.forEach((item, index) => {
                const device = this.$store.getters['map/getDeviceByCode'](item);
                const msg = `${index + 1}. ${device ? device.name : ''}`;
                messageData.push(h('p', null, msg));
            });
            this.$confirm('提示', {
                title: '操作提示',
                message: h('div', null, messageData),
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                const data = {
                    command: this.command
                };
                sendCommandNew(this.group, 'CTC_SEND_DISPATCH_COMMAND', data).then((res) => {
                    console.log(res, '---res');
                    this.$message.success('发送调度命令成功！');
                    this.searchCmd();
                    this.initData();
                }).catch(error => {
                    this.$messageBox('发送调度命令失败：' + error.message);
                });
            });
        },
        searchCmd() {
            sendCommandNew(this.group, 'CTC_QUERY_DISPATCH_COMMAND').then((res) => {
                console.log(res, '---res----');
                this.seachData = res.data;
            }).catch(error => {
                this.$messageBox('查询调度命令失败：' + error.message);
            });
        }
    }

};
</script>
<style lang="scss" scoped>
// .dispatcher-cmd{
// }
.main {
	height: 100%;
	.left {
		height: 100%;
		.operate-box {
			overflow-y: auto;
		}
		.create-cmd {
			height: 30px;
			display: flex;
			justify-content: flex-end;
			align-items: center;
		}
		.box-title {
			height: 28px;
			display: flex;
			justify-content: center;
			align-items: center;
			background: #B3B2C2;
			.contant-null, .contant-icon {
				width: 20px;
				display: flex;
				justify-content: center;
			}
			.contant-icon:hover {
				cursor: pointer;
			}
			.contant-text {
				display: flex;
				justify-content: center;
				flex: 1;
				color: blue;
			}
		}
	}
	/deep/ .el-tabs__item {
		height: 30px !important;
		line-height: 30px !important;
	}
	.middle {
		/deep/ .el-form-item {
			margin-bottom: 0px;
		}
		.el-input {
			/deep/ .el-input__icon {
				line-height: 22px;
			}
		}
		.midle-bottom {
			height: 40px;
			display: flex;
			justify-content: center;
			align-items: center;
		}
	}
}
</style>
<style>
.dispatcher-cmd .el-dialog .el-dialog__body {
	padding: 5px !important;
}
.dispatcher-cmd .el-dialog {
	margin-top: 8vh !important;
}
</style>
