<template>
  <el-dialog
    title="子系统管理"
    :visible.sync="dialogVisible"
    width="60%"
    center
  >
    <el-button type="primary" size="small" style="position: relative;left: 90%;margin-bottom: 10px;" @click="handleAddSubsystem">新增</el-button>
    <el-table v-loading="loading" :data="tableData" border style="width: 100%">
      <el-table-column prop="name" label="名称" />
      <el-table-column prop="simType" label="类型">
        <template slot-scope="scope">
          <span>{{ simTypeMap[scope.row.simType] }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="simUsage" label="使用方式">
        <template slot-scope="scope">
          <span>{{ simUsageMap[scope.row.simUsage] }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="desc" label="描述" width="400px" />
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button type="text" size="small" @click="updateRow(scope.row)">更新</el-button>
          <el-button type="text" size="small" @click="deleteRow(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-dialog
      width="30%"
      :title="innerTitle"
      :visible.sync="innerVisible"
      center
      append-to-body
    >
      <el-form ref="ruleForm" :model="ruleForm" :rules="rules" label-width="120px" class="demo-ruleForm">
        <el-form-item label="子系统名称：" prop="name">
          <el-input v-model="ruleForm.name" style="width: 200px;" />
        </el-form-item>
        <el-form-item label="类型：" prop="type">
          <el-select v-model="ruleForm.type" placeholder="请选择类型">
            <el-option label="地铁" value="METRO" />
            <el-option label="铁路/大铁" value="RAILWAY" />
            <el-option label="应急调度" value="EMERGENCY" />
          </el-select>
        </el-form-item>
        <el-form-item label="使用方式：" prop="usage">
          <el-select v-model="ruleForm.usage" placeholder="请选择使用方式">
            <el-option label="单角色仿真" value="SINGLE_MEMBER" />
            <el-option label="单客户端仿真" value="SINGLE_CLIENT" />
            <el-option label="综合演练" value="JOINT" />
          </el-select>
        </el-form-item>
        <el-form-item v-if="ruleForm.usage === 'SINGLE_MEMBER' || ruleForm.usage === 'JOINT'" label="角色：" prop="memberType">
          <el-select v-model="ruleForm.memberType" placeholder="请选择角色">
            <el-option v-for="option in roleList" :key="option.value" :label="option.label" :value="option.value" />
          </el-select>
        </el-form-item>
        <el-form-item v-if="stationRoles.includes(ruleForm.memberType)" label="车站：" prop="deviceCode">
          <el-select v-model="ruleForm.deviceCode" placeholder="请选择设备">
            <el-option v-for="option in stationList" :key="option.code" :label="option.name" :value="option.code" />
          </el-select>
        </el-form-item>
        <el-form-item v-if="ruleForm.memberType === 'DRIVER'" label="列车：" prop="deviceCode">
          <el-select v-model="ruleForm.deviceCode" placeholder="请选择设备">
            <el-option v-for="option in trainList" :key="option.code" :label="option.code" :value="option.code" />
          </el-select>
        </el-form-item>
        <el-form-item v-if="ruleForm.usage === 'SINGLE_CLIENT'" label="客户端：" prop="client">
          <el-select v-model="ruleForm.client" placeholder="请选择使用客户端">
            <el-option label="联锁" value="INTERLOCK" />
            <el-option label="大屏" value="BIG_SCREEN" />
            <el-option label="综合监控" value="ISCS" />
          </el-select>
        </el-form-item>
        <el-form-item label="功能：" prop="function">
          <el-select v-model="ruleForm.function" placeholder="请选择功能">
            <el-option label="大客流" value="LPF" />
          </el-select>
        </el-form-item>
        <el-form-item label="描述：" prop="desc">
          <el-input
            v-model="ruleForm.desc"
            type="textarea"
            :rows="2"
            placeholder="请输入内容"
          />
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="closeInner">取 消</el-button>
        <el-button type="primary" @click="commit">确 定</el-button>
      </span>
    </el-dialog>
  </el-dialog>
</template>

<script>
import { getStationListNeedAttendant } from '@/api/jmap/map';
import { queryMapSystemList, updateMapSystem, createMapSystem, deleteMapSystem } from '@/api/trainingPlatform';
export default {
    name: 'Subsystem',
    data() {
        return {
            dialogVisible: false,
            tableData: [],
            mapId: '',
            loading: false,
            innerVisible: false,
            mapSystemId: '',
            stationList: [],
            trainList: [],
            innerTitle: '',
            ruleForm: {
                name: '',
                type: '',
                usage: '',
                memberType: '',
                deviceCode: '',
                client: '',
                function: ''
            },
            simTypeMap: {
                METRO: '地铁',
                RAILWAY: '铁路/大铁',
                EMERGENCY: '应急调度'
            },
            simUsageMap: {
                SINGLE_MEMBER: '单角色仿真',
                SINGLE_CLIENT: '单客户端仿真',
                JOINT: '综合演练'
            },
            stationRoles: ['STATION_SUPERVISOR', 'STATION_ASSISTANT', 'STATION_MASTER', 'STATION_SIGNALER', 'STATION_PASSENGER', 'STATION_SWITCH_MAN',
                'STATION_FACILITATOR', 'STATION_WORKER', 'TRAIN_MASTER'],
            rules: {
                name: [
                    { required: true, message: '请输入子系统名称', trigger: 'blur' }
                ],
                type: [
                    { required: true, message: '请选择子系统类型', trigger: 'change' }
                ],
                usage: [
                    { required: true, message: '请选择使用方式', trigger: 'change' }
                ]
            },
            roleList: [
                {label: '行调', value: 'DISPATCHER'},
                {label: '行值', value: 'STATION_SUPERVISOR'},
                {label: '司机', value: 'DRIVER'},
                {label: '通号', value: 'MAINTAINER'},
                {label: '车辆段信号楼', value: 'DEPOT_DISPATCHER'},
                {label: '停车场信号楼', value: 'PARKING_LOT_SIGNAL_BUILDING'},
                {label: '车站助理', value: 'STATION_ASSISTANT'},
                {label: '车站站长', value: 'STATION_MASTER'},
                {label: '车站信号员', value: 'STATION_SIGNALER'},
                {label: '车站客运员', value: 'STATION_PASSENGER'},
                {label: '车站扳道员', value: 'STATION_SWITCH_MAN'},
                {label: '车站引导员', value: 'STATION_FACILITATOR'},
                {label: '车站工务工', value: 'STATION_WORKER'},
                {label: '车务段段长', value: 'TRAIN_MASTER'}
            ]
        };
    },
    methods: {
        handleAddSubsystem() {
            this.innerTitle = '创建子系统';
            this.innerVisible = true;
        },
        doShow(data) {
            if (data && data.id) {
                this.mapId = data.id;
                this.stationList = [];
                getStationListNeedAttendant(data.id).then(resp => {
                    if (resp.data && resp.data.length) {
                        this.stationList = resp.data;
                    }
                }).catch(() => {
                    this.$message.error('获取车站列表失败');
                });
                this.reload();
                this.dialogVisible = true;
            }
        },
        reload() {
            this.loading = true;
            this.tableData = [];
            queryMapSystemList({mapId: this.mapId}).then(resp => {
                if (resp.data && resp.data.length) {
                    this.tableData = resp.data;
                }
                this.loading = false;
            }).catch(() => {
                this.loading = false;
                this.$message.error('获取地图系统列表！');
            });
        },
        doClose() {
            this.dialogVisible = false;
        },
        deleteRow(row) {
            this.$confirm('删除子系统，是否继续？', '提 示', {
                confirmButtonText: '确 定',
                cancelButtonText: '取 消',
                type: 'warning'
            }).then(() => {
                deleteMapSystem(row.id).then(resp => {
                    this.reload();
                }).catch(error => {
                    this.$message.error(`删除子系统: ${error.message}`);
                });
            }).catch( () => { });
        },
        updateRow(row) {
            this.mapSystemId = row.id;
            this.ruleForm.name = row.name;
            this.ruleForm.desc = row.desc;
            this.ruleForm.type = row.paramVO.type;
            this.ruleForm.usage = row.paramVO.usageInfo.usage;
            this.ruleForm.client = row.paramVO.usageInfo.param.client;
            this.ruleForm.memberType = row.paramVO.usageInfo.param.memberType;
            this.ruleForm.deviceCode = row.paramVO.usageInfo.param.deviceCode;
            const functionList = Object.keys(row.paramVO.functionMap);
            if (functionList && functionList.length) {
                this.ruleForm.function = functionList[0];
            }
            this.innerTitle = '修改子系统';
            this.innerVisible = true;
        },
        commit() {
            const functionMap = {};
            if (this.ruleForm.function) {
                functionMap[this.ruleForm.function] = null;
            }
            const data = {
                mapId: this.mapId,
                name: this.ruleForm.name,
                desc: this.ruleForm.desc,
                paramVO: {
                    type: this.ruleForm.type,
                    usageInfo: {
                        usage: this.ruleForm.usage,
                        param: {
                            client: this.ruleForm.client,
                            memberType: this.ruleForm.memberType,
                            deviceCode: this.ruleForm.deviceCode
                        }
                    },
                    functionMap: functionMap
                }
            };
            if (this.innerTitle === '创建子系统') {
                createMapSystem(data).then(resp => {
                    this.innerVisible = false;
                    this.reload();
                    this.$message.success('创建子系统成功！');
                    this.closeInner();
                }).catch(() => {
                    this.$message.error('创建子系统失败！');
                });
            } else {
                data.id = this.mapSystemId;
                updateMapSystem(data).then(resp => {
                    this.innerVisible = false;
                    this.reload();
                    this.closeInner();
                    this.$message.success('修改子系统成功！');
                }).catch(() => {
                    this.$message.error('修改子系统失败！');
                });
            }
        },
        closeInner() {
            this.mapSystemId = '';
            this.ruleForm = {
                name: '',
                type: '',
                usage: '',
                memberType: '',
                deviceCode: '',
                client: '',
                function: ''
            };
            this.innerVisible = false;
            this.$refs.ruleForm.resetFields();
        }
    }
};
</script>

<style scoped>

</style>
