<!--
<go-history :historyShow="historyShow" @hideHistoryDialog="hideHistoryDialog"></go-history>
import goHistory from '@/components/api/go-history.vue';
-->

<template>
  <div v-show="customDialog">
    <el-dialog class="edit-dialog" title="选择回退版本" :visible.sync="customDialog" width="600px" :before-close="handleClose">
      <div class="table-wrap">
        <el-table :data="tableData" style="width: 100%">
          <el-table-column label="" show-overflow-tooltip>
            <template slot-scope="scope">
              <el-radio v-model="selectVersion" :label="scope.row.publishRecordId">{{ scope.row.version }}</el-radio>
            </template>
          </el-table-column>
          <el-table-column prop="publishRecordId" label="发布版本" show-overflow-tooltip> </el-table-column>
          <el-table-column label="发布备注" show-overflow-tooltip>
            <template slot-scope="scope">
              {{ scope.row.remark }}
            </template>
          </el-table-column>
          <el-table-column label="发布时间" show-overflow-tooltip>
            <template slot-scope="scope">
              <div class="color-606266 line-18">{{ scope.row.createTime | timeStampToYmd }}</div>
              <div class="color-606266 line-18">{{ scope.row.createTime | timeStampToHms }}</div>
            </template>
          </el-table-column>
          <el-table-column label="操作" show-overflow-tooltip>
            <template slot-scope="scope">
              <el-button @click="handleShow(scope.$index, scope.row)" type="text">查看</el-button>
            </template>
          </el-table-column>
        </el-table>
        <div class="pagination text-right m-t-14" v-if="!!totalCount">
          <el-pagination small :page-size="pageSize" :current-page="currentPage" layout="prev, pager, next" :total="totalCount" @size-change="handleSizeChange" @current-change="handleCurrentChange"> </el-pagination>
        </div>
      </div>
      <div slot="footer" class="dialog-footer" style="padding-bottom: 10px;">
        <el-button @click="customCancel">取 消</el-button>
        <el-button type="primary" @click="customConfirm('syncForm')">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { getRequest } from '@/api/api';
// import { _debounce } from '@/assets/js/public';
import errMsg from '@/assets/js/error';
import showMsg from '@/assets/js/showmsg';
export default {
  name: 'go-history',
  props: {
    historyShow: {
      type: Boolean,
      default: false
    },
    apiData: {
      type: [Object, Array],
      default() {
        return {};
      }
    }
  },
  data() {
    return {
      customDialog: false,
      selectVersion: '',
      tableData: [
        // {
        //   interfaceVersionId: '1',
        //   version: '123',
        //   status: '', // 0 删除 1更新修改 2发布 3 历史发布版本
        //   proxyType: '',
        //   defaultFlag: false,
        //   sceneCode: '',
        //   sceneName: '测试',
        //   remark: 'test',
        //   createTime: 1564455643252
        // }
      ],
      pageSize: 8,
      currentPage: 1,
      totalCount: 0
    };
  },
  methods: {
    /**
     *   关闭
     */
    handleClose(done) {
      const that = this;
      done();
      that.hideDialog();
    },

    /**
     *  取消
     */
    customCancel() {
      const that = this;
      that.hideDialog();
    },

    hideDialog() {
      const that = this;
      that.customDialog = false;
      that.$emit('hideHistoryDialog');
    },

    /**
     *  确定回退
     */
    customConfirm() {
      const that = this;
      if (!that.selectVersion) {
        that.$message.error({
          duration: 1000,
          message: '请选择回退版本'
        });
        return false;
      }
      that.postEditData();
    },
    postEditData() {
      const that = this;
      let para = {
        interfaceVersionId: that.apiData.interfaceVersionId,
        target: that.selectVersion
      };
      getRequest('/gateway-manage/reset-api', para)
        .then(res => {
          let resData = res.data;
          if (resData.code == '0000') {
            showMsg.showmsg('回退成功', 'success');
            that.setData();
            return;
          }
          errMsg.errorMsg(resData);
        })
        .catch(function(error) {
          that.$message.error({
            duration: 1000,
            message: error.message
          });
        });
    },

    /**
     *  提交数据
     */
    setData(list) {
      const that = this;
      that.$emit('hideHistoryDialog');
      /* that.$nextTick(() => {
        that.formData.classifyName = '';
      }); */
    },
    /**
     *  分页
     */
    handleSizeChange(val) {
      this.pageSize = val;
      this.getData();
    },
    handleCurrentChange(val) {
      this.currentPage = val;
      this.getData();
    },
    /**
     * 查看定义详情页
     */
    handleShow(index, row) {
      // const that = this;
      window.open(`#/apiListManageShow?editFlag=0&interfaceId=${row.interfaceId}&interfaceName=${row.interfaceName}&interfaceVersionId=${row.interfaceVersionId}&publishRecordId=${row.publishRecordId}`);
    },
    /**
     *  获取数据
     */
    getData() {
      const that = this;
      let para = {
        pageNum: that.currentPage,
        pageSize: that.pageSize,
        sceneCode: that.apiData.sceneCode,
        interfaceId: that.$route.query.interfaceId
      };
      getRequest('/gateway-manage/page-api-publish-record', para)
        .then(res => {
          let resData = res.data;
          if (resData.code == '0000') {
            that.tableData = resData.result.result || [];
            that.totalCount = resData.result.totalCount;
            return;
          }
          errMsg.errorMsg(resData);
        })
        .catch(function(error) {
          that.$message.error({
            duration: 1000,
            message: error.message
          });
        });
    }
  },
  watch: {
    $route: {
      handler: function(val, oldVal) {},
      // 深度观察监听
      deep: true
    },
    historyShow: function(newData, oldData) {
      const that = this;
      that.customDialog = newData;
      that.getData();
    }
  },

  /* 接收数据 */
  mounted() {
    const that = this;
    that.customDialog = that.historyShow;
    that.getData();
  }
};
</script>

<style lang="less" scoped>
.w-320 {
  width: 320px;
}
.m-t-14 {
  margin-top: 14px;
}

.edit-dialog {
  /deep/ .el-dialog__footer {
    border-top: none;
  }
}
</style>
