<template>
  <!-- #ifdef H5 -->
  <zj-page-layout :hasFooter="true">
    <view class="all-container">
      <view class="common-title">产品信息</view>
      <view class="product-container card">
        <view class="it" v-for="(item, index) in goodsList" :key="index">
          <view class="name"
            >{{ item.goodsName }}<text>×{{ item.num }}{{ item.goodsUnit }}</text></view
          >
          <view class="price">¥{{ (item.goodsAmount * item.num) | priceFilter }}</view>
        </view>
        <view class="total">
          <view class="text">合计：</view>
          <view class="price">¥{{ totalPrice | priceFilter }}</view>
        </view>
      </view>

      <block v-if="type == 'P' && serviceList.length > 0">
        <view class="common-title">服务费用</view>
        <view class="form-container card">
          <view class="item" v-for="(item, index) in serviceList" :key="index">
            <view class="label"
              >{{ item.goodsName }}<text>×{{ item.num }}</text></view
            >
            <u--input placeholder="请输入单价" border="none" inputAlign="right" v-model="item.goodsAmount"></u--input>
          </view>
          <view class="total">
            <view class="text">合计：</view>
            <view class="price">¥{{ totalServicePrice | priceFilter }}</view>
          </view>
        </view>
      </block>

      <view class="common-title">备注</view>
      <view class="remark-container card">
        <u--textarea v-model="remark" placeholder="请输入内容" border="none" autoHeight></u--textarea>
      </view>
    </view>

    <template slot="footer">
      <view class="bottom-container">
        <view class="left">
          <view class="text">共{{ totalNum }}件，合计：</view>
          <view class="price" v-if="type == 'P' && serviceList.length > 0"
            >¥{{ (totalPrice + totalServicePrice) | priceFilter }}</view
          >
          <view class="price" v-else>¥{{ totalPrice | priceFilter }}</view>
        </view>
        <view class="btn">
          <u-button type="primary" text="确认订单" @click="submitData(1)"></u-button>
        </view>
      </view>
    </template>
  </zj-page-layout>
  <!-- #endif -->

  <!-- #ifndef H5 -->
  <web-view
    :src="webViewHref(`/packageMaterial/pages/sale/order`, pam, crossPagePam)"
    @message="crossPage.$listener"
  ></web-view>
  <!-- #endif -->
</template>

<script>
// #ifdef H5
export default {
  data() {
    return {
      type: 'M',
      userMobile: '',
      orderNo: '',
      // salesType: 'OUT',
      salesType: null,
      brandId: null,
      brandName: null,
      categoryId: null,
      categoryName: null,
      websitId: null,
      websitName: null,
      wbId: null, // 维保工单
      wbIsAllFee: null, // 维保工单是否包含全部费用
      wbPayType: null, // 维保工单费用支付方式
      goodsList: [],
      serviceList: [],

      remark: '',
    }
  },

  computed: {
    totalNum() {
      // let val = 0;
      // this.goodsList.forEach(item => {
      //   val = val + item.num;
      // })
      return this.goodsList.length;
    },
    totalPrice() {
      let val = 0;
      this.goodsList.forEach(item => {
        val = val + (item.num * (item.goodsAmount * 100) / 100);
      })
      return  val;
    },
    totalServicePrice() {
      let val = 0;
      this.serviceList.forEach(item => {
        val = val + (item.num * (item.goodsAmount * 100) / 100);
      })
      return  val;
    },
  },

  onLoad() {
    let data = this.$getStorage('materialSaleData');
    if(data) {
      this.type = data.type;
      this.userMobile = data.userMobile;
      this.orderNo = data.orderNo;
      // this.salesType = data.salesType;
      // this.brandId = data.brandId;
      // this.brandName = data.brandName;
      this.categoryId = data.categoryId;
      this.categoryName = data.categoryName;
      this.websitId = data.websitId;
      this.websitName = data.websitName;
      this.wbIsAllFee = data.wbIsAllFee;
      this.wbPayType = data.wbPayType;
      if(this.type == 'P') {
        this.goodsList = data.goodsList.filter(o => o.normType == 'M');
        this.serviceList = data.goodsList.filter(o => o.normType == 'S');
        this.serviceList.forEach(o => {
          o.goodsAmount = '';
        })
      }else {
        this.goodsList = data.goodsList;
      }
    }
    this.$removeStorage('materialSaleData');

  },

  methods: {


    confirmPartsDialog(e) {
      this.parts = this.partsList[e[0]];
      this.isShowPartsDialog = false;
    },

    submitData(type) {
      let serviceList = JSON.parse(JSON.stringify(this.serviceList));
      if(this.type == 'P') {
        for(let i = 0; i < serviceList.length; i++) {
          if(!serviceList[i].goodsAmount && serviceList[i].goodsAmount !== 0) {
            return this.$toast('请输入服务费用价格');
          }
        }
        serviceList.forEach(item => {
          item.normAmount = Number(item.goodsAmount);
        })
      }
      let goodsList = [
        ...JSON.parse(JSON.stringify(this.goodsList)),
        ...serviceList
      ];

      let url = '', params = {};
      url = '/pay/buy';
      params.workerOrderItems = goodsList;

      this.$api.postJson(url, {
        settlementType: this.salesType,
        goodsType: this.type,
        remark: this.remark,
        userMobile: this.userMobile,
        workerOrderId: this.orderNo,
        categoryId: this.categoryId || '',
        categoryName: this.categoryName || '',
        websitId: this.websitId,
        websitName: this.websitName,
        ...params,
      }).then(res => {
        this.$navToPage({
          url: `/packageMaterial/pages/sale/pay?handleOrderId=${res.data}&wbId=`
        })
      })
    },
  },
}

