<template>
  <div>
    <el-input v-model.trim="query.name" onkeyup="this.value=this.value.replace(/\s+/g,'')" clearable size="small" placeholder="输入工作流名称搜索" style="width: 200px;" class="filter-item" @keyup.enter.native="crud.toQuery" />
    <!-- <date-range-picker v-model="query.createDateStr" class="date-item" />
    <date-range-picker v-model="query.lastUpdateDateStr" class="date-item" /> -->
    <rrOperation />
    <el-button class="filter-item" size="mini" type="primary" icon="el-icon-plus" @click="toEditPage()">新增</el-button>
    <acticitiDialog :page-url.sync="activitiEditorUrl" :activiti-editor-visible.sync="activitiEditorVisible" />
  </div>
</template>

<script>
import { header } from '@crud/crud'
import rrOperation from '@crud/RR.operation'
// import DateRangePicker from '@/components/DateRangePicker'
import { add } from '@/api/activiti/activiti'
import acticitiDialog from './activiti-dialog'
export default {
  components: { rrOperation, acticitiDialog/* , DateRangePicker */ },
  mixins: [header()],
  props: {
    permission: {
      type: Object,
      required: true
    }
  },
  data() {
    return {
      activitiEditorVisible: false,
      activitiEditorUrl: ''
    }
  },
  methods: {
    toEditPage() {
      add().then(modelId => {
        this.activitiEditorVisible = true
        this.activitiEditorUrl = process.env.VUE_APP_BASE_API + '/static/modeler.html?modelId=' + modelId
      })
    }
  }
}
</script>
