<script setup>
import { ref, watch, onMounted, computed } from 'vue'
import { getUserOrder } from '@/api/user'
import Paging from '@/components/pc/Paging/index.vue'
import { useI18n } from 'vue-i18n'
import { goodsMap } from '../data.ts'
const { locale: language, t } = useI18n()
const props = defineProps({
  item: {
    type: Object,
    default: {}
  },
  i: {
    type: Number
  }
})

const list = ref([])
const showInvoice = ref(false)
const orderDetail = {
  '1': [
    t('manage.orderDetail.1.0'),
    t('manage.orderDetail.1.1'),
    t('manage.orderDetail.1.2'),
  ],
  '4': [
    t('manage.orderDetail.4.0'),
    t('manage.orderDetail.4.1'),
  ],
  '7': [
    t('manage.orderDetail.7.0'),
  ],
  '11':
    [t('manage.orderDetail.11.0'),],
  '12': [
    t('manage.orderDetail.12.0'),
  ]
}
// watch(()=>currentPage.value, () => {
//   getList()
// })
// onMounted(() => {
//   getList()
// })
console.log(goodsMap, 'goodsMap')

function changeIvoiceStatus(i, item) {
  // this.$bus.$emit('order/showInvoice', {
  //   order: item,
  //   orderId: item.id,
  //   data: this.getItemInvoice(item),
  //   invoiceId: item.invoice && item.invoice.id
  // })
}

function getStatus(item) {
  let temp = ''
  let sPay = function () {
    switch (item.shippingStatus) {
      case 'unshipped':
        temp = 'unshipped'
        break
      case 'partShipped':
        temp = 'partShipped'
        break
      case 'shipped':
        temp = 'shipped'
        break
      case 'received':
        temp = 'received'
        break
      default:
        break
    }
  }
  let pPay = function () {
    switch (item.paymentStatus) {
      case 'unpaid':
        temp = 'unpaid'
        break
      case 'paid':
        sPay()
        break
      default:
        break
    }
  }

  switch (item.orderStatus) {
    case 'unprocessed':
      pPay()
      break
    case 'completed':
      temp = 'finish'
      break
    case 'processed':
      sPay()
      break
    case 'expire':
      temp = 'expire'
      break
    default:
      break
  }
  return temp
}
function  toPay(item) {
      this.$router.push({
        name: 'pay',
        query: {
          payType: 0,
          orderId: item.id,
          orderType: 0,
          orderSn: item.orderSn
        }
      })
    }
</script>
<template>
  <div class="order-item" :key="i">
    <!-- <div class="o-top"></div> -->
    <div class="o-title">
      <span>
        <span class="orderSn table-header"
          >{{ t('manage.myOrders.numbers') }}{{ item.orderSn }}</span
        >
        <span class="orderTime">{{ item.orderTime }}</span>
      </span>
      <span class="table-header">{{ t('manage.myOrders.quantity') }}</span>
      <span class="table-header">{{ t('manage.myOrders.subtotal') }}</span>
      <span class="table-header">{{ t('manage.myOrders.total1') }}</span>
    </div>
    <div class="o-detail" v-for="(sub, index) in item.orderItems" :key="index">
      <div class="od-name">
        <img class="thumbnail" :src="$cdn + goodsMap[sub.goodsId].img" alt />
        <div>
          <p>{{ t(`manage.cameraName.${sub.goodsId}`) }}</p>
          <p v-for="(sb, i) in orderDetail[sub.goodsId]" :key="i" v-html="sb"></p>
        </div>
      </div>
      <div class="count">{{ sub.goodsCount }}</div>
      <div class="sum">{{ sub.goodsPrice * sub.goodsCount }}</div>
      <div class="sum"></div>
    </div>
    <div class="sum-price">
      <div>￥{{ item.goodsAmount }}</div>
    </div>
    <div class="inovice-con" :class="{ 'ic-active': item.showInvoice }">
      <div class="o-invoiceTitle">
        <span>{{ t('manage.myOrders.invoice') }}</span>
        <span v-if="getStatus(item) !== 'shipped'" @click="edit"
          ><i class="iconfont icon-edit"></i>{{ t('manage.myOrders.edit') }}</span
        >
        <!-- <span v-else><i class="iconfont icon-choice"></i>发票已寄出</span> -->
      </div>
      <div class="o-invoice">
        <!-- <editInvoice :data="getItemInvoice(item)" :orderId='item.id' :invoiceId="item.invoice&&(item.invoice.id)"/> -->
      </div>
    </div>
    <div class="bottom-area">
      <div class="bottom-left">
        <template v-if="getStatus(item) === 'unpaid'">
          <span></span>
        </template>
        <template v-else-if="getStatus(item) === 'shipped'">
          <span class="expreeNum"
            >{{ t('manage.myOrders.wlNum') }}{{ item.orderItems[0].expressNum }}</span
          >
        </template>
        <template v-else-if="getStatus(item) === 'unshipped'">
          <span class="expreeNum">{{ t('manage.myOrders.unshipped') }}</span>
        </template>
        <template v-else-if="getStatus(item) === 'finish'">
          <span class="expreeNum">{{ t('manage.myOrders.finish') }}</span>
        </template>
        <template v-else-if="getStatus(item) === 'partShipped'">
          <span class="expreeNum">{{ t('manage.myOrders.partShipped') }}</span>
        </template>
        <template v-else-if="getStatus(item) === 'received'">
          <span class="expreeNum"
            >{{ t('manage.myOrders.received') }}：{{ item.orderItems[0].expressNum }}</span
          >
        </template>
        <template v-else-if="getStatus(item) === 'expire'">
          <span class="expreeNum">{{ t('manage.myOrders.expire') }}</span>
        </template>
        <template v-else>
          <span class="expreeNum">{{ t('manage.myOrders.hasCancal') }}</span>
        </template>
      </div>
      <div class="to-pay">
        <template v-if="getStatus(item) !== 'expire'">
          <span class="cancel btns" @click="changeIvoiceStatus(i, item)">{{
            item.invoice && item.invoice.type
              ? t('manage.myOrders.invoiceInfo')
              : t('manage.myOrders.invoice')
          }}</span>
          <template v-if="getStatus(item) === 'unpaid'">
            <span class="cancel btns" @click="cancal(item)">{{
              t('manage.myOrders.cancal')
            }}</span>
            <span class="pay btns" @click="toPay(item)">{{ t('manage.myOrders.pay') }}</span>
          </template>
        </template>
      </div>
    </div>
  </div>
