import { Button, Col, Row } from 'vant'
import { defineComponent } from 'vue'
import styles from './index.module.less'
import iconTeacher from '@/common/images/icon_teacher.png'
import iconTips from '../images/icon_tips.png'

export default defineComponent({
  name: 'teacherChange',
  props: {
    changeInfo: {
      type: Object,
      default: () => ({})
    },
    onClose: {
      type: Function,
      default: () => {}
    },
    onChangeTeacher: {
      type: Function,
      default: (isUpdate: boolean) => {}
    }
  },
  computed: {
    teacherInfo() {
      const { old, now } = this.changeInfo
      return {
        oldName: old.realName,
        oldAvatar: old.avatar,
        nowName: now.realName,
        nowAvatar: now.avatar
      }
    }
  },
  render() {
    return (
      <div class={styles.teacherChange}>
        <div class={styles.changeInfo}>
          <Row>
            <Col span={12} class={styles.txt}>
              您已绑定
            </Col>
            <Col span={12} class={styles.name}>
              <img src={this.teacherInfo.oldAvatar || iconTeacher} />
              <span>{this.teacherInfo.oldName}</span>
            </Col>
          </Row>
          <Row>
            <Col span={12} class={styles.txt}>
              是否更换为
            </Col>
            <Col span={12} class={styles.name}>
              <img src={this.teacherInfo.nowAvatar || iconTeacher} />
              <span>{this.teacherInfo.nowName}</span>
            </Col>
          </Row>
        </div>
        <div class={styles.changeTips}>
          <img src={iconTips} />
          <span>更换后原老师已排课程可继续上课</span>
        </div>

        <div class={['btnGroup', 'btnMore']}>
          <Button
            type="primary"
            round
            plain
            onClick={() => {
              this.onClose()
            }}
          >
            不更换
          </Button>
          <Button
            type="primary"
            round
            onClick={() => {
              this.onChangeTeacher(true)
            }}
          >
            更换
          </Button>
        </div>
      </div>
    )
  }
})
