<template>
    <div class="equity-registration-warehousing corporate-customers">
        <!-- 左侧树 -->
        <div class="left-tree" v-show="componentName === 'table'">
            <tree-side :treeData="treeData" :tabList="tabList" :defaultProps="defaultProps" @currentChange="currentChange"
                @tabChange="tabChange" @filterChange="filterChange"></tree-side>
        </div>
        <div class="right-table" v-show="componentName === 'table'">
            <div class="full-page bg">
                <div class="search-box">
                    <!-- <SuperSearch :searchForm="queryParams" :basisOption="basisOption" @is-show-advance="advanced()"
                        @search="handleSearch" /> -->
                  <div class="btn-box" ref="btnPanel">
                            <el-button size="mini" icon="el-icon-plus" type="primary" class="btn btn-plus" @click="handleAdd">
                                添加
                            </el-button>
                            <el-button size="mini" slot="reference" icon="el-icon-delete" type="danger" plain class="btn btn-delete"
                                :disabled="this.currentDataDel.length == 0" @click="handleDelete()">
                                删除
                            </el-button>
                        </div>
                        <SearchCommon @search="handleSearch" :optionList="optionList" />
                </div>
                <div class="main-table-container">
                    <div class="table-container" style="padding: 20px">
                        <div class="table-content" ref="tableRef">
                          <el-table stripe v-loading="tableLoading"

                                    element-loading-background="rgba(10 ,38 ,61, 0.9)" ref="multipleSelection"
                                    :data="tableData"
                                :max-height="tableMaxHeight" class="table-list" :row-key="getRowKey" border
                                @selection-change="handleSelectionChange" @row-dblclick="handleDbClick">
                                <el-table-column type="selection" width="55" align="center"
                                    :selectable="selectable"></el-table-column>
                                <el-table-column type="index" width="60" label="序号" align="center">
                                </el-table-column>
                                <el-table-column prop="belongsOrgName" show-overflow-tooltip min-width="120" align="center"
                                    label="所属公司">
                                </el-table-column>
                                <el-table-column prop="name" show-overflow-tooltip min-width="120" align="center"
                                    label="交易对象">
                                </el-table-column>
                                <el-table-column prop="dealType" show-overflow-tooltip min-width="120" align="center"
                                    label="交易方式">
                                </el-table-column>
                                <!-- <el-table-column
                                    prop="dealOrg"
                                    show-overflow-tooltip
                                    min-width="120"
                                    align="center"
                                    label="交易机构"
                                > -->
