<template>
  <div class="app-container">
    <el-form label-position="left" label-width="130px" style="width: 95%; margin-left:20px;">
      <el-alert
        type="warning"
        style="margin-bottom: 20px; font-size: 14px;"
        show-icon>
        <slot name="description">
          <p>环境创建成功后，到运行中环境页面</p>
          <p>1. 同步数据库 和 rabbitmq</p>
          <p>2. 再部署应用服务</p>
        </slot>
      </el-alert>

      <el-form-item label="Namespace名称">
        <el-input v-model="namespace" placeholder="请输入，必输"/>
      </el-form-item>

      <el-form-item label="所属集群" >
        <el-select v-model="cluster" style="width:100%" placeholder="请选择，必选">
          <el-option v-for="item in clusterArray" :value="item" :key="item" />
        </el-select>
      </el-form-item>

      <el-form-item label="环境归属" >
        <el-select v-model="group" style="width:100%" placeholder="请选择，必选">
          <el-option v-for="item in groups" :value="item" :key="item" />
        </el-select>
      </el-form-item>

      <el-form-item label="选择模板" >
        <el-select v-model="currentTemplate" value-key="preset_name" style="width:100%" @change="useTemplate">
          <el-option v-for="item in templates" :value="item.name" :key="item.name" />
        </el-select>
      </el-form-item>

      <el-form-item v-for="(ns, index) in repoNamespaces" :label="ns.type | upper" :key="index">
        <el-card>
          <el-button
            v-for="item in ns.repos"
            :key="item.domain"
            :type="dependant[ns.type] && dependant[ns.type].find(sys => sys.appname === item.appname) ? 'success' : ''"
            style="margin:3px"
            @click="selectSystem(item, ns.type)">
            {{ item.appname }}
          </el-button>
        </el-card>
      </el-form-item>
    </el-form>
    <el-button v-permission="['admin']" style="margin-right:40px;margin-bottom:40px;float:right" type="primary" @click="createData()">{{ $t('table.confirm') }}</el-button>
  </div>
</template>

<script>
import { getBaseRepos, getAllEnvTemplate, createEnv, getGroup } from '@/api/docker'
import { getCluster } from '@/api/cluster'
import permission from '@/directive/permission/index.js' // 权限判断指令

export default {
  directives: { permission },
  filters: {
    upper: function(value) {
      if (!value) return ''
      value = value.toString()
      return value[0].toUpperCase() + value.slice(1)
    }
  },

  data() {
    return {
      namespace: '',
      dependant: {},
      repoNamespaces: [],
      currentTemplate: '',
      templates: {},
      groups: [],
      group: '',
      clusterArray: [],
      cluster: ''
    }
  },

  created() {
    this.getAllRepos()
    this.getAllEnvTemplate()
    this.getGroup()
    this.getCluster()
  },

  methods: {
    getGroup() {
      getGroup().then(res => {
        this.groups = res.data
      })
    },

    getAllRepos() {
      getBaseRepos().then(res => {
        this.repoNamespaces = res.data.filter(item => item.type === 'base')
      })
    },

    getCluster() {
      getCluster().then(res => {
        this.clusterArray = res.data.map(i => i.clusterName)
      })
    },

    changeCluster() {
      this.$store.dispatch('changeCluster', this.cluster)
      sessionStorage.setItem('cluster', this.cluster)
    },

    getAllEnvTemplate() {
      getAllEnvTemplate().then(res => {
        this.templates = res.data
      })
    },

    selectSystem(item, type) {
      if (!this.dependant[type]) this.$set(this.dependant, type, [])
      const index = this.dependant[type].findIndex(sys => sys.appname === item.appname)
      if (index === -1) {
        this.dependant[type].push(item)
      } else {
        this.dependant[type].splice(index, 1)
      }
    },

    useTemplate() {
      const vm = this
      const t = this.templates.find(item => item.name === this.currentTemplate)
      // 清空所有选择
      vm.$set(this, 'dependant', {})

      // 遍历设置
      const keys = Object.keys(t)
      keys.forEach(key => {
        if (key !== 'name' && key !== '_id') {
          t[key].forEach(repo => {
            vm.selectSystem(repo, key)
          })
        }
      })
    },

    createData() {
      const param = {
        namespace: this.namespace,
        description: this.group,
        cluster: this.cluster,
        dependant: {
          base: this.dependant.base,
          java: this.dependant.java,
          ui: this.dependant.ui,
          node: this.dependant.node
        }
      }

      this.changeCluster()

      createEnv(param).then(res => {
        this.$router.push({
          path: `/dockers/runingEnv/${this.namespace}`
        })
      })
      this.$message({
        message: '正在创建，请稍候',
        type: 'success',
        duration: 2000
      })
    }
  }
}
</script>
