/*项目详情*/
<template>
  <div class="details">
    <div class="container">
      <h3>项目详情</h3>
      <div class="image">
        <img
          class="image-project"
          :src="
            data.projectType == 'hcfd'
              ? mode
              : data.projectType == 'fem'
              ? tyre
              : tank
          "
          alt="project"
        />
      </div>
      <div class="info">
        <p class="title">
          <span class="projectType" v-if="data.projectType"
            >[ {{ data.projectType }} ] </span
          >{{ data.projectName }}
        </p>
        <p class="desc">{{ data.projectDesc }}</p>
        <!-- <div class="solver">
          <p>
            求解状态：<span>{{ getSolverState(data.solverState) }}</span>
          </p>
          <p>
            求解次数：<span>{{ data.solverNum }} 次</span>
          </p>
        </div> -->
        <div class="user-time">
          <p><i class="el-icon-s-custom"></i> {{ data.userName }}</p>
          <p>
            <span>创建于{{ formatTime(data.createTime) }}</span>
          </p>
        </div>
        <div class="btn-group">
          <el-button type="primary" @click.native.prevent="getFile"
            >文件列表</el-button
          >
          <el-button
            type="primary"
            @click.native.prevent="Apply"
            v-if="
              userType != 1 &&
              data.resApplyState != 1 &&
              data.resApplyState != 2
            "
            >申请资源</el-button
          >
          <el-button
            type="primary"
            @click.native.prevent="Applying"
            v-if="data.resApplyState != 0"
            >{{
              data.resApplyState == 1 ? '资源申请中' : '查看资源'
            }}</el-button
          >
          <el-button
            type="primary"
            @click.native.prevent="Continue"
            v-if="userType != 1 && data.resApplyState == 2"
            >续用资源</el-button
          >
          <el-button
            type="danger"
            @click.native.prevent="Release(data.projectName)"
            v-if="userType != 1 && data.resApplyState == 2"
            >释放资源</el-button
          >
          <el-button
            type="primary"
            @click.native.prevent="getDeployList('deploy')"
            v-if="userType == 1 && data.resApplyState == 1"
            >分配资源</el-button
          >
          <el-button
            type="warning"
            @click.native.prevent="toSolver()"
            v-if="userType != 1"
            >进入求解器</el-button
          >
        </div>
      </div>
    </div>
    <Toast :toast-config="toastConfig" @putToast="getToast" />
    <FileList :file-list-config="fileListConfig" @putFileList="getFileList" />
    <ChainInfo
      :chain-info-config="chainInfoConfig"
      @putChainInfo="getChainInfo"
    />
    <ApplyResource :apply-config="applyConfig" @putApply="getApply" />
    <Applying :applying-config="applyingConfig" @putApplying="getApplying" />
    <ContinueResource
      :continue-config="continueConfig"
      @putContinue="getContinue"
    />
    <Deploy :deploy-config="deployConfig" @putDeploy="getDeploy" />
  </div>
</template>

<script>
import car from '@/assets/mode/car.jpg'
import frame from '@/assets/mode/frame.jpg'
import mode from '@/assets/mode/mode.jpg'
import plane from '@/assets/mode/plane.jpg'
import tank from '@/assets/mode/tank.jpg'
import tyre from '@/assets/mode/tyre.jpg'

import Toast from '@/components/Toast'
import FileList from '../components/FileList'
import ChainInfo from '../components/ChainInfo'
import ApplyResource from '../components/ApplyResource'
import Applying from '../components/Applying'
import ContinueResource from '../components/ContinueResource'
import Deploy from '../components/Deploy'

