<template>
  <a-modal
    width="1200px"
    :visible="visible"
    title="分佣详情"
    @ok="handleCancel"
    @cancel="handleCancel"
  >
    <a-table
      :loading="loading"
      :columns="columns"
      :data-source="tickets"
      :pagination="false"
      :row-key="record => record.id"
    >
      <template slot="status" slot-scope="text, record">
        <a-tag :color="record.status | prorateStatusColor">{{
          record.status | wxProrateStatusName
        }}</a-tag>
      </template>
      <p slot="expandedRowRender" slot-scope="record" style="margin: 0">
        <a-table
          :loading="loading"
          :columns="columns2"
          :data-source="record.wxProfitShareDetails"
          :pagination="false"
          :row-key="record => record.detail_id"
        >
          <template slot="salesUser" slot-scope="text, record">
            {{ record.salesUser.name || record.salesUser.nick_name }}({{
              record.salesUser.real_name
            }})
          </template>
          <template slot="status" slot-scope="text, record">
            <a-tag :color="record.status | prorateStatusColor">{{
              record.status | wxUserProrateStatusName
            }}</a-tag>
          </template>
        </a-table>
      </p>
    </a-table>

    <div class="btn-wrap">
      <a-button @click="getProrateDetail" type="primary">刷新分佣信息</a-button>

      <a-button
        v-if="tickets[0] &&(
          tickets[0].status === 'FINSIHED_PART_SUCCESS' ||
          tickets[0].status === 'FAIL')
        "
        @click="retryWxProrate"
      >重试微信分佣</a-button
      >
    </div>
  </a-modal>
</template>

<script>
import { getWxProrateDetail, retryWxProrate } from '@/api/orderSetting/order'

const columns = [
  {
    title: '订单号',
    dataIndex: 'order_no',
    key: 'order_no'
  },
  {
    title: '微信订单号',
    dataIndex: 'wx_order_id',
    key: 'wx_order_id'
  },

  {
    title: '分佣单号',
    dataIndex: 'wx_profit_share_no',
    key: 'wx_profit_share_no'
  },
  {
    title: '创建时间',
    dataIndex: 'create_time',
    key: 'create_time'
  },
  {
    title: '状态',
    dataIndex: 'status',
    key: 'status',
    width: '90px',
    scopedSlots: { customRender: 'status' }
  }
]

const columns2 = [
  {
    title: '微信分佣详情ID',
    dataIndex: 'detail_id',
    key: 'detail_id'
  },
  {
    title: '用户',
    dataIndex: 'salesUser',
    key: 'salesUser',
    scopedSlots: { customRender: 'salesUser' }
  },
  {
    title: '金额',
    dataIndex: 'amount',
    key: 'amount'
  },
  {
    title: '失败原因',
    dataIndex: 'fail_reason',
    key: 'fail_reason'
  },

  {
    title: '状态',
    dataIndex: 'status',
    key: 'status',
    width: '90px',
    scopedSlots: { customRender: 'status' }
  }
]

export default {
  components: {},
  data () {
    return {
      columns,
      columns2,
      tickets: [],
      selectedRowKeys: [],
      loading: false,
      visible: false
    }
  },
  methods: {
    show (id) {
      this.visible = true
      this.tickets = []
      this.id = id

      this.getProrateDetail()
    },
    handleCancel () {
      this.visible = false
    },
    getProrateDetail () {
      this.loading = true
      getWxProrateDetail(this.id)
        .then(res => {
          this.tickets = res.extraInfo
        })
        .finally(() => {
          this.loading = false
        })
    },
    retryWxProrate () {
      this.loading = true
      retryWxProrate(this.id)
        .then(res => {})
        .finally(() => {
          this.loading = false
        })
    }
  }
}
</script>

<style lang="scss" scoped>
.btn-wrap {
  text-align: center;
  padding-top: 20px;
}
</style>
