<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Github自动提交commit工具</title>
  <link href="../assets/styles/element-ui2.13.min.css" rel="stylesheet" />
  <link href="../assets/styles/base.css" rel="stylesheet" />
  <link href="../assets/styles/autoCommit.css" rel="stylesheet" />
</head>

<body>
  <div id="app">
    <div class="form-title">Github自动提交commit工具</div>
    <el-container>
      <el-main>
        <el-form ref="form" :model="form" :rules="rules" label-width="180px">
          <el-form-item class="form_item" prop="itemSrc">
            <label slot="label">
              <el-tooltip class="item" content="要提交commit的仓库文件夹" placement="top-start">
                <span>项目地址 :</span>
              </el-tooltip>
            </label>
            <span @click="chooseItem">{{ form.itemSrc }}</span>
            </el-input>
          </el-form-item>
          <el-form-item class="form_item" prop="fileName">
            <label slot="label">
              <el-tooltip class="item" content="默认写入commit内容的文件,位于项目的根目录，不存在会自动创建" placement="top-start">
                <span>commit文件 :</span>
              </el-tooltip>
            </label>
            <el-input class="input_form" v-model="form.fileName" @change="fileNameChange"></el-input>
            </el-input>
          </el-form-item>
          <el-form-item class="form_item" prop="commitMsg">
            <label slot="label">
              <el-tooltip class="item" content="每个提交的统一commit message" placement="top-start">
                <span>commit信息 :</span>
              </el-tooltip>
            </label>
            <el-input class="input_form" v-model="form.commitMsg" @change="commitMsgChange"></el-input>
            </el-input>
          </el-form-item>
          <el-form-item class="form_item">
            <label slot="label">
              <el-tooltip class="item" content="更多细节设置" placement="top-start">
                <span>更多设置 :</span>
              </el-tooltip>
            </label>
            <el-switch
              @change="switchChange"
              v-model="more"
              active-color="#13ce66"
              inactive-color="#ff4949">
            </el-switch>
          </el-form-item>

          <el-form-item class="form_item" v-if="more">
            <label slot="label">
              <el-tooltip class="item" content="间隔一定时间范围不提交commit几天，这样看起来更逼真" placement="top-start">
                <span>间隔提交 :</span>
              </el-tooltip>
            </label>
            <span>超出时间范围:</span>
            <el-input-number v-model="moreObj.scopeDay" :step="1" :min="0"  size="mini"></el-input-number>
            <span>超出这个范围随机不提交天数：</span>
            <el-input-number v-model="moreObj.noCommitDay" :step="1" :min="0"  size="mini"></el-input-number>
          </el-form-item>
          
          <el-form-item class="form_item" prop="commitNumber">
            <label slot="label">
              <el-tooltip class="item" content="时间范围内默认每个日期是否随机commit" placement="top-start">
                <span>是否随机commit :</span>
              </el-tooltip>
            </label>
            <el-switch
              @change="switchChange"
              v-model="form.randomCommit"
              active-color="#13ce66"
              inactive-color="#ff4949">
            </el-switch>
          </el-form-item>
          <el-form-item class="form_item" prop="commitNumber" v-if="form.randomCommit">
            <label slot="label">
              <el-tooltip class="item" :content="`时间范围内默认每个日期随机commit 1次~${form.commitNumber}次`" placement="top-start">
                <span>随机commit次数 :</span>
              </el-tooltip>
            </label>
            <el-input-number v-model="form.commitNumber" :step="1" :min="2" :max="88" size="large"></el-input-number>
          </el-form-item>
          <el-form-item class="form_item" prop="commitNumber" v-else>
            <label slot="label">
              <el-tooltip class="item" content="时间范围内默认每个日期需要commit的次数" placement="top-start">
                <span>默认commit次数 :</span>
              </el-tooltip>
            </label>
            <el-input-number v-model="form.commitNumber" :step="1" :min="1" :max="88" size="large"></el-input-number>
          </el-form-item>
          <el-form-item v-for="(ele, index) in form.timeArr" :key="index" :prop="'timeArr.' + index + '.value'" :rules="{
                required: true, message: '日期不能为空', trigger: 'blur'
              }">
            <label slot="label">
              <el-tooltip class="item" content="要commit的日期范围" placement="top-start">
                <span>commit日期范围{{index+1}} :</span>
              </el-tooltip>
            </label>
            <el-date-picker v-model="ele.value"  type="daterange" value-format="yyyy-MM-dd"
              range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期">
            </el-date-picker>
          </el-form-item>
          <el-form-item v-for="(ele, index) in form.timeArr" :key="index">
            <label slot="label">
              <el-tooltip class="item" content="可选(默认使用默认commit次数)：对应index的日期范围每个日期的commit次数" placement="top-start">
                <span>该范围每天提交次数{{index+1}} :</span>
              </el-tooltip>
            </label>
            <el-input-number v-model="ele.commitNumber" :step="1" :min="0" :max="88"  ></el-input-number>
            <el-button @click.prevent="removeTime(index)"  :disabled="form.timeArr.length === 1">删除</el-button>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="submitForm('form')" :disabled="(runNow === 4 || runNow === 1) && runNow !== 0">开始commit</el-button>
            <el-button @click="addTimeRange" :disabled="runNow === 1 || runNow === 4">新增日期范围</el-button>
            <el-button @click="reset" :disabled="runNow !== 1 && runNow !== 4">取消commit</el-button>
            <el-button @click="clearLog" :disabled="showText.logStr === ''">清空日志</el-button>
          </el-form-item>
        </el-form>
        <div class="form-title2">日志和文档</div>
        <el-main>
          <div class="log_form_father">
            <el-form label-width="160px">
              <el-form-item>
                <label slot="label">
                  <el-tooltip content="通过日志了解插件运行信息" placement="top-start">
                    <span>插件运行日志 :</span>
                  </el-tooltip>
                </label>
                <el-input  @input="formatLog" type="textarea"
                :autosize="{ minRows: 1, maxRows: 8}"
                placeholder="无法输入 仅用于展示" v-model="showText.logStr" :disabled="runNow === 1 || runNow === 0">
              </el-form-item>
              <el-form-item>
                <label slot="label">
                  <el-tooltip content="点击开始commit,插件运行所需要的参数" placement="top-start">
                    <span>插件参数 :</span>
                  </el-tooltip>
                </label>
                <el-input  @input="watchParamsChange" type="textarea"
                :autosize="{ minRows: 1, maxRows: 4}"
                placeholder="无法输入 仅用于展示" v-model="showText.paramsStr" :disabled="showText.paramsStr === ''">
              </el-form-item>
              <el-form-item label="请先阅读文档 :">
                <el-link href="https://github.com/OBKoro1/autoCommit/wiki" type="primary"  target="_blank">Readme</el-link>
                <el-link href="https://github.com/OBKoro1/autoCommit/wiki/%E4%BD%BF%E7%94%A8%E9%A1%BB%E7%9F%A5" type="primary"  target="_blank">使用文档</el-link>
                <el-link href="https://github.com/OBKoro1/autoCommit/wiki/ChangeLog" type="primary" target="_blank">更新日志</el-link>
              </el-form-item>
              <div class="tip">觉得这个插件还不错的话, 请给我点个<el-link href="https://github.com/OBKoro1/autoCommit" type="primary"  target="_blank">Star⭐️</el-link>吧~</div>
              <div v-if="!isProduction">
                <div>{{ form }}</div>
              </div>
            </el-form>
          </div>
        </el-main>
      </el-main>
    </el-container>
  </div>
  </div>
