<template>
  <div class="start-flow__container">
    <van-sticky>
      <NavBar :is-custom="true" @go-back="handleGoBack">
        <template slot="title">搜索流程</template>
      </NavBar>
      <van-search
        v-model="searchValue"
        show-action
        placeholder="请输入流程名称"
        @search="onSearch"
      >
        <template #action>
          <div @click="onSearch" style="color: #409eff">搜索</div>
        </template>
      </van-search>
    </van-sticky>
    <div class="roadWrapper flow_list">
      <van-pull-refresh v-model="isDownLoading" @refresh="onRefresh()">
        <van-list
          v-model="loading"
          :finished="finished"
          finished-text=""
          :immediate-check="false"
          :offset="20"
          @load="onLoad"
          class="new-matter-list"
        >
          <van-cell
            v-for="item in itemList"
            :key="item.id"
            @click="showItem(item)"
            center
            :border="false"
            :class="[item.supportMobile == 1 ? 'task_mobile' : 'task_pc']"
          >
            <template slot="title">
              <div class="flow_list_title">
                <i
                  class="icon-xinjianliucheng1"
                ></i>
              </div>
              <div class="task_list_word">
                <div class="task_list_name" v-html="hightLight(searchValue,item.name)">
                </div>
                <div class="task_list_time">{{ item.defKey }}</div>
              </div>
            </template>
            <template #right-icon>
              <i
                class="icon-collect"
                :class="[
                  collectedProcess[item.id] ? 'collection' : 'not-collected',
                ]"
                @click.stop="
                  handleCollectOrCancelCollect(
                    item.defKey,
                    collectedProcess[item.id] || ''
                  )
                "
              ></i>
            </template>
          </van-cell>
        </van-list>
      </van-pull-refresh>
      <van-empty
        v-if="itemList.length == 0"
        class="custom-image"
        :image="noDataImage"
        description="暂无内容"
      />
    </div>
    <van-popup
      v-model="showSelectStartor"
      position="bottom"
      get-container="body"
      round
    >
      <van-picker
        show-toolbar
        title="选择发起人"
        :columns="leaders"
        value-key="name"
        @cancel="showSelectStartor = false"
        @confirm="handerStartor"
      />
    </van-popup>
  </div>
</template>
<script>
  import flow from '@/api/flow.js'
  import { Notify } from 'vant'
  import collectProcess from '@/mixins/collectProcess.js'
  import vanListCommon from '@/mixins/vanListCommon.js'
  import hightLight from '@/mixins/hightLight.js'
  export default {
    name: 'newMatterSearch',
    mixins: [collectProcess, vanListCommon,hightLight],
    data() {
      return {
        active: 0,
        showSelectStartor: false,
        leaders: [],
        leaderId: '',
        selectDefId: '',
        noDataImage: require('@/assets/images/no_data.png'),
      }
    },
    methods: {
      //上拉加载
      //异步请求数据 ，我们的项目时封装好的方法，此处只是调用
      onLoad() {
        let params = {
          pageBean: {
            page: this.page,
            pageSize: this.pageSize,
            showTotal: true,
          },
          querys: [],
          sorter: [
            {
              property: 'supportMobile',
              direction: 'DESC',
            },
            {
              property: 'createTime',
              direction: 'DESC',
            },
          ],
        }
        if (this.searchValue) {
          params.querys.push({
            property: 'name_',
            value: this.searchValue,
            operation: 'LIKE',
            relation: 'OR',
            group: 'quickSearch',
          })
          params.querys.push({
            property: 'def_key_',
            value: this.searchValue,
            operation: 'LIKE',
            relation: 'OR',
            group: 'quickSearch',
          })
        }
        let _self = this
        flow
          .myMobileProcess(params)
          .then((response) => {
            _self.loadData(response, _self)
          })
          .catch((error) => {})
          .finally(() => {
            _self.isDownLoading = false
            _self.isUpLoading = false
          })
      },
      showItem(row) {
        if (row.supportMobile != 1) {
          Notify({
            message: '此流程还未设置手机表单',
            background: '#FFEAD9',
            color: '#fff',
          })
          return
        }
        if (!row.leaders || row.leaders.length == 0) {
          this.$router.push({
            path: '/matter/startProcess',
            query: {
              defId: row.defId,
            },
          })
        } else {
          this.leaderId = ''
          this.leaders = []
          let _this = this
          this.selectDefId = row.defId
          row.leaders.forEach((identity) => {
            _this.leaders.push({ id: identity.id, name: identity.name })
          })
          this.showSelectStartor = true
        }
      },
      handleSelectStartorClose() {
        this.showSelectStartor = false
        this.leaderId = ''
        this.selectDefId = ''
      },
      handerStartor(e) {
        this.leaderId = e.id
        if (!this.leaderId) {
          Notify({ type: 'danger', message: '请选择发起人' })
        } else {
          this.showSelectStartor = false
          this.$router.push({
            path: '/matter/startProcess',
            query: {
              defId: this.selectDefId,
              leaderId: this.leaderId,
            },
          })
        }
      },
      handleGoBack() {
        this.$router.push({
          path: '/matter/newMatter',
        })
      },
    },
  }
</script>
<style lang="scss" scoped>
  .flow_list {
    height: calc(#{$vh} - 124px);
    overflow: scroll;
  }
  .van-search {
    padding: 16px 8px 8px 16px;
    .van-search__content {
      border-radius: 8px;
    }
  }
  .new-matter-list {
    .van-cell__title {
      width: 100%;
    }
    .van-cell {
      padding: 16px;
      border-bottom: 0.5px solid #eee;
    }
    .flow_list_title {
      width: 40px;
      height: 40px;
      border-radius: 8px;
      background: rgba(64, 158, 255, 0.1);
      display: flex;
      align-items: center;
      justify-content: center;
      float: left;
      .icon-xinjianliucheng1{
      color: #409eff;
      font-size: 24px
      }
    }
    .task_list {
      display: block;
      padding: 10px 15px 10px 0;
      border-bottom: 1px solid #e9e9e9;
    }
    .task_list_word {
      width: calc(100% - 60px);
      padding-left: 10px;
      float: left;
      min-height: 42px;
    }
    .task_list_name {
      width: 100%;
      font-size: 15px;
      color: $base-text-color;
      word-break: break-all;
      white-space: nowrap;
      text-overflow: ellipsis;
      overflow: hidden;
      line-height: 20px;
    }
    .task_list_time {
      font-size: 12px;
      font-weight: 400;
      color: #8c8c8c;
      line-height: 20px;
    }
  }

  .selectStartor {
    width: 70%;
    margin-left: 10%;
  }
  ::v-deep .van-empty__image {
    width: 268px;
    height: 196px;
  }
  .van-empty {
    padding-top: 124px;
  }
  .collection {
    color: #ffae44;
  }
  .not-collected {
    color: #e7ebf0;
  }
  .icon-collect{
    font-size:22px;
  }
</style>