<template>
  <div class="detail">
    <common-detail class="common" :title="detailData.sn" @goBack="goBack">
      <template v-slot:item_container>
        <common-detail-item label="订单编号">{{ detailData.sn }}</common-detail-item>
        <common-detail-item label="资源类型">{{ detailData.serviceName }}</common-detail-item>
        <common-detail-item label="订单类型">{{ typeMap[detailData.type] || detailData.type }}</common-detail-item>
        <common-detail-item label="收费模式">{{ chargeMode[detailData.chargeMode] || detailData.chargeMode }}</common-detail-item>
        <common-detail-item label="订单状态">{{ orderStatusList[detailData.orderStatus] || detailData.orderStatus }}</common-detail-item>
        <common-detail-item label="所属租户">{{ detailData.tenantName }}</common-detail-item>
        <common-detail-item label="所属用户">{{ detailData.userName }}</common-detail-item>
        <common-detail-item label="创建时间">{{ detailData.gmtCreate }}</common-detail-item>
      </template>
      <el-tabs value="orderDetail" @tab-click="handleDetailTab">
        <el-tab-pane name="orderDetail">
          <span slot="label">订单详情 </span>
          <AdvanceTable class="order-table" :card-border="false" :show-tools="false" :data="orderDetailList" :params="orderParams" :columns="orderColumns" :get-list="getDetailInfo" :total="orderTotal" :loading="loading">
            <template #duration="duration">
              {{ durationMode(JSON.parse(duration)) }}
            </template>
            <template #time="val, record">
              {{ !record.effectiveTime && !record.expiredTime ? '--' : '' }}
              <p>{{ record.effectiveTime }}</p>
              <p>{{ record.expiredTime }}</p>
            </template>
            <template #resourceStatus="status">
              <status-icon :type="status | resStatusFilter('color')">
                {{ status | resStatusFilter('status') }}
              </status-icon>
            </template>
            <template #elementList="elementList">
              <p style="margin: 0; padding: 0" v-for="item in elementList" :key="item">{{ item }}</p>
            </template>
            <template #basicPrice="basicPrice">
              {{ basicPrice !== null ? `￥${basicPrice}元` : `--` }}
            </template>
            <template #discountList="discountList">
              {{ discountList[0] }}
            </template>
            <template #finalPrice="finalPrice">
              {{ finalPrice !== null ? `￥${finalPrice}元` : `--` }}
            </template>
          </AdvanceTable>
        </el-tab-pane>
        <el-tab-pane name="record">
          <span slot="label"> 账单记录 </span>
          <AdvanceTable class="bill-table" :show-tools="false" :card-border="false" :title="'账单金额汇总: ￥' + totalMoney + '元'" :data="billList" :search-configs="searchConfigs" :params="billParams" :columns="billColumns" :get-list="getBillList" :total="billTotal" :loading="loading">
            <template #status="status">
              {{ orderStatusList[status] || status }}
            </template>
            <template #chargeMode="mode">
              {{ chargeMode[mode] || mode }}
            </template>
            <template #money="money">
              {{ money !== null ? `￥${money}元` : `--` }}
            </template>
          </AdvanceTable>
        </el-tab-pane>
      </el-tabs>
    </common-detail>
  </div>
</template>

<script>
import { getOrderDetail } from 'services/system/order'
import { getBills } from 'services/services/bill'
const orderStatusList = {
  unpay: '未支付', // 未支付
  paid: '已支付', // 已支付
  canceld: '已取消', // 已取消
  audit: '审批中'
}

const typeMap = {
  apply: '新购',
  alterat: '变更',
  unsubscribe: '退订'
}

const chargeMode = {
  PreCharge: '预付费',
  PostCharge: '后付费'
}

