<template>
  <div class="fullheight">
    <div>
      <el-input
        v-model="queryData.name"
        style="width:250px;margin-left:17px"
        placeholder="请输入报表名称"
        @change="searchName()"
        clearable
      />
      <el-button
        type="primary"
        style="margin-left: 10px"
        @click="searchName"
      >搜索</el-button>
    </div>
    <div
      style="display: flex; flex-wrap: wrap;height: calc(100% - 80px);
    overflow: auto;"  
    >
      <el-card class="excel-view-item excel-list-add">
        <a
          class="item-add"
          @click="save"
        >
          <i
            class="el-icon-plus"
            style="font-size: 20px"
          ></i>
          <p style="letter-spacing: 2px; font-size: 14px">新建报表</p>
        </a>
      </el-card>
      <el-card
        class="excel-view-item"
        v-for="item in data.records"
        :key="item.id"
      >
        <div>
          <img
            style="width: 100%; height: 100%"
            src="../../../assets/img/jiade.jpg"
          />
          <div class="item-hidden">
            <a @click="design(item.id)">设计</a>
          </div>
        </div>
        <div class="item-footer">
          <span class="item-name">{{ item.name }}</span>
          <div class="item-icon">
            <a @click="seeView(item.id)">
              <el-tooltip
                class="item"
                effect="dark"
                content="预览模板"
                placement="top"
              >
                <i class="el-icon-view"></i>
              </el-tooltip>
            </a>
            <a>
              <el-tooltip
                class="item"
                effect="dark"
                content="删除模板"
                placement="top"
              >
                <el-popconfirm
                  title="确定删除模板吗？"
                  @onConfirm='deleteTemple(item.id)'
                >
                  <i
                    class="el-icon-delete"
                    slot="reference"
                  ></i>
                </el-popconfirm>
              </el-tooltip>
            </a>
            <a>
              <el-tooltip
                class="item"
                effect="dark"
                content="复制模板"
                placement="top"
              >
                <el-popconfirm
                  title="确定复制模板吗？"
                  @onConfirm='copyTemple(item.id)'
                >
                  <i
                    class="el-icon-files"
                    slot="reference"
                  ></i>
                </el-popconfirm>
              </el-tooltip>
            </a>
            <a @click="openShareTemple(item.id)">
              <el-tooltip
                class="item"
                effect="dark"
                content="分享模板"
                placement="top"
              >
                <i class="el-icon-share"></i>
              </el-tooltip>
            </a>
          </div>
        </div>
      </el-card>
      <!-- 分享打开窗口 -->
      <el-dialog
        title="创建分享链接"
        :visible.sync="dialogVisible"
        width="30%"
        :before-close="handleClose"
      >
        <el-form
          ref="form"
          label-width="80px"
        >
          <ht-form-item
            label="过期时间"
            prop='shareTime'
            label-width="80px"
          >
            <ht-radio
              v-model="time"
              :options="[
              {key: '1', value: '永久有效'},
              {key: '2', value: '7天'},
              {key: '3', value: '1天'},
            ]"
            />
          </ht-form-item>
        </el-form>
        <span
          slot="footer"
          class="dialog-footer"
        >
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button
            type="primary"
            @click="shareTemple"
          >创建链接</el-button>
        </span>
      </el-dialog>
      <!-- 创建链接打开窗口 -->
      <el-dialog
        title="分享链接"
        :visible.sync="shareDialogVisible"
        width="30%"
        :before-close="handleClose"
      >
        <el-form
          ref="form"
          :model='form'
          label-width="80px"
        >
          <el-form-item label="预览链接">
            <el-input
              v-model="form.url"
              id='url'
            />
          </el-form-item>
          <el-form-item label="预览密码">
            <el-input
              style="width:120px"
              v-model="form.psd"
            />
            <el-button
              type="primary"
              style="float:right"
              @click="copyUrl"
            >复制</el-button>
          </el-form-item>
        </el-form>
        <span
          slot="footer"
          class="dialog-footer"
        >
          <el-button
            type="primary"
            @click="shareDialogVisible = false"
          >取消分享</el-button>
        </span>
      </el-dialog>    
    </div>
     <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="queryData.pageNo"
        :page-sizes="[10, 100, 200, 300, 400]"
        :page-size="queryData.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="data.records && data.records.length"
      >
      </el-pagination>
  </div>
