<template>
  <div class="xd-store-product">
    <div @click="handleToDetail" :style="{cursor:isJump?'pointer':'',minWidth: (width * (isPC ? 1: 2/3) + 200) + 'px'}">
      <div
        class="xd-store-product__image"
        v-if="list.thumb"
        :style="{width: width* (isPC ? 1: 2/3) + 'px', height:height* (isPC ? 1: 2/3) + 'px'}"
      >
        <el-image :src="getUrl(list.thumb)" fit="contain"></el-image>
      </div>
      <div class="xd-store-product__text">
        <div class="xd-store-product__text-title">
          <template v-if="list.icon">
            <div class="xd-store-product__text-title-icon" v-if="isArray(list.icon)">
              <div></div>
            </div>
            <div v-else class="xd-store-product__text-title-icon">
              <div
                :style="{
								color:getIconColor(list.icon).text ,
								background: getIconColor(list.icon).bg,
								border:`1px solid ${getIconColor(list.icon).text}`
							}"
              >
                <span>{{list.icon}}</span>
              </div>
            </div>
          </template>
          <div class="xd-store-product__text-title-name">
            {{list.title}}
             <i
              style="cursor: pointer;margin-left: 10px"
              class="el-icon-copy-document"
              @click.stop="copy(list.specific?list.title+' '+list.specific:list.title)"
            ></i>
          </div>
          <div class="clearfix"></div> 
        </div>
        <div class="xd-store-product__text-specific" v-if="list.specific" v-html="list.specific"></div>
        <div class="xd-store-product__text-status" v-if="list.status">
          <el-link @click.stop="handleDetail" type="danger" :underline="false">{{list.status}}</el-link>
          <el-link @click.stop="handleSearchPrice" type='primary' :underline="false" style="margin-left:5px" v-if="(!price&&aftersale_status==='P')||(aftersale_status==='P'&&price&&index!==searchIndex)">查询已退金额</el-link>
          <div v-if="price&&aftersale_status==='P'&&index===searchIndex" class="red">（已退{{price}}元）</div>
        </div>
        <div class="xd-store-product__text-brand" v-if="list.brand_name">
          <span>品牌: </span>
          <span>{{list.brand_name}}</span>
        </div>
        <div class="xd-store-product__text-brand" v-if="list.shop_name">
          <span>提货门店: </span>
          <span>{{list.shop_name}}</span>
        </div>
        <div
          class="xd-store-product__text-notice"
          :style="{background: uiNoticeBg}"
          v-if="list.notice"
          v-html="list.notice"
        ></div>
      </div>
    </div>
  </div>
</template>

<script>
const color = require('color')

