<template>
  <div>
    <el-table :data="data" border ref="table" :height="tableHeight - 25" header-row-class-name="custom-table-header" @sort-change="sortChange">
      <el-table-column label="#" align="center" width="50px">
        <template slot-scope="scope">
          <span>{{ (scope.$index + 1) + ((params.current - 1) * params.size) }}</span>
        </template>
      </el-table-column>
      <el-table-column label="名称"  align="center" prop="name" sortable>
        <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" sortable>
        <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="应用场景" width="160" :show-overflow-tooltip="true" align="center" prop="scenarioNames" sortable>
        <template slot-scope="scope">
            <div v-for="item in scope.row.scenarioNames">{{item}}</div>
        </template>
      </el-table-column>
      <el-table-column label="创建人" prop="createPersonName" sortable align="center"> </el-table-column>
      <el-table-column label="负责人" prop="personName" sortable align="center"> </el-table-column>
      <el-table-column label="客户" prop="clientName" sortable align="center"> </el-table-column>
      <el-table-column label="技术/产品" prop="proTec" sortable align="center"> </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 label="创建时间" prop="createTime" sortable width="200" align="center"> </el-table-column>
  
      <el-table-column label="操作" align="center" width="200px">
        <template slot-scope="scope">
          <el-dropdown @command="handleCommand($event, scope.row)" split-button type="primary" size="small"  @click="handleEdit(scope.row)">
            <p >编辑</p>
            <el-dropdown-menu slot="dropdown" class="text-align_center">
              <!-- <el-dropdown-item command="0">分享</el-dropdown-item> -->
              <el-dropdown-item command="1" v-if="[2,3].includes(scope.row.status)">导出报告</el-dropdown-item>
              <el-dropdown-item command="2" v-if="[2,3].includes(scope.row.status)">报告文档</el-dropdown-item>
              <el-dropdown-item command="3" v-if="[1,2].includes(scope.row.status)">自定义字段</el-dropdown-item>
              <el-dropdown-item command="4" v-if="[2,3].includes(scope.row.status)&& scope.row.type != 4">任务分配</el-dropdown-item>
              <el-dropdown-item command="5" v-if="[1].includes(scope.row.status) || (scope.row.type == 4 && [1,2,3].includes(scope.row.status))">{{!([3,4].includes(scope.row.type))?'拆分特征':'产品信息录入'}}</el-dropdown-item>
              <el-dropdown-item command="6" v-if="[2,3].includes(scope.row.status)&& scope.row.type != 4">导入 </el-dropdown-item>
              <el-dropdown-item command="7" divided style="color: red;">删除 </el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </template>
      </el-table-column>
    </el-table>
    <!-- 导入文件弹窗 -->
    <!-- <ImportFile ref="ImportFileDialog"></ImportFile> -->
  </div>
</template>

<script>
// import ImportFile from "@/views/components/common/ImportFile.vue"
import { PatentDetails } from '@/views/components/common/mixins';
export default {
  props: ['data', 'params', 'state'],
  mixins:[PatentDetails],
  components: {
    // ImportFile
  },
  data() {
    return {
      tableHeight: null,
    }
  },
  watch:{
    data() {
      this.$nextTick(() => {
        this.setHeight()
      })
    }
  },
  methods: {
    setHeight() {
      const offsetTop = window.innerHeight - this.$refs.table.$el.offsetTop - 220
      const body = document.querySelector('.el-table__body')
      if (!body) {
        return false
      }
      const offsetBodyHeight = body.offsetHeight
      console.log(offsetTop,offsetBodyHeight)
      if (this.data.length && offsetBodyHeight < offsetTop) {
        this.tableHeight = offsetBodyHeight + 75
      } else if (!this.data.length) {
        this.tableHeight = null
      } else {
        this.tableHeight = offsetTop
      }
    },
    //编辑报告
    handleEdit(row) {
      this.$emit('option', { option: 'e', row })
    },

    tableName(row) {//点击名称进入标的专利详情
      this.$emit('getRow',row)
    },

    //按钮功能
    handleCommand(command, row) {
      this.$emit('option', { option: command, row })
    },

    sortChange({ column, prop, order }) {
      console.log(order)
      if (!order) {
        this.sortData('create_time', 'desc')
        return false
      }
      const o = {
        'descending': '1',
        'ascending': '0',
      }
      let orderBy = prop
      // switch (prop) {
      //   case 'clientName':
      //     orderBy = 'clientId'
      //     break
      //   case 'createPersonName':
      //     orderBy = 'createPersonId'
      //     break
      //   case 'scenarioNames':
      //     orderBy = 'scenarioList'
      //     break
      //   case 'personName':
      //     orderBy = 'personId'
      //     break
      //   case 'proTec':
      //     orderBy = 'proTec'
      //     break
      //   default:
      //     orderBy = prop
      // }
      this.sortData(orderBy, o[order])
    },
    sortData(prop, order) {
      this.$emit('sort', { prop, order })
    },
  },
}
</script>

<style lang="scss" scoped>

</style>