<template>
  <div class="batchTransfer">
    <q-dialog
      v-model="persistent"
      persistent
      transition-show="scale"
      transition-hide="scale"
      @hide="$emit('close')"
    >
      <q-card style="width: 800px;max-width:800px;">
        <q-card-section class="row items-center q-pb-none">
          <div class="text-h6">批量录入</div>
          <q-space />
          <q-btn icon="close" flat round dense v-close-popup />
        </q-card-section>
        <q-card-section class="row items-center q-pb-none">
          <div class="page-search row items-center">
            <div class="col row wrap q-mr-lg q-col-gutter-md">
              <div class="col-6">
                <q-input
                  @input="resetSearch"
                  clearable
                  filled
                  v-model="msg.StuName"
                  label="昵称"
                  maxlength="20"
                />
              </div>
              <div class="col-6">
                <q-input
                  @input="resetSearch"
                  clearable
                  filled
                  v-model="msg.StuTel"
                  label="电话"
                  maxlength="20"
                />
              </div>
              <div class="col-6">
                <q-select
                  @input="resetSearch"
                  filled
                  v-model="msg.StuStage"
                  :options="customState"
                  option-label="Name"
                  option-value="Id"
                  emit-value
                  map-options
                  label="客户状态"
                  clearable
                />
              </div>
              <div class="col-6">
                <q-field filled>
                  <template v-slot:control>
                    <el-date-picker
                      v-model="dateArray"
                      @change="resetSearch"
                      value-format="yyyy-MM-dd"
                      type="daterange"
                      style="border:none;"
                      range-separator="至"
                      start-placeholder="开始时间"
                      end-placeholder="结束时间"
                      popper-class="popper"
                    />
                  </template>
                </q-field>
              </div>
            </div>
          </div>
        </q-card-section>
        <q-card-section class="q-pt-none scroll">
          <q-table
            :pagination="pageMsg"
            :loading="loading"
            no-data-label="暂无相关数据"
            flat
            selection="multiple"
            :selected.sync="selection"
            class="sticky-right-column-table sticky-tow-column-table"
            separator="none"
            :data="data"
            :columns="columns"
            row-key="StuId"
          >
            <template v-slot:top="props"> </template>
            <template v-slot:body-cell-StuSex="props">
              <q-td :props="props">
                <q-badge
                  :color="props.value == 1 ? 'negative' : 'primary'"
                  :label="props.value == 1 ? '女' : '男'"
                />
              </q-td>
            </template>
            <template v-slot:body-cell-AssistList="props">
              <q-td auto-width :props="props">
                <template v-if="props.row.AssistList">
                  <template v-if="props.row.AssistList.length == 1">
                    {{ props.row.AssistList[0].AssistName }}
                  </template>
                  <template v-if="props.row.AssistList.length > 1">
                    {{ props.row.AssistList[0].AssistName }}：
                    <span class="stulistNum">
                      {{ props.row.AssistList.length }}
                      <q-popup-proxy>
                        <q-banner>
                          <div style="max-height:600px;overflow-y:auto;">
                            <table
                              class="stuListTable"
                              style="border-collapse:collapse;"
                            >
                              <tr>
                                <th>协同人</th>
                              </tr>
                              <tr
                                v-for="(sItem, sIndex) in props.row.AssistList"
                                style="border-bottom:1px dashed #d1d1d1;"
                                :key="sIndex"
                              >
                                <td>{{ sItem.AssistName }}</td>
                              </tr>
                            </table>
                          </div>
                        </q-banner>
                      </q-popup-proxy>
                    </span>
                  </template>
                  <template v-if="props.row.AssistList.length == 0">
                    无
                  </template>
                </template>
              </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>
        </q-card-section>
        <q-card-actions align="right" class="bg-white">
          <q-btn
            label="取消"
            flat
            color="grey-10"
            style="font-weight:400 !important"
            v-close-popup
          />
          <q-btn
            label="保存"
            color="accent q-px-md"
            style="font-weight:400 !important"
            @click="save"
            :disable="selection.length == 0"
          />
        </q-card-actions>
      </q-card>
    </q-dialog>
  </div>