export default {
  name: "XdStoreProduct",
  props: {
    list: {
      type: Object,
      required: true,
    },
    noticeBg: {
      type: String | null,
      default: null
    },
    width: {
      type: Number | String,
      default: 133
    },
    height: {
      type: Number | String,
      default: 100
    },
    iconColor: {
      type: Object | null,
      default () {
        return null
      }
    },
    iconTypeList: {
      type: Array,
      default() {
        return []
      }
    },
    isJump: {
      type: Boolean,
      default: false
    },
    price: {
      type: Number | String,
      default: 0
    },
    aftersale_status: {
      type: String,
      default: ''
    },
    index: {
      type: Number | String,
      default: 0
    },
    searchIndex: {
      type: Number | String,
      default: 0
    },
  },
  data () {
    return {
      uiNoticeBg: '',
      iconType: ['实', '电', '虚', '生', '线', '卡', '核'],
      uiIconColor: {},
      xdVariable: [],
      isPC: true,
    }
  },
  created () {
    //合并简称
    if(this.$xdHelper.checkVarType(this.iconTypeList) ==='array') {
      let temp = [];
      this.iconTypeList.map(item=>{
        let flag = null;
        this.iconType.map(it=>{
          if(item === it) flag = item;
        });
        if(flag === null) {
          temp.push(item);
        }
      });
      this.iconType = this.iconType.concat(temp);
    }
    
    this.isPC = this.$xdHelper.isPC()
    if (this.noticeBg === null) {
      this.uiNoticeBg = `rgba(${color(this.$variables['menuActiveText'])['alpha'](0.1).array().join(',')})`
    } else this.uiNoticeBg = this.noticeBg

    //icon颜色未设置使用默认验证进行循环
    if (this.iconColor === null) {
      let tempXd = []
      Object.keys(this.$variables).map(key => {
        let reg = /^(xd).+$/
        if (reg.test(key)) {
          tempXd.push(this.$variables[key])
        }
      })
      this.xdVariable = tempXd
      this.iconType.map((item) => {
        let col = this.xdVariable.shift()
        this.uiIconColor[item] = {
          text: col,
          bg: `rgba(${color(col)['alpha'](0.1).array().join(',')})`
        }
      })
    }

  },
  methods: {
    checkUrl(url) {
      let reg = /^\/.+$/;
      if (reg.test(url)) return url;
      else return `/${url}`
    },
    getUrl(item) {
      let reg = /^(http:\/\/)|(https:\/\/)|(\/\/).+$/;
      if (this.$xdHelper.checkVarType(item) === 'string') {
        if (reg.test(item)) {
          return item
        } else {
          return this.getImageFullPath(this.checkUrl(item), 'size8')
        }
      }
      if (this.$xdHelper.checkVarType(item) === 'object') {
        let src = item.src || item.url;
        if (reg.test(src)) return src
        else {
          return this.getImageFullPath(this.checkUrl(src), 'size8')
        }
      }
    },
    
    isArray (icon) {
      return this.$xdHelper.checkVarType(icon) === 'array'
    },

    getIconColor (icon) {
      if (this.uiIconColor[icon]) return this.uiIconColor[icon]
      else return this.uiIconColor[this.uiIconColor.length - 1]
    },
    handleDetail(){
      this.$emit('onClick', this.list)
    },
    handleSearchPrice(){
      this.$emit('searchPrice', this.list)
    },
    handleToDetail() {
      this.$emit('toDetail', this.list)
    },
    copy (data) {
      window['$mainMiddleware'].copy(data)
    },
  }
}
</script>

<style scoped lang="scss">
.xd-store-product {
  text-align: left;

  & > div {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    padding: 10px 10px 10px 0;
  }

  &__image {
    display: flex;
    justify-content: center;
    align-items: center;
    background: #fff;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    flex-shrink: 0;
    margin-right: 20px;
    padding: 3px;
    
    & > * {
      width: 100%;
      height: 100%;
      overflow: auto;
    }
  }

  &__text {
    flex: 1;

    &-title {
      line-height: 20px;
      &-icon {
        display: inline-block;
        float: left;
        & > div {
          display: inline-block;
          width: 17px;
          height: 17px;
          line-height: 17px;
          text-align: center;
          font-size: 12px;
          border-radius: 3px;
          margin-right: 5px;

          & > * {
            display: inline-block;
            width: 17px;
            height: 17px;
            line-height: 17px;
            text-align: center;
            transform: scale(0.95);
            margin-left: -1px;
          }
        }
      }

      &-name {
        max-height: 40px;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
      }
    }
    &-specific {
      color: #999;
      font-size: 13px;
      line-height: 18px;
      margin-top: 5px;
    }
    &-notice {
      padding: 5px;
      border-radius: 4px;
      font-size: 12px;
      color: #666;
      margin-top: 5px;
    }
    &-status {
      margin-top: 5px;
      font-size: 12px;
      display: flex;

      & ::v-deep * {
        font-size: 12px;
        cursor: pointer;
      }
    }
    
    &-brand {
      margin-top: 5px;
      font-size: 12px;
      color: #999;
  
      & ::v-deep * {
        font-size: 12px;
        cursor: default;
      }
    }
  }
}

@media screen and (max-width: 768px) {
  .xd-store-product {
    width: 100%;
    overflow-x: auto;
    padding-bottom: 5px;

    & > div {
      padding: 5px;
    }

    &__image {
      margin-right: 10px;
      
    }
  }
}

</style>