import { parseTime, formatSolverState } from '@/utils/index'
import { request } from '@/utils/request'
export default {
  name: 'Details',
  components: {
    Toast,
    FileList,
    ChainInfo,
    ApplyResource,
    Applying,
    ContinueResource,
    Deploy,
  },
  data() {
    return {
      userType: this.$store.getters.userType || 0, // 用户类型（0-个人 1-企业 2-子账户）
      car: car, // 项目图标
      frame: frame, // 项目图标
      mode: mode, // 项目图标
      plane: plane, // 项目图标
      tank: tank, // 项目图标
      tyre: tyre, // 项目图标
      projectId: '', // 项目id
      data: '', // 项目数据
      toastConfig: {
        isShow: false,
        showCancel: false,
        center: false,
        message: '',
      },
      fileListConfig: {
        isShow: false,
        operationType: '',
        projectId: '',
        fileList: [],
      },
      chainInfoConfig: {
        isShow: false,
        infoData: {},
      },
      applyConfig: {
        isShow: false,
        projectId: '',
        userType: '',
        resList: [],
      },
      applyingConfig: {
        isShow: false,
        resApplyState: '',
        resType: '',
        resCount: '',
        resApplyPeriod: '',
        resUseInfo: '',
        resApplyTime: '',
        resAuditTime: '',
        resAuditRejectInfo: '',
        resStartTime: '',
        resEndTime: '',
        resUseNums: '',
      },
      continueConfig: {
        isShow: false,
        resApplyId: '',
      },
      deployConfig: {
        isShow: false,
        resApplyId: '',
        resList: [],
        userName: '',
        projectName: '',
        resCount: '',
        resType: '',
        resApplyPeriod: '',
        resUseInfo: '',
      },
    }
  },
  created() {
    this.projectId = this.$route.query.projectId
    if (this.projectId) {
      this.getDetails()
    }
  },
  // 父组件中返回要传给下级的数据
  provide() {
    return {
      getFile: this.getFile,
    }
  },
  methods: {
    // 获取项目详情
    getDetails() {
      const params = {
        transCode: 'C00031',
        projectId: this.projectId,
      }
      request(params)
        .then((res) => {
          this.data = res
        })
        .catch((err) => {})
    },
    // 文件列表
    getFile() {
      const params = {
        transCode: 'C00033',
        projectId: this.projectId,
      }
      request(params)
        .then((res) => {
          let dataList = res.fileList
          dataList.map((item, index) => {
            item.index = index + 1
          })
          this.fileListConfig = {
            isShow: true,
            operationType: 'file',
            projectId: this.projectId,
            solverState: res.solverState,
            solverNum: res.solverNum,
            fileList: dataList,
          }
        })
        .catch((err) => {})
    },
    // 申请资源
    Apply() {
      if (this.userType == 2) {
        this.applyConfig = {
          isShow: true,
          projectId: this.projectId,
          userType: this.userType,
          resList: [],
        }
      } else {
        this.getDeployList('apply')
      }
    },
    //资源申请中
    Applying() {
      this.applyingConfig = {
        isShow: true,
        resApplyState: this.data.resApplyState,
        resType: this.data.resType,
        resCount: this.data.resCount,
        resApplyPeriod: this.data.resApplyPeriod,
        resUseInfo: this.data.resUseInfo,
        resApplyTime: this.data.resApplyTime,
        resAuditTime: this.data.resAuditTime,
        resAuditRejectInfo: this.data.resAuditRejectInfo,
        resStartTime: this.data.resStartTime,
        resEndTime: this.data.resEndTime,
        resUseNums: this.data.resUseNums,
      }
    },
    // 续用资源
    Continue() {
      this.continueConfig = {
        isShow: true,
        resApplyId: this.data.resApplyId,
      }
    },
    //释放资源
    Release(projectName) {
      this.toastConfig = {
        isShow: true,
        showCancel: true,
        center: false,
        message: `该操作不可恢复，资源释放后将不可使用，您确定要将：'${this.data.projectName}' 的资源释放掉吗？`,
      }
    },
    // 获取可分配资源
    getDeployList(type) {
      // 获取资源列表
      const params = {
        transCode: 'C00024',
        state: '1', // 资源状态(1-可分配 2-已分配 3-已到期 4-已删除）
        type: '0', // 资源类型(0-通用）
        name: '', // 资源名称
        page: 1,
        count: -1,
      }
      request(params)
        .then((res) => {
          let resList = []
          res.rows.map((item, index) => {
            resList.push({
              key: item.resId,
              label: `${item.name},${item.capacity},${item.endtime}`,
            })
          })
          if (type == 'deploy') {
            this.deployConfig = {
              isShow: true,
              resApplyId: this.data.resApplyId,
              resList: resList,
              userName: this.data.userName,
              projectName: this.data.projectName,
              resCount: this.data.resCount,
              resType: this.data.resType,
              resApplyPeriod: this.data.resApplyPeriod,
              resUseInfo: this.data.resUseInfo,
            }
          } else if (type == 'apply') {
            this.applyConfig = {
              isShow: true,
              projectId: this.projectId,
              userType: this.userType,
              resList: resList,
            }
          }
        })
        .catch((err) => {})
    },
    // 进入求解器
    toSolver() {
      const params = {
        transCode: 'A00006',
      }
      request(params)
        .then((res) => {
              let lesseeId=this.$store.getters.lesseeId;
          console.log(res)
          this.$message.success(' 即将进入求解器')
          console.log( res.authCode);

          setTimeout(() => {
            window.open(
              this.$store.getters.cfdUrl +
                '?authCode=' +
                res.authCode +
                '&projectId=' +
                this.projectId +
                '&projectType=' +
                this.data.projectType+
                 '&lesseeId=' +
                lesseeId,
              '_blank'
            )
          }, 1000)
        })
        .catch((err) => {})
    },
    // 获取Toast操作
    getToast(data) {
      this.toastConfig.isShow = false
      if (
        data &&
        this.toastConfig.message ===
          `该操作不可恢复，资源释放后将不可使用，您确定要将：'${this.data.projectName}' 的资源释放掉吗？`
      ) {
        const params = {
          transCode: 'C00026',
          applyResId: this.data.resApplyId,
        }
        request(params)
          .then((res) => {
            this.$message.success('释放资源完成！')
            this.getDetails()
          })
          .catch((err) => {})
      }
    },
    // 获取文件列表操作
    getFileList(data) {
      if (data) {
        this.chainInfoConfig = {
          isShow: true,
          infoData: data,
        }
      } else {
        this.fileListConfig.isShow = false
      }
    },
    // 获取区块链信息操作
    getChainInfo(data) {
      this.chainInfoConfig.isShow = false
    },
    // 获取申请资源操作
    getApply(data) {
      this.applyConfig.isShow = false
      if (data) {
        this.getDetails()
      }
    },
    // 获取资源申请中操作
    getApplying(data) {
      this.applyingConfig.isShow = false
      if (data) {
        this.getDetails()
      }
    },
    // 获取续用资源操作
    getContinue(data) {
      this.continueConfig.isShow = false
      if (data) {
        this.getDetails()
      }
    },
    // 获取分配资源操作
    getDeploy(data) {
      this.deployConfig.isShow = false
      if (data) {
        this.getDetails()
      }
    },
    formatTime(time) {
      return parseTime(time)
    },
    // 获取求解状态
    getSolverState(state) {
      return formatSolverState(state)
    },
  },
}
</script>

