<template>
  <view>
    <Loading
    	:type="3"
    	:loadStatus="loadStatus"
    	:showText="errorText"
    />
    <zj-page-layout
      v-if="detail"
    	:hasFooter="true"
    	:isScroll="true"
    	:refresherTriggered="refresherTriggered"
    	@refresherrefresh="refresherrefresh">
      <view class="top-container">
        <view class="user">
          <image :src="detail.userHeadImg ? detail.userHeadImg : require('@/static/logo.png')"></image>
          <view class="info">
            <view class="name">{{detail.userNickName}}</view>
            <view class="phone">{{detail.linkPhone}}</view>
          </view>
        </view>
        <view class="btns">
          <view class="btn share" @tap="isShowShareGuideDialog = true">分享好友</view>
          <view class="btn contact" @click="$callPhone(detail.linkPhone)" v-if="!isMine">联系卖家</view>
          <view class="btn buy" @click="toBuy" v-if="!isMine && detail.status == 'ON'">立即购买</view>
        </view>
      </view>

      <view class="info-container">
        <view class="soldout" v-if="detail.status == 'SALE'">
          <image src="@/static/images/recycle/soldout.png" mode="widthFix"></image>
        </view>
        <view class="title">
          <view class="tit">{{detail.goodsName}}</view>
          <view class="price">{{detail.price | priceFilter2}}</view>
        </view>
        <view class="des">{{detail.goodsNote}}</view>
        <view class="tags">
          <view class="it" v-if="detail.brand">{{detail.brand}}</view>
          <view class="it" v-if="detail.power">{{detail.power}}W</view>
          <view class="it" v-if="detail.mark">{{detail.mark}}</view>
          <view class="it" v-if="detail.makeDate">制造于{{detail.makeDate}}</view>
        </view>
        <view class="info">
          <view class="left">
            <text>{{detail.createTime | timeFilter}}发布</text>
            <text>{{detail.queryCount || 0}}人浏览</text>
          </view>
          <view class="right">
            <text>库存{{detail.qty}}</text>
          </view>
        </view>
        <view class="bottom">
          <view class="it" :class="detail.isPraise ? 'active':''" @tap="handelLike()">
            <text class="iconfont" :class="detail.isPraise ? 'icon-dianzan2' : 'icon-dianzan'"></text>
            <text class="text">{{detail.likeCount || 0}}</text>
          </view>
        </view>
      </view>

      <view class="imgs-container">
        <image :src="item.imgUrl" v-for="(item, index) in detail.imgList" :key="index" mode="widthFix"></image>
      </view>

      <view class="remark-container">
        <view class="title">全部留言</view>
        <!-- <view class="mine" v-if="!isMine">
          <image :src="userInfo.avatar" mode="aspectFill" v-if="userInfo.avatar"></image>
          <image src="@/static/logo.png" mode="aspectFill" v-else></image>
          <view class="box" @click="openRemark()">我也要留言～</view>
        </view> -->
        <view class="list">
          <view class="item" v-for="(item, index) in remarkList" :key="index">
            <view class="top">
              <image :src="item.userHeadImg ? item.userHeadImg : require('@/static/logo.png')"></image>
              <view class="user">
                <view class="name">{{item.userNickName}}</view>
                <view class="time">{{item.createTime}}</view>
              </view>
            </view>
            <view class="content">
              <view class="left">{{item.content}}</view>
              <view class="right" @tap="handelReply(item)" v-if="isMine">
                <text class="iconfont icon-bianji"></text><text>回复</text>
              </view>
            </view>
            <view class="reply" v-if="item.messageReplyList && item.messageReplyList.length > 0">
              <view class="it" v-for="(it, idx) in item.messageReplyList" :key="idx">
                <text class="name">{{it.replyBy}}</text>
                <!-- <text class="tag">卖家</text> -->
                <!-- <text class="text">回复</text> -->
                <!-- <text class="name">{{it.replyNickName}}</text> -->
                ：{{it.content}}
              </view>
            </view>
          </view>
        </view>

        <Loading :type="2" :loadStatus="remarkLoadStatus" :dataList="remarkList" />
      </view>

      <view class="agreement-container" v-if="!isMine">
        <view class="title">购买须知</view>
        <u-parse :content="agreement"></u-parse>
      </view>

      <template slot="footer">
        <view class="bottom-container">
          <view class="right-btns">
            <view class="btn1" @click="openRemark()" v-if="!isMine">我要留言</view>
            <view class="btn2" @click="isShowActionDialog = true" v-if="isMine">操作</view>
          </view>
        </view>
      </template>
    </zj-page-layout>

    <zj-dialog-remark
    	ref="remarkDialog"
    	:isShow="isShowRemarkDialog"
    	@close="isShowRemarkDialog = false"
      @confirm="confirmRemark">
    </zj-dialog-remark>

    <u-action-sheet
      :actions="actionList"
      :title="'操作'"
      :show="isShowActionDialog"
      @close="isShowActionDialog = false"
      @select="selectAction">
    </u-action-sheet>

    <view class="shareGuideDialog" v-if="isShowShareGuideDialog" @tap="isShowShareGuideDialog = false">
      <view class="content">
        <view class="icon">
          <text class="iconfont icon-arrow-up-right"></text>
        </view>
        <view class="text">
          <view>点击右上角</view>
          <view>与好友分享好物！</view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
  import { compareTime, wxShare, getQueryVariable, mini_env } from '@/common/utils/util.js'
	import zjDialogRemark from '@/components/zj-dialog/zj-dialog-remark.vue';

  export default {
    components: {
      zjDialogRemark,
    },

    data() {
      return {
        id: null,
        detail: null,
        remarkList: [],
        loadStatus: 0,
        remarkLoadStatus: 0,
        errorText: '',
        refresherTriggered: false,
        actionList: [],
        isShowActionDialog: false,
        configInfo: {},
        userInfo: {},
        isShowRemarkDialog: false,
        replyId: '',
        agreement: '',
        isShowShareGuideDialog: false,
      }
    },

    computed: {
      isMine() {
        if(this.userInfo) {
          // return this.$store.state.user.userId === this.detail.userId;
          return this.userInfo.isEs
        }
        else {
          return false;
        }
      }
    },

    async onLoad({id}) {
      this.id = id;
      await this.getDetail();
      this.configInfo = await this.$getConfigInfo();
      this.userInfo = await this.$getUserInfo();
      this.getAgreement();

      var appid = getQueryVariable('appid') || getQueryVariable('appId');
      wxShare({
        configInfo: this.configInfo,
        userInfo: this.userInfo,
        title: `分享商品「 ${this.detail.goodsName} 」`,
        desc: `点击前往购买`,
        link: `${process.env.VUE_APP_HREF}/packageHome/pages/recycle/goodsDetail?appid=${appid}&id=${this.id}&serviceId=${this.$store.state.user.userId}`,
        imgUrl: this.detail.imgList[0].imgUrl,
      })

      this.crossPage.$on('refreshRecycleDetail', data => {
        this.crossPage.$emit('refreshRecycleList');
        this.crossPage.$emit('refreshRecycleIssueList');
        this.getDetail();
      });
    },

    onUnload() {
      this.crossPage.$off('refreshRecycleDetail');
    },

    methods: {
      getDetail() {
        return new Promise((resolve, reject) => {
          this.$api.post('/es/goods/detail', {
            id: this.id
          }).then(res => {
            this.detail = res.data;
            this.loadStatus = 0;
            this.remarkList = res.data.messageAndReplyList || [];

            if(this.remarkList.length > 0) {
              this.remarkLoadStatus = 0;
            }else {
              this.remarkLoadStatus = 2;
            }

            let actionList = [
              {name: '已售出', value: 1},
              {name: '下架', value: 2},
              {name: '重新上架', value: 3},
              {name: '编辑', value: 4},
              {name: '克隆商品', value: 5},
            ]
            if(this.detail.status == 'ON') {
              actionList.splice(2, 1);
            }else if(this.detail.status == 'OFF') {
              actionList.splice(1, 1);
            }
            if(this.detail.status == 'SALE') {
              actionList = [
                {name: '克隆商品', value: 5},
              ]
            }
            this.actionList = actionList;
          }).catch(res => {
            this.errorText = res.message;
            this.loadStatus = 2;
          }).finally(res => {
            this.refresherTriggered = false;
            resolve(1);
          })
        })
      },

      getAgreement() {
        this.$api.get('/common/wechat/detail')
        .then(res => {
          this.agreement = res.data.adminCompanyWechatOther.esShopBuyRemarkContent;
        })
      },

      refresherrefresh() {
        this.refresherTriggered = true;
        this.getDetail();
      },

      // 点赞
      handelLike() {
        this.$api.post('/es/goods/praise', {
          id: this.id,
          isPraise: this.detail.isPraise ? false : true
        }).then(res => {
          this.detail.likeCount = res.data.likeCount;
          this.detail.isPraise = res.data.isPraise;
          this.crossPage.$emit('refreshRecycleList');
          this.crossPage.$emit('refreshRecycleSearch');
        })
      },

      openRemark(replyItem) {
        this.$refs.remarkDialog.setValue(replyItem);
        this.isShowRemarkDialog = true;
      },

      // 提交留言
      confirmRemark(val) {
        this.$api.post('/es/goods/message', {
          id: this.id,
          content: val,
          messageId: this.replyId || '',
        }).then(res => {
          this.replyId = '';
          this.isShowRemarkDialog = false;
          this.getDetail();
          this.crossPage.$emit('refreshRecycleList');
          this.crossPage.$emit('refreshRecycleSearch');
        })
      },

      // 回复留言
      handelReply(item) {
        this.replyId = item.id;
        this.openRemark(item);
      },

      toBuy() {
        this.$navToPage({
          url: `/packageHome/pages/recycle/order?id=${this.id}`
        })
      },

      selectAction(e) {
        // 已售出、上架、下架
        if(~[1,2,3].indexOf(e.value)) {
          const statusMap = {
            1: 'SALE', // 已售出
            2: 'OFF', // 下架
            3: 'ON', // 上架
          }
          this.$modal({
            content: `确定要操作${e.name}吗？`
          }).then(() => {
            this.$api.post('/es/goods/update/status', {
              id: this.id,
              status: statusMap[e.value],
            }).then(res => {
              this.$successToast();
              this.getDetail();
              this.crossPage.$emit('refreshRecycleList');
              this.crossPage.$emit('refreshRecycleSearch');
              this.crossPage.$emit('refreshRecycleIssueList');
            })
          }).catch(() => {})
        }
        // 编辑
        else if(e.value === 4) {
          this.$navToPage({
            url: `/packageHome/pages/recycle/issue?id=${this.id}&type=2`
          })
        }
        // 克隆
        else if(e.value === 5) {
          this.$navToPage({
            url: `/packageHome/pages/recycle/issue?id=${this.id}&type=3`
          })
          // this.$modal({
          //   content: `确定要克隆该商品吗？`
          // }).then(() => {
          //   this.$api.post('/es/goods/copy', {
          //     id: this.id,
          //   }).then(res => {
          //     this.$successToast();
          //     this.getDetail();
          //     this.crossPage.$emit('refreshRecycleList');
          //     this.crossPage.$emit('refreshRecycleSearch');
          //     this.crossPage.$emit('refreshRecycleIssueList');
          //   })
          // }).catch(() => {})
        }
      },

    }
  }
