<template>
  <div class="height100 form-center-grid-con" style="width:100%">
    <div class="filter_con">
      <div class="flexbox"  v-for="(filter,index) in filterList" :key="index">
        <span class="font12">{{filter.title}}:</span>
        <overflowBox class="flex" @clickFilter="clickFilter" :data="filter.datas" v-model="filterData[filter.code]"  :key="index">  </overflowBox>
        <!-- <div
          class="area_tag"
          @click="clickFilter(item,filter)"
          :class="{area_tag_active:filterData[filter.code] == item.itemCode}"
          v-for="(item,index) in filter.datas"
          :key="index"
        >{{item.itemName}}
        </div>
        <div v-if="filter.filterMore&&filter.filterMore.length>0">更多</div> -->
      </div>
    </div>
    <div class="sort_con">
      <div class="flexbox font12">
        <div class="sort_tag vxe-table" v-for="(sort,index) in sortList" :key="index">
          <span :class="sortData.sortName==sort.code?'active':''">{{sort.title}}</span>
          <div class="vxe-cell--sort">
            <i
              title="升序：最低到最高"
              :class="'vxe-sort--asc-btn vxe-icon--caret-top '+(sortData.sortName==sort.code&&sortData.sortOrder=='asc'?'sort--active':'')"
              @click="clickSort(sort,'asc')"
            ></i>
            <i
              title="降序：最高到最低"
              :class="'vxe-sort--desc-btn vxe-icon--caret-bottom '+(sortData.sortName==sort.code&&sortData.sortOrder=='desc'?'sort--active':'')"
              @click="clickSort(sort,'desc')"
            ></i>
          </div>
        </div>
        <div style="margin-left: auto;padding:3px 0" class="flexbox">
          <ts-input
            style="margin-bottom:0px;"
            v-model="filterData.designName"
            placeholder="请输入名称搜索"
            width="200px"
            @searchClick="refreshData()"
            @keyup="keyup"
            type="search"
          ></ts-input>
          <ts-button class="mrgl5" @click="resetFilter">重置</ts-button>
        </div>
      </div>
    </div>
    <div class="grid-main-con">
      <!-- <div class="report-item flex" v-for="(item,index) in formData.rows" :key="index" ></div> -->
      <ts-row type="flex">
        <ts-col v-for="(item,index) of formData.rows" :key="index" class="report-item">
          <ts-row type="flex">
            <div class="top-left flexbox">
              <span class="iconfont icon-shuju2"></span>
              <span
                class="text hidden nowrap ellipsis transition__all_3s"
                :title="item.designName||'-'"
              >{{item.designName||'-'}}</span>
            </div>
            <div class="item_operate">
              <span
                @click="onTargetInfo(item,'preview')"
                title="预览"
                class="iconfont icon-chaxun1 no-visiable"
              ></span>
              <span
                @click="onTargetInfo(item,'favorite')"
                title="收藏"
                class="iconfont el-icon-star-off no-visiable"
                v-if="!item.favoriteId"
              ></span>
              <span
                @click="onTargetInfo(item,'delFavorite')"
                title="点击取消收藏"
                class="iconfont el-icon-star-off"
                style="background:var(--yellow)"
                v-if="item.favoriteId"
              ></span>
            </div>
          </ts-row>
          <ts-row type="flex" class="center-con font12">
            <div class="flexbox font12 desc-con">
              <span style="width:38px">描述：</span>
              <span class="co999 valDesc" :title="item.designerDesc||'-'">{{item.designerDesc||'-'}}</span>
            </div>
            <ts-row type="flex" class="buttom-col">
              <ts-col>
                业务分类：
                <div
                  class="val ellipsis hidden nowrap"
                  :title="item.busTypeName||'-'"
                >{{item.busTypeName||'-'}}</div>
              </ts-col>
              <ts-col>
                需求部门：
                <div
                  class="val ellipsis hidden nowrap"
                  :title="item.demandDept||'-'"
                >{{item.demandDept||'-'}}</div>
              </ts-col>
            </ts-row>
            <ts-row type="flex" class="buttom-col">
              <ts-col>
                主题分类：
                <div
                  class="val ellipsis hidden nowrap"
                  :title="item.themeClassifyName||'-'"
                >{{item.themeClassifyName||'-'}}</div>
              </ts-col>
              <ts-col>
                统计维度：
                <div
                  class="val ellipsis hidden nowrap"
                  :title="item.dimension=='00'?'临床':(item.dimension=='01'?'经管':'-')"
                >{{item.dimension=='00'?'临床':(item.dimension=='01'?'经管':'-')}}</div>
              </ts-col>
            </ts-row>
            <div class="flexbox font12">
              更新时间：
              <div
                class="val ellipsis hidden nowrap"
                :title="item.updateDate||'-'"
              >{{item.updateDate||'-'}}</div>
            </div>
          </ts-row>
        </ts-col>
      </ts-row>
      <tsLoading :loading="loading"></tsLoading>
      <ts-empty v-if="!loading&&(!formData.rows||formData.rows.length==0)" />
    </div>
    <el-pagination
      v-if="formData.rows"
      small
      @size-change="handleSizeChange"
      @current-change="currentPage"
      :current-page="formData.pageNo"
      :page-sizes="[20, 40, 80, 160]"
      :page-size="formData.pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="formData.totalCount"
    ></el-pagination>
    <diaLog
      :source="{title:layObj.title,closeBtn:true}"
      ref="userDefinedRightDialog"
      class="userDefinedRightDialog_con"
      width="100%"
      height="100%"
    >
      <biPreviewForm
        v-if="layObj.dialogType==='previewReport'"
        ref="biPreview"
        :paramId="layObj.paramId"
        :isFromPreview="true"
        :isFromList="true"
        :versionCode="layObj.versionCode"
      ></biPreviewForm>
    </diaLog>
  </div>
