<template>
  <!-- 数据浏览 -->
  <div id="dataBrowsing" class="tab asideContent">
    <div class='butClick'>
      <xf-buttons @changes="searChange" :btnAuthority='authority' @add='handleAdd' @edit='clickeEdit'
        @deletes='delectVals' @get='searchChange' :searchPlaceholder='searchPlaceholder'>
      </xf-buttons>
    </div>

    <xfTable ref="table" :btnAuthority='authority' @sizeSee='sizeChange' @selectionChange='selectionChange'
      @currentChange='currentChange' @refreshChange='refreshChange' @handleEdit='handleEdit' @delectVal='delectVal'
      :editText='editText' :slotOverhidden='slotName'>
    </xfTable>
  </div>
</template>

<script>
  import project from '../../mixins/project'
  import methodIntegration from '../../mixins/methods'
  import * as locasto from '../../util/item';
  var moment = require('moment');

  /*负责导出组件*/
  export default {
    name: 'dataBrowsing',
    data() {
      return {
        deleteId: 'id', //标记删除字段
        editIndex: '',
        ruleContent: false,
        disabledInput: false,
        editPrimary: false,
        sourcesField: [],
        editPrimaryBtn: false,
        searchPlaceholder: '请输入规则名称',
        editText: '编辑',
        slotName: 'name',
        getTime: '',
        closeOnClick: false,
        deleteList: [],
        clickValue: '',
        loadOption: {
          selection: true, //多选框选择
          menu: true,
          column: [{
            label: '查询名称',
            prop: 'name',
            overHidden: true,
            solt: true
          }, {
            label: '创建者',
            prop: 'createdby'
          }, {
            label: '更新时间',
            prop: 'updated',
            formatter: function (row, value, text, column) {
              if (value === null) {
                return ''
              }
              return moment(value).format('YYYY-MM-DD HH:mm:ss')
            }
          }]
        },
      }
    },
    mixins: [project, methodIntegration],
    created() {
      this.getLists();
    },
    mounted() {
      this.getTime = setInterval(() => {
        this.getLists();
      }, 10000);
    },
    beforeDestroy() {
      clearInterval(this.getTime)
    },
    methods: {
      searchChange(val = '') {
        // 搜索数据
        if (val === '') {
          this.page.currentPage = 1;
          this.getLists();
        } else {
          this.getLists(val);
        }
      },
      async getLists(name = null) {
        /**
         * 获取任务列表
         */
        this.deleteList = [];
        let datas = {
          params: {
            "name": name,
            "pageNo": this.page.currentPage,
            "pageSize": this.page.pageSize
          }
        }
        // 获取数据返回状态 日志
        let response = await this.getTableData(datas, this.nozzle.dataPreviewListAll);
        this.rendering(response);

      },
      handleAdd() {
        // 新增按钮

        sessionStorage.setItem('dataBrowsing', '[]')

        if (this.$config.type === 'dev') {
          // 开发者模式
          this.$router.push({
            path: '/filter/dataAnalysis/dataBrowsingQuery'
          })
          return
        }

        window.open(window.location.origin + '/filter/dataAnalysis/dataBrowsingQuery')
      },
      clickeEdit() {
        // 单击修改
        if (!this.clickValue) {
          this.$notify.warning('请先选择要修改的行,再进行数据修改!');
          return
        } else {
          this.handleEdit(this.clickValue)
        }
      },
      handleEdit(row) {
        console.log(row)
        // 行内点击修改
        sessionStorage.setItem('dataBrowsing', JSON.stringify(row))
        if (this.$config.type === 'dev') {
          // 开发者模式
          this.$router.push({
            path: '/filter/dataAnalysis/dataBrowsingQuery'
          })
          return
        }
        window.open(window.location.origin + '/filter/dataAnalysis/dataBrowsingQuery')

      },
      deleteUserLise(ids) {
        // 删除用户
        let datas = {
          "params": {
            "ids": ids
          }
        }
        this.asyncDelete(datas, this.nozzle.dataPreviewDelete);
      },
    }
  }

</script>
<style>
  #dataBrowsing .iconfont[class^="icon"] {
    width: 17px;
  }

  .deleteIcon {
    cursor: pointer;
    color: #f15353;
  }

  .w60 {
    width: 60%;
  }

  .conditiona {
    padding: 0px 0 10px 100px;
  }


  .m-b-20 {
    margin-bottom: 20px;
  }

</style>