<template>
  <div>
    <div class="menu-title">
      算法发布
    </div>
    <div class="menu-content">
      <div>
        <el-form :inline="true" :model="qo" class="demo-form-inline">
          <el-form-item>
            <el-input v-model="qo.LIKES_name" placeholder="请输入算法名称"></el-input>
          </el-form-item>
          <!-- <el-form-item>
            <el-input v-model="qo.LIKES_name" placeholder="请输入版本"></el-input>
          </el-form-item> -->
          <el-form-item>
            <el-button type="primary" icon="el-icon-search" @click="qo.pageNo=1;queryData()">搜 索</el-button>
          </el-form-item>
        </el-form>
      </div>
      <div style="margin: 0px 0 20px 0">
        <el-button type="primary" @click="createRow()">发布算法</el-button>
      </div>
      <div>
        <el-table :data="result.records" style="width: 100%" ref="table">
          <el-table-column type="index" label="行号" width="100"></el-table-column>
          <el-table-column prop="name" label="算法名称"></el-table-column>
          <!-- <el-table-column prop="version" label="版本"></el-table-column> -->
          <el-table-column prop="buildRemark" label="介绍"></el-table-column>
          <el-table-column prop="modifyTimeMillis" label="修改时间">
            <template slot-scope="scope">
              {{ scope.row.modifyTimeMillis | timeFilter }}
            </template>
          </el-table-column>
          <el-table-column prop="createTimeMillis" label="创建时间">
            <template slot-scope="scope">
              {{ scope.row.createTimeMillis | timeFilter }}
            </template>
          </el-table-column>
          <el-table-column label="操作" width="120">
            <template slot-scope="scope">
              <el-button @click.native.prevent="modifyRow(scope.row)" type="text" size="small">
                编辑
              </el-button>
              <el-button @click.native.prevent="removeRow(scope.row)" type="text" size="small">
                删除
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="page-box">
        <el-pagination background
                       @current-change="handleCurrentChange"
                       :current-page="qo.pageNo"
                       :page-size="qo.pageSize"
                       layout="total, prev, pager, next"
                       :total="result.total">
        </el-pagination>
      </div>
    </div>
    <el-dialog
        :title="dialogName"
        :visible.sync="cmdDialogVisible"
        width="40%">
      <div v-show="step == 1">
        <el-form ref="cmd" label-width="100px" :rules="rules" :model="cmd" v-loading="stepLoading1" element-loading-text="代码pull中...">
          <el-form-item label="算法名称" prop="name">
            <el-input v-model="cmd.name" placeholder="请输入算法名称"></el-input>
          </el-form-item>
          <el-form-item label="算法介绍" prop="buildRemark">
            <el-input type="textarea" v-model="cmd.buildRemark" placeholder="请输入算法介绍"></el-input>
          </el-form-item>
          <el-form-item label="代码仓库" prop="repositoryId" >
            <el-select v-model="cmd.repositoryId" placeholder="请选择代码仓库" @change="handleRepositoryChange">
              <el-option :label="item.name" :value="item.id" v-for="item in codeWarehouseList"
                         :key="item.id"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="仓库分支" prop="branchName">
            <el-select v-model="cmd.branchName" placeholder="请选择分支">
              <el-option :label="item" :value="item" v-for="(item,index) in branchList" :key="index"></el-option>
            </el-select>
            <!--            <el-input v-model="cmd.branchName" placeholder="请输入分支"></el-input>-->
          </el-form-item>
          <el-form-item label="依赖方式" prop="relyOnType">
            <el-radio-group v-model="cmd.relyOnType">
              <el-radio :label="1">克隆Conda环境</el-radio>
              <el-radio :label="2">文件安装</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="环境名称" prop="condaName" v-if="cmd.relyOnType==1">
            <el-input v-model="cmd.condaName" placeholder="请输入环境名称"></el-input>
          </el-form-item>
          <!--          <el-form-item label="标签(TAG)" prop="branchTagName">-->
          <!--            <el-input v-model="cmd.branchTagName" placeholder="请输入标签(TAG)"></el-input>-->
          <!--            &lt;!&ndash;            <el-select v-model="cmd.name" placeholder="请选择发布的标签，不选为最新提交">&ndash;&gt;-->
          <!--            &lt;!&ndash;              <el-option label="" value=""></el-option>&ndash;&gt;-->
          <!--            &lt;!&ndash;            </el-select>&ndash;&gt;-->
          <!--          </el-form-item>-->
          <!--          <el-form-item label="启动命令" prop="script">-->
          <!--            <el-input v-model="cmd.script" placeholder="请输入启动命令" type="textarea"></el-input>-->
          <!--          </el-form-item>-->
          <!--          <el-form-item label="日志文件" prop="logFileName">-->
          <!--            <el-input v-model="cmd.logFileName" placeholder="请输入日志文件名称或目录(相对目录)"></el-input>-->
          <!--          </el-form-item>-->
        </el-form>
      </div>
      <div v-show="step == 2">
        <el-form ref="cmd2" label-width="100px" :model="cmd">
          <div class="title-form-box">公共配置</div>
          <el-form-item :label="item.name" v-for="item in cmd2.publicPropert" :key="item.key">
            <el-input v-model="item.value" :placeholder="'请输入' + item.name"></el-input>
          </el-form-item>
          <div class="title-form-box">私有配置</div>
          <el-form-item :label="item.name" v-for="item in cmd2.privatePropert" :key="item.key">
            <el-input v-model="item.value" :placeholder="'请输入' + item.name"></el-input>
          </el-form-item>
        </el-form>
      </div>
      <div v-show="step == 3">
        <i class="el-icon-loading" v-show="stepPercent < 100"></i>
        <!--        <el-progress :text-inside="true" :stroke-width="26" :percentage="stepPercent" v-show="stepPercent < 100"></el-progress>-->
        <label v-show="stepPercent >= 100">依赖校验成功！</label>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="cmdDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="nextStep" v-show="step == 1" :disabled="stepLoading1">下一步</el-button>
        <el-button type="primary" @click="nextStep" v-show="step == 2">下一步</el-button>
        <el-button type="primary" @click="submitModify" v-show="step == 3" :disabled="stepPercent < 100">发布</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import request from '@/utils/request2';