</template>

<script>
import overflowBox from './overflowBox.vue'
export default {
  name: 'formCenterGrid',
  components: {overflowBox},
  props: {},
  data() {
    return {
      filterData: { themeClassifyValue: '', busType: '' },
      filterListShow:[],
      filterListHide:[],
      filterList: [
        {
          title: '业务分类',
          dictKey: 'BI_BUSTYPE',
          datas: [],
          code: 'busType'
        },
        {
          title: '主题分类',
          dictKey: 'PLAT_USER_EDITOR_REPORT',
          datas: [],
          code: 'themeClassifyValue'
        }
      ],
      sortData: { sortName: '', sortOrder: '' },
      sortList: [
        {
          title: '默认',
          code: 'createDate'
        },
        {
          title: '按需求部门',
          code: 'demandDept'
        },
        {
          title: '按更新时间',
          code: 'updateDate'
        }
      ],
      formData: { dataList: [] },
      loading: false,
      layObj: {
        title: '', // 标题
        closeBtn: true // 关闭按钮区域，boolean 默认：false
      }
    }
  },
  created() {},
  mounted() {
    this.refreshData()
    this.getDictSource()
    
  },
  methods: {
    // 得到字典过滤数据
    async getDictSource() {
      let _this  = this
      for (let item of this.filterList) {
        item.datas = []
        item.datas.push({ itemName: '全部', itemCode: '' })
        await this.$api({
          url: '/ts-system/api/dict/item/list/' + item.dictKey,
          method: 'get',
          headers: {
            'Content-Type': 'application/json; charset=utf-8'
          }
        })
          .then(function(response) {
            if (response.success) {
              item.datas = item.datas.concat([...response.object])
            }
          })
          .catch(function(error) {})
      }
    },
    // 点击过滤数据
    clickFilter(item) {
      this.$nextTick(() => {
        this.refreshData()
        this.$forceUpdate()
      })
    },
    clickSort(sort, sortOrder) {
      this.$nextTick(() => {
        this.sortData = { sortName: sort.code, sortOrder: sortOrder }
        this.refreshData()
        this.$forceUpdate()
      })
    },
    // 键盘按下
    keyup(e) {
      if (e.$event.keyCode === 13) {
        // 回车
        this.refreshData()
      }
    },
    refreshData() {
      let _this = this
      this.loading = true
      let param = {
        themeClassifyValue: '',
        designName: '',
        systemReport: '',
        appType: 1,
        pageSize: this.formData.pageSize || 20,
        pageNo: this.formData.pageNo || 1,
        versionCode: '11111'
      }
      param = Object.assign(param, this.filterData, this.sortData)
      this.$api({
        url: '/ts-bi/api/BiReportDesign/list',
        method: 'get',
        loading: true,
        data: param,
        headers: {
          'Content-Type': 'application/json; charset=utf-8'
        }
      }).then(res => {
        _this.loading = false
        _this.formData = { ...res }
      })
    },
    currentPage(pageNo) {
      this.formData.pageNo = pageNo
      this.refreshData()
    },
    handleSizeChange(pageSize) {
      this.formData.pageSize = pageSize
      this.refreshData()
    },
    // 重置筛选
    resetFilter() {
      this.filterData = { themeClassifyValue: '', busType: '' }
      this.sortData = { sortName: '', sortOrder: '' }
      this.refreshData()
    },
    onTargetInfo(item, key) {
      this.$nextTick(() => {
        switch (key) {
          case 'preview':
            this.layObj.paramId = item.id
            this.layObj.versionCode = item.versionCode || '草稿'
            this.layObj.title = item.designName
            this.layObj.dialogType = 'previewReport'
            this.$refs.userDefinedRightDialog.open()
            break
          case 'favorite':
            this.saveFavorite(item)
            break
          case 'delFavorite':
            this.delFavorite(item)
            break
        }
      })
    },
    // 收藏
    saveFavorite(item) {
      const _this = this
      this.$api({
        url: '/ts-bi/api/BiUserFavorite/save',
        method: 'post',
        data: {
          busiId: item.id,
          userId: global.userInfo.userId,
          favoriteType: '3' // 固定值
        },
        headers: {
          'Content-Type': 'application/json'
        }
      })
        .then(function(response) {
          if (response.success) {
            item.favoriteId = response.object
            _this.$forceUpdate()
            _this.$utils.msg(_this, '收藏成功!', 'success')
          } else {
            _this.$utils.msg(_this, response.message || '收藏失败!', 'error')
          }
        })
        .catch(function(error) {
          // 请求失败
          _this.$utils.msg(_this, '服务器数据加载失败!', 'error')
        })
    },
    // 取消收藏
    delFavorite(item) {
      const _this = this
      this.$api({
        url: '/ts-bi/api/BiUserFavorite/delete/' + item.favoriteId,
        method: 'post',
        data: {},
        headers: {
          'Content-Type': 'application/json'
        }
      })
        .then(function(response) {
          if (response.success) {
            item.favoriteId = null
            _this.$forceUpdate()
            _this.$utils.msg(_this, '取消成功!', 'success')
          } else {
            _this.$utils.msg(_this, response.message || '取消失败!', 'error')
          }
        })
        .catch(function(error) {
          // 请求失败
          _this.$utils.msg(_this, '服务器数据加载失败!', 'error')
        })
    }
  },
  watch: {},
  activated() {},
  destroyed() {},
  deactivated() {}
}
</script>
<style lang="less" scoped>
.form-center-grid-con {
  .filter_con {
    .flexbox {
      align-items: center;
      margin-bottom: 5px;
      padding-left:5px;
    }
    .flexbox:first-child {
      padding-top: 5px;
    }
    .area_tag_active:hover {
      color: var(--base-acv);
    }
    .area_tag_active:hover {
      color: #fff;
    }
    .area_tag_active {
      color: #fff;
      border: 1px solid #d9ecff;
      background-color: var(--base-acv) !important;
    }
    .area_tag {
      background-color: #fff;
    }
  }
  .sort_con {
    .flexbox {
      align-items: center;
      // margin-top: 5px;
    }
    .sort_tag {
      cursor: pointer;
      margin: 0 10px;
      &:hover,
      .active {
        color: var(--base-acv);
      }
    }
  }
  .grid-main-con {
    height: calc(100% - 53px - 35px - 40px);
    overflow: hidden;
    overflow-y: auto;
    .report-item {
      flex: none !important;
      height: 167px;
      width: calc(25% - 15px);
      border: 1px solid var(--border_color);
      padding: 5px;
      margin: 0 15px 15px 0;
      border-radius: 3px;
      background: #ffffff;
      &:hover {
        border: 1px solid var(--button_color);
        .item_operate {
          .no-visiable {
            display: inline;
          }
        }
      }
      .item_operate {
        position: absolute;
        top: 8px;
        right: 3px;
        z-index: 4;
        .no-visiable {
          display: none;
        }

        span {
          padding: 3px;
          margin-right: 3px;
          border-radius: 25px;
          background: #c7defe;
          color: #ffffff;
          cursor: pointer;
          font-weight: bold;
          &:hover {
            background: var(--button_color);
          }
        }
      }
      .val {
        color: var(--base-acv);
        width: calc(100% - 60px);
      }
      .center-con {
        width: calc(100% - 30px) !important;
        border-top: 1px solid var(--border_color);
        margin: 0px 5px 0 25px;
        line-height: 18px;
        padding-top: 10px;
        height: calc(100% - 35px);
        .desc-con {
          height: calc(100% - 70px);
          width: 100%;
          .valDesc {
            width: calc(100% - 38px);
            overflow: hidden;
            text-overflow: ellipsis;
            margin: 0 auto;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 3;
          }
        }
        .buttom-col {
          line-height: 16px;
          .m-col {
            width: 50%;
            display: flex;
          }
        }
      }
      .top-left {
        flex: 1;
        height: 30px;
        line-height: 23px;
        font-weight: bold;
        width: 100%;
        .text {
          width: calc(100% - 50px - 22px);
          margin-left: 2px;
        }
        .iconfont {
          color: #fff;
          background: var(--base-acv);
          border-radius: 25px;
          height: 22px;
          width: 22px;
          text-align: center;
        }
      }
    }
  }
  /deep/.el-pagination--small {
    float: right;
    .el-pagination__total,
    span,
    .el-pagination__sizes .el-input .el-input__inner {
      font-size: 12px !important;
      height: 26px;
      line-height: 26px;
    }
  }
  .userDefinedRightDialog_con {
    /deep/.layer-con__con {
      margin: 0;
      background-color: var(--light-back-grey);
    }
  }
}
</style>
