<template>
  <view class="pay-type-list">
    <view class="type-title b-b">{{ title }}</view>
    <view
      v-for="(item, index) in value"
      :key="index"
      class="payCardItem"
      @click="changePayType(item)"
    >
      <view class="type-item">
        <view class="type-item-content">
          <view class="type-item-content-info">
            <image :src="item.icon" class="icon" mode="aspectFit" />
            <view class="content-info-con">
              <view class="content-info-tit">
                <view class="content-info-tit-wrap">
                  <text class="content-info-tit">{{ item.name }}</text>
                </view>
              </view>
            </view>
          </view>
        </view>
        <view class="Pt__radio">
          <radio
            color="#EC1500"
            style="transform:scale(0.7)"
            :checked="item.isDefault"
            :disabled="item.disabled"
          />
          <view class="Pt__radio__mask" />
        </view>
      </view>
    </view>
  </view>
</template>
<script>
const CHANGE_TYPE = "changePayType";
export default {
  name: "PayCard",
  components: {},
  props: {
    value: {
      type: Object,
      default: () => ({})
    },
    title: {
      type: String,
      required: true
    }
  },
  data() {
    return {
      payList: this?.value?.payList || {}
    };
  },
  methods: {
    changePayType(item) {
      this.$emit(CHANGE_TYPE, item);
    }
  }
};
</script>
<style lang="scss">
.Pt__radio {
  position: relative;
  &__mask {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
  }
}

.pay-type-list {
  background-color: #fff;
  border-radius: $border-radius-md;
  margin-top: $margin-base;
  .type-title {
    height: 96rpx;
    line-height: 96rpx;
    font-size: $uni-font-size-lg;
    font-weight: bold;
    padding-left: $padding-md;
    position: relative;
  }
}
.payCardItem {
  padding-bottom: 2rpx;
}
.type-item {
  // height: 134rpx;
  padding: 16rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
  .radio-cls {
    position: absolute;
    right: 8px;
    top: 30px;
  }
  &-content {
    width: 100%;
  }
  &-content-info {
    width: 100%;
    display: flex;
    align-items: center;
  }
}
.icon {
  width: 78rpx;
  height: 78rpx;
  margin-right: $padding-md;
}
</style>
