<template>
    <div>
        <el-form label-width="80px">
            <el-form-item :label="title">
                <el-button type="primary" size="small" @click="addDeviceCondition" :disabled="isdisabled">添加</el-button>
            </el-form-item>
        </el-form>
        <el-table
            :data="ConditionVOList" border style="margin-top:10px;margin-left:10px;width:901px">
            <el-table-column :label="$t('scriptRecord.deviceType')" width="150">
                <template slot-scope="scope">
                    <div v-if="scope.row.isAdded">{{scope.row.deviceType}}</div>
                    <el-select v-else v-model="scope.row.deviceType" placeholder="请选择" @change="changeDeviceType($event,scope.row)">
                        <el-option v-for="deviceType in deviceTypeList" :key="deviceType.value" :label="deviceType.label" :value="deviceType.value"></el-option>
                    </el-select>
                </template>
            </el-table-column>
            <el-table-column :label="$t('scriptRecord.deviceCode')" width="150">
                <template slot-scope="scope">
                    <div v-if="scope.row.isAdded">{{scope.row.code}}</div>
                    <el-select v-else v-model="scope.row.code" placeholder="请选择">
                        <el-option v-for="deviceCode in deviceCodeList" :key="deviceCode.code" :label="deviceCode.name" :value="deviceCode.code"></el-option>
                    </el-select>
                </template>
            </el-table-column>
            <el-table-column :label="$t('scriptRecord.deviceCondition')" width="150">
                <template slot-scope="scope">
                    <div v-if="scope.row.isAdded">{{scope.row.condition}}</div>
                    <el-select v-else v-model="scope.row.condition" placeholder="请选择">
                        <el-option v-for="deviceCondition in deviceCondList" :key="deviceCondition.condition" :label="deviceCondition.label" :value="deviceCondition.condition"></el-option>
                    </el-select>
                </template>
            </el-table-column>
            <el-table-column :label="$t('scriptRecord.paramDeviceType')" width="150">
                <template slot-scope="scope">
                    <div v-if="scope.row.isAdded">{{scope.row.paramDeviceType}}</div>
                    <el-select v-else v-model="scope.row.paramDeviceType" placeholder="请选择" @change="changeParamDeviceType">
                        <el-option v-for="deviceType in deviceTypeList" :key="deviceType.value" :label="deviceType.label" :value="deviceType.value"></el-option>
                    </el-select>
                </template>
            </el-table-column>
            <el-table-column :label="$t('scriptRecord.paramDeviceCode')" width="150">
                <template slot-scope="scope">
                    <div v-if="scope.row.isAdded">{{scope.row.paramCode}}</div>
                    <el-select v-else v-model="scope.row.paramCode" placeholder="请选择">
                        <el-option v-for="paramDeviceCode in paramDeviceCodeList" :key="paramDeviceCode.code" :label="paramDeviceCode.name" :value="paramDeviceCode.code"></el-option>
                    </el-select>
                </template>
            </el-table-column>
            <el-table-column :label="$t('scriptRecord.operation')" width="150">
                <template slot-scope="scope">
                    <el-row v-if="scope.row.isAdded">
                        <el-button type="primary" size="mini" @click="deleteOperate(scope.$index)">删除</el-button>
                    </el-row>
                    <el-row v-else>
                        <el-button type="primary" size="mini" @click="determineOperate(scope.row)">确定</el-button>
                        <el-button type="primary" size="mini" @click="cancleOperate">取消</el-button>
                    </el-row>
                </template>
            </el-table-column>
        </el-table>
    </div>
</template>
<script>
    import DeviceTypeDic from '@/scripts/DeviceTypeDic';
    import Vue from 'vue';
    import {getDeviceCodeByDeviceType,getDeviceCoditionByDeviceType} from '@/api/simulation';
    export default {
        name: 'deviceCondition',
        props: {
            group: {
                type: String,
                required: true
            },
            ConditionVOList:{
                type: Array,
                required: true
            },
            isAdding:{
                type: Boolean,
                required: true
            },
            title:{
                type: String,
                required: true
            }
        },
        mounted(){
            this.isdisabled=false;
        },
        data(){
            return{
                deviceTypeList:DeviceTypeDic.ConstSelect.deviceType,
                deviceCodeList:[],
                deviceCondList:[],
                paramDeviceCodeList:[],
                isdisabled:false,
            }
        },
        methods:{
            changeDeviceType(index,row){
                let params = {deviceType:index};
                let group=this.$props.group;
                row.code="";
                row.condition="";
                getDeviceCodeByDeviceType(group,params).then(response =>{
                    let resultData=response.data;
                    resultData=this.changeData(index,resultData);
                    this.deviceCodeList=resultData;
                })
                getDeviceCoditionByDeviceType(params).then(response =>{
                    this.deviceCondList=response.data;
                });
            },
            changeParamDeviceType(index){
                let params = {deviceType:index};
                let group=this.$props.group;
                getDeviceCodeByDeviceType(group,params).then(response =>{
                    let resultData=response.data;
                    resultData=this.changeData(index,resultData);
                    this.paramDeviceCodeList=resultData;
                })
            },
            changeData(param,data){
                return param=="Train"?JSON.parse(JSON.stringify(data).replace(/groupNumber/g,"name")):data;
            },
            deleteOperate(data){
                this.$props.ConditionVOList.splice(data,1);
            },
            determineOperate(data){
                if(data.deviceType=="")
                {
                    this.$messageBox(`请选择设备类型`);
                    return;
                }
                if(data.code=="")
                {
                    this.$messageBox(`请选择设备编号`);
                    return;
                }
                if(data.condition=="")
                {
                    this.$messageBox(`请选择设备条件`);
                    return;
                }
                this.$props.ConditionVOList[this.$props.ConditionVOList.length-1].isAdded=true;
                this.isdisabled=false;
                this.$emit("changeAdding",false);
            },
            cancleOperate(){
                this.isdisabled=false;
                this.$props.ConditionVOList.pop();
                this.$emit("changeAdding",false);
            },
            addDeviceCondition(){
                this.isdisabled=true;
                let deviceCondition={
                    deviceType:"",
                    code:"",
                    condition:"",
                    paramCode:"",
                    paramDeviceType:null,
                    isAdded:false,
                };
                this.$emit("changeAdding",true);
                this.$props.ConditionVOList.push(deviceCondition);
            },
            resetDisabled(){
                this.isdisabled=false;
            }
        }
    }
</script>