<!--                                </el-table-column>-->

                                <el-table-column prop="contractMoney" show-overflow-tooltip min-width="120" align="center"
                                    label="合同金额(万元)">
                                </el-table-column>
                                <el-table-column prop="yearEarningsRate" show-overflow-tooltip min-width="120"
                                    align="center" label="年收益率(%/年)">
                                </el-table-column>
                                <el-table-column prop="returnType" show-overflow-tooltip min-width="120" align="center"
                                    label="还本付息方式">
                                    <template v-slot="{ row }">
                                        {{
                                            getDictName(
                                                'hbfxfs',
                                                row.returnType
                                            )
                                        }}
                                    </template>
                                </el-table-column>
                                <!-- <el-table-column
                                    prop="dateLimit"
                                    show-overflow-tooltip
                                    min-width="120"
                                    align="center"
                                    label="期限"
                                >
                                </el-table-column>
                                <el-table-column
                                    prop="startDate"
                                    show-overflow-tooltip
                                    min-width="120"
                                    align="center"
                                    label="起始日期"
                                >
                                </el-table-column>
                                <el-table-column
                                    prop="endDate"
                                    show-overflow-tooltip
                                    min-width="120"
                                    align="center"
                                    label="到期日期"
                                >
                                </el-table-column>
                                <el-table-column
                                    prop="riskMeasures"
                                    show-overflow-tooltip
                                    min-width="120"
                                    align="center"
                                    label="风控措施"
                                >
                                </el-table-column> -->
                                <el-table-column prop="loanStatus" show-overflow-tooltip min-width="120" align="center"
                                    label="债权状态">
                                    <template v-slot="{ row }">
                                        {{
                                            getDictName('zqzt', row.loanStatus)
                                        }}
                                    </template>
                                </el-table-column>

                                <el-table-column prop="assetNature" show-overflow-tooltip min-width="120" align="center"
                                    label="审核状态">
                                    <template v-slot="{ row }">
                                        <el-tag v-if="row.assetAudit == -1" type="info">{{
                                            getDictName(
                                                'shzt',
                                                row.assetAudit
                                            )
                                        }}</el-tag>
                                        <el-tag v-if="row.assetAudit == 0">{{
                                            getDictName('shzt', row.assetAudit)
                                        }}</el-tag>
                                        <el-tag v-if="row.assetAudit == 1" type="danger">{{
                                            getDictName(
                                                'shzt',
                                                row.assetAudit
                                            )
                                        }}</el-tag>
                                        <el-tag v-if="row.assetAudit == 2" type="success">{{
                                            getDictName(
                                                'shzt',
                                                row.assetAudit
                                            )
                                        }}</el-tag>
                                    </template>
                                </el-table-column>
                                <!-- <el-table-column
                                    prop="remark"
                                    show-overflow-tooltip
                                    min-width="120"
                                    align="center"
                                    label="备注"
                                > -->
                                </el-table-column>
                                <el-table-column show-overflow-tooltip min-width="180" align="center" fixed="right"
                                    label="操作">
                                    <template v-slot="{ row }">
                                        <el-link type="primary" :underline="false" style="margin-right: 10px"
                                            @click="detailBtn(row)">
                                            详情
                                        </el-link>
                                        <el-link type="danger" v-if="row.assetAudit !== '2'" :underline="false"
                                            style="margin-right: 10px" @click="handleDelete(row)">
                                            删除
                                        </el-link>
                                    </template>
                                </el-table-column>
                            </el-table>
                            <pagination ref="paginationPanel" style="margin-top: 10px" :pageResult="params.pageBean"
                                @size-change="handleSizeChange" @current-change="handleCurrentChange" />
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- 弹层 -->
        <editAddDialog ref="editAddDialog" v-show="componentName === 'editAddDialog'" @closeComponent="closeComponent">
        </editAddDialog>
        <!-- 详情 -->
        <detailDialog v-show="componentName === 'detailDialog'" @closeComponent="closeComponent" ref="detailDialog">
        </detailDialog>
    </div>
</template>

