<template>
  <div class="b2bcustomer">
    <div class="full-width flex no-wrap items-center q-mb-sm">
      <q-tabs
        v-model="msg.StuStage"
        active-color="primary"
        dense
        outside-arrows
        align="left"
        style="width:70%"
        @input="getStudent"
      >
        <q-tab
          v-for="(item, index) in stagelist"
          :key="index"
          :name="item.StuStage"
        >
          {{ item.StuStageName }}({{ item.StuNum }})
        </q-tab>
      </q-tabs>
      <q-input
        outlined
        dense
        v-model="msg.StuName"
        label="昵称"
        @input="getStudent"
      />
    </div>
    <q-table
      :pagination="msg"
      :loading="loading"
      no-data-label="暂无相关数据"
      flat
      class="sticky-tow-column-table"
      separator="none"
      :data="list"
      :columns="columns"
      row-key="Id"
    >
      <!-- <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-Status="props">
        <q-td :props="props">
          <q-toggle
            size="md"
            color="primary"
            :false-value="1"
            :true-value="0"
            v-model="props.row.Status"
            title="注意：关闭后，学员将无法正常使用."
            @input="deleteStudentInfo(props.row)"
          />
        </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>
    <stuDetail
      v-if="isShowStuRight"
      :save-obj="stuOption"
      @close="closeStuForm"
    ></stuDetail>
  </div>
</template>

<script>
import { getStudentPage } from "../../../api/school";
import { getCustomerStuStageStatistics } from "../../../api/sale/peemanagement";
import stuDetail from "../../../components/school/student/studentRight-form";
export default {
  components: {
    stuDetail
  },
  props: {
    Id: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {
      loading: false,
      list: [],
      pageCount: 0,
      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: "StuBirthStr",
          label: "出生日期",
          field: "StuBirthStr",
          align: "left"
        },
        {
          name: "StuTel",
          label: "手机号码",
          field: "StuTel",
          align: "left"
        },
        {
          name: "CreateTypeStr",
          label: "客户来源",
          field: "CreateTypeStr",
          align: "left"
        },
        {
          name: "StuStageName",
          label: "客户阶段",
          field: "StuStageName",
          align: "left"
        },
        {
          name: "CreateTimeStr",
          label: "创建时间",
          field: "CreateTimeStr",
          align: "left"
        }
        // {
        //   name: "CreateByName",
        //   label: "负责人",
        //   align: "left",
        //   field: "CreateByName"
        // }
      ],
      msg: {
        pageIndex: 1,
        pageSize: 10,
        rowsPerPage: 10,
        StuName: "",
        StuTel: "",
        Status: "-1",
        School_Id: 0,
        CustomerId: 0,
        StuStage: 0
      },
      stagelist: [],
      stuOption: {},
      isShowStuRight: false
    };
  },
  methods: {
    getStudent() {
      this.msg.CustomerId = this.Id;
      this.loading = true;
      getStudentPage(this.msg)
        .then(res => {
          this.loading = false;
          this.list = res.Data.PageData;
          this.pageCount = res.Data.PageCount;
        })
        .catch(() => {
          this.loading = false;
        });
    },
    getStage() {
      getCustomerStuStageStatistics({ CustomerId: this.Id }).then(res => {
        this.stagelist = res.Data;
        const total = res.Data.reduce((pre, cur) => {
          return cur.StuNum + pre;
        }, 0);
        const obj = {
          StuStage: 0,
          StuStageName: "全部",
          StuNum: total
        };
        this.stagelist.unshift(obj);
      });
    },
    changePage(val) {
      this.msg.pageIndex = val;
      this.getStudent();
    },
    closeStuForm() {
      this.isShowStuRight = false;
    },
    //点击学生姓名弹出
    getStuRight(obj) {
      if (obj) {
        this.stuOption = obj;
      } else {
        this.stuOption = {};
      }
      this.isShowStuRight = true;
    }
  },
  mounted() {
    this.getStudent();
    this.getStage();
  }
};
</script>
<style lang="scss">
.b2bcustomer ::-webkit-scrollbar {
  width: 5px;
  height: 5px;
}
.b2bcustomer ::-webkit-scrollbar-track {
  background: #fff;
  border-radius: 2px;
}
.b2bcustomer ::-webkit-scrollbar-thumb {
  background: #444;
  border-radius: 10px;
}
.b2bcustomer ::-webkit-scrollbar-thumb:hover {
  background: #999;
}
.b2bcustomer ::-webkit-scrollbar-corner {
  background: #204754;
}
</style>