</template>
<script>
import report from '@/api/report.js'
export default {
  data() {
    return {
      // 请求参数
      queryData: {
        pageNo: 1,
        pageSize: 10,
        reportType: 'datainfo',
        name: '',
        token: ''
      },
      data: '',
      dialogVisible: false,
      time: '1',
      shareTempleData: '',
      form: {
        url: '',
        psd: ''
      },
      shareDialogVisible: false
    }
  },
  mounted() {
    this.getReportData();
  },
  created() {
      this.getToken();
  },
  methods: {
    //获取报表数据
    getReportData() {
      report.getReportData(this.queryData).then(res => {
        this.data = res.result
      })
    },
    handleSizeChange(val) {
      this.queryData.pageSize = val
    },
    handleCurrentChange(val) {
      this.queryData.pageNo = val
    },
    //保存获取id
    save() {
      report.save().then(res => {
        this.id = res.result.id
        let url = `${window.context.report}jmreport/index/${this.id}?token=${this.queryData.token}`
        window.open(url, '_blank') //新窗口打开
        // let a = document.getElementById('a')
        // a.href = 'http://192.168.40.190:8098/jmreport/index/' + this.id
      })
    },
    //查看报表数据
    seeView(id) {
      console.log(id)
      return window.open(
        window.context.report + 'jmreport/view/' + id + '?token=' + this.queryData.token,
        '_blank'
      )
    },
    //删除模板
    deleteTemple(id) {
      report.delete(id).then(() => {
        //重新获取数据
        this.getReportData()
      })
    },
    //复制模板
    copyTemple(id) {
      report.copyTemple(id).then(() => {
        this.getReportData()
      })
    },
    //分享模板
    openShareTemple(id) {
      this.dialogVisible = true
      report.shareTemple(id).then(res => {
        this.shareTempleData = res.result
      })
    },
    shareTemple() {
      this.shareTempleData.termOfValidity = this.time
      this.dialogVisible = false
      this.shareDialogVisible = true
      //发起请求
      report.shareUrl(this.shareTempleData).then(res => {
        this.shareTempleData = res.result
        this.form.url =
          window.context.report + this.shareTempleData.previewUrl.substring(1)
        this.form.psd = this.shareTempleData.previewLock
      })
    },
    //点击复制按钮复制预览链接
    copyUrl() {
      let url = document.getElementById('url')
      //选中要复制的内容
      url.select()
      //执行复制命令
      document.execCommand('Copy') //执行浏览器复制命令
    },
    //设计
    design(id) {
      return window.open(
        window.context.report + 'jmreport/index/' + id + '?token=' + this.queryData.token,
        '_blank'
      )
    },
    handleClose(done) {
      done()
    },
    //搜索名称
    searchName() {
      report.getReportData(this.queryData).then(res => {
        this.data = res.result
      })
    },
    //获取tokren
     getToken: function () {
        if (window.sessionStorage['currentUser']) {
            var currentUserInfo = eval('(' + window.sessionStorage['currentUser'] + ')');
            // console.log(currentUserInfo.token);
            this.queryData.token = currentUserInfo.token
            // console.log(queryData.token)
            return currentUserInfo.token;
        } else {
            return 'Bearer ';
        }
    }
  }
}
</script>
<style lang='scss' scoped>
/deep/ .el-card__body {
  padding: 0;
}
.excel-view-item {
  position: relative;
  margin: 10px;
  display: flex;
  flex-direction: column;
  width: 23%;
  height: 200px;
  border: 1px solid #eee;
  overflow: hidden;
  //   justify-content: space-between;
  .item-footer {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 40px;
    left: 0;
    line-height: 40px;
    background-color: #efefef;
    display: flex;
    justify-content: space-around;
    align-items: center;
    .item-name {
      margin-left: 30px;
      font-size: 14px;
      text-overflow: ellipsis;
      white-space: nowrap;
      overflow: hidden;
      width: 100px;
      display: inline-block;
    }
    .item-icon {
      // position: absolute;
      // top: 0;
      // right: 30px;
      display: flex;
      i {
        padding: 5px;
        font-size: 14px;
        cursor: pointer;
        margin: 0 auto;
      }
    }
  }
  .item-hidden {
    position: absolute;
    top: 0;
    left: 0;
    background-color: rgba(29, 38, 46, 0.8);
    width: 100%;
    height: 100%;
    display: none;
    // display: flex;
    // align-items: center;
    // justify-content: center;
    a {
      position: absolute;
      top: 40%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 50px;
      height: 30px;
      background-color: #fff;
      line-height: 30px;
      font-size: 14px;
      cursor: pointer;
      text-align: center;
    }
  }
}
.excel-view-item:hover {
  border: 1px #efefef solid;
  .item-add {
    color: #211bce;
  }
  .item-hidden {
    display: block;
  }
}

.excel-list-add {
  border: 1px solid #eee;
  font-size: 14px;
  color: #8eeeff;
  cursor: pointer;
  a {
    height: 100%;
    flex-direction: column;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 50px;
  }
}
.el-pagination {
  position: absolute;
  bottom: 0;
  right: 20px;
}
</style>