<template>
  <div>
    <a-card :bordered="true" style="margin-top: 24px" title="匹配的服务包">
      <template #extra>
        <a @click="refresh" style="margin-right:20px;margin-left:20px;"><a-icon type="sync" /></a>
        <span v-if="(count>0)">
          <span style="color:#ff4d4f;">共{{ count }}条待补差价 </span>
          <a-tooltip>
            <template slot="title">
              发起了补差价，等待用户完成补差价操作才可以处理其他事项！
            </template>
            <a-icon type="info-circle" :style="{ fontSize: '16px', color: '#ff4d4f',padding:'0 0 0 10px' }" />
          </a-tooltip>
        </span>
        <a class="active" @click="payDiff({ id })" v-if="(can.diff && count === 0)">
          <a-icon type="red-envelope" color="green" />补差价
        </a>
      </template>
      <s-table
        ref="table"
        :columns="columns"
        :data="loadData"
        :rowKey="(row) => row.group_no"
        showPagination="auto"
        size="default"
        :expandRowByClick="true"
      >
        <span slot="price" slot-scope="text, record"> ￥{{ record.price }}</span>
        <span slot="total" slot-scope="text, record"> ￥{{ record.total }}</span>
        <span slot="business_type" slot-scope="text, record"> {{ record.items.length || 0 }}个机构</span>
        <div slot="expandedRowRender" slot-scope="record">
          <a-descriptions
            :column="{ xxl: 3, xl: 2, lg: 2, md: 1, sm: 1, xs: 1 }"
            v-for="item in record.items"
            :key="item.item_id"
            :title="item.title"
          >
            <a-descriptions-item label="业务名称 ">{{ item.business }}</a-descriptions-item>
            <a-descriptions-item label="业务类型 ">{{ item.type }}</a-descriptions-item>
            <a-descriptions-item label="欠款金额"> ￥{{ item.price }}</a-descriptions-item>
          </a-descriptions>
        </div>
      </s-table>
      <br/>
      <div style="display:flex;">
        补差价次数:<span style="margin-right:30px;color:#1890ff;">{{ base.count }}次</span>
        待补差价:<span style="margin-right:30px;color:#1890ff;">￥{{ base.unpay }}</span>
        已补差价:<span style="margin-right:30px;color:#1890ff;">￥{{ base.paid }}</span>
        服务包金额:<span style="margin-right:30px;color:#1890ff;">￥{{ base.total }}</span>
      </div>
      <div>
        <a-timeline :reverse="true">
          <a-timeline-item v-for="item in diffsList" :key="item.diff_id">
            <a-card :bordered="true" style="margin-top: 24px" :title="item.status">
              <template #extra>
                <a-popconfirm v-if="item.is_delete" title="是否确认撤回该条补差价?" ok-text="确认" cancel-text="取消" @confirm="diffBack(item.diff_id)">
                  <a> <a-icon type="delete" :style="{ fontSize: '14px', color: '#1890ff',padding:'6px 6px 6px 0' }" />撤回补差价</a>
                </a-popconfirm>
              </template>
              <a-descriptions>
                <a-descriptions-item label="创建时间"> {{ item.created_at }}</a-descriptions-item>
                <a-descriptions-item label="操作人 ">{{ item.operate.name }}({{ item.operate.type }})</a-descriptions-item>
                <a-descriptions-item label="操作类型 ">发起<a>{{ item.ins != '' ? '机构' : '服务包' }}</a>补差价</a-descriptions-item>
                <a-descriptions-item label="操作机构" v-if="item.ins != ''">{{ item.ins }}</a-descriptions-item>
                <a-descriptions-item label="补差金额"> ￥{{ item.price }}</a-descriptions-item>
                <a-descriptions-item label="备注原因"> {{ item.remark }}</a-descriptions-item>
              </a-descriptions>
            </a-card>
          </a-timeline-item>
        </a-timeline>
      </div>
    </a-card>
  </div>
</template>
<script>
import {
  getServices,
  diffPayList,
  diffBack,
  getAllBanks
} from '@/api/order'
import { STable } from '@/components'
import BankItem from './BankItem.vue'
import PayDifference from '@/components/OrderDetailInfo/modules/PayDifference.vue'

const columns = [
  { title: '服务包名称', dataIndex: 'title', key: 'title' },
  {
    title: '包含机构',
    dataIndex: 'business_type',
    key: 'business_type',
    scopedSlots: { customRender: 'business_type' }
  },
  { title: '总欠款金额', dataIndex: 'total', key: 'total', scopedSlots: { customRender: 'total' } },
  { title: '服务包金额', dataIndex: 'price', key: 'price', scopedSlots: { customRender: 'price' } }
]
export default {
  name: 'Services',
  components: {
    STable,
    BankItem
  },
  props: {
    id: {
      type: String,
      default: ''
    },
    can: {
      type: Object,
      default: () => {
        return {}
      }
    },
    count: {
      type: Number,
      default: 0
    }
  },
  data () {
    return {
      columns,
      queryParam: {},
      diffsList: [],
      base: {},
      loadData: (parameter) => {
        const requestParameters = Object.assign({}, parameter, this.queryParam)
        return getServices(this.id, requestParameters)
      }
    }
  },
  created () {
    this.getPayDiff()
  },
  activated () {
    this.$refs.table.loadData()
    this.getPayDiff()
  },
  methods: {
    refresh () {
      this.getPayDiff()
      this.$refs.table.loadData()
    },
    getPayDiff () {
      diffPayList(this.id).then(res => {
        this.diffsList = res.lists
        this.base = res.base
      }).catch(err => {
        this.$error(err.message)
      })
    },
    diffBack (id) {
      diffBack(this.id, id).then(res => {
        this.$notification.success({
          message: '成功',
          description: '操作成功！'
        })
        this.eventBus.$emit('updateOrderInfo', { data: true })
        this.getPayDiff()
      }).catch(err => {
        this.$error(err.message)
      })
    },
    payDiff (item) {
      // 获得所有机构信息
      getAllBanks(item.id).then(res => {
        item.banks = res
        this.$dialog(
          PayDifference,
          {
            item,
            on: {
              ok: () => {
                this.$refs.table.loadData()
                this.eventBus.$emit('updateOrderInfo', { data: true })
                this.getPayDiff()
              }
            }
          },
          {
            title: '给服务包/机构补差价',
            width: 500,
            maskClosable: true,
            closable: true,
            okText: '确认补差价',
            cancelText: '取消'
          }
        )
      }).catch(err => {
        console.log(err)
      })
    }
  }
}
</script>
<style lang="less" scoped>
.row {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}
.column {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}
.ai_start {
  align-items: flex-start;
}
.jc_start {
  justify-content: flex-start;
}
.jc_sb {
  justify-content: space-between;
}
.js_start {
  justify-content: start;
}
</style>