</template>

// <script>
// import { mapState } from 'vuex'
// // import editInvoice from '@/components/editInvoice'

// export default {
//   props: {
//     item: Object,
//     i: Number
//   },
//   inject: ['getList'],
//   provide() {
//     return {
//       hideInvoice: this.hideInvoice,
//       saveInvoiceData: this.saveInvoice
//     }
//   },
//   data() {
//     return {
//       showInvoice: true
//     }
//   },
//   computed: {
//     ...mapState({
//       token: (state) => state.user.token,
//       language: (state) => state.language.current,
//       myorder: (state) => {
//         let type = Object.prototype.toString.call(state.user.myorder)
//         if (type === '[object Object]') {
//           return state.user.myorder
//         }
//         let condition =
//           state.user.myorder && state.user.myorder !== 'null' && type !== '[object Array]'
//         return condition ? JSON.parse(state.user.myorder) : {}
//       }
//     })
//   },
//   components: {
//     editInvoice
//   },
//   mounted() {
//     this.$set(this.item, 'showInvoice', false)
//   },
//   methods: {
//     edit() {
//       this.showInvoice = false
//     },
//     hideInvoice() {
//       this.showInvoice = true
//     },
//     changeIvoiceStatus(i, item) {
//       // item.showInvoice = !item.showInvoice
//       // this.$set(this.item, 'showInvoice', item.showInvoice)
//       this.$bus.$emit('order/showInvoice', {
//         order: item,
//         orderId: item.id,
//         data: this.getItemInvoice(item),
//         invoiceId: item.invoice && item.invoice.id
//       })
//     },
//     saveInvoice(data) {
//       this.$set(this.item, 'invoice', data)
//     },
//     getItemInvoice(item) {
//       let invoice = item.invoice
//       console.log(item)
//       if (!invoice) {
//         return ''
//       }
//       invoice['typeName'] = this.t(`manage.invoiceTypeName.${invoice.type}`)
//       return invoice
//     },
//     getStatus(item) {
//       let temp = ''
//       let sPay = function () {
//         switch (item.shippingStatus) {
//           case 'unshipped':
//             temp = 'unshipped'
//             break
//           case 'partShipped':
//             temp = 'partShipped'
//             break
//           case 'shipped':
//             temp = 'shipped'
//             break
//           case 'received':
//             temp = 'received'
//             break
//           default:
//             break
//         }
//       }
//       let pPay = function () {
//         switch (item.paymentStatus) {
//           case 'unpaid':
//             temp = 'unpaid'
//             break
//           case 'paid':
//             sPay()
//             break
//           default:
//             break
//         }
//       }

