<template>
  <el-dialog :visible="dialogVisible" title="推送" width="730px" @close="dialogClose" @closed="dialogClosed">
    <div class="share-condition">
      <div class="exercise-name">
        <div>推送名称</div>
        <el-input v-model="share_name" placeholder="请输入" />
      </div>
      <div class="condition-top">
        <span>开始日期</span>
        <el-date-picker
          v-model="begin_date"
          value-format="yyyy-MM-dd"
          type="date"
          placeholder="选择日期"
          style="width: 100%"
        />
        <span>有效期</span>
        <el-input v-model.number="effective_days" placeholder="请输入有效期">
          <span slot="suffix">天</span>
        </el-input>
        <span>作答限时</span>
        <el-input v-model.number="answer_time_limit_minute" placeholder="请输入作答限时">
          <span slot="suffix">分钟</span>
        </el-input>
      </div>

      <div class="memo">
        <div class="label">备注</div>
        <el-input v-model="memo" placeholder="请输入" type="textarea" />
      </div>

      <div class="condition-bottom" :style="{ 'grid-template': `30px 32px / repeat(3, 1fr)` }">
        <span>发送方式</span>
        <el-radio-group v-model="send_type" @input="handleSendType">
          <el-radio v-for="{ type, name } in sendModes" :key="type" :label="type">{{ name }}</el-radio>
        </el-radio-group>
        <template v-if="send_type === sendModes[0].type">
          <span>作答模式</span>
          <el-radio-group v-model="answer_mode">
            <el-radio v-for="{ type, name } in answerModes" :key="type" :label="type">
              {{ name }}
            </el-radio>
          </el-radio-group>
        </template>
        <template v-if="send_type === sendModes[1].type">
          <span>访问权限</span>
          <el-radio-group v-model="access_popedom">
            <el-radio v-for="{ type, name } in accessPermissions" :key="type" :label="type">
              {{ name }}
            </el-radio>
          </el-radio-group>
          <span :class="{ disabled: access_popedom === accessPermissions[0].type }">作答模式</span>
          <el-radio-group
            v-model="answer_mode"
            :disabled="access_popedom === accessPermissions[0].type"
            :class="{ disabled: access_popedom === accessPermissions[0].type }"
          >
            <el-radio v-for="{ type, name } in answerModes" :key="type" :label="type">{{ name }}</el-radio>
          </el-radio-group>
        </template>
      </div>
    </div>

    <div v-show="send_type === sendModes[0].type" class="select-course">
      <div class="title">选择课程</div>
      <template v-for="{ id, name } in courseList">
        <div :key="id" class="course">
          <i
            :class="curCourseId === id ? 'el-icon-caret-bottom' : 'el-icon-caret-right'"
            @click="selectedCourse(id)"
          ></i>
          <div class="course-name" @click="selectedCourse(id)">
            {{ name }}
          </div>
          <span class="link" @click="selectAllStudent(id)">全选</span>
        </div>
        <div v-if="curCourseId === id" :key="`student-${id}`" class="student-list">
          <div v-for="li in studentList" :key="li.student_id" class="student-list-item">
            <el-checkbox v-model="li.checked" :label="li.student_id">
              <div class="student-info">
                <el-avatar :size="24" :src="li.student_image_url" />
                <span>{{ li.student_name }}</span>
              </div>
            </el-checkbox>
          </div>
        </div>
      </template>
    </div>

    <div v-show="send_type === sendModes[1].type" class="generate-condition">
      <span>访问人数</span>
      <el-input v-model.number="max_person_count" placeholder="不限制">
        <span slot="suffix">人</span>
      </el-input>
      <span class="tips">可直接输入人数</span>
    </div>

    <div slot="footer" class="footer">
      <template v-if="send_type === sendModes[0].type">
        <el-button type="primary" @click="generateLink">发送</el-button>
      </template>
      <template v-if="send_type === sendModes[1].type">
        <el-button type="primary" @click="generateLink">生成链接和二维码</el-button>
      </template>
    </div>
  </el-dialog>
</template>

<script>
import { CreateShareRecord, GetMyCourseList_Teacher, GetCourseStudentList } from '@/api/exercise';