var _this;
export default {
  name: "codeWarehouse",
  data() {
    return {
      qo: {
        pageNo: 1,
        pageSize: 10,
        LIKES_name: '',
      },
      result: {
        records: [],
        total: 0
      },
      codeWarehouseList: [],
      step: 1,
      stepPercent: 0,
      dialogName: '发布算法',
      cmdDialogVisible: false,
      cmd: {},
      cmd2: {},
      rules: {
        name: [
          {required: true, message: '请输入算法名称'}
        ],
        repositoryId: [
          {required: true, message: '请选择代码仓库'}
        ],
        branchName: [
          {required: true, message: '请输入分支'}
        ],
        branchTagName: [
          {required: true, message: '请输入标签(TAG)'}
        ],
        logFileName: [
          {required: true, message: '请输入启动命令'}
        ],
        script: [
          {required: true, message: '请输入日志文件'}
        ],
        relyOnType: [
          {required: true, message: '请选择依赖方式'}
        ],
        condaName: [
          {required: true, message: '请输入虚拟环境名称'}
        ],
      },
      stepLoading1: false,
      branchList: []
    }
  },
  mounted() {
    _this = this;
    _this.queryData();
    _this.queryCodeWarehouseList();
  },
  filters: {
    timeFilter(val) {
      if (val > 0) {
        let dt = new Date(val);
        let year = dt.getFullYear();
        let month = dt.getMonth() + 1;
        let date = dt.getDate();
        let hour = dt.getHours();
        let minute = dt.getMinutes();
        let second = dt.getSeconds();
        return `${year}-${month}-${date} ${hour}:${minute}:${second}`;
      } else {
        return "-";
      }
    }
  },
  methods: {
    handleRepositoryChange(id) {
      _this.queryBranchList(id);
      _this.cmd.branchName = "";
    },
    queryBranchList(id) {
      request({
        url: '/repository/branch-list',
        method: 'post',
        data: {repositoryId: id}
      }).then(res => {
        _this.branchList = res.list[0];
      });
    },
    queryCodeWarehouseList() {
      request({
        url: '/repository/list',
        method: 'post',
        data: {pageNo: 1, pageSize: 1000}
      }).then(res => {
        _this.codeWarehouseList = res.list;
      });
    },
    queryData() {
      request({
        url: '/algorithm/list',
        method: 'post',
        data: _this.qo
      }).then(res => {
        _this.result.records = res.list;
        console.log(res.list);
        _this.result.total = res.total;
      });
    },
    handleCurrentChange(val) {
      _this.qo.pageNo = val;
      _this.queryData();
    },
    removeRow(item) {
      _this.$confirm('此操作将永久删除记录, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        let id = item.id
        request({
          url: `/algorithm/delete/${id}`,
          method: 'get',
        }).then(res => {
          _this.$message.success("删除成功");
          _this.queryData();
          _this.queryOntologyList();
        });
      }).catch(() => {
      });
    },
    createRow() {
      _this.step = 1;
      _this.cmdDialogVisible = true;
      _this.stepLoading1 = false;
      _this.$nextTick(() => {
        _this.cmd = {
          name: '',
          repositoryId: '',
          branchName: '',
          branchTagName: '',
          logFileName: '',
          script: ''
        };
        _this.$refs.cmd.resetFields();
      });
    },
    modifyRow(item) {
      _this.cmd = JSON.parse(JSON.stringify(item));
      _this.cmd.modifyTimeMillis = null;
      _this.stepLoading1 = false;
      if (_this.cmd.repositoryId != null && _this.cmd.repositoryId.toString().length > 0) {
        _this.queryBranchList(_this.cmd.repositoryId);
      }
      _this.cmdDialogVisible = true;
    },
    nextStep() {
      if (_this.step == 1) {
        this.$refs.cmd.validate((valid) => {
          if (valid) {
            _this.stepLoading1 = true;
            request({
              url: '/algorithm/pull',
              method: 'post',
              data: _this.cmd
            }).then(res => {
              _this.stepLoading1 = false;
              _this.step = 2;
              _this.dialogName = "配置文件预览";
              _this.cmd2 = res.data;
            });
          }
        });
      } else if (_this.step == 2) {
        let id = _this.cmd2.id;
        _this.dialogName = "依赖下载中.........";
        _this.step = 3;
        request({
          url: `/algorithm/verification_rely/${id}`,
          method: 'get',
          data: _this.cmd
        }).then(res => {
          _this.stepPercent = 100;
        });
        // let si = setInterval(function() {
        //   let percent = _this.stepPercent;
        //   percent += 10;
        //   if(percent >= 100) {
        //     percent = 100;
        //     clearInterval(si);
        //   }
        //
        // }, 2000);
      }
    },
    submitModify() {
      let id = _this.cmd2.id;
      request({
        url: `/algorithm/release/${id}`,
        method: 'get',
        data: _this.cmd
      }).then(res => {
        _this.$message.success("发布成功");
        _this.queryData();
        _this.cmdDialogVisible = false;
      });
    },
  }
}
</script>

<style lang="scss">
.title-form-box {
  font-size: 16px;
  padding-left: 5px;
  margin-bottom: 25px;
  font-weight: 600;
}


</style>
