<template>
  <div class="page-container">
    <back-box>
      <template slot="title">
        <span>授课端下载</span>
      </template>
    </back-box>
    <div class="page-content">
      <div class="content-top">
        <div class="cont-info">
          <img v-if="info.appImage" class="logo" :src="info.appImage" alt="" />
          <div>
            <p class="name">
              {{ `${info.appName || ""} ${info.versionName || ""}` }}
            </p>
            <p class="txt">文件大小：{{ `${info.fileSize}` }}M</p>
            <p class="txt">最近更新：{{ info.modifiedTime }}</p>
          </div>
        </div>
        <div class="down-box">
          <p class="txt">默认参数配置</p>
          <el-button
            class="down-btn"
            type="primary"
            @click="getAppDownloadUrl(false)"
            >立即下载</el-button
          >
        </div>
      </div>
      <!-- <ul class="down-ul">
        <li class="down-li" v-for="item in tableData" :key="item.id">
          <span class="p1 ellipsis" @click="setConfigForm(item)">{{
            item.configName
          }}</span>
          <el-button plan round @click="getAppDownloadUrl(item.id)"
            >下载</el-button
          >
        </li>
        <li class="down-li">
          <span>自定义软件功能</span>
          <el-button
            plan
            round
            icon="el-icon-plus"
            @click="setDefaultForm(), (dialogVis = true), (type = 1)"
            >参数设置</el-button
          >
        </li>
      </ul> -->
    </div>
    <div class="edit-dia" ref="editDia" v-show="dialogVis" height="100%">
      <div class="back">
        <div class="back-l" @click="dialogVis = false">
          <i class="fa fa-mail-reply-all"></i>
          <p>
            {{
              `${type == 1 ? "参数设置" : formData.configName}`
            }}
          </p>
        </div>
      </div>
      <div class="form-box">
        <el-form
          ref="forms"
          :model="formData"
          :rules="ruleForm"
          label-width="180px"
        >
          <el-form-item label="配置名称：" prop="configName" v-if="type == 1">
            <el-col :span="12">
              <el-input
                v-model.trim="formData.configName"
                placeholder="请填写配置名称"
              ></el-input>
            </el-col>
          </el-form-item>
          <el-form-item label="主菜单设置：" prop="mainMenu">
            <el-checkbox-group v-model="formData.mainMenu" :max="4">
              <el-checkbox v-for="item in menuList" :label="item" :key="item">{{
                item
              }}</el-checkbox>
            </el-checkbox-group>
          </el-form-item>
          <el-form-item label="弹出菜单组：" prop="popupMenu">
            <el-radio-group v-model="formData.popupMenu">
              <p class="popup-menu">
                <el-radio :label="1"
                  ><span>1：签到点名</span> <span> 2：导入导出</span>
                  <span>3：班级管理</span> <span>4：系统设置</span></el-radio
                >
              </p>
              <p class="popup-menu popup-menu1">
                <el-radio :label="2">
                  <span>1：签到点名</span> <span> 2：导入导出</span>
                  <span>3：考试任务</span> <span>4：系统设置</span></el-radio
                >
              </p>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="成绩等级设置：">
            <el-col :span="12">
              <div class="silde-box">
                <p class="silde-p">
                  <span class="num" :style="{ left: formData.failedSet + '%' }"
                    >{{ formData.failedSet }}%</span
                  >
                  <el-slider
                    v-model="formData.failedSet"
                    :show-tooltip="false"
                  ></el-slider
                  ><span class="txt" :style="{ left: formData.failedSet + '%' }"
                    >不及格</span
                  >
                </p>
                <p class="silde-p">
                  <span class="num" :style="{ left: formData.passSet + '%' }"
                    >{{ formData.passSet }}%</span
                  >
                  <el-slider
                    v-model="formData.passSet"
                    :show-tooltip="false"
                  ></el-slider
                  ><span class="txt" :style="{ left: formData.passSet + '%' }"
                    >及格</span
                  >
                </p>
                <p class="silde-p">
                  <span class="num" :style="{ left: formData.goodSet + '%' }"
                    >{{ formData.goodSet }}%</span
                  >
                  <el-slider
                    v-model="formData.goodSet"
                    :show-tooltip="false"
                  ></el-slider
                  ><span class="txt" :style="{ left: formData.goodSet + '%' }"
                    >良好</span
                  >
                </p>
                <p class="silde-p">
                  <span
                    class="num"
                    :style="{ left: formData.excellenSet + '%' }"
                    >{{ formData.excellenSet }}%</span
                  >
                  <el-slider
                    v-model="formData.excellenSet"
                    :show-tooltip="false"
                  ></el-slider
                  ><span
                    class="txt"
                    :style="{ left: formData.excellenSet + '%' }"
                    >优秀</span
                  >
                </p>
              </div>
            </el-col>
          </el-form-item>
          <el-form-item label="抢答设置：" prop="viesAnswerSet">
            <el-radio-group v-model="formData.viesAnswerSet">
              <el-radio :label="0">倒计时抢答</el-radio>
              <el-radio :label="1">即时抢答</el-radio>
              <el-radio :label="2">老师选择</el-radio>
            </el-radio-group>
            <el-input-number
              v-show="formData.viesAnswerSet === 0"
              size="small"
              class="count-down"
              v-model="formData.countdown"
              :step="1"
              :step-strictly="true"
            ></el-input-number>
            <span v-show="formData.viesAnswerSet == 0">秒</span>
          </el-form-item>
          <el-form-item label="抽答设置：" prop="ballotAnswerSet">
            <el-radio-group v-model="formData.ballotAnswerSet">
              <el-radio :label="0">点名抽答</el-radio>
              <el-radio :label="1">随机抽答</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="单选题选项默认个数：" prop="singleChoiceNum">
            <el-input-number
              size="small"
              class="count-down count-down2"
              v-model="formData.singleChoiceNum"
              :min="2"
              :max="7"
              :step="1"
              :step-strictly="true"
            ></el-input-number
            >个
          </el-form-item>
          <el-form-item label="多选题选项默认个数：" prop="multipleChoiceNum">
            <el-input-number
              size="small"
              class="count-down count-down2"
              v-model="formData.multipleChoiceNum"
              :min="2"
              :max="7"
              :step="1"
              :step-strictly="true"
            ></el-input-number
            >个
          </el-form-item>
          <el-form-item label="测—单题型默认题数：" prop="singleTypeNum">
            <el-input-number
              size="small"
              class="count-down count-down2"
              v-model="formData.singleTypeNum"
              :min="2"
              :max="25"
              :step="1"
              :step-strictly="true"
            ></el-input-number
            >个
          </el-form-item>
          <el-form-item label="问—倒计时：" prop="askCountdown">
            <el-switch v-model="askCount" @change="askCountChange"> </el-switch>
            <el-input-number
              v-show="askCount"
              size="small"
              class="count-down"
              v-model="formData.askCountdown"
              :min="0"
              :step="1"
              :step-strictly="true"
            ></el-input-number>
            {{ askCount ? "秒" : "" }}
          </el-form-item>
          <el-form-item label="测—倒计时：" prop="viesAnswerSet">
            <el-switch v-model="examsDuration" @change="examsDurationChange">
            </el-switch>
            <el-input-number
              v-show="examsDuration"
              size="small"
              class="count-down"
              v-model="formData.examsDuration"
              :min="0"
              :step="1"
              :step-strictly="true"
            ></el-input-number>
            {{ examsDuration ? "分" : "" }}
          </el-form-item>
          <el-form-item label="答题结构展示：" prop="displayModel">
            <el-radio-group v-model="formData.displayModel">
              <el-radio :label="0">极简模式</el-radio>
              <el-radio :label="1">全屏模式</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="语言设置：" prop="languageSet">
            <el-radio-group v-model="formData.languageSet">
              <el-radio :label="0">中文</el-radio>
              <el-radio :label="1">英文</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="其他设置：">
            <el-checkbox-group v-model="formData.otherSet">
              <p>
                <el-checkbox :label="0">答题结束自动显示答题统计</el-checkbox>
              </p>
              <p><el-checkbox :label="1">答题结束自动保存截屏</el-checkbox></p>
            </el-checkbox-group>
          </el-form-item>
          <el-form-item label=" ">
            <el-button type="primary" round @click="saveForm">保存</el-button>
            <el-button round @click="setDefaultForm">恢复默认设置</el-button>
            <el-button round @click="dialogVis = false">取消</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
