<!--
<game-select
  v-mode="">
</game-select>

import gameSelect from '@/components/active/game-select.vue'
 -->
<template>
  <div>
    <el-cascader
      v-model="caseValue"
      :options="options"
      :props="props"
      @change="handleChange"
      @expand-change="expandChange"
    ></el-cascader>
  </div>
</template>

<script>
import { getDocGroup, getDocListGroup } from '@/api/api';
import errMsg from '@/common/js/error';
export default {
  name: 'game-select',
  props: {
    value: {
      type: [String, Array, Object],
      default() {
        return [];
      }
    }
  },
  data() {
    return {
      caseValue: [], // 选择值
      options: [],
      props: {
        label: 'label',
        children: 'children',
        value: 'id'
      }
    };
  },
  methods: {
    /**
     * 选择
     */
    handleChange(value) {
      const that = this;
      that.$emit('input', value);
    },
    /**
     *
     */
    expandChange(val) {
      const that = this;
      that.getContent(val[0]);
    },
    /**
     * 获取游戏一级类型
     */
    getContentGroup() {
      const that = this;
      let para = {
        // pageSize: that.pageSize
      };
      getDocGroup(para)
        .then(res => {
          let resData = res.data;
          if (resData.errorCode == 1) {
            if (!!resData.result && resData.result.length) {
              resData.result.forEach(ele => {
                ele.id = ele.groupId;
                ele.label = ele.groupName;
                ele.children = [];
              });
            }
            that.options = resData.result || [];
            return;
          }
          errMsg.errorMsg(resData);
        })
        .catch(function(error) {
          that.$message.error({
            duration: 1000,
            message: error.message
          });
        });
    },
    /**
     * 获取二级内容
     */
    getContent(groupId) {
      const that = this;
      let para = {
        groupId: groupId
      };
      getDocListGroup(para)
        .then(res => {
          let resData = res.data;
          if (resData.errorCode == 1) {
            if (!!resData.result && resData.result.length) {
              resData.result.forEach(ele => {
                ele.id = ele.articleId;
                ele.label = ele.title;
              });
            }
            that.options.forEach(ele => {
              if (ele.id == groupId) {
                ele.children = resData.result;
              }
            });
            that.$forceUpdate();
            return;
          }
          errMsg.errorMsg(resData);
        })
        .catch(function(error) {
          that.$message.error({
            duration: 1000,
            message: error.message
          });
        });
    }
  },
  watch: {
    value(newData, oldData) {
      const that = this;
      that.caseValue = newData;
      that.getContentGroup();
      setTimeout(() => {
        if (newData.length) {
          that.getContent(newData[0]);
        }
      }, 500);
    }
  },
  /* 接收数据 */
  mounted() {
    const that = this;
    that.caseValue = that.value;
    that.getContentGroup();
    setTimeout(() => {
      if (that.value.length) {
        that.getContent(that.value[0]);
      }
    }, 500);
  }
};
</script>
<style lang="less">
.el-cascader-menu {
  overflow-x: hidden;
}
.el-scrollbar__wrap {
  overflow-x: hidden;
}
</style>