</script>

<style lang="scss" scoped>
.top-container {
  background: #ffffff;
  margin-top: 20rpx;
  padding: 30rpx;
  .user {
    display: flex;
    align-items: center;
    image {
      width: 80rpx;
      height: 80rpx;
      border-radius: 50%;
    }
    .info {
      margin-left: 20rpx;
      .name {
        font-size: 28rpx;
      }
      .phone {
        font-size: 24rpx;
        margin-top: 8rpx;
        color: $sec-font;
      }
    }
  }
  .btns {
    display: flex;
    margin-top: 30rpx;
    .btn {
      width: calc((100% - 80rpx) / 3);
      height: 60rpx;
      border-radius: 12rpx;
      font-size: 24rpx;
      color: #ffffff;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-right: 40rpx;
      &:last-child {
        margin-right: 0;
      }
    }
    .share {
      background: $assist-color;
    }
    .contact {
      background: $theme-color;
    }
    .buy {
      background: $minor-color;
    }
  }
}

.info-container {
  background: #ffffff;
  padding: 30rpx;
  margin-top: 20rpx;
  position: relative;
  .soldout {
    position: absolute;
    right: 150rpx;
    top: 20rpx;
    image {
      width: 120rpx;
    }
  }
  .title {
    display: flex;
    justify-content: space-between;
    .tit {
      font-size: 32rpx;
      font-weight: 500;
      text {
        font-size: 28rpx;
        color: $sec-font;
        font-weight: normal;
        margin-left: 12rpx;
      }
    }
    .price {
      font-size: 32rpx;
      color: $minor-color;
      font-weight: 500;
    }
  }
  .des {
    margin-top: 20rpx;
    font-size: 28rpx;
    color: $reg-font;
  }
  .tags {
    margin-top: 12rpx;
    display: flex;
    .it {
      background: #f1f1f1;
      font-size: 20rpx;
      margin-right: 20rpx;
      padding: 8rpx 12rpx;
      border-radius: 8rpx;
    }
  }
  .info {
    display: flex;
    justify-content: space-between;
    margin-top: 20rpx;
    text {
      font-size: 24rpx;
      color: $sec-font;
      margin-right: 20rpx;
      &:last-child {
        margin-right: 0;
      }
    }
  }
  .bottom {
    border-top: 1px solid #eaeaea;
    margin-top: 20rpx;
    padding-top: 20rpx;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    .it {
      display: flex;
      align-items: center;
      margin-left: 30rpx;
      .iconfont {
        font-size: 32rpx;
        color: $sec-font;
      }
      .text {
        font-size: 28rpx;
        margin-left: 6rpx;
        color: $sec-font;
      }
      &.active {
        .iconfont {
          color: $theme-color;
        }
        .text {
          color: $theme-color;
        }
      }
    }
  }
}

