<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.qty }}</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.qty * 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>
      </zj-page-fill>
      <view class="bottom-container" v-if="info">
        <u-button type="primary" text="提交订单" @click="submit"></u-button>
      </view>
    </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
    }
  },
  onLoad: function (option) {
    this.getDetails(option)
  },
  methods: {
    getDetails(option) {
      this.$api
        .post('/app/worker/parts-sales/loadSalesOrderById', option)
        .then(res => {
          this.info = res.data
        })
        .catch(() => {})
    },
    submit() {
      this.$api
        .post('/app/worker/parts-sales/submit', {
          id: this.info.id
        })
        .then(res => {
          if (res.code === 1) {
            uni.redirectTo({
              url: `/packageAttachment/pages/applicationParts/orderPayment?id=${res.data.id}`
            })
          } else {
            uni.showModal({
              title: '提示',
              content: res.message,
              showCancel: false
            })
          }
        })
        .catch(() => {})
    }
  }
}
</script>

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

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

  .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>
