<template>
  <div class="page-body">
    <div class="page-content">
      <q-table :pagination="msg" :loading="loading" no-data-label="暂无相关数据" flat
        class="stickycreatInsertStr-column-table" separator="none" :data="data" :columns="columns" row-key="name"
        :visible-columns="visibleColumns">
        <template v-slot:top="props">
          <div class="col-2 q-table__title" @click="goreturn" style="cursor:pointer">返回</div>
          <q-space />
          <div class="page-option">
            <q-btn color="accent" size="sm" v-if="isShowBtn" icon="add" label="新增名单" @click="addxue" />
          </div>
        </template>
        <template v-slot:body-cell-Sex="props">
          <q-td :props="props">
            <span>{{props.row.Sex==1?'男':'女'}}</span>
          </q-td>
        </template>
        <template v-slot:body-cell-CourseName="props">
          <q-td :props="props">
            <span>{{props.row.CourseName}}
              <div style="color:red;" v-if="props.row.IsChaBan==1">
                插班报入
                <q-tooltip :offset="[10, 10]">
                                开始课时:{{props.row.StartClassHours}}<br  />
                                课程: {{props.row.CourseName}}<br  />
                                生效日期: {{props.row.EffectTime}}<br  />
                                生效状态: {{props.row.EffectStatusStr}}<br  />
                                <template v-if="props.row.UpOrderId&&props.row.UpOrderId>0">
                                    前置订单: {{props.row.UpOrderId}}<br  />
                                  </template>
                              </q-tooltip>
              </div>
            </span>
          </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>
        <template v-slot:body-cell-optioned="props" v-if="isShowBtn">
          <q-td :props="props">
            <q-btn flat size="xs" icon="edit" color="accent" style="font-weight:400" label="编辑"
              @click="EditRole(props.row)" />
            <q-btn flat size="xs" icon="iconfont icon-shanchu" color="negative" style="font-weight:400" class="q-mr-xs"
              label="删除" @click="deleteUser(props.row)" />
          </q-td>
        </template>
      </q-table>
    </div>
    <q-dialog v-model="persistent" content-class="bg-grey-1" persistent transition-show="scale" transition-hide="scale">
      <q-card style="width: 800px;max-width:900px;">
        <q-card-section>
          <div class="text-h6">{{addMsg.Id==0?'新增学员':'修改学员'}}</div>
        </q-card-section>
        <div class="text-caption q-mb-lg q-px-md text-grey-6">基础信息</div>
        <q-card-section class="q-pt-none" v-if="msg.ClassId>0">
          <div class="row wrap">
            <q-input clearable filled class="col-6 q-pb-lg q-pr-lg" v-model="addMsg.GuestName" ref="GuestName"
              label="姓名" :rules="[val => !!val || '姓名']" />
            <div class="col-6 q-pb-lg q-pr-lg">
              <q-radio v-model="addMsg.Sex" val="1" label="男" />
              <q-radio v-model="addMsg.Sex" val="2" label="女" />
            </div>
            <q-input clearable filled class="col-6 q-pb-lg q-pr-lg" v-model="addMsg.Profession" label="职业"
              :rules="[val => !!val || '职业']" />
            <q-input filled v-model="addMsg.BirthDate" :rules="[val => !!val || '请选择出生日期']" class="col-6 q-pb-lg"
              ref="BirthDate" mask="date" label="出生日期">
              <template v-slot:append>
                <q-icon name="event" class="cursor-pointer">
                  <q-popup-proxy ref="qDateProxy3" transition-show="scale" transition-hide="scale">
                    <q-date v-model="addMsg.BirthDate" @input="() => $refs.qDateProxy3.hide()" />
                  </q-popup-proxy>
                </q-icon>
              </template>
            </q-input>

            <q-input clearable filled class="col-6 q-pb-lg q-pr-lg" maxlength="5" disable v-model="addMsg.TotalHours"
              label="总课时" :rules="[val => !!val || '请填写总课时']" @keyup.native="checkInteger(addMsg,'TotalHours')" />
            <q-input clearable filled class="col-6 q-pb-lg" ref="Mobile" maxlength="20" v-model="addMsg.Mobile"
              label="电话" :rules="[val => !!val || '电话']" />
            <q-select class="col-6 q-pb-lg q-pr-lg" option-value="Name" ref="Basics" standout="bg-primary text-white"
              option-label="Name" v-model="addMsg.Basics" :options="GBList" emit-value map-options label="语言基础"
              use-input new-value-mode="add-unique" hint="自己输入语言基础的话，输入之后按回车！" />
            <q-select class="col-6 q-pb-lg" option-value="Id" standout="bg-primary text-white" option-label="Name"
              v-model="addMsg.Education" :options="GEList" emit-value map-options label="最高学历" />
            <q-select class="col-6 q-pb-lg q-pr-lg" option-value="Id" standout="bg-primary text-white"
              option-label="Name" v-model="addMsg.LearningGoals" :options="GLList" emit-value map-options
              label="学习目的" />
            <q-select class="col-6 q-pb-lg" standout="bg-primary text-white" option-value="Id" option-label="Name"
              v-model="addMsg.GuestSource" :options="OFList" emit-value map-options label="客人来源" />
            <q-input clearable filled class="col-6 q-pb-lg q-pr-lg" v-model="addMsg.ContactAddress" label="现居住地址" />
            <div class="col-6 q-pr-lg q-pb-lg">
              <q-uploader
                style="min-height:268px;max-width: 300px; background-repeat:no-repeat;background-position: 50% 50%;background-size: cover;"
                :style="{'background-image':'url(' + addMsg.StuIcon + ')'}" max-files="1" hide-upload-btn
                @rejected="onRejected" label="学生头像" :max-file-size="5*1024*1024" accept=".jpg, image/*" auto-upload
                :factory="uploadFile" no-thumbnails>
              </q-uploader>
            </div>
          </div>
        </q-card-section>
        <q-card-section class="q-pt-none" v-if="msg.SourceId>0">
          <div class="row wrap">
            <q-input clearable filled class="col-6 q-pb-lg q-pr-lg" v-model="addMsg.GuestName" ref="GuestName"
              label="姓名" :rules="[val => !!val || '姓名']" />
            <div class="col-6 q-pb-lg">
              <q-radio v-model="addMsg.Sex" val="1" label="男" />
              <q-radio v-model="addMsg.Sex" val="2" label="女" />
            </div>
            <q-input filled v-model="addMsg.BirthDate" :rules="[val => !!val || '请选择出生日期']"
              class="col-6 q-pb-lg q-pr-lg" ref="BirthDate" mask="date" label="出生日期">
              <template v-slot:append>
                <q-icon name="event" class="cursor-pointer">
                  <q-popup-proxy ref="qDateProxy3" transition-show="scale" transition-hide="scale">
                    <q-date v-model="addMsg.BirthDate" @input="() => $refs.qDateProxy3.hide()" />
                  </q-popup-proxy>
                </q-icon>
              </template>
            </q-input>
            <q-input clearable filled class="col-6 q-pb-lg" maxlength="20" v-model="addMsg.Mobile" ref="Mobile"
              label="电话" :rules="[val => !!val || '电话']" />
            <q-select class="col-6 q-pb-lg q-pr-lg" option-value="Name" filled :rules="[val => !!val || '请选择日语水平']"
              ref="Basics" standout="bg-primary text-white" option-label="Name" v-model="addMsg.Basics"
              :options="GBList" emit-value map-options label="日语水平" use-input new-value-mode="add-unique"
              hint="自己输入日语水平的话，输入之后按回车！" />
            <q-input clearable filled class="col-6 q-pb-lg" v-model="addMsg.GraduatedSchool" label="毕业院校" />
            <q-input clearable filled class="col-6 q-pb-lg q-pr-lg" v-model="addMsg.GraduatedMajor" label="毕业专业" />
            <q-input clearable filled class="col-6 q-pb-lg" v-model="addMsg.VolunteerMajor" label="志愿专业" />
            <q-input clearable filled class="col-6 q-pb-lg q-pr-lg" v-model="addMsg.Price" label="价格"
              @keyup.native="checkPrice(addMsg,'Price')" />
            <div class="col-6 q-pr-lg q-pb-lg">
              <q-uploader style="display: inline-block;height: 150px;max-width: 100%; background-repeat:no-repeat"
                :style="{'background-image':'url(' + addMsg.StuIcon + ')'}" max-files="1" hide-upload-btn
                @rejected="onRejected" label="学生头像" :max-file-size="5*1024*1024" accept=".jpg, image/*" auto-upload
                :factory="uploadFile" no-thumbnails>
              </q-uploader>
            </div>
          </div>
        </q-card-section>
        <div class="text-caption q-mb-lg q-px-md text-grey-6" v-if="msg.ClassId>0">附加信息</div>
        <div class="row wrap" style="margin:0 20px;" v-if="msg.ClassId>0">
          <q-input clearable filled class="col-6 q-pb-lg q-pr-lg" v-model="addMsg.IDCard" label="身份证" />
          <q-input clearable filled class="col-6 q-pb-lg" v-model="addMsg.Domicile" label="身份证居住地" />
        </div>
        <div class="row wrap" style="margin:0 20px;" v-if="msg.ClassId>0">
          <q-input clearable filled class="col-6 q-pb-lg q-pr-lg" v-model="addMsg.Contact" label="重要联系人" />
          <q-input clearable filled class="col-6 q-pb-lg" v-model="addMsg.ContactMobile" label="重要联系电话" />
        </div>
        <div class="text-caption q-mb-lg q-px-md text-grey-6" v-if="msg.SourceId>0">备注信息</div>
        <div class="row wrap" style="margin:0 20px;" v-if="msg.SourceId>0">
          <q-input filled stack-label :dense="false" v-model="addMsg.StudyRemark" type="textarea" class="col-12"
            label="备注" maxlength="300" />
        </div>
        <q-separator />
        <q-card-actions align="right" class="bg-white">
          <q-btn label="取消" flat color="grey-10" style="font-weight:400 !important" @click="closeSaveForm" />
          <q-btn label="保存" color="accent q-px-md" style="font-weight:400 !important" :loading="saveLoading"
            @click="save_t()" />
        </q-card-actions>
      </q-card>
    </q-dialog>
  </div>
