<template>
  <div class="msg-history-wrap">
    <bread-crumb :curmbFirst="curmbFirst"></bread-crumb>
    <div class="component-content screenSet" id="screenSet">
      <!-- <el-form ref="formData" :model="formData" label-width="100px" style="margin-bottom: 20px;margin-left: 7px;">
        <input type="hidden" v-model="formData.all" value=5>
        <el-row>
          <el-col style="width:290px;">
            <el-form-item label="协议名称" prop="protocolName">
              <el-input size="small" v-model="formData.protocolName" placeholder="请输入协议名称" ></el-input>
            </el-form-item>
          </el-col>
          <el-col style="position:relative; top: 4px; width: 200px; margin-left: 20px;">
            <el-button type="primary" size="small" @click="handleSearchClick()">查询</el-button>
            <el-button class="right" type="primary" size="small" @click="gotoAdd()">新建协议</el-button>
          </el-col>
        </el-row>
      </el-form> -->


      <el-form ref="formData" :inline="true" :model="formData" class="demo-form-inline" style="padding: 10px 30px 10px 40px;">
        <el-form-item label="协议名称" prop="protocolName">
          <el-input size="small" v-model="formData.protocolName" placeholder="请输入协议名称"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button size="small" type="primary" @click="handleSearchClick">查询</el-button>
        </el-form-item>
        <el-form-item class="right" >
          <el-button type="primary" size="small" @click="gotoAdd()">新建协议</el-button>
        </el-form-item>
      </el-form>
      <div style="padding: 0 40px;">
        <el-table
          :data="tableData"
          border
          style="width: 100%;">
          <!-- <el-table-column
            align="center"
            type="index"
            label="编号"
            width="50">
          </el-table-column>           -->
          <el-table-column
            align="center"
            prop="protocolType"
            label="编号"
            width="50">
          </el-table-column>
          <el-table-column
            align="center"
            prop="protocolName"
            label="协议名称"
            width="400"
            >
          </el-table-column>
          <el-table-column
            align="center"
            prop="signNum"
            label="签署数量"
            width="120"
            >
          </el-table-column>
          <!-- <el-table-column
            align="center"
            prop="protocolType"
            label="协议类型"
            >
          </el-table-column> -->
          <!-- <el-table-column
            align="center"
            prop="versionNo"
            label="协议版本"
            >
          </el-table-column> -->
          <el-table-column
            align="center"
            prop="createdName"
            label="创建人姓名"
            width="120"
            >
          </el-table-column>          
          <!-- <el-table-column
            align="center"
            prop="creatTime"
            label="创建时间"
            >
            <template slot-scope="scope">
              {{ returnSendTime(scope.row.creatTime) }}
            </template>
          </el-table-column> -->
          <el-table-column
            align="center"
            label="最近更新时间"
            prop="updateTime"
            width="160"
            >
            <!-- <template slot-scope="scope">
              {{ returnSendTime(scope.row.updateTime) }}
            </template> -->
          </el-table-column>

          <el-table-column fixed="right" label="操作" min-width="200" align="center">
            <template slot-scope="scope">
              <el-button
                @click="gotoDetail(scope.row, 0)"
                type="primary"
                size="small"
              >查看详情</el-button>
              <el-button
                @click="gotoUpdate(scope.row, 0)"
                type="primary"
                size="small"
              >更新版本</el-button>
              <el-button
                @click="gotoHistoryList(scope.row, 0)"
                type="primary"
                size="small"
              >历史版本</el-button>
            </template>
          </el-table-column>

        </el-table>
        <div class="pagination">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="formData.pageNo"
            :page-sizes="[10, 30, 50, 100]"
            :page-size="formData.pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="totalRows">
          </el-pagination>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
  import { openLoading, closeLoading } from "../../utils/utils";
  import BreadCrumb from "../../components/breadcrumb.vue";
  export default {
    components: {
      BreadCrumb,
    },
    data() {
      return {
        curmbFirst: "协议管理",
        formData: {
          all: 2,
          protocolName: '',
          pageNo: 1,
          pageSize: 10,
        },
        totalRows: 0,
        tableData: [{}],
      }
    },
    created() {
      this.getProtocolList(this.formData);
    },
    mounted() {
      // StandardEditor
      //   .create( document.querySelector( '#editor' ) )
      //   .catch( error => {
      //     console.error( error );
      //   });
      // https://cdn.ckeditor.com/

    },
    methods: {
      // 跳转到详情页面（预览页面）
      gotoDetail(row) {
        this.$router.push({
          path: '/protocol-detail',
          query: {
            isUpdate: true,
            protocolId: row.protocolId
          }
        })
      },

      // 跳转到添加或修改页面
      gotoAdd() {
        this.$router.push({
          path: '/create-protocol',
          query: {
            isUpdate: false
          }
        })
      },

      // 跳转到添加或修改页面
      gotoUpdate(row) {
        this.$router.push({
          path: '/create-protocol',
          query: {
            isUpdate: true,
            protocolId: row.protocolId,
            protocolType: row.protocolType
          }
        })
      },

      // 跳转到历史版本页面
      gotoHistoryList(row) {
        this.$router.push({
          path: '/protocol-history',
          query: {
            protocolId: row.protocolId,
            protocolType: row.protocolType
          }
        })
      },

      // 获取协议列表
      getProtocolList(params) {
        openLoading(this);
        this.GET("/smartcontract/protocolManage/protocols", params).then(res => {
          closeLoading(this);
          if(res && res.code && res.code == '000000'){
            if( res && res.data ){
              this.tableData = res.data.list || []
              this.totalRows = res.data.totalRows || 0;
            }
          }else{
            this.$message({
              message: '接口请求失败',
              type: 'warning'
            });
          }
        });
      },
      handleSearchClick() {
        console.log(this.formData);
        this.getProtocolList(this.formData);
      },
      handleSizeChange(val){
        this.formData.pageSize = val;
        this.getProtocolList(this.formData);
      },
      handleCurrentChange(val) {
        this.formData.pageNo = val;
        this.getProtocolList(this.formData);
      },
      returnSendTime(creatTime){
        if( creatTime ){
          return creatTime.year + '-' + creatTime.monthValue + '-' + creatTime.dayOfMonth + ' ' + creatTime.hour + ':' + creatTime.minute ;
        }else{
          return '-';
        }
      },
    }
  }
</script>  
<style lang="scss">
  .msg-history-wrap{
    .el-form-item .el-form-item__label{
      font-size: 14px;
    }
    .component-content{
      margin-top: 60px;
      padding: 10px;
      background: #fff;
    }
    .pagination{
      margin: 20px 0;
      text-align: right;
    }
    .status-tj{
      &.success{
        color: #409EFF;
      }
    }
  }
</style>
