<template>
    <div v-if="visible">
        <transition name="el-zoom-in-center">
            <div class="JNPF-preview-main user-form">
                <div class="JNPF-common-page-header">
                    <el-page-header @back="goBack" content="" />
                    <div class="header-title">
                        <div style="opacity: 0.5;">流程接入配置</div> /
                        <div>流程信息配置</div> /
                        <div style="font-size: 20px;font-weight: bold;"> {{order.itsmProName}}
                        </div>

                    </div>
                    <!-- <div class="options">
                    <el-button type="primary" :loading="btnLoading" @click="handleConfirm()">
                        {{ $t("common.confirmButton") }}</el-button>
                    <el-button @click="goBack">{{ $t("common.cancelButton") }}
                    </el-button>
                </div> -->
                </div>
                <div class="main">
                    <div class="JNPF-common-layout-left">
                        <div class="JNPF-common-title">
                            <h2 style="color: #339dff;">版本列表</h2>
                            <span class="options">
                                <el-dropdown>
                                    <el-link icon="icon-ym icon-ym-mpMenu" :underline="false" />
                                    <el-dropdown-menu slot="dropdown">
                                        <el-dropdown-item
                                            @click.native="getVersionByItsmProKey()">刷新数据</el-dropdown-item>
                                    </el-dropdown-menu>
                                </el-dropdown>
                            </span>
                        </div>
                        <div class="JNPF-common-tree-search-box">
                            <el-input placeholder="输入关键字" v-model="filterText"
                                suffix-icon="el-icon-search" clearable />
                        </div>
                        <el-scrollbar class="JNPF-common-el-tree-scrollbar" v-loading="treeLoading">
                            <el-tree ref="treeBox" :data="treeData" :props="defaultProps"
                                :default-expand-all="expands" highlight-current
                                :expand-on-click-node="false" node-key="id"
                                @node-click="handleNodeClick" class="JNPF-common-el-tree"
                                v-if="refreshTree" :filter-node-method="filterNode">
                                <span class="custom-tree-node" slot-scope="{ data }"
                                    :title="data.version">
                                    <el-tag v-if="data.current == '1'"
                                        style="margin-right: 10px;">当前版本</el-tag>
                                    <el-tag v-else style="margin-right: 10px;"
                                        type="info">其他版本</el-tag>

                                    <span class="text"
                                        :title="data.version">{{ data.version }}</span>
                                    <el-button type="danger" size="mini" v-if="data.current !== '1'"
                                        @click.prevent="deleteVersion(data)"
                                        style="margin-right: 10px;">删除</el-button>
                                </span>
                            </el-tree>
                        </el-scrollbar>
                    </div>
                    <div class="JNPF-common-layout-center JNPF-flex-main" v-if="orderDetail">
                        <el-row class="JNPF-common-search-box" :gutter="16"
                            style="margin-bottom: 10px;padding-top: 0px;">
                            <div class="JNPF-common-head">
                                <el-button v-if="treeData.length == 0" type="primary"
                                    @click="submit()">同步流程表单</el-button>
                                <div v-else style="width: 100%;">
                                    <div class="top-setting">
                                        <div class="left" v-if="orderDetail.current !=='是'">
                                            <span style="margin-right: 10px">设置为当前版本</span>
                                            <el-switch v-model="value1" @change="switchChange">
                                            </el-switch>
                                            <i style="font-size: 20px;color: #8d8d8d;margin: 0 5px;"
                                                class="el-icon-warning-outline">
                                            </i>
                                            <span>注：设置后会将其他版本置为无效</span>
                                        </div>

                                        <div class="left" v-if="orderDetail.current =='是'">
                                            <el-tag>当前版本</el-tag>
                                        </div>

                                        <div class="right">
                                            <el-button type="primary" icon="el-icon-tickets"
                                                style="margin-right: 20px;"
                                                @click="editRuleForm()">表单规则配置</el-button>

                                            <el-button type="primary" icon="el-icon-edit-outline"
                                                style="margin-right: 20px;"
                                                @click="editForm()">流程信息编辑</el-button>

                                            <el-button type="primary" icon="el-icon-document-copy"
                                                style="margin-right: 20px;"
                                                @click="copy()">表单字段复制</el-button>
                                            <div class="miniapp" style="margin-right: 20px;">
                                                <img
                                                    src="@/assets/images/processConfiguration/wxmp.png" />
                                                <span @click="showAllocation('wx')">小程序发起</span>
                                            </div>
                                            <div class="miniapp" style="margin-right: 20px;">
                                                <img
                                                    src="@/assets/images/processConfiguration/wxmp.png" />
                                                <span
                                                    @click="showAllocation('wx_detail')">小程序详情</span>
                                            </div>
                                            <div class="qywx" style="margin-right: 20px;">
                                                <img style="width: 25px;"
                                                    src="@/assets/images/processConfiguration/qywx.png" />
                                                <span @click="showAllocation('qw')">企微发起</span>
                                            </div>

                                            <div class="qywx">
                                                <img style="width: 25px;"
                                                    src="@/assets/images/processConfiguration/qywx.png" />
                                                <span
                                                    @click="showAllocation('qw_detail')">企微详情</span>
                                            </div>
                                        </div>
                                    </div>

                                </div>
                            </div>
                        </el-row>
                        <el-row class="JNPF-common-search-box basic-information" :gutter="16"
                            style="margin-bottom: 10px;padding-top: 0px;">
                            <el-col :gutter="16">
                                <div class="title">
                                    基础信息
                                </div>
                                <div class="content">
                                    <div class="info" style="display: flex;align-items: center;">
                                        <div class="info-item" style="width: 30%;display: flex;">
                                            <span class="label">类型：</span>
                                            <span class="value">{{orderDetail.type}}
                                            </span>
                                        </div>
                                        <div class="info-item" style="width: 30%;display: flex;">
                                            <span class="label">分组：</span>
                                            <span class="value">{{orderDetail.proType}}
                                            </span>
                                        </div>
                                        <div class="info-item" style="width: 30%;display: flex;">
                                            <span class="label">排序：</span>
                                            <span class="value">{{orderDetail.sort}}
                                            </span>
                                        </div>
                                    </div>
                                </div>
                            </el-col>
                        </el-row>
                        <el-row class="JNPF-common-search-box basic-information" :gutter="16"
                            style="margin-bottom: 10px;padding-top: 0px;">
                            <el-col :gutter="16" :span="12">
                                <div class="title">
                                    小程序
                                </div>
                                <div class="content">
                                    <div class="info">
                                        <div class="info-item">
                                            <div class="label">流程名称：</div>
                                            <div class="value">{{orderDetail.mscodeProNameWx}}
                                            </div>
                                        </div>
                                        <div class="info-item">
                                            <div class="label">流程描述：</div>
                                            <div class="value">
                                                {{orderDetail.descriptionWx}}
                                            </div>
                                        </div>
                                        <div class="info-item">
                                            <div class="label">是否启用：</div>
                                            <el-tag v-if="orderDetail.usedWx == '是'">是</el-tag>
                                            <el-tag v-else type="danger">否</el-tag>
                                        </div>
                                    </div>
                                </div>
                            </el-col>
                            <el-col :gutter="16" :span="12">
                                <div class="title">
                                    企业微信
                                </div>
                                <div class="content">
                                    <div class="info">
                                        <div class="info-item">
                                            <div class="label">流程名称：</div>
                                            <div class="value">{{orderDetail.mscodeProNameQywx}}
                                            </div>
                                        </div>
                                        <div class="info-item">
                                            <div class="label">流程描述：</div>
                                            <div class="value">{{orderDetail.descriptionQywx}}
                                            </div>
                                        </div>
                                        <div class="info-item">
                                            <div class="label">是否启用：</div>
                                            <el-tag v-if="orderDetail.usedQywx == '是'">是</el-tag>
                                            <el-tag v-else type="danger">否</el-tag>
                                        </div>
                                    </div>
                                    <div class="foot">
                                        {{orderDetail.updateTime}}
                                    </div>
                                </div>
                            </el-col>

                        </el-row>
                        <div class="JNPF-common-layout-main JNPF-flex-main basic-table"
                            style="overflow-y: auto;">
                            <el-row class="JNPF-common-search-box basic-information" :gutter="16"
                                style="margin-bottom: 10px;padding-top: 0px;">
                                <el-col :gutter="16" :span="12">
                                    <div class="title">
                                        小程序表单信息
                                    </div>
                                    <el-table :data="tableData1" :loding="listLoading1">
                                        <el-table-column prop="index" type="index" width="50"
                                            label="序号" align="center" />
                                        <el-table-column align="center" prop="itsmFieldName"
                                            label="字段名" />
                                        <el-table-column align="center" prop="itsmFormCode"
                                            label="字段编码" />
                                        <el-table-column align="center" prop="fieldType"
                                            label="字段类型" />

                                    </el-table>
                                </el-col>
                                <el-col :gutter="16" :span="12">
                                    <div class="title">
                                        企微表单信息
                                    </div>
                                    <el-table :data="tableData2" :loding="listLoading2">
                                        <el-table-column prop="index" type="index" width="50"
                                            label="序号" align="center" />
                                        <el-table-column align="center" prop="itsmFieldName"
                                            label="字段名" />
                                        <el-table-column align="center" prop="itsmFormCode"
                                            label="字段编码" />
                                        <el-table-column align="center" prop="fieldType"
                                            label="字段类型" />

                                    </el-table>
                                </el-col>
                            </el-row>

                        </div>

                    </div>
                    <div class="JNPF-common-layout-center JNPF-flex-main" v-else
                        style="background-color: #fff;">
                        <el-empty description="暂无数据"></el-empty>
                    </div>
                </div>
            </div>
        </transition>

        <el-dialog title="表单字段复制" :visible.sync="copyFormVisible" width="40%"
            :before-close="copyFormClose">
            <el-form @submit.native.prevent>
                <el-form-item label="复制方向" :rules="[
      { required: true, message: '请输入复制方向', trigger: 'blur' },
    ]">
                    <el-select v-model="form.value" reserve-keyword placeholder="请输入复制方向">
                        <el-option v-for="item in copyProcessList" :key="item.id"
                            :label="item.fullName" :value="item.enCode">
                        </el-option>
                    </el-select>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="copyFormClose">取 消</el-button>
                <el-button type="primary" @click="formSubmit">确 定</el-button>
            </span>
        </el-dialog>

        <Allocation v-if="allocationVisible" ref="Allocation" @close="closeAllocation" />
        <INFO-Form v-if="infoFormVisible" ref="INFOForm" @refreshData="getDetail" />
        <RULE-Form v-if="ruleFormVisible" ref="RULEForm" />
    </div>