export default {
  name: 'ShareDialog',
  props: {
    exerciseId: {
      type: String,
      default: '',
    },
    dialogVisible: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      share_name: '',
      send_type: 1, // 发送方式
      sendModes: [
        {
          type: 1,
          name: '发送至课程',
        },
        {
          type: 2,
          name: '生成链接/二维码',
        },
      ],
      answer_mode: 1, // 作答模式
      answerModes: [
        { type: 1, name: '练习模式' },
        { type: 2, name: '考试模式' },
      ],
      access_popedom: 2, // 访问权限
      accessPermissions: [
        {
          type: 1,
          name: '可编辑',
        },
        {
          type: 2,
          name: '仅作答',
        },
      ], // 访问权限列表
      correct_answer_show_mode: 1, // 正确答案显示方式
      correctAnswerShowModeList: [
        { type: 1, name: '答题后显示' },
        { type: 2, name: '提交后显示' },
      ],
      max_person_count: '', // 访问人数
      begin_date: this.getNowDate(),
      effective_days: 50,
      answer_time_limit_minute: 30,
      memo: '',
      courseList: [],
      curCourseId: '',
      studentList: [],
    };
  },
  created() {
    GetMyCourseList_Teacher({ finish_status: 51, release_status: 1 }).then(({ course_list }) => {
      this.courseList = course_list;
    });
  },
  methods: {
    getNowDate() {
      const date = new Date();
      return `${date.getFullYear()}-${date.getMonth() + 1}-${date.getDate()}`;
    },
    // 生成链接
    generateLink() {
      if (!this.share_name) return this.$message.warning('请输入推送名称');
      let option = {
        name: this.share_name,
        exercise_id: this.exerciseId,
        begin_date: this.begin_date,
        effective_days: this.effective_days,
        answer_time_limit_minute: this.answer_time_limit_minute,
        send_type: this.send_type,
        answer_mode: this.answer_mode,
        access_popedom: this.access_popedom,
        correct_answer_show_mode: this.correct_answer_show_mode,
        max_person_count: this.max_person_count || -1,
        memo: this.memo,
      };
      if (this.send_type === this.sendModes[0].type) {
        if (this.curCourseId === '') return this.$message.error('请选择课程');
        option.course_id = this.curCourseId;
        let student_id_list = this.studentList.filter((item) => item.checked).map((item) => item.student_id);
        if (student_id_list.length === 0) return this.$message.error('请选择学生');
        option.student_id_list = student_id_list;
      }
      CreateShareRecord(option).then(({ status, ...data }) => {
        if (this.send_type === this.sendModes[0].type) {
          this.$emit('update:dialogVisible', false);
          this.$message.success('发送成功');
        }
        if (this.send_type === this.sendModes[1].type) {
          this.$emit('generateLink', { ...data });
        }
      });
    },
    /**
     * 选择课程
     * @param {String} id 课程id
     */
    selectedCourse(id) {
      this.curCourseId = this.curCourseId === id ? '' : id;
      this.studentList = [];
      if (!this.curCourseId) return;
      GetCourseStudentList({ course_id: this.curCourseId, audit_status_list: [1], pay_status: -1 }).then(
        ({ student_list }) => {
          this.studentList = student_list.map((item) => ({
            ...item,
            checked: false,
          }));
        },
      );
    },
    /**
     * 全选学生
     * @param {String} id 课程id
     */
    selectAllStudent(id) {
      if (!this.curCourseId || id !== this.curCourseId) return;
      this.studentList = this.studentList.map((item) => ({
        ...item,
        checked: true,
      }));
    },
    /**
     * 发送方式改变时处理
     * 当发送方式为发送至课程时，访问权限只能为仅作答
     * @param {Number} val 发送方式
     */
    handleSendType(val) {
      if (val === this.sendModes[0].type) {
        this.access_popedom = this.accessPermissions[1].type;
      }
    },
    dialogClose() {
      this.$emit('update:dialogVisible');
    },
    dialogClosed() {
      this.send_type = 1;
      this.answer_mode = 1;
      this.access_popedom = 1;
      this.max_person_count = '';
      this.begin_date = this.getNowDate();
      this.effective_days = 50;
      this.answer_time_limit_minute = 30;
      this.memo = '';
      this.curCourseId = '';
      this.studentList = [];
    },
  },
};
</script>

<style lang="scss" scoped>
.el-dialog {
  :deep &__header {
    padding: 16px;
    border-bottom: 1px solid #ebebeb;
  }

  :deep &__headerbtn &__close {
    color: #000;
  }

  :deep &__body {
    padding: 16px 24px;
    color: $font-light-color;

    .share-condition {
      display: flex;
      flex-direction: column;
      row-gap: 20px;

      .exercise-name {
        display: flex;
        flex-direction: column;
        row-gap: 8px;
      }

      .condition-top {
        display: grid;
        grid-template: 30px 32px / repeat(3, 1fr);
        grid-auto-flow: column;
        column-gap: 16px;
      }

      .memo {
        .label {
          height: 30px;
        }
      }

      .condition-bottom {
        display: grid;
        grid-auto-flow: column;
        column-gap: 24px;

        .el-radio-group {
          display: flex;
        }

        .disabled {
          opacity: 0.5;
        }
      }
    }

    .select-course {
      display: flex;
      flex-direction: column;
      row-gap: 8px;
      max-height: 300px;
      margin-top: 8px;
      overflow-y: auto;

      .course {
        display: flex;
        column-gap: 12px;
        align-items: center;
        justify-content: space-between;
        margin-left: 4px;

        i {
          font-size: 16px;
          cursor: pointer;
        }

        &-name {
          flex: 1;
          cursor: pointer;
        }
      }

      .student-list {
        display: flex;
        flex-direction: column;
        row-gap: 8px;
        margin-left: 8px;

        &-item {
          .el-checkbox {
            display: flex;
            column-gap: 8px;
            align-items: center;

            .student-info {
              display: flex;
              column-gap: 8px;
              align-items: center;
            }
          }
        }
      }
    }

    .generate-condition {
      display: grid;
      grid-template: 30px 32px 30px / 210px 260px;
      grid-auto-flow: column;
      column-gap: 32px;
      align-items: center;
      margin-top: 16px;

      .tips {
        color: $text-color;
      }

      .disabled {
        opacity: 0.5;
      }
    }

    .el-input {
      &__suffix-inner {
        display: flex;
        align-items: center;
        height: 100%;
        margin-right: 5px;
        color: $font-color;
      }
    }
  }

  :deep &__footer {
    margin-top: 16px;

    .footer {
      display: flex;
      align-items: center;
      justify-content: center;

      .el-button {
        width: 200px;
        height: 34px;
        border-radius: 20px;

        + .el-button {
          margin-left: 16px;
        }

        &--default {
          color: $main-color;
          background-color: #f3f7ff;
        }
      }
    }
  }
}
</style>
