<template>
  <div class="height_100">
    <el-container>
      <el-header>
        <div id="step1">
          <mySearch style="width: 500px" :SearchFields="searchFiled" @search="search" :searchValue="searchOption">
          </mySearch>
        </div>
        <div>
          <el-button type="primary" size="small" @click="saveCheckList" v-if="isChoose">保存</el-button>
          <el-button type="primary" size="small" @click="choseProduct" v-else>添加</el-button>
        </div>
      </el-header>
      <el-main v-DivHeight="getDivHeight">
        <el-table :data="tableData" header-row-class-name="custom-table-header" v-if="showTable" v-loading="loading"
          :maxHeight="tableHeight - 35" @sort-change="sortChange" border>
          <el-table-column label="#" width="60" type="index" align="center">
            <template slot-scope="scope">
              <div v-if="isChoose">
                <el-checkbox-group v-model="checkList">
                  <el-checkbox :label="scope.row.id">
                    <span>{{ (scope.$index + 1) + ((queryParams.current - 1) * queryParams.size) }}</span>
                  </el-checkbox>
                </el-checkbox-group>

              </div>
              <div v-else>
                <span>{{ (scope.$index + 1) + ((queryParams.current - 1) * queryParams.size) }}</span>
              </div>
            </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-main>
      <el-footer class="pagination">
        <el-pagination background layout="total,sizes, prev, pager, next, jumper" :current-page.sync="queryParams.current"
          :page-size.sync="queryParams.size" @current-change="handleCurrentChange" :total="total">
        </el-pagination>
      </el-footer>
    </el-container>

    <el-dialog title="选择产品或产品类别" :visible.sync="productVisible" width="1000px" :append-to-body="true"
      :close-on-click-modal="false" destroy-on-close :before-close="closeProduct">
      <div style="height:550px">
        <productManage :isChoose="true" @chooseList="chooseList"></productManage>
      </div>
    </el-dialog>

    <marketing ref="marketing"></marketing>
    <addEditProduct ref="addEditProduct" @getMessage="ifIsChoose"></addEditProduct>
    <myImageViewer v-if="showImg" :on-close="closeViewer" :src="imgSrc"></myImageViewer>
  </div>
</template>

<script>
import { getTableHeight } from '@/views/components/mixins'
import mixins from '@/views/product/components/mixins/index'
import fun from '@/views/product/components/mixins/fun'
import product from '@/views/product/components/mixins/product'

