<!--
<game-select v-model=""></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 { getRequest } 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: [
        {
          gameType: 1,
          id: 1,
          gameTypeName: '大转盘',
          label: '大转盘',
          children: []
        },
        {
          gameType: 2,
          id: 2,
          gameTypeName: '刮刮卡',
          label: '刮刮卡',
          children: []
        },
        {
          gameType: 3,
          id: 3,
          gameTypeName: '拼图游戏',
          label: '拼图游戏',
          children: []
        },
        {
          gameType: 4,
          id: 4,
          gameTypeName: '找你马',
          label: '找你马',
          children: []
        },
        {
          gameType: 5,
          id: 5,
          gameTypeName: '口令福利',
          label: '口令福利',
          children: []
        }
      ],
      props: {
        label: 'label',
        children: 'children',
        value: 'id'
      }
    };
  },
  methods: {
    /**
     * 选择
     */
    handleChange(value) {
      const that = this;
      that.$emit('input', value);
      that.options.forEach(ele => {
        if (value.length == 2 && value[0] == ele.id) {
          ele.children.forEach(child => {
            if (value[1] == child.gameId) {
              that.$emit('changeGame', child.gameName, child.gameUrl);
            }
          });
        }
      });
    },
    /**
     *
     */
    expandChange(val) {
      const that = this;
      that.getContent(val[0]);
    },

    /**
     * 获取二级内容
     */
    getContent(gameType) {
      const that = this;
      let para = {
        gameType: gameType
      };
      getRequest('/sharing-core-web/list-game', para)
        .then(res => {
          let resData = res.data;
          if (resData.errorCode == 1) {
            if (!!resData.result && resData.result.length) {
              resData.result.forEach(ele => {
                ele.id = ele.gameId;
                ele.label = ele.gameName;
              });
            }
            that.options.forEach(ele => {
              if (ele.id == gameType) {
                ele.children = resData.result;
              }
            });
            that.$forceUpdate();
            return;
          }
          errMsg.errorMsg(resData);
        })
        .catch(function(error) {
          that.$message.error({
            duration: 2500,
            message: error.message
          });
        });
    }
  },
  watch: {
    value(newData, oldData) {
      const that = this;
      that.caseValue = newData;
      setTimeout(() => {
        if (newData.length) {
          that.getContent(newData[0]);
        }
      }, 500);
    }
  },
  /* 接收数据 */
  mounted() {
    const that = this;
    that.caseValue = that.value;
    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;
}

.el-cascader {
  width: 100%;
}
</style>
