/**
@author:fugy
@date:2018.10.24
@info:项目sop配置列表的查看详情
 */
<template>
<el-dialog
title="选择SOP"
:visible.sync="dialogVisible"
width="50%"
center>
    <div class="select-sop-box">
        <!-- top搜索框 -->
        <div class="top">
            <el-input
            style="width: 400px;"
            placeholder="请先输入SOP名称进行查询"
            v-model.trim="searchValue"
            clearable>
            </el-input>
            <el-button type="primary" @click="getSearch">查询</el-button>
        </div>
        <div class="table-box">
            <el-table
            :data="selectSopData"
            border
            style="width: 100%">
                <el-table-column
                prop="sopName"
                label="SOP名称"
                header-align="center">
                </el-table-column>              
                <el-table-column
                :show-header="false"
                label="选择"
                width="50"
                header-align="center">
                    <template slot-scope="scope">
                        <el-checkbox v-model="scope.row.checked"></el-checkbox>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <div class="btn-box">
            <el-button size="medium" @click="cancel">取消</el-button>
            <el-button type="primary" size="medium" class="save-btn" @click="save">保存</el-button>
        </div>
    </div>
</el-dialog>
</template>
<script>
import api from "@/api/fm/sop";

export default {
    name: "sop-look-item",
    data() {
        return {
            dialogVisible: false,
            searchValue: null, //查询search
            selectSopData: [], //sop数组
            
        }
    },
    props:["selectSopVisibleFlag", "checkedSopArr","projectId"], 
    methods: {
        // 获取sopList数据
        async getSopList() {
            this.selectSopData = [];
            let params = {
                sopName: this.searchValue || null,
                projectId: this.projectId
            };
            let {result, content} = await api.getSopList(params);
            if(result === "success" && content && content.length) {
                this.handleData(content);
            }
        },
        handleData(arr) {
            arr.forEach((ele, index) => {
                ele.checked = false;
            })
            if(this.checkedSopArr.length) {
                arr.forEach((item, index) => {
                    this.checkedSopArr.forEach((ele, ind) => {
                        if(item.sopId == ele.sopId) {
                            item.checked = true;
                        }
                    })
                })
            } 
            this.selectSopData = arr;
        },
        // 查询 
        getSearch() {
            this.getSopList();
        },
        // 取消
        cancel() {
            this.dialogVisible = false;
        },
        // 保存
        save() {
            let arr = this.selectSopData.filter((ele, index) => {
                return ele.checked == true
            })
            if(arr.length) {
                this.$emit("sop-checked", arr);
                this.dialogVisible = false;
            } else {
                this.$message({
                    message: '请选择SOP',
                    type: 'warning'
                });
            }
        }
    },
    watch: {
        selectSopVisibleFlag:function(){
            this.dialogVisible = true;
            this.searchValue = null; //置空搜索项
            this.selectSopData = [];
            this.getSopList();
        },
    }
}
</script>
<style lang='less' scoped>
.select-sop-box {
    .top{
        text-align: center;
    }
    .table-box {
        margin-top: 10px;
        max-height: 450px;
        overflow-y: auto;
    }
    .btn-box {
        margin-top: 10px;
        text-align: center;
        .save-btn{margin-left: 50px;}
    }
}
</style>