<template>
  <div>
    <el-dialog v-model="visible" :title="title" width="100%" fullscreen align-center>
      <el-form :inline="true" :model="modalForm" class="demo-form-inline">
        <div class="barbox">
          <div class="bar"></div>
          <div class="name">订单信息</div>
        </div>
        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item label="订单编号：">
              <span>{{ modalForm.order_no }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="订单流水号：">
              <span>{{ modalForm.escrow_trade_no ? modalForm.escrow_trade_no : '—' }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="订单状态：">
              <span> {{ formatOrderStatus(modalForm.order_status) }}</span>
            </el-form-item>
          </el-col>

        </el-row>
        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item label="创建时间：">
              <span> {{ modalForm.created_at }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="支付时间：">
              <span> {{ formatDate(modalForm.pay_time) }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="订单金额：">
              <span> {{ modalForm.amount_total }}(元)</span>
            </el-form-item>
          </el-col>

        </el-row>
        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item label="实际支付金额：">
              <span> {{ modalForm.payment_amount_total }}(元)</span>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="优惠卷金额：">
              <span> {{ modalForm.coupon_amount_total ? modalForm.coupon_amount_total : 0 }}(元)</span>
            </el-form-item>
          </el-col>
          <el-col :span="8" v-if="modalForm.cancel_status == 1">
            <el-form-item label="取消时间：">
              <span> {{ formatDate(modalForm.cancel_time) }}</span>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20" v-if="modalForm.refund_status == 3 || modalForm.refund_status == 7">
          <el-col :span="8">
            <el-form-item label="退款状态：">
              <span> {{ formatRefundStatus(modalForm.refund_status) }}</span>
            </el-form-item>
          </el-col>
          <!-- <el-col :span="8">
      <el-form-item label="退款金额：">
        <span> {{modalForm.coupon_amount_total?modalForm.coupon_amount_total:0}}(元)</span>
      </el-form-item>
    </el-col> -->
        </el-row>
        <el-row :gutter="20" v-if="modalForm.refund_status == 3 || modalForm.refund_status == 7">
          <el-col :span="8">
            <el-form-item label="备注：">
              <span> {{ modalForm.cancel_remarks }}</span>
            </el-form-item>
          </el-col>

        </el-row>
        <el-divider />
        <div class="barbox">
          <div class="bar"></div>
          <div class="name">用户信息</div>
        </div>

        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item label="用户昵称：">
              <span> {{ modalForm.user_name }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="用户头像：">
              <el-avatar :size="50" :src="modalForm.avatar" style="margin-top: -10px;" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="是否开通会员：">
              <span v-if="modalForm.is_member == 1">是</span>
              <span v-else>否</span>
            </el-form-item>
          </el-col>

        </el-row>
        <el-row :gutter="20" v-if="modalForm.is_member == 1">
          <el-col :span="8">
            <el-form-item label="会员过期时间：">
              <span> {{ formatDate(modalForm.member_expire_date) }}</span>
            </el-form-item>
          </el-col>


        </el-row>
        <el-divider />
        <div class="barbox">
          <div class="bar"></div>
          <div class="name">会员信息</div>
        </div>
        <el-row :gutter="20" v-if="modalForm.system_member">
          <el-col :span="8">
            <el-form-item label="会员时长：">
              <span v-if="modalForm.system_member.member_days == 365">1年</span>
              <span v-else-if="modalForm.system_member.member_days >= 30">{{ modalForm.system_member.member_days / 30 + '个月'
                }}</span>
              <span v-else-if="modalForm.system_member.member_days < 30">{{ modalForm.system_member.member_days + '天'
                }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="会员价格：">
              <span> {{ modalForm.system_member.price}}(元)</span>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="会员折扣价格：">
              <span> {{modalForm.system_member.discount_price }}(元)</span>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20" v-if="modalForm.system_member">
          <el-col :span="8">
            <el-form-item label="首单立减金额：">
              <span> {{modalForm.system_member.reduction_amount}}(元)</span>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="折扣有效期：">
              <span> {{formatDate(modalForm.system_member.discount_end_time)}}</span>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <el-divider />
      <div class="barbox">
        <div class="bar"></div>
        <div class="name">操作</div>
      </div>
      <el-row :gutter="20">
        <el-col :span="16">
          <el-form-item label="">
            <el-button type="primary" @click="dialogVisible = true" v-if="modalForm.order_status == 1">
              取消订单
            </el-button>
          </el-form-item>
        </el-col>
      </el-row>

      <!-- <template #footer>
      <div class="dialog-footer">
        <el-button @click="visible = false">取消</el-button>
        <el-button type="primary" @click="submit">
          确定
        </el-button>
      </div>
    </template> -->
    </el-dialog>
    <el-dialog v-model="dialogVisible" title="温馨提示" width="400">
      <span>确定取消该订单？</span>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button type="primary" @click="confirmCancel">
            Confirm
          </el-button>
        </div>
      </template>
    </el-dialog>
  </div>

</template>

<script setup>
import { onBeforeMount, reactive, ref, nextTick } from 'vue';
import { useRouter, useRoute } from 'vue-router'
import userApi from "../api/user";
import { ElMessage } from "element-plus";
import { formatOrderStatus, formatRefundStatus, formatDate } from '../utils/format'

const modalForm = reactive({
  order_id: '',
  system_member:{}
})


const onSubmit = () => {
  console.log('submit!')
}
const visible = ref(false);
const dialogVisible = ref(false);
const title = ref('订单详情')
const route = useRoute();
const router = useRouter();


const cancelOrder = () => {
  userApi.cancelVipOrder(modalForm.order_id).then((res) => {
    let result = res.data;
    if (result.code == 200) {
      ElMessage.success("取消成功");
      init('view', modalForm.order_id)
    }

  })
};
const confirmCancel = () => {
  dialogVisible.value = false;
  cancelOrder()

}

const init = (method, id) => {
  visible.value = true;
  modalForm.order_id = id;
  if (method === 'edit') {
    title.value = '编辑会员订单详情'
  } else if (method === 'view') {
    title.value = '查看会员订单详情'
  }
  nextTick(() => {
    userApi.getVipDetail(modalForm.order_id).then((res) => {
      let result = res.data;
      console.log(result)
      Object.assign(modalForm, result);

    })
  })

}

defineExpose({
  init
});
</script>

<style lang="scss" scoped>
.barbox {
  margin: 10px 0;
  display: flex;
  align-items: center;

  .bar {
    width: 4px;
    height: 25px;
    background: var(--el-color-primary);
  }

  .name {
    margin-left: 8px;
    font-size: 16px;
  }
}
</style>