<script>
import pagination from '../../../../components/SuperPagination'
import {TableMixin} from '@/mixins/tableMixin'
import utils from '@/utils/utils.js'
import detailDialog from './components/detailDialog.vue'
import editAddDialog from './components/editAddDialog.vue'
import SuperSearch from '@/components/SuperSearch/index.vue'
import api from '@/api/BondAssets/BondAssetsEnter/CreditorRightsRegistered.js'
import treeSide from '@/components/treeSide/index.vue'
import pubSub from 'pubsub-js'
import SearchCommon from '@/components/SearchCommon/index.vue'
export default {
    name: 'CreditorRightsRegistered', // 债权登记入库
    components: {
        SuperSearch,
        pagination,
        editAddDialog,
        detailDialog,
        treeSide,
        SearchCommon,
    },
    mixins: [TableMixin],
    data() {
        return {
            tabList: ['单位'], //左边tab
            defaultProps: {
                children: 'children',
                label: 'name',
            },
            treeData: [],
            tableMaxHeight: '600px',
            loading: false,
            tableLoading: false,
            componentName: 'table',
            tableData: [],
            multipleSelection: [],
            searchForm: {}, // 顶部搜索对象
            currentDataDel: [],
            pubSub: null,
            optionList: [
                {
                    title: '债权状态',
                    prop: 'loanStatus',
                    type: 'select',
                    option: [],
                },
                {
                    title: '还本付息方式',
                    prop: 'returnType',
                    type: 'select',
                    option: [],
                },
                {
                    title: '交易对象',
                    prop: 'name',
                    type: 'input',
                    default: true,
                },
                {
                    title: '交易方式',
                    prop: 'dealType',
                    type: 'input',
                },
            ],
            params: {
                pageBean: {
                    pageSize: 20,
                    page: 1,
                    total: 0,
                },
                querys: [
                    {
                        group: 'main',
                        operation: 'EQUAL',
                        property: 'belongsOrgId',
                        relation: 'AND',
                        value: '',
                        noRest: true,
                    },
                    {
                        group: 'main',
                        operation: 'LIKE',
                        property: 'name',
                        relation: 'AND',
                        value: '',
                    },
                    {
                        group: 'main',
                        operation: 'IN',
                        property: 'returnType',
                        relation: 'AND',
                        value: '',
                    },
                    {
                        group: 'main',
                        operation: 'LIKE',
                        property: 'dealType',
                        relation: 'AND',
                        value: '',
                    },
                    {
                        group: 'main',
                        operation: 'IN',
                        property: 'loanStatus',
                        relation: 'AND',
                        value: '',
                    },
                ],
                sorter: [
                    {
                        direction: 'DESC',
                        property: 'createTime',
                    },
                ],
            },
        }
    },
    created() {
        this.optionList[0].option = utils.getDictItemsFromCache('zqzt')
        this.optionList[1].option = utils.getDictItemsFromCache('hbfxfs')
        this.loadData()
        this.getUserOrgTree()
    },
    mounted() {
        this.calcTableHeight()
        this.$root.$on('resize', () => {
            this.calcTableHeight(500)
        })
        // 添加自定义面包屑pub-sub
        this.pubSub = pubSub.subscribe('breadcrumb-click', (_, item) => {
            console.log(item)
            if (item.isCurrentRoute) this.componentName = 'table'
        })
    },
    methods: {
        //关闭组件
        closeComponent(row) {
            this.componentName = 'table'
            this.loadData()
        },
        //字典翻译
        getDictName(code, value) {
            return utils.getDictName(code, value)
        },
        //获取数据
        loadData() {
            this.tableLoading = true
            let data = this.params.querys.filter((it) => it.value.length)
            api.queryData({...this.params, querys: data}, (res) => {
                if (res.rows) {
                    this.tableData = res.rows
                    this.params.pageBean.total = res.total
                    this.tableLoading = false
                }
            })
        },
        //添加
        handleAdd() {
            this.componentName = 'editAddDialog'
            pubSub.publish('add-custom-breadcrumb', '添加')
            this.$refs.editAddDialog.addModifyBtn()
        },
        //详情
        detailBtn(row) {
            this.componentName = 'detailDialog'
            pubSub.publish('add-custom-breadcrumb', '详情')
            this.$refs.detailDialog.detail(row)
        },
        // 删除
        handleDelete(val) {
            let ids
            if (val) {
                ids = val.id
            } else {
                ids = this.currentDataDel.join()
            }
            this.$confirm('确定删除选中数据吗？', '提示', {
                confirmButtonText: '确认',
                cancelButtonText: '取消',
                type: 'warning',
            }).then(() => {
                api.deleteData(ids, (res) => {
                    if (res.state) {
                        this.$message.success('删除成功')
                        this.loadData()
                    }
                })
            })
        },
        //修改
        handleDbClick(row) {
            if (row.assetAudit === '2') {
                this.$message({
                    message: '此条数据已审核！',
                    type: 'warning',
                })
            } else {
                this.componentName = 'editAddDialog'
                pubSub.publish('add-custom-breadcrumb', '编辑')
                this.$refs.editAddDialog.addModifyBtn(row)
            }
        },
        // 顶部搜索
        handleSearch(data) {
            this.params.querys.forEach((item) => {
                if (!item.noRest) {
                    item.value = ''
                }
                data.forEach((it) => {
                    if (item.property === it.prop) {
                        item.value = it.value
                    }
                })
            })
            this.loadData()
        },
        //表格选中
        handleSelectionChange(val) {
            this.currentDataDel = val.map((item) => {
                return item.id
            })
        },
        //分页页数
        handleCurrentChange(page) {
            this.params.pageBean.page = page
            this.loadData()
        },
        //分页大小
        handleSizeChange(pageSize) {
            this.params.pageBean.pageSize = pageSize
            this.loadData()
        },
        currentChange(value, data) {
            if (value) {
                this.params.querys[0].value = value.id
            } else {
                this.params.querys[0].value = ''
            }
            this.loadData()
        },
        tabChange(tab, event) {
            console.log(tab)
        },
        filterChange(value) {},
        //获取组织树
        getUserOrgTree() {
            let curUserDetail = this.$store.state.user.currentUserDetail
            let orgId = curUserDetail.org[0].orgId
            api.getUserOrgTree(orgId, (res) => {
                if (res) {
                    this.treeData = res
                }
            })
        },
        // 指定一个key标识这一行的数据
        getRowKey(row) {
            return row.id
        },
        //判断勾选
        selectable(row, index) {
            if (row.assetAudit !== '2') {
                return true
            } else {
                return false
            }
        },
    },
    beforeDestroy() {
        // 在组件销毁之前 清除订阅消息
        pubSub.unsubscribe(this.pubSub)
    },
}
</script>

