import { useScenePicker } from '../../../../../../behaviors/picker/scene/scene';
import { useDistrictPicker } from '../../../../../../behaviors/picker/district/district';
import { useTownPicker } from '../../../../../../behaviors/picker/town/town';
import { useLoading } from '../../../../../../behaviors/loading';
import { fetchSearchUser } from '../../../../../../services/usercenter/fetchUser';
import { choseTownList, toLabel } from '../../../../../../common/dataTowns';

Component({
  behaviors: [useScenePicker, useDistrictPicker, useTownPicker, useLoading],
  options: {
    addGlobalClass: true,
    multipleSlots: true,
  },
  /**
   * 组件的属性列表
   */
  properties: {
    refresh: {
      type: Boolean,
      observer(value) {
        this.startLoad();
      },
    },
  },

  /**
   * 组件的初始数据
   */
  data: {
    placeholder: '请输入关键字搜索',
    searchValue: '',
    searchOption: {},
    list: [],
    selectedList: [],
    checkAll: false,
  },

  lifetimes: {
    attached: function () {
      // 在组件实例进入页面节点树时执行
      this._startLoad();
    },
    detached: function () {
      // 在组件实例被从页面节点树移除时执行
    },
  },

  /**
   * 组件的方法列表
   */
  methods: {
    startLoad() {
      this.setData({ selectedList: [] });
      this._startLoad();
    },

    onCancel() {
      const { selectedList, list } = this.data;
      if (selectedList.length > 0) {
        list.forEach(s => {
          s.checked = false;
        });
        this.setData({ selectedList: [], list });
        this.triggerEvent('clickConfirm', []);
      } else {
        this.triggerEvent('clickCancel');
      }
    },

    onConfirm() {
      this.triggerEvent('clickConfirm', this.data.selectedList);
    },

    // 下拉框选择事件
    _confirm(key) {
      // 监听区县的下拉框选择时间，动态设置街镇的所属区县
      if (key == 'district') {
        this.setSelectOptions('town', choseTownList(this.data.districtValue));
      }
      this._startLoad();
    },

    onCheckBoxChange(e) {
      const { checked } = e.detail;
      const { index } = e.currentTarget.dataset;
      const user = this.data.list[index];
      user.checked = checked;
      const { selectedList } = this.data;
      if (checked) {
        selectedList.push(user);
      } else {
        const i = selectedList.indexOf(user);
        if (i != -1) {
          selectedList.splice(i, 1);
        }
      }
      this.setData({
        selectedList,
        [`list[${index}]`]: user,
      });
      // console.log(selectedList);
    },

    onCheckAll() {
      const { selectedList, list } = this.data;
      // 已全选，则全部取消
      if (selectedList.length >= list) {
        list.forEach(u => {
          u.checked = false;
        });
        this.setData({
          selectedList: [],
          list,
          checkAll: false,
        });
      }
      // 未全选，则全部选中
      else {
        list.forEach(u => {
          u.checked = true;
        });
        this.setData({
          selectedList: list,
          list,
          checkAll: true,
        });
      }
    },

    _fetchData(page) {
      const { sceneValue, districtValue, districtText, townValue, searchValue } = this.data;
      const data = {
        sceneTypes: sceneValue,
        districtName: districtText,
        districtCode: districtValue[0],
        townCode: townValue[0],
        searchText: searchValue,
        userTypeId: 3,
      };
      return fetchSearchUser({ page, per_page: 500, data }).then(res => {
        this.setData({
          list: page == 1 ? res.data : this.data.list.concat(res.data),
        });
        return res.head;
      });
    },
  },
});