</template>

<script>


import INFOForm from './infoForm'
import RULEForm from './ruleForm'


import { findVersionByItsmProKey, getDetail, putSelectVersion, getFiledList, copyFormDetail, deleteProcessByKey } from "@/api/governmentCloud/processConfiguration/processConfiguration";
import { getDictionaryDataSelector } from '@/api/systemData/dictionary'

import Allocation from './Allocation'

export default {
    components: { Allocation, INFOForm, RULEForm },
    data() {
        return {
            visible: false,
            btnLoading: false,
            treeLoading: false,
            organizeId: null,
            filterText: "",
            userId: null,
            userMobilePhone: null,

            refreshTree: true,
            treeData: [],
            defaultProps: {
                children: "children",
                label: "fullName"
            },
            expands: true,
            listQuery: {
                versionId: "",
            },
            tableData1: [],
            listLoading1: true,
            tableData2: [],
            listLoading2: true,
            multipleSelection: null,
            order: null,
            copyFormVisible: false,//复制表单是否显示
            form: {
                value: '',
                src: '',
                dist: '',
                version: '',
                proKey: ''
            },
            copyProcessList: [],


            value1: false, //是否生效 临时
            allocationVisible: false,//配置页面是否展示
            orderDetail: null,//流程详情
            infoFormVisible: false,//信息表单是否展示
            ruleFormVisible: false//规则表单是否展示
        };
    },
    watch: {
        filterText(val) {
            console.log(val);
            this.$refs.treeBox.filter(val);
        }
    },
    created() {
        this.getCopyProcessList()
    },
    methods: {
        getCopyProcessList() {
            getDictionaryDataSelector('591282270644469765').then(res => {
                this.copyProcessList = res.data.list
            })
        },
        deleteVersion(item) {
            console.log(item)
            this.$confirm("此操作将永久删除该版本, 是否继续?", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning"
            })
                .then(() => {
                    console.log(this.order)
                    let params = {
                        key: this.order.itsmProKey,
                        version: item.version
                    }
                    deleteProcessByKey(params).then(async (res) => {
                        if (res.code == 200) {
                            this.$message({
                                message: "删除成功",
                                type: "success",
                                duration: 1500
                            });
                            await this.getVersionByItsmProKey()
                            this.listQuery.versionId = this.treeData[0].id
                            this.getDetail()
                        } else {
                            this.$message({
                                message: res.msg,
                                type: "error",
                                duration: 1500
                            });
                        }
                    });
                })
                .catch(() => { });
        },
        copy() {
            this.copyFormVisible = true
        },
        copyFormClose() {
            this.copyFormVisible = false
            this.form.value = ''
        },
        formSubmit() {
            if (this.form.value) {
                let params = {
                    proKey: this.orderDetail.itsmProKey,
                    version: this.orderDetail.version,
                    src: this.form.value.split(',')[0],
                    dist: this.form.value.split(',')[1],
                }
                console.log(params)
                copyFormDetail(params).then(res => {
                    if (res.code == 200) {
                        this.$message({
                            message: "复制成功",
                            type: "success",
                            duration: 1500
                        });
                        this.copyFormClose()
                        this.getDetail()
                    } else {
                        this.$message({
                            message: res.msg,
                            type: "error",
                            duration: 1500
                        });
                    }
                });
            } else {
                this.$message({
                    message: "请选择复制方向",
                    type: "error",
                    duration: 1500
                });
            }

        },
        // 打开配置页
        showAllocation(type) {
            console.log(type)
            this.allocationVisible = true
            this.$nextTick(() => {
                this.$refs.Allocation.init(this.orderDetail, type)
            })
        },
        //关闭配置页
        closeAllocation() {
            this.allocationVisible = false;
        },
        editRuleForm() {
            this.ruleFormVisible = true
            this.$nextTick(() => {
                this.$refs.RULEForm.init(this.orderDetail)
            })
        },
        editForm() {
            this.infoFormVisible = true
            this.$nextTick(() => {
                this.$refs.INFOForm.init(this.orderDetail)
            })
        },
        filterNode(value, data) {
            console.log(value)
            console.log(data)
            if (!value) return true;
            return data.version.indexOf(value) !== -1;
        },
        handleNodeClick(data, node) {
            console.log(data);
            if (this.listQuery.versionId === data.id) return;
            this.listQuery.versionId = data.id;
            this.getDetail()
        },
        async init(row) {
            this.order = row
            await this.getVersionByItsmProKey()
            this.listQuery.versionId = this.treeData[0].id
            this.getDetail()

            this.visible = true;
            this.filterText = "";


        },
        // 启用switch改变
        switchChange(val) {
            console.log(val)
            if (val) {
                let params = {
                    itsmProKey: this.orderDetail.itsmProKey,
                    version: this.orderDetail.version
                }
                putSelectVersion(params).then(res => {
                    if (res.code == 200) {
                        this.$message({
                            message: "启用成功",
                            type: "success",
                            duration: 1500
                        });
                        this.value1 = false
                        this.getVersionByItsmProKey()
                        this.getDetail()
                    }
                })

            }
        },
        //获取版本列表
        getVersionByItsmProKey() {
            return new Promise((resolve, reject) => {
                let params = {
                    current: 1,
                    size: 20
                }
                this.treeLoading = true;
                let itsmProKey = this.order.itsmProKey
                findVersionByItsmProKey(params, itsmProKey).then(res => {
                    if (res.code == 200) {
                        this.treeData = res.data.records
                        this.treeData.forEach(item => {
                            item.version = String(item.version)
                        })

                        this.treeLoading = false;
                        resolve(true)
                    }
                })
            })
        },
        getDetail() {
            this.orderDetail = null
            getDetail(this.listQuery.versionId).then(res => {
                if (res.code == 200) {
                    this.orderDetail = res.data
                }


                this.listLoading1 = true
                let params1 = {
                    dataType: "1", // 数据类型 0-当前页 1-全部数据
                    currentPage: 1,
                    pageSize: 200,
                    sidx: "moduleSort,sort",
                    itsmProNum: this.orderDetail.itsmProKey, // 流程Key
                    version: this.orderDetail.version, // 版本
                    fieldOperantConfig: "wx", // 类别（qw qw_detail wx wx_detail）
                }
                getFiledList(params1).then(res => {
                    this.listLoading1 = false

                    if (res.code == 200) {
                        this.tableData1 = res.data.list
                    }
                })

                this.listLoading2 = true
                let params2 = {
                    dataType: "1", // 数据类型 0-当前页 1-全部数据
                    currentPage: 1,
                    pageSize: 200,
                    sidx: "moduleSort,sort",
                    itsmProNum: this.orderDetail.itsmProKey, // 流程Key
                    version: this.orderDetail.version, // 版本
                    fieldOperantConfig: "qw", // 类别（qw qw_detail wx wx_detail）
                }
                getFiledList(params2).then(res => {
                    this.listLoading2 = false
                    if (res.code == 200) {
                        this.tableData2 = res.data.list
                    }
                })

            })

        },
        goBack() {
            this.$emit("close");
        },
        handleConfirm() { }
    }
};
</script>
<style lang="scss" scoped>
.user-form {
    .header-title {
        margin-left: 0px;
        display: flex;
        font-size: 18px;
        align-items: center;
        div {
            margin: 0 10px;
        }
    }
    .main {
        padding: 10px 0px 0;
        display: flex;
        align-items: center;
        justify-content: space-between;
        background-color: #e3e6ec;
        .button-div {
            padding: 15px 10px 0;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .top-setting {
            display: flex;
            align-items: center;
            justify-content: space-between;
            width: 100%;
            .left {
                display: flex;
                align-items: center;
                color: #8d8d8d;
            }
            .right {
                display: flex;
                align-items: center;
                justify-content: space-between;
                div {
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                    img {
                        width: 20px;
                        height: 20px;
                        margin-right: 5px;
                    }
                    span {
                        cursor: pointer;
                        &:hover {
                            color: #1890ff;
                        }
                    }
                }
            }
        }
        .basic-information {
            .title {
                padding: 15px;
                font-size: 16px;
                color: #1890ff;
                border-bottom: 1px solid #8d8d8d50;
            }
            .content {
                padding: 15px;
                font-size: 14px;
                .info {
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    flex-wrap: wrap;
                    .info-item {
                        width: 100%;
                        color: #8d8d8d;
                        margin-bottom: 10px;
                        .label {
                            margin-bottom: 5px;
                        }
                        .value {
                            overflow: hidden;
                            display: -webkit-box;
                            -webkit-line-clamp: 1;
                            -webkit-box-orient: vertical;
                        }
                    }
                }
                .foot {
                    display: flex;
                    justify-content: flex-end;
                    color: #1890ff;
                }
            }
        }
        .basic-table {
            .title {
                padding: 15px;
                font-size: 16px;
                color: #1890ff;
                border-bottom: 1px solid #8d8d8d50;
            }
        }
    }
}
</style>
