<!--
 * @Descripttion: 当前组件信息
 * @version: 1.0.0
 * @Author: 无尘
 * @Date: 2019-08-05 16:32:37
 * @LastEditors: 无尘
 * @LastEditTime: 2019-10-21 16:23:47
 -->
<!--
<record-list
  :editRow="editRow"
  :recordShow="recordShow"
  @hideRecordDialog="hideRecordDialog">
</record-list>

import recordList from '@/components/api/record-list.vue'
 -->
<template>
  <div v-show="customDialog">
    <el-dialog class="edit-dialog" title="发布记录" :visible.sync="customDialog" width="600px" :before-close="handleClose">
      <div class="edit-dialog-body">
        <el-table :data="tableData" style="width: 100%">
          <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.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 @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>
    </el-dialog>
  </div>
</template>
<script>
import { getRequest } from '@/api/api';
import errMsg from '@/assets/js/error';
export default {
  name: 'record-list',
  props: {
    recordShow: {
      type: Boolean,
      default: false
    },
    editRow: {
      type: Object,
      default() {
        return {
          interfaceVersionId: '',
          version: '',
          status: '', // 0 删除 1更新修改 2发布 3 历史发布版本
          description: '',
          proxyType: '',
          defaultFlag: false,
          sceneCode: '',
          sceneName: '',
          remark: ''
        };
      }
    }
  },
  data() {
    return {
      customDialog: false, // 弹框显示
      formData: {
        interfaceVersionId: '',
        version: '',
        status: '', // 0 删除 1更新修改 2发布 3 历史发布版本
        description: '',
        proxyType: '',
        defaultFlag: false,
        sceneCode: '',
        sceneName: '',
        remark: ''
      },
      rules: {},
      tableData: [
        /* {
          interfaceVersionId: '1',
          version: '测试',
          remark: '描述内容',
          createTime: 1564455643252
        } */
      ],
      pageSize: 5,
      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('hideRecordDialog');
    },

    /**
     *  分页
     */
    handleSizeChange(val) {
      this.pageSize = val;
      this.getData();
    },
    handleCurrentChange(val) {
      this.currentPage = val;
      this.getData();
    },
    /**
     * 查看定义详情页
     */
    handleShow(index, row) {
      const that = this;
      that.$router.push(`/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}`);
    },
    /**
     *  获取数据
     */
    getData() {
      const that = this;
      let para = {
        pageNum: that.currentPage,
        pageSize: that.pageSize,
        version: that.formData.version,
        sceneCode: that.formData.sceneCode,
        interfaceId: that.formData.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: {
    recordShow: function(newData, oldData) {
      const that = this;
      that.customDialog = newData;
    },
    editRow: function(newData, oldData) {
      const that = this;
      that.formData = JSON.parse(JSON.stringify(newData));
      if (Object.keys(newData).length) {
        that.getData();
      }
    }
  },

  /* 接收数据 */
  mounted() {
    const that = this;
    that.customDialog = that.recordShow;
    that.formData = JSON.parse(JSON.stringify(that.editRow));
  }
};
</script>

<style lang="less" scoped>
.edit-dialog {
  /deep/ .el-dialog__body {
    padding: 25px 20px 17px 20px;
    min-height: 352px;
  }

  /deep/ .el-dialog__footer {
    border: none;
    padding-top: 3px;
  }

  &__title {
    width: 100%;
    height: 38px;
    padding: 12px 15px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    background: rgba(235, 238, 245, 1);
  }

  .el-alert--info {
    width: 400px;
    font-size: 14px;
    color: #606266;
    background: #e6f7ff;
    border: 1px solid rgba(145, 213, 255, 1);
  }
  .el-icon-info {
    width: 12px;
    font-size: 12px;
    color: #1890ff;
  }
  .el-form {
    margin-top: 40px;
  }
}
</style>
