<template>
    <div class="project-standar-drawer" v-if="isOpen">
        <el-drawer v-if="isOpen" :visible.sync="isOpen" direction="rtl" size="60%" style="padding-left: 20px">
            <template slot="title">
                <div>{{ title + " 【标准化管理】" }}</div>
                <right-toolbar @queryTable="loadData" :search="false">
                    <template slot="left">
                    </template>
                </right-toolbar>
            </template>
            <el-tabs v-model="activeName" :key="elKey">
                <el-tab-pane :label="'' + it.deptName" :name="'' + it.deptId" :key="idx" v-for="(it, idx) in depts">
                    <div>
                        <el-button type="primary" @click="doAdd">增加</el-button>
                        <el-button style="margin-right:12px;">删除</el-button>
                        <el-select v-model="standType" clearable placeholder="请选择">
                            <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
                            </el-option>
                        </el-select>
                        <el-button type="success" style="margin-left:12px;" @click="doQuery">搜索</el-button>
                    </div>
                    <div class="div-data">
                        <el-table v-loading="loading" :data="projectStandardList" @selection-change="handleSelectionChange" stripe>
                            <el-table-column type="selection" width="55" align="center" />                            
                            <el-table-column label="图片路径" align="center" prop="imageFile">
                                <template slot-scope="{row}">
                                    <el-image :src="row.imageFile+'.min.jpg'" style="height:50px" :preview-src-list="[row.imageFile]" />
                                </template>
                            </el-table-column>
                            <el-table-column label="图片描述" align="center" prop="desc">
                                <template slot-scope="{row,$index}">
                                    <div class="row-desc" @click="changeEditMode(row,$index)" v-if="!row.editDesc">{{row.standardDesc}}</div>
                                    <el-input v-model="row.standardDesc" v-if="row.editDesc"  @blur="doSaveDesc(row)" type="textarea" :row="4" ></el-input>
                                </template>
                            </el-table-column>
                            <el-table-column label="排序" align="center" prop="ord" >
                                <template slot-scope="{row}">
                                    <el-input-number v-model="row.ord"  controls-position="right" @change="doSave(row,false)" :min="1" :max="10000" ></el-input-number>
                                </template>                         
                            </el-table-column>
                            <el-table-column label="类型" align="center" prop="standardType">
                                <template slot-scope="{row}">{{ getType(row) }}</template>
                            </el-table-column>                           
                            <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
                                <template slot-scope="scope">                                    
                                    <el-button size="mini" type="text" icon="el-icon-delete"
                                        @click="handleDelete(scope.row)"
                                        v-hasPermi="['project:projectStandard:remove']">删除</el-button>
                                </template>
                            </el-table-column>
                        </el-table>

                        <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum"
                            :limit.sync="queryParams.pageSize" @pagination="loadData" />

                    </div>
                </el-tab-pane>
            </el-tabs>
        </el-drawer>
        <standardDlg ref="dlg" @success="loadData"></standardDlg>
    </div>
</template>

<script>
import { listProjectStandard,updateProjectStandard } from '@/api/project/projectStandard.js'
import standardDlg from './projectStandardDlg.vue'
export default {
    components: {
        standardDlg
    },
    data() {
        return {
            elKey: 0,
            isOpen: false,
            prj: null,
            // 选中数组
            ids: [],
            // 非单个禁用
            single: true,
            // 非多个禁用
            multiple: true,
            total: 0,
            activeName: "",
            depts: [],
            standType: '',
            projectStandardList: [],
            queryParams: {
                pageNum: 1,
                pageSize: 10,
                projectId: null,
                deptId: null,
                imageFile: null,
                standardDesc: null,
                ord: null,
                standardType: null,
                isDel: null,
            },
            options: [
                { label: '现场管理标准化', value: 1 },
                { label: '作业标准化', value: 2 },
                { label: '安全技术标准化', value: 3 },
                { label: '设备管理标准化', value: 4 },
                { label: '文明施工标准化', value: 5 },
                { label: '环境保护标准化', value: 6 },
            ]
        };
    },

    mounted() {

    },

    methods: {
        doSaveDesc(row){
            if(row.oldStandardDesc!=row.standardDesc){
                this.doSave(row,true);
                row.oldStandardDesc=row.standardDesc;
                row.editDesc=false;
            }
        },
        doSave(row,showMsg){
            updateProjectStandard(row).then(d=>{
                if(d.code==200){
                    if(showMsg){
                        this.$message({
                            message: '修改成功',
                            type: 'success'
                        });
                    }
                }
            });
        },
        changeEditMode(row,idx){
            row.oldStandardDesc=row.standardDesc;
            row.editDesc=true;
            setTimeout(()=>{
                let els=document.querySelectorAll(".el-table__body-wrapper tr");
                if(els.length>idx+1){
                    let el=els[idx].querySelector(".el-textarea__inner");
                    if(el){
                        el.focus();
                    }
                }
            },400);
        },
        doQuery(){
            this.queryParams.pageNum=1;
            this.loadData();
        },
        getType(row){
            let t=row.standardType||1;
            let tmps=this.options.filter(d=>d.value==t);
            return tmps.length>0?tmps[0].label:'';
        },
        handleSelectionChange(selection) {
            this.ids = selection.map(item => item.id)
            this.single = selection.length !== 1
            this.multiple = !selection.length
        },
        doAdd() {
            let tmps = this.depts.filter(d => d.deptId == this.activeName);
            this.$refs.dlg.showDialog(this.prj, tmps.length > 0 ? tmps[0] : {});
        },
        loadDepts(cb) {
            let tmps = this.$root.prjDept2 && this.$root.prjDept2[this.prj.id] ? this.$root.prjDept2[this.prj.id] || [] : [];
            if (tmps.length > 0) {
                this.depts = tmps;
                if (tmps.length > 0) {
                    this.activeName = tmps[0].deptId + "";
                }
                this.elKey++;
                cb && cb();
                return;
            }
            this.$api.publics.queryUnitList({
                projectId: this.prj.id,
                unitTypes: "2".split(","),
            }).then((d) => {
                let objs = d.rows || [];
                if (!this.$root.prjDept2) {
                    this.$root.prjDept2 = {};
                }
                this.$root.prjDept2[this.prj.id] = objs;
                this.depts = objs;
                if (objs.length > 0) {
                    this.activeName = objs[0].deptId + "";
                }
                this.elKey++;
                cb && cb();
            });

        },
        loadData() {
            let tmps = this.depts.filter(d => d.deptId == this.activeName);
            this.queryParams.projectId = this.prj.id;
            this.queryParams.deptId=tmps.length>0?tmps[0].deptId:null;
            this.queryParams.standardType = this.standType ? this.standType : null;
            this.loading = true;
            listProjectStandard(this.queryParams).then(response => {
                this.projectStandardList = (response.rows||[]).map(it=>{
                    it.editDesc=false;
                    return it;
                });
                this.total = response.total;
                this.loading = false;
            });
        },
        show(prj) {
            this.prj = prj;           
            this.title = prj.projectName;
            this.isOpen = true;
            this.loadDepts(()=>{
                this.loadData(true);
            });            
        },
    },
};
</script>

<style lang="scss" scoped>
.project-standar-drawer {
    ::v-deep .el-drawer__header {
        margin-bottom: 0px;
    }

    ::v-deep .el-drawer__body {
        padding: 0px 24px;
        .el-tabs__content{
            padding-bottom: 10px;
            .el-input-number--medium{
                width:100px;
            }
            .row-desc{
                cursor: pointer;
            }
        }
    }
}
</style>