<template>
    <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body custom-class="project-standard-dlg" :close-on-click-modal="false" :close-on-press-escape="false">
        <el-form ref="form" :model="form" :rules="rules" label-width="80px">
            <el-form-item label="项目名称:">
                {{ prj.projectName }}
            </el-form-item>
            <el-form-item label="总包单位:">
                {{ dept.deptName }}
            </el-form-item>
            <el-form-item label="类型:" prop="standardType"  style="margin-bottom: 16px;">
                <treeselect v-model="form.standardType" :options="treeOpts" ref="treeSel" :show-count="true"  placeholder="请选择类型" @select="doTypeSelect" />
            </el-form-item>
           
            <div v-if="form.standardType" class="div-tip">
                <div v-if="(''+form.standardType).substring(0,1) == '1'">
                    现场管理标准化是指在施工现场中，通过科学的管理方法和规范化的操作流程，严格控制现场人员的行为，保证施工现场的安全和有序进行。具体来说，现场管理标准化包括制定现场管理制度、落实安全生产责任制、开展安全教育培训、建立安全监控系统等。
                </div>
                <div v-if="(''+form.standardType).substring(0,1) == '2'">
                    作业标准化是指在施工现场中，通过规范作业流程和操作规程，保证施工过程中的安全和质量。具体来说，作业标准化包括制定作业指导书、明确作业流程、规范操作规程、建立作业记录等。</div>
                <div v-if="(''+form.standardType).substring(0,1) == '3'">
                    安全技术标准化是指在施工现场中，通过科学的安全技术手段和规范化的操作方法，保证施工现场的安全。具体来说，安全技术标准化包括制定安全技术规范、落实安全技术措施、开展安全技术培训、建立安全技术档案等。</div>
                <div v-if="(''+form.standardType).substring(0,1) == '4'">
                    设备管理标准化是指在施工现场中，通过规范设备的使用和维护，保证设备的正常运行和安全使用。具体来说，设备管理标准化包括制定设备使用规范、落实设备维护责任制、开展设备维护培训、建立设备维护记录等。</div>
                <div v-if="(''+form.standardType).substring(0,1) == '5'">
                    文明施工标准化是指在施工现场中，通过规范施工行为和文明施工，保证施工现场的整洁、有序和安全。具体来说，文明施工标准化包括制定文明施工规范、落实文明施工责任制、开展文明施工培训、建立文明施工记录等。</div>
                <div v-if="(''+form.standardType).substring(0,1) == '6'">
                    环境保护标准化是指在施工现场中，通过科学的环保措施和规范化的操作方法，保护环境和自然资源。具体来说，环境保护标准化包括制定环境保护规范、落实环境保护责任制、开展环境保护培训、建立环境保护记录等。</div>
            </div>
            <el-form-item label="图片描述" prop="desc" style="margin-bottom: 16px;">
                <el-input v-model="form.desc" placeholder="请输入图片描述" type="textarea" :row="4"  @input="clearForm" />
            </el-form-item>

            <el-form-item label="图片路径" prop="imageFile">
                <file-upload ref="fu1" v-model="form.imageFile" @input="clearForm" :fileSize="5"  :fileType="['png', 'jpg', 'jpeg']"/>
            </el-form-item>          
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button type="primary" @click="submitForm">确 定</el-button>
            <el-button @click="cancel">取 消</el-button>
        </div>
    </el-dialog>
</template>

<script>
import {addProjectStandard,updateProjectStandard} from '@/api/project/projectStandard.js'
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
import standardTypes from './standardType'
export default {
    name: 'RuoyiUiProjectStandardDlg',
    components: { Treeselect },
    data() {
        return {
            open: false,
            title: "添加标准化管理",
            prj: {},
            dept: {},
            form: {
                standardType: 1,
                desc:'',
                imageFile:[]
            },
            rules: {
                standardType: [{ required: true, trigger: "blur", message: "请选择" }],
                desc: [{ required: true, trigger: "blur", message: "请输入图片描述" }],
                imageFile: [{ required: true, trigger: "blur", message: "请上传图片" }],
            },
            options: [
                { label: '现场管理标准化', value: 1 },
                { label: '作业标准化', value: 2 },
                { label: '安全技术标准化', value: 3 },
                { label: '设备管理标准化', value: 4 },
                { label: '文明施工标准化', value: 5 },
                { label: '环境保护标准化', value: 6 },
            ],
            treeOpts:standardTypes,
            oldData:null
        };
    },


    methods: {
        doTypeSelect(a,b,c){
          if(a.children && a.children.length>0){
            setTimeout(()=>{
                this.form.standardType=null;
            },400);
          }
        },
        clearForm(){
            this.$refs.form.clearValidate();
        },
        submitForm() {
            this.$refs.form.validate(v => {
                if(v){
                    if(this.oldData){
                        this.doUpdate();
                    }else{
                        this.doSave();
                    }
                }
            });            
        },
        doUpdate(){

            this.oldData.imageFile=this.form.imageFile.map(d=>d.url).filter(d=>d).join(",")
            this.oldData.standardDesc=this.form.desc;
            this.oldData.standardType=this.form.standardType;
            updateProjectStandard(this.oldData).then(d => {
                if (d.code == 200) {
                   
                        this.$message({
                            message: '修改成功',
                            type: 'success'
                        });
                        this.$emit("success");
                    this.open=false;
                }
            });
        },
        doSave(){            
            let postData={
                projectId:this.prj.id,
                deptId:this.dept.deptId,
                imageFile:this.form.imageFile.map(d=>d.url).filter(d=>d).join(","),
                standardDesc:this.form.desc,
                standardType:this.form.standardType
            }
            addProjectStandard(postData).then(d=>{
                if (d.code == 200) {
                    this.$message({
                        message: '增加成功',
                        type: 'success'
                    });
                    this.$emit("success");
                    this.open=false;
                }
            });
        },
        cancel() {
            this.open = false;
        },
        showDialog(prj, dept,oldData) {            
            this.prj = prj || {};
            this.dept = dept || {};            
            this.form.standardType=1;
            this.form.desc='';
            this.imageFile=[];
            this.open = true;
            if(oldData){
                this.oldData=JSON.parse(JSON.stringify(oldData));
                this.form.desc=this.oldData.standardDesc;
                this.form.standardType=+this.oldData.standardType;
                let imgs=(this.oldData.imageFile||"").split(",").filter(d=>d).map(d=>{
                    return {
                        url:d,
                        name:d
                    }
                })
                this.form.imageFile=imgs;
            }
            setTimeout(()=>{
                if(this.oldData){
                    setTimeout(()=>{
                    let node=this.$refs.treeSel.getNode( this.form.standardType);
                    this.$refs.treeSel.select(node);
                    this.doTypeSelect(node.raw);
                    const func=p=>{
                        p.isExpanded=true;
                        if(p.parentNode){
                        func(p.parentNode);
                        }
                    };
                    func(node);
                    },400);
                }else{
                    this.$refs.fu1.fileList=[];
                }
            },400);
        }
    },
};
</script>

<style lang="scss">
.project-standard-dlg {
    .el-dialog__body {
        padding: 12px;

        .el-form-item {
            margin-bottom: 8px;
        }

        .div-tip {
            color: #13ce66;
            padding: 0px 20px 0px 40px;
            line-height: 24px;
        }
    }
}</style>