.imgs-container {
  margin-top: 20rpx;
  image {
    width: 100%;
    display: block;
  }
}

.agreement-container {
  background: #ffffff;
  margin-top: 20rpx;
  padding: 30rpx;
  .title {
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 500;
    margin-bottom: 30rpx;
  }
  image {
  	width: 100%;
  }
}

.remark-container {
  background: #ffffff;
  margin-top: 20rpx;
  padding: 30rpx;
  .title {
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 500;
  }
  .mine {
    margin-top: 30rpx;
    display: flex;
    image {
      width: 80rpx;
      height: 80rpx;
      border-radius: 50%;
      flex-shrink: 0;
    }
    .box {
      flex: 1;
      height: 80rpx;
      margin-left: 20rpx;
      border-radius: 80rpx;
      background: #f5f5f5;
      display: flex;
      align-items: center;
      padding: 0 30rpx;
      font-size: 28rpx;
      color: $reg-font;
    }
  }
  .item {
    padding: 30rpx 0;
    border-bottom: 1px solid #eaeaea;
    &:last-of-type {
      border: none;
    }
    .top {
      display: flex;
      image {
        width: 80rpx;
        height: 80rpx;
        border-radius: 50%;
        flex-shrink: 0;
      }
      .user {
        margin-left: 20rpx;
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: center;
        .name {
          font-size: 28rpx;
        }
        .time {
          color: $sec-font;
          font-size: 24rpx;
          margin-top: 8rpx;
        }
      }
      .status {
        color: $assist-color;
      }
    }
    .content {
      margin-top: 20rpx;
      display: flex;
      justify-content: space-between;
      align-items: center;
      .left {
        font-size: 28rpx;
        word-break: break-all;
        line-height: 40rpx;
      }
      .right {
        flex-shrink: 0;
        font-size: 24rpx;
        background: #eaeaea;
        display: flex;
        align-items: center;
        padding: 8rpx 12rpx;
        margin-left: 30rpx;
        border-radius: 8rpx;
        .iconfont {
          font-size: 28rpx;
          margin-right: 8rpx;
        }
      }
    }
    .reply {
      background: #f5f5f5;
      border-radius: 8rpx;
      padding: 16rpx 20rpx;
      margin-top: 20rpx;
      .it {
        margin-top: 16rpx;
        font-size: 28rpx;
        line-height: 40rpx;
        word-break: break-all;
        &:hover {
          background: #eaeaea;
        }
        &:first-child {
          margin-top: 0;
        }
        .name {
          color: $theme-color;
        }
        .text {
          color: $sec-font;
          margin: 0 4rpx;
        }
        .tag {
          font-size: 20rpx;
          color: $theme-color;
          background: rgba($color: $theme-color, $alpha: .2);
          height: 40rpx;
          padding: 4rpx 8rpx;
          margin-left: 4rpx;
          border-radius: 4rpx;
        }
      }
    }
  }
}

