<template>
  <div v-loading="loading" class="customerGood">
    <!--    <div class="tip"><img src="./svg/tip.svg" alt="">资源列表只展示未到期产品。</div>-->
    <!--    <SshTerminal></SshTerminal>-->
    <div>
      <ul class="search-box">
        <li>
          <el-input-group class="search-input">
            <el-input size="mini" placeholder="请输入关键词" clearable></el-input>
            <el-button slot="append" icon="el-icon-search" size="mini"></el-button>
          </el-input-group>
        </li>
        <li>
          <span class="search-label">创建日期:</span>
          <el-date-picker size="mini" style="width: 220px;" type="datetimerange" align="right" start-placeholder="开始日期"
            end-placeholder="结束日期" :default-time="['00:00:00', '23:59:59']" format="yyyy-MM-dd"
            value-format="yyyy-MM-dd"></el-date-picker>
        </li>
        <li>
          <el-button size="mini">重置</el-button>
          <el-button type="primary" size="mini">查询</el-button>
        </li>
      </ul>
    </div>
    <el-card class="tableCard">
      <el-table :data="tableData" style="width: 100%;font-size: 12px" height="calc(100vh - 130px)" border>
        <el-table-column min-width="90px" align="center" prop="productname" label="产品名称"></el-table-column>
        <el-table-column min-width="150px" align="center" prop="productdesc" label="产品描述" :show-overflow-tooltip="true">
          <template slot-scope="{row}">
            {{ row.productdesc ? row.productdesc : '-' }}
          </template>
        </el-table-column>
        <el-table-column min-width="150px" align="center" prop="orderid" label="订单号"
          :show-overflow-tooltip="true"></el-table-column>
        <el-table-column min-width="60px" align="center" prop="start_date" label="购买日期"></el-table-column>
        <el-table-column prop="expire_date" label="到期日期">
          <template slot-scope="scope">
            {{ scope.row.expire_date == null ? '-' : scope.row.expire_date }}
          </template>
        </el-table-column>
        <!--
 <el-table-column prop="total_quantity" label="总量">
 <el-table-column prop="used_quantity" label="已用量">
 </el-table-column>
 <el-table-column prop="rest_quantity" label="剩余量">
 </el-table-column> -->
        <el-table-column prop="" label="操作" align="center" width="120px">
          <template slot-scope="scope">
            <el-button type="primary" size="mini" @click="goJiNanChaoSuan()" v-if="scope.row.providername === '济南超算'">
              <div style="display: flex;justify-content: center;align-items: center">
                <img style="width: 12px;margin-right: 5px;height: 12px;" src="./svg/跳转.svg" alt="">超算产品
              </div>
            </el-button>
            <el-button type="primary" size="mini" @click="goBaiDu(scope.row.product_url)"
              v-else-if="(scope.row.providername === '百度智能云')">
              <div style="display: flex;justify-content: center;align-items: center">
                <img style="width: 12px;margin-right: 5px;height: 12px;" src="./svg/跳转.svg" alt="">实例使用
              </div>
            </el-button>
            <el-button type="primary" size="mini" @click="goJd" v-else-if="(scope.row.providername === '京东云')">
              <!--            <i class="el-icon-edit-outline"></i> -->
              <div style="display: flex;justify-content: center;align-items: center">
                <img style="width: 12px;margin-right: 5px;height: 12px;" src="./svg/跳转.svg" alt="">京东产品
              </div>
            </el-button>
            <el-button type="primary" size="mini" @click="goUcloud(scope.row.region)"
              v-else-if="(scope.row.providername === '优刻得科技股份有限公司')">
              <!--            <i class="el-icon-edit-outline"></i> -->
              <div style="display: flex;justify-content: center;align-items: center">
                <img style="width: 12px;margin-right: 5px;height: 12px;" src="./svg/跳转.svg" alt="">集群二
              </div>
            </el-button>
            <el-button size="mini" @click="nodeThree(scope.row)" v-else-if="(scope.row.classify === 'E')">
              详情
            </el-button>
            <div v-else-if="scope.row.classify === 'CPCC'">
              <el-button size="mini" type="primary" @click="openCpccDetail(scope.row)">
                容器化详情
              </el-button>
              <el-button size="mini" type="primary" @click="$router.push('/customer/SshTerminal')">
                登录
              </el-button>
            </div>
            <!--          <el-dropdown @command="handleCommand(scope.row, $event)" v-else-if="(scope.row.classify === 'E')"-->
            <!--                       trigger="click">-->
            <!--  <span style="cursor: pointer" class="el-dropdown-link">-->
            <!--    集群三<i class="el-icon-arrow-down el-icon&#45;&#45;right"></i>-->
            <!--  </span>-->
            <!--            <el-dropdown-menu slot="dropdown">-->
            <!--              <el-dropdown-item command="detail" icon="el-icon-warning-outline">详情</el-dropdown-item>-->
            <!--              <el-dropdown-item command="shutDown" icon="el-icon-switch-button">关机</el-dropdown-item>-->
            <!--            </el-dropdown-menu>-->
            <!--          </el-dropdown>-->

            <el-button type="primary" size="mini" @click="goCaption()"
              v-else-if="(scope.row.providername === '北京首都在线科技股份有限公司')">
              <!--            <i class="el-icon-edit-outline"></i> -->
              <div style="display: flex;justify-content: center;align-items: center">
                <img style="width: 12px;margin-right: 5px;height: 12px;" src="./svg/跳转.svg" alt="">集群一
              </div>
            </el-button>
            <span v-else>-</span>
          </template>
        </el-table-column>
      </el-table>
    </el-card>


    <el-dialog title="详情" :visible.sync="dialogTableVisible">
      <el-table :data="datailList">
        <el-table-column min-width="200px" property="date" label="实例编号/名称">
          <template slot-scope="scope">
            {{ scope.row.id }}
          </template>
        </el-table-column>
        <el-table-column min-width="200px" property="name" label="状态">
          <template slot-scope="scope">
            {{ scope.row.status === "1" ? '运行中' : '已关机' }}
          </template>
        </el-table-column>
        <el-table-column min-width="200px" property="address" label="规格详情">
          <template slot-scope="scope">
            <div class="guige">
              <span>{{ scope.row.productname }}* {{ scope.row.gpu }}卡</span>

              <el-popover placement="top" title="" width="200" trigger="hover">
                <span class="tipStyle" slot="reference">查看详情</span>

                <div>
                  <p>存储: {{ scope.row.storage }} G</p>
                  <p>CPU: {{ scope.row.cpu }} 核</p>
                  <p>内存: {{ scope.row.memory }} G</p>
                  <p>GPU: {{ scope.row.gpu }} 卡</p>
                  <p>显存: {{ scope.row.gpumem }} G</p>
                </div>
              </el-popover>
            </div>
          </template>
        </el-table-column>

        <el-table-column min-width="120px" property="address" label="健康状态">
          <template slot-scope="scope">
            正常
          </template>
        </el-table-column>
        <el-table-column min-width="100px" property="address" label="付费方式">
          <template slot-scope="scope">
            核时
          </template>
        </el-table-column>
        <el-table-column min-width="100px" property="address" label="登录指令">
          <template slot-scope="scope">
            <div class="itemOut">
              <div>登录指令</div>
              <div>ssh ****** <span class="copyBtn">
                  <i @click="copyText('ssh -p ' + scope.row.port + ' ' + scope.row.loginname + '@' + scope.row.ip_region)"
                    class="el-icon-copy-document"></i>
                </span>
              </div>
            </div>
            <div class="itemOut">
              <div>密码</div>
              <div>****** <span class="copyBtn"> <i @click="copyText(scope.row.loginpwd)"
                    class="el-icon-copy-document"></i> </span></div>
            </div>
          </template>
        </el-table-column>
        <!--        <el-table-column min-width="200px" property="address" label="创建时间/到期时间">-->
        <!--          <template slot-scope="scope">-->
        <!--            {{ scope.row.id }}-->
        <!--          </template>-->
        <!--        </el-table-column>-->
        <el-table-column min-width="150px" fixed="right" property="address" label="操作">
          <template slot-scope="scope">
            <el-popconfirm @confirm="shutDownThree(scope.row)" title="确定将该设备关机吗？">
              <el-button slot="reference" :loading="deleteBtnLoading" type="danger" size="mini">
                关机
              </el-button>
            </el-popconfirm>

          </template>
        </el-table-column>
      </el-table>
    </el-dialog>

    <el-dialog title="登录信息" :visible.sync="rqyVisible" width="800">
      <el-descriptions title="" direction="vertical" :column="4" border>
        <el-descriptions-item label="实例id">{{ cpccDetail.id }}</el-descriptions-item>
        <el-descriptions-item label="实例名称">{{ cpccDetail.source_name }}</el-descriptions-item>
        <el-descriptions-item label="状态">进行中</el-descriptions-item>
        <el-descriptions-item label="健康状态">

          <el-tag type="success" effect="dark">
            正常
          </el-tag>
        </el-descriptions-item>

        <el-descriptions-item label="登录账号">{{ cpccDetail.source_authuser }}</el-descriptions-item>
        <el-descriptions-item label="密码">
          <div class="pasStyle">
            <span v-if="!isShowPass"> **** </span>

            <span v-if="isShowPass"> {{ cpccDetail.source_authpasswd }}</span>


            <img @click="isShowPass = !isShowPass" v-if="!isShowPass" src="./svg/showEye.svg" alt="">
            <img @click="isShowPass = !isShowPass" v-if="isShowPass" src="./svg/hidenEye.svg" alt="">
          </div>

        </el-descriptions-item>
        <el-descriptions-item label="IP">{{ cpccDetail.source_externalip }}</el-descriptions-item>
        <el-descriptions-item label="端口号">{{ cpccDetail.source_outsideport }}</el-descriptions-item>

        <el-descriptions-item label="内存量">{{ cpccDetail.source_memrate }}</el-descriptions-item>
        <el-descriptions-item label="核心数">{{ cpccDetail.source_cpurate }}</el-descriptions-item>
        <el-descriptions-item label="数据盘">{{ cpccDetail.source_storagelimits }}</el-descriptions-item>
        <el-descriptions-item label="系统盘">{{ cpccDetail.disk_sys_limit }}</el-descriptions-item>
        <el-descriptions-item v-if="cpccDetail.source_gpu !== '0'" label="卡数">{{
          cpccDetail.source_gpu
          }}
        </el-descriptions-item>

      </el-descriptions>
      <span slot="footer" class="dialog-footer">
        <!--    <el-button @click="rqyVisible = false">取 消</el-button>-->
        <el-button type="primary" @click="rqyVisible = false">关 闭</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { getCustomerGoodsAPI, HpcAccessTimeAPI } from '@/api/customer/userResource'
