<template>
  <div>
    <el-form :model="addEnvForm" ref="addEnvFormRef" :rules="rules" 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名称" prop="name">
        <el-input v-model="addEnvForm.name" placeholder="请输入环境名称" />
      </el-form-item>
      <el-form-item label="环境归属" prop="desc">
        <el-select v-model="addEnvForm.desc" style="width:100%" placeholder="请选择环境归属">
          <el-option v-for="item in envBelongList" :key="item.id" :label="item.name" :value="item.id" />
        </el-select>
      </el-form-item>
      <el-form-item label="选择模版" prop="templateId">
        <el-select v-model="addEnvForm.templateId" style="width:100%" placeholder="请选择环境模版">
          <el-option v-for="item in envTemplateList" :value="item.envTemplate.id" :key="item.envTemplate.id"
            :label="item.envTemplate.name" />
        </el-select>
      </el-form-item>
      <el-form-item label="归属人" prop="owner">
        <el-input v-model="addEnvForm.owner" placeholder="请输入归属人" />
      </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer" style="margin-left:500px">
      <el-button type="primary" @click="saveEnv">确 定</el-button>
    </span>
  </div>
</template>
<script>
import { getEnvTemplateList, addEnv } from '@/api/getEnvTemplate'
// 引入组件
import bus from '@/utils/bus'
export default {
  data() {
    var checkData = (rule, value, callback) => {
      if (value) {
        if (/[\u4E00-\u9FA5]/g.test(value)) {
          callback(new Error('不能输入汉字'))
        } else {
          callback()
        }
        callback()
      }
    }
    return {
      addEnvForm: {},
      queryModuleInfo: {
        pageNum: 1,
        pageSize: 100
      },
      namespaceList: [],
      envTemplateList: [],
      envBelongList: [
        {
          id: 'test',
          name: 'test'
        },
        {
          id: 'dev',
          name: 'dev'
        }
      ],
      rules: {
        name: [
          {
            required: true,
            message: '环境名称不能为空！',
            trigger: 'blur'
          },
          { validator: checkData, trigger: 'blur' }
        ],
        desc: [
          {
            required: true,
            message: '环境归属不能为空！',
            trigger: 'blur'
          }
        ],
        templateId: [
          {
            required: true,
            message: '环境模版不能为空！',
            trigger: 'blur'
          }
        ],
        owner: [
          {
            required: true,
            message: '归属人不能为空！',
            trigger: 'blur'
          }
        ]
      }
    }
  },
  created() {
    this.getEnvTemplateList()
  },
  methods: {
    // 获取环境模版列表
    getEnvTemplateList() {
      getEnvTemplateList(this.queryModuleInfo).then((resp) => {
        this.envTemplateList = resp.data.data.list
      })
    },
    // 保存信息
    saveEnv() {
      this.$refs.addEnvFormRef.validate((valid) => {
        if (!valid) {
          return false
        } else {
          var formdata = new FormData()
          formdata.set('name', this.addEnvForm.name)
          formdata.set('desc', this.addEnvForm.desc)
          formdata.set('owner', this.addEnvForm.owner)
          formdata.set('templateId', this.addEnvForm.templateId)

          addEnv(formdata).then((resp) => {
            if (resp.data.msg === 'SUCCESS') {
              this.$message.success('新增成功！')
              // 向菜单栏中的下拉框传递环境名称
              bus.$emit('testEnv', this.addEnvForm.name)
              // 向菜单栏中传递环境名称
              bus.$emit('refreshEnv', this.addEnvForm.name)
              this.$router.push({
                path: `/docker/env`
              })
              this.addEnvForm.name = ''
              this.addEnvForm.desc = ''
              this.addEnvForm.owner = ''
              this.addEnvForm.templateId = ''
            } else {
              this.$message.error(resp.data.msg)
            }
          })
        }
      })
    }
  }
}
</script>
