<template>
  <!-- 产品table -->
  <div class="productTable height_100" v-DivHeight="getDivHeight">
    <el-table :data="data" header-row-class-name="custom-table-header" 
      v-if="showTable" :maxHeight="tableHeight"
      v-el-table-infinite-scroll="getList"
      :infinite-scroll-distance="10"
      :infinite-scroll-disabled="disabled"
      @sort-change="sortChange"
      border>
      <el-table-column label="#" width="60" type="index" align="center">
        <template slot-scope="scope">
          <span>{{ (scope.$index + 1) }}</span>
        </template>
      </el-table-column>

      <el-table-column v-for="item in column" :render-header=" $commonJS.renderHeaderMethods" :key="item.value" :prop="item.value" :label="item.name" align="center" sortable="custom">
        <template slot-scope="scope">
          <div v-if="['name'].includes(item.value)">
            <el-link @click="handleItem(scope.row, '2')" type="primary">
              <span  v-html="$commonJS.getColumnData(scope.row, item)"></span>
            </el-link>
          </div>
          <div v-else v-html="$commonJS.getColumnData(scope.row, item)">
          </div>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" width="150px">
        <template slot-scope="scope">
          <el-dropdown split-button type="primary" size="small" @click="handleCommand('0', scope.row)"
            @command="handleCommand($event, scope.row)">
            <span>编 辑</span>
            <el-dropdown-menu slot="dropdown" style="text-align:center">
              <el-dropdown-item command="1">预览图片</el-dropdown-item>
              <el-dropdown-item command="2">产品架构</el-dropdown-item>
              <el-dropdown-item command="3">产品的营销数据</el-dropdown-item>
              <el-dropdown-item command="4">营销数据的趋势图</el-dropdown-item>
              <el-dropdown-item command="5">专利布局可视化</el-dropdown-item>
              <el-dropdown-item command="6">商品化专利</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>

    <el-alert v-if="isflag" title="正在努力加载中..." type="success" center :closable="false" show-icon></el-alert>
    <el-alert v-if="isMore" title="没有更多啦！" type="warning" center show-icon></el-alert>
  </div>
</template>

<script>
import mixins from '../mixins'
import { getTableHeight } from '@/views/components/mixins'
import product from '../mixins/product'
export default {
  mixins:[getTableHeight,product,mixins],
  props: {
    tableData: {
      type: Array,
      default: () => {
        return []
      }
    },
    queryParams: {
      type: Object,
      default: () => {
        return {
          current:0,
          size:5
        }
      }
    },
    row:'',
    searchOption:{
      default:()=>{
        return {}
      }
    },
    column:{
      default:()=>{
        return [
          {
            value:'name',
            type:'String',
            name:'类别名称'
          },
          {
            value:'marketTime',
            type:'DateTime',
            name:'上市时间'
          },
          {
            value:'companyName',
            type:'String',
            name:'所属公司'
          },
          {
            value:'licenseRate',
            type:'String',
            name:'许可费率'
          },
          {
            value:'description',
            type:'String',
            name:'产品说明'
          },
          {
            value:'createName',
            type:'String',
            name:'创建人'
          },
          {
            value:'createTime',
            type:'DataTime',
            name:'创建时间'
          },
        ]
      }
    },
    handleMessage:'',
    //是否选择
    isChoose:false

  },
  data() {
    return {
      disabled:false,
      isMore:false,
      isflag:false,
      // 排序数组
      sort: [
        {
          "orderBy": "createTime",
          "orderType": 1
        }
      ],
      //事件类型及所选
      action:{
        type:'',//1表示删除，2表示其他，3表示新增
        id:''
      },
      data:JSON.parse(JSON.stringify(this.tableData))
    }
  },
  watch: {
    handleMessage(val){
      if(val){
        this.updateData()
      }
    }
  },
  mounted() {
    if(!this.row){
      this.disabled = true
    }else{
      this.disabled = false
      // this.getList()
    }
  },
  methods: {

    //更新数据
    updateData(){
      if(this.action.type == 1){
        if(this.data.length == 1){
          return false
        }
        var startIndex = this.data.findIndex(item=>{
              return item.id == this.action.id
          })
          this.data.splice(startIndex,1)
          var str = this.$commonJS.objectToString(this.searchOption) 
          let params = {
            ...this.queryParams,
            searchQuery:(str?(str+' AND '):'') + `category_id=${this.row.id}`,//检索条件
            orderDTOList: this.sort,//排序
          }
        this.getList2(params,1)
      }else if(this.action.type == 2){
        let params = {
          ...this.queryParams,
          searchQuery:`product_id=${this.action.id}`,//检索条件
        }
        this.getList2(params,2)
      }else{
        if(this.handleMessage != this.row.id){
          return;
        }
        this.queryParams.current = 0
        this.disabled = false
        this.data.splice(0)
        this.getList()
      }
    },

    getList2(params,type){
      
      this.$api.queryProduct(params).then(res => {
        if (res.code == 200) {
          if(type == 1){
            var startIndex = (params.current-1)*size
            var endIndex = this.data.length
            var len = endIndex - startIndex
            this.data.splice(startIndex,len,...res.data.data)
            this.queryParams.total = res.data.total
          }else if(type == 2){
            var startIndex = this.data.findIndex(item=>{
              return item.id == this.action.id
            })
            this.data.splice(startIndex,1,...res.data.data)
          }
          
        }
      }).catch(err => {
      })
    },
    // 编辑下拉菜单
    handleCommand(option, row) {
      if(option == 7){
        this.action={
          type:'1',
          id:row.id
        } 
        this.deletes(row)
        return false
      }else{
        this.action={
          type:'2',
          id:row.id
        } 
      }
      
      this.$emit('optionsSon',{option,row})
    },
    //获取数据
    getList() {
      if (!this.row) return;
      if (this.disabled) return;
      if (this.queryParams.current * this.queryParams.size >= this.queryParams.total) {
        this.isMore = true
        this.disabled = true
        setTimeout(() => {
          this.isMore = false;
          this.isFlag = false
        }, 1000)
      }
      this.queryParams.current += 1
      var str = this.$commonJS.objectToString(this.searchOption) 
      let params = {
        ...this.queryParams,
        searchQuery:(str?(str+' AND '):'') + `category_id=${this.row.id}`,//检索条件
        orderDTOList: this.sort,//排序
      }
      this.isMore = false;
      this.isFlag = true;
      this.$api.queryProduct(params).then(res => {
        if (res.code == 200) {
          this.data.push(...res.data.data)
          this.queryParams.total = res.data.total
        }
      }).catch(err => {
      })
      setTimeout(() => {
        this.isMore = false;
        this.isFlag = false
      }, 1000)
    },
     // 排序方法
     sortChange({ column, prop, order }) {
      //如需要多个字段排序，则不需要清空
      var params = {
        sort:this.sort,
        column,
        prop,
        order,
      }
      this.sort = this.$commonJS.getSortData(params)
      this.queryParams.current = 0
      this.disabled = false
      this.data.splice(0)
      this.getList()
    },
  },
}
</script>

<style lang="scss">
.productTable{
  .custom-table-header > th {
    background-color: #f8f8f9 !important;
    color: #515a6e;
    height: 40px;
    font-size: 13px;
  }
}
</style>