<!--
 * @Descripttion: 当前组件信息
 * @version: 1.0.0
 * @Author: 无尘
 * @Date: 2019-07-31 19:53:49
 * @LastEditors: 无尘
 * @LastEditTime: 2020-09-24 09:46:58
 -->
<!--
<publish-list></publish-list>
-->

<template>
  <div>
    <!-- <div class="search-wrap m-b-20">
      <el-input clearable class="w-320" placeholder="请输入发布版本" v-model="searchValue" @keyup.native="value => searchData(value)" @clear="clearInput">
        <i slot="prefix" class="el-input__icon el-icon-search"></i>
      </el-input>
    </div> -->
    <div class="table-wrap">
      <el-table
        v-loading="loading"
        :data="tableData"
        style="width: 100%">
        <el-table-column
          prop="publishRecordId"
          label="发布版本"
          show-overflow-tooltip />
        <el-table-column
          label="版本号"
          show-overflow-tooltip>
          <template slot-scope="scope">
            {{ scope.row.version }}
          </template>
        </el-table-column>
        <el-table-column
          label="环境"
          show-overflow-tooltip>
          <template slot-scope="scope">
            {{ scope.row.sceneName }}
          </template>
        </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.publishTime | timeStampToYmd }}
            </div>
            <div class="color-606266 line-18">
              {{ scope.row.publishTime | 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>
</template>
<script>
import { getRequest } from '@/api/api';
import { _debounce } from '@/assets/js/public';
import errMsg from '@/assets/js/error';
export default {
  name: 'PublishList',
  data() {
    return {
      // 面包屑参数
      navPath: [
        {
          name: '发布记录',
          path: ''
        }
      ],
      searchValue: '',
      loading: false,
      tableData: [
        /* {
          interfaceVersionId: '',
          version: '123',
          status: '', // 0 删除 1更新修改 2发布 3 历史发布版本
          proxyType: '',
          defaultFlag: false,
          sceneCode: '',
          sceneName: '测试',
          remark: 'test',
          createTime: 1564455643252
        } */
      ],
      pageSize: 20,
      currentPage: 1,
      totalCount: 0
    };
  },

  /* 接收数据 */
  mounted() {
    const that = this;
    that.$nextTick(() => {
      that.getData();
    });

    that.$emit('showTab', 4);
  },
  methods: {
    /**
     * @description: 搜索
     * @author: 无尘
     */
    searchData: _debounce(function() {
      const that = this;
      that.currentPage == 1;
      that.getData();
    }, 500),

    /**
     * @description: 搜索清除
     * @author: 无尘
     */
    clearInput() {
      this.currentPage = 1;
      this.getData();
    },
    /**
     * @description: 分页
     * @param {Number} val
     * @author: 无尘
     */
    handleSizeChange(val) {
      this.pageSize = val;
      this.getData();
    },
    handleCurrentChange(val) {
      this.currentPage = val;
      this.getData();
    },
    /**
     * @description: 查看定义详情页
     * @param {Boolean} index
     * @param {Object} row
     * @author: 无尘
     */
    handleShow(index, row) {
      const that = this;
      that.$router.push(`/apiListManageShow?editFlag=0&interfaceId=${that.$route.query.interfaceId}&interfaceName=${that.$route.query.interfaceName}&projectId=${row.projectId}&projectName=${that.$route.query.projectName}&interfaceGroupId=${row.interfaceGroupId}&interfaceGroupName=${that.$route.query.interfaceGroupName}&interfaceVersionId=${row.interfaceVersionId}&publishRecordId=${row.publishRecordId}`);
    },
    /**
     * @description: 获取数据
     * @author: 无尘
     */
    getData() {
      const that = this;
      that.loading = true;
      let para = {
        pageNum: that.currentPage,
        pageSize: that.pageSize,
        interfaceId: that.$route.query.interfaceId
      };
      getRequest('/gateway-manage/page-api-publish-record', para)
        .then(res => {
          let resData = res.data;
          that.loading = false;
          if (resData.code == '0000') {
            that.tableData = resData.result.result || [];
            that.totalCount = resData.result.totalCount;
            return;
          }
          errMsg.errorMsg(resData);
        })
        .catch(function(error) {
          that.loading = false;
          that.$message.error({
            duration: 1000,
            message: error.message
          });
        });
    }
  },
  watch: {
    $route: {
      handler: function(val, oldVal) {},
      // 深度观察监听
      deep: true
    }
  },

};
</script>

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