<template>
    <div class="initiateListBox">
        <div class="initiateListTable">
            <el-table :data="initiateList" height="750" :row-class-name="tableRowClassName" >
                <el-table-column prop="projectName" align="center" width="220" label="项目名称">
                </el-table-column>
                 <el-table-column prop="type" align="center" width="80" label="类型">
                </el-table-column>
                <el-table-column prop="initiateUserTime" align="center" width="160" label="发起时间">
                </el-table-column>
                <el-table-column prop="targetUserName" align="center" width="80" label="指派人">
                </el-table-column>
                <el-table-column prop="state" align="center" width="80" label="状态">
                </el-table-column>
                <el-table-column prop="des" align="center" width="360" label="问题描述">
                </el-table-column>
                <el-table-column align="center" width="80" label="操作">
                    <template slot-scope="scope">
                            <i @click="checkInitiateItem(scope.row)" style="color:aliceblue;font-size:18px" class="el-icon-view"></i>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <div class="initiateInfoDialog">
            <el-dialog width="60%" top="5vh" :visible.sync="initiateInfoDialogVisible">
                <initiateInfo></initiateInfo>
            </el-dialog>
       </div>
    </div>
</template>

<script>
import initiateInfo from "./initiateInfo.vue"
export default {
    data() {
        return {
            initiateList:[
                {projectName:"张江双创二期", state:"解决", initiateUserTime:'2022-06-31 00:00', targetUserName:'李某某',type:'投诉', des:"核心数据缺失"},
                {projectName:"徐汇二期", state:"未解决", initiateUserTime:'2022-06-31 00:00', targetUserName:'王大小',type:'修改', des:"****页面数据修改"},
                {projectName:"艺校三期", state:"未解决", initiateUserTime:'2022-06-31 00:00', targetUserName:'刘谋',type:'修改', des:"******页面重新设计"},
                {projectName:"长三角", state:"未处理", initiateUserTime:'2022-06-32 00:00', targetUserName:'李某某',type:'修改', des:"对接数据"},
                {projectName:"徐汇五期", state:"未处理", initiateUserTime:'2022-06-32 00:00', targetUserName:'王二小',type:'修改', des:"修改页面"},
                {projectName:"艺校六期", state:"未处理", initiateUserTime:'2022-06-32 00:00', targetUserName:'王金橘',type:'修改', des:"修改页面"},
                {projectName:"艺校六期", state:"未通过", initiateUserTime:'2022-06-32 00:00', targetUserName:'王金橘',type:'修改', des:"修改页面"}
            ],
           initiateInfoDialogVisible:false
        }
    },
    components: { initiateInfo },
    methods:{
        tableRowClassName:function({row, rowIndex}) {
            if (row.state == "解决") return 'success-row';
            else if (row.state == "未解决") return 'warning-row';
            else if (row.state == "未通过") return 'error-row'
            return '';
        },
        checkInitiateItem:function(row) {
            this.initiateInfoDialogVisible = true
        }
    }    
}
</script>

<style>
.initiateListBox{
    width: 100%;
}

.initiateListBox .initiateListTable {
    width: 66%;
    box-shadow: 0 2px 12px 0 rgba(252, 252, 252, 0.144);
    background-color: rgb(255 255 255 / 15%);
    border-radius: 6px;
}
/*最外层透明*/
.initiateListBox .initiateListTable .el-table, .el-table__expanded-cell{
   background-color: transparent;
}
/* 表格内背景颜色 */
.initiateListBox .initiateListTable .el-table th, .el-table tr, .el-table td {
   background-color: transparent;
   color: aliceblue;
}
.initiateListBox .initiateListTable .success-row {
    background: rgba(60, 255, 213, 0.61) !important;
}
.initiateListBox .initiateListTable .warning-row {
    background: rgba(245, 134, 70, 0.904) !important;
}
.initiateListBox .initiateListTable .error-row {
    background: rgba(247, 52, 52, 0.37) !important;
}
.initiateListBox .initiateListTable .el-table--enable-row-hover .el-table__body tr:hover>td {
    background-color: rgba(247, 247, 247, 0.205);
}
.initiateInfoDialog .el-dialog, .el-pager li {
    /* background-color: rgba(206, 206, 206, 0.486); */
    border-radius: 40px;
    box-shadow: 0 2px 50px 0 rgba(255, 255, 255, 0.699);
    background: url('../../assets/login/logbackground.png') no-repeat;
}
.initiateInfoDialog .el-dialog__header {
    padding:0 0 0 0;
}
</style>