<template>
    <div class="customer page-body">
        <div class="page-search row items-center">
            <div class="col row wrap q-mr-lg q-col-gutter-md">

                <div class="col-4">
                    <div class="col row wrap ">
                        <div class="col-4">
                            <q-select filled stack-label option-value="Id" option-label="Name" v-model="inputtype"
                                ref="Id" :options="inputList" label="输入类型" :dense="false" emit-value map-options />
                        </div>
                        <div class="col-8">
                            <q-input @keyup.enter.native="setinput()" clearable standout="bg-primary text-white"
                                v-model="inputtext" label="输入" @clear="setinput()" />
                        </div>
                    </div>


                </div>
                <div class="col-5">
                    <div class="col row wrap ">
                        <div class="col-4">
                            <q-select filled stack-label option-value="Id" option-label="Name" v-model="timetype"
                                ref="Id" :options="ctypeList" label="输入类型" :dense="false" emit-value map-options />
                        </div>
                        <div class="col-8">
                            <q-field filled>
                                 <template v-slot:control>
                                    <el-date-picker v-model="dateList" @change="changePage(1)" value-format="yyyy-MM-dd" type="daterange" style="border:none;"
                                        :picker-options="pickerOptions"  range-separator="至"  start-placeholder="开始时间"
                                         end-placeholder="结束时间">
                                         </el-date-picker>       
                                </template>
                            </q-field>
                        </div>
                    </div>

                </div>
                <div class="col-3">
                    <q-select filled stack-label option-value="Id" option-label="Name" v-model="msg.CustomerType"
                        ref="Id" :options="CustomerTypeList" label="输入类型" :dense="false" emit-value map-options />

                </div>
                <div class="col-3">
                    <q-select filled option-value="Id" option-label="Name" v-model="msg.Q_Friends" multiple
                        @input="changePage(1)" ref="Id" :options="Q_FriendsList" label="好友关系" map-options />
                </div>
                <div class="col-3">
                    <q-select filled option-value="Id" option-label="Name" v-model="msg.Q_AddWay" multiple
                        @input="changePage(1)" ref="Id" :options="AddWayEnumList" label="获取途径" map-options />
                </div>
                <div class="col-3">
                    <q-input @keyup.enter.native="changePage(1)" type="number" :min="1" @input="getQ_NotFollowUpDay"
                        standout="bg-primary text-white" v-model="msg.Q_NotFollowUpDay" label="几天未跟进"
                        @clear="setinput()">
                        <template v-slot:append>
                            <span style="font-size: 14px;">天</span>
                        </template>
                    </q-input>
                </div>
                <div class="col-3">
                    <selectTree :treeData='memberList' :defaultArray="returnString" nodeKey="newId" :multiple="false"
                        labelKey="DeptName" childrenKey="ChildList" tipText="选择部门/人员" @getChild="getChild"></selectTree>
                </div>
                <div class="col-3">
                    <q-btn-dropdown split color="orange" push glossy no-caps label="自定义" @click="onMainClick">
                        <q-list>
                            <q-item clickable v-close-popup @click="msg.SelectList = []">
                                <q-item-section>
                                    <span>清空自定义标签条件</span>
                                </q-item-section>
                            </q-item>
                            <div style="width:100%;padding:0 16px">
                                <div style="border-top: 1px solid #dfe4ed;border-bottom: 1px solid #dfe4ed;padding: 6px 0 ;">
                                    <span style="font-size: 12px;color: dfe4ed;line-height: 30px;">常用筛选</span>
                                </div>
                            </div>
                            <q-item clickable v-close-popup @click="addCommonlyUsed">
                                <q-item-section style="flex: none;"><i class="el-icon-circle-plus"></i></q-item-section>

                                <q-item-section>
                                    <span>添加常用筛选</span>
                                </q-item-section>
                            </q-item>
                            <q-item clickable v-close-popup @click="customSettings">
                                <q-item-section style="flex: none;"><i class="el-icon-s-tools"></i></i></q-item-section>

                                <q-item-section>
                                  
                                    <span>设置</span>
                                </q-item-section>
                            </q-item>
                        </q-list>
                    </q-btn-dropdown>
                </div>




            </div>
        </div>
        <div class="page-content">


        </div>
        <div v-if="isscreen==true">
            <customFilter :selectList="msg.SelectList" @close='isscreen=false'></customFilter>
        </div>
        
    </div>
</template>

