import { fetchLedgerType } from '../../services/enterprise/fetchLedger';
import { fetchLedgerDetail } from '../../services/enterprise/fetchLedger';
import { toLabel } from '../../common/dataSceneTypes';

/**
 * 台账专题管理
 */
export const useTopic = Behavior({
  data: {
    // 专题选择弹出框
    popupVisible: false,
    // 按场景类型分类的台账选择情况
    selectedTopics: {},
    // 专题对应的台账信息加载状态
    topicLoading: false,
  },
  methods: {
    /**
     * 初始化当前场景类型下的可选台账选项，
     * 初始化默认选择的专题（台账类型），
     * @param {Function} callback 可选的回调函数
     */
    initselectedTopics(callback) {
      const { selectedTopics } = this.data;
      const { sceneType } = this.data.searchOptions;
      if (selectedTopics[sceneType] == undefined || selectedTopics[sceneType].length == 0) {
        fetchLedgerType({ sceneType: parseInt(sceneType) }).then(res => {
          // 选择前三个台账为默认专题
          let count = 3;
          for (let i = 0; i < 3; i++) {
            if (i >= res.length) break;
            res[i].selected = {
              color: 'green',
              count: '✓',
              shape: 'square',
            };
          }
          selectedTopics[sceneType] = {
            sceneType,
            sceneTypeText: toLabel(sceneType),
            topicText: '请选择专题',
            allLedgerTypes: res,
            selectedLedgers: [],
            checkAll: false,
            selectedCount: 0,
          };
          this.setData({ selectedTopics });
          this.refreshSelectedLedger();
          if (typeof callback === 'function') {
            callback();
          }
        });
      } else {
        if (typeof callback === 'function') {
          callback();
        }
      }
    },
    // 显示弹出框
    showPopUp() {
      this.initselectedTopics(() => this.setData({ popupVisible: true }));
    },
    // 监听弹出框状态变化，例如通过点击外部遮罩层关闭弹出框时
    onPopupVisibleChange(e) {
      const { visible } = e.detail;
      this.setData({ popupVisible: visible });
      if (!visible) {
        this.closePatrolList();
      }
    },
    // 取消并关闭台账类别选择弹出框
    closePatrolList() {
      const { selectedTopics } = this.data;
      const { sceneType } = this.data.searchOptions;
      const { allLedgerTypes, selectedLedgers } = selectedTopics[sceneType];
      allLedgerTypes.forEach(p => {
        if (selectedLedgers.indexOf(p.ledgerSubTypeId) == -1) {
          p.selected = false;
        } else {
          p.selected = {
            color: 'green',
            count: '✓',
            shape: 'square',
          };
        }
      });
      this.setData({
        [`selectedTopics.${sceneType}.allLedgerTypes`]: allLedgerTypes,
        popupVisible: false,
      });
      this._isCheckAll();
    },
    // 选择台账类别
    choseLedgerType(e) {
      const { index } = e.currentTarget.dataset;
      const { selectedTopics } = this.data;
      const { sceneType } = this.data.searchOptions;
      const { allLedgerTypes, selectedLedgers } = selectedTopics[sceneType];
      let { selected, ledgerSubTypeId } = allLedgerTypes[index];
      if (selected) {
        selected = null;
      } else {
        selected = {
          color: 'green',
          count: '✓',
          shape: 'square',
        };
      }
      this.setData({
        [`selectedTopics.${sceneType}.allLedgerTypes[${index}].selected`]: selected,
      });
      this._isCheckAll();
    },
    // 全选
    onCheckAll(e) {
      const { checked } = e.detail;
      const { selectedTopics } = this.data;
      const { sceneType } = this.data.searchOptions;
      const { allLedgerTypes } = selectedTopics[sceneType];
      allLedgerTypes.forEach(p => {
        if (checked) {
          p.selected = {
            color: 'green',
            count: '✓',
            shape: 'square',
          };
        } else {
          p.selected = null;
        }
      });
      this.setData({ [`selectedTopics.${sceneType}.allLedgerTypes`]: allLedgerTypes });
      this._isCheckAll();
    },
    /**
     * 全选判断
     * 根据用户选择的情况，判断是否已经全选，更新全选变量状态
     */
    _isCheckAll() {
      const { selectedTopics } = this.data;
      const { sceneType } = this.data.searchOptions;
      const { allLedgerTypes } = selectedTopics[sceneType];
      // 判断是否全选中
      const p = allLedgerTypes.filter(v => {
        return v.selected == undefined || v.selected == null || v.selected == false;
      });
      this.setData({
        [`selectedTopics.${sceneType}.selectedCount`]: allLedgerTypes.length - p.length,
        [`selectedTopics.${sceneType}.checkAll`]: p.length == 0,
      });
    },
    // 刷新选择结果
    refreshSelectedLedger() {
      const { selectedTopics } = this.data;
      const { sceneType } = this.data.searchOptions;
      const { allLedgerTypes, selectedLedgers } = selectedTopics[sceneType];
      let topicText = '';
      allLedgerTypes.forEach(p => {
        const i = selectedLedgers.indexOf(p.ledgerSubTypeId);
        if (p.selected) {
          if (i == -1) {
            selectedLedgers.push(p.ledgerSubTypeId);
          }
          if (topicText != '') {
            topicText += '、';
          }
          topicText += p.ledgerName;
        } else {
          if (i != -1) {
            selectedLedgers.splice(i, 1);
          }
        }
      });
      if (topicText == '') {
        topicText = '点击选择';
      } else if (selectedLedgers.length == allLedgerTypes.length) {
        topicText = '已选全部类别';
      } else if (topicText.length > 9) {
        topicText = topicText.substring(0, 10);
        topicText += `...等${selectedLedgers.length}个类别`;
      }
      this.setData({
        [`selectedTopics.${sceneType}.selectedLedgers`]: selectedLedgers,
        [`selectedTopics.${sceneType}.topicText`]: topicText,
      });
    },
    /**
     * 台账类别选择事件
     * 在用户点击弹出框的“确定”按钮后，将[allLedgerTypes]选中的台账更新到[selectedLedgers]列表中，
     * 关闭弹出框，并且触发获取台账信息的函数
     */
    onLedgerPickerChange() {
      this.refreshSelectedLedger();
      this.setData({ popupVisible: false });
      this.fetchTopicLedgers();
    },
    /**
     * 获取专题相关的台账信息
     * @param {Int} startIndex 需要获取台账信息的起始索引
     */
    fetchTopicLedgers(startIndex) {
      this.setData({ topicLoading: true });
      // 确定所选的台账类型
      const { selectedTopics } = this.data;
      const { sceneType, time } = this.data.searchOptions;
      const { allLedgerTypes, selectedLedgers } = selectedTopics[sceneType];
      const _selectedLedgers = allLedgerTypes.filter(v => {
        return selectedLedgers.indexOf(v.ledgerSubTypeId) != -1;
      });

      if (_selectedLedgers.length == 0) {
        searchResult.forEach(e => {
          e.topics = [];
        });
      } else {
        const { searchResult } = this.data;
        const alltask = [];
        for (let i = startIndex ? startIndex : 0; i < searchResult.length; i++) {
          const e = searchResult[i];
          this.setData({ [`searchResult[${i}].topicLoading`]: true });
          const t = fetchLedgerDetail({ userId: e.userId, sceneType, time }).then(res => {
            const topics = [];
            _selectedLedgers.forEach(l => {
              const ledger = res.data.find(r => r.ledgerSubTypeId == l.ledgerSubTypeId);
              const detail = ledger ? ledger : { ledgerName: l.ledgerName };
              topics.push({ ...l, detail });
            });
            this.setData({
              [`searchResult[${i}].topicLoading`]: false,
              [`searchResult[${i}].topics`]: topics,
            });
          });
          alltask.push(t);
        }
        Promise.all(alltask).finally(() => {
          this.setData({ topicLoading: false });
          console.log('searchResult', this.data.searchResult);
        });
      }
    },
  },
});