<style>
    @import "../financial/css/cssReset.css";

    .addwelcome {
        justify-content: space-between;
    }

    .addwelcome .box_l {
        width: 400px;
        border-radius: 6px;
        margin-right: 15px;
        background: #fff;
    }

    .addwelcome .boxl_title {
        width: 100%;
        height: 56px;
        display: flex;
        align-items: center;
        border-bottom: 1px solid #e8e8e8;
    }

    .addwelcome .box_r {
        width: 1px;
        flex: 1;
        border-radius: 6px;
        background: #fff;
        padding: 20px;
    }

    .atooltip.el-tooltip__popper[x-placement^="top"] .popper__arrow {
        border-top-color: #FFF;
    }

    .atooltip.el-tooltip__popper[x-placement^="top"] .popper__arrow:after {
        border-top-color: #FFF;
    }

    .atooltip {
        background: #FFF !important;
        box-shadow: 0px 5px 25px 0px rgba(218, 220, 230, 0.85);
    }
</style>

<template>
    <div class="addwelcome page-body row" style="background: transparent;">
        <div class="box_l">
            <div class="boxl_title">
                <span style="margin-left:24px ;color: rgba(0,0,0,.85); font-weight: 500; font-size: 16px;">客户账号</span>
            </div>
            <div style="padding: 20px;">
                <div style="display: flex;align-items: flex-start;">
                    <i class="el-icon-user" style="margin-right:20px;font-size: 40px;color: #1890ff;"></i>
                    <div
                        style="width: 1px; flex:1;background: #f3f6fb;word-wrap: break-word;padding: 10px;border-radius: 4px;min-height: 40px;">
                        {{addMsg.Content}}
                    </div>
                </div>
            </div>
        </div>
        <div class="box_r">
            <el-form ref="addMsg" :model="addMsg" label-width="120px">
                <el-form-item label="企业微信成员：">
                    <div class="q-gutter-sm" style="align-items: center;display: flex;">
                        <q-radio v-model="membertype" val="1" label="通用" />
                        <q-radio v-model="membertype" val="2" label="指定企业成员" />
                        <q-btn color="accent" label="选择成员" size='sm' class="q-mr-md" style="margin-left: 20px;"
                            v-if="membertype==2" @click='getMember' />
                        <div v-if="ryList.length>0 && membertype==2" style="margin-top: 8px;">
                            <span style="margin-left: 15px">已选择{{ryList.length}}名成员</span>
                            <span style="cursor: pointer;color: #1890ff;margin-left: 15px;"
                                @click='ryList =[],showMember=[]'>重置</span>
                        </div>
                    </div>


                </el-form-item>
                <el-form-item label="文本内容：">

                    <q-input v-model="addMsg.Content" filled clearable type="textarea" label="文本内容"
                        style="width: 60%;" />
                    <div style="margin-top: 10px;">
                        <q-btn color="accent" label="+插入客户名称" size='sm' class="q-mr-md" @click='insert' />
                    </div>
                </el-form-item>
                <el-form-item label="添加内容：">

                    <q-btn color="white" text-color="black" label="+添加图片/图文/小程序" size='md'
                        v-if="JSON.stringify(Selectobj) == '{}'">
                        <q-popup-proxy ref='popupproxy'>
                            <q-banner>
                                <q-btn-group push>
                                    <q-btn label="图片" icon="images" @click="selectimg()" />
                                    <q-btn label="图文" icon="visibility" @click="selecttextimg()" />
                                    <q-btn label="小程序" icon="update" @click="selectxcx()" />
                                </q-btn-group>
                            </q-banner>
                        </q-popup-proxy>
                    </q-btn>
                    <div class="row items-center" v-else>
                        <i class="el-icon-link"></i>
                        <span style="margin-left: 10px;cursor: pointer;" @click="selectimg">{{Selectobj.name}}</span>
                        <i style="margin-left: 10px;cursor: pointer" class="el-icon-close" @click="Selectobj={}"></i>
                    </div>

                </el-form-item>
            </el-form>
            <q-card-actions align="left" class="bg-white" style="margin-top: 15px;">
                <q-btn color="accent" class="q-mr-md" label="保存" @click="savemove()" style="width: 100px;" :loading="loading"/>
                <q-btn class="q-mr-md" label="返回" @click="goblck()" style="width: 60px;" />
            </q-card-actions>
        </div>

        <!-- 人员选择 -->
        <el-dialog custom-class='w700' title="选择人员" :visible.sync="outerVisible" center>
            <div class="fl" style="width: 300px; margin: 0 20px;">
                <p style="margin: 0 0 10px 0;">选择： <el-input class='w200' placeholder="输入关键字进行过滤" v-model="filterText"
                        @input="">
                    </el-input>
                </p>
                <el-tree class='ApprovalProcessBg' :data="memberList" show-checkbox :filter-node-method="filterNode"
                    ref="tree" :props="defaultProps" :render-after-expand="false" node-key="Id"
                    :check-on-click-node="true" @check-change="handleNodeChange">
                </el-tree>
            </div>
            <div class="fl">
                <p style="margin: 0 0 20px 0;">已选：</p>
                <div class="Approval_yxList">
                    <li v-for="(item,index) in showMember">{{item.EmployeeName}}
                        <i @click="mySetCheckedKeys(item.Id,index)" class="el-icon-circle-close showMemberIcon"></i>
                    </li>
                </div>
            </div>
            <div slot="footer" class="dialog-footer">
                <button class="hollowFixedBtn" @click="outerVisible = false">取消</button> &nbsp;
                <button class="normalBtn" type="primary" @click="getmember">确实</button>
            </div>
        </el-dialog>
        <!-- 图片 -->
        <selectMaterial v-if="isshowselectMaterial" :materialType="materialType" :saveobj='Selectobj'
            @close="getclose()" @success='getsuccess'>
        </selectMaterial>
        <!-- 图文 -->
        <imagetextform v-if="isshowimagetext" :saveobj='Selectobj' @close="gettwclose()" @success='gettwsuccess'>
        </imagetextform>
        <!-- 小程序 -->
        <appletform v-if="isshowapplet" :saveobj='Selectobj' @close="getxcxclose()" @success='getxcxsuccess'>
        </appletform>
    </div>
