<template>
  <div style="background: white;height: 100%;">
    <!-- <div style="display: flex;justify-content: space-between;align-items: center;margin-bottom: 20px;">
      <div>
        <el-input v-model="queryParams.productCategoryName" size="small" placeholder="请输入类别名称" style="width: 200px;margin-right: 10px;"></el-input>
        <el-input v-model="queryParams.productName" size="small" placeholder="请输入产品名称" style="width: 200px;margin-right: 10px;"></el-input>
        <el-input v-model="queryParams.companyName" size="small" placeholder="请输入产品所属公司名称" style="width: 200px;margin-right: 10px;"></el-input>
          <el-button type="primary" size="small" @click="getList2">查询</el-button>
          <el-button type="primary" size="small" @click="handleAdd" v-if="(!patentNo||sign==2) && $permission('/workspace/product/addCategory')">新增类别</el-button>
          <el-button type="primary" size="small" @click="addProduct" v-if="patentNo&&sign!=2">添加</el-button>
          <el-dropdown @command="handleCommandAdd" v-if="!patentNo||sign==2">
            <el-button type="primary" size="small">
              新增产品<i class="el-icon-arrow-down el-icon--right"></i>
            </el-button>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item command="1">新增本公司产品</el-dropdown-item>
              <el-dropdown-item command="2">新增外公司产品</el-dropdown-item>
            </el-dropdown-menu>
         </el-dropdown>
         <el-button type="primary" size="small" @click="submitProduct" v-if="sign==2" style="margin-left:10px">保存</el-button>
      </div>
      <div style="display: flex;">
        <span style="margin-right: 10px;">分组查询：</span>
        <el-checkbox-group v-model="checkList"  @change="setMealSelect">
          <el-checkbox  label="product_category_id">类别</el-checkbox>
          <el-checkbox  label="company_name">公司</el-checkbox>
        </el-checkbox-group>
      </div>
    </div> -->

    <el-container>
      <el-header>
        <div>
          <mySearch style="width:500px" :SearchFields="searchFiled" @search="search" :searchValue="searchOption"></mySearch>  
        </div>
        <div style="display:flex;margin-right:10px">
          <div>
            <span>分组查询：</span>
            <el-select v-model="queryParams.groupBy" clearable size="small" @change="onChange" style="width:200px">
              <el-option label="类别" value="product_category_id"></el-option>
              <el-option label="公司" value="company_name"></el-option>
            </el-select>
          </div>
          <el-dropdown trigger="click" split-button type="primary" size="small" class="margin-left_10">
            <P @click="handleAdd" v-disabled="!((!patentNo||sign==2) && $permission('/workspace/product/addCategory'))">新增类别</P>
            <el-dropdown-menu slot="dropdown" class="text-align_center">
              <el-dropdown-item>
                <el-dropdown @command="handleCommandAdd" trigger="hover" placement="right-start" v-if="!patentNo||sign==2">
                  <span>
                    新增产品
                  </span>
                  <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item command="1">新增本公司产品</el-dropdown-item>
                    <el-dropdown-item command="2">新增外公司产品</el-dropdown-item>
                  </el-dropdown-menu>
              </el-dropdown>
              </el-dropdown-item>
              <el-dropdown-item @click.native="addProduct" v-if="patentNo&&sign!=2">添加</el-dropdown-item>
              <el-dropdown-item @click.native="submitProduct" v-if="sign==2">保存</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </div>
      </el-header>
      <el-main id="patent-list-container" class="main">
        <div>
           <!-- 表格 -->
          <el-table
          v-if="!isCollapse"
            :data="tableData"
            border
            header-row-class-name="custom-table-header"
            @sort-change="sortChange"
            style="width: 100%">
            <el-table-column label="#" align="center" v-if="sign == 2">
              <template slot-scope="scope">
                <div>
                  <el-checkbox-group
                      v-model="productIds"
                      style="display: inline-block"
                    >
                      <el-checkbox
                        :label="scope.row.id"
                      >
                        <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>
                    <el-link v-else @click="handleCommand('details',scope.row)">{{scope.row.productName}} </el-link>
                  </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="180"> </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-item command="4">分类架构</el-dropdown-item>
                  <el-dropdown-item command="5">专利布局可视化</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>
          <!-- 折叠面板 -->
          <productCollapse v-else :tableData="tableData" :sign="sign" :productIdList.sync="productIds" @editCollapse="handleEditCollapse" @deleteCollapse="deleteCollapse" @sortCollapse="sortCollapse" @categoryEdit="categoryEdit" @rowClickName="rowClick"></productCollapse>
        </div>
      </el-main>
      <el-footer class="workspace-content-patent-page">
        <el-pagination
          background
          layout="total,prev, pager, next,jumper"
          :total="total"
          @current-change="handleCurrentChange"
          :current-page="queryParams.current" :page-size="queryParams.size">
        </el-pagination>
      </el-footer>
    </el-container>
    <!-- 新增、编辑产品弹窗 -->
    <el-dialog
      :title="title"
      :visible.sync="visible"
      width="500"
      :close-on-click-modal="false"
      append-to-body
      :before-close="close">

      <el-form :rules="rules" ref="productForm" :model="productForm" label-width="110px">
        <el-form-item label="所属产品类别 " prop="productCategoryId" >
          <div class="selectButton">
            <el-select v-model="productForm.productCategoryId" @change="productFormSelect" filterable placeholder="请选择所属产品类别" clearable >
              <el-option
                v-for="item in options"
                :key="item.id"
                :label="item.productCategoryName"
                :value="item.id">
              </el-option>
            </el-select>
            <el-button @click="handleAdd"><i class="el-icon-plus"></i></el-button>
          </div>
        </el-form-item>
        <el-form-item label="产品名称 " prop="productName">
          <el-input v-model="productForm.productName" placeholder="请输入产品名称"></el-input>
        </el-form-item>
        <el-form-item label="上市时间 " prop="marketTime">
          <el-date-picker
            v-model="productForm.marketTime"
            type="date"
            placeholder="请选择上市时间"
            value-format="yyyy-MM-dd"
            style="width: 100%;">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="所属公司 " prop="companyName">
          <el-input v-model="productForm.companyName" :disabled="productForm.tenantId?true:false" placeholder="请输入所属公司"></el-input>
        </el-form-item>
       
        <el-form-item label="参考许可费率 " prop="licenseRate">
          <el-input v-model="productForm.licenseRate" placeholder="请输入参考许可费率(参考许可费率介于0-1之间)"></el-input>
        </el-form-item>
        <el-form-item label="图片 ">
          <el-upload ref="upload"  action="#" :auto-upload="false"  :on-change="handleChange"  list-type="picture" :show-file-list="false">
          <span v-if="productForm.pictures && productForm.pictures.length>0" class="avatar">
            <span class="deleteImg">
             <span> 
              <i class="el-icon-zoom-in" @click.stop="handlePictureCardPreview"></i>
              <i class="el-icon-delete" @click.stop="handleRemove"></i></span>
            </span>
            <el-image ref="image" style="width:100%;height: 100%;" :src="productForm.pictures[0].id? $p + productForm.pictures[0].url:productForm.pictures[0].url" :preview-src-list="productForm.pictures?productForm.pictures.map(item=>{return item.id? $p + item.url:item.url}):[]"></el-image>
          </span>
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
        </el-form-item>
        <el-form-item label="产品说明 ">
          <el-input v-model="productForm.productExplain" type="textarea" placeholder="请输入产品说明"></el-input>
        </el-form-item>
      </el-form>

      <span slot="footer" class="dialog-footer">
        <el-button @click="close">取 消</el-button>
        <el-button type="primary" @click="sure">确 定</el-button>
      </span>
    </el-dialog>
    <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>
    <!-- 新增、编辑类别弹窗 :close-on-click-modal="false"点击遮罩层阻止弹窗关闭 -->
    <el-dialog
      :title="categoryTitle"
      :visible.sync="categoryVisible"
      width="500"
      append-to-body
      :close-on-click-modal="false"
      :before-close="categoryClose">
      <el-form :rules="categoryRules" ref="categoryForm" :model="categoryForm" label-width="110px">
        <el-form-item label="名称 " prop="productCategoryName">
          <el-input v-model="categoryForm.productCategoryName" placeholder="请输入名称"></el-input>
        </el-form-item>
        <el-form-item label="参考许可费率 " prop="licenseRate">
          <el-input v-model="categoryForm.licenseRate" placeholder="请输入参考许可费率(参考许可费率介于0-1之间)"></el-input>
        </el-form-item>
        <el-form-item label="图片 ">
          <el-upload ref="upload"  action="#" :auto-upload="false"  :on-change="handleChange1"  list-type="picture" :show-file-list="false">
            <span v-if="categoryForm.pictures&&categoryForm.pictures.length>0" class="avatar">
              <span class="deleteImg">
                <span> 
                  <i class="el-icon-zoom-in" @click.stop="handlePictureCardPreview"></i>
                  <i class="el-icon-delete" @click.stop="handleRemove"></i>
                </span>
              </span>
                <el-image ref="image" style="width:100%;height: 100%;" :src="categoryForm.pictures[0].id?$p + categoryForm.pictures[0].url:categoryForm.pictures[0].url" :preview-src-list="categoryForm.pictures?categoryForm.pictures.map(item=>{return item.id? $p + item.url:item.url}):[]"></el-image>
            </span>
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>
        <el-form-item label="备注 ">
          <el-input v-model="categoryForm.remark" type="textarea" placeholder="请输入备注"></el-input>
        </el-form-item>
      </el-form>

      <span slot="footer" class="dialog-footer">
        <el-button @click="categoryClose">取 消</el-button>
        <el-button type="primary" @click="categorySure">确 定</el-button>
      </span>
    </el-dialog>
    <el-dialog
      title="产品清单"
      :visible.sync="ProductVisible"
      width="1300px"
      append-to-body
      :close-on-click-modal="false"
      :before-close="ProductClose">
      <div>
        <productDialog :sign="2" :patentNo="patentNo" @submit="getSubmitStatus" v-if="ProductVisible"></productDialog>
      </div>
      
      <!-- <span slot="footer" class="dialog-footer">
        <el-button @click="categoryClose">取 消</el-button>
        <el-button type="primary" @click="categorySure">确 定</el-button>
      </span> -->
    </el-dialog>
  </div>