const defaultForm = {
  configName: "",
  mainMenu: ["问"],
  popupMenu: 1,
  failedSet: 60,
  passSet: 80,
  goodSet: 90,
  excellenSet: 98,
  viesAnswerSet: 0,
  countdown: 5,
  ballotAnswerSet: 0,
  singleChoiceNum: 4,
  multipleChoiceNum: 4,
  singleTypeNum: 25,
  askCountdown: 30,
  examsDuration: 90,
  displayModel: 0,
  languageSet: 0,
  otherSet: [],
};
export default {
  watch: {
    "formData.askCountdown": function (val) {
      if (val == 0) {
        this.askCount = false;
      }
    },
    "formData.examsDuration": function (val) {
      if (val == 0) {
        this.examsDuration = false;
      }
    },
  },
  data() {
    return {
      page: 1,
      size: 20,
      type: 1, //1-添加；2-修改
      info: {
        appName: "",
        appImage: "",
        versionName: "",
        fileSize: "",
        modifiedTime: "",
      },
      tableData: [],
      dialogVis: false,
      askCount: true,
      examsDuration: true,
      configId: "",
      formData: {
        configName: "",
        mainMenu: ["问"],
        popupMenu: 1,
        failedSet: 60,
        passSet: 80,
        goodSet: 90,
        excellenSet: 98,
        viesAnswerSet: 0,
        countdown: 5,
        ballotAnswerSet: 0,
        singleChoiceNum: 4,
        multipleChoiceNum: 4,
        singleTypeNum: 25,
        askCountdown: 30,
        examsDuration: 90,
        displayModel: 0,
        languageSet: 0,
        otherSet: [],
      },
      ruleForm: {
        configName: [
          { required: true, message: "请填写配置名称", trigger: "blur" },
        ],
        // mainMenu: [
        //   { required: true, message: "请选择主菜单", trigger: "blur" },
        // ],
        // popupMenu: [
        //   { required: true, message: "请选择弹出菜单", trigger: "blur" },
        // ],
        // viesAnswerSet: [
        //   { required: true, message: "请选择抢答类型", trigger: "blur" },
        // ],
        // countdown: [
        //   { required: true, message: "请输入抢答倒计时", trigger: "blur" },
        // ],
        // ballotAnswerSet: [
        //   { required: true, message: "请选择抽答类型", trigger: "blur" },
        // ],
        // singleChoiceNum: [
        //   {
        //     required: true,
        //     message: "请输入单选题选项默认个数",
        //     trigger: "blur",
        //   },
        // ],
        // multipleChoiceNum: [
        //   {
        //     required: true,
        //     message: "请输入多选题选项默认个数",
        //     trigger: "blur",
        //   },
        // ],
        // singleTypeNum: [
        //   {
        //     required: true,
        //     message: "请输入测—单题型默认题数",
        //     trigger: "blur",
        //   },
        // ],
        // displayModel: [
        //   {
        //     required: true,
        //     message: "请选择答题结构",
        //     trigger: "blur",
        //   },
        // ],
        // languageSet: [
        //   {
        //     required: true,
        //     message: "请选择语言",
        //     trigger: "blur",
        //   },
        // ],
      },
      menuList: ["问", "测", "析"],
    };
  },
  created() {
    this.latestVersion();
    // this.appConfigList();
  },
  methods: {
    setConfigForm(obj) {
      let content = JSON.parse(obj.content);
      console.log(content);
      this.formData.configName = obj.configName;
      for (let key in this.formData) {
        content[key] ? (this.formData[key] = content[key]) : "";
      }
      this.formData.examsDuration = (this.formData.examsDuration / 60).toFixed(
        0
      );
      this.type = 2;
      (this.configId = obj.id), (this.dialogVis = true);
      this.$nextTick(function () {
        this.$refs.editDia.scrollTop = 0;
      });
    },
    setDefaultForm() {
      for (let key in this.formData) {
        this.formData[key] = defaultForm[key];
      }
    },
    askCountChange(val) {
      if (val) {
        this.formData.askCountdown = 30;
      } else {
        this.formData.askCountdown = 0;
      }
    },
    examsDurationChange(val) {
      if (val) {
        this.formData.examsDuration = 90;
      } else {
        this.formData.examsDuration = 0;
      }
    },
    async saveForm() {
      let content = {};
      for (let key in this.formData) {
        if (key != "configName") {
          content[key] = this.formData[key];
        }
      }
      content.examsDuration = content.examsDuration * 60;
      this.$refs.forms.validate((valid) => {
        if (valid) {
          if (this.type == 1) {
            this.addAppConfig({
              configName: this.formData.configName,
              content: { ...content },
            });
          } else {
            this.updateAppConfig({
              configId: this.configId,
              content: { ...content },
            });
          }
        } else {
          this.$message.warning("配置名称输入有误请检查！");
          return false;
        }
      });
    },

    async addAppConfig(params) {
      const { data, status, info } = await this.$request.addAppConfig({
        ...params,
      });
      if (status == 0) {
        this.$message.success("配置成功");
        this.dialogVis = false;
        this.appConfigList();
      } else {
        this.$message.error(info);
      }
    },
    async updateAppConfig(params) {
      const { data, status, info } = await this.$request.updateAppConfig({
        ...params,
      });
      if (status == 0) {
        this.$message.success("配置成功");
        this.dialogVis = false;
        this.appConfigList();
      } else {
        this.$message.error(info);
      }
    },

    async latestVersion() {
      const { data, status, info } = await this.$request.latestVersion();
      if (status == 0) {
        this.info = { ...data };
        this.info.fileSize =
          (this.info.fileSize &&
            (this.info.fileSize / 1024 / 1024).toFixed(2)) ||
          "--";
      } else {
        this.$message.error(info);
      }
    },
    async appConfigList() {
      const { data, status, info } = await this.$request.appConfigList({
        page: this.page,
        size: this.size,
      });
      if (status == 0) {
        this.tableData = [...data.list] || [];
      } else {
        this.$message.error(info);
      }
    },
    async getAppDownloadUrl(configId) {
      const { data, status, info } = await this.$request.getAppDownloadUrl({
        configId: configId || "",
      });
      if (status == 0) {
        // this.tableData = [...data.list] || [];
        const a = document.createElement("a");
        a.href = data.downloadUrl;
        document.body.appendChild(a);
        a.click();
        a.remove();
      } else {
        this.$message.error(info);
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.page-container {
  width: 100%;
  position: relative;
}
.page-content {
  padding: 30px;
  .content-top {
    padding: 20px 50px 20px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .cont-info {
      flex: 1;
      display: flex;
      align-items: center;
      .logo {
        width: 140px;
        margin-right: 16px;
      }
      .name {
        font-size: 20px;
        color: #333;
        line-height: 24px;
        padding-bottom: 12px;
      }
      .txt {
        font-size: 15px;
        color: #7f7f7f;
        line-height: 25px;
      }
    }
    .down-box {
      width: 200px;
      text-align: center;
      .txt {
        font-size: 16px;
        padding-bottom: 8px;
      }
      .down-btn {
        font-size: 20px;
      }
    }
  }
  .down-ul {
    display: flex;
    flex-wrap: wrap;
    padding: 0 20px;
    .down-li {
      width: calc(50% - 12px);
      height: 72px;
      padding: 0 16px;
      box-sizing: border-box;
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin: 0 24px 30px 0;
      border-radius: 10px;
      background: #f8f8f8;
      box-shadow: 2px 2px 5px #ccc;
      &:nth-child(2n) {
        margin-right: 0;
      }
      font-size: 16px;
      color: #667ffd;
      .p1 {
        cursor: pointer;
      }
    }
  }
}
:deep(.el-button.is-round) {
  width: 120px;
  text-align: center;
  padding: 10px 0;
}
.edit-dia {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: calc(100vh - 80px);
  background: #fff;
  overflow-y: auto;
  .back {
    width: 100%;
    height: 56px;
    border-bottom: 1px solid #e2e2e2;
    display: flex;
    align-items: center;
    padding: 0 20px;
    box-sizing: border-box;
    .back-l {
      display: flex;
      align-items: center;
      cursor: pointer;
      flex-shrink: 0;
      font-size: 18px;
      font-weight: 500;
    }
    .fa-mail-reply-all {
      font-size: 28px;
      color: #b3b3b3;
      margin-right: 12px;
    }
  }
  .form-box {
    padding: 20px;
    .popup-menu {
      padding-bottom: 16px;
      span {
        padding-right: 12px;
      }
    }
    .popup-menu1 {
      padding-bottom: 0;
    }
    .count-down {
      width: 48px;
      margin: 0 8px 0 20px;
      :deep(.el-input__inner) {
        width: 48px;
        height: 32px;
        line-height: 32px;
        border-radius: 20px;
        border-color: #667ffd;
        padding: 0;
      }
      :deep(.el-input-number__decrease) {
        display: none;
      }
      :deep(.el-input-number__increase) {
        display: none;
      }
    }
    .count-down2 {
      margin-left: 0;
    }
    .silde-box {
      position: relative;
      width: 100%;
      height: 60px;
      .silde-p {
        width: 100%;
        position: absolute;
        padding-top: 20px;
        & > span {
          position: absolute;
          width: 48px;
          text-align: center;
          line-height: 18px;
          flex-shrink: 0;
          font-size: 12px;
        }
        :deep(.el-slider) {
          flex: 1;
        }
        :deep(.el-slider__runway) {
          margin: 5px 0;
        }
        :deep(.el-slider__runway) {
          background-color: #409eff;
        }
        .num {
          top: 0;
          transform: translateX(-24px);
        }
        .txt {
          bottom: -20px;
          transform: translateX(-24px);
        }
      }
    }
  }
}
</style>