import { scrollAnimation } from '@/util/scroll'
import { ElButton, ElForm, ElFormItem, ElInput } from 'element-plus'
import { defineComponent } from 'vue'
import { basePlan, createState } from '../createState'
import styles from './index.module.less'

export default defineComponent({
  name: 'course-plan',
  async mounted() {
    let list = createState.live.coursePlanList
    let listLength = list.length || 0
    if (createState.live.courseNum > listLength) {
      for (let i = 0; i < createState.live.courseNum - listLength; i++) {
        await this.addPlan()
      }
    } else if (createState.live.courseNum < listLength) {
      for (let i = 0; i < listLength - createState.live.courseNum; i++) {
        await this.delPlan()
      }
    }
  },
  methods: {
    async addPlan() {
      let list = createState.live.coursePlanList || []
      list.push({
        plan: '',
        startTime: '',
        endTime: '',
        classNum: list.length + 1
      })
      createState.live.coursePlanList = list
    },
    async delPlan(index?: number) {
      let list = createState.live.coursePlanList || []
      list.splice(index || list.length - 1, 1)
      createState.live.coursePlanList = list
    },
    onSubmit() {
      ;(this as any).$refs.form.validate(async (valid: boolean) => {
        if (valid) {
          createState.active = 2

          // const currentY =
          //   document.documentElement.scrollTop || document.body.scrollTop
          // scrollAnimation(currentY, 0)
        } else {
          this.$nextTick(() => {
            let isError = document.getElementsByClassName('is-error')
            isError[0].scrollIntoView({
              block: 'center',
              behavior: 'smooth'
            })
          })
          return false
        }
      })
    }
  },
  render() {
    return (
      <div class={styles.formSection}>
        <ElForm
          class="px-6 pb-10 pt-7"
          size="large"
          ref="form"
          labelWidth={'100px'}
          labelPosition="top"
          model={createState.live}
        >
          {createState.live.coursePlanList &&
            createState.live.coursePlanList.map((item: any, index: number) => (
              <ElFormItem
                label={`第${item.classNum}课`}
                prop={`coursePlanList.${index}.plan`}
                class="pb-2"
                rules={[{ required: true, message: '请输入课程计划' }]}
              >
                <ElInput
                  v-model={item.plan}
                  type="textarea"
                  placeholder="请输入课程计划"
                  // @ts-ignore
                  maxlength={200}
                  rows={4}
                  showWordLimit
                />
              </ElFormItem>
            ))}
        </ElForm>
        <div class="text-center pt-4 pb-7">
          <ElButton
            round
            class="!w-44 !h-[48px] !text-base"
            onClick={() => {
              createState.active = 0
              if (!createState.live.courseGroupId) {
                createState.live.coursePlanList = [{ ...basePlan }]
              }
            }}
          >
            上一步
          </ElButton>
          <ElButton
            round
            type="primary"
            class="!w-44 !h-[48px] !text-base"
            onClick={this.onSubmit}
          >
            下一步
          </ElButton>
        </div>
      </div>
    )
  }
})