import { getJinanchaosuanSign } from '@/api/JiNanChaoSuan/jiNanChaoSuanUserList'
import { goJdUrl } from "@/api/product/jdApi";
import { reqDeleteK8sCloud, reqGetInstance } from "@/api/k8s";
import { Terminal } from "xterm";
import SshTerminal from "@/views/customer/userResource/SshTerminal.vue";

export default {
  name: "userResource",
  components: { SshTerminal },
  data() {
    return {
      isShowPass: false,
      cpccDetail: {},
      rqyVisible: false,
      deleteBtnLoading: false,
      visible: false,
      detailBtnLoading: false,
      userid: sessionStorage.getItem("userId"),
      tableData: [],
      loading: false,
      dialogTableVisible: false,
      datailList: []
    };
  },
  mounted() {
    this.loading = true
    this.getCustomerGoods()
    console.log("用户资源的路由信息是", this.$route)
    // this.initTerminal()
  },

  methods: {
    openCpccDetail(row) {

      this.rqyVisible = true

      this.cpccDetail = row.instance_info
    },
    initTerminal() {
      let term = new Terminal();
      term.open(document.getElementById('terminal'));
      term.write('Hello from \x1B[1;3;31mxterm.js\x1B[0m $ ');
    },
    copyText(value) {
      // 创建一个临时的textarea元素，用来执行复制操作
      const textarea = document.createElement('textarea');
      textarea.value = value;
      document.body.appendChild(textarea);

      // 选中内容并执行复制
      textarea.select();
      document.execCommand('copy');

      // 移除临时的textarea元素
      document.body.removeChild(textarea);

      // 可以添加一个提示给用户，表示已经复制成功
      this.$message.success('已复制到剪贴板');
    },
    shutDownThree(item) {
      this.deleteBtnLoading = true
      let ploay = {
        id: item.id,
        podname: item.podname,
        pvcname: item.pvcname,
        customer_goods_id: item.customer_goods_id
      }
      reqDeleteK8sCloud(ploay).then(res => {
        this.deleteBtnLoading = false
        if (res.status) {
          this.$message.success("删除成功~")
          reqGetInstance({ customer_goods_id: item.id, orgid: sessionStorage.getItem('orgid') }).then(res => {
            if (res.status) {
              this.datailList = res.data
            }
          })
        } else {
          this.$message.warning("删除失败~")
        }
      })
    },
    nodeThree(row) {
      this.detailBtnLoading = true
      reqGetInstance({ customer_goods_id: row.id, orgid: sessionStorage.getItem('orgid') }).then(res => {
        this.detailBtnLoading = false
        if (res.status) {
          this.dialogTableVisible = true
          this.datailList = res.data
        }
      })
    },
    goCaption() {
      this.$router.push('/product/gpu/showGpu')
    },
    //去优客得
    goUcloud(region) {
      sessionStorage.setItem('region', region)
      this.$router.push('/product/ucloudProduct/showCloudHost')
    },
    //去jd产品
    goJd() {
      this.loading = true
      //直接跳转到京东页面
      goJdUrl(this.userid).then(res => {
        this.loading = false
        if (res.status) {
          window.open(res.data)
        } else {
          this.$message.error('跳转京东界面失败')
        }

      })

    },
    //去百度产品
    goBaiDu(listUrl) {
      this.$store.commit('setRedirectUrl', listUrl)
      localStorage.setItem('redirectUrl', listUrl)
      this.$router.push({
        name: 'baiduProductShow',
        params: {
          listUrl: listUrl,
        }
      })
    },
    HpcAccessTime() {
      HpcAccessTimeAPI({ orgid: sessionStorage.getItem("orgid") }).then(res => {
        if (rs.status == true) {

        }
      })
    },
    getCustomerGoods() {//获取用户资源
      getCustomerGoodsAPI({}).then(res => {
        this.loading = false
        if (res.status == true) {
          this.tableData = res.data
        }
      })
    },
    goJiNanChaoSuan() {//跳转济南超算平台
      this.HpcAccessTime()
      var orgid = sessionStorage.getItem("orgid");
      var username = sessionStorage.getItem("user");
      let ploay = {
        username: username
      }
      getJinanchaosuanSign(ploay).then(res => {
        if (res.status && res.warn_msg == null) {
          window.open(
            'https://hpc.kaiyuancloud.cn/kyy_test/?key=' + res.data,
            "_blank"
          );
        } else if (res.warn_msg != null) {
          this.$message({
            duration: 0,
            showClose: true,
            message: res.warn_msg,
            type: 'warning'
          });
          window.open(
            'https://hpc.kaiyuancloud.cn/kyy_test/?key=' + res.data,
            "_blank"
          );
        }
      })

    },
  },
};
</script>

