<template>
  <view class="apply-return-of-new-piece" style="width: 100%; height: 100vh">
    <zj-page-container>
      <zj-page-fill>
        <view v-if="form">
          <view class="input_module">
            <view class="input_module_as">
              <view class="input_module_as_title"> 申请人 </view>
              <view class="input_module_as_en">
                {{ userInfo.username }}
              </view>
            </view>
            <view class="input_module_as">
              <view class="input_module_as_title"> 所属网点 </view>
              <view class="input_module_as_en"> {{ form.websitName }} ({{ form.partsWebsitId }}） </view>
            </view>
            <view class="input_module_as">
              <view class="input_module_as_title"> *申请类别 </view>
              <view class="input_module_as_en">
                <radio-group
                  @change="
                    d => {
                      form.applyCategory = d.detail.value
                    }
                  "
                >
                  <label style="margin-right: 20upx">
                    <radio value="HOME" :checked="form.applyCategory === 'HOME'" />家用空调
                  </label>
                  <label> <radio value="TRADE" :checked="form.applyCategory === 'TRADE'" />商用空调 </label>
                  <br />
                  <br />
                  <label> <radio value="ELEC" :checked="form.applyCategory === 'ELEC'" />生活电器（小家电） </label>
                </radio-group>
              </view>
            </view>
            <view class="input_module_as">
              <view class="input_module_as_title"> *申请类型 </view>
              <view class="input_module_as_en">
                <radio-group
                  @change="
                    d => {
                      form.applyType = d.detail.value
                    }
                  "
                >
                  <label style="margin-right: 20upx">
                    <radio value="0" :checked="form.applyType === '0'" />普通申请
                  </label>
                  <label> <radio value="1" :checked="form.applyType === '1'" />急件申请 </label>
                  <br />
                  <br />
                  <label> <radio value="2" :checked="form.applyType === '2'" />备件申请 </label>
                </radio-group>
              </view>
            </view>
            <view class="input_module_as">
              <view class="input_module_as_title"> *发货方式 </view>
              <view class="input_module_as_en">
                <radio-group
                  @change="
                    d => {
                      form.deliveryType = d.detail.value
                    }
                  "
                >
                  <label style="margin-right: 20upx">
                    <radio value="0" :checked="form.deliveryType === '0'" />快递
                  </label>
                  <label> <radio value="1" :checked="form.deliveryType === '1'" />自提 </label>
                </radio-group>
              </view>
            </view>
            <view class="input_module_as">
              <view class="input_module_as_title"> 发出单位 </view>
              <view class="input_module_as_en">
                <input
                  v-model="form.deliveryUnit"
                  style="width: 100%; height: 100%; margin-top: -6upx"
                  placeholder="请输入"
                />
              </view>
            </view>
            <view class="input_module_as">
              <view class="input_module_as_title"> 接收单位 </view>
              <view class="input_module_as_en">
                <input
                  v-model="form.receiveUnit"
                  style="width: 100%; height: 100%; margin-top: -6upx"
                  placeholder="请输入"
                />
              </view>
            </view>
            <view class="input_module_as">
              <view class="input_module_as_title"> 收货地址 </view>
              <view class="input_module_as_en">
                <input
                  v-model="form.receiveAddr"
                  style="width: 100%; height: 100%; margin-top: -6upx"
                  placeholder="请输入"
                />
              </view>
            </view>
            <view class="input_module_as">
              <view class="input_module_as_title"> 详细地址 </view>
              <view class="input_module_as_en">
                <input v-model="form.addr" style="width: 100%; height: 100%; margin-top: -6upx" placeholder="请输入" />
              </view>
            </view>
          </view>
          <view class="input_module" v-if="form.itemList">
            <view class="input_module_title">
              <text>配件信息</text>
              <text class="input_title_smbtn" @tap.stop="goToChoosingAccessories"> 添加配件</text>
            </view>
            <view class="input_module_content">
              <view class="input_module_apply_info">
                <block v-for="(item, index) in form.itemList" :key="index">
                  <view class="input_module_apply_view">
                    <view class="input_module_apply_title">
                      <view>
                        {{ item.partsName }}
                      </view>
                      <text class="input_module_apply_del" @tap.stop="delItem(index)">删除</text>
                    </view>
                    <view class="input_module_apply_num">
                      <text class="input_module_apply_number">{{ item.partsNumber }}</text>
                      <view class="input_module_apply_amount">
                        <text class="apply_amount"> ￥{{ Math.round(item.salesPrice * 100) / 100 }} </text>
                        <view class="input_module_apply_counter">
                          <image
                            @tap="setQty(item, -1)"
                            src="/static/images/fittingsManagement/jianjian.png"
                            mode="aspectFill"
                          ></image>
                          <text>{{ item.qty }}</text>
                          <image
                            @tap="setQty(item, 1)"
                            src="/static/images/fittingsManagement//jiajia.png"
                            mode="aspectFill"
                          ></image>
                        </view>
                      </view>
                    </view>
                  </view>
                </block>
                <view class="a_combined_sc">
                  合计：<text
                    >￥{{
                      [
                        ...(form.itemList || []).map(item => Math.round(item.salesPrice * item.qty * 100) / 100),
                        0
                      ].reduce((a, b) => {
                        return a + b
                      })
                    }}</text
                  >
                </view>
              </view>
            </view>
          </view>
          <view class="input_module">
            <view class="input_module_title">
              <text>备注</text>
            </view>
            <view class="input_module_content">
              <view class="input_remark">
                <textarea
                  v-model="form.remark"
                  style="width: 100%; height: 100%"
                  :maxlength="1000"
                  placeholder-style="color:#999999"
                  placeholder="请输入备注"
                />
              </view>
            </view>
          </view>
        </view>
      </zj-page-fill>
      <view class="bottom-container">
        <u-button type="primary" text="提交申请" @click="save"></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'
import { getStorage } from '@/common/utils/storage.js'
export default {
  components: {
    zjPageContainer,
    zjPageFill
  },
  data() {
    return {
      form: null,
      option: {}
    }
  },
  onLoad(option) {
    this.option = option
    this.form = {
      ...option,
      itemList: [],
      deliveryUnit: this.option.websitName,
      identity: this.userInfo.idCard,
      mobile: this.userInfo.mobile,
      receiveUnit: this.userInfo.username,
      workerId: this.userInfo.number,
      workerName: this.userInfo.username,
      belongCompany: this?.userInfo?.belong_company,
      websitName: this?.userInfo?.websit_worker?.websit_name,
      websitNumber: this?.userInfo?.websit_worker?.websit_number
    }
    console.log(this.userInfo)
    uni.$on('getAccessoriesItem', data => {
      var { id, ...item } = data
      this.form.itemList.push({
        ...item,
        newQty: item.qty,
        qty: 1
      })
    })
  },
  onUnload() {
    uni.$off('getAccessoriesItem')
  },
  computed: {
    userInfo() {
      return getStorage('user')
    },
    idcard() {
      return this.userInfo.idCard
    }
  },
  methods: {
    goToChoosingAccessories() {
      this.$navToPage({
        url: `/packageAttachment/pages/sparePartsInventory/choosingAccessories?apiType=applicationParts&websitId=${this.option.websitId}&websitName=${this.option.websitName}&partsWebsitId=${this.option.partsWebsitId}`
      })
    },
    delItem(index) {
      this.form.itemList.splice(index, 1)
    },
    save() {
      if (~['', undefined].indexOf(this.form.applyCategory)) {
        uni.showModal({
          title: '提示',
          content: '必须选择申请类别',
          showCancel: false
        })
        return
      }
      if (~['', undefined].indexOf(this.form.applyType)) {
        uni.showModal({
          title: '提示',
          content: '必须选择申请类型',
          showCancel: false
        })
        return
      }
      if (~['', undefined].indexOf(this.form.deliveryType)) {
        uni.showModal({
          title: '提示',
          content: '必须选择发货方式',
          showCancel: false
        })
        return
      }
      if (!this.form.itemList.length) {
        uni.showModal({
          title: '提示',
          content: '必须添加配件',
          showCancel: false
        })
        return
      }
      //
      this.$api
        .postJson('/app/worker/parts-sales/add', this.form)
        .then(res => {
          uni.redirectTo({
            url: `/packageAttachment/pages/orderOfSales/index`
          })
        })
        .catch(() => {})
    },
    setQty(item, num) {
      var n = Number(item.qty) + Number(num)
      if (n > 0 && n <= item.newQty) {
        item.qty = n
      } else if (num == -1) {
        uni.showModal({
          title: '提示',
          content: '数量不能小于1',
          showCancel: false
        })
      } else if (num == 1) {
        uni.showModal({
          title: '提示',
          content: '数量不能大于库存',
          showCancel: false
        })
      }
    }
  }
}
</script>

<style scoped lang="scss">
.apply-return-of-new-piece {
  .input_module {
    background: #ffffff;
    margin-bottom: 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_title_smbtn {
        font-weight: 400;
        color: #e95505;
      }
    }

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