<template>
  <div class="control-right">
    <el-form ref="form" :model="rcpform" label-width="130px">
      <el-form-item v-if="curpagekey === 'assignstage'" :label="$t('openatccomponents.control.intersectionindex')">
        <el-input v-model="rcpform.intersectionindex" style="width: 70%"></el-input>
      </el-form-item>
      <el-button-group style="margin-left:130PX;margin-bottom: 20PX;">
        <span
          v-for="(item, index) in chooseButtons"
          :key="index"
          @click="handleSwitchPage(item.key)"
          class="btn"
          :class="{'btnFocus': item.active}"
          :style="{'borderRadius': item.borderRadius}"
        >{{ item.value }}</span>
      </el-button-group>
      <el-form-item  v-if="curpagekey === 'assignstage'" :label="$t('openatccomponents.control.assignmode')">
        <el-select
          clearable
          v-model="rcpform.assignmode"
          @change="onSelectAssignModeChange"
          :placeholder="$t('openatccomponents.common.select')"
          style="width: 70%;"
        >
          <!-- <el-option
            v-for="item in assignmodeoptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
            v-if="curpagekey === 'assignstage'"
            style="width: 70%;"
          /> -->
          <el-option
            v-for="item in assignplanoptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item v-if="curpagekey === 'assignstage'" :label="$t('openatccomponents.control.assignstages')">
        <el-input v-show="false" v-model="rcpform.assignstage" style="width: 70%"></el-input>
        <div class="value" style="width: 100%;">
          <SelectGBCrossStage
            :agentid="agentId"
            :default-value="rcpform.assignstage ? Number(rcpform.assignstage) : -1"
            @onChange="onSelectGBCrossStageChange"
            @getRcpTscParams="getRcpTscParams"
            style="width: 70%;"
          />
        </div>
      </el-form-item>
      <el-form-item v-if="curpagekey === 'assignplan'" :label="$t('openatccomponents.control.assignplan')">
        <!-- <el-input v-model="rcpform.assignplan" style="width: 70%"></el-input> -->
        <el-select
          clearable
          v-model="rcpform.pipe"
          :placeholder="$t('openatccomponents.common.select')"
          style="width: 70%;"
        >
          <el-option
            v-for="item in pipeoptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item v-if="curpagekey === 'assignstage'" :label="$t('openatccomponents.control.assignphases')">
        <el-select
          multiple
          clearable
          v-model="rcpform.assignphase"
          :placeholder="$t('openatccomponents.common.select')"
          style="width: 70%;"
        >
          <el-option
            v-for="item in phaseoptions"
            :key="item.Index"
            :label="item.Index"
            :value="item.Index"
          />
        </el-select>
      </el-form-item>
      <!-- <el-form-item v-if="curpagekey === 'assignplan'" :label="$t('openatccomponents.control.semantics')">
        <el-select
          clearable
          v-model="rcpform.semantics"
          :placeholder="$t('openatccomponents.common.select')"
          style="width: 70%;"
        >
          <el-option
            v-for="item in semanticsoptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item> -->
      <!-- <el-form-item :label="$t('openatccomponents.control.assigncycle')">
        <el-input v-model="rcpform.assigncycle" style="width: 70%"></el-input>
      </el-form-item>
      <el-form-item :label="$t('openatccomponents.control.assignactiondelay')">
        <el-input v-model="rcpform.assignactiondelay" style="width: 70%"></el-input>
      </el-form-item>
      <el-form-item :label="$t('openatccomponents.control.duration')">
        <el-input v-model="rcpform.duration" style="width: 70%"></el-input>
      </el-form-item> -->
      <div style="text-align: center;">
        <el-button type="primary" @click="onSubmitRcp" size="small">{{ $t('openatccomponents.common.implement') }}</el-button>
      </div>
    </el-form>
  </div>
</template>
<script>
// import { getMessageByCode } from '../../../utils/responseMessage'
import { putTscControl } from '../../../api/control.js'
import SelectGBCrossStage from '../../components/SelectGBCrossStage/index.vue' // 根据实际路径调整

