<template>
  <div class="ele-body">
    <el-card shadow="never" v-loading="loading">
      <search-table @search="reload"></search-table>
      <!-- 数据表格 -->
      <ele-pro-table
        ref="table"
        :columns="columns"
        :datasource="datasource"
        height="calc(100vh - 375px)"
        full-height="calc(100vh - 116px)"
        tool-class="ele-toolbar-form"
        :selection.sync="selection"
        cache-key="eomContactPageTable"
      >
        <!-- 操作 -->
        <template v-slot:action="{row}">

          <el-link
            type="primary"
            v-if="[2].includes(row.approvalStatus)"
            :underline="false"
            icon="el-icon-plus"
            @click="handleCollection(row,'update')">
            收款
          </el-link>
        </template>
        <!-- 收款信息 -->
        <template v-slot:code="{row}">

          <el-link
            type="primary"
            :underline="false"
            @click="handleDetail(row,'view')">
            {{ row.code }}
          </el-link>
        </template>
        <!-- 开票信息 -->
        <template v-slot:invoiceCode="{row}">

          <el-link
            type="primary"
            :underline="false"
            @click="handleInvoiceDetail(row,'view')">
            {{ row.invoiceCode }}
          </el-link>
        </template>
      </ele-pro-table>
    </el-card>
    <!--    收款信息-->
    <collection-dialog ref="collectionDialogRef" v-if="collectionDialogFlag"
                       :collection-dialog-flag.sync="collectionDialogFlag" @reload="reload"></collection-dialog>
    <detail-dialog ref="detailDialogRef" v-if="detailDialogFlag"
                   :detail-dialog-flag.sync="detailDialogFlag"></detail-dialog>
    <!--开票详情-->
    <invoice-detail-dialog ref="invoiceDetailDialogRef" v-if="invoiceDetailDialogFlag"
                   :detailDialogFlag.sync="invoiceDetailDialogFlag"></invoice-detail-dialog>
  </div>
</template>

<script>
import {reviewStatus} from '@/enum/dict';
import dictMixins from "@/mixins/dictMixins";
import {finReceivablePageListAPI} from "@/api/financialManage/receivableManage";
import collectionDialog from "./components/collectionDialog.vue";
import searchTable from './searchTable.vue'
import detailDialog from './components/detailDialog.vue'
import  invoiceDetailDialog from '../invoiceManage/components/detailDialog.vue'
export default {
  mixins: [dictMixins],
  components: {
    searchTable,
    collectionDialog,
    detailDialog,
    invoiceDetailDialog
  },
  data() {
    return {
      // 加载状态
      loading: false,
      collectionDialogFlag: false,
      detailDialogFlag: false,
      invoiceDetailDialogFlag: false,
      selection: [],
      statusList: [
        {
          label: '未收款',
          value: 0,
        },
        {
          label: '部分收款',
          value: 1,
        },
        {
          label: '已收全款',
          value: 2,
        },
      ]
    };
  },
  computed: {
    columns() {
      return [
        {
          width: 60,
          label: '序号',
          type: 'index',
          columnKey: 'index',
          align: 'center',
        },
        {
          minWidth: 130,
          prop: 'code',
          label: '应收编码',
          align: 'center',
          slot: 'code',
          showOverflowTooltip: true
        },
        {
          minWidth: 120,
          prop: 'invoiceCode',
          label: '发票编码',
          slot: 'invoiceCode',
          align: 'center',
          showOverflowTooltip: true
        },
        {
          minWidth: 130,
          prop: 'contactName',
          label: '单位名称',
          align: 'center',
          slot: 'contactName',
          showOverflowTooltip: true
        },
        {
          minWidth: 140,
          prop: 'receivableDate',
          label: '应收日期',
          slot: 'receivableDate',
          align: 'center',
          showOverflowTooltip: true
        },
        {
          minWidth: 100,
          prop: 'receivableTotalPrice',
          label: '应收金额',
          align: 'center',
          slot: 'receivableTotalPrice',
          showOverflowTooltip: true
        },
        {
          minWidth: 100,
          prop: 'receivedTotalPrice',
          label: '已收金额',
          align: 'center',
          slot: 'receivedTotalPrice',
          showOverflowTooltip: true
        },
        {
          minWidth: 100,
          prop: 'unreceiveTotalPrice',
          label: '未收金额',
          align: 'center',
          slot: 'unreceiveTotalPrice',
          showOverflowTooltip: true
        },
        {
          minWidth: 100,
          prop: 'sourceCode',
          label: '来源编码',
          align: 'center',
          slot: 'sourceCode',
          showOverflowTooltip: true
        },
        {
          minWidth: 100,
          prop: 'accountingSubjectName',
          label: '会计科目',
          align: 'center',
          slot: 'accountingSubjectName',
          showOverflowTooltip: true
        },
        {
          minWidth: 100,
          prop: 'status',
          label: '收款状态',
          align: 'center',
          slot: 'status',
          showOverflowTooltip: true,
          formatter: (_row, _column, cellValue) => {
            return this.statusList.find(item => item.value === cellValue).label
          }
        },
        {
          minWidth: 100,
          prop: 'approvalStatus',
          label: '审核状态',
          align: 'center',
          slot: 'approvalStatus',
          formatter: (_row, _column, cellValue) => {
            return reviewStatus[_row.approvalStatus];
          }
        },
        {
          columnKey: 'action',
          label: '操作',
          width: 100,
          align: 'center',
          resizable: false,
          slot: 'action',
          showOverflowTooltip: true,
          fixed: 'right'
        }
      ]
    }
  },
  created() {
  },
  methods: {
    handleCollection(row = {}, type) {
      this.collectionDialogFlag = true;
      this.$nextTick(() => {
        this.$refs.collectionDialogRef.init(row, type);
      })
    },
    handleDetail(row = {}, type) {
      this.detailDialogFlag = true;
      this.$nextTick(() => {
        this.$refs.detailDialogRef.init(row.id);
      })
    },
    handleInvoiceDetail(row = {}, type) {
      this.invoiceDetailDialogFlag = true
      this.$nextTick(() => {
        let params ={
          id:row.invoiceId
        }
        this.$refs.invoiceDetailDialogRef.init(params, type)
      })
    },
    /* 表格数据源 */
    datasource({page, limit, where, order}) {
      return finReceivablePageListAPI({
        pageNum: page,
        size: limit,
        ...where
      });
    },

    /* 刷新表格 */
    reload(where) {
      this.$nextTick(() => {
        this.$refs.table.reload({page: 1, where});
      })
    }
  }
};
</script>

<style lang="scss" scoped>
:deep(.el-link--inner) {
  margin-left: 0px !important;
}

.sys-organization-list {
  height: calc(100vh - 264px);
  box-sizing: border-box;
  border-width: 1px;
  border-style: solid;
  overflow: auto;
}

.sys-organization-list :deep(.el-tree-node__content) {
  height: 40px;

  & > .el-tree-node__expand-icon {
    margin-left: 10px;
  }
}
</style>
