<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-select
                                    v-model="ruleForm.project_no"
                                    filterable
                                    allow-create
                                    clearable
                                    @change='project_change'
                                    default-first-option
                                    placeholder="项目代码">
                                    <el-option
                                      v-for="item in project_list"
                                      :key="item.project_list"
                                      :label="item.project_no"
                                      :value="item.project_no">
                                    </el-option>
                                  </el-select>
                                    <!-- <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-button type="primary" @click="application()">应用修改</el-button>
                                  <el-button type="primary" @click="download_app()">下载app</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="four">
                 <el-form :model="service_ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
                            <el-form-item label="项目代码" prop="name" >
                                <el-input class="demo" disabled v-model="service_ruleForm.project_no"></el-input>
                                 <span class="Prompt">此项目代码从系统配置项目代码中获取</span>
                            </el-form-item>
                              <el-form-item label="车间" prop="name" >
                                 <el-select
                                 style="width: 300px;"
                                    v-model="service_ruleForm.work_shop_no"
                                    filterable
                                    allow-create
                                    clearable
                                    @change='work_shop_change'
                                    default-first-option
                                    placeholder="车间">
                                    <el-option
                                      v-for="item in work_list"
                                      :key="item.work_shop_no"
                                      :label="item.work_shop_no"
                                      :value="item.work_shop_no">
                                    </el-option>
                                  </el-select>
                                    <!-- <span class="Prompt">没下拉数据可向开发人员询问</span> -->
                            </el-form-item>
                            <el-form-item label="数据库IP" prop="name">
                                <el-input  class="demo" v-model="service_ruleForm.db_ip"></el-input>
                            </el-form-item>
                             <el-form-item label="数据库端口" prop="name">
                                <el-input class="demo" v-model="service_ruleForm.db_port"></el-input>
                            </el-form-item>
                             <el-form-item label="数据库用户名" prop="name">
                                <el-input class="demo" v-model="service_ruleForm.db_user"></el-input>
                            </el-form-item>
                             <el-form-item label="数据库密码" prop="name">
                                <el-input class="demo" type="password" v-model="service_ruleForm.db_password"></el-input>
                                 
                            </el-form-item>
                             <!-- <el-form-item label="TIIP数据库名" prop="name">
                                <el-input class="demo" v-model="service_ruleForm.tiip_db_name"></el-input>
                            </el-form-item> -->
                            <el-form-item label="MES数据库名" prop="name">
                                <el-input class="demo" v-model="service_ruleForm.mes_db_name"></el-input>
                            </el-form-item>
                            <el-form-item>
                                <el-button type="primary" @click="set_project('service_ruleForm')">保存</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="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 disabled="" class="demo" v-model="remote_server.project_no"></el-input>
                            </el-form-item>
                                <el-form-item label="项目代码" prop="name" >
                                <el-input disabled="" class="demo" v-model="remote_server.work_shop_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="set_configuration()">上传配置</el-button>
                                <el-button type="primary" @click="docker()">安装dokcer</el-button>
                                <el-button type="primary" @click="open_server_list('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-tab-pane label="端口测试" name="finde">
                      <el-header class="main-header">
          <el-row class="main-header-row">
            <el-col :span="3" class="search-button-area" style="float:right">
                <el-button size="small" @click="get_test" icon="el-icon-refresh" type="primary">刷新</el-button>
            </el-col>
          </el-row>
        </el-header>
                  <el-table
            :highlight-current-row=true
            :data="test_list"
            :border=true
            :fit=true
            max-height="450"
            @selection-change="handleSelectionChange_test">
          >
           <el-table-column
      type="index"
      label="序号"
    >
    </el-table-column>
            <el-table-column  prop="app_code" sortable :show-overflow-tooltip=true label="appCode">
            </el-table-column>
            <el-table-column  prop="port"  :show-overflow-tooltip=true label="端口号">
            </el-table-column>
               <el-table-column  prop="status"  :show-overflow-tooltip=true label="测试状态">
                  <template slot-scope="scope">
                     <div :class="scope.row.status === '测试失败' ? 'red': ''">
                         {{scope.row.status}}
                      </div>
                 </template>
            </el-table-column>
          </el-table>
           <div class="pageControl" style="float:right; margin:60px;margin-top:30px;">
              <el-button type="primary" @click="test_port()">测试</el-button>
          </div>
                
            </el-tab-pane>
    
  </el-tabs>
  <!-- 查询app列表 -->
   <el-dialog title="App列表" :visible.sync="dialogVisible_install_APP"  width="80%">
              <el-table :data="app_list"  max-height="600"  
            style="width: 100%; overflowY: hidden"  @selection-change="handleSelectionChange">
                <el-table-column

                  type="selection"
                  width="55">
                </el-table-column>
                 <el-table-column property="b_download" label="是否已下载" >
                    <template slot-scope="scope">
                      <div>
                         {{scope.row.b_download? '是' : "否"}}
                      </div>
                    </template>
                 </el-table-column>
                <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="web_version" label="前端版本号" ></el-table-column>
                <el-table-column property="api_version" label="后端版本号" ></el-table-column>
                <el-table-column property="web_port" label="前端端口号" ></el-table-column>
                <el-table-column property="api_port" label="后端端口号1" ></el-table-column>
                <el-table-column property="api_port2" label="后端端口号2" ></el-table-column>
              </el-table>
               <div slot="footer">
                  <el-button @click="dialogVisible_install_APP = false" size="mini">取消</el-button>
                  <el-button type="primary" @click="save_download()" size="mini">确定</el-button>
                </div>
    </el-dialog>
   <!-- 查询远程app列表 -->
   <el-dialog title="服务器App列表" :visible.sync="dialogVisible_install_APP_server"  width="80%">
              <el-table :data="app_list_server"  max-height="600"  
            style="width: 100%; overflowY: hidden"  @selection-change="handleSelectionChange_server">
                <el-table-column
                  type="selection"
                  width="55">
                </el-table-column>
                 <el-table-column property="code" label="appCode" ></el-table-column>
                <el-table-column property="server_name" label="服务器名称" ></el-table-column>
                 <el-table-column property="server_tag" label="服务器镜像版本"></el-table-column>
                <el-table-column property="local_name" label="本地名称" ></el-table-column>
                <el-table-column property="local_tag" label="本地镜像版本" ></el-table-column>
              </el-table>
               <div slot="footer">
                  <el-button @click="dialogVisible_install_APP_server = false" size="mini">取消</el-button>
                  <el-button type="primary" @click="upgrade()" size="mini">确定</el-button>
                </div>
    </el-dialog>
  <el-dialog
    :close-on-click-modal="false"
    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"  width="80%">
              <el-table :data="gridData"  max-height="600">
                 <el-table-column type="index" label="序号" ></el-table-column>
                <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 {
      test_list: '',
      app_list_server: [],
      dialogVisible_install_APP: false,
      work_list: [],
      app_list: [],
      dialogVisible_install_APP_server: false,
      project_list: [],
      text: '',
      dialogVisible_install: false,
      percentage: 0,
      install_dialogTableVisible: false,
      searchParam: {
      },
      multipleSelection: [],
      multipleSelection_server: [],
      multipleSelection_test: [],
      activeName: 'first',
      ruleForm: { },
      service_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: {
    handleSelectionChange_test(e) {
      this.multipleSelection_test = e
    },
    // 测试
    test_port() {
      // if (!this.multipleSelection_test.length) {
      //   this.$message.error('请选择数据')
      //   return
      // }
      this.openFullScreen('测试中,请稍等')
      this.$API.post(`mesAPI/application/test_port/${this.ruleForm.project_no}/`, {}, {}, this.test_list).then(res => {
        this.test_list = res.data
        this.closeFullScreen(this.openFullScreen())
      }).catch(() => {
        this.closeFullScreen(this.openFullScreen())
      })
    },
    open_server_list() {
      if (!this.remote_server.work_shop_no || !this.remote_server.project_no) {
        this.$message.error('请选择项目或车间')
        return
      }
      this.dialogVisible_install_APP_server = true
      axios.get(`mesAPI/upgrade/compare_image_info/${this.service_ruleForm.project_no}/${this.service_ruleForm.work_shop_no}/`).then(res => {
        if (res.data) {
          this.app_list_server = res.data
        }
      })
    },
    // 远程app列表的选择
    handleSelectionChange_server(e) {
      this.multipleSelection_server = e
    },
    // 上传配置
    set_configuration() {
      this.$API.get(`mesAPI/upgrade/remote/server_db/${this.service_ruleForm.project_no}/${this.service_ruleForm.work_shop_no}/`).then(res => {
        if (res.data.message === '上传成功') { this.$message.success(res.data.message) } else {
          this.$message.error(res.data.message)
        }
      })
    },
    // 车间改变时
    work_shop_change(e) {
      if (e) {
        this.$API.get(`mesAPI/connection/remote_db/${this.ruleForm.project_no}/${e}/`).then(res => {
          if (res.data) {
            this.service_ruleForm = res.data
          } else {
            this.service_ruleForm = {}
            this.service_ruleForm.project_no = this.ruleForm.project_no
            this.service_ruleForm.work_shop_no = e
          }
        })
      } else {
        this.service_ruleForm = {}
        this.service_ruleForm.project_no = this.ruleForm.project_no
      }
    },
    handleSelectionChange(e) {
      this.multipleSelection = e
    },
    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/${this.remote_server.project_no}/${this.remote_server.work_shop_no}/`).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() {
      if (!this.ruleForm.id || !this.ruleForm.project_no) {
        this.$message.error('请选择项目或保存后查看')
        return
      }
      axios.get(`mesAPI/install/runner/${this.ruleForm.project_no}/`).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
        }
      }).catch(() => {
        clearInterval(this.chatTimer)
      })
    },
    upgrade() {
      if (!this.multipleSelection_server.length) {
        this.$message.error('请选择数据')
        return
      }
      let data = []
      const date_list = []
      if (this.multipleSelection_server.length === this.app_list_server.length) {
        data = '*'
      } else {
        this.multipleSelection_server.map((item) => {
          date_list.push(item.code)
        })
        data = date_list
      }
      const datas = {
        code_list: data
      }
      this.$API.post(`mesAPI/upgrade/remote/${this.remote_server.project_no}/${this.remote_server.work_shop_no}/`, {}, {}, datas).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)
      })
      // this.openFullScreen('正在推送升级,请稍等')
      // this.percentage = 5
    },
    download() {
      this.$API.post(`mesAPI/info/app_upgrade/`, {}, {}, this.bill_list1).then(
        console.log(11)
      )
    },
    updata() {
    },
    // 确定下载
    save_download() {
      if (!this.multipleSelection.length) {
        this.$message.error('请选择数据')
        return
      }
      let data = []
      const date_list = []
      if (this.multipleSelection.length === this.app_list.length) {
        data = '*'
      } else {
        this.multipleSelection.map((item) => {
          date_list.push(item.app_str)
        })
        data = date_list
      }
      const datas = {
        data: data
      }
      this.$API.post(`mesAPI/application/${this.ruleForm.project_no}/`, {}, {}, datas).then(res => {
        this.$message.success('请求已发送,请到网页上查询进度')
        this.dialogVisible_install_APP = false
      })
    },
    // 下载app
    download_app() {
      if (!this.ruleForm.id || !this.ruleForm.project_no) {
        this.$message.error('请选择项目或保存后查看')
        return
      }
      this.dialogVisible_install_APP = true
      axios.get(`mesAPI/application/${this.ruleForm.project_no}/`).then(res => {
        this.app_list = res.data
      })
    },
    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}/?page=1&per_page=100`).then(res => {
        this.gridData = res.data.table
      })
    },
    // 查询日志
    bill_show_detail(row) {
      this.dialogTableVisible = true
      this.get_gridData(row)
    },
    // 回滚升级
    roll_back(row) {
      if (!this.ruleForm.project_no || !this.ruleForm.id) {
        this.$message.error('请选择项目或保存')
        return
      }
      this.openFullScreen('回滚升级中,请稍等')
      axios.get(`mesAPI/upgrade/rollback/${this.ruleForm.project_no}/${row.id}/`).then(res => {
        this.refresh(row)
        this.$message.success('回滚成功')
        this.closeFullScreen(this.openFullScreen())
      }
      ).catch(() => {
        this.closeFullScreen(this.openFullScreen())
      })
    },
    handleClick(e) {
      if (e.label === '本机系统配置') {
        this.get_project()
      } else if (e.label === '本机系统升级') {
        this.query_bill_list()
      } else if (e.label === '客户服务器配置') {
        this.get_service_project()
      } else if (e.label === '客户推送升级') {
        if (this.service_ruleForm.work_shop_no) { this.get_remote_server() }
      } else {
        if (this.ruleForm.project_no) {
          this.get_test()
        }
      }
    },
    // 查询测试端口号res.data
    get_test() {
      axios.get(`mesAPI/application/test_port/${this.ruleForm.project_no}/`).then(res => {
        if (res.data) {
          this.test_list = res.data
        }
      }
      )
    },
    // 设置项目链接
    set_project(str) {
      let url = ''
      let data = {}
      if (str === 'service_ruleForm') {
        url = `mesAPI/connection/remote_db/`
        data = this.service_ruleForm
      } else {
        url = `mesAPI/connection/`
        data = this.ruleForm
      }
      this.openFullScreen('请稍等')
      this.$API.post(url, {}, {}, data).then(res => {
        if (res.data.message === '保存成功') {
          this.$message.success(res.data.message)
        } else {
          this.$message.error(res.data.message)
        }
        this.closeFullScreen(this.openFullScreen())
      }).catch(() => {
        this.closeFullScreen(this.openFullScreen())
      })
    },
    // 安装应用
    application() {
      this.$confirm('此操作会重启所有app, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.openFullScreen('重启中,请稍等')
        this.$API.get(`mesAPI/upgrade/apply/${this.ruleForm.project_no}/`).then(res => {
          this.closeFullScreen(this.openFullScreen())
          this.$message.success('修改成功')
        }).catch(() => {
          this.closeFullScreen(this.openFullScreen())
        })
      }).catch(() => {
      })
    },
    // 获取服务器配置
    get_service_project() {
      if (this.ruleForm.project_no) {
        this.service_ruleForm.project_no = this.ruleForm.project_no
      } else {
        return
      }
      this.$API.get(`mesAPI/connection/work_shop/${this.ruleForm.project_no}/`).then(res => {
        if (res.data) {
          this.work_list = res.data
          this.service_ruleForm.work_shop_no = this.work_list[0].work_shop_no
          this.work_shop_change(this.service_ruleForm.work_shop_no)
        }
      })
    },
    //  获取项目链接
    get_project() {
      this.$API.get(`mesAPI/connection/`).then(res => {
        if (!res.data) {
          this.ruleForm = {}
        } else {
          this.project_list = res.data
          this.ruleForm.project_no = res.data[0].project_no
          this.project_change(this.ruleForm.project_no)
          // this.ruleForm = res.data
        }
        this.service_ruleForm.project_no = this.ruleForm.project_no
      })
    },
    // 保存远程数据库
    set_remote_server() {
      this.remote_server.project_no = this.ruleForm.project_no
      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)
        }
      })
    },
    // 项目代码变化时
    project_change(e) {
      this.$API.get(`mesAPI/connection/${e}/`).then(res => {
        if (res.data) {
          this.ruleForm = res.data
          this.service_ruleForm = {}
        } else {
          this.ruleForm = {}
          this.ruleForm.project_no = e
          this.service_ruleForm = {}
        }
      })
    },
    // 获取远程服务器连接
    get_remote_server() {
      this.$API.get(`mesAPI/connection/remote_server/${this.service_ruleForm.project_no}/${this.service_ruleForm.work_shop_no}/`).then(res => {
        if (!res.data) {
          this.remote_server = {}
          this.remote_server.project_no = this.service_ruleForm.project_no
          this.remote_server.work_shop_no = this.service_ruleForm.work_shop_no
        } else {
          this.remote_server = res.data
          this.remote_server.project_no = this.service_ruleForm.project_no
          this.remote_server.work_shop_no = this.service_ruleForm.work_shop_no
        }
      })
    }
  },
  activated() {
    this.get_project()
    // this.query_bill_list()
    // this.get_remote_server()
    // this.get_service_project()
  }
}
</script>
<style scope>
.Prompt{
  margin-left: 30px;
  color: #c1c1c1;
 size:10px;
}
.demo {
    width: 300px;
}
.el-select{
  width: 300px;
}
.red{
  color: red
}

</style>
