<template>
  <div class="ht-mobile-relevant__flow">
    <div v-if="inputWriteable" class="header-btn" @click="flowSelected">
      <van-icon name="add-o" />
      <span class="add-btn">添加</span>
    </div>
    <van-field
      v-model="inputVal"
      v-validate="inputValidate"
      :name="inputName"
      :data-vv-as="name"
      style="display: none"
    />
    <div v-if="dataTable.length > 0" class="flow-content">
      <ul class="content">
        <li
          v-for="item in dataTable"
          :key="item.id"
          class="list-item"
          @click.stop="handleRowClick(item)"
        >
          <h4 class="item-title">{{ item.subject }}</h4>
          <div class="info-box">
            <span class="info-item">发起人：{{ item.creator }}</span>
            <span class="info-item" :title="department(item.createOrgPath)">
              部门：{{ department(item.createOrgPath) || '-' }}
            </span>
          </div>
          <span class="info-item time-item">
            发起时间：{{ item.createTime }}
          </span>
          <div
            v-if="inputWriteable"
            class="item-bottom__del"
            @click.stop="remove(item)"
          >
            删除
          </div>
        </li>
      </ul>
    </div>
    <van-action-sheet v-if="showActionSheet" v-model="showActionSheet">
      <div class="van-action-sheet__header">
        <div class="top-box">
          <span class="cancel-text" @click="handleCancel">取消</span>
          <h4 class="header-title">添加相关流程</h4>
          <span class="confirm-text" @click="handleConfirm">确定</span>
        </div>
        <van-field
          v-model="searchKey"
          class="search-input"
          placeholder="搜索"
          clearable
          @input="handleInput"
          @clear="handleClear"
        >
          <template #left-icon>
            <van-icon name="search" @click="search" />
          </template>
        </van-field>
        <van-checkbox
          ref="checkboxes"
          v-model="selectAll"
          class="select-all"
          shape="square"
          @click="checkAll"
        >
          全选
        </van-checkbox>
      </div>
      <van-list
        v-model="loading"
        :finished="finished"
        finished-text=""
        @load="getFlowList"
      >
        <van-checkbox-group
          ref="checkboxGroup"
          v-model="selected"
          class="list-group"
        >
          <van-cell-group>
            <van-cell
              v-for="item in rows"
              :key="item.id"
              clickable
              class="cell-item"
            >
              <div class="item-title-box">
                <van-checkbox ref="checkboxes" shape="square" :name="item.id" />
                <span class="item-title">{{ item.subject }}</span>
              </div>
              <div class="item-content">
                <div class="info-box">
                  <span class="info-item">发起人：{{ item.creator }}</span>
                  <span
                    class="info-item"
                    :title="department(item.createOrgPath)"
                  >
                    部门：{{ department(item.createOrgPath) || '-' }}
                  </span>
                </div>
                <div class="info-item item__block">
                  流程名称：{{ item.procDefName || '-' }}
                </div>
                <div class="info-item item__block">
                  发起时间：{{ item.createTime || '-' }}
                </div>
              </div>
            </van-cell>
          </van-cell-group>
        </van-checkbox-group>
      </van-list>
    </van-action-sheet>
  </div>
</template>

<script>
  import relevantFlow from './relevantFlow.js'
  import { debounce } from 'lodash'
  import { Base64 } from 'js-base64'
  export default {
    name: 'MobileRelevantFlow',
    mixins: [relevantFlow],
    data() {
      return {
        showActionSheet: false,
        loading: false,
        finished: false,
        params: {},
        selected: [],
        searchKey: '',
        selectAll: false,
        checkedAll: false,
      }
    },
    computed: {
      department() {
        return (createOrgPath) => {
          const pathList =
            createOrgPath && createOrgPath.split('/').filter(Boolean)
          return pathList && pathList.length && pathList[pathList.length - 1]
        }
      },
    },
    watch: {
      selected(val) {
        if (val.length && this.rows.length && val.length >= this.rows.length) {
          this.selectAll = true
        } else {
          this.selectAll = false
        }
      },
      rows(val) {
        if (
          val.length &&
          this.selected.length &&
          this.selected.length >= val.length
        ) {
          this.selectAll = true
        } else {
          this.selectAll = false
        }
      },
    },

    methods: {
      checkAll() {
        this.$refs.checkboxGroup.toggleAll(this.selectAll)
      },
      handleConfirm() {
        this.dataTable = this.rows
          .filter((item) => this.selected.includes(item.id))
          .map((it) => {
            return {
              id: it.id,
              subject: it.subject,
              creator: it.creator,
              createTime: it.createTime,
              status: it.status,
              createOrgPath: it.createOrgPath,
            }
          })
        if (this.modelName) {
          this.inputVal = JSON.stringify(this.dataTable)
        }
        this.showActionSheet = false
      },
      handleCancel() {
        this.searchKey = ''
        this.selected = []
        this.showActionSheet = false
      },
      handleClear() {
        this.searchKey = ''
        this.search()
      },
      handleInput: debounce(function() {
        this.search()
      }, 500),
    },
  }