export default {
  name: 'RcpRightPanel',
  components: { SelectGBCrossStage },
  props: {
    agentId: {
      type: String,
      required: true
    }
  },
  data () {
    return {
      phaseoptions: [],
      curpagekey: 'assignstage',
      rcpform: {
        pipe: '',
        intersectionindex: '1',
        assignstage: '',
        assignphase: [],
        assignplan: '',
        assignmode: '',
        assigncycle: '',
        assignactiondelay: '',
        semantics: '',
        duration: ''
      },
      pipeoptions: [
        { value: 'Order_Flash', label: this.$t('openatccomponents.system.orderflash') },
        { value: 'Order_Red', label: this.$t('openatccomponents.system.orderred') },
        { value: 'Order_On', label: this.$t('openatccomponents.system.orderon') },
        { value: 'Order_Off', label: this.$t('openatccomponents.system.orderoff') },
        { value: 'Order_Reset', label: this.$t('openatccomponents.system.orderreset') },
        { value: 'Order_Cancel', label: this.$t('openatccomponents.system.ordercancel') }
      ],
      semanticsoptions: [
        { value: 0, label: this.$t('openatccomponents.system.semanticphasestage') },
        { value: 1, label: this.$t('openatccomponents.system.semanticphasering') }
      ],
      chooseButtons: [
        {
          key: 'assignstage',
          value: this.$t('openatccomponents.control.assignstage'),
          active: true,
          borderRadius: '4px 0 0 4px'
        },
        {
          key: 'assignplan',
          value: this.$t('openatccomponents.control.assignplan'),
          active: false,
          borderRadius: '0 4px 4px 0'
        }
      ],
      assignmodeoptions: [
        { value: 'Stage Lock', label: this.$t('openatccomponents.control.stagelock') },
        { value: 'Quick Lock', label: this.$t('openatccomponents.control.quicklock') },
        { value: 'Guard Lock', label: this.$t('openatccomponents.control.guardlock') }
      ],
      assignplanoptions: [
        { value: 'Mode_Local_FixCycle_Control', label: this.$t('openatccomponents.plan.modelocalfixcyclecontrol') },
        { value: 'Mode_Local_Va_Control', label: this.$t('openatccomponents.plan.modelocalvacontrol') },
        { value: 'Mode_Local_Coordination_Control', label: this.$t('openatccomponents.plan.modelocalcoordinationcontrol') },
        { value: 'Mode_Local_Adaptive_Control', label: this.$t('openatccomponents.plan.modelocaladaptivecontrol') },
        { value: 'Mode_Local_Manual_Control', label: this.$t('openatccomponents.plan.modelocalmanualcontrol') },
        { value: 'Mode_Local_Manual_Flash_Control', label: this.$t('openatccomponents.plan.modelocalmanualflashcontrol') },
        { value: 'Mode_Local_Manual_AllRed_Control', label: this.$t('openatccomponents.plan.modelocalmanualallredcontrol') },
        { value: 'Mode_Vehicle_Priority_Control', label: this.$t('openatccomponents.plan.modelocalvehicleprioritycontrol') },
        { value: 'Mode_Pedestrian_Request_Control', label: this.$t('openatccomponents.plan.modepedestrianrequestcontrol') },
        { value: 'Mode_AllRed_To_Green_Control', label: this.$t('openatccomponents.plan.modeallredtogreencontrol') },
        { value: 'Mode_Arrange_Control', label: this.$t('openatccomponents.plan.modearrangecontrol') },
        { value: 'Mode_Semi_Va_Control', label: this.$t('openatccomponents.plan.modesemivacontrol') },
        { value: 'Mode_Anti_Overflow_Control', label: this.$t('openatccomponents.plan.modeantioverflowcontrol') },
        { value: 'Mode_Special_Flash_Control', label: this.$t('openatccomponents.plan.modespecialflashcontrol') },
        { value: 'Mode_Special_AllRed_Control', label: this.$t('openatccomponents.plan.modespecialallredcontrol') },
        { value: 'Mode_Special_AllOff_Control', label: this.$t('openatccomponents.plan.modespecialalloffcontrol') },
        { value: 'Mode_Center_TimeTable_Control', label: this.$t('openatccomponents.plan.modecentertimetablecontrol') },
        { value: 'Mode_Center_Optimization_Control', label: this.$t('openatccomponents.plan.modecenteroptimizationcontrol') },
        { value: 'Mode_Center_Coordination_Control', label: this.$t('openatccomponents.plan.modecentercoordinationcontrol') },
        { value: 'Mode_Center_Adaptive_Control', label: this.$t('openatccomponents.plan.modecenteradaptivecontrol') },
        { value: 'Mode_Center_Lock_Control', label: this.$t('openatccomponents.plan.modecenterlockcontrol') },
        { value: 'Mode_Center_Flash_Control', label: this.$t('openatccomponents.plan.modecenterflashcontrol') },
        { value: 'Mode_Center_AllRed_Control', label: this.$t('openatccomponents.plan.modecenterallredcontrol') },
        { value: 'Mode_Center_AllOff_Control', label: this.$t('openatccomponents.plan.modecenteralloffcontrol') },
        { value: 'Mode_Center_Va_Control', label: this.$t('openatccomponents.plan.modecentervacontrol') },
        { value: 'Mode_Center_Plan_Control', label: this.$t('openatccomponents.plan.modecenterplancontrol') },
        { value: 'Mode_Center_LightGroups_Control', label: this.$t('openatccomponents.plan.modecenterlightgroupscontrol') },
        { value: 'Mode_Center_HoldLock_Control', label: this.$t('openatccomponents.plan.modecenterholdlockcontrol') },
        { value: 'Mode_Center_Clear_Control', label: this.$t('openatccomponents.plan.modecenterclearcontrol') },
        { value: 'Mode_Center_BottleNeck_Control', label: this.$t('openatccomponents.plan.modecenterbottleneckcontrol') }
      ]
    }
  },
  created () {
    // // 从全局状态获取 globalParamModel（与原逻辑一致）
    // this.globalParamModel = this.$store.getters.globalParamModel
    // // 获取 phaseoptions
    // const phaseConfig = this.globalParamModel.getParamsRcpByType('Phase').PhaseConfig
    // this.phaseoptions = phaseConfig || []
  },
  methods: {
    onSelectAssignModeChange () {
      this.rcpform.assignstage = ''
    },
    onSelectGBCrossStageChange (val) {
      if (val) this.rcpform.assignstage = val
    },
    getRcpTscParams (params) {
      // 处理获取到的参数
      if (params && params.Phase && params.Phase.PhaseConfig) {
        this.phaseoptions = params.Phase.PhaseConfig || []
      }
    },
    handleSwitchPage (key) {
      // 重置关联字段
      if (key === 'assignstage') {
        this.rcpform.assignplan = ''
        this.rcpform.semantics = ''
        this.rcpform.assignphase = []
        this.rcpform.pipe = ''
      }
      if (key === 'assignplan') {
        this.rcpform.assignstage = ''
      }
      this.rcpform.assignmode = ''
      // 切换激活按钮
      this.chooseButtons.forEach(btn => {
        btn.active = btn.key === key
        if (btn.active) this.curpagekey = key
      })
    },
    getError (val) {
      // 错误码映射（若需复用，可抽为工具函数）
      const errorMap = {
        'Status_BadValue': 'openatccomponents.common.statusbadvalue',
        'Status_WrongLength': 'openatccomponents.common.statuswronglength',
        'Status_Overflow': 'openatccomponents.common.statusvverflow',
        'Status_ReadOnly': 'openatccomponents.common.statusreadonly',
        'Status_NullValue': 'openatccomponents.common.statusnullvalue',
        'Status_Error': 'openatccomponents.common.statuserror',
        'Status_ControlFail': 'openatccomponents.common.statuscontrolfail',
        'Status_AccessDenied': 'openatccomponents.common.statusaccessdenied',
        'Status_InvalidKey': 'openatccomponents.common.statusinvalidkey',
        'Status_ChecksumError': 'openatccomponents.common.statuschecksumerror'
      }
      return this.$t(errorMap[val] || '')
    },
    onSubmitRcp () {
      const data = {
        RemoteControl: {
          CenterControlTab: {
            IntersectionIndex: Number(this.rcpform.intersectionindex)
            // AssignCycle: Number(this.rcpform.assigncycle),
            // AssignActionDelay: Number(this.rcpform.assignactiondelay),
            // duration: Number(this.rcpform.duration)
          }
        }
      }
      const pipedata = {
        CommandPipes: {
          Command: this.rcpform.pipe
        }
      }
      // 分场景组装数据
      if (this.curpagekey === 'assignstage') {
        data.RemoteControl.CenterControlTab.AssignPhase = this.rcpform.assignphase
        // data.RemoteControl.CenterControlTab.AssignDwellMode = this.rcpform.assignmode
        data.RemoteControl.CenterControlTab.AssignStage = Number(this.rcpform.assignstage)
        data.RemoteControl.CenterControlTab.AssignMode = this.rcpform.assignmode
      }
      if (this.curpagekey === 'assignplan') {
        // data.RemoteControl.CenterControlTab.AssignPlan = [Number(this.rcpform.assignplan), this.rcpform.semantics]
        // data.RemoteControl.CenterControlTab.AssignMode = this.rcpform.assignmode
      }
      // 调用接口
      const setdata = this.curpagekey === 'assignstage' ? data : pipedata
      putTscControl(setdata)
        .then(() => this.$message.success(this.$t('openatccomponents.common.download')))
        .catch(err => {
          this.$message.error(err)
          console.error(err)
        })
    }
  }
}
</script>
<style scoped>
.container-right {
}
.control-right {
}
.btn {
  padding: 2px 8px;
  border: 1px solid #dcdcdc;
  cursor: pointer;
}
.btnFocus {
  background-color: #409eff;
  color: #fff;
  border-color: #409eff;
}
</style>