</body>
<script src="../assets/scripts/vue.min.js"></script>
<script src="../assets/scripts/element2.13.min.js"></script>
<script>
  let isWeb = false // 是否网页 不在vscode插件生态内
  let vscode;
  try{
    vscode =  acquireVsCodeApi()
  }catch(err){
    isWeb = true
  }
  new Vue({
    el: '#app',
    data() {
      // 项目地址验证
      const itemSrcCheck = (rule, value, callback) => {
        if (value !== '点击选择要commit的项目文件夹') {
          callback();
        } else {
          callback(new Error('请选择要commit的项目文件夹'));
        }
      }
      return {
        isProduction: false, // 是否为调试模式
        mockLogTime: null, // 模拟数据的定时器
        showText:{
          oldParams: '', // 保存的参数
          paramsStr: '', // commit参数
          logArr: [], // 保存的日志
          logStr: '', // 
          command: [],
          data: []
        },
        runNow: 0, // 0 初始化 1运行中 2运行结束 3取消运行 4push中
        form: {
          // itemSrc: '/Users/koro/work/web_my/testCommit',
          randomCommit: true,
          itemSrc: '点击选择要commit的项目文件夹',
          fileName: 'commit.md',
          commitMsg: 'autoCommit',
          timeArr: [
            {
              value: '',
              commitNumber: 0
            }
          ],
          commitNumber: 10
        },
        rules: {
          'itemSrc': [
            {
              validator: itemSrcCheck, // 项目地址
              required: true,
              message: '请选择要commit的项目文件夹'
            }
          ],
          'fileName': [
            {
              required: true,
              message: '请选择要写入内容的文件'
            }
          ],
          'commitMsg': [
            {
              required: true,
              message: '请填入要commit的内容'
            }
          ],
          'commitNumber': [
            {
              required: true
            }
          ]
        },
        // 更多设置
        more: false,
        moreObj: {
         scopeDay: 0, // 多长的时间范围
         noCommitDay: 0, // 这段时间不提交几天
        }
      };
    },
    mounted() {
      this.initListener();
      if(isWeb){
        this.form.itemSrc = '随便一个地址'
      }
    },
    methods: {
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            this.runCommit()
          } else {
            return false;
          }
        });
      },
      // 开始commit
      runCommit() {
        this.runNow = 1
        this.clearLog()
        this.showText.paramsStr = JSON.stringify(this.form)
        this.showText.oldParams = this.showText.paramsStr
        if(isWeb){
          this.mockLog()
        }else{
          const params = { 
            form: this.form,
            moreObj: this.moreObj
          }
          this.postMessage('commit', params);
        }
      },
      // 验证表单数据
      checkData() {
        if(this.moreObj.scopeDay !== 0 && this.moreObj.scopeDay === this.moreObj.noCommitDay){
          this.$message({
              type: 'error',
              showClose: true,
              message:  `更多设置中日期范围和不提交天数不能相同`,
            });
            return false
        }
        return true
      },
      // 发送消息到插件
      postMessage(command, data) {
        vscode.postMessage({
          command,
          data
        });
      },
      logDebug(command,data){
        this.showText.logArr.unshift(`command: ${command}`);
        this.showText.logArr.unshift(`数据: ${data}`);
        this.formatLog()
      },
      // 接收日志
      acceptLogFn(paramArr){
        const logStr = paramArr.join(' ')
        this.showText.logArr.unshift(logStr);
        this.formatLog()
      },
      // 注册
      initListener() {
        window.onmessage = (e) =>{
          const { command, data } = event.data;
          this.showText.command.unshift(command)
          this.showText.data.unshift(data)
          if(command === 'init-formData'){
            if (data) {
                this.form = data
              }
          } else if (command === 'choose item success') {
            // 选择文件夹成功
            this.form.itemSrc = data
          }else if(command === 'choose item error'){
            this.$message({
              type: 'error',
              showClose: true,
              message:  `${data}根目录没有.git文件夹`,
              duration: 0
            });
          } else if(command === '回滚'){
            this.runNow = 3;
          }else if(command === '提交中...'){
            this.runNow = 4
          }else if(command === 'commit 完成'){
            // commit 完成
            this.runNow = 2
          } else if(command === 'console-log'){
            this.acceptLogFn(data)
          }else if(command === 'isProduction'){
            // 调试模式 查看通信
            this.isProduction = true
          }
          if(!this.isProduction){
            this.logDebug(command, data)
          }
        }
      },
      // 重置： commit成功和中断commit
      reset() {
        if(isWeb){
          clearInterval(this.mockLogTime)
          this.mockLogTime = null
        } else{
          this.postMessage('cancel autoCommit')
        }
      },
      // 模拟日志 写html时用
      mockLog(){
        this.showText.logArr = [
        'res 开始 undefined',
        'res 结束',
        'log 开始 [{"commit": "a6b5f3d","author": "OBKoro1 <1677593011@qq.com>","date": "2019-12-26 21:05:57 +0800","message": "init"}]',
        'log 结束',
        'commit内容 2019-12-27T08:00:00+08:000',
        '总commit次数1'
        ]
        let num = 0;
      this.mockLogTime =  setInterval(() => {
          if(num< 100){
            num++
            this.showText.logArr.unshift(`一些文字${num}`)
            this.formatLog()
          }else{
            this.reset()
          }
        }, 1000);
      },
      clearLog(){
        this.showText.logArr = []
        this.showText.logStr = ''
      },
      formatLog(){
        this.showText.logStr = this.showText.logArr.join(`\n`)
      },
      watchParamsChange(){
        this.showText.paramsStr = this.showText.oldParams
      },
      // 删除时间
      removeTime(index) {
        this.form.timeArr.splice(index, 1)
      },
      chooseItem() {
          this.postMessage('choose-item')
      },
      // 增加时间范围选择
      addTimeRange() {
        this.form.timeArr.push({
          value: '',
          commitNumber: 0
        });
      },
      switchChange(value){
        if(value){
          this.form.commitNumber = 10;
        }else{
          this.form.commitNumber = 1;
        }
      },
      fileNameChange(value) {
        if (value === '') {
          this.form.fileName = 'commit.md'
        }
      },
      commitMsgChange(value) {
        if (value === '') {
          this.form.commitMsg = 'autoCommit'
        }
      },
    }
  });
</script>

</html>