<template>
  <!-- 顶部搜索框 -->
  <div class="app-container">
    <div class="filter-container">
      <el-input v-model="listQuery.projectName" placeholder="服务名称" clearable style="width: 200px;" class="filter-item"
        @keyup.enter.native="getProjectList" />
      <el-select v-model="listQuery.projectType" placeholder="服务类型" clearable style="width: 200px" class="filter-item">
        <el-option v-for="item in typeOptions" :key="item.projectType" :label="item.projectType"
          :value="item.projectType" />
      </el-select>
      <el-select v-model="listQuery.isActive" placeholder="是否服役" clearable style="width: 200px" class="filter-item"
        @clear="clearIsActive()">
        <el-option v-for="item in avtiveOptions" :key="item.key" :label="item.label" :value="item.key" />
      </el-select>
      <el-input v-model="listQuery.hostName" placeholder="服务域名" clearable style="width: 200px;" class="filter-item" />
      <el-button class="filter-item" type="primary" icon="el-icon-search" @click="getProjectList">搜索</el-button>
      <el-button class="filter-item" style="margin-left: 10px;" type="primary" icon="el-icon-circle-plus"
        v-permission="('docker:proconfig:add')" @click="handleCreate">新增</el-button>
    </div>

    <!-- 表格 -->
    <el-table :data="proconfigs" fit max-height="700" size="medium" style="width: 100%;">

      <el-table-column label="ID" type="index" align="center" width="55">
        <template slot-scope="scope">
          <span> {{ (listQuery.pageNum - 1) * (listQuery.pageSize) + scope.$index + 1}}</span>
        </template>
      </el-table-column>

      <el-table-column label="服务名称" align="center">
        <template slot-scope="scope">
          <span class="link-type" @click="handleUpdate(scope.row)">{{ scope.row.projectName }}</span>
        </template>
      </el-table-column>

      <el-table-column label="服务描述" prop="desc" align="center" />

      <el-table-column label="线上域名" prop="hostName" align="center" />

      <el-table-column label="负责人" width="80px" prop="owner" align="center" />

      <el-table-column label="状态" width="90px" align="center">
        <template slot-scope="scope">
          <el-tag type="success" v-if="scope.row.isActive === 1">服役中</el-tag>
          <el-tag type="danger" v-else>退役了</el-tag>
        </template>
      </el-table-column>

      <el-table-column label="部署容器" width="90px" align="center">
        <template slot-scope="scope">
          <el-tag type="success" v-if="scope.row.deployToDocker === 1">是</el-tag>
          <el-tag type="danger" v-else>否</el-tag>
        </template>
      </el-table-column>

      <el-table-column label="API地址" align="center" width="80px">
        <template slot-scope="scope">
          <el-tooltip :content="scope.row.api" class="item" effect="dark" placement="top">
            <el-button v-show="scope.row.api" type="primary" icon="el-icon-time" circle
              @click="openUrl(scope.row.api)" />
          </el-tooltip>
        </template>
      </el-table-column>

      <el-table-column label="DDL地址" width="80px" align="center">
        <template slot-scope="scope">
          <el-tooltip :content="scope.row.ddl" class="item" effect="dark" placement="top">
            <el-button v-show="scope.row.ddl" type="success" icon="el-icon-time" circle
              @click="openUrl(scope.row.ddl)" />
          </el-tooltip>
        </template>
      </el-table-column>

      <el-table-column label="Wiki" width="80px" align="center">
        <template slot-scope="scope">
          <el-tooltip :content="scope.row.wiki" class="item" effect="dark" placement="top">
            <el-button v-show="scope.row.wiki" type="warning" icon="el-icon-time" circle
              @click="openUrl(scope.row.wiki)" />
          </el-tooltip>
        </template>
      </el-table-column>

      <el-table-column label="Git地址" width="80px" align="center">
        <template slot-scope="scope">
          <el-tooltip :content="scope.row.gitPath" class="item" effect="dark" placement="top">
            <el-button type="info" icon="el-icon-tickets" circle />
          </el-tooltip>
        </template>
      </el-table-column>

      <el-table-column label="操作" align="center" width="80" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-button type="primary" size="mini" v-permission="('docker:proconfig:edit')"
            @click="handleUpdate(scope.row)">编辑</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
      :current-page.sync="listQuery.pageNum" :page-sizes="[10, 20, 50, 100, 200, 300]" :page-size="listQuery.pageSize"
      layout="total, sizes, prev, pager, next" :total="total"></el-pagination>

    <el-dialog :title="dialogName" :visible.sync="dialogFormVisible">
      <el-form ref="dataForm" :rules="rules" :model="temp" label-position="left" label-width="115px"
        style="width: 90%; margin-left:40px;">
        <el-form-item label="类型" prop="projectType">
          <el-select v-model="temp.projectType" class="filter-item" placeholder="Please select">
            <el-option v-for="item in typeOptions" :key="item.projectType" :label="item.projectType"
              :value="item.projectType" />
          </el-select>
        </el-form-item>
        <el-form-item label="Git地址" prop="gitPath" style="width: 100%;">
          <el-input v-model="temp.gitPath" />
        </el-form-item>

        <el-form-item label="负责人" style="width: 100%;" prop="owner">
          <el-input v-model="temp.owner" />
        </el-form-item>
        <el-form-item label="服务描述" style="width: 100%;">
          <el-input :autosize="{ minRows: 1, maxRows: 4}" v-model="temp.desc" type="textarea"
            placeholder="Please input" />
        </el-form-item>
        <el-form-item label="API" style="width: 100%;">
          <el-input v-model="temp.api" />
        </el-form-item>
        <el-form-item label="数据库DDL" style="width: 100%;">
          <el-input v-model="temp.ddl" />
        </el-form-item>
        <el-form-item label="Wiki" style="width: 100%;">
          <el-input v-model="temp.wiki" />
        </el-form-item>

        <el-form-item label="是否服役" prop="isActive">
          <el-select v-model="temp.isActive" class="filter-item" placeholder="Please select">
            <el-option v-for="item in avtiveOptions" :key="item.key" :label="item.label" :value="item.key" />
          </el-select>
        </el-form-item>

        <el-form-item label="是否部署容器" prop="deployToDocker">
          <el-select v-model="temp.deployToDocker" class="filter-item" placeholder="Please select">
            <el-option v-for="item in deployOptions" :key="item.key" :label="item.label" :value="item.key" />
          </el-select>
        </el-form-item>

        <el-form-item v-if="temp.deployToDocker == 1" label="线上域名" prop="hostName" style="width: 100%;">
          <el-input v-model="temp.hostName" />
        </el-form-item>

        <el-form-item v-if="temp.deployToDocker === 1" label="配置文件路径" prop="configPath" style="width: 100%;">
          <el-input v-model="temp.configPath" />
        </el-form-item>
        <el-form-item v-if="temp.deployToDocker === 1" label="Build文件路径" style="width: 100%;">
          <el-input v-model="temp.jarPath" />
        </el-form-item>
        <el-form-item v-if="temp.deployToDocker === 1" label="日志路径" style="width: 100%;">
          <el-input v-model="temp.logPath" />
        </el-form-item>
        <el-form-item v-if="temp.deployToDocker === 1" label="部署命令" style="width: 100%;">
          <el-input v-model="temp.buildCommand" />
        </el-form-item>

        <!-- <el-form-item v-if="temp.deployToDocker === 1" label="Sonar扫描" prop="sonar">
          <el-select v-model="temp.sonar" class="filter-item" placeholder="Please select">
            <el-option v-for="item in deployOptions" :key="item.key" :label="item.label" :value="item.key" />
          </el-select>
        </el-form-item> -->

        <el-form-item v-show="temp.projectType==='java' && temp.deployToDocker" label="Database" style="width: 100%;">
          <el-input :autosize="{ minRows: 1, maxRows: 2}" v-model="temp.database" type="textarea"
            placeholder="依赖的数据库，库名与库名之间使用空格分隔" />
        </el-form-item>

        <el-alert v-show="temp.projectType==='java' && temp.deployToDocker" style="margin-bottom:20px"
          title="编辑启动命令需要管理员权限" type="warning" />

        <el-form-item v-show="temp.projectType==='java' && temp.deployToDocker" label="启动命令" style="width: 100%;">
          <el-input :autosize="{ minRows: 2, maxRows: 10}" v-model="temp.startCommand" :disabled="disabled"
            type="textarea" placeholder="Please input" />
        </el-form-item>

        <el-card v-if="temp.deployToDocker" class="box-card">
          <div slot="header">
            <span>Kubernetes设置</span>
          </div>
          <el-form :inline="true" size="medium">
            <el-form-item label="CPU request" style="width:40%" prop="cpuRequest">
              <el-input v-model="temp.cpuRequest" />
            </el-form-item>
            <el-form-item label="CPU limit" style="width:40%" prop="cpuLimit">
              <el-input v-model="temp.cpuLimit" />
            </el-form-item>
            <el-form-item label="内存 request" style="width:40%" prop="memRequest">
              <el-input v-model="temp.memRequest" />
            </el-form-item>
            <el-form-item label="内存 limit" style="width:40%" prop="memLimit">
              <el-input v-model="temp.memLimit" />
            </el-form-item>
          </el-form>
        </el-card>

      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取消</el-button>
        <el-button type="primary" @click="createData()">确认</el-button>
      </div>
    </el-dialog>

    <el-dialog :visible.sync="dialogDeleteVisible" :data="temp" title="Delete">
      <span>
        确定要删除{{ temp.projectName }}吗?
      </span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogDeleteVisible = false">取消</el-button>
        <el-button type="primary" @click="deleteData()">确认</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {
  getDockerProjectList,
  getDockerProjectType,
  addDockerProject
} from '@/api/k8s'
export default {
  data() {
    return {
      total: 0,
      listQuery: {
        pageNum: 1,
        pageSize: 10,
        hostName: ''
      },
      typeOptions: [],
      avtiveOptions: [
        { key: 1, label: '服役中' },
        { key: 0, label: '退役了' }
      ],
      deployOptions: [
        { key: 1, label: '是' },
        { key: 0, label: '否' }
      ],
      sortOptions: [
        { label: '服务名升序', key: '+project_name' },
        { label: '服务名降序', key: '-project_name' }
      ],
      temp: {},
      dialogFormVisible: false,
      dialogDeleteVisible: false,
      dialogStatus: '',
      dialogName: '',
      proconfigs: [],
      disabled: undefined,
      rules: {
        projectType: [{ required: true, message: '请选择', trigger: 'change' }],
        gitPath: [{ required: true, message: '请输入', trigger: 'change' }],
        isActive: [{ required: true, message: '请选择', trigger: 'change' }],
        deployToDocker: [
          { required: true, message: '请选择', trigger: 'change' }
        ],
        hostName: [{ required: true, message: '请输入', trigger: 'change' }],
        owner: [{ required: true, message: '请输入', trigger: 'change' }],
        configPath: [{ required: true, message: '请输入', trigger: 'change' }]
      }
    }
  },
  created() {
    this.getType()
    this.getProjectList()
  },
  methods: {
    // 获取项目列表
    getProjectList() {
      getDockerProjectList(this.listQuery).then((resp) => {
        if (resp.data.data != null) {
          this.proconfigs = resp.data.data.list
          this.total = resp.data.data.total
        } else {
          this.$message.error('获取项目列表失败')
        }
      })
    },
    // 获取项目类型
    getType() {
      getDockerProjectType().then((resp) => {
        if (resp.data.data) {
          this.typeOptions = resp.data.data
        }
      })
    },
    // 打开链接
    openUrl(data) {
      window.open(`${data}`, '_blank')
    },
    // 打开新建项目对话框
    handleCreate() {
      this.dialogName = '新建项目'
      this.temp = {
        cpuRequest: 200,
        cpuLimit: 1000,
        memRequest: 100,
        memLimit: 1000
      }
      this.dialogFormVisible = true
      this.$nextTick(() => {
        this.$refs['dataForm'].clearValidate()
      })
    },
    // 打开更新项目对话框
    handleUpdate(row) {
      this.dialogName = '编辑项目'
      this.temp = Object.assign({}, row)
      this.dialogFormVisible = true
      this.$nextTick(() => {
        this.$refs['dataForm'].clearValidate()
      })
    },
    // 新建项目
    createData() {
      var projectName = this.temp.gitPath.split('/')[1].split('.')[0]
      this.temp.projectName = projectName
      this.temp.sonar = 0
      this.$refs['dataForm'].validate((valid) => {
        if (valid) {
          addDockerProject(this.temp).then((resp) => {
            if (resp.data.data === true) {
              this.dialogFormVisible = false
              this.getProjectList()
              return this.$message.success('创建成功！')
            } else {
              return this.$message.error('创建失败！')
            }
          })
        }
      })
    },
    deleteData() {},
    // 每页数量变化
    handleSizeChange(newSize) {
      this.listQuery.pageSize = newSize
      this.getProjectList()
    },
    // 页数切换
    handleCurrentChange(newPage) {
      this.listQuery.pageNum = newPage
      this.getProjectList()
    },
    // 清空是否服役
    clearIsActive() {
      delete this.listQuery.isActive
    }
  }
}
</script>

<style lang="less" scoped>
.app-container {
  padding: 20px;
}
.filter-container {
  padding-bottom: 10px;

  .filter-item {
    display: inline-block;
    vertical-align: middle;
    margin-bottom: 10px;
  }
}
.link-type,
.link-type:focus {
  color: #337ab7;
  cursor: pointer;

  &:hover {
    color: rgb(32, 160, 255);
  }
}
</style>