// #endif
// #ifndef H5
export default {
  data() {
    return {
      pam: {},
    }
  },
  onLoad(pam) {
    this.pam = pam;
  }
}
// #endif
</script>

<style lang="scss" scoped>
.all-container {
  padding: 0 20rpx;
}
.common-title {
  font-size: 32rpx;
  font-weight: 600;
  margin-top: 30rpx;
}
.card {
  @include zj-card;
  margin-top: 20rpx;
  padding: 30rpx;
}
.product-container {
  .it {
    display: flex;
    align-items: flex-end;
    margin-bottom: 20rpx;
    .name {
      flex: 1;
      font-size: 28rpx;
      font-weight: 500;
      text {
        color: $sec-font;
        margin-left: 12rpx;
        font-weight: normal;
      }
    }
    .price {
      margin-left: 30rpx;
      font-size: 28rpx;
      font-weight: 500;
    }
  }
  .total {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    margin-top: 30rpx;
    .text {
      font-size: 28rpx;
      color: $sec-font;
    }
    .price {
      font-size: 28rpx;
      color: $minor-color;
      font-weight: 500;
    }
  }
}

.remark-container {
  padding: 0;
  ::v-deep .u-textarea {
    padding: 20rpx 30rpx;
    min-height: 200rpx;
  }
}

.form-container {
  .item {
    height: 50rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 30rpx;
    &:first-child {
      margin-top: 0;
    }
    .label {
      margin-right: 30rpx;
      flex-shrink: 0;
      text {
        color: $sec-font;
        margin-left: 12rpx;
        font-weight: normal;
      }
    }
    .picker {
      display: flex;
      align-items: center;
      .placeholder {
        color: $sec-font;
      }
      .iconfont {
        margin-left: 12rpx;
        color: $sec-font;
      }
    }
    .value {
      flex: 1;
      text-align: right;
    }
  }
  .total {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    margin-top: 30rpx;
    .text {
      font-size: 28rpx;
      color: $sec-font;
    }
    .price {
      font-size: 28rpx;
      color: $minor-color;
      font-weight: 500;
    }
  }
}
.bottom-container {
  padding: 20rpx;
  display: flex;
  align-items: center;
  justify-content: space-between;
  .left {
    display: flex;
    align-items: center;
    .text {
      font-size: 28rpx;
      color: $sec-font;
    }
    .price {
      font-size: 32rpx;
      color: $minor-color;
      font-weight: 500;
    }
  }
  .btn {
    width: 180rpx;
  }
}
</style>
