<template>
  <div class="meta-list-wrap">
    <!-- 弹框标题，确定，取消按键 -->
    <div class="van-picker__toolbar">
      <button type="button" class="van-picker__cancel" @click="onCancel">
        取消
      </button>
      <div class="van-ellipsis van-picker__title">{{ title }}</div>
      <button type="button" class="van-picker__confirm" @click="onSure">
        确认
      </button>
    </div>
    <div v-if="loading">
      <meta-loading :show="loading"></meta-loading>
    </div>
    <div v-else class="modelContent">
      <!-- 搜索框 -->
      <van-search
        v-if="showSearch"
        v-model="modelSearchValue"
        show-action
        placeholder="请输入搜索关键词"
        @input="modelOnSearch"
        @cancel="onSearchCancel"
      />
      <!-- 多选列表 -->
      <van-checkbox-group v-model="resultIds" @change="checkboxChange">
        <van-cell-group
          v-for="(item, index) in itemList"
          :title="item.type"
          :key="item.type"
        >
          <template
            v-for="(chiItem, chiIndex) in item.data"
            :key="index + '' + chiIndex"
          >
            <div class="meta-list-checkList">
              <div class="meta-list-checkTitle">
                {{ chiItem[showLabelField] }}
              </div>
              <van-checkbox :name="chiItem[idField] || ' '"></van-checkbox>
            </div>
          </template>
        </van-cell-group>
      </van-checkbox-group>
    </div>
  </div>
</template>

<script>
export default {
  name: "MetaList",
  props: {
    // 标题
    title: {
      type: String,
      default: "",
    },
    // 是否显示搜索框，默认不显示
    showSearch: {
      type: Boolean,
      default: false,
    },
    // 列表数据
    dataList: {
      type: Array,
    },
    // 显示列表数据的哪个字段
    showLabelField: {
      type: String,
      default: "label",
    },
    // 选中的列表，初始化勾选的值
    selectedList: {
      type: [Array, String],
      default: () => {
        return [];
      },
    },
    // 勾选时存储哪个字段，列表的主键，唯一值
    idField: {
      type: String,
      default: "value",
    },
    // 分组相关
    group: {
      // 是否多选
      multiple: {
        type: Boolean,
        default: true,
      },
      // 是否分组
      isGroup: {
        type: Boolean,
        default: false,
      },
      // 根据哪个字段分组
      accordTo: {
        type: String,
        default: "",
      },
    },
    loading: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      modelSearchValue: "",
      resultIds: this.selectedList,
      resultItems: [],
      timer: "",
    };
  },
  computed: {
    itemList: function () {
      if (this.group && this.group.isGroup == true) {
        return this.unique(this.dataList, this.group.accordTo);
      } else {
        let returnList = [
          {
            type: null,
            data: this.dataList,
          },
        ];
        return returnList;
      }
    },
  },
  methods: {
    unique(arr, key) {
      let newArr = [],
        types = {},
        i,
        j,
        cur;
      for (i = 0, j = arr.length; i < j; i++) {
        cur = arr[i];
        if (!(cur[key] in types)) {
          types[cur[key]] = { type: cur[key], data: [] };
          newArr.push(types[cur[key]]);
        }
        types[cur[key]].data.push(cur);
      }
      return newArr;
    },

    // 搜索事件
    modelOnSearch() {
      if (this.timer) {
        clearTimeout(this.timer);
      }
      this.timer = setTimeout(() => {
        this.$emit("search", this.modelSearchValue);
      }, 1000);
    },
    // 点击取消的事件
    onCancel() {
      this.$emit("cancel");
    },
    // 取消搜索
    onSearchCancel() {
      this.$emit("searchCancel");
    },
    // 确定事件
    onSure() {
      let items = [];
      this.dataList.forEach((item) => {
        if (this.resultIds.includes(item[this.idField])) {
          items.push(item);
        }
      });
      this.$emit("sure", { resultIds: this.resultIds, items: items });
    },
    checkboxChange(checkId) {
      let selectId = checkId.length ? [checkId[checkId.length - 1]] : checkId;
      if (selectId[0] != checkId[0]) {
        if (!this.group.multiple) {
          this.resultIds = selectId;
          console.log(this.resultIds);
        }
      }
    },
  },
  watch: {
    selectedList: {
      handler() {
        this.resultIds = this.selectedList;
      },
    },
  },
};
</script>

<style scoped lang="scss">
.meta-list-wrap {
  .modelContent {
    margin: 0px 10px;
    padding-top: 6.5vh;
    .van-cell--clickable {
      padding: 7px 10px;
      :deep(.van-cell__title) {
        overflow: scroll;
        white-space: nowrap;
        //text-overflow: ellipsis;
      }
      :deep(.van-checkbox) {
        margin-left: 10px;
      }
    }
  }

  .overlay {
    width: 100%;
    height: 100%;
    position: absolute;
    background: #f3f3f3;
    .loading {
      width: 100%;
      height: calc(100% - 6.5vh);
      display: flex;
      justify-content: center;
      align-items: center;
      padding-top: 6.5vh;
    }
  }
  .van-picker__toolbar {
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    height: 6.5vh;
    position: fixed;
    z-index: 9;
    background: #fff;
    width: 100%;
    border-radius: var(--van-popup-round-border-radius)
      var(--van-popup-round-border-radius) 0 0;
    .van-picker__cancel,
    .van-picker__confirm {
      height: 100%;
      padding: 0 16px;
      font-size: 14px;
      background-color: transparent;
      border: none;
      cursor: pointer;
    }
    .van-picker__cancel {
      color: #969799;
    }
    .van-picker__title {
      max-width: 50%;
      font-weight: 500;
      font-size: 16px;
      line-height: 20px;
      text-align: center;
    }
    .van-picker__confirm {
      color: #576b95;
    }
    .van-ellipsis {
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }
  }
  .van-cell {
    padding: var(--van-cell-vertical-padding) var(--van-cell-horizontal-padding);
  }
  .meta-list-checkList {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .meta-list-checkTitle {
    width: 80%;
    height: 10.67vw;
    line-height: 10.67vw;
    padding-left: 2vw;
  }
}
</style>
