<template>
  <!--规则列表-->
  <div id="ruleAddendum" class="tab ">
    <div v-show='!dataEdit' class="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'
        @enable='enable' @ruleAdden='ruleAdden' :slotOverhidden='slotName' @prohibit='enable'>
      </xfTable>
    </div>
    <router-view @getLists='getLists' v-show='dataEdit'></router-view>
  </div>
</template>

<script>
  import project from '../../mixins/project'
  import methodIntegration from '../../mixins/methods'
  import * as locasto from '../../util/item';
  var moment = require('moment');
  import {
    notify
  } from '../../util/item'
  /*负责导出组件*/
  export default {
    name: 'ruleAddendum',
    data() {
      return {
        deleteId: 'ruleId', //标记删除字段
        editIndex: '',
        sourcesField: [],
        searchPlaceholder: '请输入规则名称',
        slotName: 'ruleName',
        deleteList: [],
        clickValue: '',
        ruleContent: false,
        closeOnClick: false,
        editPrimaryBtn: false,
        dataEdit: false,
        disabledInput: false,
        editPrimary: false,
        loadOption: {
          selection: true, //多选框选择
          menu: true,
          columnBtn:false,
         addBtn: false,//添加按钮
          column: [{
            label: '规则名称',
            prop: 'ruleName',
            overHidden: true,
            solt: true
          }, {
            label: '规则描述',
            prop: 'ruleDescription'
          }, {
            label: '创建者',
            prop: 'creator'
          }, {
            label: '创建时间',
            prop: 'createTime',
            formatter: function (row, value, text, column) {
              if (value === null) {
                return ''
              }
              return moment(value).format('YYYY-MM-DD HH:mm:ss')
            }
          }, {
            label: '启用',
            prop: 'statusruleAddendumEsp',
            overHidden: true,
            solt: true,
            // formatter: function (row, value, text, column) {
            //   return '<div v-html=""></div>'
            // }
          }]
        },
      }
    },
    mixins: [project, methodIntegration],
    created() {
      this.getLists();
    },
    mounted() {

      this.projectInter = setInterval(() => {
        // 每隔10秒进行状态刷新
        this.getLists();
      }, 10000);
    },
    beforeDestroy() {
      // 清理定时器
      clearInterval(this.projectInter);
    },
    watch: {
      $route(to, from) {
        // 修改当前页面跳转路径，返回实例，并保存当前菜单栏选中状态
        if (to.path === '/quality/ruleEngine/ruleList') {
          this.dataEdit = false;
          this.dailyFlageTable = true;
        }
      },
    },
    methods: {
      ruleTypeName(index) {
        if (index === 1) {
          return '数据库'
        } else {
          return '消息队列'
        }
      },
      async enable(row, index) {
        /**
         * 启用
         */
        // return 
        let response = await this.$http.get(this.nozzle.enableRule, {
          params: {
            ruleId: row['ruleId'],
            status: row['status'] === 0 ? 1 : 0
          }
        });
        notify(response);
        if (response.data.code === 200) {
          this.getLists();
        }
      },
      searchChange(val = '') {
        // 搜索数据
        if (val === '') {
          this.page.currentPage = 1;
          this.getLists();
        } else {
          this.getLists(val);
        }
      },
      async getLists(ruleName = null) {
        /**
         * 获取任务列表
         */
        this.deleteList = [];
        let datas = {
          params: {
            "ruleName": ruleName,
            "pageNo": this.page.currentPage,
            "pageSize": this.page.pageSize
          }
        }
        // 获取数据返回状态 日志
        // this.distingLoading(true)
        let response = await this.getTableData(datas, this.nozzle.selectAllRule);
        // this.distingLoading(false)

        response = this.statusCalculation(response);
        this.rendering(response);

      },
      statusCalculation(response) {
        // 状态值计算
        let newRes = response.data.data.list;
        if (newRes.length !== 0) {

          for (let item of newRes.values()) {
            if (item['status'] === 1) {
              item['statusruleAddendumEsp'] = false;
              item['statusruleAddendum'] = true;
              item['addendumTitle'] = '禁用';
            } else {
              item['statusruleAddendumEsp'] = true;
              item['statusruleAddendum'] = false;
              item['addendumTitle'] = '启用';
            }
          }
        }
        return response
      },
      ruleAdden(row, index) {
        /**
         * 查看
         */
        this.$router.push({
          path: '/ruleModel',
          query: {
            headTitle: 2,
            ruleId: row['ruleId']
          }
        })

        this.dataEdit = true;
      },
      handleAdd() {
        // 新增按钮

        this.$router.push({
          path: '/ruleModel',
          query: {
            headTitle: 0
          }
        })

        this.dataEdit = true;
      },
      clickeEdit() {
        // 单击修改
        if (!this.clickValue) {
          this.$notify.warning('请先选择要修改的行,再进行数据修改!');
          return
        } else {
          this.handleEdit(this.clickValue)
        }
      },
      handleEdit(row) {
        // 行内点击修改
        this.$router.push({
          path: '/ruleModel',
          query: {
            headTitle: 1,
            ruleId: row['ruleId']
          }
        })
        this.dataEdit = true;
      },

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

</script>
<style>
  #ruleAddendum .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>