<template>
  <zj-page-layout :hasFooter="true">
    <view class="all-container" v-if="detail.esOrderInfo">
      <view class="address-container card">
        <view class="left">
          <view class="icon"><text class="iconfont icon-dingwei1"></text></view>
          <view class="hasdata">
            <view class="name">{{ detail.esOrderInfo.userName }}<text>{{ detail.esOrderInfo.userMobile }}</text></view>
            <view class="address ellipsis-2">
              {{ detail.esOrderInfo.province }}{{ detail.esOrderInfo.city }}{{ detail.esOrderInfo.area }}{{ detail.esOrderInfo.street }}{{
                detail.esOrderInfo.receAddress }}
            </view>
          </view>
        </view>
      </view>

      <view class="card goods-container">
        <view class="title">商品信息</view>
        <view class="item">
          <image :src="detail.imgList && detail.imgList[0].imgUrl" mode="aspectFill"></image>
          <view class="right">
            <view class="name ellipsis-2">{{ detail.goodsName }}</view>
            <view class="des">{{ detail.goodsNote }}</view>
            <view class="bottom">
              <view class="price">{{detail.price | priceFilter2}}</view>
              <view class="num">上架<text>{{detail.qty}}</text></view>
              <view class="num" v-if="detail.status == 'SALE' && detail.esOrderInfo">已售<text>{{detail.esOrderInfo.num}}</text></view>
              <view class="num" v-else></view>
            </view>
          </view>
        </view>
        <view class="total">订单总金额<text>{{detail.esOrderInfo.totalAmount | priceFilter2}}</text></view>
      </view>

      <view class="info-container card">
        <view class="title">订单信息</view>
        <view class="row">
          <view class="label">订单编号</view>
          <view class="value">{{detail.esOrderInfo.esOrderId}}</view>
        </view>
        <view class="row">
          <view class="label">创建时间</view>
          <view class="value">{{detail.esOrderInfo.createTime}}</view>
        </view>
        <view class="row" v-if="detail.esOrderInfo.payType == 'WECHAT'">
          <view class="label">付款时间</view>
          <view class="value">{{detail.esOrderInfo.payTime}}</view>
        </view>
        <view class="row">
          <view class="label">支付方式</view>
          <view class="value">{{{WECHAT: '在线支付', CASH: '到店支付'}[detail.esOrderInfo.payType]}}</view>
        </view>
        <view class="row" v-if="detail.esOrderInfo.payType == 'WECHAT'">
          <view class="label">支付单号</view>
          <view class="value">{{detail.esOrderInfo.transactionId}}</view>
        </view>
      </view>

      <view class="form-container card" v-if="type == 1">
        <view class="title">收款信息</view>
        <view class="row aic">
          <view class="label"><text>*</text>收款金额</view>
          <u--input placeholder="请输入" border="surround" type="number" v-model="receiptForm.amount"></u--input>
        </view>
        <view class="row">
          <view class="label">收款凭证</view>
          <view class="images">
            <view class="img" v-for="(it, idx) in receiptForm.imageList">
              <image :src="it" mode="aspectFill" @tap="prevImg(it)"></image>
              <text class="iconfont icon-guanbi1" @tap="delImage(idx)"></text>
            </view>
            <view class="add" @tap="addImage()" v-if="receiptForm.imageList.length < 3">
              <text class="iconfont icon-jiahao"></text>
              <text class="text">上传图片</text>
            </view>
          </view>
        </view>
        <view class="row">
          <view class="label">备注</view>
          <u--textarea v-model="receiptForm.remark" placeholder="请输入" ></u--textarea>
        </view>
      </view>

      <view class="form-container card" v-if="type == 2">
        <view class="title">发货信息</view>
        <view class="row aic">
          <view class="label"><text>*</text>发货方式</view>
          <u-radio-group v-model="deliverForm.way" placement="row">
          	<u-radio name="1" label="自提"></u-radio>
          	<u-radio name="2" label="物流快递"></u-radio>
          </u-radio-group>
        </view>
        <view class="row aic" v-if="deliverForm.way == 2">
          <view class="label"><text>*</text>物流公司</view>
          <view class="picker" @tap="openCompanyDialog">
            <view class="value" v-if="deliverForm.companyName">{{deliverForm.companyName}}</view>
            <view class="placeholder" v-else>请选择<text class="iconfont icon-jinru"></text></view>
          </view>
        </view>
        <view class="row aic" v-if="deliverForm.way == 2">
          <view class="label"><text>*</text>物流单号</view>
          <u--input placeholder="请输入" border="surround" type="number" v-model="deliverForm.order"></u--input>
        </view>
      </view>
    </view>

    <template slot="footer" v-if="type">
      <view class="footer-btn-group">
        <u-button type="primary" text="确认收款" v-if="type == 1" @click="submitReceipt"></u-button>
        <u-button type="primary" text="确认发货" v-if="type == 2" @click="submitDeliver"></u-button>
      </view>
    </template>

    <zjDialogPicker
      ref="bankDialog"
      :isShow="isShowCompanyDialog"
      :multiple="false"
      :styleType="2"
      isSearch
      :title="'物流公司'"
      :list="companyList"
      :keyName="'name'"
      @search="searchCompany"
      @cancel="isShowCompanyDialog = false"
      @confirm="confirmCompanyDialog">
    </zjDialogPicker>

  </zj-page-layout>
