import { defineComponent } from 'vue'
import ColField from '@/components/col-field'
import SubjectModel from '../../business-components/subject-list'
import styles from './cert-two.module.less'
import { Button, Dialog, Field, Icon, Popup, Tag } from 'vant'
import { teacherState } from './teacherState'

import icon1 from './images/icon_1.png'
import icon2 from './images/icon_2.png'
import ColPopup from '@/components/col-popup'
import request from '@/helpers/request'
import ColFieldGroup from '@/components/col-field-group'

export default defineComponent({
  name: 'cert-two',
  data() {
    return {
      // choiceSubject: [],
      subjectStatus: false
    }
  },
  computed: {
    choiceSubjectIds() {
      // 选择的科目编号
      let ids = teacherState.teacherCert.subjectId
        ? teacherState.teacherCert.subjectId.split(',')
        : []
      ids = ids.map((item: any) => Number(item))
      return ids
    },
    subjectList() {
      // 学科列表
      return teacherState.subjectList || []
    },
    choiceSubject() {
      // 选择的科目
      let tempArr: any[] = []
      console.log(this.choiceSubjectIds, this.subjectList)
      this.subjectList.forEach((parent: any) => {
        parent.subjects &&
          parent.subjects.forEach((sub: any) => {
            if (this.choiceSubjectIds.includes(sub.id)) {
              tempArr.push(sub as never)
            }
          })
      })
      console.log(tempArr, 'tempArr')
      return tempArr
    }
  },
  methods: {
    onChoice(item: any) {
      teacherState.teacherCert.subjectId = item.join(',') || ''

      this.subjectStatus = false
    },
    async onSubjectOpen() {
      this.subjectStatus = true
    }
  },
  render() {
    return (
      <div>
        <ColFieldGroup class={styles.items}>
          <ColField
            title="可教授乐器（可多选）"
            border={false}
            class={styles.itemSubject}
            required
            v-slots={{
              icon: () => <Icon name={icon1} size="24" />,
              right: () => (
                <Button
                  class={styles.select}
                  round
                  type="primary"
                  size="small"
                  onClick={this.onSubjectOpen}
                >
                  选择
                </Button>
              )
            }}
          >
            {this.choiceSubject && this.choiceSubject.length > 0 ? (
              <div class={styles['tag-list']}>
                {this.choiceSubject.map((item: any) => (
                  <Tag
                    type="primary"
                    plain
                    round
                    closeable
                    size="large"
                    style={{ backgroundColor: '#E9FFF8' }}
                    onClose={() => {
                      Dialog.confirm({
                        title: '提示',
                        message: '请确认是否删除？',
                        confirmButtonColor: 'var(--van-primary)'
                      }).then(() => {
                        let ids = teacherState.teacherCert.subjectId
                          ? teacherState.teacherCert.subjectId.split(',')
                          : []
                        ids = ids.map((item: any) => Number(item))
                        const index = ids.indexOf(item.id)
                        if (index !== -1) {
                          ids.splice(index, 1)
                        }
                        teacherState.teacherCert.subjectId = ids.join(',')
                      })
                    }}
                  >
                    {item.name}
                  </Tag>
                ))}
              </div>
            ) : null}
          </ColField>
        </ColFieldGroup>

        <ColFieldGroup class={styles.items}>
          <ColField
            title="个人简介"
            border={false}
            v-slots={{
              icon: () => <Icon name={icon2} size="24" />,
              right: () => (
                <div class={styles.limit}>
                  {teacherState.teacherCert.introduction?.length || 0}/200
                </div>
              )
            }}
          >
            <Field
              v-model={teacherState.teacherCert.introduction}
              rows="3"
              autosize
              maxlength={200}
              style={{ fontSize: '13px' }}
              type="textarea"
              placeholder="例：毕业于中国音乐学院长笛专业，曾获得中国青年管乐演奏大赛一等奖，具有8年教学经验，能够将专业知识通过简单易懂的方式教授给学员。"
            />
          </ColField>
        </ColFieldGroup>

        <ColPopup v-model={this.subjectStatus} destroy>
          <SubjectModel
            subjectList={this.subjectList}
            choiceSubjectIds={this.choiceSubjectIds}
            onChoice={this.onChoice}
          />
        </ColPopup>
      </div>
    )
  }
})
