<template>
  <van-popup
    v-model="dialogVisible"
    class="job-mobile__selector"
    position="right"
    :style="{ width: '100%', height: '100%' }"
    get-container="body"
    @cancel="handleDialogClose"
    @close="handleDialogClose"
    @click-overlay="handleDialogClose"
  >
    <van-nav-bar :title="title" left-arrow @click-left="handleDialogClose" />

    <van-search
      v-model="searchWord"
      shape="round"
      :placeholder="searchPlaceholder"
      @input="onRefresh"
      @clear="reset"
    >
      <template #left-icon>
        <ht-icon name="search1" width="22" height="22" fill="#8C8C8C" />
      </template>
    </van-search>
    <template v-if="vanLoading">
      <van-loading class="van-Loading" />
    </template>
    <template v-else>
      <div class="pullRefresh">
        <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
          <van-cell v-if="!single && data && data.length > 0" clickable>
            <van-checkbox
              v-model="allcheckbox"
              shape="square"
              @click="handleCheckAll"
            >
              全选
            </van-checkbox>
          </van-cell>
          <van-list
            v-if="data && data.length > 0"
            v-model="isLoading"
            class="job-data__list"
            :finished="finished"
            finished-text="没有更多了"
            @load="loadMore"
          >
            <van-checkbox-group ref="checkboxGroup" v-model="selectIds">
              <van-checkbox
                v-for="item in data"
                :key="item[primaryFieldProp]"
                :name="item[primaryFieldProp]"
                :shape="single ? 'round' : 'square'"
                @click="rowClick(item, null, $event)"
              >
                <div class="job-list__container">
                  <div class="follow-theme-color">
                    <ht-icon class="fa-icon" name="zhiwu" />
                  </div>

                  <div class="selector-item__detail">
                    <div class="selector-detail__name">
                      <label
                        v-html="brightenKeyword(item[selectLabel], searchWord)"
                      ></label>
                      <span>
                        (
                        <span
                          class="spaceSpan"
                          v-html="brightenKeyword(item['code'], searchWord)"
                        ></span>
                        )
                      </span>
                    </div>
                  </div>
                </div>
              </van-checkbox>
            </van-checkbox-group>
          </van-list>
          <template v-if="!data || data.length === 0">
            <div class="list-selector__nodata">
              <el-image :src="noDataImg"></el-image>
              <span>暂无数据</span>
            </div>
          </template>
        </van-pull-refresh>
      </div>

      <!-- 已选职务 s-->
      <div class="dialog-footer">
        <div class="txt">
          <div class="center" @click="selectDialogVisible = true">
            已选职务
            <span>{{ selectIds.length }}/{{ this.data.length }}</span>

            <ht-icon name="select" scale="1.1" :rotate="180" />
          </div>
        </div>
        <van-button
          class="mobile-btn"
          block
          round
          size="normal"
          type="info"
          @click="handleDialogSure"
        >
          确 定
        </van-button>
      </div>
      <!-- 已选职务 s-->
      <!-- 已选职务popup s-->
      <van-popup
        v-model="selectDialogVisible"
        round
        position="bottom"
        class="selectDialog"
        :style="{ height: '78vh', width: '100vw' }"
      >
        <div class="head">
          <div class="close" @click="selectDialogVisible = false">关闭</div>
          <div class="title">
            已选职务
            <span>{{ selectIds.length }}</span>
          </div>
          <div class="empty" @click="emptySelect">清空</div>
        </div>
        <van-search
          v-model="selectSearchWord"
          shape="round"
          placeholder="搜索"
          @input="onSearchInput"
          @clear="selectSearchWord = ''"
          @cancel="selectSearchWord = ''"
        >
          <template #left-icon>
            <ht-icon name="search1" width="22" height="22" fill="#8C8C8C" />
          </template>
        </van-search>
        <div
          v-if="selectList.length"
          id="selectListJobSelectorMobileDialog"
          class="user-data__list"
        >
          <div
            v-for="item in selectList"
            :key="item[primaryFieldProp]"
            class="dimension-data__list"
          >
            <div class="selector-list border-bottom__line">
              <div class="follow-theme-color">
                <ht-icon class="fa-icon" name="zhiwu" />
              </div>

              <div class="selector-item__detail">
                <div class="selector-detail__name">
                  <!-- <label>{{ item[selectLabel] }}</label>
                <span>({{ item['code'] }})</span> -->

                  <label
                    v-html="
                      brightenKeyword(item[selectLabel], selectSearchWord)
                    "
                  ></label>
                  <span>
                    (
                    <span
                      v-html="brightenKeyword(item.code, selectSearchWord)"
                    ></span>
                    )
                  </span>
                </div>
              </div>
              <van-icon
                name="clear"
                color="#bfbfbf"
                class="cell-close"
                @click="removeSelectUser(item)"
              />
            </div>
          </div>
        </div>
        <div v-else class="list-selector__nodata">
          <el-image :src="noDataImg"></el-image>
          <span>暂未选择职务</span>
        </div>
      </van-popup>
    </template>
    <!-- 已选职务popup e-->
  </van-popup>
