<template>
  <el-select placeholder="选择运行环境" style="width:180px; margin-right: 5px;"
             :disabled="worldModelState.runState.currentEnvId && worldModelState.runState.isRunning"
             :model-value="worldModelState.runState.currentEnvId"
             @change="setEnvId">
    <el-option v-for="env in envList" :key="env.envId" :label="env.envName" :value="env.envId"></el-option>
    <template #footer>
      <el-button size="small" type="primary" @click="createEnv" plain>创建虚拟环境</el-button>
      <el-button size="small" :icon="renderIcon('Refresh')" @click="reloadEnvList" />
    </template>
  </el-select>
  <el-select style="width:80px;margin-right: 5px;" placeholder="时间速率"
             v-model="worldModelState.runState.timeRate"
             v-if="worldModelState.runState.isVirtual">
    <el-option v-for="option in timeRateOptions"
               :label="option.label" :value="option.value" />
  </el-select>
  <el-button :icon="renderIcon('Connection')" type="primary"
             v-if="!worldModelState.runState.currentEnvId || !worldModelState.runState.isRunning"
             :disabled="!worldModelState.runState.currentEnvId"
             :loading="worldModelState.runState.isLoading"
             @click="connectEnv">连接服务
  </el-button>
  <el-button :icon="renderIcon('antd DisconnectOutlined')" type="danger" plain
             v-if="worldModelState.runState.currentEnvId && worldModelState.runState.isRunning"
             :loading="worldModelState.runState.isLoading"
             @click="disconnectEnv">断开连接
  </el-button>
</template>
<script>
import { renderIcon } from '@/utils/webutils.js'
import { worldModel } from '@/core/manager/WorldModel.js'
import EnvManager from '@/core/manager/EnvManager.js'
import _ from 'lodash'

export default {
  name: 'EnvSelectConnect',
  data() {
    return {
      /**
       * @type {Array<EnvInfo>}
       */
      envList: [],
      timeRateOptions: [
        { label: '1x', value: 1 },
        { label: '2x', value: 2 },
        { label: '5x', value: 5 },
        { label: '10x', value: 10 }
      ]
    }
  },
  mounted() {
    this.reloadEnvList()
  },
  methods: {
    renderIcon,
    connectEnv() {
      worldModel.envManager.connectEnv().finally()
    },
    disconnectEnv() {
      worldModel.envManager.disconnectEnv().finally()
    },
    createEnv() {
      EnvManager.createEnv(this.worldModelState.project_uuid).then(() => {
        this.reloadEnvList()
      })
    },
    reloadEnvList() {
      EnvManager.getAllEnv(this.worldModelState.project_uuid)
        .then(envList => {
          this.envList = envList
        })
    },
    setEnvId(newVal) {
      const env = _.find(this.envList, env => env.envId === newVal)
      if (!env) {
        system.showErrorDialog(`未找到环境ID: ${newVal}`)
      }
      worldModel.setEnv(env)
    }
  },
  watch: {
    'worldModelState.isOpened': {
      handler() {
        if (this.worldModelState.isOpened) {
          this.reloadEnvList()
        }
      }
    },
    'worldModelState.project_uuid': {
      immediate: true,
      handler() {
        if (this.worldModelState.isOpened) {
          this.reloadEnvList()
        }
      }
    }
  },
  computed: {
    isModelOpen() {
      return this.worldModelState.isOpened
    },
    worldModelState() {
      return worldModel.state
    }
  }
}
</script>
