<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-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>
        <template v-if="morequery">
          <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" v-if="false">
            <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-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>
        </template>
      </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;">
          <q-btn color="accent" class="q-mr-md" size="sm" icon="download" label="下载" v-if="isHaveDownLoad"
            @click="downLoadStudentConsult" />
          <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 {
    EduDownLoad
  } from "../../api/common/common";
  import {
    queryStuStageList,
    GetStudentTypeList,
    GetPersonalDimension
  } from "../../api/school/index";
  import studentRightForm from "../../components/school/student/studentRight-form";
  import studentFUForm from "../../components/school/student/studentFu-form";
  import {
    mapState
  } from "vuex";

  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: true,
        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: "StuTel",
            label: "电话",
            field: "StuTel",
            align: "left"
          },
          {
            name: "StuAddress",
            label: "地址",
            field: "StuAddress",
            align: "left"
          },
          {
            name: "StuChannelName",
            label: "渠道来源",
            field: "StuChannelName",
            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
        }
      })
    },
    computed: mapState({
      //是否有下载权限
      isHaveDownLoad(state) {
        if (state.user.userInfo && state.user.userInfo.ActionMenuList && state.user.userInfo.ActionMenuList.length >
          0) {
          let action = state.user.userInfo.ActionMenuList.find(x => {
            if (x.FunctionCode == "guestConsult_download") {
              return x;
            }
          });
          return action && action.FunctionCode;
        }
        return false;
      }
    }),

    mounted() {
      this.getList(); //获取规则
      this.getStuStageList()
      this.getCustomTypeList()
      this.GetSubordList()
      this.getRole()
      this.GetStuChannelList();
    },
    methods: {
      //下载客人咨询
      downLoadStudentConsult() {
        var msg = JSON.parse(JSON.stringify(this.msg));
        this.loading = true;
        EduDownLoad(
          "/StudentStat/DownLoadStudentConsult",
          msg,
          "客人咨询.xls", res => {
            this.loading = false;
          }
        );
      },
      //获取收客渠道
      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>