<!--
  @description: 商品列表
  @Modifier：sxm
  @routerPath:goodsClassList
  @date：  2019/9/24-18:00
-->
<template>
  <div>
    <!--搜索-->
    <div class="nav_w">
      <shopHeader
        :search-children-data="seenData"
        :goods-list-data="goodsList"
        :is-dorpdown="true"
        @tabSearch="tabSearch"
        @watchKeys="watchKeys"
        @watchDatas="watchDatas"
        @watchData="watchData"
        @watchDataeny="watchDataeny"
      />
    </div>
    <section class="middle_width1190">
      <!--当前位置-面包屑-->
      <div class="crumbs_nav_main">
        <span class="pos_title">
          <i class="iconfont icon-dizhi" />当前位置：
        </span>
        <el-breadcrumb separator-class="el-icon-arrow-right">
          <el-breadcrumb-item :to="{ path: '/shop/shopHome' }">
            首页
          </el-breadcrumb-item>
          <el-breadcrumb-item v-if="breadcrumb">
            <span @click="navClick">
              {{ typeof breadcrumb === 'string' ? breadcrumb : breadcrumb.name }}
            </span>
          </el-breadcrumb-item>
          <el-breadcrumb-item v-if="breadcrumbNodes">
            <span @click="navClick">
              {{
                typeof breadcrumbNodes === 'string' ? breadcrumbNodes : breadcrumbNodes.name
              }}
            </span>
          </el-breadcrumb-item>
          <el-breadcrumb-item v-if="breadcrumbChildren">
            {{ typeof breadcrumbChildren === 'string' ? breadcrumbChildren : breadcrumbChildren.name }}
          </el-breadcrumb-item>
        </el-breadcrumb>
      </div>
      <!-- 商铺关注 -->
      <div v-if="concernList" class="shops_concern">
        <div class="shops_concern_left">
          <img :src="concernList.imgUrl" alt="">
          <p>{{ concernList.name }}</p>
        </div>
        <div v-if="concernList.departName==='京东商城'" class="shops_concern_right" @click="followClick(concernList)">
          <span style="cursor: pointer;">
            <i :class="shopInfoFlg ? 'el-icon-star-on' : 'el-icon-star-off'" />
          </span>
          <span :class="shopInfoFlg ? 'actives' : ''" style="cursor: pointer;">{{ shopInfoFlg?'已关注':'关注' }}</span>
        </div>
      </div>
      <!--搜索商品导航标签-->
      <goodsClassSearchNav
        :search-nav-data="searchNavData"
        @watchChild="watchChild"
        @watchChilds="watchChilds"
      />
      <!--销量价格筛选条件-->
      <div class="ui_ceilinglamp clearfix">
        <ul class="sort fl">
          <li
            v-for="(item, index) in goodsTool"
            :key="index"
            @click="orderBy(item, index)"
          >
            <span :class="{ active: isAction[index] }">
              {{ item.title }}
              <i :class="icon[item.iactive]" />
            </span>
          </li>
        </ul>
        <div class="price fl">
          <span>价格区间</span>
          <div class="price_input">
            <el-input
              v-model.number="searchForm.priceStart"
              size="mini"
              type="number"
              placeholder="最低价"
              @keyup.13.native="searchByPrice"
            />
            <em>-&nbsp;</em>
            <el-input
              v-model.number="searchForm.priceEnd"
              size="mini"
              type="number"
              placeholder="最高价"
              @keyup.13.native="searchByPrice"
            />
            <el-input
              v-model="searchForm.searchKeyword"
              size="mini"
              placeholder="商品名称"
              @keyup.13.native="searchByPrice"
            />
            <el-button type="purple" @click="searchByPrice">
              查询
            </el-button>
          </div>
        </div>
      </div>
      <!--商品列表-->
      <div class="good_list" style="cursor:pointer;">
        <div v-if="productList.length > 0" class="clearfix" style="margin-left:-4px;margin-right:-4px">
          <dl
            v-for="(item, index) in productList"
            :key="index"
            :class="isMouseenter ? 'active' : ''"
            class="same_goods cursor"
            @mouseenter="mouseenterGoods"
          >
            <dt class="lazyimg" @click="goToGoodDetail(item)">
              <el-image :src="item.productPicture" lazy />
            </dt>
            <dd class="p_10">
              <div class="price_amount clearfix">
                <p v-if="isLogin" class="same_price fl">
                  ￥{{ item.price }}
                </p>
                <p v-if="!isLogin" class="same_price fl">
                  市场价：￥{{ item.marketPrice }}
                </p>
                <p class="amount fr">
                  已售:
                  <span>{{ item.salesQuantity }}</span>
                </p>
              </div>
              <p class="same_name goods_item_title_two" @click="goToGoodDetail(item)" v-html="item.productName ">
                {{ item.productName }}
              </p>
              <p class="supplier_name">
                <img v-if="item.type === 'jd'" src="@/assets/img/shopmall/tel_icon_01.png" alt class="src_icon">
                <img v-if="item.type === 'guanjie'" src="@/assets/img/shopmall/tel_icon_06.png" alt class="src_icon">
                <img v-if="item.type === 'chenguang'" src="@/assets/img/shopmall/tel_icon_03.png" alt class="src_icon">
                <img v-if="item.type === 'oms'" src="@/assets/img/shopmall/tel_icon_04.png" alt class="src_icon">
                <img v-if="item.type === 'zhenkunhang'" src="@/assets/img/shopmall/tel_icon_zkh.png" alt class="src_icon">
                <img v-if="item.type === 'deli'" src="@/assets/img/shopmall/tel_icon_02.png" alt class="src_icon">
                {{ item.departName }}
              </p>
            </dd>
            <dd class="sales_number">
              <p class="join_button" @click="collectionGood(item)">
                <i :class="item.hasMarked ? 'el-icon-star-on' : 'el-icon-star-off'" />收藏
              </p>
              <p class="join_button">
                <i class="iconfont icon-paixu" @click="duibiBtn(item)">对比</i>
              </p>
            </dd>
          </dl>
        </div>
        <div v-else class="cart_null">
          <dl>
            <img src="@/assets/img/shopmall/noGood.png" alt>
            <dd style="padding-left:30px">
              <p style="color:#999999">
                暂无商品~
              </p>
              <p @click="goToHome">
                看看其他商品
              </p>
            </dd>
          </dl>
        </div>
        <!-- 00 活动页商品 不展示分页 -->
        <el-row v-if="this.$route.query.status !== '00'" class="pagination p16" style="clear:both;margin:20px 0">
          <div class="page-number fl">
            共{{ Math.ceil(totalPage / searchForm.pageSize) }}页
            {{ totalPage }}条
          </div>
          <el-pagination
            :current-page="searchForm.pageNo + 1"
            :total="totalPage"
            :page-sizes="[25, 50, 75, 100]"
            class="fr"
            background
            layout="prev, pager, next, sizes"
            @current-change="pickHandle"
            @size-change="handleSizeChange"
          />
        </el-row>
      </div>
    </section>
    <good-scon-trast-toast
      v-show="isShow"
      ref="goodScontrast"
      @isShow_Hide="isShow_Hide"
    />
    <cartDialog :join-cart="joinCart" @joinCartFn="joinCartFn" />
  </div>
