<!--
 * @Descripttion: 当前组件信息
 * @version: 1.0.0
 * @Author: 无尘
 * @Date: 2019-08-07 13:48:12
 * @LastEditors: 无尘
 * @LastEditTime: 2020-09-23 18:13:33
 -->
<!--
<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
            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
                type="text"
                @click="handleShow(scope.$index, scope.row)">
                查看
              </el-button>
            </template>
          </el-table-column>
        </el-table>
        <div
          v-if="!!totalCount"
          class="pagination text-right m-t-14">
          <dm-pagination
            small
            :page-size="pageSize"
            :current-page="currentPage"
            layout="prev, pager, next"
            :total="totalCount"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange" />
        </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: 'GoHistory',
  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
    };
  },

  /* 接收数据 */
  mounted() {
    const that = this;
    that.customDialog = that.historyShow;
    that.getData();
  },
  methods: {
    /**
     * @description: 关闭
     * @param {Function} done
     * @author: 无尘
     */
    handleClose(done) {
      const that = this;
      done();
      that.hideDialog();
    },

    /**
     * @description: 取消
     * @author: 无尘
     */
    customCancel() {
      const that = this;
      that.hideDialog();
    },

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

    /**
     * @description: 确定回退
     * @returns {Boolean}
     * @author: 无尘
     */
    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
          });
        });
    },

    /**
     * @description: 提交数据
     * @author: 无尘
     */
    setData() {
      const that = this;
      that.$emit('hideHistoryDialog');
      /* that.$nextTick(() => {
        that.formData.classifyName = '';
      }); */
    },
    /**
     * @description: 分页
     * @param {Number} val
     * @author: 无尘
     */
    handleSizeChange(val) {
      this.pageSize = val;
      this.getData();
    },
    handleCurrentChange(val) {
      this.currentPage = val;
      this.getData();
    },
    /**
     * @description: 查看定义详情页
     * @param {Number} index
     * @param {Object} row
     * @author: 无尘
     */
    handleShow(index, row) {
      const that = this;
      window.open(`#/apiListManageShow?editFlag=0&interfaceId=${row.interfaceId}&interfaceName=${row.interfaceName}&interfaceVersionId=${row.interfaceVersionId}&publishRecordId=${row.publishRecordId}&projectId=${row.projectId}&projectName=${that.$route.query.projectName}&interfaceGroupId=${row.interfaceGroupId}&interfaceGroupName=${that.$route.query.interfaceGroupName}`);
    },
    /**
     * @description: 获取数据
     * @author: 无尘
     */
    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();
    }
  }
};
</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>
