<template>
  <div v-loading="loading">
    <div class="heior_box">
      <div class="search-box">
        <el-input v-model="searchModel.keyWord" placeholder="请输入产品名称" clearable size="small">
          <el-button slot="append" icon="el-icon-search" @click="get"></el-button>
        </el-input>
      </div>
    </div>
    <el-table :data="retData.Data" row-key="Id" border size="medium" :height="$getHeight(100)" :row-style="rowStyle">
      <el-table-column prop="Name" label="产品名称" width="180"></el-table-column>
      <el-table-column prop="Account" label="账号"></el-table-column>
      <el-table-column label="密码">
        <template>
          <span>*********</span>
          <!-- <span @click="goLook(scope.row)">
            <i class="el-icon-view"></i>
          </span> -->
        </template>
      </el-table-column>
      <el-table-column prop="BaseUrl" label="接口地址"></el-table-column>
      <el-table-column prop="Status" label="状态">
        <template slot-scope="scope">
          <span :class="{statusRed:scope.row.Status==0}">{{statusFormat(scope.row.Status)}}</span>         
        </template>
      </el-table-column>
      <el-table-column label="操作">      
        <template slot-scope="scope">
           <span class="handel cursor edit" @click="goLogin(scope.row)">检测</span>
          <span class="handel cursor edit" @click="goEdit(scope.row)">编辑</span>          
          <!-- <span class="handel cursor del" @click="del(scope.row)">删除</span>          -->
        </template>
      </el-table-column>
    </el-table>
    <div class="block">
      <el-pagination
        v-if="retData.Data.length>0"
        @current-change="get"
        :page-size="50"
        :current-page.sync="searchModel.PageIndex"
        layout="total,prev, pager, next"
        :total="retData.TotalCount"
      ></el-pagination>
    </div>
    <el-dialog title="产品配置" :visible.sync="showDialog" width="400px">
      <el-form :model="currentProduct" :rules="rules" ref="inputProductForm" label-width="80px">
        <el-form-item prop="Account" label="账户">
          <el-input v-model="currentProduct.Account" size="small"></el-input>
        </el-form-item>
        <el-form-item prop="Pwd" label="密码">
          <el-input v-model="currentProduct.Pwd" show-password size="small"></el-input>
        </el-form-item>
        <el-form-item prop="LoginUrl" label="登录地址">
          <el-input v-model="currentProduct.BaseUrl" size="small"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="resetForm('inputProductForm')">取 消</el-button>
        <el-button type="primary" @click="save">确定</el-button>
      </span>
    </el-dialog>
        <el-dialog title="登录" :visible.sync="showLoginDialog" width="400px">
      <el-form :model="loginModel" :rules="loginRules" ref="inputLoginForm" label-width="80px">        
        <el-form-item prop="Code" label="验证码" v-if="loginModel.LoginCodeUrl!=''">
          <el-input v-model="loginModel.Code" size="small">
             <img :src="loginModel.LoginCodeUrl" alt="" @click="getCode" slot="append"></el-input>            
        </el-form-item>      
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="resetForm('inputLoginForm')">取 消</el-button>
        <el-button type="primary" @click="Login">检测</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
export default {
  name: "treeTable",
  components: {},
  data() {
    return {
      loading: false,
      showDialog:false,
      showLoginDialog:false,
      retData: { TotalCount: 0, Data: [] },
      searchModel: {
        PageIndex: 1,
        keyWord: ""
      },
      loginModel:{
        ProductId:0,
        Code:"",
        LoginCodeUrl:'',
        Key:""
      },
      currentProduct: {
        Id: 0,
        Name: "",
        Profile: "",
        Image: ""
      },
      rules: {
        Account: [this.$vaild.required("账户")],
        Pwd: [this.$vaild.required("密码")],
        LoginUrl: [this.$vaild.required("登录地址")]
      },
      loginRules:{
        Code: [this.$vaild.required("验证码")],
      }
    };
  },
  created() {
    this.$store.commit("setCurrentNav", "产品管理>>产品配置");  
    this.get();
    setInterval(this.get, 30*1000);
  },
  methods: {
    get() {    
      this.$api.get("course/v1/product/page", this.searchModel).then(res => {
        this.retData = res;       
      });
    },
    goEdit(item) {
      this.currentProduct = item;
      this.showDialog = true;
    },
    goLogin(item) {   
      this.currentProduct=item;  
     // this.loginModel.LoginCodeUrl=item.LoginCodeUrl+"&="+(new Date()).getTime();
      this.loginModel.ProductId= item.Id;
      this.getCode()
      this.showLoginDialog = true;
    },
    getCode(){
      this.$api
        .get("course/v1/agent/GetCode?productId="+this.currentProduct.Id, )
        .then(res => {
          if(res.Code==10000){
          this.loginModel.LoginCodeUrl=res.Data.CodeImage;
          this.loginModel.Key=res.Data.Key;
          }else{
            this.$error('验证码获取失败')
          }
        });
      
    },
    save() {
      this.$api
        .post("course/v1/product/putConfig", this.currentProduct)
        .then(res => {
          this.resetForm('inputProductForm');
          this.get();
        });
    },
    Login() {      
      this.$api
        .post("course/v1/agent/Login",this.loginModel)
        .then(res => {
          this.resetForm('inputLoginForm');
          this.get();
        });
    },
    statusFormat(value) {
      console.log(value)
      if(value==1)return "在线";
      return "离线"
    },
    resetForm(formName) {      
      this.$refs[formName].resetFields();
      this.showDialog = false;
      this.showLoginDialog = false;
    },
    rowStyle({ row, rowIndex}) {
      if (row.Status === 0) {
        return 'color:red'
      } else {
        return ''
      }
    }
  }
};
</script>
<style scoped>
.statusRed{
  color: red;
}
</style>
