<template>
  <div class="page-body">

    <div class="page-content">
      <q-table :pagination="msg" :loading="loading" no-data-label="暂无相关数据" flat class="sticky-tow-column-table"
               separator="none" :data="data" :columns="columns" row-key="name">
        <template v-slot:top="props">
          <div class="col-2 q-table__title" @click="goreturn">返回</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: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">
          <div class="row wrap">
            <q-input clearable filled class="col-6 q-pb-lg q-pr-lg" standout="bg-primary text-white" v-model="addMsg.GuestName" label="姓名" :rules="[val => !!val || '姓名']"/>
            <q-input clearable filled class="col-6 q-pb-lg q-pr-lg" standout="bg-primary text-white" v-model="addMsg.Profession" 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" standout="bg-primary text-white" v-model="addMsg.Age" label="年龄" :rules="[val => !!val || '年龄']"/>
            <q-input clearable filled class="col-6 q-pb-lg q-pr-lg" standout="bg-primary text-white" v-model="addMsg.Mobile" label="电话" :rules="[val => !!val || '电话']" type="number"/>
            <q-select class="col-6 q-pb-lg q-pr-lg" standout="bg-primary text-white" option-value="Name" 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 q-pr-lg" standout="bg-primary text-white" option-value="Id" 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" standout="bg-primary text-white" option-value="Id" option-label="Name"
                      v-model="addMsg.LearningGoals" :options="GLList" emit-value map-options label="学习目的" />
            <q-select class="col-6 q-pb-lg q-pr-lg" standout="bg-primary text-white" option-value="Id" option-label="Name"
                      v-model="addMsg.GuestSource" :options="OFList" emit-value map-options label="客人来源" />

          </div>
        </q-card-section>
        <div class="text-caption q-mb-lg q-px-md text-grey-6">附加信息</div>
        <q-card-section>
          <div class="row wrap">
            <q-input clearable filled class="col-6 q-pb-lg q-pr-lg" standout="bg-primary text-white" v-model="addMsg.Contact" label="重要联系人" />
            <q-input clearable filled class="col-6 q-pb-lg q-pr-lg" standout="bg-primary text-white" v-model="addMsg.ContactMobile" label="重要联系电话" />
          </div>
        </q-card-section>
        <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,//删除
  } from '../../api/sale/sale'
  export default {
    data() {
      return {
        currentUrl: "",
        columns: [{
          name: 'GuestName',
          label: '名称',
          field: 'GuestName',
          align: 'left'
        },
          {
            name: 'Profession',
            field: 'Profession',
            required: true,
            label: '职业',
            align: 'left',

          },
          {
            name: 'Sex',
            label: '性别',

            align: 'left'
          },
          {
            name: 'Age',
            label: '年龄',
            field: 'Age',
            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: 'optioned',
            label: '操作',

          }
        ],
        data: [],
        loading: true,
        msg: {
          pageIndex: 1,
          pageSize: 12,
          rowsPerPage:12,
          OrderId: 0,
          ClassId: 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:'',//紧急联系电话
        },
        GBList:[],
        GEList:[],
        GLList:[],
        OFList:[],

        isShowBtn:true //默认显示新增名单
      }
    },
    mounted() {
      if(this.$route.query){
        this.msg.OrderId =this.$route.query.OrderId;
        this.addMsg.OrderId =this.$route.query.OrderId;
        this.msg.ClassId =this.$route.query.ClassId
        if(this.$route.query.isShow==1){
          this.isShowBtn = true;
        }else{
          this.isShowBtn=false
        }
      }
      this.getRolelist();
      this.getGuestBasics()//日语基础枚举
      this.getGuestEducation()//学历枚举
      this.getGuestLearning()//获取学习目的 枚举
      this.getOrderForm()
    },
    methods: {
      getGuestBasics(){
        getGuestBasicsEnumList({}).then(res => {
          if(res.Code==1){
            this.GBList = res.Data
          }
        }).catch(() => {
        })
      },
      getGuestEducation(){
        getGuestEducationEnumList({}).then(res => {
          if(res.Code==1){
            this.GEList = res.Data;

          }
        }).catch(() => {
        })
      },
      getGuestLearning(){
        getGuestLearningGoalsEnumList({}).then(res => {
          if(res.Code==1){
            this.GLList = res.Data;
            this.addMsg.LearningGoals = this.GLList[0].Id
          }
        }).catch(() => {
        })
      },
      getOrderForm(){
        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.getRolelist();
      },
      //翻页
      changePage(val) {
        this.msg.pageIndex = val;
        this.getRolelist()
      },
      getRolelist() {
        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(){
        if(this.addMsg.Basics==''){
          this.$q.notify({
            type: 'negative',
            position: "top",
            message: `请选择语言基础`
          })
          return;
        }
        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:'',//紧急联系电话
        }
      },
      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.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.getRolelist()
            }
          })
        }).onCancel(() => {

        });

      }




    }
  }

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

</style>
