<template>
  <a-card :bordered="false">
    <!--流程申请选择-->
    <a-input-search
      style="margin-bottom: 10px;margin-right:10px;width: 200px"
      v-model="searchProcessKey"
      placeholder="输入流程名称"
      @search="onSearchProcess"
    />
    <a-button @click="onSearchProcess(searchProcessKey)" type="primary">查询</a-button>
    <a-button @click="onSearchProcess('')">重置</a-button>
    <a-button @click="handleToApplyList" type="primary" style="float: right;">前往我的申请列表</a-button>
    <a-empty description="无流程可供选择" v-if="activeKeyAll.length==0" />
    <div v-else>
      <a-collapse v-model="activeKey">
        <a-collapse-panel
          v-for="(value, index)  in activeKeyAll"
          :header="filterDictText(dictOptions,value)||'未分类'"
          :key="value"
        >
          <a-list :grid="{ gutter: 10,column:4}" :dataSource="processDataMap[value]">
            <a-list-item slot="renderItem" slot-scope="item">
              <a-card>
                <div slot="title">
                  <a-row>
                    <a-col span="12" :title="item.name">{{item.name}}</a-col>
                    <a-col span="12" style="text-align: right;">
                      <a href="javascript:void (0)" @click="chooseProcess(item)">发起申请</a>
                    </a-col>
                  </a-row>
                </div>
                <b>版本：</b>
                v.{{item.version}}
                <br />
                <b>说明：</b>
                {{item.description}}
              </a-card>
            </a-list-item>
          </a-list>
        </a-collapse-panel>
      </a-collapse>
    </div>
    <!--流程表单-->
    <a-modal :title="lcModa.title" v-model="lcModa.visible" :maskClosable="false" width="80%">
      <!-- <component
        :disabled="lcModa.disabled"
        v-if="lcModa.visible"
        :is="lcModa.formComponent"
        :processData="lcModa.processData"
        :isNew="lcModa.isNew"
        @afterSubmit="afterSub"
        @close="lcModa.visible=false,lcModa.disabled = false"
      ></component>-->
      <template slot="footer">
        <a-button @click="lcModa.visible=false">关闭</a-button>
        <a-button key="back" @click="close">重置</a-button>
        <a-button key="submit" type="primary" @click="handleOkAll" :loading="loadingElse">提交</a-button>
      </template>
      <k-form-build v-if="lcModa.visible" :defaultValue="defaultValue" :value="jsonData" ref="kfb" />
    </a-modal>
  </a-card>
</template>