</template>

<script>
import productDialog from './product.vue'
import MarketingData from './marketingData.vue'
import productCollapse from './productCollapse.vue'
import { commonMethods } from './mixins'
export default {
  name:'productDialog',
  props:['clientName','sign','patentNo','productName'],
  components:{
    MarketingData,
    productCollapse,
    productDialog
  },
  mixins:[commonMethods],
  data() {
    const licenseRateRule = (rule , value ,callback)=>{
      if(value){
         if (!isNaN(value)) {
          if (value>=0 && value<=1) {
            this.productForm.licenseRates=value
            this.productForm.licenseRate=this.productForm.licenseRates
            callback()
          } else {
            callback(new Error('输入错误，参考许可费率介于0-1之间'))
          }
        } else {
          callback(new Error('输入错误，参考许可费率介于0-1之间'))
        }
      }else{
        callback()
      }
    }
    return {
      searchFiled:[
        {
          label:'产品类别名称',
          value:'productCategoryName',
          type:1,
          placeholder:'请输入产品类别名称'
        },
        {
          label:'产品名称',
          value:'productName',
          type:1,
          placeholder:'请输入产品名称'
        },
        {
          label:'产品所属公司名称',
          value:'companyName',
          type:1,
          placeholder:'请输入产品所属公司名称'
        },
      ],
      searchOption:{
        productName:this.productName
      },
      ProductVisible:false,
      productIds:[],
      input: '',
      rowData:{},
      left:'left',
      tableData: [],
      options: [],
      checkList: [],//分组查询（勾中的值）
      checkListLable: [{lable:'公司',value:'company_name'},{lable:'类别',value:'product_category_id'}],//分组查询（勾中的值）
      productForm:{},
      categoryForm:{},
      visible: false,
      categoryVisible: false,
      MarketVisible:false,
      title: null,
      categoryTitle: null,
      queryParams: {
        patentNo: this.patentNo ? this.patentNo[0] : null,
        groupBy:'',
        orderBy:'',//排序名称
        orderType:'',//排序类型
        size: 10,
        current:1,
        productName:''
      },
      total:0,
      file:[],
      rules: {
        productName:[{ required: true, message: '请输入产品名称', trigger: 'blur' },],
        licenseRate:[{ required: false, validator:licenseRateRule, trigger: 'blur' },],
        productCategoryId:[{ required: true, message: '请选择产品类别名称', trigger: 'change' },],
      },
      categoryRules:{
        productCategoryName:[{ required: true, message: '请输入产品类别名称', trigger: 'blur' },],
        licenseRate:[{ required: false, validator:licenseRateRule, trigger: 'blur' },],
      },
      isCollapse:false,
    }
  },
  computed: {
    userinfo() {
      return this.$store.state.user.userinfo
    }
  },
  watch:{
    patentNo(val){
      this.queryParams.patentNo = val[0]
      this.getList()
    },
  },
  async mounted() { 
    // 查询产品
    await this.getList()
    // 查询类别
    await this.getListCategory()
  },
  methods: {
    //搜索
    search(val){
      var params = {}
        if(val.length>0){
            val.forEach(item => {
                if(item.type == 3){
                   params[item.value] = item.searchValue.map(item1=>{
                    return item1.value
                   }) 
                }else{
                    params[item.value] = item.searchValue.label
                }
                
            });
        }
        this.searchOption = params
        this.queryParams.current = 1
        this.getList()
    },
    //分组下拉选择
    async onChange(val){
      await this.getList2()
      this.queryParams.orderBy=''
      this.queryParams.orderType = ''
      this.$nextTick(() => {
        if (!val) {
          this.isCollapse=false
        } else {
          this.isCollapse=true
        }
     })
    },
    //打开选择产品弹窗
    addProduct(){
      this.ProductVisible = true
    },
    //关闭选择产品弹窗
    ProductClose(){
      
      this.ProductVisible = false
    },
    //保存选择的产品
    submitProduct(){
      var params={
        patentNos:this.patentNo,
        productIds:this.productIds
      }
      this.$api.PatentAndProduct(params).then(response=>{
        if(response.code == 200){
          this.productIds = []
          this.$emit('submit',true)
        }
      })
    },
    getSubmitStatus(val){
      if(val){
        this.ProductClose()
        this.getList()
      }
    },
    // 面板的产品类别编辑
    categoryEdit(row) {
      this.categoryCommand('1',row)
    },
    // 面板的table产品排序
    sortCollapse({ column, prop, order }) {
      this.sortChange({ column, prop, order })
    },
    // 面板的table产品编辑
    handleEditCollapse(val) {
      this.handleEdit(val)
    },
    // 面板的table产品删除
    deleteCollapse(val) {
      this.handleCommand('6',val)
    },
    // 多选框只能选中一个
    async setMealSelect() {
      this.checkList = this.checkList.slice(-1)
      this.queryParams.groupBy = this.checkList[0]
      await this.getList2()
      this.queryParams.orderBy=''
      this.queryParams.orderType = ''
      this.$nextTick(() => {
        if (this.checkList.length==0) {
        this.isCollapse=false
      } else {
        this.isCollapse=true
      }
     })
     
    },
    //查询类别
    getListCategory() { 
      this.$api.queryProductCategorys({}).then(res => {
        if (res.code == 200) {
          this.options = res.data.list
        }
      })
    },
    // 新增类别
    handleAdd() { 
      this.categoryTitle = '新增类别'
      this.categoryVisible=true
    },
    // 类别操作
    categoryCommand(command, row) {
      switch (command) {
        case '1'://编辑
          this.categoryTitle = '编辑类别'
          this.categoryForm = JSON.parse(JSON.stringify(row))
          this.categoryVisible=true
          break;
        case '2'://趋势图
          this.showTrend(row,1)
          break;
        case '3'://预览图片
          this.previewPictures(row)
          break;
        case '4'://产品架构
          break;
        case '5'://专利布局可视化
          this.getMind(row,1)
          break;
        default:
          break;
      }
    },
     // 类别弹窗确定
     categorySure() {
      this.$refs.categoryForm.validate(valid => {
        if (valid) {
          var formData = new FormData()
          if (this.file) {
            for (var i = 0; i < this.file.length; i++) {
              formData.append("files", this.file[i]);
            }
          }
          formData.append('jsons', JSON.stringify(this.categoryForm))
          if (this.categoryForm.id) {
            this.$api.updateProductCategorys(formData).then(res => {
              if (res.code == 200) {
                this.$message.success("编辑产品类别成功")
                this.getList()
                this.categoryClose()
              }
            })
          } else {
            this.$api.addNewProductCategorys(formData).then(res => {
              if (res.code == 200) {
                this.$message.success("新增产品类别成功")
                this.getListCategory()
                this.categoryClose()
              }
            })
          }
        }
      })
    },
    // 类别弹窗关闭
    categoryClose() {
      this.categoryVisible = false
      this.$refs.upload.clearFiles()
      this.$refs.categoryForm.resetFields()
      this.categoryForm = {}
      this.file=[]
    },
    rowClick (row) {
      this.$emit('productId', row.id)
    },
    //查询产品
    async getList() { 
      if(this.sign == 2){
        this.queryParams.patentNo = null
      }
      var params = this.queryParams
            params = {
                ...this.queryParams,
                ...this.searchOption
            }
      await this.$api.queryProducts(params).then(res => {
        if (res.code == 200) {
          this.tableData = res.data.list
          this.total = res.data.totalSizes
        }
      })
    },
    async getList2() {
      this.queryParams.current = 1
      await this.getList();
    },
    // 排序
    sortChange({ column, prop, order }) {
      if (!order) {
        return false
      }
      const o = {
        'descending': 'desc',
        'ascending': 'asc',
      }
      if (prop.search('productCategory') != -1) {
        this.queryParams.orderBy = prop.slice(16)
      } else {
         this.queryParams.orderBy = prop
      }
      this.queryParams.orderType = o[order]
      this.getList()
    },
    // 新增产品
    handleCommandAdd(command) {
      this.productForm.patentNo = this.queryParams.patentNo
      switch (command) {
        case '1':
          this.title = '新增本公司产品'
          // 获取所属租户公司
          this.productForm.companyName=this.userinfo.tenantName
          this.productForm.tenantId=this.userinfo.tenantId
          this.visible=true
          break;
        case '2':
          this.title = '新增外公司产品'
          this.$set(this.productForm,'companyName',this.clientName)
          this.visible=true
          break;
      
        default:
          break;
      }
     
    },
    // 新增产品选择产品类别
    productFormSelect(val) {
      this.options.forEach(item => {
        if (item.id == val) {
          // this.productForm.licenseRate=item.licenseRate
          this.$set(this.productForm,'licenseRate',item.licenseRate)
        }
      })
    },
    // 编辑
    handleEdit(row) { 
      this.title = '编辑产品'
      this.productForm = JSON.parse(JSON.stringify(row))
      this.$set(this.productForm,'licenseRates',this.productForm.licenseRate)
      this.productForm.productCategoryName = row.productCategory.productCategoryName
      this.visible=true
    },
    // 编辑右侧菜单项
    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.$confirm('此操作将永久删除该产品, 是否继续?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
          }).then(() => {
            this.$api.deleteProducts({id:row.id}).then(res => {
              if (res.code == 200) {
                if (this.tableData.length == 1 && this.queryParams.current != 1) {
                  this.queryParams.current -= 1
                }
                this.getList()
                this.$message.success("删除产品成功")
              }
            })
          }).catch(() => {
            this.$message.info("已取消删除")
          });
          break;
        case '7':// 图片预览
          this.previewPictures(row)
          break;
        case 'details'://产品详情
          this.toProductDetails(row)
          break;
        default:
          break;
      }
    },
    //查看产品详情
    toProductDetails(row){
      this.$router.push(
        {
          path:'/productDetails',
          query:{
            row:JSON.stringify(row)
          }
        }
      )
    },
    // 预览图片
    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');
    },
    // 弹窗确定
    sure() {
      this.$refs.productForm.validate(valid => {
        if (valid) {
          var formData = new FormData()
          if (this.file) {
            for (var i = 0; i < this.file.length; i++) {
              formData.append("files", this.file[i]);
            }
          }
          formData.append('jsons', JSON.stringify(this.productForm))
          if (this.productForm.id) {
            this.$api.updateProducts(formData).then(res => {
              if (res.code == 200) {
                this.$message.success("编辑产品成功")
                this.getList()
                this.close()
              }
            })
          } else {
             this.$api.addNewProducts(formData).then(res => {
              if (res.code == 200) {
                this.$message.success("新增产品成功")
                if(this.sign == 1){
                  this.$emit('productId',false)
                }
                this.getList()
                this.close()
              }
            })
          }
         
        }
      })
      
      
    },
    // 弹窗关闭
    close() {
      this.productForm = {}
      this.file = []
      this.$refs.upload.clearFiles()
      this.$refs.productForm.resetFields()
      this.visible = false
    },
    // 分页
    handleCurrentChange(val) {
      this.queryParams.current = val
      this.getList()
    },
    // 上传图片
    handlePictureCardPreview(file) {
        this.$refs.image.showViewer = true
    },
    handleRemove() {
      this.file = []
        this.productForm.pictures = []
        this.categoryForm.pictures = []
    },
    handleChange(file, fileList) {
      this.$set(this.productForm,'pictures', [{url:file.url}])
      this.file=[file.raw]
    },
    handleChange1(file, fileList) {
      this.$set(this.categoryForm,'pictures', [{url:file.url}])
      this.file=[file.raw]
    },
   
  },
}
</script>

<style lang="scss" scoped>
@import '@/assets/css/selectButton.scss';
.avatar-uploader-icon {
    background-color: #fbfdff;
    border: 1px dashed #c0ccda;
    font-size: 28px;
    color: #8c939d;
    width: 148px;
    height: 148px;
    line-height: 148px;
    text-align: center;
  }
 .avatar {
  
  position: relative;
    width: 148px;
    height: 148px;
    display: block;
  }
  .avatar:hover .deleteImg {
    display: block;
}
.deleteImg {
  display: none;
  font-size: 30px;
  width: 148px;
  height: 148px;
  background-color:black;
	opacity: 0.6; 
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  margin: auto;
  z-index: 999;
}
.deleteImg span i{
  margin-left: 10px;
  color: #fff;
}
.deleteImg span{
  display: flex;
  align-items:center;/*垂直居中*/
  justify-content: center;/*水平居中*/
  width:100%;
  height:100%;
}
</style>