/**
@author:fugy
@date:2018.10.24
@info:项目sop编辑和配置页面
 */
 <template>
<div v-if="itemData">
    <div class="top">
        <el-button size="medium" @click="goBack()">返回</el-button>
        <el-button type="primary" size="medium" @click="save()">保存</el-button>
    </div>
    <hr class="line" />
    <div class="item-info">
        <p><span>问题名称 : </span><span>{{itemData.name}}</span></p>
        <p><span>问题编号 : </span><span>{{itemData.serialId}}</span></p>
        <p><span>问题类型 : </span><span>{{itemData.type}}</span></p>
        <p><span>优先级 : </span><span>{{itemData.priority}}</span></p>
        <!-- <p><span>适用建筑功能类型 : </span><span>{{"12312313"}}</span></p> -->
        <p><span>问题详述 : </span><span>{{itemData.remark || "---"}}</span></p>
        <div class="link-div">
            <span class="left">关联的项目SOP : </span>
            <div class="right"> 
                <el-button size="medium" @click="selectSopHandle">点击选择</el-button>
                <ul v-if="sopArr.length">
                    <li v-for="(item, index) in sopArr" :key="index">
                        <span class="sop-name">{{item.sopName}}</span>
                        <i class="el-icon-error sop-icon-del" @click="delSopHandle(index)"></i>
                    </li>
                </ul>
            </div>            
        </div>        
    </div>        
    <!-- components -->
    <v-select-sop 
    :selectSopVisibleFlag="selectSopVisibleFlag"
    :checkedSopArr="sopArr" 
    :projectId="projectId"
    @sop-checked="sopCheckedHandle">
    </v-select-sop>
</div>
 </template>

 <script>
//  component
import vSelectSop from  './selectsop'; //选择sop页面
// api
import api from "@/api/fm/sop"; 
export default {
    name: "sop-edit-page",
    data() {
        return {
            selectSopVisibleFlag: false, //选择sop的弹窗flag
            projectId:null, //项目id
            itemData: null, //itemData,
            sopArr:[], //sopArr
        }
    },
    components: {
        vSelectSop,
    },
    props:["editData","initFlag"],
    methods: {
        // 点击选择sop
        selectSopHandle() {
            this.selectSopVisibleFlag = !this.selectSopVisibleFlag;
        },
        // 返回
        goBack() {
            let refresh = false
            this.$emit("to-list", refresh);
        },
        // 删除sop
        delSopHandle(index) {
            this.sopArr.splice(index, 1);
        },
        // 保存
        async save() {
            let sopArr = this.sopArr.map((ele, index) => {
                return {sopId: ele.sopId}
            });
            let params = {
                id: this.itemData.id,
                projectId: this.projectId,
                sopList: sopArr
            }
            let {result} = await api.setSop(params);
            if(result === "success") {
                this.$message({
                    message: '保存成功',
                    type: 'success'
                });
                // 跳转隐藏切换
                let refresh = true;
                this.$emit("to-list", refresh);
            }
            
        },
        /********************组件回传事件****************************** */
        sopCheckedHandle(arr) {
            this.sopArr = arr;
        }
    },
    watch:{
        editData(val) {
            this.itemData = val
            this.projectId = val.projectId;
            this.sopArr = JSON.parse(JSON.stringify(val.sopList));
        },
        initFlag(val) {
            this.projectId = this.editData.projectId;
            this.sopArr = JSON.parse(JSON.stringify(this.editData.sopList));
        }
    }
}
 </script>

 <style lang="less" scoped>
 .top{
     display: flex;
     justify-content: space-between
 }
 .line {
    background-color: #ccc;
    height: 1px;
    border: none;
    margin: 10px 0
}
.item-info{
    padding-left:20%;
    font-size: 14px;
    color: #5e6d82;
    p{
        padding: 10px 0;
        overflow: hidden;
        span {
            float: left;
        }
        span:nth-of-type(1){
            margin-right: 20px;
        }
    }
    .link-div {
        overflow: hidden;
        .left, .right{
            float: left;
        }
        .left {
            padding-top: 8px;
        }
        .right {
            margin-left: 20px;
        }
        li {
            overflow: hidden;
            width: 400px;
            margin: 5px 0;
            background-color: #cccccc;
            padding: 5px 15px;
            .sop-name {
                float: left;
            }
            .sop-icon-del {
                cursor: pointer;
                float: right;
                margin-top:3px;
            }
        }
    }
}

    

 </style>
 