<template>
  <div>
    <el-collapse v-model="activeNames" @change="handleChange" :accordion="true">
      <el-collapse-item v-for="(item,index) in tableData" :key="index" :title="item.productCategoryName?item.productCategoryName:item.companyName" :name="item.id?item.id:index">
        <el-table
            :data="item.products"
            border
            header-row-class-name="custom-table-header"
            @sort-change="sortChange"
            style="width: 100% ;padding: 20px;">
            <el-table-column label="#" align="center" v-if="sign==2">
              <template slot-scope="scope">
                <div>
                  <el-checkbox-group
                      v-model="checkList"
                      style="display: inline-block"
                    >
                      <el-checkbox
                        :label="scope.row.id"
                        @change="changeSelect(scope.row)"
                      >
                        <span></span>
                      </el-checkbox>
                    </el-checkbox-group>
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="productName" label="产品名称" sortable="custom" align="center">
                <template slot-scope="scope">
                  <div class="items">
                    <el-link v-if="sign == 1" @click="rowClick(scope.row)">{{scope.row.productName}}  </el-link>
                    <span v-else>{{scope.row.productName}} </span>
                  </div>
                </template>  
            </el-table-column>
            <el-table-column prop="marketTime" label="上市时间" sortable="custom" align="center">
              <template slot-scope="scope">
                <span>{{ scope.row.marketTime?scope.row.marketTime.slice(0,10):'' }}</span>
              </template>
            </el-table-column>
            <el-table-column prop="companyName" label="所属公司" align="center"> </el-table-column>
            <el-table-column prop="licenseRate" label="参考许可费率" sortable="custom" align="center" width="100"> </el-table-column>
            <el-table-column prop="productCategory.createPersonName" label="创建人" sortable="custom" align="center"> </el-table-column>
            <el-table-column prop="productExplain" label="产品说明" align="center"> </el-table-column>
            <el-table-column prop="productCategory.productCategoryName" label="产品类别名称"   sortable="custom" align="center"> 
              <template slot-scope="scope">
                <el-dropdown @command="categoryCommand($event,scope.row.productCategory)" placement="bottom">
                  <span class="el-dropdown-link">
                    {{ scope.row.productCategory?scope.row.productCategory.productCategoryName:'' }}<i class="el-icon-arrow-down el-icon--right"></i>
                  </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-menu>
                </el-dropdown>
              </template>
            </el-table-column>
            <el-table-column label="操作" width="180" align="center"> 
              <template slot-scope="scope">
                <el-dropdown split-button type="primary" size="small" @command="handleCommand($event,scope.row)" @click="handleEdit(scope.row)">
                  <p>编辑</p> 
                  <el-dropdown-menu slot="dropdown" style="text-align: center;">
                    <el-dropdown-item command="7">预览图片</el-dropdown-item>
                    <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 :divided="true" command="6"> <span style="color: red;">删除</span> </el-dropdown-item>
                  </el-dropdown-menu>
                </el-dropdown>
              </template>
            </el-table-column>
          </el-table>
      </el-collapse-item>
    </el-collapse>
    <el-dialog :title="title" :visible.sync="MarketVisible" append-to-body width="1200px" :close-on-click-modal="false">
      <div>
        <Marketing-Data :row="rowData"></Marketing-Data>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import MarketingData from './marketingData.vue'
import { commonMethods } from './mixins'
export default {
  props: ['tableData', 'sign','productIdList'],
  mixins:[commonMethods],
  components:{
    MarketingData,
  },
  data() {
    return {
      checkList:[],
      activeNames: [],
      rowData: {},
      title:'',
      MarketVisible:false,
    };
  },
  watch:{
    productIdList(val){
      this.checkList = val
    }
  },
  methods: {
    changeSelect(row){
      this.productIdList.push(row.id)
    },
        // 类别操作
    categoryCommand(command,row) {
      switch (command) {
        case '1'://编辑
        this.$emit('categoryEdit',row)
          break;
        case '2'://趋势图
          this.showTrend(row,1)
          break;
        case '3'://预览图片
          this.previewPictures(row)
          break;
      
        default:
          break;
      }
    },
    handleCommand(ev,row) { 
      switch (ev) {
        case '1':// 产品的架构
          this.frameworkIndex(row)
          break;
        case '2': // 产品的营销数据
          this.rowData = row
          this.title = row.productName+'营销数据'
          this.MarketVisible = true
          break;
        case '3':
          this.showTrend(row,2)
          // 产品趋势图
          break;
        case '4':
          this.getMind(row,2)
          // 产品可视化
          break;
        case '5':
          // 产品相关价值专利
          this.relatedPatentsIndex(row)
          break;
        case '6':
            this.$emit('deleteCollapse',row)
          break;
        case '7':// 图片预览
          this.previewPictures(row)
          break;
      
        default:
          break;
      }
    },
    previewPictures(row) {
      if (row.pictures && row.pictures.length>0) {
              var item = row.pictures[0]//图片每条信息
              var FileUrl = this.$p + row.pictures[0].url//每张图片的url
              var isPicture = 1
              const router = this.$router.resolve({
                    path: '/checkFile',
                    query: {
                        row: JSON.stringify(item),
                        FileUrl: FileUrl,
                        isPicture:isPicture,
                    }
                })
              window.open(router.href, '_blank');
          } else {
            this.$message.info("暂无图片，请先上传图片再进行预览！")
          }
    },
    frameworkIndex(row) {
      const router = this.$router.resolve({
        path: '/frameworkIndex',
      })
      this.$s.setSession('productRow',row)
      window.open(router.href, '_blank');
    },
    relatedPatentsIndex(row) {
      const router = this.$router.resolve({
        path: '/relatedPatentsIndex',
        query: {
          id:row.id,
          name:row.productName
        }
      })
      // this.$s.setSession('patentsProductRow',row)
      window.open(router.href, '_blank');
    },
    // 编辑
    handleEdit(row) { 
      this.$emit('editCollapse',row)
    },
    handleChange(val) {
    },
    rowClick (row) {
      this.$emit('rowClickName', row)
    },
    // 排序
    sortChange({ column, prop, order }) {
      this.$emit('sortCollapse',{ column, prop, order })
    },
  }
}
</script>

<style lang="scss" >
.el-collapse-item__header {
    padding-left: 15px;
    /* display: flex; */
    align-items: center;
    height: 48px;
    line-height: 48px;
    background-color: #FFF;
    color: #303133;
    cursor: pointer;
    border-bottom: 1px solid #EBEEF5;
    font-size: 13px;
    font-weight: 500;
    transition: border-bottom-color .3s;
    outline: 0;
}
</style>