<template>
  <div>
    <div class="searchInput" style="margin-bottom:20px;">
      <el-input style="display:inline-block;width:225px;height:30px" placeholder="请输入模板名称" v-model="qMsg.TemplateName"
        size="small" clearable @keyup.enter.native="qMsg.pageIndex = 1, getList()"
        @clear="qMsg.pageIndex = 1, getList()">
      </el-input>
      <span class="el-icon-search" style="color:#979dad;font-size:14px;position:relative;top:1px"
        @click="qMsg.pageIndex = 1, getList()"> </span>
    </div>
    <br>
    <el-table :data="dataList" style="width: 100%">
      <el-table-column prop="Id" label="ID" width="100">
      </el-table-column>
      <el-table-column prop="TemplateName" label="模板名称">
      </el-table-column>
      <el-table-column prop="address" label="操作" width="100">
        <template slot-scope="scope">
          <el-button @click="getModel(scope.row)" size="mini">选择</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination background @current-change="handleCurrentChange" :page-size="qMsg.pageSize"
      layout="prev, pager, next" :total="total">
    </el-pagination>
  </div>
</template>
<script>
export default {
  data() {
    return {
      dataList: [],
      total: 0,
      qMsg: {
        pageIndex: 1,
        pageSize: 20,
        TemplateName: ""
      }
    }
  },
  methods: {
    handleCurrentChange(val) {
      this.qMsg.pageIndex = val;
      this.getList();
    },
    //获取数据
    getList() {
      this.apipost("/api/Template/GetMiniTemplatePageList", this.qMsg, res => {
        if (res.data.resultCode == 1) {
          this.dataList = res.data.data.pageData;
          this.total = res.data.data.count;
        } else {
          this.Info(res.data.message);
        }
      })
    },
    //选择
    getModel(item) {
      var obj = {
        Id: item.Id,
        TemplateName: item.TemplateName
      }
      this.$emit('getCustom', obj)
    },
  },
  mounted() {
    this.getList();
  }
}

</script>
