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

.baseSet_Title {
    width: 120px !important;
    padding: 18px 0 0 16px;
    text-align: right;
}
.singeRowTable tr th {
    border: 1px solid #d2d2d2;
}

</style>
<template>
    <div class="page-body marketRules">
        <div class="page-search row items-center">
            <div class="col row wrap q-mr-lg q-col-gutter-md">
                <div class="col-3">
                    <q-input @keyup.enter.native="resetSearch" dense clearable filled v-model="msg.StuName" label="昵称" maxlength="20" />
                </div>
                <div class="col-3">
                    <q-input @keyup.enter.native="resetSearch" dense clearable filled v-model="msg.StuRealMobile" label="电话" maxlength="20" />
                </div>
                <div class="col-3">
                    <q-input @keyup.enter.native="resetSearch" dense clearable filled v-model="msg.QQ" label="QQ" maxlength="20" />
                </div>
                <div class="col-3">
                    <q-input @keyup.enter.native="resetSearch" dense clearable filled v-model="msg.WeChatNo" label="微信号" maxlength="20" />
                </div>
                <div class="col-3">
                    <q-select @input="resetSearch" filled v-model="msg.StuType" dense clearable :options="customTypeList"
                        option-label="Name" option-value="Id" emit-value map-options label="客户类型" />
                    </div>
                <div class="col-3">
                    <q-select filled @input="resetSearch" v-model="msg.StuChannel"  dense :options="StuChannelList"
                         option-label="Name" option-value="Id" emit-value map-options use-input label="收客渠道" clearable
                        @filter="filterStuChannel">
                        <template v-slot:no-option>
                        <q-item>
                            <q-item-section class="text-grey">
                            未找到相关数据
                            </q-item-section>
                        </q-item>
                        </template>
                    </q-select>
                </div>
                <div class="col-3">
                    <q-select @input="resetSearch" dense filled option-value="Id" option-label="Name" v-model="msg.BelongType"
                        :options="BelongTypeList" emit-value map-options label="归属类型" />
                </div>
                <div class="col-3" v-if="msg.BelongType == 4">
                    <q-select
                        @input="resetSearch"
                        dense
                        clearable
                        @filter="filterSubord"
                        use-input
                        filled
                        option-value="Id"
                        option-label="EmployeeName"
                        v-model="msg.CreateIds"
                        multiple
                        :options="SubordList"
                        emit-value
                        map-options
                        label="我下属的"
                    />
                </div>
                <div class="col-3">
                    <q-select @input="resetSearch" dense filled option-value="Id" option-label="Name" v-model="msg.Q_EnrollState"
                        :options="FTypeList" emit-value map-options label="报名状态" />
                </div>
                <!-- <div class="col-3">
                    <q-select  @input="resetSearch" dense filled option-value="Id" option-label="Name" v-model="msg.StuGuestState" clearable
                        :options="hetongList" emit-value map-options label="合同状态"
                    />
                </div> -->

            </div>
        </div>
        <div class="page-search row items-center" v-if="morequery">
            <div class="col row wrap q-mr-lg q-col-gutter-md">
                <div class="col-3">
                    <q-select @input="resetSearch" dense filled v-model="msg.StuStage" :options="customState" option-label="Name"
                        option-value="Id" emit-value map-options label="客户状态" clearable />
                </div>
                
                <div class="col-3">
                    <q-select  @input="resetSearch" dense filled option-value="Id" option-label="EmployeeName" v-model="msg.ConsultantId" clearable
                        :options="RoleListData" emit-value map-options label="课程顾问"
                    />
                </div>
              
                
                <div class="col-3">
                    <q-field filled dense>
                        <template v-slot:control>
                        <el-date-picker v-model="dateArray" size="mini" @change="resetSearch" value-format="yyyy-MM-dd" 
                            type="daterange" style="border:none;" range-separator="至" start-placeholder="跟进开始时间"
                            end-placeholder="跟进结束时间" />
                        </template>
                    </q-field>
                </div>
                <div class="col-3">
                    
                    (<q-radio size="xs" v-model="msg.Q_FType" val="1" label="范围内有跟进记录" @input ='resetSearch' />
                     <q-radio size="xs" v-model="msg.Q_FType" val="2" label="范围内没有跟进记录"  @input ='resetSearch'/>）
                   
                </div>
            </div>
        </div>
        <div style="width: 100%;padding: 0 10px;margin-bottom: 10px;display: flex;align-items: center;justify-content: space-between;">
            <div style="font-weight: bold;">
                总人数:{{Count}}人
            </div>
            <div>
                <span @click="morequery=!morequery" style="display:inline-flex;align-items:center;cursor: pointer;" >
                    <span style="margin-right:5px;color: #089bab;">高级查询</span>
                    <img v-show="morequery" class="roatImg" style="width:12px;height:12px" src="../../assets/images/more.png" alt="">
                    <img v-show="!morequery"  style="width:12px;height:12px" src="../../assets/images/more.png" alt="">
                </span>
            </div>
           
        </div>
         
         <div  class="page-content">
                <q-table :pagination="msg" :loading="loading" no-data-label="暂无相关数据" flat 
                 class="sticky-column-table sticky-right-column-table " 
                    :data="dataList" :columns="columns" row-key="StuId" >
                    
                   
                    <template v-slot:body-cell-StuName="props">
                        <q-td :props="props">
                        <div class="text-blue cursor-pointer" @click="getStuRight(props.row)">
                            {{ props.value }}
                        </div>
                        </q-td>
                    </template>
                    <template v-slot:body-cell-EnrollState="props">
                        <q-td :props="props">
                        <q-badge :color="props.row.EnrollState == 1 ? 'negative' : 'primary'" :label="props.row.EnrollState == 1 ? '已报名' : '未成交'" />
                        </q-td>
                    </template>
                    <template v-slot:body-cell-PlanPrice="props">
                        <q-td :props="props" style="max-width: 200px; white-space:	normal;word-break:break-all">
                        
                            <div>{{props.row.PlanPrice}}</div>
                        </q-td>
                    </template>
                    <template v-slot:body-cell-BaseCondition="props">
                        <q-td :props="props" class="w500text">
                            <div ><span class="w500text-l">基本情况：</span>   <span class="text-r">{{props.row.BaseCondition?props.row.BaseCondition:'暂无'}}</span> </div>
                            <div ><span class="w500text-l">需求点：</span> <span class="text-r">{{props.row.DemandPoint?props.row.DemandPoint:'暂无'}}</span></div>
                            <div ><span class="w500text-l">抗拒点：</span> <span class="text-r">{{props.row.ResistPoint?props.row.ResistPoint:'暂无'}}</span></div>
                            <div ><span class="w500text-l">咨询结果：</span> <span class="text-r">{{props.row.ConsultingResults?props.row.ConsultingResults:'暂无'}}</span></div>
                           
                        </q-td>
                    </template>
                 
                   
                    <template v-slot:body-cell-FURemark="props">
                        <q-td >
                            <div style="display: flex;align-items: center;justify-content: space-between;">{{props.row.FUTime}}
                                <span style="text-decoration: underline;cursor: pointer;color: #2961fe ;"  v-if="props.row.FURemark" @click="lookgengduo(props.row)">更多</span>
                            </div>
                            <div  style="max-width: 200px;overflow: hidden;white-space:	normal;word-break:break-all;" v-if="props.row.FURemark" v-html="props.row.FURemark"></div>
                        </q-td>
                    </template>
                    <template v-slot:bottom>
                        <q-pagination class="full-width justify-end" v-model="msg.pageIndex" color="primary" :max="PageCount"
                            :input="true" @input="changePage" />
                    </template>
                    
                </q-table>
            </div>
              
            <studentRight-form
                v-if="isShowStuRight"
                :isJudgeTrans="isJudgeTrans"
                :BelongType="BelongType"
                :save-obj="stuOption"
                @close="closeStuForm"
                @success="getList"
                @reload="getList"
                >
            </studentRight-form>
            <studentFUForm
                v-if="isShowStuFU"
                :save-obj="stuOption"
                @close="closeStuForm"
               
                >
            </studentFUForm>
    </div>
</template>
<script>

import {
    getStudentConsultPageList,
    
} from '../../api/studyabroad/index'
import { queryEmployee } from "../../api/users/user";
  import {
    GetStuChannelList,
  } from "../../api/sale/sale";

import {
    queryStuStageList,
    GetStudentTypeList,
    GetPersonalDimension
  } from "../../api/school/index";
  import studentRightForm from "../../components/school/student/studentRight-form";
  import studentFUForm from "../../components/school/student/studentFu-form";
    
export default {
    meta: {
        title: "客户咨询"
    },
    props: {},
    components: {
        studentRightForm,
        studentFUForm
    },
    data() {
        return {
            msg: {
                pageIndex: 1,
                pageSize: 12,
                rowsPerPage: 12,
                StuName: "",
                StuRealMobile:'',
                QQ:'',
                WeChatNo:'',
                StuType:'',//学生类型
                StuGuestState:'',//合同状态
                BelongType:'1',//归属类型(1-全部，2-我负责的，3-我协同的,4 下属) 
                Q_EnrollState:'2',//报名状态 1已报名 2未成交 0不限
                IsQueryMyStu:'1',//是否我协助的 1是 2否
                CreateIds: [],
                 StuStage:'',//客户状态
                 ConsultantId:'',//课程顾问
                 SFTime:'',
                EFTime:'',
                 Q_FType:'1',//跟进类型 1范围内有跟进记录 2范围内没有跟进记录	
                StuChannel:'',//渠道
            },

            loading: false,
            dataList: [], //列表数据
            PageCount:0,
            customTypeList: [], //客户类型
            customState: [],
            isMyStuList:[{Id:'-1',Name:'不限'},{Id:'1',Name:'是'},{Id:'0',Name:'否'},],
            FTypeList:[{Id:'0',Name:'不限'},{Id:'1',Name:'已报名'},{Id:'2',Name:'未成交'},],
            BelongTypeList:[{Id:'1',Name:'全部'},{Id:'2',Name:'我负责的'},{Id:'3',Name:'我协同的'},{Id: 4, Name: "我下属的" }],
            hetongList:[{Id:'1',Name:'正常'},{Id:'2',Name:'退学'},{Id:'5',Name:'停课'},{Id:'7',Name:'毕业'},],
            dateArray: [], //日期数组
             morequery:false,
            CompanyList:[],
            allCourseList: [],//课程
            myCourseList:[],
            RoleListData: [], //课程顾问下拉数据
            StuChannelList: [], //收客渠道
            allStuChannelList: [], //所有收客渠道
            Count:0,
            columns: [{
                name: "StuName",
                label: "学生",
                field: "StuName",
                align: "left"
            },
             {
                name: "EnrollState",
                label: "状态",
                field: "EnrollState",
                align: "left"
            },
            {
                name: "AssistName",
                label: "顾问名称",
                field: "AssistName",
                align: "left"
            },
            {
                name: "StuBirthStr",
                required: true,
                label: "生日",
                align: "left",
                field: row => row.StuBirthStr
            },
            {
                name: "StuRealMobile",
                label: "电话",
                field: "StuRealMobile",
                align: "left"
            },
            {
                name: "StuAddress",
                label: "地址",
                field: "StuAddress",
                align: "left"
            },
            {
                name: "StuChannelName",
                label: "渠道来源",
                field: "StuChannelName",
                align: "left"
            },
           
            // {
            //     name: "CourseName",
            //     label: "报名课程",
            //     field: "CourseName",
            //     align: "left"
            // },
           
                {
                name: "JapanBaseInfo",
                label: "日语基础",
                field: "JapanBaseInfo",
                align: "left"
            },
            {
                name: "PlanPrice",
                label: "规划课程及报价",
                field: "PlanPrice",
                align: "left"
            },
          
            {
                name: "BaseCondition",
                label: "客户情况分析",
                field: "BaseCondition",
                align: "left"
            },
         
          
            {
                name: "FURemark",
                label: "顾问跟进备注",
                field: "FURemark",
                align: "left"
            },
            
            ],
            stuOption: null,
            BelongType: 1,
            isShowStuRight:false,
            isJudgeTrans:1,
            isShowStuFU:false,
            SubordList: [], //我的下属数据
            AllSubordList: []

        }
    },
    created() {
        let userinfo = this.getLocalStorage();
        //这个权限和学员跟踪学员的权限一样
        userinfo.ActionMenuList.map(x=>{//判断权限
          if(x.FunctionCode == "studentTracking_look"){//判断是否有保存的权限
            this.msg.IsQueryMyStu = 2
            return
          }
        })
     },
    mounted() {
        this.getList(); //获取规则
        this.getStuStageList()
        this.getCustomTypeList()
        this.GetSubordList()
        this.getRole()
        this.GetStuChannelList();

    },
    methods: {
        //获取收客渠道
        GetStuChannelList() {
            GetStuChannelList({}).then(res => {
            if (res.Code == 1) {
                this.StuChannelList = res.Data;
                this.allStuChannelList = res.Data;
            }
            });
        },
        //筛选渠道
        filterStuChannel(val, update) {
            update(() => {
            if (val === "") {
                this.StuChannelList = JSON.parse(
                JSON.stringify(this.allStuChannelList)
                );
            } else {
                const needle = val.toLowerCase();
                this.StuChannelList = this.allStuChannelList.filter(
                v => v.Name.toLowerCase().indexOf(needle) > -1
                );
            }
            });
        },
        getRole() {
            queryEmployee({
                IsLeave: 1,
                UserRole: 2
            }).then(res => {
                this.RoleListData = res.Data;
            });
        },
        //获取我下属的下拉数据
        GetSubordList() {
            GetPersonalDimension().then(res => {
                if (res.Code == 1) {
                this.SubordList = res.Data;
                this.AllSubordList = res.Data;
                }
            });
        },
        //筛选转介人
        filterSubord(val, update, abort) {
            update(() => {
                this.SubordList = this.AllSubordList.filter(
                v => v.EmployeeName.indexOf(val) > -1
                );
            });
        },
        resetSearch() {
            this.msg.pageIndex = 1;
            this.getList();
        },
        //翻页
        changePage(val) {
            this.msg.pageIndex = val;
            this.getList()

        },
        getList() {
            this.loading = true;
            let msg = JSON.parse(JSON.stringify(this.msg))
              if (this.dateArray && this.dateArray.length > 0) {
                msg.SFTime = this.dateArray[0];
                msg.EFTime = this.dateArray[1];
            } else {
                msg.SFTime = "";
                msg.EFTime = "";
            }
            if(msg.StuType=='' || msg.StuType==null){
                msg.StuType = 0
            }
            if(msg.StuGuestState=='' || msg.StuGuestState==null){
                msg.StuGuestState = 0
            }
            if(msg.StuChannel=='' || msg.StuChannel==null){
                msg.StuChannel = 0
            }
            
            getStudentConsultPageList(msg).then(res => {
                this.loading = false;             
                this.dataList = res.Data.PageData;
                this.PageCount = res.Data.PageCount;
                this.Count = res.Data.Count
                

            })
            .catch(() => {
                this.loading = false;
            });
          
        },
         //获取客户类型
        getCustomTypeList() {
            GetStudentTypeList().then(res => {
            if (res.Code == 1) {
                this.customTypeList = res.Data;
            }
            })
        },
        //获取客户阶段列表
        getStuStageList() {
            queryStuStageList().then(res => {
                this.customState = res.Data;
            });
        },
        //点击学生姓名弹出
        getStuRight(obj) {
            if (obj) {
                this.stuOption = obj;
                this.BelongType = 3;//点击弹出不让修改
            }
            this.isShowStuRight = true;
        },
        closeStuForm() {
            this.isShowStuRight = false;
            this.isShowStuFU = false
        },
        lookgengduo(obj){//跟进备注
             if (obj) {
                this.stuOption = obj;
                this.BelongType = obj.BelongType;
            }
            this.isShowStuFU = true;

        }
      

    },
}

</script>
<style lang="sass">

@import url('~assets/css/table.sass')

</style>
<style scoped>
  /deep/.el-input__inner,
  /deep/.el-range-input {
    background-color: transparent;
    border: none;
  }
  .w500text{
      min-width: 500px;
      width: 500px;
      white-space:	normal;word-break:break-all
  }
  .w500text div{
      display:flex;
      align-items: flex-start;
  }
  .w500text .w500text-l{
      display: inline-block;
    text-align-last: justify;
      width: 70px;
      color: #666666;;
  }
  .w500text .text-r{
      flex:1
  }
  .roatImg{
      transform: rotate(180deg);
  }
 
</style>
