<template>
  <el-dialog
    :visible.sync="visible"
    v-bind="modalOptions"
    append-to-body
  >
    <div>
      <el-table
        v-loading="!formData.Clrglist || !formData.Clrglist.length" height="60vh" element-loading-text="暂无清算明细数据"
        :data="formData.Clrglist"
        v-bind="{ stripe: true, size: 'small', border: true, fit: true, highlightCurrentRow: true }"
      >
        <el-table-column align="center" min-width="80" prop="Sub_Ordr_Id" label="子订单编号" />
        <el-table-column align="center" min-width="100" prop="Seq_No" label="顺序号" show-overflow-tooltip />
        <el-table-column align="center" min-width="120" prop="Rcv_Prt_Mkt_Mrch_ID" label="收款商家编号" show-overflow-tooltip />
        <el-table-column align="center" min-width="120" prop="Clrg_Dt" label="分账日期" show-overflow-tooltip />
        <el-table-column align="center" min-width="120" label="分账状态" prop="Clrg_Stcd">
          <template slot-scope="{ row }">
            <span v-if="row.Clrg_Stcd === '0'">初始（未进行分账处理）</span>
            <span v-else-if="row.Clrg_Stcd === '1'">未清算（生成分账信息中）</span>
            <span v-else-if="row.Clrg_Stcd === '2'">已清算（已分账成功）</span>
            <span v-else-if="row.Clrg_Stcd === '3'">无需清算（该笔订单已全额退，不需要分账）</span>
            <span v-else-if="row.Clrg_Stcd === '4'">清算异常（分账出现异常）</span>
            <span v-else-if="row.Clrg_Stcd === '6'">清算中（分账处理中）</span>
            <span v-else-if="row.Clrg_Stcd === 'b'">待清算（未到分账日期）</span>
            <span v-else>--</span>
          </template>
        </el-table-column>
        <el-table-column align="center" min-width="100" prop="Clrg_Amt" label="收款方实际（应）分账金额" show-overflow-tooltip />
        <el-table-column align="center" min-width="100" prop="Clrg_Txn_Srl_No" label="清算交易流水号" show-overflow-tooltip />
      </el-table>
    </div>
  </el-dialog>
</template>

<script>

export default {
  name: 'ClearingDetails',
  data() {
    return {
      modalOptions: {
        closeOnClickModal: false,
        width: '1100px',
        title: '查看清算明细'
      },
      visible: false,
      formData: {
        Clrglist: []
      }
    }
  },
  methods: {
    handleClose() {
      this.visible = false
    },
    initList() {
    },
    handleOpen(params = {}) {
      this.formData = Object.assign(this.$options.data().formData, params)
      this.initList()
      if (params.id) {
        // this.getInfo(params.id)
      }
      this.visible = true
    },
    async getInfo(id) {
      const loading = this.$loading({ text: '加载中' })
      try {
        const res = await xxx({ id })
        this.formData = Object.assign(this.$options.data().formData, res.data, {
          id: res.data.id || ''
        })
      } finally {
        loading.close()
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.small-padding {
	.cell {
		padding-left: 5px;
		padding-right: 5px;
	}
}

.fixed-width {
	.el-button--mini {
		padding: 7px 10px;
	}
}
</style>

