<template>
  <view style="width: 100%; height: 100vh">
    <zj-page-container>
      <zj-page-fill>
        <view class="accessories_nfo_card_view" v-if="info">
          <!-- 配件信息 -->
          <view class="accessories_nfo_card">
            <view class="accessories_nfo_card_title">
              <text>配件信息</text>
              <text class="colorts">{{ info.flagName }}</text>
            </view>
            <view class="accessories_list_card">
              <view
                class="accessories_list_a"
                v-for="(item, index) in info.partsOldRefundManageRecordList || []"
                :key="index"
              >
                <view class="accessories_list_a_info">
                  <view>
                    {{ item.partsName }}
                  </view>
                  <view> *{{ item.qty }} </view>
                  <view> ￥{{ item.totalAmount }} </view>
                </view>
                <view class="accessories_list_a_number">
                  <text>{{ item.partsNumber }}</text>
                  <view
                    v-if="~['REFUNDED'].indexOf(info.flag)"
                    class="viewtkstate"
                    @tap.stop="
                      () => {
                        listItem = item
                        showPopup = true
                      }
                    "
                  >
                    查看退款状态
                  </view>
                </view>
              </view>
              <view class="accessories_list_amount">
                合计：<text class="colorts">
                  ￥{{
                    [...(info.partsOldRefundManageRecordList || []).map(a => a.totalAmount || 0), 0].reduce((a, b) => {
                      return a + b
                    })
                  }}
                </text>
              </view>
            </view>
            <view class="accessories_nfo_card_title"> 备注信息 </view>
            <view class="accessories_nfo_card_note">
              {{ info.remark }}
            </view>
          </view>
          <!-- 申请信息 -->
          <view class="accessories_nfo_card">
            <view class="accessories_nfo_card_title"> 申请信息 </view>
            <view class="accessories_nfo_ac">
              <view class="accessories_nfo_title"> 申请单号: </view>
              <view class="accessories_nfo_info">
                <view>
                  {{ info.applyNo }}
                </view>
              </view>
            </view>
            <view class="accessories_nfo_ac">
              <view class="accessories_nfo_title"> 申请日期: </view>
              <view class="accessories_nfo_info">
                <view>
                  {{ info.createTime }}
                </view>
              </view>
            </view>
            <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.receiveWebsitName }}({{ info.receiveWebsitId }}) </view>
              </view>
            </view>
            <view class="accessories_nfo_ac">
              <view class="accessories_nfo_title"> 审批人: </view>
              <view class="accessories_nfo_info">
                <view>
                  {{ info.examineBy }}
                </view>
              </view>
            </view>
            <view class="accessories_nfo_ac">
              <view class="accessories_nfo_title"> 审批时间: </view>
              <view class="accessories_nfo_info">
                <view>
                  {{ info.examineTime }}
                </view>
              </view>
            </view>
            <view class="accessories_nfo_ac">
              <view class="accessories_nfo_title"> 审批备注: </view>
              <view class="accessories_nfo_info">
                <view>
                  {{ info.examineRemark }}
                </view>
              </view>
            </view>
            <view class="accessories_nfo_ac">
              <view class="accessories_nfo_title"> 状态: </view>
              <view class="accessories_nfo_info">
                <view>
                  {{ info.flagName }}
                </view>
              </view>
            </view>
            <view class="accessories_nfo_ac">
              <view class="accessories_nfo_title"> 返还日期: </view>
              <view class="accessories_nfo_info">
                <view>
                  {{ info.refundedTime }}
                </view>
              </view>
            </view>
          </view>
          <popup
            :value="showPopup"
            @input="
              val => {
                showPopup = val
              }
            "
          >
            <view
              v-if="listItem"
              style="
                background: #fff;
                width: 500upx;
                -moz-box-shadow: 0px 0px 20px #333333;
                -webkit-box-shadow: 0px 0px 20px #333333;
                box-shadow: 0px 0px 20px #333333;
                border-radius: 20rpx;
              "
            >
              <view class="accessories_nfo_card">
                <view class="accessories_nfo_ac">
                  <view class="accessories_nfo_title"> 退款金额: </view>
                  <view class="accessories_nfo_info">
                    <view>
                      {{ listItem.refundAmount }}
                    </view>
                  </view>
                </view>
                <view class="accessories_nfo_ac">
                  <view class="accessories_nfo_title"> 退款状态: </view>
                  <view class="accessories_nfo_info">
                    <view>
                      {{ ['成功', '失败', '等待'][['OK', 'FAIL', 'WAIT'].indexOf(listItem.refundState)] || '' }}
                    </view>
                  </view>
                </view>
                <view class="accessories_nfo_ac">
                  <view class="accessories_nfo_title"> 退款时间: </view>
                  <view class="accessories_nfo_info">
                    <view>
                      {{ listItem.refundTime }}
                    </view>
                  </view>
                </view>
                <view class="accessories_nfo_ac">
                  <view class="accessories_nfo_title"> 退款方式: </view>
                  <view class="accessories_nfo_info">
                    <view> 微信 </view>
                  </view>
                </view>
                <view class="accessories_nfo_ac">
                  <view class="accessories_nfo_title"> 微信接收账号: </view>
                  <view class="accessories_nfo_info">
                    <view>
                      {{ listItem.refundMchNo }}
                    </view>
                  </view>
                </view>
              </view>
            </view>
          </popup>
        </view>
      </zj-page-fill>
      <!-- <bt-container v-if="info && info.flag === 'SAVE' && info.settlementState">
				<view class="btcon pv30 ph10">
					<view class="confirm-btn" @tap.stop="confirmation">确认返还</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'
import popup from '@/components/popup.vue'
export default {
  components: {
    zjPageContainer,
    zjPageFill,
    popup
  },
  // 额外添加的原生按钮
  onNavigationBarButtonTap(e) {
    if (e.text === '工单查看') {
      this.$navToPage({
        url: '/packageAttachment/pages/returnOfOldParts/workOrderView'
      })
    }
  },
  data() {
    return {
      showPopup: false,
      info: null,
      listItem: null
    }
  },
  onLoad: function (option) {
    this.getDetails(option.applyNo)
  },
  methods: {
    getDetails(applyNo) {
      this.$api
        .post('/app/worker/old-refund/detail', {
          applyNo
        })
        .then(res => {
          this.info = res.data
        })
        .catch(() => {})
    },
    confirmation() {
      var { applyCategory, applyNo, applyType, refundMode } = this.info
      if (applyCategory && applyNo && applyType && refundMode) {
        this.$api
          .post('/app/worker/old-refund/submit', {
            applyCategory,
            applyNo,
            applyType,
            refundMode
          })
          .then(res => {
            this.getDetails(applyNo)
            uni.$emit('updataReturnOfOldPartsList')
          })
          .catch(() => {})
      }
    }
  }
}
</script>

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