</template>
<script>
  import { debounce } from 'lodash'
  import styles from '@/styles/index.scss'
  import Locale from '@/mixins/locale'
  import popupMode from '@/mixins/popupMode.js'

  export default {
    name: 'JobSelectorMobileDialog',
    mixins: [Locale, popupMode('dialogVisible', 'selectDialogVisible')],
    props: {
      searchPlaceholder: {
        type: String,
        default: '名称、编码',
      },
      value: {
        type: Array,
        default: () => {
          return []
        },
      },
      single: {
        type: Boolean,
        default: false,
      },
      data: {
        type: Array,
        default: () => {
          return []
        },
      },
      pagination: {
        type: Object,
        default: () => {
          return {
            page: 1,
            pageSize: 50,
            total: 0,
          }
        },
      },
      selectLabel: {
        type: String,
        default: 'name',
      },
      appendToBody: {
        type: Boolean,
        default: false,
      },
      title: {
        type: String,
        default: '选择职务',
      },
      primaryField: {
        type: String,
        default: '',
      },
    },
    data() {
      return {
        allcheckbox: false,
        noDataImg: require('@/assets/no-data.png'),
        dialogVisible: false,
        vanLoading: false,
        isLoading: false,
        finished: false,
        searchWord: null,
        selectIds: [],
        selectedData: [],

        selectDialogVisible: false,
        selectSearchWord: '',
      }
    },
    computed: {
      primaryColor() {
        return styles.primary_color
      },
      sureButtonText() {
        const selectedText =
          this.selectIds.length > 0 ? `(${this.selectIds.length})` : ''
        return `${this.$t('ht.common.confirm')}${selectedText}`
      },
      primaryFieldProp: function () {
        return this.primaryField ? this.primaryField : 'id'
      },

      selectList() {
        return this.data.filter((item) =>
          this.selectSearchWord
            ? this.selectIds.includes(item[this.primaryFieldProp]) &&
              (item[this.selectLabel].includes(this.selectSearchWord) ||
                item.code.includes(this.selectSearchWord))
            : this.selectIds.includes(item[this.primaryFieldProp])
        )
      },
    },
    watch: {
      pagination: function (newVal, oldVal) {
        this.isLoading = false
        if (newVal !== oldVal) {
          const { page, pageSize, total } = newVal
          if (page > 0 && pageSize > 0 && total > 0) {
            this.finished = page * pageSize >= total
          } else {
            this.finished = true
          }
        }
      },
      selectIds: {
        handler(val) {
          if (this.data && this.data.length > 0) {
            if (val.length === this.data.length) {
              this.allcheckbox = true
            } else {
              this.allcheckbox = false
            }
          }
        },
        immediate: true,
        deep: true,
      },
      selectDialogVisible: {
        handler(val) {
          if (val) {
            this.$nextTick(() => {
              document
                .getElementById('selectListJobSelectorMobileDialog')
                .scrollTo({
                  top: 0,
                })
            })
          }
        },
      },
    },
    methods: {
      handleCheckAll() {
        this.selectIds = []
        this.selectedData = []
        if (this.allcheckbox) {
          this.$refs.checkboxGroup.toggleAll(true)
          this.selectedData = this.data.filter((item) =>
            this.selectIds.includes(item[this.primaryFieldProp])
          )
        } else {
          this.$refs.checkboxGroup.toggleAll(false)
        }
      },
      // 已选择列表中删除已选择人员
      removeSelectUser(item) {
        let index = null
        this.selectIds.forEach((k, i) => {
          if (k == item[this.primaryFieldProp]) {
            index = i
          }
        })
        this.selectIds.splice(index, 1)
        this.selectedData = this.data.filter((item) =>
          this.selectIds.includes(item[this.primaryFieldProp])
        )
      },
      // 清空已选择人员
      emptySelect() {
        this.selectIds = []
        this.selectedData = []
        this.selectDialogVisible = false
      },
      onSearchInput: debounce(function () {
        this.onRefresh()
      }, 800),
      onRefresh() {
        this.isloading = true
        this.$emit('search', this.searchWord)
      },
      reset() {
        this.$emit('reset')
      },
      loadMore() {
        if (this.data && this.data.length > 0) {
          this.$emit('page-change', ++this.pagination.page)
        } else {
          this.isLoading = false
        }
      },
      showDialog() {
        this.vanLoading = true
        if (this.value && this.value.length > 0) {
          this.selectIds = this.value.map((item) => item[this.primaryFieldProp])
          this.selectedData = this.value
        }
        setTimeout(() => {
          this.vanLoading = false
        }, 300)
        this.dialogVisible = true
      },
      handleDialogSure() {
        this.$emit('input', this.selectedData)
        this.$emit('select-data', this.selectedData)
        this.selectIds = []
        this.selectedData = []
        this.dialogVisible = false
      },
      handleDialogClose() {
        this.dialogVisible = false
        this.selectIds = []
        this.selectedData = []
      },
      select(selection, row) {
        this.$emit('select', selection, row)
      },

      rowClick(row, column, event) {
        if (this.single) {
          this.selectIds = [row[this.primaryFieldProp]]
          this.selectedData = [row]
        } else {
          this.selectedData = this.data.filter((item) =>
            this.selectIds.includes(item[this.primaryFieldProp])
          )
        }

        this.$emit('row-click', row, column, event)
      },
    },
  }
