/*project*/
<template>
  <div class="project">
    <div class="header">
      <p>
        总项目数{{ projectNum }}个，已上链数{{ chainNum }}个，版权总收益{{
          income
        }}
      </p>
      <el-input
        v-model="projectName"
        size="small"
        placeholder="请输入项目名称"
        @change.native="search"
      >
        <i slot="prefix" class="el-icon-search slot" />
      </el-input>
    </div>
    <div class="content-list">
      <div v-if="paginationConfig.total == 0" class="tips">暂无数据</div>
      <div
        v-for="(item, index) in listData"
        :key="index"
        class="list"
     
      >
        <div class="yuyan "  v-if="item.missionType=='3'"><img src="@/assets/match/yy.png"/>大赛项目预演</div>
         <div class="yuyan " v-else-if="item.missionType=='4'"><img src="@/assets/match/dz1.png"/>大赛项目正式</div>
        <div class="yuyan" v-else></div>
        <div v-if="item.upChainState == '2'" class="protect"   >
          <img class="image-protect" :src="protect" fit="cover" alt="protect" />
        </div>
        <div class="income-time" v-if="item.upChainState == '2'">
          <span>{{ `版权收益${item.profit}` }}</span>
        </div>
 
        <div
          class="income-time"
          v-if="item.upChainState != '2' && item.noMoneyTime"
        >
          <span>{{ item.noMoneyTime }}</span>
        </div>
        
        <div class="image"  @click="toDetails(item.projectId)">
          <img
            class="image-project"
            :src="
              item.projectType == 'hcfd'
                ? mode
                : item.projectType == 'fem'
                ? tyre
                : tank
            "
            alt="project"
          />
        </div>
        <p class="projectType">
          <span v-if="item.projectType">[ {{ item.projectType }} ] </span>

          <el-button
            v-if="item.solverState == '2'"
            type="success"
            size="mini"
            icon="el-icon-download"
            plain
            circle
            @click.stop="Download(item.projectId)"
          ></el-button>
          <el-button
            v-if="item.solverState == '2'"
            type="primary"
            size="mini"
            icon="el-icon-upload"
            plain
            circle
            @click.stop="UpChain(item.projectId)"
          ></el-button>
              <el-button
             v-if="item.missionType=='3'||item.missionType=='4'"
             type="primary"
             size="mini"
             icon="el-icon-s-order"
            plain
             circle
            @click=" Upfile(item.projectId,item.reportFile,item.reportFileName)"
          ></el-button>
          <!--Upfile(item.projectId) -->
          <!-- <i
            v-if="userType != '2'"
            class="el-icon-download"
            @click.stop="Download(item.projectId)"
          />
          <i
            v-if="
              userType != '2' &&
              (!item.upChainState || item.upChainState == '0')
            "
            class="el-icon-upload"
            @click.stop="UpChain(item.projectId)"
          /> -->
          <!-- <svg-icon
            v-if="userType != '2' && item.upChainState == '2'"
            :icon-class="item.state == '1' ? 'eye-open' : 'eye'"
            @click.stop="Show(index)"
          /> -->
        </p>
      
        <div class="title clearfix " ><p class="title1">{{ item.projectName }} </p>
           <div class="gongkai" v-if="item.missionType=='3'||item.missionType=='4'">
             <span class="gonk title3"><img src="@/assets/match/eye.png"/></span>
           </div>
           <div class="gongkai" v-else>
             <span class="gonk" v-if="item.projectPubsState=='1'" @click="isgongkai(item.projectId,'0')"><img src="@/assets/match/eye.png"/></span>
            <span class="gonk" v-else   @click="isgongkai(item.projectId,'1')"><img src="@/assets/match/beye.png"/></span></div>
             </div>
         <div class="maisu">
        <p class="desc">
          {{ item.projectDesc
          }}<span v-if="!item.projectDesc"
            >此人很懒，没有写项目描述哟（^~^）</span
          >
        </p>
         <div class="gongkai jiangbei"  v-if="item.missionType=='3'||item.missionType=='4'">
            <img src="@/assets/match/jbei.png"/>
          </div>
      </div>
        <p class="resouce-status">
          资源状态：<span
            :class="[
              item.resApplyState == 0
                ? 'black'
                : item.resApplyState == 1
                ? 'yello'
                : item.resApplyState == 2
                ? 'green'
                : 'red',
            ]"
            >{{ getState(item.resApplyState) }}</span
          >
        </p>
        <p class="use">求解状态：{{ getSolverState(item.solverState) }}</p>
        <p class="use">求解次数：{{ item.solverNum }} 次</p>
        <p class="use" v-if="item.projectCost">
          求解消耗：{{ item.projectCost }}
        </p>
        <p class="name" v-if="userType == '1'">{{ item.userName }}</p>
        <p>创建于{{ formatTime(item.createTime) }}</p>
       
      </div>
    </div>
    <div class="pagination">
      <Pagination
        :pagination-config="paginationConfig"
        @putPagination="getPagination"
      ></Pagination>
    </div>
    <FileList :file-list-config="fileListConfig" @putFileList="getFileList" />
    <ChainInfo
      :chain-info-config="chainInfoConfig"
      @putChainInfo="getChainInfo"
    />
    <!-- 文件上传 -->
        <fileupload ref="fileupload" :fileuploadConfig="fileuploadConfig" @fileLoadeState="fileLoadeState($event)"></fileupload>
  </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 protect from '@/assets/img/protect.png'