</template>

<script>
  import {
    getOrderGuestPageList,
    getGuestBasicsEnumList, //日语基础枚举
    getGuestEducationEnumList, //学历枚举
    getGuestLearningGoalsEnumList, //获取学习目的 枚举
    getOrderSourceEnumList, //来源枚举
    setOrderGuestInfo, //保存
    delOrderGuestInfo, //删除
    GetSelectClassOrderList,
  } from '../../api/sale/sale'
  import {
    UploadSelfFile,
  } from '../../api/common/common'

  export default {
    data() {
      return {
        currentUrl: "",
        columns: [{
            name: 'GuestName',
            label: '姓名',
            required: true,
            field: 'GuestName',
            align: 'left'
          },
          {
            name: 'Profession',
            field: 'Profession',
            label: '职业',
            align: 'left',
          },
          {
            name: 'Sex',
            label: '性别',
            align: 'left'
          },
          {
            name: 'BirthDate',
            label: '出生日期',
            field: 'BirthDate',
            align: 'left'
          },
          {
            name: 'CourseName',
            label: '课程名称',
            field: 'CourseName',
            align: 'left'
          },
          {
            name: 'TotalHours',
            label: '总课时',
            field: 'TotalHours',
            align: 'left'
          },
          {
            name: 'Mobile',
            label: '电话',
            field: 'Mobile',
            align: 'left'
          },
          {
            name: 'Basics',
            label: '日语基础',
            field: 'Basics',
            align: 'left'
          },
          {
            name: 'GuestSourceName',
            label: '客户来源',
            field: 'GuestSourceName',
            align: 'left'
          },
          {
            name: 'LearningGoalsName',
            label: '学日语目的',
            field: 'LearningGoalsName',
            align: 'left'
          },
          {
            name: 'Contact',
            label: '重要联系人',
            field: 'Contact',
            align: 'left'
          },
          {
            name: 'ContactMobile',
            label: '重要联系电话',
            field: 'ContactMobile',
            align: 'left'
          },
          {
            name: 'GraduatedSchool',
            label: '毕业院校',
            field: 'GraduatedSchool',
            align: 'left'
          },
          {
            name: 'GraduatedMajor',
            label: '毕业专业',
            field: 'GraduatedMajor',
            align: 'left'
          },
          {
            name: 'VolunteerMajor',
            label: '志愿专业',
            field: 'VolunteerMajor',
            align: 'left'
          },
          {
            name: 'Price',
            label: '价格',
            field: 'Price',
            align: 'left'
          },
          {
            name: 'optioned',
            label: '操作',
          }
        ],
        data: [],
        loading: true,
        msg: {
          pageIndex: 1,
          pageSize: 12,
          rowsPerPage: 12,
          OrderId: 0, //订单编号
          ClassId: 0, //班级编号
          SourceId: 0, //留学就业编号
          GuestName: '',
          GuestState: 0,
        },
        pageCount: 0,
        persistent: false,
        saveLoading: false,
        addMsg: {
          Id: 0,
          OrderId: 0,
          GuestName: '',
          Profession: '',
          Sex: '1',
          Age: 0,
          Mobile: '',
          Basics: '',
          Education: '', //学历
          GuestSource: '', //来源
          LearningGoals: "", //	学习目的
          Contact: '', //紧急联系人
          ContactMobile: '', //紧急联系电话
          IDCard: '', //身份证
          Domicile: '', //身份证居住地
          ContactAddress: '', //联系地址
          SourceId: 0, //留学就业编号
          GraduatedSchool: "", //毕业院校
          GraduatedMajor: "", //毕业专业
          VolunteerMajor: "", //志愿专业
          Price: 0, //价格
          StudyRemark: "", //留学就业备注
          BirthDate: "", //出生日期
          TotalHours: 0, //总课时
          StuIcon: '' //头像
        },
        GBList: [], //日语基础列表
        GEList: [], //学历列表
        GLList: [], //学习目的列表
        OFList: [], //客人来源列表
        isShowBtn: true, //默认显示新增名单
        CourseClassHourse: 0, //课时
        //表格可见列
        visibleColumns: [

        ], //可见列
      }
    },
    created() {
      if (this.$route.query && this.$route.query.OrderId) {
        this.msg.OrderId = this.$route.query.OrderId;
        this.addMsg.OrderId = this.$route.query.OrderId;
      }
      if (this.$route.query && this.$route.query.ClassId) {
        this.msg.ClassId = this.$route.query.ClassId;
      }
      if (this.$route.query && this.$route.query.SourceId) {
        this.msg.SourceId = this.$route.query.SourceId;
        this.addMsg.SourceId = this.$route.query.SourceId;
      }
      if (this.$route.query && this.$route.query.isShow == 1) {
        this.isShowBtn = true;
      } else {
        this.isShowBtn = false;
      }
      if (this.msg.ClassId > 0) {
        this.visibleColumns = ['GuestName', 'Profession', 'Sex', 'BirthDate', 'Mobile', 'Basics', 'GuestSourceName',
          'LearningGoalsName', 'Contact', 'ContactMobile', 'TotalHours', 'StartClassHours', 'CourseName', 'IsChaBan'
        ];
      }
      if (this.msg.SourceId > 0) {
        this.visibleColumns = ['GuestName', 'Sex', 'BirthDate', 'Mobile', 'Basics', 'GraduatedSchool', 'GraduatedMajor',
          'VolunteerMajor', 'Price'
        ];
      }
      this.visibleColumns.push('optioned');
      this.getOrderInfo();
      this.getGuestBasics()
      this.getGuestEducation()
      this.getGuestLearning()
      this.getGuestSource();
    },
    mounted() {
      this.getGuestPage();
    },
    methods: {
      getOrderInfo() {
        var qMsg = {
          ClassId: this.msg.ClassId,
          OrderId: this.msg.OrderId
        }
        GetSelectClassOrderList(qMsg).then(res => {
          if (res.Code == 1) {
            var tempData = res.Data;
            if (tempData && tempData.length == 1) {
              this.CourseClassHourse = tempData[0].ClassHours - tempData[0].StartClassHours
            }
          }
        })
      },
      //日语基础枚举
      getGuestBasics() {
        getGuestBasicsEnumList({}).then(res => {
          if (res.Code == 1) {
            this.GBList = res.Data
          }
        });
      },
      //学历枚举
      getGuestEducation() {
        getGuestEducationEnumList({}).then(res => {
          if (res.Code == 1) {
            this.GEList = res.Data;
          }
        });
      },
      //获取学习目的枚举
      getGuestLearning() {
        getGuestLearningGoalsEnumList({}).then(res => {
          if (res.Code == 1) {
            this.GLList = res.Data;
            this.addMsg.LearningGoals = this.GLList[0].Id
          }
        });
      },
      //获取客人来源枚举
      getGuestSource() {
        getOrderSourceEnumList({}).then(res => {
          if (res.Code == 1) {
            this.OFList = res.Data
            this.addMsg.GuestSource = this.OFList[0].Id
          }
        }).catch(() => {})
      },
      //重新查询
      resetSearch() {
        this.msg.pageIndex = 1;
        this.getGuestPage();
      },
      //翻页
      changePage(val) {
        this.msg.pageIndex = val;
        this.getGuestPage()
      },
      //获取学员名单
      getGuestPage() {
        this.loading = true;
        getOrderGuestPageList(this.msg).then(res => {
          this.loading = false
          this.data = res.Data.PageData
          this.pageCount = res.Data.PageCount
        }).catch(() => {
          this.loading = false
        })
      },
      //返回
      goreturn() {
        this.$router.go(-1)
      },
      //关闭弹窗
      closeSaveForm() {
        this.persistent = false
      },
      //新增修改学员信息
      save_t() {
        this.$refs.GuestName.validate();
        this.$refs.Basics.validate();
        this.$refs.BirthDate.validate();
        this.$refs.Mobile.validate();
        if (!this.$refs.GuestName.hasError && !this.$refs.Basics.hasError && !this.$refs.BirthDate.hasError && !this
          .$refs.Mobile.hasError
        ) {
          if (this.msg.ClassId > 0) {
            if (this.addMsg.Education == '') {
              this.$q.notify({
                type: 'negative',
                position: "top",
                message: `请选择学历`
              })
              return;
            }
          }
          this.saveLoading = true
          setOrderGuestInfo(this.addMsg).then(res => {
            if (res.Code == 1) {
              this.$q.notify({
                icon: 'iconfont icon-chenggong',
                color: 'accent',
                timeout: 2000,
                message: '保存成功！',
                position: 'top'
              })
              this.saveLoading = false;
              this.persistent = false;
              this.resetSearch()
              this.initialize()
            }
          }).catch(() => {
            this.saveLoading = false
          })
        }
      },
      //初始化数据
      initialize() {
        this.addMsg = {
          Id: 0,
          OrderId: this.$route.query.OrderId,
          GuestName: '',
          Profession: '',
          Sex: '1',
          Age: 0,
          Mobile: '',
          Basics: '',
          Education: '', //学历
          GuestSource: this.OFList[0].Id, //来源
          LearningGoals: this.GLList[0].Id, //	学习目的
          Contact: '', //紧急联系人
          ContactMobile: '', //紧急联系电话
          IDCard: '', //身份证
          Domicile: '', //身份证居住地
          ContactAddress: '', //联系地址
          SourceId: this.$route.query.SourceId,
          GraduatedSchool: "", //毕业院校
          GraduatedMajor: "", //毕业专业
          VolunteerMajor: "", //志愿专业
          Price: 0, //价格
          StudyRemark: "", //留学就业备注
          TotalHours:this.CourseClassHourse,
        }
      },
      //新增学员弹窗
      addxue() {
        this.persistent = true;
        this.initialize();
      },
      //修改学员信息
      EditRole(item) {
        this.addMsg.Id = item.Id
        this.addMsg.GuestName = item.GuestName
        this.addMsg.Profession = item.Profession
        this.addMsg.Sex = item.Sex.toString()
        this.addMsg.Age = item.Age
        this.addMsg.Mobile = item.Mobile
        this.addMsg.Basics = item.Basics
        this.addMsg.Education = item.Education
        this.addMsg.GuestSource = item.GuestSource
        this.addMsg.LearningGoals = item.LearningGoals
        this.addMsg.Contact = item.Contact
        this.addMsg.ContactMobile = item.ContactMobile;
        this.addMsg.IDCard = item.IDCard;
        this.addMsg.Domicile = item.Domicile;
        this.addMsg.ContactAddress = item.ContactAddress;
        this.addMsg.SourceId = this.$route.query.SourceId;
        this.addMsg.GraduatedSchool = item.GraduatedSchool;
        this.addMsg.GraduatedMajor = item.GraduatedMajor;
        this.addMsg.VolunteerMajor = item.VolunteerMajor;
        this.addMsg.Price = item.Price;
        this.addMsg.StudyRemark = item.StudyRemark;
        if (item.BirthDate) {
          this.addMsg.BirthDate = item.BirthDate;
        }
        this.addMsg.TotalHours = item.TotalHours;
        this.addMsg.StuIcon = item.StuIcon;
        this.persistent = true;
      },
      //删除学员
      deleteUser(item) {
        let that = this
        this.$q.dialog({
          title: '提示信息',
          message: '是否删除此学员！',
          cancel: true,
          persistent: true,
          ok: "确定",
          cancel: "取消",
        }).onOk(() => {
          delOrderGuestInfo({
            GuestId: item.Id
          }).then(res => {
            if (res.Code == 1) {
              that.$q.notify({
                icon: 'iconfont icon-chenggong',
                color: 'accent',
                timeout: 2000,
                message: '操作成功',
                position: 'top'
              })
              that.getGuestPage();
            }
          })
        }).onCancel(() => {});
      },
      onRejected(rejectedEntries) {
        this.$q.notify({
          type: 'negative',
          position: "top",
          message: `文件验证失败，请重新上传`
        })
      },
      uploadFile(files) {
        UploadSelfFile('studentIcon', files[0], res => {
          if (res.Code == 1) {
            this.addMsg.StuIcon = res.FileUrl;
          }
        })
      },
    }
  }

</script>
<style lang="sass">
  @import url('~assets/css/table.sass')

</style>