</template>

<script>
  import { uploadImgFull } from '@/common/utils/util.js';
	import zjDialogPicker from "@/components/zj-dialog/zj-dialog-picker.vue";

  export default {
    components: {
    	zjDialogPicker
    },

    data() {
      return {
        type: 0,
        id: null,
        detail: {},

        receiptForm: {
          amount: '',
          imageList: [],
          remark: '',
        },

        deliverForm: {
          way: '1',
          companyId: '',
          companyName: '',
          order: '',
        },
        companyList: [],
        isShowCompanyDialog: false,
      }
    },

    async onLoad({id, type}) {
      this.type = type || 0;
      this.id = id;
      this.getDetail();
    },

    methods: {
      getDetail() {
        this.$api.post('/es/goods/detail', {
          id: this.id
        }).then(res => {
          this.detail = res.data;
        })
      },

      getCompanyList(keyword = '') {
        this.$api.get('/common/express/company').then(res => {
          this.companyList = keyword ? res.data.filter(o => o.name.indexOf(keyword) >= 0) : res.data;
        })
      },

      openCompanyDialog() {
        this.getCompanyList();
        this.isShowCompanyDialog = true;
      },

      searchCompany(keyword) {
        this.getCompanyList(keyword);
      },

      confirmCompanyDialog(e) {
        const item = this.companyList[e[0]];
        this.deliverForm.companyId = item.id;
        this.deliverForm.companyName = item.name;
        this.isShowCompanyDialog = false;
      },

      // 添加图片
      async addImage() {
      	uni.chooseImage({
      		count: 3 - this.receiptForm.imageList.length,
          sizeType: ['compressed'],
      		success: res => {
      			uni.showLoading();
      			res.tempFilePaths.forEach(async item => {
      				let data = await uploadImgFull(item);
              this.receiptForm.imageList.push(data.url);
      			});
      			uni.hideLoading();
      		},
      		fail: err => {}
      	})
      },

      // 删除图片
      delImage(idx) {
        this.receiptForm.imageList.splice(idx, 1);
      },

      // 预览图片
      prevImg(url) {
      	uni.previewImage({
      		current: url,
      		urls: this.receiptForm.imageList
      	})
      },

      // 确认收款
      submitReceipt() {
        if(!this.receiptForm.amount) return this.$toast('请输入收款金额');

        this.$api.post('/es/orderPay/payPrice', {
          esOrderId: this.detail.esOrderInfo.esOrderId,
          price: this.receiptForm.amount,
          fileUrl: this.receiptForm.imageList.join(','),
          remark: this.receiptForm.remark,
        }).then(res => {
          this.$successToast();
          this.crossPage.$emit('refreshRecycleIssueList');
          this.$navToPage({
          	delta: 1
          }, 'navigateBack')
        })
      },

      // 确认发货
      submitDeliver() {
        if(!this.deliverForm.way) return this.$toast('请选择发货方式');
        if(this.deliverForm.way == 2 && !this.deliverForm.companyId) return this.$toast('请选择物流公司');
        if(this.deliverForm.way == 2 && !this.deliverForm.order) return this.$toast('请输入物流单号');

        this.$api.post('/es/orderPay/send', {
          esOrderId: this.detail.esOrderInfo.esOrderId,
          pickType: this.deliverForm.way == 1 ? 'YES' : 'NO',
          logisticsCode: this.deliverForm.way == 1 ? '' : this.deliverForm.companyId,
          logisticsName: this.deliverForm.way == 1 ? '' : this.deliverForm.companyName,
          logisticsNo: this.deliverForm.way == 1 ? '' : this.deliverForm.order,
        }).then(res => {
          this.$successToast();
          this.crossPage.$emit('refreshRecycleIssueList');
          this.$navToPage({
          	delta: 1
          }, 'navigateBack')
        })
      },
    }
  }
</script>

<style lang="scss" scoped>
.all-container {
  padding: 0 20rpx 20rpx;
}

.card {
  @include zj-card;
  background: #FFFFFF;
  border-radius: 20rpx;
  margin-top: 20rpx;
  padding: 0 20rpx;
}

