<template>
  <div class="app-container">
    <el-form ref="dataForm" label-position="left" label-width="130px" style="width: 95%; margin-left:20px;">
      <el-form-item label="Namespace名称">
        <el-input v-model="namespace" :disabled="true"/>
      </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.appname"
            :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-checkbox :indeterminate="isIndeterminate[ns.type]" v-model="checkAll[ns.type]" @change="handleCheckAllChange(checkAll[ns.type],ns.type)">全选</el-checkbox>
      </el-form-item>
    </el-form>

    <el-button style="margin-right:40px;margin-bottom:40px;float:right" type="primary" @click="createData()">{{ $t('table.confirm') }}</el-button>
    <el-button style="margin-right:40px;margin-bottom:40px;float:right" @click="goBack()">{{ $t('table.cancel') }}</el-button>
  </div>
</template>

<script>
import { getAppRepos, getAllEnvTemplate, createEnv } from '@/api/docker'

export default {

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

  data() {
    return {
      namespace: '',
      dependant: {},
      repoNamespaces: [],
      currentTemplate: '',
      templates: {},
      checkAll: {},
      isIndeterminate: {}
    }
  },

  created() {
    this.namespace = this.$route.params.name
    this.getAllRepos()
    this.getAllEnvTemplate()
  },

  methods: {
    goBack() {
      this.$router.go(-1)
    },
    getAllRepos() {
      getAppRepos().then(res => {
        this.repoNamespaces = res.data
        this.repoNamespaces.forEach(item => {
          this.checkAll[item.type] = false
          this.isIndeterminate[item.type] = true
        })
      })
    },

    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)
      }
    },

    handleCheckAllChange(val, type) {
      this.$set(this.dependant, type, [])
      this.isIndeterminate[type] = false
      if (val) this.dependant[type] = this.repoNamespaces.filter(item => item.type === type)[0].repos.concat()
    },

    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: 'deploy',
        dependant: this.dependant
      }

      delete param.dependant.base

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