<template>
  <view
    class="layout2-card-item"
    @click="handleBindLogin"
    :style="[itemStyleCom]"
    :class="{error_status: cardInfo['card_status'] && cardInfo['card_status'] !== 'Y'}"
  >
    <view v-if="showLeft" class="item-left" @click.stop="toDetail">
      <xd-font-icon
        class="xd-font-icon"
        size="34"
        :color="mainColor"
        icon="iconchakan1"
      ></xd-font-icon>
      <view class="cha_kan" :style="lookStyleUI">{{lookName}}</view>
    </view>
    <view class="item-right">
      <view class="item_info">
        <view class="_title" :class="{card_name: cardInfo['is_gift'] === 'Y'}">
          <view :style="{backgroundColor: mainColor}" v-if="cardInfo['is_gift'] === 'Y'" class="is-gift">赠</view>
          <xd-font-icon
            v-else
            icon="iconkaquan"
            size="38"
            :style="{marginRight: '18rpx'}"
            :color="mainColor"
          ></xd-font-icon>
          <view>{{ cardInfo['card_type_name'] }}</view>
        </view>
        <view class="identify">
          <view class="_id">ID：{{ cardInfo['card_number'] }}</view>
          <view>有效期至：{{ cardInfo['end_time'] }}</view>
        </view>
        <view class="remain">剩余{{ cardInfo['unit'] }}数：{{ cardInfo['card_point'] }}{{ cardInfo['unit'] }}</view>
        <view v-if="cardInfo['other_card_point'] && cardInfo['card_point_type'] !== 1" class="other">购买其他物品可抵：{{ cardInfo['other_card_point'] }}</view>
      </view>
      <view class="btn" :style="loginStyleUI">
        <view v-if="cardInfo['card_status'] && cardInfo['card_status'] !== 'Y'">{{cardInfo['card_status_name']}}</view>
        <view v-else>{{ tabIndex === 1 ? (cardInfo['is_login'] === 'Y'? loggedName : loginName) : "转换" }}</view>
      </view>
    </view>
  </view>
</template>

<script>
import XdFontIcon from "@/components/XdFontIcon/XdFontIcon";
export default {
  name:'XdCardV2',
  components: {
    XdFontIcon
  },
  props: {
    loggedName: {
      type: String,
      default: '已登录'
    },
    lookName:{
      type: String,
      default: '查看'
    },
    loginName:{
      type: String,
      default: '登录'
    },
    cardInfo: {
      type: Object,
      default(){
        return {}
      }
    },
    tabIndex: {
      type: Number,
      default: 1
    },
    mainColor: {
      type: String,
      default: "#FF6A00"
    },
    showLeft: {
      type: Boolean,
      default: true
    },
    loginStyle: {
      type: Object,
      default(){
        return {}
      }
    },
    lookStyle: {
      type: Object,
      default(){
        return {}
      }
    }
  },
  computed:{
    lookStyleUI(){
      let style = this.$xdUniHelper.cloneDeep(this.lookStyle);
      //#ifdef MP-WEIXIN
      return this.styleObjectToString({
        backgroundColor:this.mainColor,
        ...style
      })
      //#endif
      //#ifdef H5
      return {
        backgroundColor:'#FFFFFF',
        ...this.lookStyle,
      }
      //#endif
    },
    loginStyleUI(){
      let style = this.$xdUniHelper.cloneDeep(this.loginStyle);

      if(this.cardInfo['is_login'] === 'Y') {
        style['backgroundColor'] = 'rgb(238, 238, 238)';
        style['color'] = 'rgb(204, 204, 204)'
      }
      //#ifdef MP-WEIXIN
      return this.styleObjectToString({
        backgroundColor:this.mainColor,
        ...style
      })
      //#endif
      //#ifdef H5
      return {
        backgroundColor:this.mainColor,
        ...style
      }
      //#endif

    },

    itemStyleCom(){
      //有票券状态节点
      if(this.cardInfo.card_status){
        if(this.cardInfo.card_status !== 'Y') return {
          WebkitFilter: 'grayscale(100%)',
          filter: 'grayscale(100%)',
          cursor: 'not-allowed',
          position: 'relative',
          opacity: 0.5,
        }
        else return {}
      }
      //兼容老数据
      return {}
    },
  },
  data(){
    return {

    }
  },
  methods: {
    handleBindLogin(){
      //已设置票券状态
      if(this.cardInfo.card_status) {
        if(this.cardInfo.card_status !== 'Y') return;
      }
      this.$emit('bindLogin', this.cardInfo)
    },
    toDetail(){
      //已设置票券状态
      if(this.cardInfo.card_status) {
        if(this.cardInfo.card_status !== 'Y') return;
      }
      this.$emit('toDetail', this.cardInfo)
    }
  }
}
</script>

<style lang="less" scoped>
.layout2-card-item {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  border: unit(2, rpx) solid #eeeeee;
  border-radius: unit(20, rpx);
  margin-bottom: unit(30, rpx);
  background: #fff;

  &.error_status {
    position: relative;
    overflow: hidden;
    &::after {
      content: "";
      position: absolute;
      opacity: 1;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background-color: rgba(0,0,0,.15);
    }
  }

  .card_status_error {
    background: #888;
    border-radius: 0 0 0 8rpx;
    font-size: 28rpx;
    line-height: 64rpx;
    color: #fff;
    position: absolute;
    top: 0;
    right: 0;
    padding: 0 48rpx;
  }
  .item-left {
    min-width: unit(140, rpx);
    display: flex;
    flex-shrink: 0;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-size: unit(24, rpx);
    padding: 0 10rpx;
    .xd-font-icon {
      margin-bottom: unit(10, rpx);
    }
    .cha_kan{
      font-size: unit(22, rpx);
      color: #666666;
      min-width: 60rpx;
      padding: 4rpx 16rpx;
      text-align: center;
    }
  }
  .item-right {
    display: flex;
    flex: 1;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    font-size:unit(24, rpx);
    padding: unit(24, rpx);
    border-left: 1px solid #eeeeee;
    .item_info {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      flex: 1;

      & .card_name {
        display: flex;
        justify-content: flex-start;
        align-items: flex-start;

        & .is-gift {
          margin-top: 2rpx;
          font-size: 18rpx;
          padding: 2rpx 10rpx;
          border-radius: 8rpx;
          line-height:26rpx;
          height: 26rpx;
          color: #fff;
          margin-right: 18rpx;
        }

        & .card_name_text {
          //line-height: 36rpx;
        }
      }

      ._title{
        display: flex;
        font-size: unit(28, rpx);
        color: #333333;
        line-height: unit(32, rpx);
      }
      .identify{
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        font-size: unit(22, rpx);
        color: #999999;
        font-weight: 400;
        margin-top: unit(24, rpx);
        & > view{
          word-break: break-all;
        }

        ._id{
          margin-right: unit(20, rpx);
        }
      }
      .remain{
        font-size: unit(24, rpx);
        color: #333333;
        margin-top: unit(24, rpx);
        line-height: unit(28, rpx);
      }
      .other{
        font-size: unit(22, rpx);
        color: #999999;
        margin-top: unit(8, rpx);
      }
    }
    .btn{
      min-width: unit(84, rpx);
      height: unit(104, rpx);
      padding: 0 unit(16, rpx);
      margin-left: unit(10, rpx);
      flex-shrink: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: unit(8, rpx);
      color: #FFFFFF;
      font-size: unit(28, rpx);
    }
  }
}
</style>
