<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>
                                <span class="Prompt">向开发人员询问</span>
                            </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" placeholder="TIIP数据库名" 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-button style="margin-left: 40px" type="primary" @click="install()">测de </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="130px" 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="linux登录用户名" prop="name">
                                <el-input class="demo" v-model="remote_server.server_user"></el-input>
                            </el-form-item>
                             <el-form-item label="linux登录密码" 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="docker()">安装dokcer</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="dialogVisible_install"
    width="80%"
    :before-close="handleClose"
   >
    <p class="bgnr-txt" style="white-space: pre-wrap;" v-html="change(text)">
>{{text}}</p>
  </el-dialog>
   <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 {
      text: '',
      dialogVisible_install: false,
      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: {
    handleClose(done) {
      clearInterval(this.chatTimer)
      this.dialogVisible_install = false
      this.text = ''
    },
    change: function(content) {
      var reg = /[;；]/g
      content = content.replace(reg, '$&\r\n')
      return content
    },
    install() {
      axios.get('mesAPI/install/test/700/').then(res => {
        console.log(res)
      })
    },
    openFullScreen(option) {
      const loadings = Loading.service({
        lock: true,
        text: option,
        spinner: 'el-icon-loading',
        background: '#eceaea12'
      })
      return loadings
    },
    closeFullScreen(loadings) {
      loadings.close()
    },
    // 安装dokcer
    docker() {
      axios.get(`mesAPI/install/remote_server/docker/`).then(res => {
        this.dialogVisible_install = true
        var myDate = new Date()
        var since_time = `${myDate.getFullYear()}-${myDate.getMonth() + 1}-${myDate.getDate()} ${myDate.getHours()}:${myDate.getMinutes()}:${myDate.getSeconds()}`
        this.chatTimer = setInterval(() => {
          this.get_info_logs(since_time)
        }, 2000)
      })
    },
    // 安装runner
    install_runner() {
      axios.get(`mesAPI/install/runner/`).then(res => {
        this.dialogVisible_install = true
        var myDate = new Date()
        var since_time = `${myDate.getFullYear()}-${myDate.getMonth() + 1}-${myDate.getDate()} ${myDate.getHours()}:${myDate.getMinutes()}:${myDate.getSeconds()}`
        this.chatTimer = setInterval(() => {
          this.get_info_logs(since_time)
        }, 2000)
      })
    },
    get_info_logs(since_time) {
      axios.get(`mesAPI/info/logs/?since_time=${since_time}`).then(res => {
        if (res.data.indexOf('runner安装成功') !== -1 || res.data.indexOf('远程升级完成') !== -1 || res.data.indexOf('runner安装失败') !== -1 || res.data.indexOf('远程升级失败') !== -1 || res.data.indexOf('docker安装成功') !== -1 || res.data.indexOf('docker安装失败') !== -1) {
          clearInterval(this.chatTimer)
          this.text = res.data
        } else {
          this.text = res.data
        }
      })
    },
    upgrade() {
      axios.get(`mesAPI/upgrade/remote/`).then(res => {
        if (res.data) {
          console.log(11)
        }
        this.dialogVisible_install = true
        var myDate = new Date()
        var since_time = `${myDate.getFullYear()}-${myDate.getMonth() + 1}-${myDate.getDate()} ${myDate.getHours()}:${myDate.getMinutes()}:${myDate.getSeconds()}`
        this.chatTimer = setInterval(() => {
          this.get_info_logs(since_time)
        }, 2000)
      })
      // this.openFullScreen('正在推送升级,请稍等')
      // this.percentage = 5
    },
    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('请先设置系统配置并保存')
        return
      }
      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>
.Prompt{
  margin-left: 30px;
  color: #c1c1c1;
 size:10px;
}
.demo {
    width: 300px;
}

</style>
