<template>
  <div class="order">
    <el-tabs v-model="form.orderStatus" class="demo-tabs" @tab-click="handleClick">
      <el-tab-pane v-for="tab in tabs" :key="tab.name" :label="$t(tab.label)" :name="tab.name">
        <div class="order-list">
          <div v-for="(item, index) in list" :key="index" class="li" @click="toDetail(item)">
            <div class="order-list-top flex-center-between">
              <div class="order-list-top-l flex-align-center">
                <el-tag
                  :type="item.orderStatus == 0 ? 'primary' : item.orderStatus == 1 ? 'success' : item.orderStatus == 2 ? 'info' : item.orderStatus == 5 ? 'danger' : ''">{{
                    item.orderStatus == 0 ?
                      $t('personalCenter.daifukuan') : item.orderStatus == 1 ? $t('personalCenter.yiwancheng') :
                        item.orderStatus == 2 ?
                          $t('personalCenter.yiquxiao') : item.orderStatus == 5 ? $t('personalCenter.shenhewtg') : ''
                  }}</el-tag>
                <div class="">{{ $t('personalCenter.dingdanhao') }}: {{ item.orderNo }}</div>
              </div>
              <div class="order-list-top-r">{{ $t('common.orderTime') }}: {{ item.createTime }}</div>
            </div>
            <div class="order-list-main flex">
              <div class="order-list-main-l flex">
                <img class="image" :src="item.orderImage" alt="">
                <div class="">
                  <div class="title">{{ item.orderTypeName }}</div>
                  <div class="">{{ item.description }}
                    <!-- <el-button type="primary" size="small" plain>技能标签</el-button>
                    <el-button type="primary" size="small" plain>技能标签</el-button> -->
                  </div>
                </div>
              </div>
              <div class="order-list-main-r flex">
                <div class="order-list-con flex-center-between flex_1">

                  <div class="mi_price">
                    <div class="">x{{ item.orderNum }}</div>
                    <div class="">{{ $t('common.quantity') }}</div>
                  </div>
                  <div class="mi_price price">
                    <div class="">{{ item.amount || 0 }}{{ item.amountUnit }}</div>
                    <div class="">{{ item.payMethodName }}</div>
                  </div>

                  <div class="flex-center-flex-end" style="width: 300px;">
                     <el-tag style="margin-right: 16px;" :type=" item.shipStatus == 0 ? 'primary' : 'shipStatus'" v-if="item.orderType == 'mi_mall'">{{ item.shipStatusName }}</el-tag>
                    <template v-if="item.invoiceStatus == 0 && item.orderStatus == 1">
                     
                      <div @click.stop="applyInvoices(item, index)" class="blue btn">
                        <img src="/src/assets/imgs/my/order3@2x.png" alt="">
                        <div class="">{{ $t('common.applyInvoice') }}</div>
                      </div>
                      
                    </template>


                    <div class="gradient btn" v-else-if="item.orderStatus == 0" @click.stop="pay(item)">
                      <img src="/src/assets/imgs/my/order1@2x.png" alt="">
                      <div class="">{{ $t('personalCenter.lookVoucher') }}</div>
                    </div>

                    <div class="" v-else-if="item.orderStatus == 5">
                      <el-text class="mx-1" type="danger" size="large">{{ $t('personalCenter.rejectReason') }}：{{
                        item.transferSug
                        }}</el-text>
                    </div>
                    <!-- <div class="btn_kong" v-else></div> -->
                    <template v-if="false">
                      <template v-if="index == 0">
                        <div class="gradient btn">
                          <img src="/src/assets/imgs/my/order1@2x.png" alt="">
                          <div class="">{{ $t('common.goPay') }}</div>
                        </div>
                        <div class="blue btn mt8">
                          <img src="/src/assets/imgs/my/order2@2x.png" alt="">
                          <div class="">{{ $t('common.cancelOrder') }}</div>
                        </div>
                      </template>
                      <template v-else-if="index == 1">
                        <div class="blue btn">
                          <img src="/src/assets/imgs/my/order3@2x.png" alt="">
                          <div class="">{{ $t('common.applyInvoice') }}</div>
                        </div>
                        <div class="red btn mt8">
                          <img src="/src/assets/imgs/my/order4@2x.png" alt="">
                          <div class="">{{ $t('common.applyRefund') }}</div>
                        </div>
                      </template>
                      <template v-else-if="index == 2">
                        <div class="btn gradient">
                          <img src="/src/assets/imgs/my/order5@2x.png" alt="">
                          <div class="">{{ $t('common.reorder') }}</div>
                        </div>
                      </template>
                    </template>

                  </div>
                </div>
              </div>


            </div>
          </div>
        </div>
      </el-tab-pane>
    </el-tabs>
    <template v-if="list.length">
      <Pagination :total="form.total" :page-size="form.pageSize" :current-page="form.pageNum"
        @page-change="handlePageChange" />
    </template>
    <el-empty v-else :description="$t('common.empty')" />
    <el-dialog v-model="dialogVisible" :title="$t('common.applyInvoice')" width="784">
      <div class="dialog_title">{{ $t('personalCenter.fpttxx') }}</div>
      <el-form :model="invoiceData" class="demo-form-inline" label-position="top" :rules="rules" ref="ruleFormRef">
        <el-row :gutter="16">
          <el-col :span="12">
            <el-form-item :label="$t('personalCenter.ttlx')">
              <el-radio-group v-model="invoiceData.invoiceType">
                <el-radio value="0" size="large">{{ $t('personalCenter.personal') }}</el-radio>
                <el-radio value="1" size="large">{{ $t('personalCenter.company') }}</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item :label="$t('personalCenter.gfmc')" prop="invoiceTitle">
              <el-input v-model="invoiceData.invoiceTitle" :placeholder="$t('common.placeholderInput')" clearable />
            </el-form-item>
          </el-col>
        </el-row>
        <template v-if="invoiceData.invoiceType == 1">
          <el-row :gutter="16">
            <el-col :span="12">
              <el-form-item :label="$t('personalCenter.code')" prop="taxNumber">
                <el-input v-model="invoiceData.taxNumber" :placeholder="$t('common.placeholderInput')" clearable />
              </el-form-item>
            </el-col>

            <el-col :span="12">
              <el-form-item :label="$t('personalCenter.companyAddress')">
                <el-input v-model="invoiceData.otherInfo.address" :placeholder="$t('common.placeholderInput')" clearable />
              </el-form-item>
            </el-col>


          </el-row>
        </template>
        <template v-if="invoiceData.invoiceType == 1">
          <el-row :gutter="16">
            <el-col :span="12">
              <el-form-item :label="$t('personalCenter.companyPhone')">
                <el-input v-model="invoiceData.otherInfo.mobile" :placeholder="$t('common.placeholderInput')" clearable />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item :label="$t('personalCenter.companyBank')">
                <el-input v-model="invoiceData.otherInfo.bank" :placeholder="$t('common.placeholderInput')" clearable />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="16">
            <el-col :span="12">
              <el-form-item :label="$t('personalCenter.bankAccount')">
                <el-input v-model="invoiceData.otherInfo.account" :placeholder="$t('common.placeholderInput')" clearable />
              </el-form-item>
            </el-col>

          </el-row>
        </template>

        <el-row :gutter="16" v-if="false">
          <el-col :span="12">
            <el-form-item label="电子邮箱">
              <el-input v-model="invoiceData.user" placeholder="请输入" clearable />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="联系电话">
              <el-input v-model="invoiceData.user" placeholder="请输入" clearable />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <template #footer>
        <div class="dialog-footer flex-center">
          <el-button @click.stop.prevent="dialogVisible = false">{{ $t('common.cancel') }}</el-button>
          <el-button class="gradient" type="primary" @click.stop.prevent="submitForm(ruleFormRef)">{{ $t('common.confirm')
          }}</el-button>
        </div>
      </template>
    </el-dialog>

    <el-image-viewer v-if="showPreview" :url-list="srcList" show-progress @close="showPreview = false" />
  </div>
