<template>
    <div>
        <el-container class="visual-project-list-drawer">
          <el-header class="visual-project-list-header" v-if=" $permission('/workspace/project/add') && !show">
            <!-- <el-button type="primary" icon="el-icon-plus" @click="handleAdd">新增报告</el-button> -->
            <el-dropdown>
              <el-button type="primary">
                新增报告<i class="el-icon-arrow-down el-icon--right"></i>
              </el-button>
              <el-dropdown-menu  class="children_item" v-if="dictMessage.REPORT_TYPE">
                <el-dropdown-item v-for="item in dictMessage.REPORT_TYPE.filter(item=>!['6'].includes(item.dictChildValue))" :key="item.dictChildLabel"  @click.native="handleAdd(item.dictChildValue)" v-if="$permission('/pcs/report/add/' + item.permission)">{{item.dictChildLabel}}</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </el-header>
          <el-main v-loading="loading" style="padding:0">
            <el-table
                class="project-table"
                :data="tableData"
                header-row-class-name="custom-table-header"
                :row-class-name="tableRowClassName"
                row-key="id"
                :expand-row-keys="expands"
                @cell-click="cellClick"
            >
            <el-table-column label="名称"  align="center" prop="name">
        <!-- <template slot-scope="scope">
            <el-link type="primary"  @click="tableName(scope.row)">{{scope.row.name}}</el-link>
        </template> -->
      </el-table-column>
      <el-table-column label="标的专利/产品"  align="center" prop="signPatentNo">
        <!-- <template slot-scope="scope">
            <span v-if="scope.row.type == 3">{{scope.row.signPatentNo}}</span>
            <el-link type="primary" v-else @click="toPatentDetails(scope.row.signPatentNo,scope.row)">{{scope.row.signPatentNo}}</el-link>
        </template> -->
      </el-table-column>
      <el-table-column label="相关专题库"  align="center" prop="projectId" >
        <template slot-scope="scope">
          <div>
            <span>{{ scope.row.projectId?scope.row.name:'' }}</span>
          </div>
        </template>
      </el-table-column>
      <el-table-column
        prop="event"
        label="事件"
        align="center"
        min-width="80px"
      >
        <template slot-scope="scope">
          <div>
            <el-link type="primary" @click="checkVisual(scope.row.scenarioName,121,'事件一')">事件一</el-link>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="应用场景" :show-overflow-tooltip="true" align="center" prop="scenarioNames">
        <template slot-scope="scope">
            <div class="cursor_pointer" v-for="item in scope.row.scenarioNames" :key="item" @click="checkVisual([item])">{{item}}</div>
        </template>
      </el-table-column>
      <!-- <el-table-column label="创建人" prop="createPersonName" sortable align="center"> </el-table-column> -->
      <el-table-column label="负责人" prop="personName"  align="center"> </el-table-column>
      <el-table-column label="客户" prop="clientName" align="center"> </el-table-column>
      <el-table-column label="技术/产品" prop="proTec" align="center"> </el-table-column>
      <!-- <el-table-column label="核心结论" prop="conclusions" sortable align="center">
        <template slot-scope="scope">
          <div>
            <span v-for="(item,index) in scope.row.conclusions" :key="index" style="margin:0">{{ item }} <span v-if="index<scope.row.conclusions.length-1">| </span></span>
          </div>
        </template>  
      </el-table-column> -->
      <el-table-column label="状态" align="center" >
        <template slot-scope="scope">
            <span>{{state[scope.row.status]}}</span>
        </template>
      </el-table-column>
              <!-- <el-table-column prop="clientName" label="客户" align="center" show-overflow-tooltip></el-table-column>
              <el-table-column prop="createName" label="创建人" align="center" show-overflow-tooltip></el-table-column>
              <el-table-column label="创建时间" align="center" show-overflow-tooltip>
                <template slot-scope="scope">
                  <span>{{ $d(scope.row.createTime, 'YYYY.MM.DD') }}</span>
                </template>
              </el-table-column>
              <el-table-column label="状态" align="center" show-overflow-tooltip>
                <template slot-scope="scope">
                  <span class="project-status">{{ scope.row.status === '0' ? '未完成' : '已完成' }}</span>
                </template>
              </el-table-column> -->
            </el-table>
            <div style="display:flex;flex-direction: row-reverse;margin:25px 0" v-if="show">
                <el-link type="primary" style="font-size:16px" @click="checkMore">查看更多>>> </el-link>
            </div>
          </el-main>
          <el-footer v-if="!show">
            <el-pagination :current-page.sync="queryParams.current" :page-size="queryParams.size" :total="total" @current-change="handleCurrentChange" layout="prev, pager, next, jumper" background></el-pagination>
          </el-footer>
        </el-container>

        <el-dialog
            :visible.sync="dialogVisible"
            title="新增报告文档"
            width="600px"
            custom-class="event"
            :before-close="handleClose"
            append-to-body>
            <div>
              <el-form ref="form" :model="form" :rules="rules" label-width="80px">
                <el-form-item label="报告名称" prop="name">
                  <el-input v-model="form.name" placeholder="请输入报告名称"></el-input>
                </el-form-item>
                <el-form-item label="标的专利" >
                  <el-input v-model="form.signPatentNo" placeholder="请输入标的专利"></el-input>
                </el-form-item>
                <el-form-item label="委托方" prop="clientId">
                  <el-select v-model="form.clientId" placeholder="请选择委托方" filterable :popper-append-to-body="false" style="width:100%">
                    <el-option v-for="item in clientList" :key="item.id" :label="item.name" :value="item.id"></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="产品/技术">
                  <el-input v-model="form.proTec" autocomplete="off" placeholder="请输入产品/技术"></el-input>
                </el-form-item>
                <el-form-item label="应用场景">
                  <el-select v-model="form.scenarioList" multiple clearable placeholder="请选择应用场景" :popper-append-to-body="false" style="width:100%">
                    <el-option v-for="item in dictsFromPASList" :key="item.id" :label="item.label" :value="item.value"></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="卷号" prop="volumeNumber" >
                  <el-input v-model="form.volumeNumber" autocomplete="off" placeholder="请输入卷号"></el-input>
                </el-form-item>
                <el-form-item :label="(!form.id &&form.status==3)?'上传报告文档':'上传附件'">
                  <div v-if="form.reportFiles" class="upload-file">
                    <div v-for="item in form.reportFiles" style="margin:0;display:flex;justify-content:space-around;">
                      <p style="margin:0;width:calc(100% - 40px);overflow: hidden;white-space: nowrap;text-overflow:ellipsis;cursor: pointer">{{item.name?item.name+'.'+item.suffix:item.fileName}}</p> 
                        <Menu :data="item" @delFile="delFile"></Menu>
                    </div>
                  </div>
                  <el-upload  ref="upload" class="upload-file" drag action="#" :auto-upload="false" :show-file-list="true" :on-change="onChange" multiple   :on-preview="handlePreview" :on-remove="handleRemove">
                    <i :class="!file ? 'el-icon-upload' : 'el-icon-refresh'"></i>
                    <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
                    <div class="el-upload__tip" slot="tip"></div>
                  </el-upload>
                </el-form-item>
                <el-form-item label="备注" prop="remark" >
                  <el-input type='textarea' v-model="form.remark" autocomplete="off" placeholder="请输入备注"></el-input>
                </el-form-item>
              </el-form>
            </div>
            <span slot="footer" class="dialog-footer">
              <el-button @click="dialogVisible = false">取 消</el-button>
              <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>
  