<style lang="less" scoped >

.tip {
  color: #ff9120;
  height: 35px;

  img {
    width: 15px;
    height: 15px;
    margin-right: 3px;
  }

  padding-left: 2px;
  background: #fff;
  font-size: 14px;
  //border: 1px solid red;
  display: flex;
  justify-content: flex-start;
  align-items: center;

}

.guige {
  display: flex;
  flex-direction: column;
}

.tipStyle {
  transition: all .3s ease-in-out;
  cursor: pointer;

  &:hover {
    transition: all .3s ease-in-out;
    color: #0a04e1;
  }
}

.itemOut {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.copyBtn {
  transition: all .3s ease-in-out;

  i {
    color: blue;
  }

  &:hover {
    transition: all .3s ease-in-out;
    cursor: pointer;
    color: #a3b3e8;
  }
}

.pasStyle {
  img {
    width: 20px;
    height: 20px;
    cursor: pointer;
    margin-left: 8px;

    &:hover {
      fill: blue;
    }
  }

  display: flex;
  justify-content: flex-start;
  align-items: center;
}

.search-input {
  display: flex;
}

.search-box {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  background-color: white;
  padding: 10px;
  margin-bottom: 10px;
  border-radius: 8px;
}

.search-box li {
  margin-right: 15px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}
.tableCard{
  margin-top: 20px;
  height: calc(100vh - 180px);
}
</style>
