<!--
  @description: 商品对比页面
  @Modifier：lcj
  @routerPath:goodsClassList
  @date：  2019/10/17-18:00
-->
<template>
  <div>
    <el-dialog
      :visible.sync="childensData.dialog"
      :close-on-click-modal="false"
      title="商品对比"
      modal-append-to-body
      append-to-body
      width="1020px"
      custom-class="shop_mall_dialog"
    >
      <div class="middle_width1190">
        <!-- <div class="title">
          <span style="margin-right: 10px;font-size: 18px">商品对比</span>
        </div> -->

        <div class="content">
          <table class="scontrast_table">
            <tr>
              <td>商品情况</td>
              <td
                v-for="(item, index) in detailArray"
                :key="index"
                class="curpo"
                @click="goToDetail(item)"
              >
                <div class="td_inner">
                  <div class="left">
                    <img :src="item.productPicture" alt height="60" width="60">
                  </div>
                  <div class="right">
                    <p>{{ item.productName }}</p>
                    <p>￥{{ item.price }}</p>
                  </div>
                </div>
              </td>
            </tr>
            <tr>
              <td :colspan="detailArray.length + 1" style="text-align: left;line-height: 10px">
                <i icon="el-icon-mobile-phone" />普通属性
              </td>
            </tr>
            <tr class="pinpai_tr">
              <td>品牌</td>
              <td v-for="(item, index) in detailArray" :key="index">
                {{ item.brandName || '无' }}
              </td>
            </tr>
            <tr>
              <td>型号</td>
              <td v-for="(item, index) in detailArray" :key="index">
                {{ item.model || '无' }}
              </td>
            </tr>
            <tr>
              <td>计量单位</td>
              <td v-for="(item, index) in detailArray" :key="index">
                {{ item.unit || '无' }}
              </td>
            </tr>
            <tr>
              <td>供应商名称</td>
              <td v-for="(item, index) in detailArray" :key="index">
                {{ item.departName || '无' }}
              </td>
            </tr>
            <tr>
              <td>商品市场价</td>
              <td v-for="(item, index) in detailArray" :key="index">
                {{ item.marketPrice || '无' }}
              </td>
            </tr>
            <tr>
              <td>销量</td>
              <td v-for="(item, index) in detailArray" :key="index">
                {{ item.salesQuantity || '无' }}
              </td>
            </tr>
            <tr>
              <td>生产地</td>
              <td v-for="(item, index) in detailArray" :key="index">
                {{ item.productArea || '无' }}
              </td>
            </tr>
            <tr>
              <td>规格参数</td>
              <td v-for="(item, index) in detailArray" :key="index" style="width:150px;" class="msgHtmlBox" valign="top" v-html="item.specs" />
            </tr>
            <tr>
              <td>商品详情</td>
              <td v-for="(item, index) in detailArray" :key="index">
                <el-button type="primary" @click="addToCar(item)">
                  查看
                </el-button>
              </td>
            </tr>
            <!-- <tr>
              <td>CPU型号</td>
              <td v-for="(item, index) in detailArray" :key="index" />
            </tr>
            <tr>
              <td>预装系统</td>
              <td v-for="(item, index) in detailArray" :key="index" />
            </tr>
            <tr>
              <td>内存容量</td>
              <td v-for="(item, index) in detailArray" :key="index" />
            </tr>
            <tr>
              <td>显卡类型</td>
              <td v-for="(item, index) in detailArray" :key="index" />
            </tr>
            <tr>
              <td>硬盘容量</td>
              <td v-for="(item, index) in detailArray" :key="index" />
            </tr> -->
          </table>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <!-- <el-button type="primary" @click="doneAddClickBtn">确 定</el-button> -->
        <el-button @click="childensData.dialog = false">取 消</el-button>
      </span>
    </el-dialog>
    <cartDialog :join-cart="joinCart" @joinCartFn="joinCartFn" />
  </div>
</template>

<script>
import cartDialog from '@/components/shoppingmall/shopLayout/shopComponents/cartDialog.vue'
import { mapGetters } from 'vuex'
// import $ from 'jquery'
import { productDetailsBatch, saveShoppingCart } from '@/api/shoppingmall/products'
export default {
  components: {
    cartDialog,
    saveShoppingCart
  },
  props: {
    childensData: {
      type: Object,
      default: function() {
        return
      }
    },
    idsArray: {
      type: Array,
      default: function() {
        return
      }
    }
  },
  data() {
    return {
      carData: {
        goodsId: '', // 商品Id
        number: 1, // 数量
        goodsName: '', // 商品名称
        id: null, // 购物车id
        compreGoodsIds: ''
      },
      joinCart: false,
      seenData: {
        seen: false,
        current: 0
      },
      detailArray: [],
      detaiarras: [],
      pinpai: 0,
      value: '',
      resource: '高亮显示不同项',
      brandName: false
    }
  },
  computed: {
    ...mapGetters([
      'getNewShoppingCart'
    ])
  },
  watch: {
    resource: function(vl) {
      if (vl) {
        if (vl === '合并相同项') {
          this.initStatus()
        }
      }
    }
  },
  created() {
    this.initdata()
  },
  mounted() {
  },
  methods: {
    joinCartFn(val) {
      setTimeout(() => {
        this.joinCart = val
      }, 1500)
    },
    // 加购物车
    addToCar(item) {
      var obj = []
      this.detailArray.forEach(ele => {
        if (ele.id !== item.id) {
          obj.push(ele.id)
        }
      })
      this.$router.push({
        path: '/shop/goodsClassDetail',
        query: { id: item.id, type: '00', ids: obj.join(',') }
      })
      // window.open(routes.href, '_blank')
      // // 调用加入购物车接口
      // this.carData.goodsId = item.id // 商品id
      // this.carData.goodsName = item.productName // 商品名称
      // this.carData.compreGoodsIds = obj.join(',')
      // 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(() => {})
    },
    doneAddClickBtn() {
      this.childensData.dialog = false
    },
    goToDetail(val) {
      this.$router.push({
        path: '/shop/goodsClassDetail',
        query: { id: val.id }
      })
      // window.open(routes.href, '_blank')
    },
    initStatus() {
      if (this.detailArray.length === 2) {
        if (this.detailArray[0].pinpai === this.detailArray[1].pinpai) {
          this.pinpai = 2
          this.value = this.detailArray[0]['brandName']
        }
      }
    },
    initdata() {
      const idsArrays = this.idsArray.join(',')
      productDetailsBatch(idsArrays)
        .then(res => {
          this.detailArray = res.data
        })
        .catch(err => {
          throw new Error('获取商品对比信息失败' + err)
        })
    }
  }
}
</script>

<style scoped lang="less">
.title {
  height: 60px;
  line-height: 60px;
}

.scontrast_table {
  width: 100%;
  tr {
    width: 100%;
  }
  td {
    border: 1px solid #dcdfe6;
    line-height: 30px;
    padding: 10px 16px;
    text-align: center;
    width: 300px;
  }

  tr td:first-child {
    width: 25%;
  }

  tr:first-child {
    height: 100px;
    line-height: 100px;
  }
  .td_inner {
    display: flex;
    justify-content: center;
    align-items: center;
  }
}
.curpo {
  cursor: pointer;
}
.msgHtmlBox{
  /deep/ td{
    border: solid #8c939d 1px;
  }
}
</style>