</script>

<style lang="scss" scoped>
  @mixin title {
    color: #262626;
    font-size: 14px;
    font-weight: 400;
    width: calc(100% - 24px);
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    display: inline-block;
  }
  @mixin info {
    .info-box {
      display: flex;
      justify-content: space-between;
    }
    .info-item {
      font-size: 12px;
      color: #8c8c8c;
      display: inline-block;
      width: 50%;
      white-space: nowrap;
      text-overflow: ellipsis;
      overflow: hidden;
      height: 17px;
      line-height: 17px;
    }
  }
  .ht-mobile-relevant__flow {
    .flow-content {
      margin-bottom: 12px;
    }
    ::v-deep {
      .van-action-sheet__content {
        overflow-y: unset;
        height: 80vh;
        .van-list {
          height: calc(80vh - 136px);
          overflow-y: scroll;
        }
      }
      .delete-button {
        height: 100%;
      }
    }
    .header-btn {
      display: flex;
      justify-content: flex-end;
      align-items: center;
      color: #409eff;
      position: absolute;
      right: 0;
      top: 0.36rem;
      ::v-deep {
        .van-icon-add-o {
          font-size: 16px;
          font-weight: 400;
        }
      }
      .add-btn {
        padding-left: 4px;
      }
    }
    .top-wrap {
      // position: fixed;
    }
    .top-box {
      display: flex;
      justify-content: space-between;
      height: 44px;
      align-items: center;
      padding: 0 16px;
      .cancel-text {
        color: #8c8c8c;
        font-size: 14px;
      }
      .header-title {
        color: #1a1a1a;
        font-size: 17px;
        margin: 0;
      }
      .confirm-text {
        font-size: 14px;
        color: #409eff;
      }
    }
    .search-input {
      padding: 0;
      margin: 8px 16px 12px 16px;
      background: #f9f9f9;
      height: 32px;
      line-height: 32px;
      border-radius: 8px;
      width: calc(100% - 32px);
      padding-left: 10px;
      ::v-deep {
        .van-field__left-icon {
          color: #8c8c8c;
        }
        .van-cell__value {
          color: #262626;
          &::placeholder {
            color: #bfbfbf;
          }
        }
        .van-icon-search {
          font-size: 22px;
        }
      }
    }
    .content {
      // margin-left: -120px;
      .list-item {
        width: 100%;
        height: 138px;
        background: #fff;
        border-radius: 8px;
        margin-top: 8px;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        border: 1px solid #e9e9e9;
        .item-title {
          margin: 0;
          padding: 12px;
          height: 24px;
          line-height: 24px;
          @include title();
        }
        @include info();
        .info-box {
          padding: 0 12px;
        }
        .time-item {
          padding: 8px 12px 16px 12px;
          width: calc(100% - 24px);
        }
      }
      .item-bottom__del {
        height: 36px;
        line-height: 36px;
        text-align: center;
        font-size: 14px;
        color: #409eff;
        border-top: 1px solid #e6e6e6;
      }
    }
    ::v-deep {
      .van-cell::after {
        border-bottom: none;
      }
    }
    .select-all {
      margin: 12px 16px 20px 16px;
      ::v-deep {
        .van-checkbox__label {
          color: #262626;
          font-size: 14px;
        }
      }
    }
    .list-group {
      margin: 0 16px;
      .cell-item {
        margin-bottom: 8px;
        padding: 12px;
        border: 1px solid #e6e6e6;
        border-radius: 8px;
      }
      .item-title-box {
        display: flex;
        padding-bottom: 12px;
        .item-title {
          padding-left: 8px;
          @include title();
          font-weight: bold;
        }
      }
      .item-content {
        padding-left: 26px;
        @include info();
        .item__block {
          display: block;
          width: 100%;
          padding-top: 8px;
        }
      }
    }
  }
</style>