import marketing from '@/views/product/components/dialog/marketing.vue'
import addEditProduct from '@/views/product/components/dialog/addEditProduct.vue'
export default {
  name: 'productManage',
  components: {
    marketing,
    addEditProduct,
  },
  props: {
    patentNo: {},
    // 弹窗会传递true
    isChoose: {
      default: null
    },
    projectId:{}
  },
  mixins: [getTableHeight, mixins, fun, product],
  data() {
    return {
      loading: false,
      showTable: true,
      column: [
        {
          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: '创建时间'
        },
      ],
      searchFiled: [],
      //检索条件
      searchOption: {},
      queryParams: {
        size: 10,
        current: 1
      },
      total: 0,
      tableData: [],
      // 排序数组
      sort: [
        {
          "orderBy": "createTime",
          "orderType": 1
        }
      ],
      // 控制弹窗的开关
      productVisible: false,
      // 选择的产品数组
      checkList: [],
    };
  },
  watch: {
    patentNo() {
      // this.getList()
      this.ifIsChoose()
    }
  },
  computed: {},
  created() { },
  async mounted() {
    // this.getList()
    await this.getColumn()
    this.ifIsChoose()
  },
  methods: {
    ifIsChoose() {
      if (this.isChoose) {
        this.getList()
      } else {
        this.getPatentProduct()
      }
    },
    saveCheckList() {
      this.$emit('chooseList', this.checkList)
    },
    // 传递过来的需要保存到此专利的产品数据
    chooseList(val) {
      let params = {
        productIds: val,
        patentNos: [this.patentNo]
      }
      this.$api.addProductPatent(params).then(res => {
        if (res.code == 200) {
          this.getPatentProduct()
          this.closeProduct()
        }
      })

    },
    // 根据专利号获取添加的产品
    getPatentProduct() {
      var params = {
        patentNo: this.patentNo,
        queryRequest: {
          ...this.queryParams,
          searchQuery: this.$commonJS.objectToString(this.searchOption),
          orderDTOList: this.sort,
        },

      }
      this.$api.selectProductByPatentNo(params).then(response => {
        if (response.code == 200) {
          this.tableData = response.data.data
          this.total = response.data.total
          this.loading = false
        }
      }).catch(error => {
        this.tableData = []
        this.total = 0
        this.loading = false
      })
    },
    //打开选择产品或产品类别弹窗
    async choseProduct() {
      if(!(await this.$permission.projectPermission(this.projectId))){
        this.$showPermissionDialog()
        return false
      }
      this.productVisible = true
    },
    //关闭弹窗
    closeProduct() {
      this.checkList = []
      this.productVisible = false
    },
    //获取检索字段以及分组字段
    async getColumn() {
      let params = ['productCategory']
      await this.$api.getParamsCommon(params).then(res => {
        if (res.code == 200) {
          // 显示栏位
          this.columnList = res.data[0].conditionDTOList.filter(item => {
            return item.name != 'Id' && item.ifShow == true
          })
          // 分组字段
          let conditionDTOList = JSON.parse(JSON.stringify(res.data[0].conditionDTOList))
          // 搜索字段
          this.searchFiled = this.$commonJS.getField(conditionDTOList, (u) => u.ifSearch == true, {
            label: 'name',
            value: 'value',
            type: 'type',
          }).filter(item => {
            return item.value.indexOf('_id') == -1
          })
        }
      })
      this.showView = false
      this.$nextTick(() => {
        this.showView = true
      })
    },
    //获取检索条件检索
    search(val) {
      let params = {}
      if (val.length > 0) {
        val.forEach(item => {
          if (item.type == 3) {
            params[item.value] = item.searchValue.map(itemValue => {
              return itemValue.value
            })
          } else {
            params[item.value] = item.searchValue.label
          }
        })
      }
      this.searchOption = this.$commonJS.ArrayToArray(val)
      this.queryParams.current = 1
      // this.getList()
      this.ifIsChoose()
    },
    // 获取所有产品
    getList() {
      // var str = this.$commonJS.objectToString(this.searchOption)
      // if (!this.isChoose) {
      //   str = str + `patentNo=${this.patentNo}`
      // }
      var params = {
        ...this.queryParams,
        searchQuery: this.$commonJS.objectToString(this.searchOption),
        orderDTOList: this.sort,
      }
      this.loading = true
      this.$api.queryProduct(params).then(response => {
        if (response.code == 200) {
          this.tableData = response.data.data
          this.total = response.data.total
          this.loading = false
        }
      }).catch(error => {
        this.tableData = []
        this.total = 0
        this.loading = false
      })
    },
    // 分页信息
    handleCurrentChange(val) {
      this.queryParams.current = val
      // this.getList()
      this.ifIsChoose()
    },
    // 编辑产品相关的下拉菜单
    async handleCommand(option, row) {
      if (!(await this.$permission.producePermission(row.id, 2))) {
        this.$showPermissionDialog()
        return false
      }
      switch (option) {
        case '0'://编辑
          this.$refs.addEditProduct.open(row)
          break;
        case '1'://预览图片
          this.checkImage(row)
          break;
        case '2'://产品架构
          this.toFramework(row, 2)
          break;
        case '3'://产品的营销数据
          this.$refs.marketing.open(row)
          break;
        case '4'://产品的营销数据趋势图
          this.showTrend(row, 2)
          break;
        case '5'://专利布局可视化

          break;
        case '6'://商品化专利
          this.toCommodity(row)
          break;
        case '7'://删除产品
          this.deletes(row)
          break;

        default:
          break;
      }
    },
    deletes(row) {
      this.$confirm('此操作将永久删除选中的专利, 不可恢复, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        let params = {
          productIds: [row.id],
          patentNos: this.patentNo,
        }
        this.$api.delProductPatent(params).then(res => {
          if (res.code == 200) {
            this.$message.success('删除成功')
            this.ifIsChoose()
          }
        })
      }).catch(() => {
        this.$message.info('已取消删除操作')
      });
    },
    // 排序方法
    sortChange({ column, prop, order }) {
      //如需要多个字段排序，则不需要清空
      var params = {
        sort: this.sort,
        column,
        prop,
        order,
      }
      this.sort = this.$commonJS.getSortData(params)
      // this.getList()
      this.ifIsChoose()
    },
  },
};
</script>
<style lang="scss" scoped></style>