export default {
  props: {
    config: {
      type: Object
    }
  },
  filters: {
    resStatusFilter(value, type) {
      const cnUserData = {
        OpenedSuccess: '开通成功',
        OpenedFailure: '开通失败',
        Opening: '正在开通',
        ChangeSuccess: '变更成功',
        ChangeFailure: '变更失败',
        Changing: '正在变更',
        UnsubscribeSuccess: '退订成功',
        UnsubscribeFailure: '退订失败',
        Unsubscribing: '正在退订',
        ExtensionSuccess: '延期成功',
        ExtensionFailure: '延期失败',
        Extensioning: '延期中',
        Abandoned: '已废弃',
        Canceld: '已取消',
        Termination: '已终止',
        Audit: '审批中'
      }
      const colorMap = {
        Opening: 'normal', // ing
        Changing: 'normal', // ing
        Unsubscribing: 'normal', // ing
        Extensioning: 'normal', // ing
        OpenedSuccess: 'success', // 成功
        ChangeSuccess: 'success', // 成功
        UnsubscribeSuccess: 'success', // 成功
        ExtensionSuccess: 'success', // 成功
        OpenedFailure: 'danger', // 失败
        ChangeFailure: 'danger', // 失败
        UnsubscribeFailure: 'danger', // 失败
        ExtensionFailure: 'danger', // 失败
        Abandoned: 'warning', // 已废弃
        Canceld: 'disabled', // 已取消
        Termination: '#72142a', // 已终止
        Audit: 'normal'
      }
      return type == 'color' ? colorMap[value] : cnUserData[value]
    }
  },
  computed: {
    durationMode() {
      return function (val) {
        if (val.mode === 'Hour') {
          return '后付费（按小时计费）'
        } else if (val.mode === 'Month') {
          return `预付费（按月计费）: ${val.amount}个月`
        } else if (val.mode === 'Year') {
          return `预付费（按年计费）: ${val.amount}年`
        }
      }
    }
  },
  data() {
    return {
      orderParams: {
        page: 1,
        rows: 10
      },
      orderColumns: [
        {
          label: '资源类型',
          prop: 'serviceName'
        },
        {
          label: '具体配置',
          prop: 'elementList',
          scopedSlots: { customRender: 'elementList' }
        },
        {
          label: '资源状态',
          prop: 'status',
          scopedSlots: { customRender: 'resourceStatus' }
        },
        {
          label: '结果',
          prop: 'errorMsg'
        },
        {
          label: '付款方式',
          prop: 'duration',
          scopedSlots: { customRender: 'duration' }
        },
        {
          label: '起止时间',
          prop: 'time',
          scopedSlots: { customRender: 'time' }
        },
        {
          label: '原价',
          prop: 'basicPrice',
          scopedSlots: { customRender: 'basicPrice' }
        },
        {
          label: '折扣率',
          prop: 'discountList',
          scopedSlots: { customRender: 'discountList' }
        },
        {
          label: '实际价格',
          prop: 'finalPrice',
          scopedSlots: { customRender: 'finalPrice' }
        }
      ],
      billColumns: [
        {
          label: '账期',
          prop: 'month'
        },
        {
          label: '资源名称',
          prop: 'serviceName'
        },
        {
          label: '订单编号',
          prop: 'orderSn'
        },
        {
          label: '流水号',
          prop: 'sn'
        },
        {
          label: '账单状态',
          prop: 'status',
          scopedSlots: { customRender: 'status' }
        },
        {
          label: '收费模式',
          prop: 'chargeMode',
          scopedSlots: { customRender: 'chargeMode' }
        },
        {
          label: '账单金额',
          prop: 'money',
          scopedSlots: { customRender: 'money' }
        },
        {
          label: '所属租户',
          prop: 'tenantName'
        },
        {
          label: '创建时间',
          prop: 'gmtCreate'
        }
      ],
      searchConfigs: [{ type: 'Const', value: 'orderId', sign: 'EQ', initValue: this.config.id }],
      orderTotal: 0,
      loading: false,
      orderStatusList,
      typeMap,
      chargeMode,
      detailData: {},
      billList: [],
      billTotal: 0,
      orderDetailList: [],
      billParams: {
        page: 1,
        rows: 10
      },
      totalMoney: 0
    }
  },
  created() {
    this.getDetailInfo()
    this.getBillList()
  },
  methods: {
    handleDetailTab(tab) {
      switch (tab.name) {
        case 'orderDetail':
          break
        case 'record':
          break
      }
    },
    async getDetailInfo() {
      this.loading = true
      const res = await getOrderDetail(this.config.id)
      if (res.success) {
        this.detailData = res.data
        this.orderDetailList = res.data.items
        this.totalMoney = res.data.money
      }
      this.loading = false
    },
    getBillList() {
      this.loading = true
      getBills({
        ...this.billParams,
        params: this.$tools.handleSearchParam({
          orderId: this.config.id
        })
      })
        .then((res) => {
          if (res.success) {
            this.billList = res.data.rows
            this.billTotal = res.data.total
          }
        })
        .finally(() => {
          this.loading = false
        })
    },
    goBack() {
      this.config.visible = false
    }
  }
}
</script>

<style scoped lang="scss">
.bill-table ::v-deep .search {
  display: none !important;
}
.order-table {
  ::v-deep .pagination-container {
    display: none;
  }
}
</style>