import Pagination from '@/components/Pagination'
import FileList from './components/FileList'
 import fileupload from './components/fileupload'
import ChainInfo from './components/ChainInfo'
import { formatState, formatSolverState, parseTime } from '@/utils/index'
import { request } from '@/utils/request'
export default {
  name: 'Project',
  components: { Pagination, FileList, ChainInfo,fileupload},
  data() {
    return {
      
       fileuploadConfig: {
        isShow: false,
        projectId: '',
        reportFileName:'',
        reportFile:'',
      },
      fileuploadisShow:false,
       dasai:false,
       putong:false,
       yy:"1",
      new_visiable:false,
      projectId:"",
      userType: this.$store.getters.userType || 0, // 用户类型（0-个人 1-企业 2-子账户）
      userName: this.$store.getters.name,
      paginationConfig: {
        hideSinglePage: false,
        page: 1,
        size: 15,
        sizeList: [10, 15, 30, 50],
        layout: 'total, sizes, prev, pager, next, jumper',
        total: 0,
      },
      fileListConfig: {
        isShow: false,
        operationType: '',
        projectId: '',
        fileList: [],
      },
      chainInfoConfig: {
        isShow: false,
        infoData: {},
      },

      projectNum: '*', // 总项目数
      chainNum: '*', // 已上链数
      income: '*', // 版权总收益
      projectName: '', // 搜索的项目名称
      protect: protect, // 版保图标
      car: car, // 项目图标
      frame: frame, // 项目图标
      mode: mode, // 项目图标
      plane: plane, // 项目图标
      tank: tank, // 项目图标
      tyre: tyre, // 项目图标
      listData: [], // 数据列表
      projectId: '', // 当前项目id
      operationType: '', //操作类型
    }
  },
  created() {
    this.getData() // 获取项目列表
    this.getProject() // 获取项目信息
  },
  // 父组件中返回要传给下级的数据
  provide() {
    return {
      getFile: this.getFile,
    }
  },
  methods: {
    // 获取项目信息
    getProject() {
      const params = {
        transCode: 'C00001',
      }
      request(params)
        .then((res) => {
          this.projectNum = res.totalProject
          this.chainNum = res.upChainProject
          this.income = res.totalProfit
        })
        .catch((err) => {})
    },
    // 获取项目列表
    getData() {
      const loading = this.$loading({
        lock: true,
        text: 'Loading',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)',
      })
      setTimeout(() => {
        const params = {
          transCode: 'C00004',
          type: '', // 类型（0-优秀 1-我的）
          proNames: 'project_name',
          // proValues: '$' + this.projectName + '$', // 名称
          proValues: this.projectName, // 名称
          page: this.paginationConfig.page,
          count: this.paginationConfig.size,
        }
        request(params)
          .then((res) => { 
            loading.close()
            this.listData = res.rows
            this.paginationConfig.total = res.total
          })
          .catch((err) => {
            loading.close()
          })
      }, 1500)
    },
    // 搜索
    search() {
      if (this.projectName) {
        this.page = 1
        this.getData()
      } else {
        return this.$message.warning('请输入项目名称！')
      }
    },
    // 获取分页操作
    getPagination(data) {
      this.paginationConfig = data
      this.getData()
    },
    // 下载
    Download(projectId) {
      this.projectId = projectId
      this.operationType = 'download'
      this.getFile()
    },
    // 上链
    UpChain(projectId) {
      this.projectId = projectId
      this.operationType = 'upchain'
      this.getFile()
    },
    // 文件列表
    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: this.operationType,
            projectId: this.projectId,
            fileList: dataList,
          }
        })
        .catch((err) => {})
    },
    // 获取文件列表操作
    getFileList(data) {
      if (data) {
        this.chainInfoConfig = {
          isShow: true,
          infoData: data,
        }
      } else {
        this.fileListConfig.isShow = false
      }
    },
    // 获取区块链信息操作
    getChainInfo(data) {
      this.chainInfoConfig.isShow = false
    },
    // 显示/隐藏
    Show(index) {
      this.listData[index].state = !this.listData[index].state
      const params = {
        transCode: 'C00010',
        id: this.listData[index].projectId,
        type: this.listData[index].state ? '1' : '0',
      }
      request(params)
        .then((res) => {
          this.$message.success(
            this.listData[index].state
              ? '显示项目：' + this.listData[index].projectName + '成功！'
              : '隐藏项目：' + this.listData[index].projectName + '成功！'
          )
        })
        .catch((err) => {})
    },
    //查看详情
    toDetails(projectId) {
      this.$router.push({
        path: '/userLayout/details',
        name: 'Details',
        query: { projectId },
      })
    },    
    // 文件shangchuan
    //  reUpload() {
    //   this.$refs.Gridin.uploader.upload();
    // },
    // 报告上传
    Upfile(projectId,reportFile,reportFileName){
      this.fileuploadConfig.projectId=projectId;
      this.fileuploadConfig.reportFile=reportFile;
      this.fileuploadConfig.reportFileName=reportFileName;
        this.$refs.fileupload.fileuploadisShow=true;
    },
      bgclick(projectId){
        this.projectId=projectId;
        this.fileuploadisShow=true; 
      },
      // 查询文件列表
      
    // 公开或者不公开
  isgongkai(id,projectPubsState){
   console.log(111111)
      const params = {
            transCode: 'D00021',
            id:id,
            type:projectPubsState
          }
          request(params)
            .then((res) => {
           this.getData();
            })
            .catch((err) => {})
  },
    formatTime(time) {
      return parseTime(time)
    },
    // 获取上链状态
    getState(state) {
      return formatState(state)
    },
    // 获取求解状态
    getSolverState(state) {
      return formatSolverState(state)
    },
  },
  
}
</script>

