<template>
    <div style="background:white;">
        <div style="height:50px">
            <div style="display:inline-block;margin-left:20px">
                <el-dropdown size="medium" style="margin-top:10px;margin-right:20px">
                <el-button type="primary" size="small" >
                    创建报告<i class="el-icon-arrow-down el-icon--right"></i>
                </el-button>
                   <el-dropdown-menu slot="dropdown" style="margin-top:0px" v-if="dictMessage.REPORT_TYPE">
                    <!-- 遍历按钮 -->
                      <el-dropdown-item v-for="item in dictMessage.REPORT_TYPE" :key="item.dictChildLabel"  @click.native="handleAnalyse(item.dictChildValue)">{{item.dictChildLabel}}</el-dropdown-item>
                    </el-dropdown-menu>
                </el-dropdown>

                <el-input v-model="queryParams.signPatentNo" placeholder="请输入标的专利" style="margin-left:100px; width: 200px;"  size="small"></el-input>
                <el-button type="primary" @click="getList" style="margin-left: 10px;" size="small">🔍</el-button>
            </div>
            <!-- <div> -->
              
            <!-- </div> -->
         <div class="right">
          <!-- <el-button type="warning" size="small" style="display: inline-block;margin-right: 10px;" @click="handleField">显示栏位管理</el-button> -->
          <div style="margin-top: 10px;margin-right: 10px;display: inline-block;">
            <el-button size="small" type="primary" @click="reportVisual" style="margin-right:10px">报告可视化</el-button>
            <el-button-group>
              <el-button :type="queryShowType === '0' ? 'primary' : ''" @click="onChange2('0')" size="small">列表 </el-button>
              <el-button :type="queryShowType === '1' ? 'primary' : ''" @click="onChange2('1')" size="small">卡片</el-button>
            </el-button-group>
          </div>  
        </div> 
        </div>
 
        <el-main class="workspace-main" v-loading="loading">
        <component :is="viewType" :data="dataList" :state="state" :group="queryParams.group" :params="queryParams"  @option="handleOption" @sort="handleSort" @getRow="getRow"></component>
        <div style="text-align: center;">
          <el-pagination
              background
              layout="total,sizes, prev, pager, next, jumper"
              :current-page.sync="queryParams.current"
              :page-sizes="pageSize"
              :page-size.sync="queryParams.size"
              @current-change="handleCurrentChange"
              @size-change="handleSizeChange"
              :total="total">
          </el-pagination>
        </div>
      </el-main>
      <!-- 弹窗创建报告 -->
      <CreateReport ref="ReportForm" @getList="isGetList"></CreateReport>
      <el-dialog width="1100px" title="设置" :visible.sync="setVisible" :before-close="close">
          <Project-Field :reportId="reportId"></Project-Field>
    </el-dialog>
    <el-dialog width="1000px" title="选择模板" :visible.sync="reportTemplate" :before-close="close1" >
      <div  v-loading="loadingTemplate"
    element-loading-text="报告导出中"
    element-loading-spinner="el-icon-loading"
   >
        <Report-Template :reportType="reportType" @getReportTemplateId="getReportTemplateId"></Report-Template>
          <div slot="footer" class="dialog-footer" style="display: flex;justify-content: flex-end;">
            <el-button @click="close1">取 消</el-button>
            <el-button type="primary" @click="submitExport" :loading="btnLoading">确 定</el-button>
          </div>
      </div>
          
    </el-dialog>

    <project-file-drawer  ref="projectFileDrawer" />
    </div>
</template>