</script>
<style lang="scss" scoped>
  .job-mobile__selector {
    overflow: hidden !important;
    ::v-deep {
      .van-tab--active {
        font-weight: bold;
        color: $base-color-blue;
      }
      .van-nav-bar .van-icon {
        color: var(--van-gray-6);
      }
      .van-search__content {
        border-radius: 8px 8px 8px 8px;
        padding-left: 5px;
      }
    }

    .pullRefresh {
      height: calc(100% - 175px);
      overflow-y: scroll; //设置这个 才能指定高度
    }

    .job-mobile__title {
      font-size: 18px;
      color: #1a1a1a;
    }
    .job-mobile__close {
      float: right;
    }
    .job-demensions__container {
      padding: 0 12px;
    }
    .follow-theme-color {
      display: flex;

      margin-left: 12px;
      width: 36px;
      height: 36px;
      background: rgba(64, 158, 255, 0.16);
      border-radius: 50%;
      .fa-icon {
        width: 22px;
        margin: auto;
        height: 22px;
        color: #409eff;
      }
    }
    .job-demensions__group {
      margin-right: 6px;
      color: #999999;
      max-width: 72px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;

      &::before {
        border-width: 0;
      }

      &.current {
        color: $base-color-blue;
      }

      &.current::before {
        border-width: 1px;
      }
    }
    .job-list__container {
      display: flex;
      align-items: center;

      .selector-item__detail {
        display: flex;
        flex-direction: column;
        margin-left: 10px;

        .selector-detail__name {
          max-width: 220px;
          font-size: 12px;
          label {
            color: #111;
            font-size: 14px;
          }
          span {
            margin-left: 10px;
            color: #777;
            font-size: 12px;
          }
          .spaceSpan {
            margin: 0;
          }
        }
      }
    }
    .job-data__list {
      min-height: 400px;

      .van-cell {
        padding: 20px 16px;
      }

      ::v-deep {
        .van-checkbox {
          position: relative;
          padding: 10px 16px;
          ::after {
            position: absolute;
            box-sizing: border-box;
            content: ' ';
            pointer-events: none;
            right: 0;
            bottom: 0;
            left: 16px;
            border-bottom: 1px solid #ebedf0;
            -webkit-transform: scaleY(0.5);
            transform: scaleY(0.5);
          }

          .van-checkbox__label {
            margin-left: 0;
          }
        }
      }
    }
    .van-action-sheet__cancel {
      padding: 5px;
      background: $base-color-blue;
      color: $base-color-white;
    }
  }

  .dialog-footer {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-sizing: border-box;
    width: 100%;
    height: 64px;
    padding: 0 16px;
    background: #ffffff;
    border-top: 1px solid #e6e6e6;
    .mobile-btn {
      width: 110px;
      height: 44px;
      line-height: 44px;
      border-radius: 10px;
      box-sizing: border-box;
      background: #409eff;
      border-color: #409eff;
      padding: 0 24px;
    }
    .txt {
      display: flex;
      justify-content: center;
      align-items: center;
      flex: 1;
      height: 44px;
      font-size: 14px;
      color: #262626;
      text-align: center;
      .center {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 44px;
        padding: 0 16px;
      }
      span {
        color: #409eff;
        margin: 0 6px;
      }
    }
  }

  .selectDialog {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    .follow-theme-color {
      margin-left: 0;
    }

    .head {
      display: flex;
      height: 44px;
      padding-right: 50px;
      width: 100%;
      .close {
        display: block;
        height: 44px;
        line-height: 44px;
        padding: 0 16px;
        font-size: 14px;
        color: #8c8c8c;
      }
      .title {
        flex: 1;
        height: 44px;
        text-align: center;
        line-height: 44px;
        font-weight: bold;
        color: #1a1a1a;
        font-size: 17px;
        span {
          padding: 0 6px;
          color: #409eff;
        }
      }
      .empty {
        height: 44px;
        line-height: 44px;
        padding: 0 16px;
        font-size: 14px;
        color: $base-color-blue;
      }
    }
    .user-data__list {
      flex: 1;
      overflow: auto;
      .cell-close {
        font-size: 16px;
      }
    }
    .selector-list {
      display: flex;
      align-items: center;

      .selector-item__detail {
        display: flex;
        flex-direction: column;
        margin-left: 10px;
        flex: 1;
        line-height: 40px;
        .selector-detail__name {
          max-width: 220px;

          label {
            color: #111;
            font-size: 14px;
          }
          span {
            // margin-left: 10px;
            color: #777;
            font-size: 12px;
          }
        }
      }
    }
    .border-bottom__line {
      position: relative;
      padding: 10px 16px;
      ::after {
        position: absolute;
        box-sizing: border-box;
        content: ' ';
        pointer-events: none;
        right: 0;
        bottom: 0;
        left: 16px;
        border-bottom: 1px solid #ebedf0;
        -webkit-transform: scaleY(0.5);
        transform: scaleY(0.5);
      }
    }
  }
  ::v-deep .changColor {
    color: $base-color-blue;
  }

  ::v-deep {
    .van-search {
      padding: 16px 16px 12px;
      .van-cell {
        height: 32px;
      }
    }
  }
  .list-selector__nodata {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    .el-image {
      width: 80%;
      margin-top: 20px;
    }
    span {
      color: #909399;
      font-size: 12px;
    }
  }
  .van-Loading {
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    width: 100%;
    height: 100%;
  }
</style>