<style lang="scss" scoped>
@import '@/styles/variables.scss';
@import '@/styles/mixin.scss';
.details {
  @include w_h(100%, 100%);
  background: $color_f2;
  overflow: hidden;
  .container {
    @include w_h(100%, 100%);
    overflow-y: auto;
    h3 {
      text-align: center;
      line-height: 40px;
    }
    .image {
      @include w_h(100%, 350px);
      margin: 15px auto;
      text-align: center;
      &-project {
        @include w_h(auto, 100%);
      }
    }
    .info {
      @include w_h(60%);
      min-width: 600px;
      margin: 0 auto;
      line-height: 30px;
      font-size: 14px;
      color: $color_3;
      .title {
        font-size: 16px;
        font-weight: 700;
        .projectType {
          color: $color_on;
        }
      }
      .desc {
        text-indent: 28px;
        color: $color_6;
        line-height: 24px;
        text-align: justify;
        word-break: break-all;
        margin-bottom: 10px;
      }
      .solver {
        @include flex();
        color: $color_9;
        p {
          font-weight: 700;
          span {
            color: $color_6;
          }
        }
      }
      .user-time {
        @include flex();
        margin-bottom: 30px;
        color: $color_9;
        p {
          font-weight: 700;
          i {
            font-size: 18px;
          }
          span {
            font-size: 12px;
          }
        }
      }
      .btn-group {
        @include flex(space-evenly);
      }
    }
  }
}
</style>

<style lang="scss">
@import '@/styles/variables.scss';
@import '@/styles/mixin.scss';
.details {
  .el-button--warning {
    background-color: $color_on;
    border-color: $color_on;
  }
}
</style>>

