<template>
    <div class="evaluationStart">
        <div class="evaluationStartBtn">
            <p class="titleSty">考评启动</p>
            <div class="collectSeach">
                <div class="exceed">
                    <span class="exceedSpan">编号：</span>
                    <el-input v-model="usernames" placeholder="请输入业务编号"></el-input>
                </div>
                <div class="exceed">
                    <span class="exceedSpan">单位：</span>
                    <el-input v-model="usernames" placeholder="请输入单位"></el-input>
                </div>
                <div class="exceed">
                    <span class="exceedSpan">类别：</span>
                    <el-input v-model="usernames" placeholder="请输入业务类别"></el-input>
                </div>
                <div class="exceed">
                    <span class="exceedSpan">年度：</span>
                    <el-input v-model="usernames" placeholder="请输入年度"></el-input>
                </div>
                <div class="exceed">
                    <span class="exceedSpan">简述：</span>
                    <el-input v-model="usernames" placeholder="请输入业务简述"></el-input>
                </div>
                <el-button type="primary" style="margin-left: 10px;" @click="getSeachData">搜索</el-button>
                <el-button style="margin-left: 10px;" @click="reset">重置</el-button>
            </div>
            <div style="display:flex;justify-content: space-between;padding: 10px;">
                <el-row :gutter="10" class="PeriodBtn">
                    <el-col :span="1.5">
                        <el-col :span="1.5">
                            <el-button
                            type="primary"
                            plain
                            icon="Plus"
                            size="mini"
                            @click="handleAdd"
                            >新增</el-button>
                        </el-col>
                        <el-button
                        type="danger"
                        plain
                        icon="Delete"
                        size="mini"
                        :disabled="deleteSelect.length === 0"
                        @click="handleDelete"
                        >批量删除</el-button>
                    </el-col>
                    <el-col :span="1.5">
                        <el-button
                            type="warning"
                            plain
                            icon="Download"
                            size="mini"
                            @click="handleExport"
                        >导出</el-button>
                    </el-col>
                </el-row>
            </div>
            <div class="evaluationStartTableData">
                <el-table :data="evaluationStartData" border style="width: 100%" @select="rowClick" @select-all="allSelect">
                    <el-table-column type="selection" label="操作" align="center"></el-table-column>
                    <el-table-column label="业务编号">
                        <template #default="scope">
                            <span>{{scope.row.create_time}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="考评单位">
                        <template #default="scope">
                            <span>{{scope.row.create_by}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="业务类别">
                        <template #default="scope">
                            <span>{{scope.row.indicator_id}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="年度">
                        <template #default="scope">
                            <span>{{scope.row.total_score}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="流程状态">
                        <template #default="scope">
                            <span>{{scope.row.desc}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="业务简述">
                        <template #default="scope">
                            <span>{{scope.row.update_time}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="任务进度">
                        <template #default="scope">
                            <span>{{scope.row.update_by}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="综合得分">
                        <template #default="scope">
                            <span>{{scope.row.evaluate_formula}}</span>
                        </template> 
                    </el-table-column>
                    <el-table-column label="考评排名">
                        <template #default="scope">
                            <span>{{scope.row.evaluate_method}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="考评评级">
                        <template #default="scope">
                            <span>{{scope.row.mapping_function}}</span>
                        </template>
                    </el-table-column>
                </el-table>
                <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="page.currentPage"
                    :page-size="page.pagesize"
                    layout="total, prev, pager, next, jumper"
                    :total="page.total">
                </el-pagination>
            </div>
            <el-dialog :title="title" v-model="dialogVisible" width="1400px" :close-on-click-modal="false">
                <start-from-list></start-from-list>
                <template #footer>
                    <span class="dialog-footer">
                        <el-button type="primary" plain>发 布</el-button>
                        <el-button type="warning" plain>保 存</el-button>
                        <el-button >流 程</el-button>
                        <el-button type="success" plain>导 出</el-button>
                    </span>
                </template>
            </el-dialog>
        </div>
    </div>
</template>

<script>
import startFromList from './evaluationStartFrom.vue'
import {apiGetgetStandardPointManagementList, apiGetdeleteStandardPointManagement} from '../../api/api'
export default {
    components: {
        startFromList
    },
    data() {
        return {
            dialogVisible: false,
            title: '',

            windframradio: {},
            deleteSelect: [],
            changeDateSelect: [],
            evaluationStartData:[],
            page:{
                pagesize: 12,
                currentPage: 1,
                total: 0
            }
        }
    },
    mounted() {

    },
    methods:{
        getSeachData() {
            this.page.currentPage = 1
        },
        handleSizeChange(val){
            this.page.pagesize = val
        },
        handleCurrentChange(val){
            this.page.currentPage =val
        },
        rowClick(selection, row) {
            this.windframradio = {}
            this.deleteSelect = []
            this.changeDateSelect = []
            if (selection.length === 1) { 
                this.windframradio = selection[0]
            }
            if (selection.length > 0) {
                selection.forEach(item =>{
                    this.deleteSelect.push(item.itemNo)
                    this.changeDateSelect.push(item.itemNo)
                })
            }
        },
        allSelect(selection) {
            this.deleteSelect = []
            this.changeDateSelect = []
            if (selection.length > 0) {
                selection.forEach(item =>{
                    this.deleteSelect.push(item.itemNo)
                    this.changeDateSelect.push(item.itemNo)
                })
            }
        },
        handleAdd() {
            this.dialogVisible = true
            this.title = '新建表单填报'
        },
    }
}
</script>

<style lang="less">
.evaluationStart{
  .evaluationStartBtn{
    //   background: #fff;
      padding: 10px 20px 0 20px;
      .collectSeach{
          display: flex;
          margin: 20px 20px 10px;
            .exceed{
                display: flex;
                margin-right: 10px;
                .exceedSpan{
                    margin-top: 3px;
                    display: inline-block;
                    width: 55px;
                }
                .el-input{
                    margin-right:10px;
                    height: 30px;
                    .el-input__inner{
                        height:30px;
                    }
                    .el-input__suffix{
                        .el-select__caret{
                            line-height:30px;
                        }
                    }
                }
            }
            .el-select{
                margin-right:10px;
                .el-input__inner{
                    height:30px;
                }
                .el-input__suffix{
                    .el-select__caret{
                        line-height:30px;
                    }
                }
            }
      }
      .titleSty{
          border-left: 4px solid #007aab;
          padding-left: 5px;
          font-size: 16px;
          font-weight: bold;
          font-family: '微软雅黑';
          margin-left:20px;
      }
      span{
          font-size:14px;
      }
      .PeriodBtn{
          padding-left: 10px;
      }
      .el-button{
          height: 30px;
          // width:100px;
          padding: 0 20px ;
          // padding-top: 8px;
          span{
              margin:0;
          }
      }
  }
  .evaluationStartTableData{
    padding: 10px 20px;
    .el-table{
        .el-table__body-wrapper{
            .el-table__empty-block{
            height: 64vh !important;
            }
        }
        .el-input__inner{
            height: 30px !important;
        }
        .el-radio__label{
            display: none;
        }
    }
    .el-pagination{
        margin-top: 20px;
        text-align: end;
        position: relative;
    }
    }
    .el-overlay{
        .el-dialog{
            margin-top: 10vh;
            .el-dialog__body{
                padding: 0px 60px 20px 20px !important;
            }
            .el-dialog__footer{
                .dialog-footer{
                    text-align: center;
                }
            }
        }
    }
}
</style>