//       switch (item.orderStatus) {
//         case 'unprocessed':
//           pPay()
//           break
//         case 'completed':
//           temp = 'finish'
//           break
//         case 'processed':
//           sPay()
//           break
//         case 'expire':
//           temp = 'expire'
//           break
//         default:
//           break
//       }
//       return temp
//     },
//     toPay(item) {
//       this.$router.push({
//         name: 'pay',
//         query: {
//           payType: 0,
//           orderId: item.id,
//           orderType: 0,
//           orderSn: item.orderSn
//         }
//       })
//     },
//     async cancal(item) {
//       this.toast.showConfirm('warn', this.t('toast.15'), async () => {
//         let params = {
//           orderId: item.id
//         }
//         let res = await this.$http({
//           method: 'post',
//           data: params,
//           headers: {
//             token: this.token
//           },
//           url: '/user/order/cancel'
//         })
//         let data = res.data
//         if (data.code === 0) {
//           return this.toast.show('success', this.t('toast.37'), () => {
//             this.currentPage = this.currentPage >= this.maxPage ? this.maxPage : this.currentPage
//             this.getList()
//           })
//         }
//         return this.toast.show('error', this.t('toast.38'))
//       })
//     }
//   }
// }
// </script>

<style lang="less" scoped>
.order-item {
  margin-bottom: 40px;
  border: 1px solid #ebebeb;
  .inovice-con {
    max-height: 0;
    overflow: hidden;
  }
  .ic-active {
    max-height: 500px;
    transition: 0.3s ease max-height;
  }
  .o-top {
    color: #68b8f1;
    line-height: 60px;
    height: 60px;
    font-size: 16px;
    padding: 0 20px;
    user-select: none;
    border-bottom: 1px solid #ebebeb;
  }
  .o-title,
  .o-invoiceTitle {
    user-select: none;
    display: flex;
    height: 32px;
    padding: 0 20px;
    align-items: center;
    line-height: 32px;
    // border-bottom: 1px solid #EBEBEB;
    background: #f7f7f7;
    span {
      font-size: 14px;
      flex: 1;
      text-align: center;
      &:first-child {
        flex: 5;
        text-align: left;
      }
    }
  }
  .orderSn {
    color: #323233;
    margin-right: 15px;
  }
  .o-invoiceTitle {
    align-items: center;
    .iconfont {
      vertical-align: middle;
      font-size: 20px;
      margin-right: 5px;
    }
    .icon-edit {
      color: #15bec8;
    }
    .icon-choice {
      color: #02e430;
    }
    span {
      display: inline-block;
      vertical-align: middle;
      &:last-child {
        transform: translateX(11px);
        cursor: pointer;
      }
      &:first-child {
        flex: 1;
        transform: translateX(0);
        text-align: left;
      }
    }
  }
  .o-invoice {
    display: flex;
    align-items: center;
    padding: 10px 20px 10px 85px;
    color: #4a4a4a;
    font-size: 14px;
    border-bottom: 1px solid #ebebeb;
  }

  .o-detail {
    display: flex;
    align-items: center;
    height: 86px;
    line-height: 86px;
    padding: 0 20px;
    color: #4a4a4a;
    font-size: 14px;
    border-bottom: 1px solid #ebebeb;
    .od-name {
      display: flex;
      align-items: center;
      flex: 5;
      .thumbnail {
        width: 55px;
        margin-right: 10px;
      }
      p {
        line-height: 1.5;
        font-size: 14px;
        color: #969696;
        &:first-of-type {
          font-weight: bold;
          color: #2d2d2d;
        }
      }
    }
    .count {
      flex: 1;
      text-align: center;
    }
    .sum {
      flex: 1;
      text-align: center;
    }
  }
  position: relative;
  .sum-price {
    position: absolute;
    color: #4a4a4a;
    display: flex;
    align-items: center;
    justify-content: center;
    right: 1px;
    top: 33px;
    bottom: 51px;
    background-color: #fff;
    width: calc(calc(100% - 40px) / 8 + 20px);
    border-left: 1px solid #ebebeb;
    font-weight: 400;
    color: #202020;
    font-size: 20px;
  }

  .bottom-area {
    position: relative;
    .bottom-left {
      position: absolute;
      top: 50%;
      left: 20px;
      color: #a0a0a0;
      transform: translateY(-50%);
      font-size: 14px;
      color: #323233;
    }
    .to-pay {
      text-align: right;
      height: 50px;
      line-height: 50px;
      padding: 0 25px;
      .cancel {
        font-size: 14px;
        // border: 1px solid #ccc;
        display: inline-block;
        text-align: center;
        cursor: pointer;
        background: #fff;
        color: #202020;
        border: 1px solid #323233;
        width: 104px;
        height: 32px;
        line-height: 32px;
        border-radius: 4px;
      }
      .pay {
        background: #15bec8;
        font-size: 14px;
        color: #fff;
        display: inline-block;
        width: 104px;
        height: 32px;
        line-height: 32px;
        text-align: center;
        cursor: pointer;
        border-radius: 4px;
      }
      .expreeNum {
        margin-right: 60px;
        color: #323233;
      }
    }
  }
}

.table-header {
  font-weight: 600;
  color: #202020;
}
</style>