<template>
  <view style="width: 100%; height: 100vh">
    <zj-page-container>
      <zj-page-fill>
        <view class="accessories_nfo_card_view" v-if="info">
          <view class="input_module">
            <view class="input_module_title">
              <text>配件信息</text>
            </view>
            <view class="input_module_content">
              <view class="input_module_apply_info">
                <block v-for="(item, index) in info.itemList || []" :key="index">
                  <view class="input_module_apply_view">
                    <view class="input_module_apply_title">
                      <view>
                        {{ item.partsName }}
                      </view>
                    </view>
                    <view class="input_module_apply_num">
                      <text class="input_module_apply_number">{{ item.partsNumber }}</text>
                      <view class="input_module_apply_amount">
                        <view class="input_module_apply_counter">
                          <text>*{{ item.quantity }}</text>
                        </view>
                        <text class="apply_amount"> ￥{{ Math.round(item.marketPrice * 1.2 * 100) / 100 }} </text>
                      </view>
                    </view>
                  </view>
                </block>
                <view class="a_combined_sc">
                  合计：<text
                    >￥{{
                      [
                        ...(info.itemList || []).map(
                          item => Math.round(item.marketPrice * 1.2 * item.quantity * 100) / 100
                        ),
                        0
                      ].reduce((a, b) => {
                        return a + b
                      })
                    }}</text
                  >
                </view>
              </view>
            </view>
          </view>
          <view class="accessories_nfo_card">
            <view class="accessories_nfo_ac">
              <view class="accessories_nfo_title"> 申请人: </view>
              <view class="accessories_nfo_info">
                <view> {{ info.workerName }}({{ info.workerId }}) </view>
              </view>
            </view>
            <view class="accessories_nfo_ac">
              <view class="accessories_nfo_title"> 类型: </view>
              <view class="accessories_nfo_info">
                <view>
                  {{ ['普通申请', '急件申请', '备件申请'][info.applyType] }}
                </view>
              </view>
            </view>
            <view class="accessories_nfo_ac">
              <view class="accessories_nfo_title"> 网点: </view>
              <view class="accessories_nfo_info">
                <view>
                  {{ info.websitName }}
                </view>
              </view>
            </view>
            <view class="accessories_nfo_ac">
              <view class="accessories_nfo_title"> 备注信息: </view>
              <view class="accessories_nfo_info">
                <view>
                  {{ info.remark }}
                </view>
              </view>
            </view>
          </view>
          <view class="input_module">
            <view class="input_module_title">
              <text>支付方式</text>
            </view>
            <view class="input_module_as">
              <view class="input_module_as_title"> 微信支付: </view>
              <view class="input_module_as_en">
                <radio value="0" disabled :checked="true" />
              </view>
            </view>
            <view class="input_module_as">
              <view class="input_module_as_title"> 支付网点: </view>
              <view class="input_module_as_en">
                <view class="picker-view">
                  <picker
                    class="picker-select"
                    @change="bindPickerChange"
                    :value="index"
                    :range="websitList"
                    range-key="name"
                  >
                    <view class="picker-select-input">
                      {{ websitList[index] ? websitList[index].name : '请选择' }}
                    </view>
                  </picker>
                  <image
                    class="icon_next"
                    src="/static/images/fittingsManagement/icon_next.png"
                    mode="aspectFill"
                  ></image>
                </view>
              </view>
            </view>
          </view>
        </view>
      </zj-page-fill>
      <bt-container v-if="info">
        <view class="btcon pv30 ph10">
          <!-- abcdef -->
          <!-- <view class="confirm-btn" style="background:#9f9f9f;" @tap.stop="quxiao">取消</view>
					<view class=""  style="width:40upx;">
					</view> -->
          <view class="confirm-btn" @tap.stop="submit">支付</view>
        </view>
      </bt-container>
    </zj-page-container>
  </view>
</template>

<script>
import zjPageContainer from '@/components/zj-page-container/zj-page-container.vue'
import zjPageFill from '@/components/zj-page-container/zj-page-fill.vue'
export default {
  components: {
    zjPageContainer,
    zjPageFill
  },
  data() {
    return {
      info: null,
      option: {},
      websitList: [],
      index: 0,
      bool: false
    }
  },
  onLoad: function (option) {
    this.option = option
    this.getDetails()
  },
  onShow: function () {
    if (this.bool) {
      uni.redirectTo({
        url: `/packageAttachment/pages/applicationParts/state?id=${this.option.id}`
      })
    }
  },
  methods: {
    quxiao() {},
    // 获取网点
    getWebsitInfo(websitId) {
      this.$api
        .post('/app/online/pay-config-list', {
          websitId: websitId,
          category: 'P'
        })
        .then(res => {
          this.websitList = res.data
        })
        .catch(() => {
          this.websitList = []
        })
    },
    // 监听下拉选项
    bindPickerChange(e) {
      this.index = e.detail.value
    },
    getDetails() {
      this.$api
        .post('/app/worker/parts-sales/loadSalesOrderById', this.option)
        .then(res => {
          this.getWebsitInfo(res.data.websitId)
          this.info = res.data
        })
        .catch(() => {})
    },
    submit() {
      this.$api
        .postJson('/app/online/save/sheet-pay-map', {
          payId: this.websitList[this.index].id,
          sheetId: this.info.salesId
        })
        .then(res => {
          if (res.data.code) {
            setTimeout(() => {
              this.bool = true
            }, 1500)
            plus.runtime.openURL(res.data.code)
          }
        })
        .catch(() => {})
    }
  }
}
</script>