.bottom-container {
  padding: 20rpx;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  .left-actions {
    width: 45%;
    display: flex;
    align-items: center;
    .item {
      flex: 1;
      display: flex;
      flex-direction: column;
      align-items: center;
      margin: 0 10rpx;
      background: none;
      .iconfont {
        font-size: 44rpx;
        color: $reg-font;
      }
      .text {
        font-size: 24rpx;
        color: $reg-font;
        margin-top: 4rpx;
      }
      &.button {
        line-height: unset;
        padding: 0;
        &::after {
          border: none;
        }
      }
      &.active {
        .iconfont {
          color: $theme-color;
        }
        .text {
          color: $theme-color;
        }
      }
    }
  }
  .right-btns {
    display: flex;
    align-items: center;
    >view {
      height: 76rpx;
      border-radius: 76rpx;
      margin-left: 20rpx;
      padding: 0 30rpx;
      display: flex;
      align-items: center;
      font-size: 28rpx;
      &:first-child {
        margin-left: 0;
      }
      &.btn1 {
        background: rgba($color: $theme-color, $alpha: .2);
        color: $theme-color;
      }
      &.btn2 {
        background: $theme-color;
        color: #ffffff;
      }
    }
  }

}

.shareGuideDialog {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background: rgba($color: #000000, $alpha: .4);
    display: flex;
    justify-content: flex-end;
    .content {
      .icon {
        text-align: right;
        margin-right: 50rpx;
        margin-top: 20rpx;
        text {
          font-size: 52rpx;
          color: #ffffff;
        }
      }
      .text {
        view {
          font-size: 28rpx;
          color: #ffffff;
          margin-top: 12rpx;
          text-align: center;
        }
      }
    }
  }
</style>