<script>
import { activitiMixin } from '@/views/activiti/mixins/activitiMixin'
import JEllipsis from '@/components/jeecg/JEllipsis'
import JTreeSelect from '@/components/jeecg/JTreeSelect'
import { initDictOptions, filterDictText } from '@/components/dict/JDictSelectUtil'
import historicDetail from '@/views/activiti/historicDetail'
import { deleteAction, getAction, downFile,postAction } from '@/api/manage'
export default {
  name: 'applyHome',
  mixins: [activitiMixin],
  components: {
    JEllipsis,
    JTreeSelect,
    historicDetail,
  },
  data() {
    return {
      loadingElse: false,
      typeList: [
        'input',
        'textarea',
        'number',
        'select',
        'checkbox',
        'radio',
        'date',
        'time',
        'rate',
        'slider',
        'uploadFile',
        'uploadImg',
        'switch',
        'button',
        'text',
        'card',
        'grid',
        'table',
      ], //"alert","html", "divider",
      description: '所有',
      dictOptions: [],
      url: {
        getProcessDataList: '/activiti_process/listData',
        getFirstNode: '/actProcessIns/getFirstNode',
        applyBusiness: '/actBusiness/apply',
      },
      // 查询条件
      queryParam: {
        createTimeRange: [],
        keyWord: '',
      },
      // 表头
      labelCol: {
        xs: {
          span: 4,
        },
        sm: {
          span: 4,
        },
      },
      wrapperCol: {
        xs: {
          span: 20,
        },
        sm: {
          span: 20,
        },
      },
      processModalVisible: null,
      activeKeyAll: [],
      activeKey: [],
      processDataMap: {},
      searchProcessKey: null,
      addApplyLoading: false,
      lcModa: {
        title: '',
        disabled: false,
        visible: false,
        formComponent: null,
        isNew: false,
      },
      jsonData: {},
      defaultValue: {},
    }
  },
  computed: {},
  mounted() {
    this.initDictConfig()
    this.getProcessList()
  },
  methods: {
    handleOkAll() {
      this.loadingElse = true
      var that = this
      this.$refs.kfb
        .getData()
        .then((values) => {
          console.log('验证通过', values,this.lcModa.processData)
          var formData = {}
          formData.tableId = this.lcModa.processData.customTableId
          formData.procDefId = this.lcModa.processData.id
          formData.procDeTitle = this.lcModa.processData.name
          formData.formText = JSON.stringify(values)
          postAction('/actBusiness/add', formData)
            .then((res) => {
              if (res.success) {
                that.lcModa.visible=false
                that.$message.success('保存成功！')
                that.loadingElse = false
              } else {
                that.$message.error(res.message)
                that.loadingElse = false
              }
            })
            .finally(() => {
              that.loadingElse = false
            })
        })
    },
    close() {
      this.$refs.kfb.reset()
    },
    saveJson(json) {
      console.log(json)
    },
    initDictConfig() {
      //初始化字典 - 流程分类
      initDictOptions('bpm_process_type').then((res) => {
        if (res.success) {
          this.dictOptions = res.result
        }
      })
    },
    filterDictText(dictOptions, text) {
      if (dictOptions instanceof Array) {
        for (let dictItem of dictOptions) {
          if (text === dictItem.value) {
            return dictItem.text
          }
        }
      }
      return text || text == 'null' ? '' : text
    },
    /*加载流程列表*/
    getProcessList() {
      this.addApplyLoading = true
      this.getAction(this.url.getProcessDataList, {
        status: 1,
        roles: true,
      })
        .then((res) => {
          this.activeKeyAll = []
          if (res.success) {
            var result = res.result || []
            if (result.length > 0) {
              let searchProcessKey = this.searchProcessKey
              if (searchProcessKey) {
                //过滤条件
                result = _.filter(result, function (o) {
                  return o.name.indexOf(searchProcessKey) > -1
                })
              }
              this.processDataMap = _.groupBy(result, 'categoryId')
              for (const categoryId in this.processDataMap) {
                this.activeKeyAll.push(categoryId)
              }
              this.activeKey = this.activeKeyAll
            }
            this.processModalVisible = true
          } else {
            this.$message.warning(res.message)
          }
        })
        .finally(() => (this.addApplyLoading = false))
    },
    onSearchProcess(value) {
      this.searchProcessKey = value
      this.getProcessList()
    },
    chooseProcess(v) {
      getAction('/ctop/actCustomForm/queryById', { id: v.customTableId }).then((res) => {
        if (res.success) {
          this.jsonData = JSON.parse(res.result.text)
        } else {
          this.$message.warning('该流程信息未配置表单，请联系开发人员！')
          return
        }
      })
      this.loadingElse = false
      // this.lcModa.formComponent = this.getFormComponent(v.routeName).component
      this.lcModa.title = '发起流程：' + v.name
      this.lcModa.isNew = true
      this.lcModa.processData = v
      this.lcModa.visible = true
      console.log('发起', v)
    },
    /*提交成功申请后*/
    afterSub(formData) {
      this.lcModa.visible = false
      this.$message('请前往我的申请列表提交审批！')
    },
    /*前往我的申请页面*/
    handleToApplyList() {
      this.$router.push({
        path: '/activiti/applyList',
      })
    },
  },
}
</script>
<style scoped>
@import '~@assets/less/common.less';
</style>