<template>
   <div style="height:">
         <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
            <el-tab-pane label="系统配置" name="first">
                 <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
                            <el-form-item label="项目代码" prop="name" >
                                <el-input class="demo" v-model="ruleForm.project_no"></el-input>
                            </el-form-item>
                            <el-form-item label="数据库IP" prop="name">
                                <el-input  class="demo" v-model="ruleForm.db_ip"></el-input>
                            </el-form-item>
                             <el-form-item label="数据库端口" prop="name">
                                <el-input class="demo" v-model="ruleForm.db_port"></el-input>
                            </el-form-item>
                             <el-form-item label="用户名" prop="name">
                                <el-input class="demo" v-model="ruleForm.db_user"></el-input>
                            </el-form-item>
                             <el-form-item label="密码" prop="name">
                                <el-input class="demo" type="password" v-model="ruleForm.db_password"></el-input>
                                 
                            </el-form-item>
                             <el-form-item label="本机IP" prop="name">
                                <el-input  class="demo" v-model="ruleForm.host_ip"></el-input>
                            </el-form-item>
                             <el-form-item label="TIIP数据库名" prop="name">
                                <el-input class="demo" v-model="ruleForm.tiip_db_name"></el-input>
                                 <el-button style="margin-left: 40px" type="primary" @click="test(ruleForm.tiip_db_name)">测试连接</el-button>
                            </el-form-item>
                            <el-form-item label="MES数据库名" prop="name">
                                <el-input class="demo" v-model="ruleForm.mes_db_name"></el-input>
                                 <el-button style="margin-left: 40px" type="primary" @click="test(ruleForm.mes_db_name)">测试连接</el-button>
                            </el-form-item>
                            <el-form-item>
                                <el-button type="primary" @click="set_project('ruleForm')">保存</el-button>
                                 <el-button type="primary" @click="install_runner()">安装runner</el-button>
                            </el-form-item>
                             <el-form-item style="float:right;margin-top:-300px;margin-right:47%;">
                                  <el-progress type="circle" v-show="percentage!==0" :percentage="percentage"></el-progress>
                            </el-form-item>
                            </el-form>
            </el-tab-pane>
             <!-- <el-tab-pane label="端口开发" name="fourth">端口开发</el-tab-pane> -->
            <el-tab-pane label="系统升级" name="second">
                <el-header class="main-header">
          <el-row class="main-header-row">
            <!-- <el-col :span="3" class="search-input-area">
              <el-input size="small" placeholder="搜索..." @clear="query_bill_list" clearable v-model="searchParam.quick_query" @keyup.enter.native="query_bill_list">
              </el-input>
            </el-col> -->
            <el-col :span="3" class="search-button-area" style="float:right">
                <el-button size="small" @click="query_bill_list" icon="el-icon-refresh" type="primary">刷新</el-button>
            </el-col>
            <!-- <el-col :span="3" class="operation-area" style="float:right">
              <el-button-group class="operation-button-group">
                  <el-button @click="download" icon="" size="small" style="margin-right:20px" type="primary">打包下载</el-button>
                  <el-button @click="updata" icon="" size="small" type="primary">上传升级</el-button>
              </el-button-group>
            </el-col> -->
          </el-row>
        </el-header>
                  <el-table
            :highlight-current-row=true
            :data="bill_list"
            ref="multipleTable"
            :border=true
            :fit=true
            max-height="600"
            style="width: 100%; overflowY: hidden"
          >
            <!-- <el-table-column  type="selection" width="40">
            </el-table-column> -->
            <el-table-column  prop="upgrade_no" sortable :show-overflow-tooltip=true label="升级批次">
            </el-table-column>
            <el-table-column  prop="status"  :show-overflow-tooltip=true label="状态">
            </el-table-column>
            <el-table-column  prop="upgrade_time" label="升级时间" :show-overflow-tooltip=true>
            </el-table-column>
            <el-table-column prop="count" label="应用数量" :show-overflow-tooltip=true>
            </el-table-column>
            <el-table-column  prop="default_version" sortable :show-overflow-tooltip=true label="是否当前版本">
              <template slot-scope="scope">
                <div v-if="scope.row.default_version==1">是</div>
                <div v-else>否</div>
              </template>
            </el-table-column>
            <el-table-column fixed="right"  label="操作">
              <template slot-scope="scope">
                <div>
                  <el-tooltip content="查看日志" placement="top">
                    <el-button icon="el-icon-document" @click="bill_show_detail(scope.row,scope.$index)" type="text" size="mini">查看日志</el-button>
                  </el-tooltip>
                   <el-tooltip content="回滚升级" placement="top" v-show="scope.row.default_version!=='1'">
                    <el-button icon="el-icon-document" @click="roll_back(scope.row,scope.$index)" type="text" size="mini">回滚升级</el-button>
                  </el-tooltip>
                </div>
              </template>
            </el-table-column>
           
          </el-table>
            <div class="pageControl" style="float:right">
              <el-pagination @size-change="handleSizeChange"
                           @current-change="handleCurrentChange"
                           :current-page.sync="page"
                           :page-sizes="page_sizes"
                           :page-size="per_page"
                           layout="total, sizes, prev, pager, next, jumper"
                           :total="total">
            </el-pagination>
          </div>
            </el-tab-pane>
            <el-tab-pane label="推送升级" name="third">
                 <el-form :model="remote_server" :rules="rules" ref="remote_server" label-width="100px" class="demo-ruleForm">
                            <el-form-item label="项目代码" prop="name" >
                                <el-input class="demo" v-model="remote_server.project_no"></el-input>
                            </el-form-item>
                            <el-form-item label="服务器IP" prop="name">
                                <el-input  class="demo" v-model="remote_server.server_ip"></el-input>
                            </el-form-item>
                             <el-form-item label="SSH端口" prop="name">
                                <el-input class="demo" v-model="remote_server.server_ssh_port"></el-input>
                                
                            </el-form-item>
                             <el-form-item label="用户名" prop="name">
                                <el-input class="demo" v-model="remote_server.server_user"></el-input>
                            </el-form-item>
                             <el-form-item label="密码" prop="name">
                                <el-input class="demo" type="password" v-model="remote_server.server_password"></el-input>
                            </el-form-item>
                            <el-form-item>
                               <el-button type="primary" @click="set_remote_server('')">保存</el-button>
                               
                                <el-button type="primary" @click="upgrade('sen_ruleForm')">推送升级</el-button>
                            </el-form-item>
                             <el-form-item style="float:right;margin-top:-200px;margin-right:47%;">
                                  <el-progress v-show="percentage!==0" type="circle" :percentage="percentage"></el-progress>
                            </el-form-item>
                            </el-form>
            </el-tab-pane>
           
  </el-tabs>
   <el-dialog title="日志" :visible.sync="dialogTableVisible">
              <el-table :data="gridData">
                <el-table-column property="app_code" label="app编码" ></el-table-column>
                 <el-table-column property="app_name" label="app名称"></el-table-column>
                <el-table-column property="app_image_name" label="镜像名称" ></el-table-column>
              </el-table>
    </el-dialog>
     <!-- <el-dialog title="安装中" :visible.sync="install_dialogTableVisible"> -->
            
    <!-- </el-dialog> -->
   </div>
