<template>
  <div class="goods-desc-con">
    <div class="price-con flex-default">
      <div class="price">
        <span class="prefix-label">{{ prefixLabel }}</span>
        <m-price :amt="price" />
        <span class="suffix-label" v-if="goodsTypeMap.NORMAL">起</span>
        <!-- <font class="rmb-original">￥3888.8</font> -->
      </div>
      <div class="opt flex-default" v-show="!goodsTypeMap.TRANSFER">
        <m-icon
          className="collect"
          :icon="isCollection ? 'icon-collect3' : 'icon-collect'"
          :size="20"
          @click="colletcion"
        />
        <!-- <m-icon icon="icon-share" :size="22" /> -->
      </div>
    </div>
    <div class="copy-right flex-default" @click="showDialog">
      <div class="left flex-default">
        <m-icon icon="icon-copy-right" />
        <span class="label">版权作品</span>
      </div>
      <div class="right">
        <m-icon :size="10" icon="icon-more" />
      </div>
    </div>
    <div class="name">
      {{ data.name }}
    </div>
    <div class="desc">
      {{ data.description }}
    </div>
  </div>
</template>

<script>
import { TransferType } from "@/enums";
import { sysInfo } from "@/utils/common";
import { mapState } from "vuex";
export default {
  props: {
    data: {
      type: Object,
      default: () => {
        return {};
      },
    },
    goodsId: String,
    goodsTypeMap: Object,
    transferData: Object,
  },
  computed: {
    ...mapState(["appPlatform"]),
    prefixLabel() {
      if (this.goodsTypeMap.PRE_SALE) {
        return "预售价";
      } else if (
        this.goodsTypeMap.TRANSFER &&
        this.transferData.type == TransferType.PACKAGE
      ) {
        return "打包价";
      }
      return "";
    },
    price() {
      if (this.goodsTypeMap.NORMAL || this.goodsTypeMap.NFT) {
        return this.data.defaultPrice;
      } else if (this.goodsTypeMap.TRANSFER) {
        return this.transferData.price;
      }
      return 0;
    },
  },
  data() {
    return {
      isCollection: false,
    };
  },
  created() {
    if (this.hasLogin) {
      this.getisCollections();
    }
  },
  methods: {
    getisCollections() {
      this.$api({
        apiName: "isCollections",
        requiresAuth: false,
        postData: {
          goodsId: this.goodsId,
        },
        success: (res) => {
          this.isCollection = res;
        },
      });
    },
    colletcion() {
      this.$showLoading();
      this.$api({
        apiName: "colletcionsGoodsId",
        postData: {
          goodsId: this.goodsId,
        },
        success: (res) => {
          this.$toast(this.isCollection ? "已取消" : "收藏成功");
          this.getisCollections();
        },
        complete: (res) => {
          this.$hideLoading();
        },
      });
    },
    showDialog() {
      if (this.data.nftFile) {
        if (this.appPlatform === 'mall-ym') {
          this.DownLoad({ nftFile: this.data.nftFile });
        } else {
          this.$toast('请前往APP下载~')
          //  this.$dialog
          //   .confirm({
          //     title: "提示",
          //     message: "是否下载版权作品？",
          //     confirmButtonColor: "#007AFF",
          //     cancelButtonColor: "#007AFF",
          //     cancelButtonText: "否",
          //     confirmButtonText: "是",
          //   })
          //   .then(() => {
          //      window.open(this.data.nftFile);
          //   })
          //   .catch(() => {
          //     // on cancel
          //   });
        }
      } else {
        this.$dialog.alert({
          title: "提示",
          message: "商家暂未上传版权作品源文件",
          confirmButtonColor: "#007AFF",
        });
      }
    },
  },
};
</script>

<style lang="less">
.goods-desc-con {
  background: #ffffff;
  border-radius: 0px 0px 10px 10px;
  margin-bottom: 10px;

  > .price-con {
    padding: 16px;
    justify-content: space-between;
    align-items: center;

    > .price {
      flex: 1;
      display: flex;
      align-items: flex-end;
    }

    > .price .prefix-label {
      color: @mall-primary-color;
      font-size: 12px;
      margin-right: 3px;
    }
    > .price .suffix-label {
      color: @mall-primary-color;
      font-size: 12px;
      margin-left: 3px;
    }

    > .price .rmb-original {
      font-size: 14px;
      color: #aeaeae;
      text-decoration: line-through;
    }

    .opt {
      align-items: center;
    }

    .opt .collect {
      // margin-right: 24px;
    }
  }

  > .name {
    padding: 0 12px;
    color: #140603;
    font-size: 15px;
    font-weight: bold;
    line-height: 20px;
    margin-bottom: 16px;
  }

  > .desc {
    padding: 0 12px 16px 12px;
    color: #aeaeae;
    font-size: 12px;
    line-height: 17px;
  }
  > .copy-right {
    padding: 0 10px;
    margin: 0 16px;
    height: 34px;
    justify-content: space-between;
    background: #fef9eb;
    border-radius: 2px;
    margin-bottom: 18px;
    .label {
      margin-left: 8px;
    }
  }
}
</style>
