<template>
    <!--选择履约模板-->
    <Drawer :title="'选择履约模板'" :placement="'right'" :visible="visible" @cancel="cancel" :class="[position === 'top' ? 'top486' : 'delistingBottom']">
        <span class="add-permance" @click="open">
            <svg class="icon svg-icon" aria-hidden="true">
                <use xlink:href="#icon-xinjianzengjiaxinzeng-20" />
            </svg>
        </span>
        <a-spin :spinning="loading">
            <div class="moduleContent">
                <div class="itemBar" v-for="item in tableList" :key="item.autoid" @click="chooseTemp(item)">
                    <div class="itemName">{{ item.templatename }}</div>
                    <div class="rulesCont">
                        <a-row>
                            <a-col :span="24" class="ruleCol">
                                <div class="line" v-for="sub in item.LstStep" :key="sub.autoid">
                                    <div class="name">{{ sub.steptypename }}</div>
                                    <div class="time">{{ sub.stepdate }}</div>
                                </div>
                            </a-col>
                        </a-row>
                    </div>
                </div>
            </div>
        </a-spin>
    </Drawer>
    <Add v-if="show" :position="position" @cancel="closeAddTemp" />
</template>

<script lang="ts">
import { defineComponent, PropType, ref } from 'vue';
import { Des } from '@/common/components/commonDes';
import { _closeModal } from '@/common/setup/modal/modal';
import Drawer from '@/common/components/drawer/index.vue';
import { QueryPermancePlanTmpReq, QueryPermancePlanTmpRsp } from '@/services/go/wrtrade/interface';
import { queryQueryPermancePlanTmp } from '@/services/go/wrtrade';
import { getUserId } from '@/services/bus/user';
import { queryTableList } from '@/common/setup/table';
import Add from '@/common/components/permanceTemp/addPermanceTemp.vue';

function hanldeOpenAndCloseComponent<T>() {
    const show = ref<boolean>(false);
    const selected = ref<T>(); // 选中的朋友 id 列表
    function close(value: any) {
        if (value) {
            selected.value = value;
        }
        show.value = false;
    }
    function open() {
        show.value = true;
    }
    return { show, selected, close, open };
}

export default defineComponent({
    emits: ['cancel', 'update'],
    name: 'queryQueryPermancePlanTmp',
    components: { Des, Drawer, Add },
    props: {
        position: {
            type: String,
            default: 'top',
        },
    },
    setup(props, context) {
        const { visible, cancel } = _closeModal(context);
        // 新增模板
        const { show, close, open } = hanldeOpenAndCloseComponent();

        const param: QueryPermancePlanTmpReq = {
            userid: getUserId(),
            tmptype: '0,2',
        };
        const { loading, tableList, queryTable } = queryTableList<QueryPermancePlanTmpRsp>();
        queryTable(queryQueryPermancePlanTmp, param);

        function closeAddTemp(isRefresh: boolean) {
            if (isRefresh) {
                queryTable(queryQueryPermancePlanTmp, param);
            }
            close(null);
        }
        // 选择履约模板
        function chooseTemp(item: QueryPermancePlanTmpRsp) {
            context.emit('update', item);
            cancel();
        }
        return {
            loading,
            cancel,
            visible,
            tableList,
            show,
            close,
            open,
            chooseTemp,
            closeAddTemp,
        };
    },
});
</script>


<style lang="less" scoped>
.add-permance {
    position: absolute;
    top: 10px;
    right: 20px;
    .icon {
        font-size: 20px;
        color: @m-blue25;
    }
}
.moduleContent {
    padding: 10px 20px 0;
    width: 470px;
    height: 100%;
    overflow-y: auto;
    .itemBar {
        width: 100%;
        padding: 0 14px 6px;
        margin-bottom: 10px;
        .flex;
        flex-direction: column;
        background: @m-blue34;
        .rounded-corners(5px);
        .itemName {
            width: 100%;
            height: 40px;
            line-height: 40px;
            border-bottom: 1px solid @m-blue20;
            color: @m-white11;
            font-size: 16px;
        }
    }
}
/*滚动条样式*/
::-webkit-scrollbar {
    //width: 10px;
    height: 4px;
}
/* 滚动的滑块 */
::-webkit-scrollbar-thumb {
    border-radius: 2px;
    background-color: @m-blue35;
}
/* 滚动条两端的按钮 */
::-webkit-scrollbar-button {
    background-color: transparent;
    display: none;
}
/* 内层滚动槽 */
::-webkit-scrollbar-track-piece {
    background-color: transparent;
}
/* 边角 */
::-webkit-scrollbar-corner,
.el-input::-webkit-scrollbar-corner {
    background-color: @m-blue35;
}
</style>