<!--
  @description: 公告模板
  @Modifier: haoFx
  @routerPath:
  @date: 2020/1/7-17:17
-->

<template>
  <el-dialog
    :close-on-click-modal="false"
    visible.sync="visible"
    title="选择模板新建"
    custom-class="el-dialog__body-minHeight"
    width="720px"
    top="calc((100vh - 611px) / 2)"
  >
    <div class="clearfix mb16">
      <div class="fl">
        <el-button type="primary">
          新建分类
        </el-button>
        <el-button type="primary">
          导入
        </el-button>
        <el-button type="primary">
          删除
        </el-button>
      </div>
    </div>
    <ul v-for="(item,index) in templateList" :key="index" class="template">
      <li class="pointer">
        <div class="img">
          <img src="@assets/img/common/muban/muban.jpg">
        </div>
        {{ item.name }}
      </li>
    </ul>
    <!--底部操作按钮-->
    <span slot="footer" class="dialog-footer">
      <el-button type="primary" @click="application">应 用</el-button>
      <el-button @click="visible = false">取 消</el-button>
    </span>
  </el-dialog>
</template>

<script>
export default {
  name: 'MakeTenderingBulletinDialog',
  data() {
    return {
      visible: false,
      templateList: [{
        name: '中华人民共和国标准设备采购招标文件'
      }, {
        name: '中华人民共和国标准设备采购招标文件'
      }, {
        name: '中华人民共和国标准设备采购招标文件'
      }, {
        name: '中华人民共和国标准设备采购招标文件'
      }] // 模板列表
    }
  },
  methods: {
    // 应用模板
    application() {

    },
    // 打开模板弹框
    selectTemplate() {
      this.visible = true
    }
  }
}
</script>

<style scoped lang="less">
/deep/.el-dialog__body-minHeight{
  .el-dialog__body {
    height: 500px;
  }
}
.template{
  margin-top: 12px;
  li{
    width:169px;
    height: 209px;
    padding: 12px;
    box-sizing: border-box;
    border: 1px solid #dddddd;
    border-radius: 3px;
    float: left;
    margin: 0 3px 6px;
    .img{
      width: 76px;
      height: 90px;
      margin: 0 auto 16px;
    }
  }
}
</style>
