<template>
  <div class="customTable">
    <!-- <el-button @click="fenBtn" type="primary" style="float: right;margin-bottom: 10px;">分配任务</el-button> -->
    <el-container>
      <el-main class="main" style="">
         <el-table
            border
            style="width: 100%;"
            ref="table"
            class="table"
            :height="height - 135"
            :data="tableData"
            v-loading="loading"
            header-row-class-name="custom-table-header"
            :default-sort="{ prop : 'date', order: 'descending' }"
            @sort-change="sortChange">
            <el-table-column prop="patentNo" sortable label="专利号" width="200" align="center">
              <template slot-scope="scope">
                <div>
                  <el-link type="primary"  @click="toPatentDetails(scope.row.patentNo)">{{scope.row.patentNo}}</el-link>
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="SysOrder" label="重要度" sortable width="100" align="center" v-if="reportMessage && [0,1,2].includes(reportMessage.type)">
              <template slot-scope="scope">
                <div>
                  <span v-if="scope.row.SysOrder">D</span><span>{{ scope.row.SysOrder}}</span>
                </div>
              </template>
            </el-table-column>
            <el-table-column v-for="column in fieldsArr" :label="column.name" :key="column.key" show-overflow-tooltip align="center">
              <template slot-scope="scope">
                <div style="" v-for="data in getColumnValue(scope.row, column)">
                  <template v-if="column.key === 'name'">
                      <span v-html="getViewDom2(scope.row, 'name')"></span>
                      <br>
                      <el-link type="primary" @click.native="handleChange(scope.row, 'name')">
                        <span v-if="!scope.row.change">切换译文</span>
                        <span v-else>切换原文</span>
                      </el-link>
                    </template>
                    <template v-else-if="column.key === 'abstractStr'">
                      <span v-html="getViewDom2(scope.row, 'abstractStr')"></span>
                      <br>
                      <el-link type="primary" @click.native="handleChange(scope.row, 'abstractStr')">
                        <span v-if="!scope.row.change2">切换译文</span>
                        <span v-else>切换原文</span>
                      </el-link>
                    </template>
                  <template v-else>
                    <span v-html="getViewDom(data)"></span>
                  </template>
                </div>
              </template> 
            </el-table-column>
            <!-- <el-table-column prop="name" sortable label="专利标题"  width="300" align="center"></el-table-column>
            <el-table-column prop="applicationDate" sortable label="申请日"  width="150" align="center"></el-table-column>
            <el-table-column prop="publicDate" sortable label="公开日"  width="150" align="center"></el-table-column>
            <el-table-column prop="applicant" sortable label="权利人"  width="300" align="center">
              <template slot-scope="scope">
                <div>
                  <p v-for="item in scope.row.applicant.filter(a => a.dataType === 1)">{{ item.name }}</p>
                </div>
              </template>
            </el-table-column> -->
            <!-- <el-table-column prop="state" label="状态" sortable  align="center"></el-table-column> -->
            <!-- <el-table-column prop="simpleStatus" label="状态" align="center" > -->
              <!-- <template slot-scope="scope">
                  <span>{{state[scope.row.status]}}</span>
              </template> -->
            <!-- </el-table-column> -->
				  </el-table>
          
      </el-main>
      <el-footer class="footer" style="">
        <div style="text-align: center;">
            <el-pagination background layout="total, prev, pager, next, jumper" :current-page.sync="queryParams.current"
              :page-size.sync="queryParams.size" @current-change="handleCurrentChange" :total="queryParams.total">
            </el-pagination>
        </div>
      </el-footer>
    </el-container>
  </div>
</template>

<script>
import { PatentDetails } from '@/views/workspace/folder/components/mixins';
// import { Contrast } from '@/views/task/components/mixins';
import { PatentViewFieldJs, } from "@/views/report/task/components/PatentViewField";
import { changeTranslation, patentKeywordsHighlight} from '@/views/workspace/folder/components/mixins'
export default {
  mixins:[PatentDetails,PatentViewFieldJs,changeTranslation, patentKeywordsHighlight],
  props:["fieldsArr","activeName","reportId","onChangesIn",'type','signPatentNo',"taskStatus","formS","taskFeilSure",'taskSources','reportMessage',"height"],//queryParams
  data() {
    return {
      reportMessage1:this.reportMessage,
      tableData: [],
      state:[],
      loading: false,
      queryParams: {
        signPatentNo:this.signPatentNo,
        // taskId: this.taskId,
        reportName:this.reportMessage.name,
        reportId: this.reportId,
        applicationName: "",//申请人
        obligeeName: "",//权利人
        patentNo:"",
        applicationNo:"",
        numberIpc:"",
        numberCpc:"",
        numberUpc:"",
        patentName:"",
        abstractStr:"",
        filedOptions: [],//数组，用来存放自定义字段勾选项进行筛选
        taskStatus:"3",
        current: 1,
        size: 10,
        total: 0,
        type: this.type,
        // height:''
      }
    }
  },
  created() {
  },
  mounted() {
    this.getList();
  },
  computed: {
    formTed() {
      return JSON.stringify(this.formS)
    }
  },
  updated(){
    this.$refs.table.doLayout()
  },
  methods: {
    //排序
    sortChange({ column, prop, order }) {
      if (!order) {
        return false
      }
      const o = {
        'descending': 'desc',
        'ascending': 'asc',
      }
      this.queryParams.orderType =  o[order]
      this.queryParams.orderItem = prop
      this.queryParams.current=1
      this.getList()
    },
    handleCurrentChange(val) {
      this.queryParams.current=val
      this.getList()
    },
    getList() {
      this.loading=true
      // 需要根据报告id查询所有对比文件
      this.$api.getSureCompareFile(this.queryParams).then(res => {
        // console.log(res);
        if (res.code == 200) {
          this.queryParams.total =  res.data.total
          this.tableData = res.data.records
          this.loading=false
        }
      }).catch(error=>{
        this.loading=false
      })
    },
    // fenBtn() {
    //   // let a=this.$router.resolve({
    //   //   path: "/AssignTasks",
    //   //   query: {
    //   //     // reportId:row.id
    //   //   }
    //   // })
    //   // window.open(a.href,"_blank")
    // }
  },
  watch: {
    activeName(val){
      this.queryParams.taskStatus = this.activeName=='first'?0:1
      this.getList()
    },
    onChangesIn(val) {
      this.queryParams.filedOptions=val
      this.getList()
    },
    taskStatus(val) {
      this.queryParams.taskStatus = val
      this.getList();
    },
    formTed(val) {
      let value=JSON.parse(val)
      if (Object.keys(value).length!=0) {
        for (let key in value) {
          this.queryParams[key]=value[key]
        }
        this.getList()
      } else {
        this.getList()
      }
    },
    taskFeilSure(val) {
      if (val) {
        this.$emit("taskFeilParams",this.queryParams)
      }
    },
    taskSources(val){
      this.queryParams.taskSources = val.taskSources
      this.queryParams.notAssignTypes = val.notAssignTypes
      this.getList()
    }

  }
}
</script>

<style lang="scss">
.customTable{
  .el-table .cell.el-tooltip{
    white-space: break-spaces; 
  }
  .el-footer{
    border: none;
  }
  .el-main{
    padding: 0px;
  }
}
</style>