<template>
    <!-- 流程进度组件 -->
    <DoorView class="steps-Component" :title="scTitle">
        <template slot="main">
            <el-steps :active="active" align-center style="margin-bottom:20px">
                <el-step :class="active>index?'el-step':'el-stepT'" :style="active>=index?`color:${theme}`:''" v-for="(item,index) in scData" :key="'sc'+index" :title="item.title" :description="!!item.description?item.description:''" :data-time="!!item.dataTime?item.dataTime:''"></el-step>
            </el-steps>
            <div v-if="tbHeader.length" class="table-box">
                <el-table v-if="tableShow" :data="tableData" style="width: auto;margin:16px 0">
                    <el-table-column v-for="(item,index) in tbHeader" :key="'tb'+index" :prop="item.prop" :label="item.label" :width="!!item.width?item.width:''"></el-table-column>
                </el-table>
                <i :class="tableShow?'el-icon-arrow-up' :'el-icon-arrow-down'" @click="()=>{tableShow=!tableShow}"></i>
            </div>
        </template>
    </DoorView>
</template>

<script>
import DoorView from "@/components/YuComponents/DoorView.vue";

export default {
    name: "Schedule",
    data() {
        return {
            tableShow: false,
            theme: this.$store.state.settings.theme
        };
    },
    components: {
        DoorView
    },
    watch: {
        "$store.state.settings.theme"(nv) {
            this.theme = nv;
        }
    },
    props: {
        //流程进度具体步数
        active: {
            type: Number,
            default: 1
        },
        //组件标题
        scTitle: {
            type: String,
            default: "流程进度"
        },
        //步骤条数据:步骤名称,审批人,审批时间(不传不展示)
        scData: {
            type: Array,
            default: () => [{
                    title: "起草",
                    description: "张三",
                    dataTime: "2010-09-10"
                },
                {
                    title: "过程",
                    description: "李4",
                    dataTime: "2010-09-10"
                },
                {
                    title: "完成"
                }
            ]
        },
        //表格数据
        tableData: {
            type: Array,
            default: () => [{
                    date: "2016-05-02",
                    name: "王小虎",
                    address: "上海市普陀区金沙江路 1518 弄"
                },
                {
                    date: "2016-05-04",
                    name: "王小虎",
                    address: "上海市普陀区金沙江路 1517 弄"
                },
                {
                    date: "2016-05-01",
                    name: "王小虎",
                    address: "上海市普陀区金沙江路 1519 弄"
                },
                {
                    date: "2016-05-03",
                    name: "王小虎",
                    address: "上海市普陀区金沙江路 1516 弄"
                }
            ]
        },
        //表格每一列配置,数据键名,表头列名,列宽度(不传为默认宽度)
        tbHeader: {
            type: Array,
            default: () => []
        }
    },
    methods: {}
};
</script>

<style lang="scss">
.steps-Component {
    .el-step {
        position: relative;
    }
    .el-step::before {
        content: attr(data-time);
        position: absolute;
        bottom: -20px;
        right: 0;
        left: 0;
        text-align: center;
        font-size: 12px;
        color: theme;
    }

    .el-stepT {
        position: relative;
    }

    .el-stepT::before {
        content: attr(data-time);
        position: absolute;
        bottom: -20px;
        right: 0;
        left: 0;
        text-align: center;
        font-size: 12px;
        color: #000;
    }

    .table-box {
        display: flex;
        flex-direction: column;

        i {
            margin-top: 10px;
            text-align: center;
            cursor: pointer;
        }
    }
}
</style>
