import ColField from '@/components/col-field'
import ColFieldGroup from '@/components/col-field-group'
import ColPopup from '@/components/col-popup'
import ColUpload from '@/components/col-upload'
import request from '@/helpers/request'
import { verifyNumberIntegerAndFloat } from '@/helpers/toolsValidate'
import {
  Button,
  Col,
  Field,
  Form,
  Icon,
  Image,
  Radio,
  RadioGroup,
  Row,
  Sticky,
  Tab,
  Tabs
} from 'vant'
import { defineComponent } from 'vue'
import SubjectModel from '../../business-components/subject-list'
import styles from './class-info.module.less'
import { createState } from './createState'

import activeButtonIcon from '@common/images/icon_checkbox.png'
import inactiveButtonIcon from '@common/images/icon_checkbox_default.png'

export default defineComponent({
  name: 'ClassInfo',
  data() {
    return {
      subjectStatus: false
    }
  },
  computed: {
    choiceSubjectIds() {
      // 选择的科目编号
      let ids = createState.lessonGroup.lessonSubject
        ? Number(createState.lessonGroup.lessonSubject)
        : null
      return ids ? [ids] : []
    },
    subjectList() {
      // 学科列表
      return createState.subjectList || []
    },
    lessonSubjectName() {
      // 选择的科目
      let tempStr = ''
      this.subjectList.forEach((item: any) => {
        if (this.choiceSubjectIds.includes(item.id)) {
          tempStr = item.name
        }
      })
      return tempStr
    },
    calcRatePrice() {
      // 计算手续费
      let rate = createState.rate || 0
      let price = createState.lessonGroup.lessonPrice || 0
      return (price - (rate / 100) * price).toFixed(2)
    }
  },
  async mounted() {
    try {
      if (createState.subjectList.length <= 0) {
        const res = await request.post('/api-teacher/teacher/querySubject')
        createState.subjectList = res.data || []
      }
    } catch {
      //
    }
  },
  methods: {
    onChoice(id: number) {
      createState.lessonGroup.lessonSubject = id
      this.subjectStatus = false
    },
    onFormatter(val: any) {
      return verifyNumberIntegerAndFloat(val)
    },
    tabChange(name: number) {
      ;(this as any).$refs.form.resetValidation('lessonCoverTemplateUrl')
      ;(this as any).$refs.form.resetValidation('lessonCoverUrl')
      createState.tabIndex = name
    },
    selectImg(val: string) {
      createState.lessonGroup.lessonCoverUrl = ''
      createState.lessonGroup.lessonCoverTemplateUrl = val
    }
  },
  render() {
    return createState.loadingStatus ? (
      <div></div>
    ) : (
      <Form
        class={styles.classInfo}
        ref="form"
        onSubmit={() => (createState.active = 2)}
        onFailed={(e: any) => console.log(e)}
        scrollToError
      >
        <ColFieldGroup>
          <ColField title="课程名称" required>
            <Field
              v-model={createState.lessonGroup.lessonName}
              name="lessonName"
              maxlength={50}
              placeholder="请输入您的课程名称"
              rules={[{ required: true, message: '请输入您的课程名称' }]}
            />
          </ColField>
          <ColField title="课程声部" required>
            <Field
              modelValue={this.lessonSubjectName}
              name="lessonSubjectName"
              readonly
              isLink
              onClick={() => {
                this.subjectStatus = true
              }}
              rules={[{ required: true, message: '请选择课程声部' }]}
              placeholder="请选择课程声部"
            />
          </ColField>
        </ColFieldGroup>

        <ColFieldGroup>
          <ColField title="课程介绍" required border={false}>
            <Field
              v-model={createState.lessonGroup.lessonDesc}
              name="lessonDesc"
              placeholder="请输入课程介绍"
              rows="3"
              maxlength={200}
              showWordLimit
              autosize
              rules={[{ required: true, message: '请输入课程介绍' }]}
              type="textarea"
            />
          </ColField>
        </ColFieldGroup>

        <ColFieldGroup>
          <ColField title="课程组售价" required>
            <Field
              v-model={createState.lessonGroup.lessonPrice}
              name="lessonPrice"
              placeholder="请输入您的课程组售价"
              formatter={this.onFormatter}
              type="number"
              maxlength={8}
              rules={[{ required: true, message: '请输入您的课程组售价' }]}
              v-slots={{
                button: () => <span>元</span>
              }}
            />
          </ColField>
        </ColFieldGroup>

        <div class={styles['class-info-tip']}>
          <p>扣除手续费后您的课程预计收入为：</p>
          <p>
            课程组总收入<span>{this.calcRatePrice}</span>元/人
          </p>
          <p>您的课程收入将在课程结束后结算到您的账户中</p>
        </div>

        <ColFieldGroup>
          <ColField
            required
            border={false}
            v-slots={{
              title: () => (
                <Tabs
                  v-model:active={createState.tabIndex}
                  class={styles.infoField}
                  onChange={this.tabChange}
                  shrink
                  color="var(--van-primary)"
                  lineWidth={20}
                >
                  <Tab title="图片模板" name={1}></Tab>
                  <Tab title="自定义模板" name={2}></Tab>
                </Tabs>
              )
            }}
          >
            <p class={styles.photoTip}>模板图片将作为该课程封面为学员展示</p>
            {/* {createState.tabIndex === 1 && ( */}
            <Field
              name="lessonCoverTemplateUrl"
              border={false}
              v-show={createState.tabIndex === 1}
              rules={[
                {
                  required:
                    createState.tabIndex === 1 &&
                    !createState.lessonGroup.lessonCoverUrl,
                  message: '请选择图片模板'
                }
              ]}
              v-slots={{
                input: () => (
                  <RadioGroup
                    v-model={createState.lessonGroup.lessonCoverTemplateUrl}
                  >
                    <Row justify="space-between" style={{ width: '100%' }}>
                      {createState.templateList.map((item: any) => (
                        <Col
                          span={12}
                          class={styles.imgContainer}
                          onClick={() => this.selectImg(item)}
                        >
                          <Image class={styles.imgContainer} src={item} />
                          <Radio
                            name={item}
                            v-slots={{
                              icon: (props: any) => (
                                <Icon
                                  class={styles.boxStyle}
                                  name={
                                    props.checked
                                      ? activeButtonIcon
                                      : inactiveButtonIcon
                                  }
                                  size="18"
                                />
                              )
                            }}
                          />
                        </Col>
                      ))}
                    </Row>
                  </RadioGroup>
                )
              }}
            />
            {/* )} */}
            {/* {createState.tabIndex == 2 && ( */}
            <Field
              name="lessonCoverUrl"
              v-show={createState.tabIndex == 2}
              rules={[
                {
                  required: createState.tabIndex == 2,
                  message: '请上传自定义模板'
                }
              ]}
              v-slots={{
                input: () => (
                  <Row justify="space-between" style={{ width: '100%' }}>
                    <Col span={12} class={styles.imgContainer}>
                      <ColUpload
                        cropper
                        bucket="video-course"
                        options={{
                          fixedNumber: [1.77, 1],
                          autoCropWidth: 750,
                          autoCropHeight: 424
                        }}
                        onUploadChange={(val: any) => {
                          if (val) {
                            createState.lessonGroup.lessonCoverTemplateUrl = ''
                          }
                        }}
                        v-model={createState.lessonGroup.lessonCoverUrl}
                        class={styles.imgContainer}
                      />
                    </Col>
                    <Col span={24}>
                      <p
                        class={styles.photoTip}
                        style={{ color: '#ff4e19', padding: '0' }}
                      >
                        图片尺寸为750*424能达到最佳显示效果
                      </p>
                    </Col>
                  </Row>
                )
              }}
            />
            {/* )} */}
          </ColField>
        </ColFieldGroup>

        <Sticky offsetBottom={0} position="bottom">
          <div class={['btnGroup']}>
            <Button block round type="primary" native-type="submit">
              下一步
            </Button>
          </div>
        </Sticky>

        <ColPopup v-model={this.subjectStatus} destroy>
          <SubjectModel
            selectType="Radio"
            single
            subjectList={createState.subjectList}
            choiceSubjectIds={this.choiceSubjectIds}
            onChoice={this.onChoice}
          />
        </ColPopup>
      </Form>
    )
  }
})
