import { ref } from 'vue'
import axios from '@/utils/axios';
import _ from 'lodash'
import { Toast } from 'vant';
import { useRoute } from 'vue-router'

export const useVideoList = () => {
  const $route = useRoute();
  // 切换视频语言
  const checkMandarin = ref(true); // 普通话选项卡
  const checkLocalism = ref(false); // 方言选项卡
  const chooseLanguage = ref({ text: '普通话', val: '普通话' }); // 默认选中普通话
  /**
   * 切换视频语言回调
   * @param {*} type 
   */
  const toggleLanguage = (type) => {
    if (type === 'mandarin') {
      checkMandarin.value = true;
      checkLocalism.value = false;
    } else {
      checkMandarin.value = false;
      checkLocalism.value = true;
    }
    // 修改默认语言绑定数据
    if (checkLocalism.value) {
      // tslint:disable-next-line:no-string-literal
      chooseLanguage.value = { text: columns.value[0]['text'], val: columns.value[0]['val'] }
    } else {
      chooseLanguage.value = { text: '普通话', val: '普通话' };
    }
    // 切换语言需要更新列表数据
    onReload()
  }

  // 方言选择项
  let columns = ref([
    { text: '所有方言', val: '所有方言' },
  ])
  //
  axios.get('/srv/?a=localism_list')
  .then(res => {
    if (res.data.code === 1) {
      let arr = [];
      _.each(res.data.data, item => {
        arr.push({
          text: item,
          val: item
        })
      });
      columns.value = _.concat(columns.value, arr);
    } else {
      // tslint:disable-next-line: no-console
      console.warn(res);
      if (!res.data.show) return false;
      Toast({
        icon: 'close',
        message: res.data.msg
      });
    }
  })
  .catch(err => {
    // tslint:disable-next-line: no-console
    console.error(err); 
  })

  const showPicker = ref(false);
  
  /**
   * 选择方言确认后回调
   * @param {*} param
   */
  const onConfirm = ({ selectedOptions }) => {
    showPicker.value = false;
    chooseLanguage.value = {
      text: selectedOptions[0].text,
      val: selectedOptions[0].val
    }
    onReload()
  };

  // 绑定页面数据
  const bookInfo = ref('');
  // tslint:disable-next-line: variable-name
  const prod_list = ref([]);
  const limit = ref(10)
  const offset = ref(0)

  // 处理书籍下作品列表
  const loading = ref(false);
  const finished = ref(false);

  // 因为不能让空图标提前出来的写法
  const finishedTextStatus = ref(false);
  const emptyStatus = ref(false);

  /**
   * 向下滚动查询数据
   */
  const onLoad = () => {
    // 异步更新数据
    axios.get('/srv/?a=book_info', {
      params: {
        book_id: $route.query.id,
        localism_type: chooseLanguage.value.text,
        limit: limit.value,
        offset: offset.value
      }
    })
      .then(res => {
        if (res.data.code === 1) {
          bookInfo.value = res.data.data;
          prod_list.value = _.concat(prod_list.value, res.data.data.prod_list);
          prod_list.value = _.uniqBy(prod_list.value, 'id');
          offset.value = prod_list.value.length;
          loading.value = false;
          // 数据全部加载完成
          if (!res.data.data.prod_list.length) {
            // 加载状态结束
            finished.value = true;
          }
          // 空数据提示
          if (!prod_list.value.length) {
            finishedTextStatus.value = false;
          }
          emptyStatus.value = Object.is(prod_list.value.length, 0);
        } else {
          // tslint:disable-next-line: no-console
          console.warn(res);
          if (!res.data.show) return false;
          Toast({
            icon: 'close',
            message: res.data.msg
          });
        }
      })
      .catch(err => {
        // tslint:disable-next-line: no-console
        console.error(err);
      })
  };

  /**
   * 重载刷新程序
   */
  const onReload = () => {
    offset.value = 0
    prod_list.value = []
    loading.value = true;
    finished.value = false;
    onLoad()
  }

  return {
    toggleLanguage,
    onLoad,
    columns,
    prod_list,
    finished,
    loading,
    bookInfo,
    showPicker,
    checkLocalism,
    checkMandarin,
    onConfirm,
    chooseLanguage,
    finishedTextStatus,
    emptyStatus,
  }
}