<template>
  <div id="videoConfig">
    <div class="boxWs">
      <header class="hedsa">视频播放</header>
      <div class="bigBoxs">
        <el-form label-width="100px" class="demo-ruleForm">
          <el-form-item
            v-for="(item, index) in listitem"
            :key="index"
            :label="item.configName"
          >
            <el-radio-group v-model="item.configValue">
              <el-radio label="1">开启</el-radio>
              <el-radio label="0">禁止</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-form>
        <el-button @click="submit">保存</el-button>
      </div>
    </div>
    <div class="boxWs" style="margin-left: 20px">
      <header class="hedsa">视频-课程节-拍照</header>
      <div class="bigBoxs">
        <el-form label-width="100px" class="demo-ruleForm">
          <el-form-item :label="videoActive.configName">
            <el-radio-group v-model="videoActive.configValue">
              <el-radio label="1">是</el-radio>
              <el-radio label="0">否</el-radio>
            </el-radio-group>
            <el-button
              size="mini"
              v-if="videoActive.configValue === '1'"
              @click="videoPhotoJG.configValue.push(0)"
              >添加</el-button
            >
          </el-form-item>
          <template v-if="videoActive.configValue == 1">
            <el-form-item
              v-for="(item, index) in videoPhotoJG.configValue"
              :key="index"
              label="拍照时段"
            >
              <el-input-number
                :controls="false"
                v-model="videoPhotoJG.configValue[index]"
                controls-position="right"
                :min="0"
              ></el-input-number
              >分钟
              <el-button type="warning" size="mini" @click="del(index)"
                >删除</el-button
              >
            </el-form-item>
          </template>
        </el-form>
        <el-button @click="submitVideo">保存</el-button>
      </div>
    </div>
  </div>
</template>

<script>
import {
  listConfig,
  getConfig,
  delConfig,
  addConfig,
  updateConfig,
  exportConfig,
  refreshCache,
} from "@/api/system/config";
export default {
  data() {
    return {
      listitem: [],
      videoActive: {},
      videoPhotoJG: {},
    };
  },
  mounted() {
    this.getConfig();
  },
  methods: {
    del(index) {
      this.videoPhotoJG.configValue.splice(index, 1);
    },
    getConfig() {
      listConfig().then((res) => {
        var listitems = [];
        res.rows.map((item) => {
          if (
            item.configKey == "sys.play.autoPlay" ||
            item.configKey == "sys.play.drag" ||
            item.configKey == "sys.play.speed"
          ) {
            listitems.push(item);
          }
          if (item.configKey == "sys.course.photograph") {
            this.videoActive = item;
          }
          if (item.configKey == "sys.course.intervalTime") {
            if (item.configValue) {
              item.configValue = item.configValue.split(",");
            } else {
              item.configValue = [];
            }
            this.videoPhotoJG = item;
          }
        });
        this.listitem = listitems;
      });
    },
    async submit() {
      for (let i = 0; i < this.listitem.length; i++) {
        await updateConfig(this.listitem[i]);
      }
      this.$modal.msgSuccess("修改成功");
    },
    async submitVideo() {
      if (this.videoActive.configValue == 1) {
        if (!this.videoPhotoJG.configValue.length) {
          this.$modal.msgError("参数键值不能为空");
          return;
        } else {
          var arr = {};
          for (let k in this.videoPhotoJG) {
            if (k == "configValue") {
              arr[k] = this.videoPhotoJG[k].toString();
            } else {
              arr[k] = this.videoPhotoJG[k];
            }
          }
          await updateConfig(this.videoActive);
          await updateConfig(arr);
          this.$modal.msgSuccess("修改成功");
          this.getConfig();
        }
      } else {
        await updateConfig(this.videoActive);
        this.$modal.msgSuccess("修改成功");
        this.getConfig();
      }
    },
  },
};
</script>

<style lang="less" scoped>
#videoConfig {
  display: flex;
  align-items: center;
}
.boxWs {
  width: 450px;
  height: 400px;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid #eee;
  .hedsa {
    background-color: #999;
    padding: 6px;
  }
  .bigBoxs {
    height: 100%;
    padding: 14px;
    overflow-y: auto;
  }
}
</style>