</template>

<script>
    import {
        setWeChatWelcomesInfo,
    } from '../../api/system/wechat';
    import selectMaterial from "../../components/enterprise/selectMaterial"
    import imagetextform from "../../components/enterprise/imagetext-form"
    import appletform from "../../components/enterprise/applet-form"

    import {
        queryEmployee
    } from '../../api/users/user'
    export default {
        meta: {
            title: "欢迎语编辑"
        },
        components: {
            selectMaterial,
            imagetextform,//图文
            appletform,//小程序
        },
        name: "welcomeList",
        data() {
            return {
                loading: false,
                outerVisible: false,//选择人员弹窗
                filterText: '',//人员选择 帅选
                memberList: [],//
                showMember: [],
                membertype: '1',
                ryList: [],
                addMsg: {
                    Id: 0,
                    UserIdList: [],//成员列表
                    Content: "",
                    MediumIds: '',//使用的素材id '1,2,3'格式
                    Type: 1,//如果MediumIds不为空的情况 type为2 
                },
                defaultProps: {
                    children: 'ChildList',
                    label: 'EmployeeName',
                },
                materialType: 1,
                isshowselectMaterial: false,
                isshowimagetext: false,
                isshowapplet: false,
                Selectobj: {},//选中对象
            }
        },
        created() {

        },
        methods: {
            getMember() {
                this.outerVisible = true;
                this.dialogTitle = this.$t('fnc.xzrenyuan');
                queryEmployee({}).then(res => {
                    if (res.Code == 1) {
                        this.memberList = res.Data;
                    }
                }).catch(() => {

                })
                var arr = [];
                this.showMember.forEach(x => {
                    arr.push(x.Id);
                })
                if (this.$refs.tree) {
                    this.$refs.tree.setCheckedKeys(arr);
                }
            },
            mySetCheckedKeys(id, index) {
                var arr = [];
                this.showMember.splice(index, 1);
                this.showMember.forEach(x => {
                    arr.push(x.Id);
                })
                if (this.$refs.tree) {
                    this.$refs.tree.setCheckedKeys(arr);
                }
            },
            handleNodeChange(data, checked) {
                data.IsCheck = checked;
                let res = this.$refs.tree.getCheckedNodes(true, true);
                this.showMember = [];
                res.forEach(x => {
                    var obj = {
                        EmployeeName: x.EmployeeName,
                        Id: x.Id
                    }
                    this.showMember.push(obj)
                })
            },
            filterNode(value, data) {
                if (!value) return true;
                return data.DepartmentName.indexOf(value) !== -1;
            },
            getmember() {//人员确定选择
                this.outerVisible = false;
                this.ryList = JSON.parse(JSON.stringify(this.showMember))
            },
            insert() {
                this.addMsg.Content = this.addMsg.Content + '##客户名称##'
            },
            selectimg() {//素材选择 图片模式
                this.materialType = 2;
                this.isshowselectMaterial = true;
                if (this.$refs.popupproxy) {
                    this.$refs.popupproxy.hide()
                }
            },
            getclose() {//素材关闭
                this.isshowselectMaterial = false
            },

            getsuccess(data) {//选择数据回来
                this.Selectobj = data
                this.isshowselectMaterial = false
            },

            selecttextimg() {//图文
                this.isshowimagetext = true;
                if (this.$refs.popupproxy) {
                    this.$refs.popupproxy.hide()
                }
            },
            gettwclose() {//图文
                this.isshowimagetext = false;
            },
            gettwsuccess(data) {//图文返回成功
                this.Selectobj = data
                this.isshowimagetext = false
            },


            selectxcx() {//图文
                this.isshowapplet = true;

                if (this.$refs.popupproxy) {
                    this.$refs.popupproxy.hide()
                }
            },
            getxcxclose() {//小程序 关闭
                this.isshowapplet = false;
            },
            getxcxsuccess() {//小程序 关闭
                this.Selectobj = data
                this.isshowapplet = false
            },
            savemove() {//保存
                if (this.membertype == 1) {
                    this.addMsg.UserIdList = ["-1"];
                } else {
                    if (this.ryList.length > 0) {
                        this.addMsg.UserIdList = []
                        this.ryList.forEach(x => {
                            this.addMsg.UserIdList.push(x.Id)
                        })
                    } else {
                        this.$q.notify({
                            type: 'negative',
                            message: `请选择人员列表`,
                            position: 'top'
                        })
                        return
                    }
                }
                if (this.addMsg.MediumIds == '') {
                    this.addMsg.Type = 1;
                    if (this.addMsg.Content == '') {
                        this.$q.notify({
                            type: 'negative',
                            message: `请输入文本内容`,
                            position: 'top'
                        })
                        return
                    }
                } else {
                    this.addMsg.Type = 2;
                }
                // 调取接口
                this.loading = true
                setWeChatWelcomesInfo(this.addMsg).then(res => {
                    this.loading = false
                    this.$q.notify({
                        icon: 'iconfont icon-chenggong',
                        color: 'accent',
                        timeout: 2000,
                        message: res.Message,
                        position: 'top'
                    })
                    this.goblck()
                })

            },
            goblck() {//返回上一个页面
                this.$router.go(-1);//返回上一层
            },


        }
    }

</script>