<template>
  <div class="main">
    <div class="index1">
      <div class="index1L padding16">
        <div class="title">入口</div>
        <div>
          <div v-for="(item, index) in indexTitle1" :key="index" class="index1LItem" @click="goPage(index)">
            <img :src="item" alt="">
          </div>
        </div>
      </div>
      <div class="index1R padding16">
        <div class="title">中心资源</div>
        <div>
          <div v-for="(item, index) in indexTitle2" :key="index" class="index1RItem">
            <div><img :src="item.img" alt=""></div>
            <div>{{ item.num }}</div>
            <div>{{ item.title }}</div>
          </div>
        </div>
      </div>
    </div>
    <div class="index2 marginTop14 padding16">
      <div class="title">中心资源</div>
      <div class="index2List">
        <div class="index2ItemType1 padding16">
          <div class="index2Item1">HPC</div>
          <div class="index2Item2">
            <div class="indexItem">
              <div class="color1">{{ objNum.HPCCPU }}</div>
              <div>CPU核数</div>
            </div>
            <div class="indexItem">
              <div class="color1">{{ objNum.HPCMemory }}</div>
              <div>内存使用量</div>
            </div>
          </div>
        </div>
        <div class="index2ItemType2 padding16">
          <div class="index2Item1">云计算</div>
          <div class="index2Item2">
            <div class="indexItem">
              <div class="color2">{{ objNum.cloudVirtualMachine }}</div>
              <div>虚拟机数量</div>
            </div>
            <div class="indexItem">
              <div class="color2">{{ objNum.cloudMemory }}</div>
              <div>内存</div>
            </div>
            <div class="indexItem">
              <div class="color2">{{ objNum.cloudStorage }}</div>
              <div>存储空间</div>
            </div>
          </div>
        </div>
        <div class="index2ItemType1 padding16">
          <div class="index2Item1">存储</div>
          <div class="index2Item2">
            <div class="indexItem">
              <div class="color3">{{ objNum.storageCapacity }}</div>
              <div>存储容量</div>
            </div>
            <div class="indexItem">
              <div class="color3">{{ objNum.storageIO }}</div>
              <div>I/O带宽</div>
            </div>
          </div>
        </div>
        <div class="index2ItemType2 padding16">
          <div class="index2Item1">裸节点</div>
          <div class="index2Item2">
            <div class="indexItem">
              <div class="color1">{{ objNum.nodeVirtualMachine }}</div>
              <div>虚拟机数量</div>
            </div>
            <div class="indexItem">
              <div class="color1">{{ objNum.nodeMemory }}</div>
              <div>内存</div>
            </div>
            <div class="indexItem">
              <div class="color1">{{ objNum.nodeStorage }}</div>
              <div>存储空间</div>
            </div>
          </div>
        </div>
        <div class="index2ItemType1 padding16">
          <div class="index2Item1">网络(VPN)</div>
          <div class="index2Item2">
            <div class="indexItem">
              <div class="color2">{{ objNum.VPNCPU }}</div>
              <div>CPU使用</div>
            </div>
            <div class="indexItem">
              <div class="color2">{{ objNum.VPN }}<span
                  style="font-weight: 400;font-size: 16px;color: #00BD7D;">M/S</span> </div>
              <div>流量</div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="index3 marginTop14 padding16">
      <div class="chart1Title">
        <div>开户数量统计分析</div>
        <div style="display: flex; align-items: end;">
          <div class="filterTitle2Item">
            <div>时间</div>
            <div>
              <el-date-picker v-model="timeRange" type="daterange" value-format="yyyy-MM-dd" range-separator="至"
                start-placeholder="开始日期" end-placeholder="结束日期">
              </el-date-picker>
            </div>
          </div>
          <el-button icon="el-icon-refresh-right" @click="resetTimeRange">重置</el-button>
          <el-button type="primary" icon="el-icon-search" @click="getStatistics">查询</el-button>
        </div>
      </div>
      <div id="step1">
        <div class="filterList">
          <div class="filterItem" v-for="(item, index) in filterList1" :key="index" @click="goWorkList(item)">
            <div class="filterItem1">
              <div class="filterItem1L"><img :src="item.img" alt=""></div>
              <div class="filterItem1R">
                <div>{{ item.num }}</div>
                <div>{{ item.title }}</div>
              </div>
            </div>
            <div class="filterItem2">
              <img src="../../assets/images/rightArrow.png" alt="">
            </div>
          </div>
        </div>
      </div>
      <div class="filterList">
        <div class="filterItem" v-for="(item, index) in filterList2" :key="index" @click="goAchievement(item, index)">
          <div class="filterItem1">
            <div class="filterItem1L"><img :src="item.img" alt=""></div>
            <div class="filterItem1R">
              <div>{{ item.num }}</div>
              <div>{{ item.title }}</div>
            </div>
          </div>
          <div class="filterItem2">
            <img src="../../assets/images/rightArrow.png" alt="">
          </div>
        </div>
      </div>
    </div>
    <div class="index4 marginTop14 padding16">
      <div class="title">最近工单</div>
      <div class="tableType">
        <span :class="{ active1: queryParams.applyType == '0', active2: queryParams.applyType != '0' }"
          @click="switchApplyType('0')">资源申请</span>
        <span :class="{ active1: queryParams.applyType == '1', active2: queryParams.applyType != '1' }"
          @click="switchApplyType('1')">工单服务</span>
      </div>
      <div class="resourceType" v-if="queryParams.applyType == '0'">
        <span v-for="(item, index) in resourceTypes" :key="index"
          :class="{ active3: queryParams.resourceClassName == item, active4: queryParams.resourceClassName != item }"
          @click="switchResourceName(item)">
          {{ item }}
        </span>
      </div>
      <div class="searchModule">
        <el-form inline :model="queryParams" class="formStyle" label-position="right" label-width="70px">
          <el-col :span="6">
            <el-form-item label="关键词">
              <el-input placeholder="请输入关键词" v-model="queryParams.keyword" />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="申请单号">
              <el-input placeholder="请输入申请单号" v-model="queryParams.applyNumber" />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="项目名称">
              <el-input placeholder="请输入项目名称" v-model="queryParams.projectName" />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="负责人">
              <el-input placeholder="请输入负责人" v-model="queryParams.name" />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="手机号">
              <el-input placeholder="请输入手机号" v-model="queryParams.phone" />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="申请时间">
              <el-date-picker v-model="queryParams.dateRange" type="daterange" range-separator="-"
                start-placeholder="开始时间" end-placeholder="结束时间" @change="dateRangeChange" format="yyyy-MM-dd"
                value-format="yyyy-MM-dd">
              </el-date-picker>
            </el-form-item>
          </el-col>
        </el-form>
        <div class="search">
          <el-button type="primary" icon="el-icon-search" @click="getList">查询</el-button>
          <el-button icon="el-icon-refresh-right" @click="reset">重置</el-button>
        </div>
      </div>
      <div id="step2">
        <div class="tableData">
          <el-table v-loading="loading" :data="csResourceOrderApplyList" header-cell-class-name="headerClassName">
            <el-table-column label="工单标题" align="center" prop="orderTitle" fixed="left"
              v-if="tableHeaderList.indexOf('orderTitle') != -1" />
            <el-table-column label="工单编号" align="center" prop="applyNumber" show-overflow-tooltip
              v-if="tableHeaderList.indexOf('applyNumber') != -1" />
            <el-table-column label="申请类型" align="center" prop="applyType"
              v-if="tableHeaderList.indexOf('applyType') != -1">
              <template slot-scope="scope">
                <span>{{ scope.row.applyType == 0 ? '资源' : '工单' }}</span>
              </template>
            </el-table-column>
            <el-table-column label="工单类型" align="center" prop="resourceClassName"
              v-if="tableHeaderList.indexOf('resourceClassName') != -1">
              <template slot-scope="scope">
                <span v-if="scope.row.applyType == 0">{{ scope.row.resourceClassName }}</span>
                <span v-if="scope.row.applyType == 1">{{ scope.row.orderClassName }}</span>
              </template>
            </el-table-column>
            <el-table-column label="工单描述" align="center" prop="demandContent" show-overflow-tooltip
              v-if="tableHeaderList.indexOf('demandContent') != -1">
                <template slot-scope="scope">
                  <span>{{ scope.row.applyType == 0 ? scope.row.demandContent : scope.row.problemDescribe }}</span>
                </template>
            </el-table-column>
            <el-table-column label="提交时间" align="center" prop="createAt" width="180"
              v-if="tableHeaderList.indexOf('createAt') != -1">
              <template slot-scope="scope">
                <span>{{ parseTime(scope.row.createAt, '{y}-{m}-{d}') }}</span>
              </template>
            </el-table-column>
            <el-table-column label="工单账号" align="center" prop="email"
              v-if="tableHeaderList.indexOf('emailName') != -1" />
            <el-table-column label="单位名称" align="center" prop="companyName"
              v-if="tableHeaderList.indexOf('companyName') != -1" />
            <el-table-column label="真实姓名" align="center" prop="name" v-if="tableHeaderList.indexOf('name') != -1" />
            <el-table-column label="手机号" align="center" prop="phone" v-if="tableHeaderList.indexOf('phone') != -1" />
            <el-table-column label="邮箱" align="center" prop="email" />
            <!-- <el-table-column label="用户来源" align="center" prop="deptId" />
      <el-table-column label="用户标签" align="center" prop="deptId" />
      <el-table-column label="资源信息" align="center" prop="deptId" /> -->
            <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" prop="evaluateStar">
              <template slot-scope="scope">
                {{ scope.row.evaluateStar == 0 ? '未评价' : scope.row.evaluateStar == 1 ? '很不满意'
                  : scope.row.evaluateStar == 2 ? '不太满意' : scope.row.evaluateStar == 3 ? '一般'
                    : scope.row.evaluateStar == 4 ? '比较满意' : scope.row.evaluateStar == 5 ? '很满意' : '' }}
              </template>
            </el-table-column>
            <el-table-column label="评价内容" align="center" prop="content"></el-table-column>
            <el-table-column label="受理部门" align="center" prop="deptName" />
            <!-- <el-table-column label="受理人员" align="center" prop="deptId" />
      <el-table-column label="处理时长" align="center" prop="deptId" />
      <el-table-column label="解决方法" align="center" prop="deptId" />
      <el-table-column label="处理结果" align="center" prop="deptId" />
      <el-table-column label="处理备份" align="center" prop="deptId" />
      <el-table-column label="备注" align="center" prop="deptId" /> -->
            <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 || scope.row.applyStatus == 0">查看</el-button>

                <el-button size="mini" type="text" style="color: red;" @click="handleUpdate(scope.row)"
                  v-hasPermi="['cs:csResourceOrderApply:edit']" v-if="scope.row.applyStatus == 2">触发</el-button>

                <el-button size="mini" type="text" style="color: red;" @click="handleUpdate(scope.row)"
                  v-hasPermi="['cs:csResourceOrderApply:edit']" v-if="scope.row.applyStatus == 4">审核</el-button>

                <el-button size="mini" type="text" style="color: red;" @click="handleUpdate(scope.row)"
                  v-hasPermi="['cs:csResourceOrderApply:edit']" v-if="scope.row.applyStatus == 6">委派</el-button>

                <el-button size="mini" type="text" style="color: red;" @click="handleUpdate(scope.row)"
                  v-hasPermi="['cs:csResourceOrderApply:edit']" v-if="scope.row.applyStatus == 7">处理工单</el-button>

                <el-button size="mini" type="text" @click="handleDelete(scope.row)"
                  v-hasPermi="['cs:csResourceOrderApply:remove']">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
          <div class="footer">
            <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum"
              :limit.sync="queryParams.pageSize" @pagination="getList" />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {
  listCsResourceOrderApply, getCsResourceOrderApply,
  delCsResourceOrderApply, addCsResourceOrderApply,
  updateCsResourceOrderApply, getClassListByMark, getStatistics
} from "@/api/cs/csResourceOrderApply";
export default {
  data() {
    return {
      resourceTypes: ['HPC', '云计算', '存储', '网络申请', '裸节点'],
      tableType: 0,
      resourceType: 0,
      loading: false,
      csResourceOrderApplyList: [],
      indexTitle1: [
        require('../../assets/images/index1.png'),
        require('../../assets/images/index2.png'),
        require('../../assets/images/index3.png'),
        require('../../assets/images/index4.png'),
        require('../../assets/images/index5.png')
      ],
      indexTitle2: [],
      filterList1: [],
      filterList2: [],
      timeRange: [],
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        applyType: '',
        keyword: '',
        applyNumber: null,
        resourceClassName: '',
        projectName: null,
        name: null,
        phone: null,
        applyStatus: null,
        dateRange: [],
      },
      total: 0,
      tableHeaderList: [
        'orderTitle',
        'applyNumber',
        'companyName',
        'applyType',
        'resourceClassName',
        'demandContent',
        'createAt',
        'emailName',
        'name',
        'phone', 'email', 'applyStatus', 'evaluateStar', 'content', 'deptName'],
      introOption: { // 参数对象
        prevLabel: '上一步',
        nextLabel: '下一步',
        skipLabel: '跳过',
        doneLabel: '完成',
        tooltipClass: 'intro-tooltip', /* 引导说明文本框的样式 */
        // highlightClass: 'intro-highlight', /* 说明高亮区域的样式 */
        exitOnEsc: true, /* 是否使用键盘Esc退出 */
        exitOnOverlayClick: false, /* 是否允许点击空白处退出 */
        keyboardNavigation: true, /* 是否允许键盘来操作 */
        showBullets: false, /* 是否使用点显示进度 */
        showProgress: false, /* 是否显示进度条 */
        scrollToElement: true, /* 是否滑动到高亮的区域 */
        overlayOpacity: 0.5, // 遮罩层的透明度 0-1之间
        positionPrecedence: ['bottom', 'top', 'right', 'left'], /* 当位置选择自动的时候，位置排列的优先级 */
        disableInteraction: false, /* 是否禁止与元素的相互关联 */
        hidePrev: true, /* 是否在第一步隐藏上一步 */
        // hideNext: true, /* 是否在最后一步隐藏下一步 */
        steps: [
          { title: '待审批工单', element: '#step1', intro: '在这里查看待审批的工单数量，也可点击【查看】进入待审批列表' },
          { title: '工单列表', element: '#step2', intro: '在这里查看用户近期提交的工单信息，可点击查看详情和审核。' },
        ], /* steps步骤，可以写个工具类保存起来 */
      },
      objNum: {}
    }
  },
  mounted() {
    // 调用新手引导的方法
    this.$nextTick(() => {
      if (localStorage.getItem('isFirstAdmin') === null || localStorage.getItem('isFirstAdmin') !== '1') {
        setTimeout(() => {
          this.initGuide() // 调用新手引导的方法
        }, 500);
        localStorage.setItem('isFirstAdmin', 1)
      }
    });
    this.getList()
    this.getStatistics()
  },
  methods: {
    goPage(index) {
      if (index == 0) {
        this.$router.push('/workOrderManagement/workOrderListManagement')
      } else if (index == 1) {
        this.$router.push('/userManagement/workOrderUserList')
      } else if (index == 2) {
        this.$router.push('/userManagement/communicationManagement')
      } else if (index == 3) {
        this.$router.push('/userManagement/contractManagement')
      } else if (index == 4) {
        this.$router.push('/userManagement/resourceUserList')
      }
    },
    initGuide() {
      // 绑定标签元素的选择器数组
      this.$intro()
        .setOptions(this.introOption)
        // 点击结束按钮后执行的事件
        .oncomplete(() => {
          console.log('点击结束按钮后执行的事件')
        })
        // 点击跳过按钮后执行的事件
        .onexit(() => {
          console.log('点击跳过按钮后执行的事件')
        })
        // 确认完毕之后执行的事件
        .onbeforeexit(() => {
          console.log('确认完毕之后执行的事件')
        })
        .start()
    },
    resetTimeRange() {
      this.timeRange = []
      this.getStatistics()
    },
    getStatistics() {
      let beginAt = this.timeRange[0] ? this.timeRange[0] : ''
      let endAt = this.timeRange[1] ? this.timeRange[1] : ''
      console.log(this.timeRange)
      getStatistics({ beginAt, endAt }).then(res => {
        this.objNum = res.data
        this.indexTitle2 = [
          { title: '中心用户数量', num: res.data.centerUserNum, img: require('../../assets/images/index6.png') },
          { title: '资源接单数', num: res.data.resourceNum, img: require('../../assets/images/index7.png') },
          { title: '工单接单数', num: res.data.orderNum, img: require('../../assets/images/index8.png') },
        ]
        //0-待确认,1-盖章材料待上传,2-待审批,3-审批拒绝,4-待审核,5-审核拒绝,6-待分配,7-进行中,8-驳回,9-已完成
        this.filterList1 = [{
          img: require('../../assets/images/chartmanag2.png'),
          num: res.data.approveNum,
          title: '待审批工单',
          applyStatus: '2',
        }, {
          img: require('../../assets/images/chartmanag3.png'),
          num: res.data.auditingNum,
          title: '待审核工单',
          applyStatus: '4',
        }, {
          img: require('../../assets/images/chartmanag4.png'),
          num: res.data.distributionNum,
          title: '待分配工单',
          applyStatus: '6',
        }, {
          img: require('../../assets/images/chartmanag5.png'),
          num: res.data.evaluateNum,
          title: '待评价工单',
          applyStatus: '9',
        }, {
          img: require('../../assets/images/chartmanag6.png'),
          num: res.data.afootNum,
          title: '进行中工单',
          applyStatus: '7',
        }]
        this.filterList2 = [{
          img: require('../../assets/images/chartUser2.png'),
          num: res.data.newUserNum,
          title: '新增用户'
        }, {
          img: require('../../assets/images/chartUser5.png'),
          num: res.data.addUserNum,
          title: '累计用户'
        }, {
          img: require('../../assets/images/chartUser4.png'),
          num: res.data.activeUserNum,
          title: '活跃用户数',
        }, {
          img: require('../../assets/images/chartUser1.png'),
          num: res.data.companyNum,
          title: '新增合作单位'
        }, {
          img: require('../../assets/images/chartUser6.png'),
          num: res.data.achievementNum,
          title: '新增成果数量',
        }]
      })
    },
    goWorkList(item) {
      if (item.title == '待评价工单') {
        this.queryParams.evaluateStar = 0
      } else {
        this.queryParams.applyStatus = item.applyStatus
      }
      this.getList()
    },
    goAchievement(item, index) {
      if (index == 0 || index == 1 || index == 2) {
        this.$router.push('/userManagement/workOrderUserList')
        return
      }
      if (index == 3) {
        this.$router.push('/userManagement/unitInformationList')
        return
      }
      if (index == 4) {
        this.$router.push('/userManagement/achievementManagement')
        return
      }
    },
    /** 查询资源、工单申请列表 */
    getList() {
      this.loading = true;
      if (null != this.queryParams.dateRange && '' != this.queryParams.dateRange) {
        this.queryParams["beginCreateAt"] = this.queryParams.dateRange[0];
        this.queryParams["endCreateAt"] = this.queryParams.dateRange[1];
      }
      listCsResourceOrderApply(this.queryParams).then(response => {
        this.csResourceOrderApplyList = response.rows;
        // console.log(this.csResourceOrderApplyList)
        this.total = response.total;
        this.loading = false;
      });
    },
    /** 修改按钮操作 */
    handleUpdate(row) {
      // this.reset();
      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, type: 0 } })
      } else {
        this.$router.push({ name: 'hpcApplication', params: { applyId } })
      }
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      const applyIds = row.applyId || this.ids;
      this.$modal.confirm('是否确认删除资源、工单申请编号为"' + applyIds + '"的数据项？').then(function () {
        return delCsResourceOrderApply(applyIds);
      }).then(() => {
        this.getList();
        this.$modal.msgSuccess("删除成功");
      }).catch(() => { });
    },
    reset() {
      this.queryParams = {
        pageNum: 1,
        pageSize: 10,
        applyType: '',
        applyNumber: '',
        resourceClassName: '',
        projectName: '',
        name: '',
        phone: '',
        applyStatus: '',
        keyword: '',
        dateRange: []
      }
      this.getList()
    },
    switchApplyType(type) {
      this.queryParams.applyType = type
      this.queryParams.resourceClassName = ''
      this.queryParams.applyStatus = ''
      this.getList()
    },
    switchResourceName(name) {
      this.queryParams.resourceClassName = name
      this.queryParams.applyStatus = ''
      this.getList()
    },
    dateRangeChange() {

    },
    currentChange(page) {
      this.queryParams.pageNum = page
      this.getList()
    },
    check(id) {

    },
    edit(id) {

    },
  },
}
</script>

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