<template>
  <div>
    <div class="pageTitle">
      <span>团队画像信息</span>
    </div>
    <div class="module1">
      <div class="moduleTitle">用户基本信息</div>
      <el-form label-position="right" ref="form" :model="form" :rules="rules" :disabled="true" label-width="100px"
        class="formStyle">
        <el-col :span="9">
          <el-form-item label="团队账户名" prop="majorField">
            <el-input placeholder="请输入团队账户名" v-model="form.majorField" />
          </el-form-item>
        </el-col>
        <el-col :span="9">
          <el-form-item label="开户人姓名" prop="projectNumber">
            <el-input placeholder="请输入开户人姓名" v-model="form.projectNumber" />
          </el-form-item>
        </el-col>
        <el-col :span="9">
          <el-form-item label="联系方式" prop="projectSource">
            <el-input placeholder="请输入联系方式" v-model="form.projectSource" />
          </el-form-item>
        </el-col>
        <el-col :span="9">
          <el-form-item label="单位类别" prop="projectClassId">
            <el-select v-model="form.companyClassId" placeholder="请选择单位类别" style="width: 100%;">
              <el-option v-for="item in companyClassList" :key="item.classId" :label="item.className"
                :value="item.classId">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="9">
          <el-form-item label="邮箱" prop="projectSource">
            <el-input placeholder="请输入邮箱" v-model="form.projectSource" />
          </el-form-item>
        </el-col>
        <el-col :span="9">
          <el-form-item label="单位名称" prop="contractNumber">
            <el-input placeholder="请输入单位名称" v-model="form.contractNumber" />
          </el-form-item>
        </el-col>

        <el-col :span="9">
          <el-form-item label="单位地址" prop="workloadEstimate">
            <el-input t placeholder="请输入单位地址" v-model="form.workloadEstimate" />
          </el-form-item>
        </el-col>
        <el-col :span="9">
          <el-form-item label="邀请人" prop="contractNumber">
            <el-input placeholder="请输入邀请人" v-model="form.contractNumber" />
          </el-form-item>
        </el-col>
        <el-col :span="9">
          <el-form-item label="邀请码" prop="contractNumber">
            <el-input placeholder="请输入邀请码" v-model="form.contractNumber" />
          </el-form-item>
        </el-col>
        <el-col :span="9">
          <el-form-item label="团队标签" prop="contractNumber">
            <el-select v-model="form.tags" placeholder="请选择团队标签" style="width:100%" multiple>
              <el-option v-for="dict in dict.type.user_attribute" :key="dict.value" :label="dict.label"
                :value="dict.value" />
            </el-select>
          </el-form-item>
        </el-col>
      </el-form>
    </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="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="total" :page.sync="pageNum" :limit.sync="pageSize" @pagination="getList" />
    </div>
    <div class="module1">
      <div class="moduleTitle">团队工单</div>
      <el-table :data="workOrderList">
        <el-table-column label="申请单号" align="center" prop="applyNumber" />
        <el-table-column label="用户姓名" align="center" prop="name" />
        <el-table-column label="工单类型" align="center" prop="resourceClassName" />
        <el-table-column label="工单标题" align="center" prop="orderTitle" />
        <el-table-column label="申请时间" align="center" prop="createAt" width="180">
          <template slot-scope="scope">
            <span>{{ parseTime(scope.row.createAt, '{y}-{m}-{d}') }}</span>
          </template>
        </el-table-column>
        <el-table-column label="状态" align="center" prop="applyStatus">
          <template slot-scope="scope">
            <!-- ：0-待确认,1-盖章材料待上传,2-待审批,3-审批拒绝,4-待审核,5-审核拒绝,6-待分配,7-进行中,8-驳回,9-已完成 -->
            <span v-if="scope.row.applyStatus == 0">待确认</span>
            <span v-if="scope.row.applyStatus == 1">盖章材料待上传</span>
            <span v-if="scope.row.applyStatus == 2">待审批</span>
            <span v-if="scope.row.applyStatus == 3">审批拒绝</span>
            <span v-if="scope.row.applyStatus == 4">待审核</span>
            <span v-if="scope.row.applyStatus == 5">审核拒绝</span>
            <span v-if="scope.row.applyStatus == 6">待分配</span>
            <span v-if="scope.row.applyStatus == 7">进行中</span>
            <span v-if="scope.row.applyStatus == 8">驳回</span>
            <span v-if="scope.row.applyStatus == 9">已完成</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center" fixed="right" class-name="small-padding fixed-width">
          <template slot-scope="scope">
            <el-button size="mini" type="text" @click="handleUpdate(scope.row)"
              v-hasPermi="['cs:csResourceOrderApply:query']" v-if="scope.row.applyStatus == 9">查看</el-button>
          </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="resourceList">
        <el-table-column label="申请单号" align="center" prop="applyNumber" />
        <el-table-column label="项目标题" align="center" prop="projectName" />
        <el-table-column label="负责人" align="center" prop="name" />
        <el-table-column label="资源类型" align="center" prop="resourceClassName" />
        <el-table-column label="开通时间" align="center" prop="useTimeBegin" width="180">
          <template slot-scope="scope">
            <span>{{ parseTime(scope.row.useTimeBegin, '{y}-{m}-{d}') }}</span>
          </template>
        </el-table-column>
        <el-table-column label="到期时间" align="center" prop="useTimeEnd" width="180">
          <template slot-scope="scope">
            <span>{{ parseTime(scope.row.useTimeEnd, '{y}-{m}-{d}') }}</span>
          </template>
        </el-table-column>
        <el-table-column label="状态" align="center" prop="applyStatus">
          <template slot-scope="scope">
            <!-- ：0-待确认,1-盖章材料待上传,2-待审批,3-审批拒绝,4-待审核,5-审核拒绝,6-待分配,7-进行中,8-驳回,9-已完成 -->
            <span v-if="scope.row.applyStatus == 0">待确认</span>
            <span v-if="scope.row.applyStatus == 1">盖章材料待上传</span>
            <span v-if="scope.row.applyStatus == 2">待审批</span>
            <span v-if="scope.row.applyStatus == 3">审批拒绝</span>
            <span v-if="scope.row.applyStatus == 4">待审核</span>
            <span v-if="scope.row.applyStatus == 5">审核拒绝</span>
            <span v-if="scope.row.applyStatus == 6">待分配</span>
            <span v-if="scope.row.applyStatus == 7">进行中</span>
            <span v-if="scope.row.applyStatus == 8">驳回</span>
            <span v-if="scope.row.applyStatus == 9">已完成</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center" fixed="right" class-name="small-padding fixed-width">
          <template slot-scope="scope">
            <el-button size="mini" type="text" @click="handleUpdate(scope.row)"
              v-hasPermi="['cs:csResourceOrderApply:query']" v-if="scope.row.applyStatus > 6">查看</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="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="total3" :page.sync="pageNum3" :limit.sync="pageSize" @pagination="getList3" />
    </div>

    <div class="module1">
      <div class="moduleTitle">资源使用情况</div>
      <el-table :data="resourceInfoList">
        <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="total4" :page.sync="pageNum4" :limit.sync="pageSize" @pagination="getList4" />
    </div>
    <div class="module1">
      <div class="moduleTitle">名下项目</div>
      <el-table :data="projectRecordList">
        <el-table-column label="项目名称" align="center" prop="projectName" />
        <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" prop="projectClassName" />
        <el-table-column label="项目周期" align="center" width="180">
          <template slot-scope="scope">
            <span>{{ parseTime(scope.row.projectCycleBegin, '{y}-{m}-{d}') + '-' + parseTime(scope.row.projectCycleEnd,
              '{y}-{m}-{d}') }}</span>
          </template>
        </el-table-column>
        <el-table-column label="应用领域" align="center" prop="applicationArea" />
      </el-table>
      <pagination :total="total5" :page.sync="pageNum5" :limit.sync="pageSize" @pagination="getList5" />
    </div>
    <div class="module1">
      <div class="moduleTitle">团队科研成果</div>
      <el-table :data="achievementList">
        <el-table-column label="成果数量" align="center" prop="applyNumber" />
        <el-table-column label="论文" align="center" prop="projectName" />
        <el-table-column label="专利" align="center" prop="name" />
        <el-table-column label="奖项" align="center" prop="resourceClassName" />
        <el-table-column label="其他" align="center" prop="useTimeBegin" width="180" />
        <el-table-column label="预约成果" align="center" prop="useTimeEnd" width="180" />
        <el-table-column label="使用情况调研" align="center" prop="applyStatus" />
      </el-table>
    </div>
  </div>
