<template>
  <van-popup
    v-model="showPopup"
    class="ibps-fullscreen-popup"
    position="bottom"
  >
    <van-sticky>
      <ibps-picker-toolbar
        title="流程实例历史"
        :confirm-button-text="rightShowText"
        @cancel="onCancel"
        @confirm="onConfirm"
      />
      <van-search
        v-model="subject"
        @search="onSearch"
      />
    </van-sticky>
    <van-pull-refresh
      v-model="refreshing"
      @refresh="onRefresh"
    >
      <van-checkbox-group
        v-model="checkboxList"
      >
        <van-cell-group>
          <van-cell
            v-for="(item,index) in listData"
            :key="item.id+index"
            clickable
            :title="item.procDefName"
            :label="item.subject"
            :value="item.procDefKey"
            @click="toggleCheckbox(item,index)"
          >
            <van-checkbox
              slot="icon"
              ref="checkboxes"
              :name="item.id"
              class="ibps-mr-5"
              @click.native.stop="(e)=>clickCheckbox(e,item,index)"
            />
          </van-cell>
        </van-cell-group>
      </van-checkbox-group>
      <ibps-list-result-page
        :result-type="resultType"
        :error-type="errorType"
        :result-message="resultMessage"
      />
    </van-pull-refresh>
  </van-popup>
</template>
<script>
import { normalPassJson, normalPassJsonByScriptValue } from '@/api/platform/bpmn/bpmInstHis'
import ActionUtils from '@/utils/action'
import i18n from '@/utils/i18n' // Internationalization 国际化
import bpmnStatus from '@/mixins/bpmnStatus'
import IbpsListResultPage from '@/components/ibps-list-result-page'
import IbpsPickerToolbar from '@/components/ibps-picker-toolbar'

export default {
  components: {
    IbpsPickerToolbar,
    IbpsListResultPage
  },
  mixins: [bpmnStatus],
  props: {
    value: {
      type: Array,
      default: () => {
        return []
      }
    },
    visible: {
      type: Boolean,
      default: false
    },
    params: {
      type: Object
    },
    leftText: {
      type: String,
      default: i18n.t('cancel')
    },
    rightText: {
      type: String,
      default: i18n.t('confirm')
    }
  },
  data() {
    return {
      showPopup: false,
      checkboxList: [], // 选中

      subject: '',

      listData: [],
      pagination: {},
      sorts: {},

      loading: false,
      finished: false,
      refreshing: false,
      resultType: 'init',
      errorType: null,
      resultMessage: null
    }
  },
  computed: {
    rightShowText() {
      if (!this.checkboxList) return ''
      const length = this.checkboxList.length
      return length > 0 ? (this.rightText + `(${length})`) : ''
    }
  },
  watch: {
    visible() {
      if (this.visible) {
        this.showPopup = true
        this.loadData()
      } else {
        this.showPopup = false
      }
    },
    value: {
      handler: function(val, oldVal) {
        if (val !== oldVal) {
          this.checkboxList = this.value.map((item) => {
            return item.id
          })
        }
      },
      immediate: true
    }
  },

  methods: {
    loadData() {
      const params = ActionUtils.formatParams(Object.assign({ 'Q^subject_^SL': this.subject }, this.params), this.pagination)
      let method = normalPassJson
      if (this.$utils.isNotEmpty(this.params.script)) {
        method = normalPassJsonByScriptValue
      }
      method(params).then(response => {
        // 处理数据
        ActionUtils.handleListData(this, response.data)
      }).catch((e) => {
        ActionUtils.handleErrorData(this, e)
      })
    },
    onSearch() {
      ActionUtils.initListData(this)
      this.loadData()
    },
    onRefresh() {
      this.finished = false
      this.loading = true
      this.onSearch()
    },
    clickCheckbox(event, item, index) {
      let flag = true
      const target = event.target
      if (target && target.className.indexOf('van-checkbox__label') > -1) {
        flag = false
      } else if (target && target.parentNode.className.indexOf('van-checkbox__icon') > -1) {
        flag = false
      }
      if (flag) {
        this.toggle(item, index)
      }
    },
    toggleCheckbox(item, index) {
      this.$refs.checkboxes[index].toggle()
    },
    onCancel() {
      this.$emit('close', false)
    },
    onConfirm() {
      if (this.$utils.isEmpty(this.checkboxList)) {
        this.$notify({
          type: 'warning',
          message: '请选择流程实例！'
        })
        return
      }

      this.$emit('confirm', this.getStoreValue(this.checkboxList))
      this.onCancel()
    },
    getStoreValue(data) {
      var result = []
      data.forEach(d => {
        const v = this.listData.find((item) => {
          if (item.id === d) {
            return item
          }
        })
        if (v) {
          result.push({
            'id': v.id,
            'bizKey': v.bizKey,
            'procDefKey': v.procDefKey,
            'procDefName': v.procDefName,
            'subject': v.subject,
            'createBy': v.createBy,
            'creator': v.procDefName,
            'createTime': v.createTime,
            'endTime': v.endTime
          })
        } else {
          this.value.find((item) => {
            if (item.id === d) {
              result.push(item)
            }
          })
        }
      })
      return result
    }
  }
}
</script>