<script>
import { checkVisual } from "@/views/home/components/mixins";
export default {
  components: {},
  props:{
        show:{},
        params: {
            default: ()=>{
                return {}
            }
        },
    },
  mixins: [checkVisual],
  data() {
    return {
      dialogVisible:false,
      form:{},
      file:[],
      Already:[],
        tableData:[],
        queryParams:{
            current:1,
            size:10
        },
        total:0,
        expands:[],
        loading:false,
        rules:{
          name:{required: true, message: '请输入报告名称', trigger: 'blur'}
        }
    };
  },
  watch: {},
  computed: {
    state(){
      var a = this.$store.state.dictMessage.dictMessage.REPORT_STATE
      var b = {}
      if(a){
         a.forEach(item => {
          b[item.dictChildValue] = item.dictChildLabel
        });
        return b
      }
     return []
      
    },
    dictMessage() {
          var a = JSON.parse(JSON.stringify(this.$store.state.dictMessage.dictMessage))
          if(a.REPORT_TYPE){
            a.REPORT_TYPE.forEach(item=>{
              if(['0','1','2'].includes(item.dictChildValue)){
                item.permission = 'invalid'
              }else if(item.dictChildValue == 3){
                item.permission = 'FTO'
              }else if(item.dictChildValue == 4){
                item.permission = 'tort'
              }else if(item.dictChildValue == 5){
                item.permission = 'avoidDesign'
              }else if (item.dictChildValue == 7) {
                item.permission = 'reInvalid'
              }
            })
          }
          if(a.REPORT_TYPE){
            a.REPORT_TYPE.push(
                {
                    dictChildValue:'e',
                    dictChildLabel:'其他',
                    permission : 'reInvalid'
                }
            )
          }
          
          return a
        },
  },
  created() {},
  mounted() {
    this.getList()
  },
  methods: {
    //切换上传附件
    onChange(file, fileList) {
      if(this.form.reportFiles){
        var index3 = this.form.reportFiles.findIndex(item=>{
          return item.name+'.'+item.suffix == file.raw.name
        })
        if(index3!=-1){
        
          this.Already.push(this.form.reportFiles[index3].name)
          var index2 = fileList.reverse().findIndex(item=>{
            return item.raw.name == file.raw.name
          })
          fileList.splice(index2,1)
        }else{
          this.inFile(file, fileList)
        }
      }else{
        this.inFile(file, fileList)
      }
    this.$nextTick(()=>{
      var b = ''
      if(this.Already.length>0){
        this.Already.forEach(item=>{
          b = b+item+','
        })
        this.$alert('文件'+b+'已存在', '提示', {
          confirmButtonText: '确定',
          type:'warning',
          callback: action => {
            this.Already = []
          }
        });
        
      }
    })
    },
    //整理重复上传的文件
    inFile(file, fileList){
      var index = this.file.findIndex(item=>{
        return item.name == file.raw.name
      })
      if(index!=-1){
        this.Already.push(this.file[index].name)
        var index2 = fileList.reverse().findIndex(item=>{
          return item.raw.name == file.raw.name
        })
        fileList.splice(index2,1)
      }else{
        this.file.push(file.raw) 
      }
    },
     //删除未提交的附件
     handleRemove(file, fileList) {
      var index = this.file.findIndex(item=>{
        return item.uid == file.raw.uid
      })
      if(index!=-1){
        this.file.splice(index,1)
      }
      },
      //上传附件时查看附件内容
    handlePreview(file) {
          var item={
              name:file.name,
              suffix:'',
              downLoad:true
            }
            var index = file.raw.type.lastIndexOf('/')
            var type = file.raw.type.substring(index+1,file.raw.type.length)
            var arr = ['png','jpeg','bmp','jpg']
            if(arr.includes(type)){
              var FileUrl =  URL.createObjectURL(file.raw)
              var isPicture = 1
            }else if(type == 'pdf'){
              var FileUrl = URL.createObjectURL(file.raw)
              var isPicture = 0
            }else{
              return false
            }
            const router = this.$router.resolve({
                path: '/checkFile',
                query: {
                    row: JSON.stringify(item),
                    FileUrl: FileUrl,
                    isPicture:isPicture
                }
            })
            window.open(router.href, '_blank');
    },
    //关闭弹窗
    handleClose(){
      this.dialogVisible  =false
      this.form = {}
    },
    handleAdd(type) {
      if(type == 'e'){
        this.dialogVisible = true
      }else{

      }
    },
    cellClick(){},
    tableRowClassName({ row, rowIndex }) {
        if (rowIndex % 2 === 0) {
          return 'height-row'
        }
      },
    handleCurrentChange(val) {
        this.queryParams.current = val;
        this.getList();
    },
    getList(){
        this.$api.QueryReport(this.queryParams).then(response=>{
        if(response.code == 200){
          this.tableData = response.data
        }
      }).catch(error=>{
          this.tableData = []
      })
    },
    //查看更多
    checkMore(){
        this.$router.push({
            path: '/allReport'
        })
    },
  },
};
</script>
  
  <style lang="scss">
  .visual-project-list-drawer {
    .visual-project-list-header {
      padding: 0 !important;
    }
    .custom-table-header > th {
      background: #deedff !important;
      color: #7ba6d5 !important;
      font-weight: 400 !important;
    }
    .project-table {
      color: #000000;
    }
    .file-table .custom-table-header > th {
      background: #ebf4ff !important;
    }
    .project-status {
      font-weight: 400;
      font-size: 14px;
      text-align: center;
      color: #3084e5;
    }
    .height-row {
      background: #f5faff !important;
    }
    .report-num {
      display: inline-block;
      width: 32px;
      height: 32px;
      border-radius: 16px;
      background: #deedff;
      font-weight: bold;
      font-size: 18px;
      text-align: center;
      color: #3084e5;
      line-height: 32px;
      cursor: pointer;
    }
    .report-name {
      cursor: pointer;
    }
    .report-name:hover {
      text-decoration: underline;
      color: #1e9fff;
    }
    .el-table__expand-icon {
      display: none;
    }
  }
  </style>