<template>
<q-dialog v-model="persistent" maximized full-height seamless position="right" @hide="closeShenheForm">
    <q-card style="margin-top:61px;width:600px" class="no-border-radius q-px-lg">
        <q-toolbar class="q-my-md q-pa-none">
            <q-icon name="iconfont icon-11zaixianshenpixitong" size="30px" color="warning" />
            <q-toolbar-title class="micfont">教师审核</q-toolbar-title>
        </q-toolbar>
        <div class="row">
            <div class="col-6">
                <q-field :value="text" label="教师照片" borderless>
                    <template v-slot:control>
                        <q-avatar class="q-mt-xs">
                            <img :src="showObj.TeacherIcon">
                        </q-avatar>
                    </template>
                </q-field>
            </div>
            <div class="col-6">
                <q-field :value="text" label="教师姓名" borderless>
                    <template v-slot:control>
                        <div class="self-center full-width no-outline text-body1" tabindex="0">{{showObj.TeacherName}}</div>
                    </template>
                </q-field>
            </div>
        </div>
        <div class="row q-my-md">
            <div class="col-6">
                <q-field :value="text" label="申请时间" borderless>
                    <template v-slot:control>
                        <div class="self-center full-width no-outline text-body2" tabindex="0">{{showObj.CreateTimeStr}}</div>
                    </template>
                </q-field>
            </div>
            <div class="col-6">
                <q-field :value="text" label="联系电话" borderless>
                    <template v-slot:control>
                        <div class="self-center full-width no-outline text-body2" tabindex="0">{{showObj.TeacherTel}}</div>
                    </template>
                </q-field>
            </div>
        </div>
        <div>
            <q-field filled label="申请备注" :value="text" borderless disable>
                <template v-slot:control>
                    <div class="self-center full-width no-outline q-mt-xs" style="min-height:100px;">无</div>
                </template>
            </q-field>
        </div>
        <q-separator class="q-my-md" />
        <div class="q-mb-md">
            <q-input square filled v-model="reason" borderless label="审批意见" ref="reason" type="textarea" counter :rules="[val => !!val || '请填写审批意见']" maxlength="100" />
        </div>
        <div style="text-align:right">
            <q-btn size="xs" @click="saveReuslt(2)" icon="iconfont icon-chenggong" color="primary" style="font-weight:400" class="q-mr-md" label="通过" :loading="saveLoading &&saveType==2" :disable="saveLoading &&saveType!=2" />
            <q-btn size="xs" @click="saveReuslt(3)" icon="iconfont icon-jujue" color="negative" style="font-weight:400" label="拒绝" :loading="saveLoading &&saveType==3" :disable="saveLoading &&saveType!=3" />
        </div>

    </q-card>
    <div class="dialog-out-close" @click="closeShenheForm" style="height:40px !important;border-top-left-radius: 4px !important;border-bottom-left-radius: 4px !important;">
        <q-icon name="iconfont icon-jujue1" size="26px" />
    </div>
</q-dialog>
</template>

<script>
import {
    auditTeacher
} from '../../../api/school/index'
export default {
    props: {
        showObj: {
            type: Object,
            default: null
        }
    },
    data() {
        return {
            persistent: true,
            text: 'Field content',
            reason: '',
            saveLoading: false,
            saveType: 0
        }
    },
    methods: {
        closeShenheForm() {
            this.$emit('close')
        },
        saveReuslt(status) {
            this.saveType = status
            this.$refs.reason.validate()
            if (!this.$refs.reason.hasError) {
                this.saveLoading = true
                auditTeacher({
                    AuditStatus: this.saveType,
                    AuditRemark: this.reason,
                    TId: this.showObj.TId
                }).then(res => {
                    this.saveLoading = false
                    this.$q.notify({
                        icon: 'iconfont icon-chenggong',
                        color: 'accent',
                        timeout: 2000,
                        message: '审核完成！',
                        position: 'top'
                    })
                    this.$emit("success")
                    this.closeShenheForm()
                }).catch(() => {
                    this.saveLoading = false
                })
            }

        }
    },
}
</script>

<style>

</style>
