<template>
  <div>
    <span>{{ $t('ec.dataRule.viewTitle') + currentNode.rsrcName || '' }}</span>
    <el-divider />
    <el-form ref="dataruleSearchForm" :model="dataRuleQueryParams" inline label-width="80px">
      <el-form-item :label="$t('ec.table.code')" prop="code">
        <el-input v-model="dataRuleQueryParams.code" type="text" :placeholder="$t('ec.table.code')" />
      </el-form-item>
      <el-form-item :label="$t('ec.table.name')" prop="name">
        <el-input v-model="dataRuleQueryParams.name" type="text" :placeholder="$t('ec.table.name')" />
      </el-form-item>
      <el-form-item class="searchItem" :label-width="'50px'">
        <el-button type="primary" @click="getDatarule">{{ $t('ec.table.query') }}</el-button>
        <el-button type="default">{{ $t('ec.table.reset') }}</el-button>
      </el-form-item>
    </el-form>

    <vxe-grid
      ref="dataRulesVxe"
      border
      highlight-hover-row
      max-height="1000"
      :loading="dataruleLoading"
      class="vxe-table-element"
      resizable
      sync-resize
      auto-resize
      :toolbar="dataRuleToolbar"
      :start-index="(datarulePage.currentPage - 1) * datarulePage.pageSize"
      :pager-config="datarulePage"
      :columns="dataRuleColumns"
      :data="dataRuleData"
      @page-change="datarulePageChange"
    >
      <template v-slot:datarule_toolbar_btns>
        <div class="pull-left">
          <el-button type="primary" icon="el-icon-plus" @click="addDatarule()">{{ $t('ec.table.add') }}</el-button>
<!--          <el-button icon="el-icon-refresh" @click="getDatarule">{{ $t('ec.table.refresh') }}</el-button>-->
<!--          <el-button icon="el-icon-s-operation">{{ $t('ec.table.switch') }}</el-button>
          <el-button icon="el-icon-upload2">{{ $t('ec.table.import') }}</el-button>
          <el-button icon="el-icon-download">{{ $t('ec.table.export') }}</el-button>-->
        </div>
        <div class="pull-right" style="margin-right: 15px">
          <el-button @click="$emit('close', false)">{{ $t('ec.table.collapse') }}</el-button>
        </div>
      </template>

      <template v-slot:datarule_operation="{ row }">
        <el-button type="warning" @click="editDatarule(row.id)">{{ $t('ec.table.edit') }}</el-button>
        <el-button type="danger" @click="rmDatarule(row.id)">{{ $t('ec.table.del') }}</el-button>
      </template>
    </vxe-grid>

    <data-rule-edit ref="dataRuleEditDialog" @refreshDataRule="getDatarule" />
  </div>
</template>

<script>
import { getData as getDataByMenuId, deleteByIds as deleteDataRuleByIds } from 'ecip-web/api/vue/resource/sysrDataruleApi'
import DataRuleEdit from './dataRuleEdit'
import mixin from 'ecip-web/utils/common-mixin'

export default {
  name: 'DataRuleView',
  components: { DataRuleEdit },
  mixins: [...mixin],
  props: {
    currentNode: {
      type: Object,
      required: true
    }
  },
  data() {
    return {
      // 数据规则
      dataruleLoading: false,
      dataRuleQueryParams: {},
      dataRuleData: [],
      datarulePage: {
        total: 0,
        currentPage: 1,
        pageSize: 10,
        align: 'left',
        pageSizes: [10, 20, 50, 100, 200, 500],
        layouts: ['Sizes', 'PrevJump', 'PrevPage', 'Number', 'NextPage', 'NextJump', 'FullJump', 'Total'],
        perfect: true
      },
      dataRuleToolbar: {
        id: 'vue.resource.dataRule-toolbar',
        custom: true,
        slots: {
          buttons: 'datarule_toolbar_btns'
        },
        zoom: true, // 最大化按钮
        // 列宽操作记录
        resizable: {
          storage: true
        },
        // 列操作记录
        setting: {
          storage: true
        }
      },
      dataRuleColumns: [
        { type: 'checkbox', width: 40, fixed: 'left', align: 'center' },
        { title: 'ec.resource.dataRule', field: 'name', fixed: 'left', minWidth: 150, showOverflow: true },
        { title: 'ec.table.code', field: 'code', minWidth: 150, showOverflow: true },
        { title: 'ec.dataRule.field', field: 'field', minWidth: 150, showOverflow: true },
        { title: 'ec.dataRule.condition', field: 'express', minWidth: 150, showOverflow: true },
        { title: 'ec.dataRule.value', field: 'value', minWidth: 150, showOverflow: true },
        { title: 'ec.dataRule.sqlSegment', field: 'sqlSegment', minWidth: 150, showOverflow: true },
        { title: 'ec.table.remarks', field: 'remarks', minWidth: 150, showOverflow: true },
        { title: 'ec.table.actions', width: 180, fixed: 'right', align: 'center', slots: { default: 'datarule_operation' }}
      ]
    }
  },
  watch: {
    'currentNode.id': {
      handler(val) {
        this.$nextTick(() => {
          this.getDatarule()
        })
      },
      deep: true
    }
  },
  methods: {
    init() {
      this.dataRuleQueryParams = {}
      this.dataRuleData = []
      this.datarulePage.total = 0
      this.datarulePage.currentPage = 1
    },
    // 数据规则
    async getDatarule() {
      if (this.currentNode && this.currentNode.id) {
        try {
          this.dataruleLoading = true
          const { data } = await getDataByMenuId(Object.assign({}, { size: this.datarulePage.pageSize, current: this.datarulePage.currentPage }),
            Object.assign({ menuId: this.currentNode.id }, this.dataRuleQueryParams))
          this.dataRuleData = data.records
          this.datarulePage.total = data.total
        } finally {
          this.dataruleLoading = false
        }
      }
    },
    datarulePageChange({ currentPage, pageSize }) {
      this.page.currentPage = currentPage
      this.page.pageSize = pageSize
      this.getDatarule()
    },
    addDatarule() {
      this.$refs.dataRuleEditDialog.init('add', '', this.currentNode.id)
    },
    editDatarule(rowId) {
      this.$refs.dataRuleEditDialog.init('edit', rowId, this.currentNode.id)
    },
    rmDatarule(rowId) {
      this.$confirm(this.$t('ec.message.delConfirm'), this.$t('ec.message.prompt'), {
        confirmButtonText: this.$t('ec.message.confirm'),
        cancelButtonText: this.$t('ec.message.cancel'),
        type: 'warning'
      }).then(async() => {
        const deleteIds = []
        if (rowId) {
          deleteIds.push(rowId)
        } else {
          this.$refs.dataRulesVxe.getCheckboxRecords().forEach(row => {
            const id = row.id
            deleteIds.push(id)
          })
        }
        try {
          this.dataruleLoading = true
          await deleteDataRuleByIds(deleteIds)
          await this.getDatarule()
          this.$notify.success(this.$t('ec.message.delSuccess'))
        } finally {
          this.dataruleLoading = false
        }
      })
    }
  }
}
</script>

<style scoped>

</style>