<script>
    import selectTree from '../../../components/common/select-tree'
    import customFilter from './kehucomponents/customFilter'
    import {
        getEmployeeAddrBook,
        getCustomerAddWayEnumList
    } from '../../../api/system/wechat';


    export default {
        components: {
            selectTree,
            customFilter
        },
        meta: {
            title: "客户"
        },
        name: "customer",
        data() {
            return {
                loading: false,
                pickerOptions: {
                    shortcuts: [{
                        text: '今天',
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            picker.$emit('pick', [start, end]);
                        }
                    }, {
                        text: '昨天',
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 1);
                            end.setTime(end.getTime() - 3600 * 1000 * 24 * 1);
                            picker.$emit('pick', [start, end]);
                        }
                    }, {
                        text: '最近一周',
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                            picker.$emit('pick', [start, end]);
                        }
                    }, {
                        text: '最近一个月',
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                            picker.$emit('pick', [start, end]);
                        }
                    }, {
                        text: '最近三个月',
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
                            picker.$emit('pick', [start, end]);
                        }
                    }]
                },
                inputtype: 1,//输入类型
                timetype: 1,//时间类型
                inputtext: '',
                inputList: [{ Id: 1, Name: '企业' }, { Id: 2, Name: '备注名' }, { Id: 3, Name: '昵称' }, { Id: 4, Name: '电话' },],
                CustomerTypeList: [{ Id: 0, Name: '不限' }, { Id: 1, Name: '微信用户' }, { Id: 2, Name: '企业微信用户' }],
                Q_FriendsList: [{ Id: 1, Name: '好友客户' }, { Id: 2, Name: '待添加' }, { Id: 3, Name: '已申请' }],
                msg: {
                    PageIndex: 1,
                    PageSize: 20,
                    CorpName: '',//企业名称
                    CustomerName: '',//备注名
                    WeChatName: '',//昵称
                    CustomerMobile: '',//手机号码
                    CreateSTime: '',//创建开始时间
                    CreateETime: '',//创建结束时间
                    FriendSTime: '',//好友开始时间
                    FriendETime: '',//好友结束时间
                    Q_NotFollowUpDay: 7,//几天未跟进
                    Q_Friends: [],//	好友关系 多选英文逗号分隔
                    Q_AddWay: [],//获取来源 多选英文逗号分隔
                    EmpId: 0,//	员工Id
                    CustomerType: 0,//类型 1微信用户 2企业微信用户
                    SelectList: [],//自定义查询

                },
                returnString: [],
                dateList: [],//创建时间
                ctypeList: [{ Id: 1, Name: '客户创建时间' }, { Id: 2, Name: '好友添加时间' },],
                memberList: [],
                AddWayEnumList: [],
                isscreen:false,//自定义筛选处理

            }
        },

        mounted() {
            this.getEmployList()
            this.getAddWayEnumList()
        },
        created() {
        },
        methods: {
            getQ_NotFollowUpDay(e) {//天数为空的处理
                if (e == null || e == '') {
                    this.msg.Q_NotFollowUpDay = 1
                }
            },
            changePage(e) {
                this.msg.pageIndex = e
                this.getList()
            },
            setinput() {
                if (this.inputtype == 1) {
                    this.msg.CorpName = this.inputtext
                    this.msg.CustomerName = ''
                    this.msg.WeChatName = ''
                    this.msg.CustomerMobile = ''
                } else if (this.inputtype == 2) {
                    this.msg.CorpName = ''
                    this.msg.CustomerName = this.inputtext
                    this.msg.WeChatName = ''
                    this.msg.CustomerMobile = ''
                } else if (this.inputtype == 3) {
                    this.msg.CorpName = ''
                    this.msg.CustomerName = ''
                    this.msg.WeChatName = this.inputtext
                    this.msg.CustomerMobile = ''
                } else if (this.inputtype == 4) {
                    this.msg.CorpName = ''
                    this.msg.CustomerName = ''
                    this.msg.WeChatName = ''
                    this.msg.CustomerMobile = this.inputtext
                }
                this.changePage(1)
            },
            getList() {
                if (this.dateList && this.dateList.length > 0) {
                    let times = this.dateList
                    if (this.timetype == 1) {
                        this.msg.CreateSTime = times[0];
                        this.msg.CreateETime = times[1];
                    } else {
                        this.msg.FriendSTime = times[0];
                        this.msg.FriendETime = times[1];
                    }
                } else {
                    this.msg.CreateSTime = '';
                    this.msg.CreateETime = '';
                    this.msg.FriendSTime = '';
                    this.msg.FriendETime = '';
                }
                let data = JSON.parse(JSON.stringify(this.msg))
                if (data.Q_Friends.length > 0) {
                    data.Q_Friends = data.Q_Friends.join(',')
                }

            },
            getEmployList() {
                getEmployeeAddrBook({}).then(res => {
                    if (res.Code == 1) {
                        this.memberList = res.Data
                        // 重组唯一id
                        if (this.memberList && this.memberList.length == 0) return
                        this.memberList.forEach(x => {
                            x.newId = x.DataType + '-' + x.DeptId
                            if (x.ChildList && x.ChildList.length > 0) {
                                this.getChildList(x.ChildList)
                            }
                        })

                    }
                }).catch(() => {

                })
            },
            getAddWayEnumList() {
                getCustomerAddWayEnumList({}).then(res => {
                    if (res.Code == 1) {
                        this.AddWayEnumList = res.Data

                    }
                })
            },

            getChildList(ChildList) {
                ChildList.forEach(x => {
                    x.newId = x.DataType + '-' + x.DeptId
                    if (x.ChildList && x.ChildList.length > 0) {
                        this.getChildList(x.ChildList)
                    }
                })
            },
            getChild(deptArray) {
                //数据处理 获取夏利是 1-2 前面代表部门还是人员  后面是原生ID
            },
            onMainClick() {
                this.isscreen =  true
            },
            addCommonlyUsed() {//添加常用

            },
            customSettings() {//自定义设置

            },
           



        }
    }

</script>

<style>
    .customer .el-input {
        width: 100%;
        border: none;
        background-color: transparent;
    }

    .customer .el-input__inner {
        width: 100%;
        border: none;
        background-color: transparent;
    }

    .customer .el-range-input {
        background-color: transparent !important;
    }
</style>