.address-container {
  background: #FFFFFF;
  border-radius: 20rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 150rpx;
  padding: 0 20rpx;

  .right {
    font-size: 32rpx;
    color: $sec-font;
    flex-shrink: 0;
  }

  .left {
    display: flex;
    align-items: center;
    margin-right: 20rpx;

    .icon {
      width: 52rpx;
      height: 52rpx;
      border-radius: 50%;
      background: $theme-color;
      display: flex;
      flex-shrink: 0;
      justify-content: center;
      align-items: center;
      margin-right: 20rpx;

      .iconfont {
        font-size: 36rpx;
        color: #ffffff;
      }
    }

    .nodata {
      font-size: 28rpx;
      color: #999999;
    }

    .hasdata {
      .name {
        font-size: 32rpx;
        color: #333333;

        text {
          color: #999999;
          font-size: 28rpx;
          margin-left: 16rpx;
        }
      }

      .address {
        font-size: 28rpx;
        color: #666666;
        line-height: 34rpx;
        margin-top: 10rpx;
      }
    }
  }
}

.goods-container {
  .title {
    font-size: 32rpx;
    margin-top: 20rpx;
    font-weight: 500;
  }
  .item {
    padding: 20rpx 0;
    display: flex;
    align-items: center;
    background: #FFFFFF;
    border-bottom: 1px solid #eaeaea;
    image {
      width: 140rpx;
      height: 140rpx;
      display: block;
      margin-right: 20rpx;
      flex-shrink: 0;
    }
    .right {
      flex: 1;
      .name {
        font-size: 28rpx;
        color: #333333;
        line-height: 36rpx;
      }
      .des {
        font-size: 24rpx;
        color: #999999;
        margin-top: 8rpx;
      }
      .bottom {
        display: flex;
        align-items: center;
        margin-top: 12rpx;
        view {
          flex: 1;
          &:nth-child(3) {

          }
        }
        .price {
          font-size: 28rpx;
          color: $minor-color;
          font-weight: 600;
        }
        .num {
          font-size: 28rpx;
          margin-left: 12rpx;
          text-align: right;
          color: $sec-font;
          text {
            color: $main-font;
            margin-left: 8rpx;
            font-weight: 500;
          }
        }
      }
    }
  }
  .total {
    height: 80rpx;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    font-size: 28rpx;
    text {
      font-size: 32rpx;
      color: $minor-color;
      font-weight: 500;
      margin-left: 8rpx;
    }
  }
}

.info-container {
  padding-bottom: 30rpx;
  .title {
    font-size: 32rpx;
    margin-top: 20rpx;
    font-weight: 500;
  }
  .row {
    display: flex;
    align-items: center;
    margin-top: 20rpx;
    .label {
      font-size: 28rpx;
      color: $sec-font;
      margin-right: 20rpx;
      flex-shrink: 0;
    }
    .value {
      font-size: 28rpx;
    }
  }
}

.form-container {
  padding-bottom: 30rpx;
  .title {
    font-size: 32rpx;
    margin-top: 20rpx;
    font-weight: 500;
  }
  .row {
    display: flex;
    margin-top: 30rpx;
    &.aic {
      align-items: center;
      .label {
        line-height: 1 !important;
      }
    }
    .label {
      width: 140rpx;
      text-align: right;
      font-size: 28rpx;
      margin-right: 20rpx;
      line-height: 38px;
      flex-shrink: 0;
      text {
        color: red;
      }
    }
    ::v-deep .u-radio {
      margin-right: 30rpx;
    }
    .picker {
      .placeholder {
        color: $theme-color;
        font-size: 28rpx;
      }
      .value {
        font-size: 28rpx;
      }
    }
    .images {
      display: flex;
      flex-wrap: wrap;
      .add {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        width: 146rpx;
        height: 146rpx;
        border: 2rpx dashed #dadada;
        border-radius: 10rpx;
        .iconfont {
          font-size: 48rpx;
          color: #999999;
        }
        .text {
          font-size: 24rpx;
          color: #999999;
          margin-top: 10rpx;
        }
      }
      .img {
        position: relative;
        margin-right: 20rpx;
        &:nth-child(4n) {
          margin-right: 0;
        }
        image {
          width: 150rpx;
          height: 150rpx;
          border-radius: 10rpx;
          overflow: hidden;
          display: block;
        }
        text {
          position: absolute;
          right: -10rpx;
          top: -10rpx;
          width: 40rpx;
          height: 40rpx;
          border-radius: 50%;
          background: #FF3F42;
          font-size: 24rpx;
          color: #FFFFFF;
          text-align: center;
          line-height: 40rpx;
          display: block;
        }
      }
    }
  }
}

</style>