<style scoped lang="scss">
.equity-registration-warehousing {
    width: 100%;
    display: flex;

    .left-tree {
      border-radius: 8px;
      box-shadow: 4px 4px 10px 0 rgba(53, 152, 220, 0.1);
      overflow: hidden;
      margin: 16px 0 16px 16px;
    }

    .right-table {
        flex: 1;
    }
}

.search-box {
    //height: 350px;
    padding: 20px;
    transition: all 1s;
    background-color: #ffffff;
    border-radius: 8px;
}

.table-content {
    width: 100%;
    height: calc(100% - 110px);

    .table-list {
        width: 100%;
        height: 100%;
    }
}

::v-deep .el-table .el-table__header th {
    padding: 12px 0 !important;
    background-color: #f1f5f8 !important;
}

::v-deep .el-table .el-table__header th .cell {
    font-size: 16px;
    color: #545454;
    font-weight: 700;
    font-family: PingFang SC-Medium, PingFang SC;
    white-space: nowrap;
}

.common-tree-container {
    height: calc(100% - 70px);
    margin-top: 0.52083vw;
    padding: 1.04167vw 1.04167vw;
    background-color: #fff;
    position: relative;
    box-sizing: border-box;
    overflow-y: auto;
    border-radius: 20px;
  box-shadow: 0 0 0.625vw 0 rgba(92, 102, 83, 0.2);
}

.container-head {
    display: flex;
    align-items: center;

    i {
        font-size: 16px;
        margin-left: 5px;
        font-weight: 600;
        cursor: pointer;
    }
}

.move-tree ::v-deep .el-tree {
    height: 90%;
    overflow-y: auto;
    border: none;
}

.cloumn-btn {
    border: 1px solid #2761ff;
    padding: 3px 10px;
    border-radius: 5px;

    &:nth-child(1) {
        margin-right: 5px;
    }

    &:nth-child(2) {
        margin-right: 5px;
    }

    &:nth-child(1):hover {
        background-color: #2761ff;
        color: #fff;
    }

    &:nth-child(2):hover {
        background-color: #2761ff;
        color: #fff;
    }

    // &:nth-child(2):hover {
    //   background-color: #f56c6c;
    //   color: #fff;
    //   border-color: #f56c6c;
    // }
    ::v-deep i,
    span {
        font-size: 16px;
    }
}

::v-deep .el-tree-node__content {
    padding: 2px 0;
}

::v-deep .full-page {
    padding-left: 16px !important;
}
</style>

