<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 style="display: flex">
          <!-- <div>
            <span>分组查询：</span>
            <el-select v-model="groupingValue" size="small" @change="changeGrouping" style="width: 120px">
              <el-option v-for="item in groupingOption" :key="item.value" :label="item.label" :value="item.value">
              </el-option>
            </el-select>
          </div> -->
          <div style="margin:0 10px;" id="step2">
            <el-button type="primary" size="small" @click="handleCommand('0')">新增类别</el-button>
            <!-- <el-dropdown trigger="click" split-button type="primary" size="small" >
              <span @click="handleCommand('0')">新增类别</span>
              <el-dropdown-menu slot="dropdown" class="text-align_center">
                <el-dropdown-item>
                  <el-dropdown trigger="hover" placement="left-start" @command="handleCommand($event)">
                    <span class="el-dropdown-link">新增产品</span>
                    <el-dropdown-menu  class="text-align_center">
                      <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-menu>
            </el-dropdown> -->
          </div>
        </div>
      </el-header>
      <el-main>
        <div style="height: 100%;" v-loading="loading">
          <component :is="componentType" v-bind="$attrs" :tableData="tableData" :queryParams="queryParams" :searchOption="searchOption" :handleMessage="handleMessage"  @options="handleOption" @on-sort="handleSort" @optionsSon="handleOption2" @chooseItem="chooseItem"></component>
        </div>
      </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" @size-change="getList()" :total="total">
        </el-pagination>
      </el-footer>
    </el-container>

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

