<!--
 * @Author       : yuanrunwei
 * @Date         : 2021-11-01 18:02:58
 * @LastEditors  : yuanrunwei
 * @LastEditTime : 2021-12-03 21:22:43
 * @FilePath     : \spfm-market-front\src\pages\main\performance\components\table.vue
-->
<template>
    <el-table class="simple-table" :data="computed_list" v-loading="loading">
        <el-table-column
            v-for="(
                { props, label, type, width, align, children }, index
            ) in config"
            :key="index"
            :prop="props"
            :width="width"
            :label="label"
            :align="align || 'center'"
        >
            <template #default="scope">
                <div v-if="type === 'edit'">
                    <el-input
                        v-if="scope.row[`${props}_${type}`]"
                        v-model="scope.row[props]"
                        autosize
                        type="textarea"
                    />
                    <pre v-else>{{ scope.row[props] }}</pre>
                    <el-button
                        size="mini"
                        class="margin-top-10"
                        @click="handleEdit({ scope, type, props })"
                    >
                        {{ !scope.row[`${props}_${type}`] ? "编辑" : "完成" }}
                    </el-button>
                </div>
                <div v-else>{{ scope.row[props] }}</div>
            </template>
            <template v-if="children">
                <el-table-column
                    v-for="({ props, label, width, align }, index) in children"
                    :key="index"
                    :prop="props"
                    :width="width"
                    :label="label"
                    :align="align || 'center'"
                >
                    <template #default="scope">
                        <div>{{ scope.row[props] }}</div>
                    </template>
                </el-table-column>
            </template>
        </el-table-column>
        <el-table-column
            v-if="handleRow.length"
            label="操作"
            :width="handleRow.length * 50"
        >
            <template slot-scope="scope">
                <span
                    v-for="({ label, props, popconfirm }, index) in handleRow"
                    :key="index"
                    class="padding-right-5"
                >
                    <el-popconfirm
                        v-if="popconfirm"
                        :title="`确定要${label}吗？`"
                    >
                        <el-button
                            slot="reference"
                            @click="handleClick(props, scope.row)"
                            type="text"
                            size="small"
                            >{{ label }}</el-button
                        >
                    </el-popconfirm>
                    <el-button
                        v-else
                        @click="handleClick(props, scope.row)"
                        type="text"
                        size="small"
                        >{{ label }}</el-button
                    >
                </span>
            </template>
        </el-table-column>
    </el-table>
</template>
<script>
export default {
    props: {
        list: {
            type: Array,
            default: () => [],
        },
        config: {
            type: Array,
            default: () => [],
        },
        loading: {
            type: Boolean,
            default: false,
        },
        handleRow: {
            type: Array,
            default: () => [],
        },
    },
    computed: {
        computed_list() {
            const object = {};
            this.config
                .filter(({ type }) => type === "edit")
                .forEach(({ props, type }) => {
                    object[`${props}_${type}`] = false;
                });
            return this.list.map((element) => ({
                ...element,
                ...object,
            }));
        },
    },
    methods: {
        handleClick(props, row) {
            this.$emit(props, row);
        },
        handleEdit({ scope, type, props }) {
            scope.row[`${props}_${type}`] = !scope.row[`${props}_${type}`];
            this.$emit(props, scope.row);
        },
    },
};
</script>
