<template>
  <div>
    <div class="pageTitle">
      <span>资源使用情况</span>
      <span>数据更新时间：2024-10-12 11:52:17</span>
    </div>
    <div class="costStyle">
      <div class="costItem">
        <div>总充值费用</div>
        <div>
          <span style="font-size: 20px;">2000</span>
          <span style="font-size: 14px;">.00元</span>
        </div>
      </div>
      <div class="costItem">
        <div>当前余额</div>
        <div>
          <span style="font-size: 20px;">1000</span>
          <span style="font-size: 14px;">.00元</span>
        </div>
      </div>
    </div>
    <div class="availableStyle">
      <div>
        <div class="availableTitle">可访问队列</div>
        <div class="availableItem1">
          <div class="availableItem1Top">
            <div class="availableItem1Top1">
              <div>normal</div>
              <div>8G</div>
            </div>
            <div class="availableItem1Top2">
              <div>空闲节点：<strong style="font-size: 16px;font-weight: bold;">4</strong> </div>
              <div>总节点数：4</div>
              <div>运行作业数：4</div>
            </div>
          </div>
          <div class="availableItem1Bottom">
            <div>CPU核数</div>
            <div class="processStyle">
              <span :style="{ 'width': `${aWidth}` }"></span>
              <span :style="{ 'width': `${bWidth}` }"></span>
              <span :style="{ 'width': `${cWidth}` }"></span>
            </div>
            <div class="processBrief">
              <span>
                占用10
              </span>
              <span>
                其它20
              </span>
              <span>
                空闲10
              </span>
            </div>
          </div>
          <div class="availableItem1Bottom">
            <div>DCU卡数</div>
            <div class="processStyle">
              <span :style="{ 'width': `${aWidth}` }"></span>
              <span :style="{ 'width': `${bWidth}` }"></span>
              <span :style="{ 'width': `${cWidth}` }"></span>
            </div>
            <div class="processBrief">
              <span>
                占用10
              </span>
              <span>
                其它20
              </span>
              <span>
                空闲10
              </span>
            </div>
          </div>
        </div>
      </div>
      <div>
        <div class="availableTitle">可用资源</div>
        <div class="availableItem2">
          <div>
            <div style="text-align: center;">CPU</div>
            <div ref="chart1" class="chart1"></div>
            <div style="text-align: center;">总核数：64</div>
          </div>
          <div>
            <div style="text-align: center;">加速卡</div>
            <div ref="chart2" class="chart1"></div>
            <div style="text-align: center;">总卡数：3200</div>
          </div>
        </div>
      </div>
      <div>
        <div class="availableTitle">存储资源</div>
        <div class="availableItem3">
          <div>共享目录：/public/share</div>
          <div>已用10%</div>
          <div style="width: 90%;">
            <el-slider v-model="value1" :disabled="true" :format-tooltip="formatTooltip" :marks="marks"></el-slider>
          </div>
        </div>
        <div class="availableItem3">
          <div>个人主目录：/public/home</div>
          <div>已用50%</div>
          <div style="width: 90%;">
            <el-slider v-model="value2" :disabled="true" :format-tooltip="formatTooltip" :marks="marks"></el-slider>
          </div>
        </div>
      </div>
    </div>
    <div class="lineChart">
      <div>
        <div class="availableTitle">可访问队列</div>
        <div class="lineTitle">最近30天机时消耗统计 CPU(核*时):0 GPU(卡*时):0 DCU(卡*时):0</div>
      </div>
      <div ref="chart3" class="chart3"></div>
    </div>
    <div class="module1">
      <div class="moduleTitle">充值付费管理</div>
      <el-table :data="rechargeList">
        <el-table-column label="付费类型" align="center" prop="projectType">
          <template slot-scope="scope">
            <span>{{ scope.row.projectType == 0 ? '合作项目' : '支持项目' }}</span>
          </template>
        </el-table-column>
        <el-table-column label="付费内容" align="center" prop="projectLeader" />
        <el-table-column label="负责人" align="center" prop="projectNumber" />
        <el-table-column label="当前余额" align="center" prop="projectSource" />
        <el-table-column label="充值时间" align="center" width="180">
          <template slot-scope="scope">
            <span>{{ parseTime(scope.row.projectCycleBegin, '{y}-{m}-{d}') }}</span>
          </template>
        </el-table-column>
      </el-table>
      <pagination :total="total1" :page.sync="pageNum1" :limit.sync="pageSize" @pagination="getList1" />
    </div>

    <div class="module1">
      <div class="moduleTitle">团队成员管理</div>
      <el-table :data="teamList">
        <el-table-column label="姓名" align="center" prop="projectLeader" />
        <el-table-column label="手机号" align="center" prop="projectNumber" />
        <el-table-column label="邮箱" align="center" prop="projectSource" />
        <el-table-column label="账号" align="center" width="180" />
        <el-table-column label="所属资源" align="center" prop="projectSource" />
        <el-table-column label="工作单位" align="center" width="180" />
        <el-table-column label="职称" align="center" prop="projectSource" />
        <el-table-column label="账号类型" align="center" prop="projectType">
          <template slot-scope="scope">
            <span>{{ scope.row.projectType == 0 ? '合作项目' : '支持项目' }}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center" class-name="small-padding fixed-width" fixed="right">
          <template slot-scope="scope">
            <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdateTeam(scope.row)"
              v-hasPermi="['cs:csProjectRecord:edit']">修改</el-button>
            <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDeleteTeam(scope.row)"
              v-hasPermi="['cs:csProjectRecord:remove']">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <pagination :total="total2" :page.sync="pageNum2" :limit.sync="pageSize" @pagination="getList2" />
    </div>

    <div class="module1">
      <div class="moduleTitle">资源使用情况</div>
      <el-table :data="resourceList">
        <el-table-column label="资源类型" align="center" prop="projectType">
          <template slot-scope="scope">
            <span>{{ scope.row.projectType == 0 ? '合作项目' : '支持项目' }}</span>
          </template>
        </el-table-column>
        <el-table-column label="使用情况" align="center" prop="projectLeader" />
        <el-table-column label="账号" align="center" width="180" />
        <el-table-column label="负责人" align="center" prop="projectSource" />
        <el-table-column label="赋能支持" align="center" width="180" />
        <el-table-column label="资源状态" align="center" prop="projectSource" />
        <el-table-column label="操作" align="center" class-name="small-padding fixed-width" fixed="right">
          <template slot-scope="scope">
            <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdatereSource(scope.row)"
              v-hasPermi="['cs:csProjectRecord:edit']">查看</el-button>
          </template>
        </el-table-column>
      </el-table>
      <pagination :total="total3" :page.sync="pageNum3" :limit.sync="pageSize" @pagination="getList3" />
    </div>

  </div>