<script>
import categoryTable from './view/categoryTable.vue'
import addEditCategory from './dialog/addEditCategory.vue'
import addEditProduct from './dialog/addEditProduct.vue'
import marketing from './dialog/marketing.vue'
export default {
  components: {
    categoryTable,
    addEditCategory,
    addEditProduct,
    marketing
  },
  props:{
    patentNo:{

    }
  },
  data() {
    return {
      // 显示指定的子组件
      componentType: 'categoryTable',
      //显示的栏位
      columnList:[],
      //检索字段
      searchFiled: [
        {
          label: '产品类别名称',
          value: 'productName1',
          type: 1,
          placeholder: '请输入产品类别名称'
        },
        {
          label: '产品名称',
          value: 'productName2',
          type: 1,
          placeholder: '请输入产品名称'
        },
        {
          label: '产品所属公司名称',
          value: 'productName3',
          type: 1,
          placeholder: '请输入产品所属公司名称'
        }
      ],
      //检索条件
      searchOption: {
        questionName: this.eventName,
        product_name:localStorage.searchContent
      },
      //分组的值
      groupingValue: 'noGrouping',
      //分组
      groupingOption: [
        {
          label: '不分组',
          value: 'noGrouping',
        },
      ],
      // 查询产品类别所需数据
      queryParams: {
        current: 1,
        size:10,
      },
      //排序
      sort:[
        {
          "orderBy": "createTime",
          "orderType": 1
        }
      ],
      // 产品类别总数
      total: 0,
      // 产品类别数据
      tableData:[],
      //加载
      loading:false,
      //展示图片
      showImg:false,
      //图片地址
      imgSrc:'',
      //接受子组件消息
      handleMessage:'',
    }
  },
  mounted() {
    //获取产品类别数据
    this.getList()
    //获取检索字段以及分组字段
    this.getColumn() 
    //获取检索字段以及分组字段
    // this.getFieldList()
    
  },
  methods: {
    //获取子孙组件选择的值
    chooseItem({row,type}){
      this.$emit('chooseItem',{row,type})
    },
    
    //获取检索字段以及分组字段
    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.groupingOption = this.$commonJS.getField(conditionDTOList,(u)=> u.ifGroup == true,{
          //   name: 'name',
          //   value: 'value',
          // })
          // 搜索字段
          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
      })
    },
    // 子组件编辑等事件
    async handleOption({ val, row }) {
      if(!(await this.$permission.producePermission(row.id,1))){
        this.$showPermissionDialog()
        return false
      }
      switch (val) {
        case '0'://编辑
          this.$refs.addEditCategory.open(row)
          break;
        case '1'://趋势图
          this.showTrend(row,1)
          break;
        case '2'://预览图片
          this.checkImage(row)
          break;
        case '3'://分类架构
          this.toFramework(row,1)
          break;
        case '4'://专利布局可视化
          break;
        case '5'://删 除
          this.deletes(row)
          break;
        case '7':
          this.handleCommand('1',row.id)
          break;
        case '8':
          this.handleCommand('2',row.id)
          break;
        default:
          break;
      }
    },
    //孙组件操作列方法
    async handleOption2({ 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;
          
        default:
          break;
      }
    },
    /**
     * 营销数据趋势图
     * @param {Object} row 
     * @param {Number} val 
     */
     showTrend(row, val) {//val为数据类型，1为产品类别，2为产品
      const router = this.$router.resolve({
        path: '/chartIndex',
        query: {
          id: row.id,
          type: val,
          name: row.name
        }
      })
      window.open(router.href, '_blank');
    },

     // 进入商品化专利
    toCommodity(row) {
      let router = this.$router.resolve({
        path: '/commodity',
        query: {
          productId:row.id,
          productName:row.name,
        }
      })
      window.open(router.href,'_blank')
    },

     // 进入产品类别分类架构（与产品架构一致）
    toFramework(row,val) {
      var form = {
        name:row.name,
        id:row.id,
        categoryId:row.categoryId,
        type:val,
      }
      let router = this.$router.resolve({
        path: '/frameworkIndex',
        query: {
          row: JSON.stringify(form),
        }
      })
      window.open(router.href, '_blank')
    },
    //预览图片
    checkImage(row){
      this.imgSrc = this.$commonJS.checkViewer(row.systemFileList[0].guid)
      this.showImg = true
    },
    //关闭预览图片
    closeViewer(){
      this.showImg = false
    },
    //获取删除的id
    deletes(row){
      this.deleteData([row.id])
    },
    //删除数据
    deleteData(ids){
      this.$confirm('此操作将删除该产品类别, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        // 调用接口
        this.$api.deleteProductCategory(ids).then(res => {
          if (res.code == 200) {
            this.getList()
            // if(isLast){
            //   this.isGrouping()
            // }
            // this.handleMessage = '删除成功'
            // this.clearMessage()
            this.$message.success('删除成功!');
          }
        })
      }).catch(() => {
      });
    },
    // 右侧新增类别、产品
    handleCommand(event,categoryId) {
      if (event == '0') {//新增类别
        this.$refs.addEditCategory.open({})
      } else if (event == '1') {//新增本公司产品
        this.$refs.addEditProduct.open({isTheCompany:'1',categoryId:categoryId})
      } else {//新增外公司产品
        this.$refs.addEditProduct.open({isTheCompany:'2',categoryId:categoryId})
      }
    },
    //获取子组件信息
    getMessage(val){
      this.handleMessage = val
      this.getList()
      this.clearMessage()
    },
    getMessage2(val){
      this.handleMessage = val
      this.clearMessage()
    },
    //清空信息
    clearMessage(){
      this.$nextTick(()=>{
        this.handleMessage = ''
      })
    },
    // 获取产品类别数据
    getList(){
      var str = this.$commonJS.objectToString(this.searchOption)
      //todo
      if(this.patentNo){

      }
      let params = {
        ...this.queryParams,//分页信息
        searchQuery:str,//检索条件
        orderDTOList: this.sort,//排序
      }
      this.loading = true
      this.$api.queryProductCategory(params).then(response=>{
        if(response.code == 200){
          this.tableData = response.data.data
          this.total = response.data.total
          this.loading = false
        }
      }).catch(error=>{
        this.loading = false
        this.tableData = []
        this.total = 0
      })
    },
    //排序
    handleSort({ column, prop, order, str }) {
      //如需要多个字段排序，则不需要清空
      var params = {
        sort:this.sort,
        column,
        prop,
        order,
      }
      this.sort = this.$commonJS.getSortData(params)
      this.queryParams.current = 1
      this.getList()
    },
    // 分页
    handleCurrentChange(val){
      this.queryParams.current = val
      this.getList()
    },
    // 分组查询change
    changeGrouping(val) { },
    //获取检索条件检索
    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()
    },
  },
}
</script>

<style lang="scss">
.product{
  .el-table th.el-table__cell{
    background: var(--bg);
    color: var(--color);
  }
}
</style>
<style lang="scss" scoped>

</style>