</template>
<script lang="ts" setup>

import { ref, onMounted, reactive } from 'vue'

import type { TabsPaneContext } from 'element-plus'

import { useRouter } from 'vue-router'

import { useAppStore } from '@/pinia/appStore'

import Pagination from '@/components/Pagination.vue'

import { orderList, applyInvoice } from '@/api/my.js'

import { confirmBuy } from '@/utils/util.js'

import { useI18n } from 'vue-i18n'

import DGTMessage from '@/utils/message'

const { t } = useI18n()

const appStore = useAppStore()

const router = useRouter()

const tabs = ref([
  { label: 'personalCenter.allOrders', name: '' },
  { label: 'personalCenter.daifukuan', name: 0 },
  { label: 'personalCenter.yiwancheng', name: 1 },
  // { label: 'personalCenter.yiquxiao', name: 2 },
])

const list = ref([]);

import type { FormInstance, FormRules } from 'element-plus'

interface RuleForm {
  invoiceTitle: string
  taxNumber: string
}
const form = ref({
  pageNum: 1,
  pageSize: 10,
  total: 0,
  orderStatus: '',
  orderByColumn: 'create_time',
  isAsc: 'desc'
})
const dialogVisible = ref(false)
const ruleFormRef = ref<FormInstance>()
const invoiceData = ref({
  invoiceType: '0',//发票类型（0-个人 1-企业）
  orderNo: '',//订单号
  orderId: null,
  invoiceTitle: '',//发票抬头
  taxNumber: '',//税号
  otherInfo: {
    address: '',
    mobile: '',//
    bank: '',//开户行
    account: '',//账号
  },
  remark: '',//备注
})

