<style lang="scss">
  .stuList .q-table__bottom {
    min-height: 0;
  }
  .stulistNum {
    display: inline-block;
    width: 25px;
    height: 25px;
    text-align: center;
    line-height: 23px;
    border: 1px solid #2961FE;
    border-radius: 50%;
    cursor: pointer;
    color: #2961FE;
  }
  .stuListTable {
    width: 200px;
    text-align: center;
  }

  .stuListTable tr td {
    height: 40px;
  }

  .stuListTable tr th {
    height: 40px;
    background-color: rgb(238, 238, 239);
  }
</style>
<template>
  <div class="stuList">
    <q-table :pagination="pageMsg" :loading="loading" no-data-label="暂无相关数据" flat selection="single"
      :selected.sync="selection" class="sticky-right-column-table sticky-tow-column-table" separator="none"
      :data="dataList" :columns="columns" row-key="StuId" hide-bottom>
      <template v-slot:top>
        <div class="col-2 q-table__title">学员信息</div>
        <q-space />
        <div class="page-option">
          <q-btn color="accent" class="q-mr-md" size="sm" icon="swap_horiz" label="转订单" :disable="selection.length===0"
            @click="transferOrder" />
          <q-btn color="accent" class="q-mr-md" size="sm" icon="add" label="新增学员" @click="EditStudent(null)" />
        </div>
      </template>
      <template v-slot:body-cell-StuIcon="props">
        <q-td auto-width :props="props">
          <q-avatar size="md" v-if="props.value">
            <img :src="props.value" />
          </q-avatar>
          <q-avatar size="md" color="teal-10" text-color="white" v-if="!props.value">
            {{ props.row.StuName.substring(0, 1) }}</q-avatar>
        </q-td>
      </template>
      <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-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>
                          <th>协同人</th>
                        </tr>
                        <tr v-for="(sItem,sIndex) in props.row.AssistList" style="border-bottom:1px dashed #d1d1d1;" :key="sIndex">
                          <td>{{sItem.AssistTypeName}}</td>
                          <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>

    </q-table>
    <student-form v-if="isShowStuForm" :save-obj="stuOption" @close="closeStuForm" @success="refreshStuList">
    </student-form>
    <studentRight-form v-if="isShowStuRight" :isJudgeTrans="isJudgeTrans" :BelongType="BelongType" :save-obj="stuOption" @close="closeStuForm" @success="refreshStuList">
    </studentRight-form>
    <studentAdd-form v-if="isShowAdd" :save-obj="stuOption" @close="closeStuForm" @success="refreshStuList">
    </studentAdd-form>
    <transfer-order v-if="isShowTransfer" :select="selection" @close="closeStuForm" @success="refreshStuList">
    </transfer-order>
  </div>
</template>
<script>
  import studentForm from "./student-form";
  import studentRightForm from "./studentRight-form";
  import studentAddForm from "./studentAdd-form";
  import transferOrder from "./transfer-order"
  export default {
    props: {
      dataList: {
        type: Array,
        default: null
      },
      isJudgeTrans:{
        type: Number,
        default: null
      },
      BelongType:{
        type: Number,
        default: null
      }
    },
    components: {
      studentForm,
      studentRightForm,
      studentAddForm,
      transferOrder
    },
    data() {
      return {
        columns: [{
            name: "StuIcon",
            label: "",
            field: "StuIcon",
            align: "left"
          },
          {
            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: "QQ",
            label: "QQ",
            field: "QQ",
            align: "left"
          },
          {
            name: "WeChatNo",
            label: "微信",
            field: "WeChatNo",
            align: "left"
          },
          {
            name: "StuTypeName",
            label: "客户类型",
            field: "StuTypeName",
            align: "left"
          },
          {
            name: "StuStageName",
            label: "客户阶段",
            field: "StuStageName",
            align: "left"
          },
          {
            name: "StuNeedsName",
            label: "客户需求",
            field: "StuNeedsName",
            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"
          }
        ],
        pageMsg: {
          rowsPerPage: 12
        },
        loading: false,
        isShowStuForm: false,
        resetLoading: false,
        isShowStuRight: false,
        stuOption: null,
        isShowAdd: false,
        selection: [],
        isShowTransfer: false
      };
    },
    watch:{
      dataList:{
        handler(val){
          this.selection=[];
        },
        deep:true
      }
    },
    created() {
      this.initAuth();
      
    },
    mounted() {},
    methods: {
      //初始化权限
      initAuth() {},
      //创建账号
      createAccount(id) {
        let that = this;
        createStudentAccount({
          StuId: id
        }).then(res => {
          that.$q
            .dialog({
              title: "创建账号",
              message: res.Message,
              persistent: true,
              ok: {
                label: "确认",
                flat: true,
                focus: true
              }
            })
            .onOk(() => {
              that.getStudent();
            })
            .onCancel(() => {
              that.getStudent();
            });
        });
      },
      resetPw(id) {
        let that = this;
        this.$q
          .dialog({
            title: "重置密码",
            message: "你正在进行重置密码行为，是否确认执行",
            persistent: true,
            cancel: {
              label: "取消",
              flat: true
            },
            ok: {
              label: "确认重置",
              flat: true,
              focus: true
            }
          })
          .onOk(() => {
            that.resetLoading = true;
            resetPassword({
                AccountType: 4,
                AccountId: id
              })
              .then(res => {
                that.resetLoading = false;
                that.$q.dialog({
                  title: "密码重置成功",
                  message: res.Message,
                  persistent: true,
                  ok: {
                    label: "确认",
                    flat: true,
                    focus: true
                  }
                });
              })
              .catch(() => {
                that.resetLoading = false;
              });
          });
      },
      //删除客户资料
      deleteStudentInfo(obj) {
        let that = this;
        var str = obj.Status == 1 ? "【禁用】" : "【启用】";
        this.$q
          .dialog({
            title: str + "学员",
            message: "你正在进行" + str + "学员行为，一旦执行无法找回，是否确认执行？",
            persistent: true,
            cancel: {
              label: "取消",
              flat: true
            },
            ok: {
              label: "确认",
              flat: true,
              focus: true
            }
          })
          .onOk(() => {
            that.resetLoading = true;
            deleteStudent({
              StuId: obj.StuId,
              Status: obj.Status
            }).then(res => {
              this.$q.notify({
                icon: "iconfont icon-chenggong",
                color: "accent",
                timeout: 2000,
                message: "数据操作成功！",
                position: "top"
              });
              this.getStudent();
            });
          })
          .onCancel(() => {
            obj.Status = obj.Status == 1 ? 0 : 1;
          });
      },
      refreshStuList() {
        this.$emit("success");
        this.selection = []
      },
      EditStudent(obj) {
        if (obj) {
          this.stuOption = obj;
        } else {
          this.stuOption = null;
        }
        this.isShowAdd = true;
      },
      closeStuForm() {
        this.isShowStuForm = false;
        this.isShowStuRight = false;
        this.isShowAdd = false;
        this.isShowTransfer = false;
      },
      //点击学生姓名弹出
      getStuRight(obj) {
        if (obj) {
          this.stuOption = obj;
        } else {
          this.stuOption = null;
        }
        this.isShowStuRight = true;
      },
      transferOrder() {
        const firstId = this.selection[0].CustomerId
        const flag = this.selection.every(e => {
          return e.CustomerId == firstId
        })
        if (!flag) {
          this.$q.notify({
            type: 'negative',
            position: "top",
            message: `所属同行不一致，请重新选择`
          })
          return
        }
        this.isShowTransfer = true
      }
    }
  };

</script>