<script>
import ReportTabel from './components/Tabel';
import ReportCard from './components/Card'
import CreateReport from './components/CreateReport.vue'
import ProjectField from '@/views/layout/components/field.vue';
import ReportTemplate from './components/ReportTemplate.vue';
import ProjectFileDrawer from "./components/File.vue";
import { downLoad2 } from "@/utils";
export default {
  components: {
    ReportTabel,
    ReportCard,
    CreateReport,
    ProjectField,
    ReportTemplate,
    ProjectFileDrawer
  },
  data() {
    return {
     
      btnLoading:false,
      reportTemplate:false,
      setVisible:false,
      dataList: [],
      queryShowType: '0',
      viewType: 'ReportTabel',
      // state: ["开卷审核中","创建中", "处理中", "完成","取消开卷","补资料中"],
      queryParams: {
        group: [],
        size: 10,
        current: 1,
        signPatentNo:"",
      },
      pageSize:[10,"全部"],
      total: 0,
      loading: false,
      showDialog: false,
      loadingTemplate: false,
      reportId: "",
      reportType:'',
      reportTemplateId:''
    }
  },
  computed: {
    dictMessage() {
      // console.log(111,this.$store.state.dictMessage.dictMessage);
      return this.$store.state.dictMessage.dictMessage
    },
    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 []
      
    }
  },
  mounted() {
    this.getList()
  },
  methods: {
    handleSizeChange(val) {
      // this.queryParams.size = null
      // this.queryParams.current = null
      this.getList()
        // console.log(`每页 ${val} 条`);
      },
    getReportTemplateId(val){
      this.reportTemplateId = val
    },
    close1(){
      this.reportType = ''
      this.reportTemplateId = ''
      this.reportTemplate = false
    },
    submitExport(){
      if (this.reportTemplateId) {
        this.loadingTemplate=true
        var a = {
          reportId : this.reportId,
          templeId :this.reportTemplateId
        }
        this.$api.exportReport(a).then(response => {
          if (response.code == 200) {
            this.$message.success('导出成功')
            downLoad2(response.data)
            this.reportType = ''
            this.reportTemplateId = ''
            this.reportTemplate = false
            this.loadingTemplate=false
            console.log(response.data)
          } else{
            this.$message.success('导出失败,请重试')
            this.loadingTemplate=false
          }
        }).catch(error => {
          this.$message.success('导出失败,请重试')
            this.loadingTemplate=false
        })
      }else{
        this.$alert('请选择报告模板', '提示', {
          confirmButtonText: '确定',
          callback: action => {
            
          }
        });
      }
      
    },
    //关闭弹窗
    close(){
      this.setVisible = false
    },
    //获取选中行参数
    getRow(row){
      row.dictMessage = this.dictMessage
      this.$s.setSession('row', row)
      switch(row.type){
        case 0:
        case 1:
        case 2:
          var router = this.$router.resolve({
            name: 'rDetails' ,
            // query: {
            //   row:JSON.stringify(row)
            //   // reportId:row.id,
            //   // signPatentNo:row.signPatentNo,
            //   }
          })
          window.open(router.href, '_blank');
          break;
        case 3:
         
        case 4:
          var router = this.$router.resolve({
            name: 'FTOrDetails' ,
          })
          window.open(router.href, '_blank');
          break;
        case 5:
        case 6:
      }
      


    },
    // 创建报告：无效分析等点击事件
    handleAnalyse(id) {
      var form = {
        type:id,
      }
      this.$refs.ReportForm.open(form)
    },
    handleOption({ option, row }) {
      console.log(this.dataList)
      switch (option) {
        case '0':
          this.handleImportPatent(row)
          break
        case '1'://导出报告
          this.exportReport(row)
          break
        case '2'://报告文档
          this.handleFile(row)
          break
        case '5'://拆分特征
          this.handleDetails(row)
          break
        case '3'://自定义字段
          this.handleFields(row)
          break
        case '4'://任务分配
          this.handleTask(row)
          break
        case '6'://导入专利
          this.handleImportPatent(row)
          break
        case '7':
            this.$confirm('此操作将永久删除该报告, 是否继续?', '提示', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning'
            }).then(() => {
              this.handleDelete(row)
              this.$message.success("删除报告成功")
            }).catch(() => {
              this.$message.info("已取消删除")         
            });
          break
        case 'e':
          this.handleEdit(row)
          break
      }
    },
    handleFile(row){
      this.$refs.projectFileDrawer.open(row.id,1)
    },

    handleImportPatent(row) {
      this.$router.push({
        path: '/import',
        query: {
          id: row.id
        }
      })
    },
    exportReport(row){
      console.log(row)
      this.reportId = row.id
      this.reportType = row.type
      this.reportTemplate = true
    },
    handleDetails(val){
      console.log("row", val);
      this.$s.setSession('reportMessage1',val)
      switch(val.type){
        case 0:
        case 1:
        case 2:
          var routerReport = this.$router.resolve({
            path: "/InvalidIndex",
            query: {
              id: val.id,
              patentNo:val.signPatentNo,
              splitType:val.splitType,
              splitBy: val.splitBy,
              personId:val.personId,
            }
          })
          window.open(routerReport.href, '_blank');//open方法中添加_blank属性打开新窗口页面
          break;
        case 3:
          var routerReport2 = this.$router.resolve({
              path: "/FTOIndex",
              query: {
                id: val.id,
                patentNo:val.signPatentNo,
                personId:val.personId,
              }
            })
            window.open(routerReport2.href, '_blank');//open方法中添加_blank属性打开新窗口页面
            break;
        case 4:
        var routerReport3 = this.$router.resolve({
              path: "/tortIndex",
              query: {
                id: val.id,
                patentNo:val.signPatentNo,
                personId:val.personId,
              }
            })
            window.open(routerReport3.href, '_blank');//open方法中添加_blank属性打开新窗口页面
            break;
        case 5:
        var routerReport4 = this.$router.resolve({
              path: "/avoid",
              query: {
                id: val.id,
                patentNo: val.signPatentNo,
                splitType:val.splitType,
                splitBy: val.splitBy,
                personId:val.personId,
              }
            })
            window.open(routerReport4.href, '_blank');//open方法中添加_blank属性打开新窗口页面
            break;
        case 6:

      }
     
      
      
    },
    handleDelete(row) {
      this.$api.deleReport({ id: row.id }).then(res => {
        this.getList()
      })
    },
    handleFields(row) {
      console.log(row);
      this.reportId=row.id
      this.setVisible = true
      //  this.$api.listPatentField().then(res=>{})
    },
    handleTask(row) {
      // console.log(row);
      let a=this.$router.resolve({
        path: "/SelectedPatent",
        query: {
          reportId: row.id,
          personId:row.personId,
        }
      })
      this.$s.setSession('reportMessage',row)
      window.open(a.href,"_blank")
    },
    handleEdit(row) {
      console.log(row)
      this.$refs.ReportForm.open(row)
    },
    handleSort(sort) {
      console.log(sort)
      this.queryParams.orderBy = sort.prop
      this.queryParams.orderDesc = sort.order
      // this.queryParams.sort = { ...sort }
      this.getList()
    },
    handleCurrentChange(val) {
      this.queryParams.current = val;
      this.getList();
    },
    onChange() {
      this.queryParams.current = 1
      this.getList()
      this.handleChangeView()
    },
    onChange2(type) {
      this.queryShowType = type
      this.onChange()
    },
    handleChangeView() {
      let view = [
        ['ReportTabel', 'ReportCard'],
      ]
      if (this.queryParams.group.length === 0) {
        // console.log(view[0][this.queryShowType],'777777');
        this.viewType = view[0][this.queryShowType]
      } else {
        this.viewType = view[1][this.queryShowType]
        // console.log(this.viewType)
      }
    },
    isGetList(val){
      if(val == true){
        this.getList()
      }
    },
    getList() {
      this.loading = true
      this.$api.QueryReport(this.queryParams).then(response=>{
        if(response.code == 200){
          this.pageSize = [10]
          this.dataList = response.data
          // if(!this.queryParams.size){
          //   this.queryParams.current = 1
          //   this.queryParams.size = this.total = response.pageColumn.total
          // }
          this.pageSize.push(response.pageColumn.total)
          this.total = response.pageColumn.total
           this.loading = false
        }
      })
     
    },
    reportVisual() { },
  },
}
</script>

<style lang="scss" scoped>
.right{
    float: right;
}
</style>