const rules = reactive<FormRules<RuleForm>>({
  invoiceTitle: [
    { required: true, message: '请输入购方名称', trigger: 'blur' }
  ],
  taxNumber: [
    { required: true, message: '请输入购方税号', trigger: 'blur' }
  ],
})

// 去详情页面
const toDetail = (item:any) => {
  console.log(item.orderType)
  if (['workflow_purchase', 'course_purchase'].includes(item.orderType)) {
    router.push({ path: item.orderType == 'workflow_purchase' ? '/workflow-detail' :  `/learning-system/detail/${item.bizId}`, query: item.orderType == 'workflow_purchase' ? { publishId: item.bizId,
      metaTitle: 'route.WorkflowDetail' } : {courseId: item.bizId,
      metaTitle: item.description || '课程详情'} })
  }
 
}

const submitForm = async (formEl: FormInstance | undefined) => {
  if (!formEl) return
  let valid = await formEl.validate();
  if (valid) {

    let { invoiceType,
      orderNo,
      orderId,
      invoiceTitle,
      taxNumber, remark } = invoiceData.value
    let res = await applyInvoice({
      invoiceType,
      orderNo,
      orderId,
      invoiceTitle,
      taxNumber,
      remark,
      otherInfo: JSON.stringify(invoiceData.value.otherInfo)
    });
    if (res.code === 200) {
      DGTMessage.success(`${t('common.success')}`)
      getList()
    }
    dialogVisible.value = false;
  }
}

const handleClick = (tab: TabsPaneContext) => {
  form.value.pageNum = 1;
  form.value.orderStatus = tab.props.name;
  getList()
}
const imageRef = ref()
const showPreview = ref(false)
const srcList = ref([])
const pay = async (item, index) => {
  srcList.value = [item.transferProof]
  showPreview.value = true;
}

// 申请开票
const applyInvoices = (item, index) => {
  // await invoiceApply();
  invoiceData.value.orderId = item.orderId;
  dialogVisible.value = true;
}

// 获取我的订单
const getList = async () => {
  let res = await orderList(form.value);
  list.value = res.rows || [];
  form.value.total = res.total;
}
const handlePageChange = (page, pageSize) => {
  form.value.pageNum = page;
  if(pageSize)form.value.pageSize = pageSize;
  getList()
}

onMounted(() => {
  getList()
})

</script>
<style scoped lang="scss">

.order {
  padding-bottom: 16px;

  .order-list {
    .li {
      cursor: pointer;
      background: #FFFFFF;
      border-radius: 16rpx;
      margin-bottom: 16px;

      &:last-child {
        margin-bottom: 0;
      }

      .order-list-top {
        height: 42px;
        padding: 0 16px;
        background: #F5F7FA;
        border-radius: 16px 16px 0px 0px;

        .order-list-top-l {
          div {
            margin-left: 8px;
            font-size: 16px;
            font-weight: bold;
          }
        }

        .order-list-top-r {
          font-size: 14px;
        }
      }

      .order-list-main {
        padding: 16px;
        border-radius: 0 0 16px 16px;
        border: 1px solid #EBEEF5;

        .order-list-main-l,
        .order-list-main-r {
          width: 50%;
        }

        .image {
          width: 160px;
          height: 90px;
          object-fit: cover;
          margin-right: 16px;
          border-radius: 8px;
        }

        .title {
          font-size: 16px;
          font-weight: bold;
          margin-bottom: 8px;
          line-height: 1;
        }

        .mi_price {

          div {
            font-size: 18px;
            text-align: center;

            &:last-child {
              font-size: 12px;
              color: #666666;
            }
          }
        }

        .price {
          text-align: center;

          div {
            &:first-child {
              color: #FD5F3C;
            }
          }
        }

        .mt8 {
          margin-top: 8px;
        }

        .btn {
          display: flex;
          align-items: center;
          justify-content: center;
          padding: 0 16px;
          height: 32px;
          cursor: pointer;
          border-radius: 4px;

          img {
            width: 14px;
            height: 14px;
            margin-right: 4px;
          }

          div {
            font-size: 14px;
            color: #FFFFFF;
          }
        }

        .btn_kong {
          width: 106px;
        }



        .red {
          background: #FCEBEB;

          div {
            color: #E43434;
          }
        }

        .blue {
          background: #EAF0FF;

          div {
            color: #2D71FF;
          }
        }
      }
    }
  }
}

.dialog_title {
  color: #3D3D3D;
  font-weight: bold;
  font-size: 16px;
  margin-bottom: 16px;
}
</style>