<style scoped lang="scss">
@import '@/static/style/accessories_nfo_card.scss';

.abcdef {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: flex-end;
  align-items: center;
}

.picker-view {
  width: 100%;
  height: 58rpx;
  border: 1rpx solid #e5e5e5;
  border-radius: 8rpx;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: space-between;
  align-items: center;
  box-sizing: border-box;
  padding: 0rpx 12rpx;

  .picker-select {
    width: 100%;
    height: 100%;

    .picker-select-input {
      width: 100%;
      height: 100%;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      line-height: 56rpx;
      font-size: 12px;
      font-family: PingFang SC, PingFang SC-Medium;
      font-weight: 500;
      color: #333333;
    }
  }

  .icon_next {
    width: 24rpx;
    height: 24rpx;
    min-width: 24rpx;
    min-height: 24rpx;
    margin-left: 12rpx;
  }
}

.input_module {
  background: #ffffff;
  margin-bottom: 20upx;
  border-radius: 20upx;

  .input_module_as {
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-between;

    .input_module_as_title {
      width: 200upx;
      min-width: 200upx;
      height: 88upx;
      text-align: left;
      font-size: 28upx;
      font-family: PingFang SC, PingFang SC-Medium;
      font-weight: 500;
      text-align: left;
      color: #333333;
      line-height: 28upx;
      box-sizing: border-box;
      padding: 30upx;
    }

    .input_module_as_en {
      width: 100%;
      box-sizing: border-box;
      padding: 30upx 30upx 30upx 0;
    }
  }

  .input_module_title {
    width: 100%;
    box-sizing: border-box;
    padding: 20upx 30upx;
    font-size: 16px;
    font-family: PingFang SC, PingFang SC-Heavy;
    font-weight: 800;
    text-align: left;
    color: #333333;
    line-height: 24px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }

  .input_module_content {
    width: 100%;
    box-sizing: border-box;
    padding: 0 30upx 20upx;
  }

  .input_remark,
  .input_module_apply_info {
    width: 100%;
    height: auto;
    background: #f7f7f7;
    border-radius: 20upx;
    box-sizing: border-box;
    padding: 20upx;
  }

  .input_module_apply_view {
    margin-bottom: 20upx;

    .input_module_apply_title {
      width: 100%;
      font-family: PingFang SC, PingFang SC-Medium;
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      flex-wrap: nowrap;
      margin-bottom: 20upx;

      view {
        width: 100%;
        font-size: 28upx;
        font-weight: 500;
        text-align: left;
        color: #333333;
        line-height: 60upx;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

      .input_module_apply_del {
        width: 120upx;
        min-width: 120upx;
        font-size: 24upx;
        color: red;
        text-align: right;
        line-height: 60upx;
      }
    }

    .input_module_apply_num {
      width: 100%;
      box-sizing: border-box;
      padding-bottom: 20upx;
      border-bottom: 1upx solid #e5e5e5;
      display: flex;
      justify-content: space-between;
      align-items: center;

      .input_module_apply_number {
        font-size: 28upx;
        font-family: PingFang SC, PingFang SC-Medium;
        font-weight: 500;
        text-align: left;
        color: #666666;
      }

      .input_module_apply_amount {
        width: 50%;
        display: flex;
        justify-content: flex-end;
        align-items: center;

        .apply_amount {
          font-size: 28upx;
          font-family: PingFang SC, PingFang SC-Medium;
          font-weight: 500;
          text-align: right;
          color: #333333;
        }

        .input_module_apply_counter {
          width: 45%;
          margin-left: 20upx;
          display: flex;
          justify-content: space-between;
          align-items: center;

          text {
            font-size: 30upx;
            font-family: PingFang SC, PingFang SC-Heavy;
            font-weight: bold;
            text-align: center;
            color: #333333;
          }

          image {
            width: 40upx;
            min-width: 40upx;
            height: 40upx;
            min-height: 40upx;
          }
        }
      }
    }
  }

  .a_combined_sc {
    width: 100%;
    text-align: right;
    font-size: 28upx;
    font-family: PingFang SC, PingFang SC-Medium;
    font-weight: 500;
    text-align: right;
    color: #666666;

    text {
      font-size: 32upx;
      font-family: PingFang SC, PingFang SC-Heavy;
      font-weight: bold;
      text-align: right;
      color: #e95505;
    }
  }
}
</style>
