<template>
  <div class="assets-details-con bg-grey">
    <m-nav-bar title="商品通证详情" background="transparent" light />
    <div class="assets-details-top">
      <div class="top_content">
        <div class="header">
          <div class="left">
            <div class="m-icon" style="border-radius: 50%">
              <img
                :src="transferDetail.thumb"
                mode=""
                style="width: 100%; height: 100%; border-radius: 50%"
              />
            </div>
            <div class="text">
              <div>{{ transferDetail.goodsName }}</div>
              <div>{{ transferDetail.coin }}</div>
            </div>
          </div>
        </div>
        <div class="content">
          <div class="item">
            <div class="my-points-item">
              <div class="label">规格：</div>
              <div class="value">{{skuLabel}}</div>
            </div>
            <div class="my-points-item">
              <div class="label">价格：</div>
              <div class="value">{{ transferDetail.price }}元</div>
            </div>
          </div>
          <div class="item">
            <div class="my-points-item">
              <div class="label">总数：</div>
              <div class="value">{{ transferDetail.number }}</div>
            </div>
            <div class="my-points-item">
              <div class="label">剩余：</div>
              <div class="value">{{ transferDetail.stock }}</div>
            </div>
          </div>
        </div>
        <div class="footer">
          <van-button class="first" plain color="#AEAEAE" @click="handleCancel">
            撤销
          </van-button>
          <van-button type="primary" class="second" @click="handleModifyPrice">
            修改价格
          </van-button>
        </div>
      </div>
    </div>

    <record-list :list="transferDetail.recordList" />

    <modify-price-popup
      v-model="showModifyPrice"
      @confirm="confirmModifyPrice"
    />
  </div>
</template>

<script>
import RecordList from "./record-list.vue";
import ModifyPricePopup from "../list/modify-price-popup.vue";
export default {
  components: { RecordList, ModifyPricePopup },
  data() {
    return {
      transferDetail: {
        recordList: []
      },
      tranId: "",
      coin: "",

      showModifyPrice: false,
    };
  },
  computed: {
    skuLabel(){
      if (this.transferDetail.propValList) {
        return this.transferDetail.propValList.join(" ");
      }
      return "";
    }
  },
  created() {
    let { id } = this.$route.query;
    if (id) {
      this.tranId = id;
      this.requestData();
    }
  },
  watch: {},
  methods: {
    requestData() {
      this.$showLoading();
      this.$api({
        apiName: "getTransferDetail",
        postData: this.tranId,
        success: (res) => {
          this.transferDetail = res;
        },
        complete: () => {
          this.$hideLoading();
        },
      });
    },
    uCopy() {
      this.handleCopy(this.userAssets.address);
    },
    handleCancel() {
      this.$confirm({
        content: "您确定取消该转让信息？",
        confirm: this.confirmCancel,
      });
    },
    confirmCancel() {
      this.$showLoading();
      this.$api({
        apiName: "cancelTransfer",
        postData: this.tranId,
        success: () => {
          this.$toast("已撤销~");
          setTimeout(() => {
            this.goBack();
          }, 1000);
        },
        complete: this.$hideLoading,
      });
    },

    handleModifyPrice() {
      this.showModifyPrice = true;
    },
    confirmModifyPrice(price) {
      this.$showLoading();
      this.$api({
        apiName: "updateTransferPrice",
        postData: {
          tranId: this.tranId,
          price,
          updateTime: this.transferDetail.updateTime,
        },
        success: (res) => {
          this.transferDetail.price = +price;
          this.transferDetail.updateTime = res;
          this.showModifyPrice = false;
        },
        compelte: this.$hideLoading,
      });
    },
  },
};
</script>
<style lang="less">
@import "../../../components/css/assets-and-integral.less";
</style>