<style lang="scss" scoped>
@import '@/styles/variables.scss';
@import '@/styles/mixin.scss';
.project {
  @include w_h(100%, 100%);
  font-size: 12px;
  padding: 20px 50px;
  .header {
    @include flex();
    font-size: 18px;
    font-weight: 700;
    color: $color_3;
  }
  .content-list {
    @include w_h(100%, 90%);
    @include flex(center);
    overflow-y: auto;
    // margin-top: 20px;
    flex-wrap: wrap;
    .tips {
      @include w_h(100%, 100%);
      line-height: 450px;
      font-size: 12px;
      text-align: center;
      color: #909399;
    }
    .list {
      @include w_h(250px, 375px);
      position: relative;
      margin: 5px;
      padding: 10px;
      background: $color_f;
      box-shadow: 0 0 7px 7px rgba(0, 0, 0, 0.04);
      &:hover {
        cursor: pointer;
      }
      .protect {
        @include position(absolute, 0, auto, 0, auto, 1);
        .image-protect {
          @include w_h(65px);
        }
      }
      .income-time {
        @include position(absolute, 0, auto, auto, 0, 1);
        padding: 5px;
        font-size: 12px;
        color: #0470cc;
        border: 1px solid #0470cc;
        border-radius: 0px 0px 0px 5px;
        span {
          display: inline-block;
          transform: scale(1);
        }
      }
      .image {
        @include w_h(100%, 140px);
        padding: 20px 40px;
        text-align: center;
        &-project {
          @include w_h(auto, 100%);
        }
      }
      p {
        color: $color_6;
        line-height: 20px;
        &.projectType {
          font-size: 14px;
          font-weight: 700;
          color: $color_on;
          span {
            margin-right: 10px;
          }
          svg-icon,
          i {
            font-size: 18px;
            font-weight: 700;
            color: $color_3;
          }
        }
        &.title,
        &.desc,
        &.name {
          @include w_h(100%);
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-line-clamp: 1;
          -webkit-box-orient: vertical;
        }
        &.title {
          margin: 8px auto;
          font-size: 16px;
          font-weight: 700;
          color: $color_3;
        }
        &.desc {
          @include w_h(100%, 40px);
          -webkit-line-clamp: 2;
          span {
            color: $color_b;
          }
        }
        &.resouce-status {
          span {
            font-weight: 700;
          }
          span.black {
            color: $color_3;
          }
          span.yello {
            color: #15cece;
          }
          span.green {
            color: #37cc57;
          }
          span.red {
            color: $color_on;
          }
        }
        &.use {
          @include w_h(100%, 20px);
        }
      }
    }
  }
  .gongkai{
    float: right;
    
  }
  .maisu{
    position: relative;
  }
  .jiangbei{
    position: absolute;
    right: 0;
    top: 0;
  }
 .gonk{
       display: inline-block;
 }
  .yuyan{
    position: absolute;
    top: 0;
    left: 11px;
    height: 46px;
    line-height: 46px;
    width: 36px;
    color: #fff;
    text-align: center;
    font-size: 20px;
        font-size: 15px;
        
  }
  .zscolore{
    background-color: green;
  
  }
  .yycolore{
  background-color: red;
  }
  .baogao{
    color: royalblue;
  }
  .pagination {
    @include flex(center);
    font-size: 12px;
    color: $color_9;
  }
}
.title1{
  padding-right: 20px;
  float: left;

}
.title{
  position: relative;
  overflow:hidden;
text-overflow:ellipsis;
display:-webkit-box;
-webkit-box-orient:vertical;
-webkit-line-clamp:2;
}
.title3{
 position: absolute;
 top: 1;
 right: 0;
}
.maisu{
  position: relative;
}
.maisu p{
      padding-right: 30px;
}
</style>

<style lang="scss">
@import '@/styles/variables.scss';
@import '@/styles/mixin.scss';
.project {
  .header .el-input {
    @include w_h(200px);
    &__inner {
      // border: none;
      border-radius: 15px;
      padding-left: 36px;
    }
    &__prefix {
      margin-left: 5px;
      font-size: 20px;
      font-weight: 700;
      line-height: 30px;
      color: $color_3;
    }
  }
}
</style>>

