<template>
  <div id="shopping" class="dg-databasket">
    <el-popover ref="popover" v-model="shopCart.show" placement="top">
      <el-table
        ref="popverTable"
        :data="shopCart.items"
        border
        size="mini"
        style="width: 100%"
        min-height="200"
        max-height="450"
        @selection-change="shopSelectionChange"
      >
        <el-table-column type="selection" width="40" label="序号"></el-table-column>
        <el-table-column width="180" property="id" label="名称"></el-table-column>
        <el-table-column width="240" property="name" label="中文名称"></el-table-column>
      </el-table>
      <div style="text-align: right; margin: 0">
        <div style="margin-top: 10px">
          <el-button
            v-for="(actitem, index) in shopCart.actions"
            :key="index"
            size="mini"
            type="text"
            @click="shopCartAction(actitem)"
            >{{ actitem.name }}</el-button
          >
          <el-button size="mini" type="text" @click="shopCart.show = false">取消</el-button>
        </div>
      </div>
    </el-popover>
    <el-button v-show="showCart" v-popover:popover type="text" plain icon="el-icon-goods">
      <el-badge id="shopCart" :value="shopCart.number">数据篮</el-badge>
    </el-button>
  </div>
</template>

<script>
export default {
  name: 'DgDatabasket',
  props: {},

  data() {
    return {
      advfilterShow: false,
      showCart: true,
      rootFullPath: [],
      iframeUrl: '',
      objtype: 'TAB',
      statusList: [], // 过滤筛选条件
      filterVal: null,
      isfilter: '1',
      isIframe: false,
      isLoaded: true,

      advFilterShow: false,

      sortType: 'default',
      sortDateFlag: -1, // %2 标识排序方式
      sortSizeFlag: -1, // %2 标识排序方式

      viewType: '',
      ViewTypes: [
        {
          icon: 'el-icon-menu',
          type: 'icon',
        },
        {
          icon: 'el-icon-tickets',
          type: 'grid',
        },
        {
          icon: 'el-icon-document',
          type: 'card',
        },
        {
          icon: 'el-icon-picture-outline',
          type: 'list',
        },
      ],
      /// 购物车
      shopCart: {
        show: false,
        items: [],
        number: 0,
        actions: [
          {
            id: 'apply',
            name: '批量申请',
          },
          {
            id: 'down',
            name: '批量下载',
          },
          {
            id: 'clean',
            name: '清空',
          },
          {
            id: 'delete',
            name: '删除',
          },
        ],
      },
      multipleSelection: [], // 购物车勾选内容
      pageSize: -1,
      totalCount: 0,
      start: 1,
    }
  },

  watch: {
    sortType: function (val) {
      if (val == 'default') {
        this.sortDateFlag = -1
        this.sortSizeFlag = -1
        var sql = Explore.store.oldsql
        Explore.store.select(sql)
        Explore.changeData()
      }
    },
    statusList: function (val) {
      Explore.status = val
    },
  },

  created: function () {
    this.init()
  },

  methods: {
    advFilter() {
      Explore.advFilter()
      this.advfilterShow = false
    },
    init: function () {},
    message: function (msg, type) {
      this.$message({
        message: msg,
        type: type,
      })
    },

    hiddenCart: function () {
      this.showCart = false
    },

    sortRadio: function (type, value) {
      Explore.orderName = orderName
      Explore.getStore(Explore.limit, Explore.start, Explore.topic_code, Explore.key, Explore.status, orderName)
      Explore.changeData()
    },

    pageChange: function (pageIndex) {
      var _start = (pageIndex - 1) * Explore.limit
      if (Explore.start != _start) {
        Explore.start = _start
        Explore.getStore()
        Explore.changeData()
      }
    },

    handleSizeChange: function (val) {
      Explore.limit = val
      Explore.getStore()
      Explore.changeData()
    },
    handleSelect: function (key, keyPath) {
      // console.log(key, keyPath);
      for (var i in this.topMenu.items) {
        var item = this.topMenu.items[i]
        if (item.id == key) {
          location.href = item.url
          break
        }
      }
    },
    handleCommand: function (command) {
      command = 'this.' + command
      // console.log(command);
      if (typeof eval(command) === 'function') {
        eval(command + '();')
      } else {
        /* this.message('函数不存在！', 'warning'); */
      }
    },
    handleClick: function (tab, event) {},
    viewTypeChange: function (viewType) {
      Explore.chageViewType(viewType)
    },
    shopCartAction: function (actItem) {},
    shopSelectionChange: function (val) {
      this.multipleSelection = val
    },
    remoteMethod: function () {},
  },
}
</script>