</template>

<script>
import shopHeader from './search'
import cartDialog from '@/components/shoppingmall/shopLayout/shopComponents/cartDialog.vue'
import goodsClassSearchNav from './goodsClassSearchNav'
import { getToken } from '@/assets/js/utils/auth'
import goodSconTrastToast from './goodSconTrastToast'
import {
  addMarkInfo,
  saveShoppingCart,
  searchProduct,
  getDepartInfo,
  addshopMarkInfo,
  hasMarked,
  searchScreen,
  getgoodsclassTree
} from '@/api/shoppingmall/products'
import { mapGetters } from 'vuex'
import { deleteMarkInfo } from '@/api/shoppingmall/tabcenter'
export default {
  name: 'GoodsClassList',
  components: {
    shopHeader,
    goodsClassSearchNav,
    goodSconTrastToast,
    cartDialog
  },
  // inject: ['reload'],
  data() {
    return {
      // 店铺关注数据
      concern: [
        {
          imgUrl: require('../../../assets/img/shopmall/jd1.jpg'),
          name: '京东电子商城',
          departName: '京东商城'
        },
        {
          imgUrl: require('../../../assets/img/shopmall/chenguang.png'),
          name: '上海晨光科力普办公用品有限公司',
          departName: '晨光办公'
        },
        {
          imgUrl: require('../../../assets/img/shopmall/shitaibo.jpg'),
          name: '史泰博上海有限公司',
          departName: '史泰博'
        },
        {
          imgUrl: require('../../../assets/img/shopmall/guanjie.jpg'),
          name: '固安捷(中国)工业品销售有限责任公司',
          departName: '固安捷'
        },
        {
          imgUrl: require('../../../assets/img/shopmall/zhenkunhang.png'),
          name: '震坤行工业超市(上海)有限公司',
          departName: '震坤行'
        },
        {
          imgUrl: '/bidprocurement/common-tools/tools/commonUpload/readImageRoot?imagePath=2021-08/shop_invoice_business_license_base/20210806135256xuQLrRZx.png',
          name: '自营超市',
          departName: '自营超市'
        },
        {
          imgUrl: require('../../../assets/img/shopmall/deli.jpg'),
          name: '得力集团有限公司',
          departName: '得力办公'
        }
      ],
      concernList: '',
      actives: null,
      goodStatus: {
        type: 2,
        id: ''
      },
      flg: false,
      types: 2,
      breadcrumb: '', // 一级面包屑
      breadcrumbNodes: '',
      breadcrumbChildren: '',
      breadrumbShow: false, // 隐藏面包屑
      keywordsa: '', // 关键字
      searchNavData: '', // 筛选条件组合
      joinCart: false, // 加入购物车
      isShow: false,
      isRepeated: false,
      shopId: '',
      // 动态添加class 是否显示一级全部分类列表
      seenData: {
        seen: false,
        current: 0
      },
      isAction: [true, false, false],
      icon: ['el-icon-bottom ', 'el-icon-bottom', 'el-icon-bottom'],
      // 排序
      goodsTool: [
        { title: '默认', sort: 0, iactive: 0 },
        { title: '价格', sort: 5, iactive: 0 },
        { title: '销量', sort: 2, iactive: 0 }

      ],
      isMouseenter: false,
      isLogin: false, // 是否登录
      totalPage: 0,
      // 商品列表
      productList: [],
      goodsList: [],
      // 加入购物车参数
      carData: {
        goodsId: '', // 商品Id
        number: 1, // 数量
        goodsName: '', // 商品名称
        id: null // 购物车id
      },
      collectionParams: {
        productCode: '',
        img: '',
        productName: '',
        supplierName: '',
        unitPrice: 0,
        type: '2'
      },
      keyword: '', // 关键词 分类编码/搜索关键词
      type: '', // 操作 1分类筛选条件 2搜索聚合筛选条件
      searchForm: {}, // 搜索数据
      searchList: {
        stock: 1,
        department: '',
        departmentType: '',
        keywords: '',
        searchKeyword: '',
        productClassifies: this.$route.query.id ? this.$route.query.id : '',
        brandId: '',
        pageNo: 0, // 当前页
        pageSize: 25, // 每页条数
        sort: 0, // 复杂搜索时使用： 排序字段:0->按相关度；1->按新品；2->按销量从高到低 3-> 按销量从低到高；4->价格从低到高；5->价格从高到低 默认请赋0
        priceStart: '', // 复杂搜索时使用： 最小价格
        priceEnd: '' // 复杂搜索时使用： 最大价格
      },
      addshopParams: {
        supplierId: '',
        supplierName: '',
        type: '3'
      },
      addshopData: [],
      shopInfoFlg: false,
      shopInfoStatus: {
        type: 3,
        id: ''
      },
      searchData: {
        keywords: '美的（Midea） 空调',
        pageNo: 0,
        pageSize: 70,
        productClassificationId: 'C010201',
        sort: 0
      }
    }
  },
  computed: {
    ...mapGetters([
      'getNewShoppingCart',
      'crumbsNav',
      'crumbsNava',
      'crumbsNavb',
      'activesa'
    ])
  },
  watch: {
    // 获取面包屑/面包屑更改
    crumbsNav(val) {
      this.breadcrumb = val
    },
    crumbsNava(val) {
      this.breadcrumbNodes = val
    },
    crumbsNavb(val) {
      this.breadcrumbChildren = val
    },
    // 路由改变
    '$route'() {
      // 初始化
      this.initData()
      this.initMount()
    }
  },
  created() {
    // 初始化
    this.initData()
    const pid = ''
    getgoodsclassTree(pid).then(response => {
      this.goodsList = response.data
    }).catch(() => {

    })
  },
  mounted() {
    // 初始化
    this.initMount()
  },
  destroyed() {
    sessionStorage.clear()
  },
  methods: {
    // 初始化
    initData() {
      this.searchForm = this.$route.query.status === '00' ? this.searchData : this.searchList
      // 校验是否登录
      this.isLogin = !!getToken()
      if (this.$route.query.id) {
        this.keyword = this.$route.query.id || ''
        this.type = '1'
      } else {
        this.keyword = this.$route.query.keywords || ''
        this.type = '2'
      }
      // if (this.$route.query.keywords === 'jd') {
      //   this.actives = 0
      //   this.concernList = this.concern[this.actives]
      // }
      if (this.$route.query.keywords === 'chenguang') {
        this.actives = 1
        this.concernList = this.concern[this.actives]
      }
      // if (this.$route.query.keywords === 'oms') {
      //   this.actives = 2
      //   this.concernList = this.concern[this.actives]
      // }
      // if (this.$route.query.keywords === 'guanjie') {
      //   this.actives = 3
      //   this.concernList = this.concern[this.actives]
      // }
      // if (this.$route.query.keywords === 'zhenkunhang') {
      //   this.actives = 4
      //   this.concernList = this.concern[this.actives]
      // }
      // if (this.$route.query.keywords === 'self') {
      //   this.actives = 5
      //   this.concernList = this.concern[this.actives]
      // }
      if (this.$route.query.keywords === 'deli') {
        this.actives = 6
        this.concernList = this.concern[this.actives]
      }
      if (getToken()) {
        getDepartInfo().then(res => {
          this.addshopData = res.data
          this.addshopData.forEach(ele => {
            if (ele.departName === this.concernList.departName) {
              this.shopInfoStatus.id = ele.id
              //  获取到数据再执行 是否关注了
              hasMarked(this.shopInfoStatus).then(res => {
                this.shopInfoFlg = res.data
              })
            }
          })
        })
      }

      // 获取到数据再执行 是否关注了
      // setTimeout(() => {
      //   hasMarked(this.shopInfoStatus).then(res => {
      //     this.shopInfoFlg = res.data
      //   })
      // })
    },
    // 初始化
    initMount() {
      // 获取面包屑
      this.breadcrumb = this.isJSON(sessionStorage.getItem('firstClassNames'))
        ? JSON.parse(sessionStorage.getItem('firstClassNames'))
        : sessionStorage.getItem('firstClassNames')
      // 一级面包屑
      this.breadcrumbNodes = this.isJSON(
        sessionStorage.getItem('secondClassName')
      )
        ? JSON.parse(sessionStorage.getItem('secondClassName'))
        : sessionStorage.getItem('secondClassName')
      this.breadcrumbChildren = this.isJSON(
        sessionStorage.getItem('threeClassName')
      )
        ? JSON.parse(sessionStorage.getItem('threeClassName'))
        : sessionStorage.getItem('threeClassName')
      this.searchForm.pageNo = 0
      this.searchForm.flag = this.$route.query.flag
      // 如果传过来品牌参数
      if (this.$route.query.keywords) {
        this.searchForm.departmentType = this.$route.query.keywords
      }
      if (this.$route.query.departmentType) {
        // departmentType品牌的type是jd oms等
        this.searchForm.departmentType = this.$route.query.departmentType
      }
      if (this.$route.query.keywordsa) {
        // 如果是从首页输入文字搜索会跳到商品列表页 传递keywordsa 参数 赋值一下给接口
        this.searchForm.keywords = this.$route.query.keywordsa
      // this.searchForm.departmentType = this.$route.query.keywords
      }
      // 最后调用搜索接口
      this.search(this.searchForm)
      this.searchScreen(this.searchForm)
    },
    // 关注
    followClick(concernList) {
      this.addshopData.forEach(ele => {
        if (ele.departName === concernList.departName) {
          this.addshopParams.supplierId = ele.id
          this.addshopParams.supplierName = ele.departName
          this.shopInfoStatus.id = ele.id
        }
      })
      if (this.shopInfoFlg) {
        var type = '02'
        deleteMarkInfo(this.shopInfoStatus.id, type).then((res) => {
          if (res.header.ret === '0') {
            this.$message({
              type: 'success',
              message: '取消关注成功'
            })
            this.shopInfoFlg = false
          }
        }).catch((err) => {
          throw new Error('取消关注成功' + err)
        })
      } else {
        addshopMarkInfo(this.addshopParams)
          .then(res => {
            if (res.header.ret === '0') {
              this.$message({
                type: 'success',
                message: '关注成功'
              })
              hasMarked(this.shopInfoStatus).then(res => {
                this.shopInfoFlg = res.data
              })
            }
          })
          .catch(err => {
            throw new Error('关注失败' + err)
          })
      }
    },
    isJSON(str) {
      if (typeof str === 'string') {
        try {
          JSON.parse(str)
          return true
        } catch (e) {
          return false
        }
      }
    },
    // 有无库存
    watchChilds(val) {
      this.searchForm.stock = val ? 1 : 0
      this.searchForm.pageNo = 0
      this.search(this.searchForm)
    },
    // 导航返回
    navClick() {
      this.$router.push({
        path: '/shop/goodsClassList',
        query: { id: this.breadcrumb.classifyNo }
      })
      this.searchForm.productClassifies = this.$route.query.id
      this.search(this.searchForm)
      this.searchScreen(this.searchForm)
      this.searchForm.pageNo = 0
      if (this.breadcrumbNodes) {
        this.$store.commit('SET_BREAD_NAVA', 0)
      }
      this.$store.commit('SET_BREAD_NAVB', 0)
    },
    // 商铺数据
    tabSearch(val) {
      this.searchForm.pageNo = 0
      this.searchForm.department = ''
      this.searchForm.brandId = ''
      this.searchForm.keywords = this.$route.query.keywordsa || ''
      this.searchForm.priceEnd = ''
      this.searchForm.priceStart = ''
      this.searchForm.productClassifies = ''
      this.searchForm.searchKeyword = ''
      this.searchForm.departmentType = val.dataName
      this.search(this.searchForm)
      this.searchScreen(this.searchForm)
    },
    // 品牌数据
    watchKeys(val) {
      this.keywordsa = val
      if (!this.$route.query.keywords) {
        this.breadcrumb = val
      }
      this.searchForm.keywords = val
      this.searchForm.searchKeyword = ''
    },
    // 品牌数据
    watchDatas(val) {
      this.searchForm.productClassifies = ''
      this.searchForm.searchKeyword = ''
      this.searchForm.pageNo = 0
      this.productList = val.list
      this.totalPage = val.total
    },
    watchDataeny(val) {
      this.$store.commit('SET_NAV_DATA', val)
      this.searchForm.pageNo = 0
    },
    // 品牌数据
    watchData(val) {
      this.searchForm.brandId = ''
      this.searchForm.searchKeyword = ''
      this.searchForm.productClassifies = val.classifyNo
      this.searchForm.pageNo = 0
      this.searchForm.keywords = ''
      this.searchForm.priceEnd = ''
      this.searchForm.priceStart = ''
      // if (this.$route.query.keywordsa && !this.$route.query.keywords) {
      this.searchForm.departmentType = ''
      // }
      this.search(this.searchForm)
      this.searchScreen(this.searchForm)
    },
    // 调用子组件
    watchChild(val) {
      let brandId = ''
      let department = ''
      let priceEnd = ''
      let priceStart = ''
      this.searchForm.pageNo = 0
      this.searchForm.productClassifies = this.$route.query.id ? this.$route.query.id : ''
      if (val.length) {
        if (this.$route.query.keywords && this.$route.query.keywordsa) {
          this.searchForm.departmentType = this.$route.query.keywords
          this.searchForm.keywords = this.$route.query.keywordsa
          // this.searchForm.productClassifies = ''
          // this.searchForm.keywords = ''
        } else if (this.$route.query.keywordsa) {
          // this.searchForm.productClassifies = ''
          this.searchForm.departmentType = ''
          this.searchForm.keywords = this.$route.query.keywordsa
        } else {
          this.searchForm.departmentType = this.$route.query.keywords
          this.searchForm.keywords = ''
          // this.searchForm.productClassifies = ''
        }
        const obj = []
        const sup = []
        val.forEach(element => {
          if (element.flag === '品牌') {
            this.searchForm.brandId = element.name
            brandId = element.name
            obj.push(element.name)
          }
          if (element.flag === '供应商') {
            this.searchForm.department = element.name
            department = element.name
            sup.push(element.name)
          }
          if (obj.length > 1) {
            this.searchForm.brandId = obj.join(',')
            brandId = obj.join(',')
          }
          if (sup.length > 1) {
            this.searchForm.department = sup.join(',')
            department = sup.join(',')
          }
          if (element.flag === '价格') {
            if (element.name === '500元以下') {
              this.searchForm.priceEnd = 500
              this.searchForm.priceStart = 0
              priceEnd = 500
              priceStart = 0
            }
            if (element.name === '500-2000元') {
              this.searchForm.priceEnd = 2000
              this.searchForm.priceStart = 500
              priceEnd = 2000
              priceStart = 500
            }
            if (element.name === '2000-4000元') {
              this.searchForm.priceEnd = 4000
              this.searchForm.priceStart = 2000
              priceEnd = 4000
              priceStart = 2000
            }
            if (element.name === '4000-6000元') {
              this.searchForm.priceEnd = 6000
              this.searchForm.priceStart = 4000
              priceEnd = 6000
              priceStart = 4000
            }
            if (element.name === '6000元以上') {
              this.searchForm.priceEnd = ''
              this.searchForm.priceStart = 6000
              priceEnd = ''
              priceStart = 6000
            }
          }
        })
        this.searchForm.priceEnd = priceEnd
        this.searchForm.priceStart = priceStart
        this.searchForm.brandId = brandId
        this.searchForm.department = department
        searchProduct(this.searchForm)
          .then(response => {
            this.productList = response.data.list
            this.totalPage = response.data.total
          })
          .catch(() => {})
      } else {
        this.searchForm.priceEnd = ''
        this.searchForm.priceStart = ''
        this.searchForm.brandId = ''
        this.searchForm.department = ''
        searchProduct(this.searchForm)
          .then(response => {
            this.productList = response.data.list
            this.totalPage = response.data.total
          })
          .catch(() => {})
      }
    },
    // 筛选条件
    // 看看其他商品
    goToHome() {
      this.$router.replace({ path: '/shop/shopHome' })
    },
    // 购物车遮罩层
    joinCartFn(val) {
      setTimeout(() => {
        this.joinCart = val
      }, 1500)
    },
    isShow_Hide(vl) {
      this.isShow = vl
    },
    hideDialogBtn() {
      this.isShow = false
    },
    // 对比功能
    duibiBtn(item) {
      this.isShow = true
      this.$refs.goodScontrast.duibiBtn(item)
    },
    // 点击商品去到商品详情
    goToGoodDetail(item) {
      this.$router.push({
        path: '/shop/goodsClassDetail',
        query: { id: item.id }
      })
    },
    // 鼠标移入商品列表
    mouseenterGoods() {
      this.isMouseenter = true
    },
    // 商品列表
    search(searchForm) {
      searchProduct(searchForm)
        .then(response => {
          this.productList = response.data.list
          this.totalPage = response.data.total
          // sessionStorage.setItem('attrs', JSON.stringify(response.data.attr))
        })
        .catch(() => {})
    },
    // 品牌聚合
    searchScreen(searchForm) {
      searchScreen(searchForm).then(res => {
        this.$store.commit('SET_NAV_DATA', res.data)
        this.searchNavData = res.data
      })
    },
    // 收藏该商品
    collectionGood(item) {
      if (!this.isLogin) {
        this.$message({
          type: 'warning',
          message: '请先登录！'
        })
        return
      }

      this.collectionParams.img = item.productPicture
      this.collectionParams.productName = item.productName
      this.collectionParams.productCode = item.id
      this.collectionParams.supplierName = item.supplierName
      this.collectionParams.unitPrice = item.commodityPrice
      if (item.hasMarked) {
        var type = '00'
        deleteMarkInfo(item.id, type).then((res) => {
          if (res.header.ret === '0') {
            this.$message({
              type: 'success',
              message: '取消收藏成功'
            })
            searchProduct(this.searchForm).then(res => {
              this.productList = res.data.list
              this.totalPage = res.data.total
            })
          }
        }).catch((err) => {
          throw new Error('取消收藏成功' + err)
        })
      } else {
        // 调用收藏商品接口
        addMarkInfo(this.collectionParams).then(res => {
          if (res.header.ret === '0') {
            this.$message({
              type: 'success',
              message: res.data
            })
            searchProduct(this.searchForm).then(res => {
              this.productList = res.data.list
              this.totalPage = res.data.total
            })
          }
        })
      }
    },
    // 销量 价格排序
    orderBy(data, index) {
      // 销量
      if (index === 1) {
        this.flg = !this.flg
        if (this.flg) {
          data.iactive = 0
          data.sort = 4
        } else {
          data.sort = 5
          data.iactive = 1
        }
        if (data.sort === 4) {
          this.searchForm.sort = 5
        } else {
          this.searchForm.sort = 4
        }
      }
      // 价格
      if (index === 2) {
        this.flg = !this.flg
        if (this.flg) {
          data.iactive = 1
          data.sort = 3
        } else {
          data.iactive = 2
          data.sort = 2
        }
        if (data.sort === 3) {
          this.searchForm.sort = 2
        } else {
          this.searchForm.sort = 3
        }
      }
      // 默认
      if (index === 0) {
        data.iactive = 0
        this.searchForm.sort = 0
      }
      this.icon = ['el-icon-bottom', 'el-icon-bottom', 'el-icon-bottom']
      this.isAction = [false, false, false]
      this.isAction[index] = true
      this.icon[index] = 'el-icon-top'
      this.searchByPrice()
    },
    // 根据价格搜索接口
    searchByPrice() {
      if (this.$route.query.keywordsa && !this.$route.query.keywords) {
        this.searchForm.productClassifies = ''
      }
      if (this.$route.query.id) {
        this.searchForm.keywords = ''
      }
      searchProduct(this.searchForm)
        .then(response => {
          this.productList = response.data.list
          this.totalPage = response.data.total
        })
        .catch(() => {})
      // this.homePageProductList()
    },
    // 加购物车
    addToCar(item) {
      if (this.isLogin) {
        // this.$confirm('没有对比商品，是否加入购物车?', '提示', {
        //   confirmButtonText: '确定',
        //   cancelButtonText: '取消',
        //   type: 'warning'
        // }).then(() => {
        // 调用加入购物车接口
        this.carData.goodsId = item.id // 商品id
        this.carData.goodsName = item.productName // 商品名称
        saveShoppingCart(this.carData)
          .then(res => {
            if (res.header.ret === '0') {
              this.joinCart = true
              // 调用vuex获取购物车列表方法
              const data = {
                pageNo: 1,
                pageSize: 3
              }
              this.$store
                .dispatch('loadShoppingCart', data)
                .then(() => {})
                .catch(() => {})
            }
          }).catch(() => {})
        // }).catch(() => {
        //   this.$message({
        //     type: 'info',
        //     message: '已取消加入'
        //   })
        // })
      } else {
        this.$message({
          type: 'warning',
          message: '请先登录！'
        })
      }
    },
    pickHandle(val) {
      this.searchForm.pageNo = val - 1
      searchProduct(this.searchForm).then(res => {
        if (res.header.ret === '0') {
          this.productList = res.data.list
          this.totalPage = res.data.total
        }
      })
    },
    handleSizeChange(val) {
      if (this.$route.query.keywordsa) {
        this.searchForm.departmentType = ''
      }
      if (this.$route.query.keywords) {
        this.searchForm.keywords = ''
      }
      this.searchForm.pageNo = 0
      this.searchForm.pageSize = val
      searchProduct(this.searchForm).then(res => {
        if (res.header.ret === '0') {
          this.productList = res.data.list
          this.totalPage = res.data.total
        }
      })
    }
    /*    // 校验正整数
    checkNumber(value, type) {
      const reg = /(^[1-9]([0-9]+)?(\.[0-9]{1,2})?$)|(^(0){1}$)|(^[0-9]\.[0-9]([0-9])?$)/
      const computedValue = value.replace(/\s*!/g, '')
      if (!reg.test(computedValue) && computedValue !== '') {
        this.$message({
          type: 'error',
          message: '请输入正确的金额格式'
        })
        if (type === 'min') {
          this.searchForm.priceStart = ''
        }
        if (type === 'max') {
          this.searchForm.priceEnd = ''
        }
      }
    }*/
  }
}
</script>

