import ColField from '@/components/col-field'
import ColFieldGroup from '@/components/col-field-group'
import ColUpload from '@/components/col-upload'
import ColUploadVideo from '@/components/col-upload-video'
import {
  Button,
  Col,
  Dialog,
  Field,
  Form,
  Icon,
  Row,
  Sticky,
  Switch
} from 'vant'
import { defineComponent } from 'vue'
import styles from './class-content.module.less'
import { createState } from './createState'

export default defineComponent({
  name: 'ClassContent',
  data() {
    return {
      url: '',
      checked: null
    }
  },
  methods: {
    onSubmit(values: any) {
      createState.active = 3
    },
    addItem() {
      createState.lessonList.push({
        videoTitle: '',
        videoContent: '',
        videoUrl: '',
        coverUrl: '',
        posterUrl: '' // 视频封面图
      })
    },
    removeItem(index: number) {
      // 最少一节课
      if (createState.lessonList.length <= 1) return
      Dialog.confirm({
        title: '操作',
        message: `确定删除该条数据吗？`,
        confirmButtonColor: '#2DC7AA'
      }).then(() => {
        createState.lessonList.splice(index, 1)
      })
    }
  },
  render() {
    return (
      <Form
        class={styles['class-content']}
        onSubmit={this.onSubmit}
        scrollToError
      >
        {createState.lessonList.map((item: any, index: number) => (
          <>
            <div class={styles.titleSection}>
              <span class={styles.title}>第{index + 1}课</span>
              <Icon
                name="delete-o"
                style={{ fontWeight: 600 }}
                class={
                  createState.lessonList.length <= 1 ? styles.disabled : null
                }
                onClick={() => this.removeItem(index)}
                size={20}
              />
            </div>
            <ColFieldGroup>
              <ColField title="课程标题" required>
                <Field
                  v-model={item.videoTitle}
                  maxlength={50}
                  rules={[{ required: true, message: '请输入课程标题' }]}
                  name="videoTitle"
                  placeholder="请输入您的课程标题"
                />
              </ColField>
              <ColField title="课程内容" required>
                <Field
                  v-model={item.videoContent}
                  type="textarea"
                  rows="2"
                  autosize
                  showWordLimit
                  maxlength={200}
                  rules={[{ required: true, message: '请输入课程内容' }]}
                  name="videoContent"
                  placeholder="请输入您的课程内容"
                />
              </ColField>
              <ColField title="课程视频及视频封面" required border={false}>
                <Row
                  justify="space-between"
                  style={{ width: '100%', paddingTop: '12px' }}
                >
                  <Col span={12}>
                    <Field
                      style={{ padding: 0 }}
                      name="videoUrl"
                      rules={[{ required: true, message: '请上传课程视频' }]}
                      v-slots={{
                        input: () => (
                          <ColUploadVideo
                            bucket="video-course"
                            v-model={item.videoUrl}
                            v-model:posterUrl={item.posterUrl}
                            class={styles.upload}
                            tips="点击上传视频"
                          />
                        )
                      }}
                    />
                  </Col>
                  <Col span={12}>
                    <Field
                      style={{ padding: 0 }}
                      name="coverUrl"
                      rules={[{ required: true, message: '请上传课程封面' }]}
                      error
                      v-slots={{
                        input: () => (
                          <ColUpload
                            class={styles.upload}
                            cropper
                            bucket="video-course"
                            options={{
                              fixedNumber: [1.77, 1],
                              autoCropWidth: 750,
                              autoCropHeight: 424
                            }}
                            v-model={item.coverUrl}
                            tips="点击上传视频封面"
                          />
                        )
                      }}
                    />
                  </Col>
                </Row>
              </ColField>
            </ColFieldGroup>
          </>
        ))}

        <Button
          class={styles['add-item']}
          block
          icon="add-o"
          onClick={this.addItem}
        >
          添加课程
        </Button>

        <Sticky offsetBottom={0} position="bottom">
          <div class={['btnGroup', 'btnMore']}>
            <Button
              block
              round
              type="primary"
              plain
              onClick={() => {
                createState.active = 1
              }}
            >
              上一步
            </Button>
            <Button block round type="primary" native-type="submit">
              提交
            </Button>
          </div>
        </Sticky>
      </Form>
    )
  }
})