</template>
<script>
import {
  getStudentPage,
  getSchoolDropdown,
  deleteStudent,
  createStudentAccount,
  queryStuStageList
} from "../../../api/school/index";
import { setMyStudentToGuest } from "../../../api/sale/peemanagement";
export default {
  props: {
    OrderId:{
      type:[Number,String],
      default:0
    }
  },
  components: {},
  data() {
    return {
      persistent: true,
      data: [],
      loading: true,
      msg: {
        pageIndex: 1,
        pageSize: 5,
        rowsPerPage: 12,
        StuName: "",
        StuTel: "",
        Status: "-1",
        CreateBy: "",
        IsQueryMyStu: 1,
        StuStage: "", //客户阶段
        StartTime: "", //开始时间
        EndTime: "", //结束时间
        CustomerId: 0,
        BelongType: 2, //归属类型
      },
      dateArray: [], //日期数组
      pageCount: 0,
      //客户阶段状态列表
      customState: [],
      myCustomerList: [], //同行列表
      allCustomerList: [], //所有同行列表
      dateArray: [], //日期数组
      pageCount: 0,
      selection: [],
      pageMsg: {
        rowsPerPage: 12
      },
      columns: [
        {
          name: "StuName",
          required: true,
          label: "昵称",
          align: "left",
          field: row => row.StuName
        },
        {
          name: "StuSex",
          label: "性别",
          field: "StuSex",
          align: "left"
        },
        {
          name: "StuTel",
          label: "电话",
          field: "StuTel",
          align: "left"
        },
        {
          name: "StuStageName",
          label: "客户阶段",
          field: "StuStageName",
          align: "left"
        },
        {
          name: "StuProfession",
          label: "职业",
          field: "StuProfession",
          align: "left"
        },
        {
          name: "StuEducationName",
          label: "学历",
          field: "StuEducationName",
          align: "left"
        },
        {
          name: "StuPurposeName",
          label: "目的",
          field: "StuPurposeName",
          align: "left"
        },
        {
          name: "CreateByName",
          label: "负责人",
          align: "left",
          field: "CreateByName"
        },
        {
          name: "AssistList",
          label: "协同人",
          align: "left",
          field: "AssistList"
        },
        {
          name: "CreateTypeStr",
          label: "客户来源",
          field: "CreateTypeStr",
          align: "left"
        },
        {
          name: "StuSourceIdName",
          label: "来源关联人",
          field: "StuSourceIdName",
          align: "left"
        },
        {
          name: "StuChannelName",
          label: "收客渠道",
          field: "StuChannelName",
          align: "left"
        },
        {
          name: "VisitCount",
          label: "到访次数",
          field: "VisitCount",
          align: "left"
        },
        {
          name: "TrialLessonCount",
          label: "试听次数",
          field: "TrialLessonCount",
          align: "left"
        },
        {
          name: "CreateTimeStr",
          label: "创建时间",
          field: "CreateTimeStr",
          align: "left"
        },
        {
          name: "CustomerName",
          label: "所属同行",
          field: "CustomerName",
          align: "left"
        }
      ],
    };
  },
  created() {
     if (this.$route.query && this.$route.query.CustomerId) {
      this.msg.CustomerId = this.$route.query.CustomerId;
    }else{
      this.msg.QStudentType=1
    }
    this.getSchool();
    this.getStuStageList();
  },
  mounted() {
    this.getStudent();
  },
  methods: {
    //获取客户阶段列表
    getStuStageList() {
      queryStuStageList().then(res => {
        this.customState = res.Data;
      });
    },
    resetSearch() {
      this.msg.pageIndex = 1;
      this.getStudent();
    },
    changePage(val) {
      this.msg.pageIndex = val;
      this.getStudent();
    },
    getSchool() {
      getSchoolDropdown({}).then(res => {
        this.schoolList = res.Data;
      });
    },
    getStudent() {
      if (this.dateArray && this.dateArray.length > 0) {
        this.msg.StartTime = this.dateArray[0];
        this.msg.EndTime = this.dateArray[1];
      } else {
        this.msg.StartTime = "";
        this.msg.EndTime = "";
      }
      this.loading = true;
      getStudentPage(this.msg)
        .then(res => {
          this.loading = false;
          this.data = res.Data.PageData;
          this.pageCount = res.Data.PageCount;
        })
        .catch(() => {
          this.loading = false;
        });
    },
    save() {
      const setMsg={
        OrderId:this.OrderId,
        StuIds:this.selection.map(e=>e.StuId).toString()
      }
      setMyStudentToGuest(setMsg).then(res => {
        if(res.Code==1){
          this.persistent=false
          this.$emit("success")
        }
      });
    }
  }
};
</script>
<style scoped>
/deep/.el-input__inner,
/deep/.el-range-input {
  background-color: transparent;
  border: none;
}
</style>
<style>
.popper {
  z-index: 9999 !important;
}
::-webkit-scrollbar {
  width: 5px;
  height: 5px;
}
::-webkit-scrollbar-track {
  background: #fff;
  border-radius: 2px;
}
::-webkit-scrollbar-thumb {
  background: #444;
  border-radius: 10px;
}
::-webkit-scrollbar-thumb:hover {
  background: #999;
}
::-webkit-scrollbar-corner {
  background: #204754;
}
</style>