</template>
<script>
import axios from 'axios'
import utilSingeUc from '@basicClass/util_singe_uc.js'
import API from '@/utils/sha256/myHttpClient'
import { Loading } from 'element-ui'
export default {
  mixins: [utilSingeUc],
  data() {
    return {
      percentage: 0,
      install_dialogTableVisible: false,
      searchParam: {
      },
      activeName: 'first',
      ruleForm: { },
      dialogTableVisible: false,
      gridData: [
        {
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }
      ],
      module_name: '/mesAPI/info/upgrade_log',
      bill_list: [
      ],
      bill_list1: [
        { 'app_code': 'rabbitMQ', 'app_name': 'rabbitMQ', 'app_image': '47.110.145.204:8084/huansi/mq:latest' },
        { 'app_code': 'Redis', 'app_name': 'Redis', 'app_image': '47.110.145.204:8084/huansi/redis:latest' },
        { 'app_code': 'Tool', 'app_name': 'tools工具集', 'app_image': '47.110.145.204:8084/huansi/hs_tools:1.1' }],
      rules: {},
      remote_server: { }
    }
  },
  methods: {
    openFullScreen(option) {
      const loadings = Loading.service({
        lock: true,
        text: option,
        spinner: 'el-icon-loading',
        background: '#eceaea12'
      })
      return loadings
    },
    closeFullScreen(loadings) {
      loadings.close()
    },
    // 安装runner
    install_runner() {
      this.openFullScreen('正在安装runner,请稍等')
      axios.get(`mesAPI/install/runner/step1/`).then(res => {
        this.percentage = 33
        this.install_runner2()
      }).catch(res => {
        this.percentage = 0
        this.closeFullScreen(this.openFullScreen())
      })
    },
    install_runner2() {
      axios.get(`mesAPI/install/runner/step2/`).then(res => {
        console.log(res)
        this.percentage = 66
        this.install_runner3()
      }).catch(res => {
        this.percentage = 0
        this.closeFullScreen(this.openFullScreen())
      })
    },
    install_runner3() {
      axios.get(`mesAPI/install/runner/step3/`).then(res => {
        this.percentage = 100
        setTimeout(_ => {
          this.closeFullScreen(this.openFullScreen())
          this.$message.success('安装成功')
          this.percentage = 0
        }, 1000)
      }).catch(res => {
        this.percentage = 0
        this.closeFullScreen(this.openFullScreen())
      })
    },
    upgrade() {
      this.openFullScreen('正在推送升级,请稍等')
      this.percentage = 5
      axios.get(`mesAPI/upgrade/remote/step1/`).then(res => {
        this.upgrade2()
      }).catch(res => {
        this.percentage = 0
        this.closeFullScreen(this.openFullScreen())
      })
    },
    upgrade2() {
      axios.get(`mesAPI/upgrade/remote/step2/`).then(res => {
        this.percentage = 10
        this.upgrade3(res.data.app_cout)
      }).catch(res => {
        this.percentage = 0
        this.closeFullScreen(this.openFullScreen())
      })
    },
    async upgrade3(app_count) {
      for (let i = 1; i <= app_count; i++) {
        console.log(i)
        await axios.get(`mesAPI/upgrade/remote/step3/${i}`).then(res => {
          if (app_count > 10) { this.percentage = this.percentage + 2 } else {
            this.percentage = this.percentage + 4
          }
        }).catch(res => {
          this.percentage = 0
          this.closeFullScreen(this.openFullScreen())
        })
      }
      this.upgrade4()
    },
    upgrade4() {
      axios.get(`mesAPI/upgrade/remote/step4/`).then(res => {
        this.percentage = this.percentage + 5
        this.upgrade5(res.data.app_cout)
      }).catch(res => {
        this.percentage = 0
        this.closeFullScreen(this.openFullScreen())
      })
    },
    async upgrade5(app_count) {
      for (let i = 1; i <= app_count; i++) {
        await axios.get(`mesAPI/upgrade/remote/step5/${i}`).then(res => {
          if (app_count > 10) { this.percentage = this.percentage + 2 } else {
            this.percentage = this.percentage + 4
          }
        }).catch(res => {
          this.percentage = 0
          this.closeFullScreen(this.openFullScreen())
        })
      }
      this.upgrade6()
    },
    upgrade6() {
      API.get(`mesAPI/upgrade/remote/step6/`).then(res => {
        setTimeout(_ => {
          this.percentage = 100
          this.closeFullScreen(this.openFullScreen())
          this.$message.success('安装成功')
          this.percentage = 0
        }, 1500)
      }).catch(res => {
        this.percentage = 0
        this.closeFullScreen(this.openFullScreen())
      })
    },
    download() {
      this.$API.post(`mesAPI/info/app_upgrade/`, {}, {}, this.bill_list1).then(
        console.log(11)
      )
    },
    updata() {
    },
    test(str) {
      if (!this.ruleForm.id) {
        this.$message.error('请先系统配置')
      }
      var url = `${this.ruleForm.project_no}/${str}`
      this.$API.get(`mesAPI/connection/${url}/`).then(res => {
        if (res.data.message === '连接成功') { this.$message.success(res.data.message) } else {
          this.$message.error(res.data.message)
        }
      }
      )
    },
    refresh() {
      this.query_bill_list()
    },
    get_gridData(row) {
      axios.get(`mesAPI/info/upgrade_log_dtl/${row.id}/`).then(res => {
        this.gridData = res.data.table
      })
    },
    // 查询日志
    bill_show_detail(row) {
      this.dialogTableVisible = true
      this.get_gridData(row)
    },
    // 回滚升级
    roll_back(row) {
      this.openFullScreen('回滚升级中,请稍等')
      axios.get(`mesAPI/upgrade/rollback/${row.id}/`).then(res => {
        this.refresh(row)
        this.$message.success('回滚成功')
        this.closeFullScreen(this.openFullScreen())
      }
      )
    },
    handleClick(tab, event) {
      console.log(tab)
    },
    handleCurrentChange() {
      console.log(22)
    },
    handleSizeChange() {
      console.log(22)
    },
    // 设置项目链接
    set_project() {
      this.$API.post(`mesAPI/connection/`, {}, {}, this.ruleForm).then(res => {
        if (res.data.message === '保存成功') { this.$message.success(res.data.message) } else {
          this.$message.error(res.data.message)
          this.get_project()
        }
      })
    },
    //  获取项目链接
    get_project() {
      this.$API.get(`mesAPI/connection/`).then(res => {
        if (!res.data) {
          this.ruleForm = {}
        } else {
          this.ruleForm = res.data
        }
      })
    },
    // 保存远程数据库
    set_remote_server() {
      this.$API.post(`mesAPI/connection/remote_server/`, {}, {}, this.remote_server).then(res => {
        if (res.data.message === '保存成功') { this.$message.success(res.data.message) } else {
          this.$message.error(res.data.message)
        }
      })
    },
    // 获取远程服务器连接
    get_remote_server() {
      this.$API.get(`mesAPI/connection/remote_server/`).then(res => {
        if (!res.data) {
          this.remote_server = {}
        } else {
          this.remote_server = res.data
        }
      })
    }
  },
  activated() {
    this.get_project()
    this.query_bill_list()
    this.get_remote_server()
  }
}
</script>
<style scope>
.demo {
    width: 300px;
}

</style>
