<template>
  <van-popup
    v-model="showPopup"
    class="ibps-fullscreen-popup"
    position="bottom"
    get-container="body"
    @opened="openedDialog"
  >
    <template v-if="showPopup">
      <van-sticky>
        <ibps-picker-toolbar
          title="常用语"
          @cancel="onCancel"
          @confirm="onConfirm"
        />
        <van-search
          v-model="subject"
          placeholder="请输入"
          @search="onSearch"
        />
      </van-sticky>

      <van-pull-refresh
        v-model="refreshing"
        @refresh="onRefresh"
      >
        <van-list v-model="loading" :finished="finished" @load="loadData">
          <van-radio-group
            v-model="radio"
          >
            <van-cell-group>
              <van-cell
                v-for="(item,index) in listData"
                :key="item.id+index"
                clickable
                @click="toggle(item,index)"
              >
                <van-radio :name="item.id">{{ item.value }}</van-radio>
              </van-cell>
            </van-cell-group>
          </van-radio-group>
        </van-list>
        <ibps-list-result-page
          :result-type="resultType"
          :error-type="errorType"
          :result-message="resultMessage"
        />
      </van-pull-refresh>
    </template>
  </van-popup>
</template>
<script>
import { queryIncludeNull } from '@/api/platform/bpmn/bpmCommonStatment'
import ActionUtils from '@/utils/action'

import IbpsPickerToolbar from '@/components/ibps-picker-toolbar'
import IbpsListResultPage from '@/components/ibps-list-result-page'

export default {
  components: {
    IbpsPickerToolbar,
    IbpsListResultPage
  },
  props: {
    value: {
      type: Boolean,
      default: false
    },
    action: String

  },
  data() {
    return {
      showPopup: false,
      radio: '',
      cacheData: {},
      subject: '',

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

      loading: false,
      finished: false,
      refreshing: false,
      resultType: 'init',
      errorType: null,
      resultMessage: null
    }
  },
  watch: {
    value() {
      this.showPopup = this.value
    }
  },
  methods: {
    openedDialog() {
      if (!this.loading) {
        this.onSearch()
      }
    },
    loadData() {
      this.loading = true
      queryIncludeNull(this.getSearcFormData()).then(response => {
        // 处理数据
        ActionUtils.handleListData(this, response.data)
        this.listData.map((d) => {
          this.cacheData[d['id']] = d.value
        })
      }).catch(e => {
        ActionUtils.handleErrorData(this, e)
      })
    },
    /**
     * 获取格式化参数
     */
    getSearcFormData() {
      const params = {
        'Q^CREATE_BY_^EQ': this.$store.getters.userId
      }
      if (this.$utils.isNotEmpty(this.action)) {
        params['Q^ACTION_^EQ'] = this.action
      }
      if (this.$utils.isNotEmpty(this.subject)) {
        params['Q^VALUE_^SL'] = this.subject
      }
      return ActionUtils.formatParams(
        params,
        this.pagination,
        this.sorts)
    },
    onSearch() {
      ActionUtils.initListData(this)
      this.loadData()
    },
    onRefresh() {
      this.refreshing = true
      this.finished = false
      this.loading = true
      this.onSearch()
    },

    onCancel() {
      this.subject = ''
      this.radio = ''
      this.$emit('input', false)
    },
    onConfirm() {
      if (this.$utils.isEmpty(this.radio)) {
        this.$toast('请选择')
        return
      }
      this.$emit('confirm', this.cacheData[this.radio])
      this.onCancel()
    },
    toggle(data) {
      this.radio = data['id']
    }
  }
}
</script>