</template>

<script>
import { getClassListByMark, listCsResourceOrderApply } from "@/api/cs/csResourceOrderApply";
import { listCsOrderMemberUser, getCsOrderMemberUser, delCsOrderMemberUser, addCsOrderMemberUser, updateCsOrderMemberUser } from "@/api/cs/csOrderMemberUser";
export default {
  data() {
    return {
      form: {
        projectName: '',
        projectNumber: '',
        majorField: '',
        projectSource: '',
        companyClassId: '',
        projectClassName: '',
        projectCycleRange: [],
        useDemand: '',
        workloadEstimate: '',
        contractName: '',
        contractNumber: '',
        contractAnnex: ''
      },
      companyClassList: [],
      rules: {},
      workOrderList: [],
      pageNum1: 1,
      pageNum2: 1,
      total1: 0,
      total2: 0,
      pageSize: 10,
      memberUserId: '',
      CPUform: {
        a: 10,
        b: 20,
        c: 10
      },
      aWidth: '',
      bWidth: '',
      cWidth: '',
      value1: 10,
      value2: 50,
      marks: {
        0: '0(GB)',
        100: '100(GB)',
      },
      rechargeList: [],
      teamList: [],
      resourceList: [],
      pageSize: 10,
      pageNum1: 1,
      total1: 0,
      pageNum2: 1,
      total2: 0,
      pageNum3: 1,
      total3: 0,
    }
  },
  mounted() {
    this.memberUserId = this.$route.params.id
    this.getUserDetail()
    this.getClassList()
    this.getList1()
    this.getList2()
    let total = this.CPUform.a + this.CPUform.b + this.CPUform.c
    this.aWidth = ((this.CPUform.a / total) * 100).toFixed(2) + '%'
    this.bWidth = ((this.CPUform.b / total) * 100).toFixed(2) + '%'
    this.cWidth = ((this.CPUform.c / total) * 100).toFixed(2) + '%'
    this.myChart1 = this.$echarts.init(this.$refs.chart1)
    let option1 = {
      title: {
        text: "40",
        subtext: '可用(核)',
        x: "center",
        y: "40%",
        itemGap: 5, // 文本间距
        textStyle: {
          fontFamily: "PingFang SC",
          fontWeight: 500,
          fontSize: 20,
        },
      },
      legend: {
        bottom: '0',
        left: 'center'
      },
      series: [
        {
          name: 'Access From',
          type: 'pie',
          radius: ['70%', '60%'],
          center: ["50%", "50%"],
          avoidLabelOverlap: false,
          hoverAnimation: false,
          label: {
            show: false,
          },
          // emphasis: {
          //   disabled: false,
          //   scale: false
          // },

          data: [
            {
              value: 40,
              name: "可用",
              itemStyle: {
                borderColor: "rgba(255, 255, 255, 0.6)",
                color: 'green',
              },
            },
            {
              value: 64 - 40.5,
              name: "已用",
              tooltip: {
                show: false,
              },
              emphasis: {
                disabled: true,
                scale: false
              },
              itemStyle: {
                borderWidth: 1,
                color: "#e7e7e7",
              },
            },
          ],
        }
      ]
    };
    this.myChart1.setOption(option1);
    this.myChart2 = this.$echarts.init(this.$refs.chart2)
    let option2 = {
      title: {
        text: "2000",
        subtext: '可用(卡)',
        x: "center",
        y: "40%",
        itemGap: 5, // 文本间距
        textStyle: {
          fontFamily: "PingFang SC",
          fontWeight: 500,
          fontSize: 20,
        },
      },
      legend: {
        bottom: '0',
        left: 'center'
      },
      series: [
        {
          name: 'Access From',
          type: 'pie',
          radius: ['70%', '60%'],
          center: ["50%", "50%"],
          avoidLabelOverlap: false,
          hoverAnimation: false,
          label: {
            show: false,
          },
          // emphasis: {
          //   disabled: false,
          //   scale: false
          // },

          data: [
            {
              value: 2000,
              name: "可用",
              itemStyle: {
                borderColor: "rgba(255, 255, 255, 0.6)",
                color: 'blue',
              },
            },
            {
              value: 3200 - 2000,
              name: "已用",
              tooltip: {
                show: false,
              },
              emphasis: {
                disabled: true,
                scale: false
              },
              itemStyle: {
                borderWidth: 1,
                color: "#e7e7e7",
              },
            },
          ],
        }
      ]
    };
    this.myChart2.setOption(option2);

    this.myChart3 = this.$echarts.init(this.$refs.chart3)
    let option3 = {
      legend: {
        data: ['CPU核时', 'GPU卡时', 'DCU卡时']
      },
      xAxis: {
        type: 'category',
        data: ['2024/01/01', '2024/01/02', '2024/01/03', '2024/01/04', '2024/01/05', '2024/01/06', '2024/01/07', '2024/01/08', '2024/01/09',
          '2024/01/10', '2024/01/11', '2024/01/12', '2024/01/13', '2024/01/14', '2024/01/15', '2024/01/16', '2024/01/17', '2024/01/18',
        ]
      },
      yAxis: {
        type: 'value',
        position: 'left',
        alignTicks: true,
        splitLine: {
          lineStyle: {
            type: 'dashed'//虚线
          },
          // show: true //隐藏
        }
      },
      tooltip: {
        trigger: 'axis'
      },
      series: [
        {
          name: 'CPU核时',
          type: 'line',
          stack: 'Total',
          data: [120, 132, 101, 134, 90, 230, 210, 220, 182, 191, 234, 290, 330, 310, 150, 232, 201, 154]
        },
        {
          name: 'GPU卡时',
          type: 'line',
          stack: 'Total',
          data: [220, 182, 191, 234, 290, 330, 310, 230, 210, 220, 182, 191, 234, 290, 201, 154, 190, 210]
        },
        {
          name: 'DCU卡时',
          type: 'line',
          stack: 'Total',
          data: [150, 232, 201, 154, 190, 330, 410, 191, 234, 290, 201, 154, 190, 210, 182, 191, 234, 290,]
        },
      ]
    };

    this.myChart3.setOption(option3);
  },
  methods: {
    formatTooltip(val) {
      return val + 'GB';
    },
    getUserDetail() {
      getCsOrderMemberUser(this.memberUserId).then(response => {
        console.log(response.data)
        this.form = response.data;
      });
    },
    getClassList() {
      getClassListByMark({ classMark: 'companyClass' }).then(response => {
        this.companyClassList = response.data
      });
    },
    getList1() {
      listCsResourceOrderApply({ pageNum: this.pageNum1, pageSize: this.pageSize, applyType: '1' }).then(response => {
        // this.workOrderList = response.rows;
        this.total1 = response.total;
      });
    },
    getList2() {
      listCsResourceOrderApply({ pageNum: this.pageNum2, pageSize: this.pageSize, applyType: '0' }).then(response => {
        // this.resourceList = response.rows;
        this.total2 = response.total;
      });
    },
    getList3() {

    },
    /** 修改按钮操作 */
    handleUpdate(row) {
      const applyId = row.applyId || this.ids
      console.log(row)
      if (row.applyType == '1') {
        this.$store.commit('SET_workOrderId', { applyId, type: 0 });
        this.$router.push({ name: 'workOrderApplication', params: { applyId } })
      } else {
        this.$router.push({ name: 'hpcApplication', params: { applyId } })
      }
    },
    handleUpdateTeam(row) {

    },
    handleDeleteTeam(row) {

    },
    handleUpdatereSource(row) {

    },
  },
}
</script>

<style scoped src="./operateResourceDetail.css" />