import ColField from '@/components/col-field'
import ColFieldGroup from '@/components/col-field-group'
import ColPopup from '@/components/col-popup'
import SubjectModel from '@/business-components/subject-list'
import { ActionSheet, Button, Field, Form, Sticky } from 'vant'
import { defineComponent } from 'vue'
import styles from './course.module.less'
import { createState } from './createState'
import {
  verifiyNumberInteger,
  verifyNumberIntegerAndFloat
} from '@/helpers/toolsValidate'

export default defineComponent({
  name: 'course',
  data() {
    return {
      subjectStatus: false,
      classTimeStatus: false
    }
  },
  computed: {
    choiceSubjectIds() {
      // 选择的科目编号
      let ids = createState.live.subjectId
        ? Number(createState.live.subjectId)
        : 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
    },
    calcSingleRatePrice() {
      let rate = createState.rate || 0
      let nums = createState.live.courseNum
      let price = createState.live.coursePrice || 0
      return nums ? ((price / nums) * (1 - rate / 100)).toFixed(2) : 0
    },
    calcRatePrice() {
      // 计算手续费
      let rate = createState.rate || 0
      let price = createState.live.coursePrice || 0
      return (price - (rate / 100) * price).toFixed(2)
    }
  },
  async mounted() {},
  methods: {
    onChoice(id: number) {
      createState.live.subjectId = id
      this.subjectStatus = false
    },
    onFormatter(val: any) {
      return verifyNumberIntegerAndFloat(val)
    },
    onFormatterInt(val: any) {
      if (val && val >= 1) {
        return verifiyNumberInteger(val)
      } else {
        return ''
      }
    },
    onSelect(action: any) {
      createState.live.singleCourseMinutes =
        Number(action.name || 0) + Number(action.freeMinutes || 0)
      createState.live.singleMins = Number(action.name || 0)
      createState.live.freeMinutes = Number(action.freeMinutes || 0)
    }
  },
  render() {
    return (
      <Form
        class={styles.classInfo}
        onSubmit={() => (createState.active = 2)}
        scrollToError
      >
        <ColFieldGroup>
          <ColField title="课程名称" required>
            <Field
              v-model={createState.live.name}
              name="name"
              maxlength={50}
              placeholder="请输入您的课程名称"
              rules={[{ required: true, message: '请输入您的课程名称' }]}
            />
          </ColField>
          <ColField title="课程声部" required>
            <Field
              modelValue={this.lessonSubjectName}
              name="subjectId"
              readonly
              isLink
              onClick={() => {
                this.subjectStatus = true
              }}
              rules={[{ required: true, message: '请选择课程声部' }]}
              placeholder="请选择课程声部"
            />
          </ColField>

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

        <ColFieldGroup>
          <ColField title="课时数" required>
            <Field
              v-model={createState.live.courseNum}
              name="courseNum"
              placeholder="请输入您的课时数"
              formatter={this.onFormatterInt}
              type="number"
              maxlength={2}
              rules={[{ required: true, message: '请输入您的课时数' }]}
              v-slots={{
                button: () => <span>课时</span>
              }}
            />
          </ColField>
          <ColField title="单课时时长" required>
            <Field
              modelValue={createState.live.singleMins}
              name="singleMins"
              readonly
              isLink
              onClick={() => {
                this.classTimeStatus = true
              }}
              rules={[{ required: true, message: '请选择单课时时长' }]}
              placeholder="请选择单课时时长"
            />
          </ColField>
          <ColField title="课程组售价" required>
            <Field
              v-model={createState.live.coursePrice}
              name="coursePrice"
              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.calcSingleRatePrice}</span>元/人
          </p>
          <p>
            课程组总收入<span>{this.calcRatePrice}</span>元/人
          </p>
          <p>您的课程收入将在课程结束后结算到您的账户中</p>
        </div>

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

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

        <ActionSheet
          v-model:show={this.classTimeStatus}
          actions={createState.minutes}
          cancelText="取消"
          closeOnClickAction
          onSelect={this.onSelect}
        />
      </Form>
    )
  }
})
