<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 type="card" v-model="activeName" :key="elKey" @tab-click="doTabClick">
                <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;" type="danger" :disabled="multiple"
                            @click="handleDelete">删除</el-button>
                        <div style="display: inline-block;width:200px;position: relative;top: 12px;">
                            <treeselect v-model="standType" :options="options" :show-count="true" placeholder="请选择类型" />
                        </div>
                        <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" class-name="td-tree-select">
                                <template slot-scope="{row}">
                                    <treeselect v-model="row.standardType" :options="options" :show-count="true"
                                        placeholder="请选择类型" @select="a => doRowSelect(row, a)" />
                                </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-edit"
                                        @click="handleEdit(scope.row)"
                                        v-hasPermi="['project:projectStandard:remove']">修改</el-button>
                                    <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, delProjectStandard } from '@/api/project/projectStandard.js'
import standardDlg from './projectStandardDlg.vue'
import standardTypes from './standardType'
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
export default {
    components: {
        standardDlg, Treeselect
    },
    data() {
        return {
            elKey: 0,
            title: '',
            isOpen: false,
            prj: null,
            // 选中数组
            ids: [],
            // 非单个禁用
            single: true,
            // 非多个禁用
            multiple: true,
            total: 0,
            activeName: "",
            depts: [],
            standType: null,
            projectStandardList: [],
            queryParams: {
                pageNum: 1,
                pageSize: 10,
                projectId: null,
                deptId: null,
                imageFile: null,
                standardDesc: null,
                ord: null,
                standardType: null,
                isDel: null,
            },
            treeOpts: [],
            options: standardTypes
        };
    },

    mounted() {
        standardTypes.forEach(it => {
            this.treeOpts.push(it);
            if (it.children) {
                it.children.forEach(it2 => {
                    this.treeOpts.push(it2);
                    if (it2.children) {
                        it2.children.forEach(it3 => {
                            this.treeOpts.push(it3);
                        })
                    }
                })
            }
        });
    },

    methods: {
        doRowSelect(row, a) {
            setTimeout(() => {
                if (a.children && a.children.length > 0) {
                    row.standardType = row.oldStandardType;
                } else {
                    updateProjectStandard(row).then(d => {
                        this.$modal.msgSuccess("更新成功");
                    })
                }
            }, 400);
        },
        doTabClick() {
            setTimeout(() => {
                this.doQuery();
            }, 400);
        },
        handleDelete(row) {
            const ids = row ? row.id || this.ids : this.ids;
            this.$modal.confirm('是否确认删除标准化管理编号为"' + ids + '"的数据项？')
                .then(function () {
                    return delProjectStandard(ids);
                }).then(() => {
                    this.loadData();
                    this.$modal.msgSuccess("删除成功");
                }).catch(() => { });
        },
        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.treeOpts.filter(d => d.id == 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] : {});
        },
        handleEdit(row) {
            let tmps = this.depts.filter(d => d.deptId == this.activeName);
            this.$refs.dlg.showDialog(this.prj, tmps.length > 0 ? tmps[0] : {}, row);
        },
        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;
                    it.oldStandardType=it.standardType;
                    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>
<style lang="scss">
.project-standar-drawer {
    .el-tab-pane {
        min-height: 800px;
    }

    .vue-treeselect__menu-container {
        .vue-treeselect__menu {
            max-height: 600px !important;
        }
    }

    .td-tree-select {
        .cell {
            overflow: visible;
        }
    }
}
</style>