</template>

<script>
  import { getClassListByMark, listCsResourceOrderApply } from "@/api/cs/csResourceOrderApply";
  import { listCsOrderMemberUser, getCsOrderMemberUser, delCsOrderMemberUser, addCsOrderMemberUser, updateCsOrderMemberUser } from "@/api/cs/csOrderMemberUser";
  export default {
    dicts: ['user_attribute', 'user_role'],
    data() {
      return {
        form: {
          projectName: '',
          projectNumber: '',
          majorField: '',
          projectSource: '',
          companyClassId: '',
          projectClassName: '',
          projectCycleRange: [],
          useDemand: '',
          workloadEstimate: '',
          contractName: '',
          contractNumber: '',
          contractAnnex: '',
          tags: []
        },
        companyClassList: [],
        rules: {},
        memberUserId: '',
        CPUform: {
          a: 10,
          b: 20,
          c: 10
        },
        aWidth: '',
        bWidth: '',
        cWidth: '',
        value1: 10,
        value2: 50,
        marks: {
          0: '0(GB)',
          100: '100(GB)',
        },
        teamList: [],      
        workOrderList: [],
        resourceList: [],
        rechargeList: [],
        resourceInfoList: [],
        projectRecordList: [],
        achievementList: [],
        pageSize: 10,
        pageNum: 1,
        total: 0,
        pageNum1: 1,
        total1: 0,
        pageNum2: 1,
        total2: 0,
        pageNum3: 1,
        total3: 0,
        pageNum4: 1,
        total4: 0,
        pageNum5: 1,
        total5: 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
        });
      },
      getList() {

      },
      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() {

      },
      getList4() {

      },
      getList5() {

      },
      /** 修改按钮操作 */
      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="./teamDetail.css" />