<style scoped lang="less">
.ui_ceilinglamp {
  margin-top: 25px;
  background-color: #eee;
  height: 44px;
  line-height: 44px;
  .sort {
    li {
      cursor: pointer;
      display: inline;
      span {
        padding: 14px 10px;
        &.active {
          background-color: @orange;
          color: @white;
        }
      }
    }
  }
  .price {
    margin-left: 50px;
    .price_input {
      margin-left: 10px;
      display: inline-block;
      .el-input {
        width: 100px;
      }
      .el-button {
        padding: 6px 13px;
        margin-left: 25px;
        border-color: #fd6b2b;
        background: #fd6b2b;
        &:hover {
          color: #fff;
          background: #fd6b2b;
          border-color: #fd6b2b;
        }
      }
    }
  }
}
.good_list {
  margin: 24px -5px 0;
  .same_goods {
    width: 235px;
    height: 351px;
    background: rgba(255, 255, 255, 0);
    border: 1px solid #eee;
    float: left;
    margin: 0 9px 19px;
    position: relative;
    .lazyimg{
      width: 180px;
      height: 180px;
      margin: 0 auto;
    }
    &:hover {
      border: 1px solid @orange;
      .car {
        background-color: @orange !important;
        color: @white !important;
        .iconfont {
          color: @white !important;
        }
      }
    }
    .active {
      border-color: @orange;
    }
    .p_10 {
      padding: 0 10px;
    }
    i.el-icon-star-on {
      font-size: 16px;
      color: @orange;
      margin-right: 5px;
    }
    i.el-icon-star-off {
      font-size: 16px;
      color: @orange;
      margin-right: 5px;
    }
    .price_amount {
      .same_price {
        color: @orange;
      }
      .amount {
        color: #b9b9b9;
        span {
          color: #999;
        }
      }
    }
    .same_name {
      margin-top: 10px;
      color: #666;
      height: 42px;
    }
    .supplier_name {
      margin: 10px 0;
      color: #666;
      img {
        width: 16px;
        height: 16px;
        vertical-align: middle;
      }
    }
    .sales_number {
      display: flex;
      height: 35px;
      line-height: 35px;
      position: absolute;
      width: 100%;
      bottom: 0;
      .join_button {
        flex: 1;
        text-align: center;
        border-right: 1px solid #eee;
        border-top: 1px solid #eee;
        color: #666;
        &:last-child {
          border-right: 0;
        }
        &.car {
          background-color: #eeeeee;
          color: @orange;
          .iconfont {
            color: @orange;
          }
        }
        .iconfont {
          margin-right: 5px;
          color: @orange;
        }
      }
    }
    dt {
      padding: 10px;
      img {
        width: 212px;
        height: 181px;
      }
    }
  }
}
.cart_null {
  text-align: center;
  dl {
    width: 30%;
    margin: 100px auto;
    display: flex;
    img {
      width: 55px;
      height: 55px;
      vertical-align: middle;
    }
    dd {
      text-align: left;
      margin-left: 10px;
    }
    p {
      line-height: 26px;
      &:nth-last-of-type(1) {
        color: #00aaca;
        cursor: pointer;
      }
    }
  }
}
.shops_concern {
  width: 100%;
  height: 80px;
  display: flex;
  justify-content: space-between;
  border: 1px solid #ccc;
  align-items: center;
  margin-bottom: 10px;
  margin-top: 10px;
  padding: 0 25px;
}
.shops_concern_left {
  display: flex;
  align-items: center;
  img {
    width: 60px;
    height: 60px;
    margin-right: 30px;
  }
}
.shops_concern_right {
  font-size: 18px;
  display: flex;
  align-items: center;
  span {
    &:nth-of-type(1) {
      margin-right: 10px;
    }
  }
}
.actives {
  color: red;
}
i.el-icon-star-on {
  font-size: 16px;
  color: @orange;
  margin-right: 5px;
}
i.el-icon-star-off {
  font-size: 16px;
  color: @orange;
  margin-right: 5px;
}
</style>
