<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" icon="add" label="新增名单" @click="persistent=true" />
          </div>
        </template>
        <template v-slot:body-cell-Status="props">
          <q-td :props="props">
            <q-toggle size="sm" color="secondary" :false-value="1" :true-value="0" v-model="props.row.Status"
                      title="注意：关闭后，分类将无法正常使用." @input="DeleteRole(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>
        <template v-slot:body-cell-optioned="props">
          <q-td :props="props">
            <q-btn flat size="xs" icon="edit" color="accent" style="font-weight:400" label="编辑"
                   @click="EditRole(props.row)" />
          </q-td>
        </template>
      </q-table>

    </div>
    <q-dialog v-model="persistent" content-class="bg-grey-1" 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.From" label="公文来源（FR）" :rules="[val => !!val || '公文来源（FR）']"/>

            <q-select class="col-6 q-pb-lg q-pr-lg" multiple clearable filled stack-label use-input use-chips
                      option-value="Id" option-label="EmployeeName" v-model="tempManager2" ref="ManagerId" :options="PersionList"
                      label="默认抄送" :dense="false" emit-value map-options @filter="filterFn">
              <template v-slot:no-option>
                <q-item>
                  <q-item-section class="text-grey">
                    未找到相关数据
                  </q-item-section>
                </q-item>
              </template>
            </q-select>

          </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,
  } from '../../api/sale/sale'
  export default {
    data() {
      return {
        currentUrl: "",
        columns: [{
          name: 'RoleId',
          label: '名称',
          field: 'RoleId',
          align: 'left'
        },
          {
            name: 'RoleName',
            required: true,
            label: '职业',
            align: 'left',
            field: row => row.RoleName
          },
          {
            name: 'RoleId',
            label: '性别',
            field: 'RoleId',
            align: 'left'
          },
          {
            name: 'RoleId',
            label: '年龄',
            field: 'RoleId',
            align: 'left'
          },
          {
            name: 'RoleId',
            label: '电话',
            field: 'RoleId',
            align: 'left'
          },
          {
            name: 'RoleId',
            label: '日语基础',
            field: 'RoleId',
            align: 'left'
          },
          {
            name: 'RoleId',
            label: '客户来源',
            field: 'RoleId',
            align: 'left'
          },
          {
            name: 'RoleId',
            label: '学日语目的',
            field: 'RoleId',
            align: 'left'
          },
          {
            name: 'RoleId',
            label: '重要联系人',
            field: 'RoleId',
            align: 'left'
          },
          {
            name: 'RoleId',
            label: '重要联系电话',
            field: 'RoleId',
            align: 'left'
          },
          {
            name: 'optioned',
            label: '操作',
            field: 'RoleId'
          }
        ],
        data: [],
        loading: true,
        msg: {
          pageIndex: 1,
          pageSize: 12,
          OrderId: 0,
          ClassId: 0,
          GuestName: '',
          GuestState:0,
        },
        pageCount: 0,
        persistent:false,
        addMsg:{

        },
      }
    },
    mounted() {
      if(this.$route.query){
        this.msg.OrderId =this.$route.query.OrderId
        this.msg.ClassId =this.$route.query.ClassId
      }
      this.getRolelist()
    },
    methods: {
      //重新查询
      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)
      }




    }
  }

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

</style>
