<template>
  <!-- <scroll-view class="scroll-view_H cateList" scroll-x="true" scroll-left="0"> -->
  <view class="" style="background-color: #fff; width: 100%">
    <u-tabs
      lineWidth="30"
      lineColor="#3AB3AE"
      :activeStyle="{
        color: '#3AB3AE',

        transform: 'scale(1.05)',
      }"
      :inactiveStyle="{
        color: '#606266',
        transform: 'scale(1)',
      }"
      :itemStyle="itemStyle"
      :keyName="label"
      :list="dataList"
      :is-scroll="false"
      :current="currentCateIndex"
      @change="handleselectCate"
    >
      <template slot="labelSlot" slot-scope="slotProps">
        <slot name="labelSlot" :data="slotProps.data"></slot>
      </template>
    </u-tabs>
  </view>
</template>

<script>
import $http from "@/config/requestConfig.js";
import { mapState } from "vuex";
export default {
  props: ["list", "currentCateIndex", "label", "itemStyle"],
  components: {},
  data() {
    return {
      detailInfo: {},
      playData: {},
      searchValue: "",

      twoCateList: [], // 二级分类标题
      dataList: [{}, {}], // 方剂标题
      // currentCateIndex: 0, // 当前选中的一级分类
      curTwoCateIndex: 0, // 当前选中的二级分类
      searchList: [], // 搜索结果数组
      showSearchList: false,
      userMes: {}, // 用户信息
      searchDisable: false, // 搜索不可用
      limitShow: false,
      limitTitle: "提示",
      limitContent: "",
      scrollViewHeight: 0,
      urlList: {
        instructionsForUse: "app/phone.do?getMembershipGuide",
      },
    };
  },
  onLoad() {
    this.getCourseDescriptionData();
    // this.getUserInfo()
    // this.getCateList()
  },
  onHide() {
    // this.showSearchList = false
    // this.searchList = []
  },
  computed: {
    ...mapState(["userInfo"]),
  },
  watch: {
    list: {
      immediate: true,
      handler(newRoute) {
        console.log(this.list,'8777777777777');
        this.dataList=[...this.list]
        
      },
    },
   
  },
  methods: {
    goCourseDescription(v) {
      console.log(v);
      uni.navigateTo({
        // url: '../bookShop/commodityDetail?id=' + item.id
        url: `/pages/courseInformation/courseDescription/index?navTitle=${v.nameCN}&title=${v.nameCN}&oid=${v.oid}`,
      });
    },
    getData() {
      console.log(this.$store.state, "11111111111");
      this.$http
        .post(this.urlList.instructionsForUse, {
          customerOid: "94c043df9daa40278e86e79fbd149c8d",
          customerType: "D",
          token: uni.getStorageSync("token"),
          oid: "b07e45f6a5f3491db9854b16f3fd8b19",

          step: 0,
          limit: 100,
        })
        .then((res) => {
          this.detailInfo = res.obj;

          // socket.init();
        });
    },
    getPriceData() {
      var that = this;
      setTimeout(() => {
        that.$nextTick(() => {
          that.$refs.priceDetail.getData();
        });
      }, 100);
    },
    // 检查是有权限使用搜索功能
    checkDisable() {
      console.log("点击了");
    },
    // 显示无权限弹窗
    // showNoRights() {
    // 	let that = this
    // 	uni.showModal({
    // 		content: "",
    // 		confirmText: '好的',
    // 		showCancel: false,
    // 		success: function(res) {
    // 			if (res.confirm) {
    // 				// console.log('用户点击确定');
    // 				that.clear()
    // 			}
    // 		}
    // 	})
    // },
    // 获取用户详情
    getUserInfo() {
      // 用户详情
      if (this.userInfo.id != undefined) {
        this.$http.post("book/user/info/" + this.userInfo.id).then((res) => {
          this.userMes = res.user;
          this.getCateList();
          console.log(this.userMes, "呼呼");
        });
      }
    },
    // 详情
    gotoDetail(item) {
      console.log("111", item);
      console.log("this.currentCateIndex", this.currentCateIndex);
      console.log("this.curTwoCateIndex", this.curTwoCateIndex);
      if (this.currentCateIndex == 0) {
        uni.navigateTo({
          // url: '../bookShop/commodityDetail?id=' + item.id
          url: "./xueshugongxianDetail?id=" + item.id,
        });
        return;
      }
      if (this.currentCateIndex == 1) {
        uni.navigateTo({
          url: "./medicaldesDetail?id=" + item.id,
        });
        return;
      }
      if (this.currentCateIndex == 2) {
        console.log("111", item);
        uni.navigateTo({
          url: "./video?title=" + item.name + "&src=" + item.url,
        });
        return;
      }
      if (this.currentCateIndex == 3) {
        console.log("111", item);
        uni.navigateTo({
          url: "./recordDetail?id=" + item.id,
        });
        return;
      }
    },
    // 获取名称
    getTitles(dictType) {
      console.log("dictType", dictType);
      if (this.currentCateIndex == 0) {
        if (dictType == 2) {
          uni.navigateTo({
            url: "./zhuanzhuchuban",
          });
          return;
        }
        $http
          .request({
            url: "book/generalArticle/articleByPage",
            method: "POST",
            data: {
              // loadAnimate: 'none', // 请求加载动画
              type: dictType == 1 ? "1" : "2",
              limit: 1000,
              current: 1,
            },
            header: {
              //默认 无 说明：请求头
              "Content-Type": "application/json",
            },
          })
          .then((res) => {
            console.log(res, "内容获取成功");
            if (res.code == 0 && res.result && res.result.records.length > 0) {
              this.dataList = res.result.records;
            } else {
              this.dataList = [];
            }
          })
          .catch((e) => {
            this.dataList = [];
            console.log(e);
          });
      }
      if (this.currentCateIndex == 1) {
        $http
          .request({
            url: "book/medicaldes/inheritListByPage",
            method: "POST",
            data: {
              // loadAnimate: 'none', // 请求加载动画
              dictType: dictType,
              limit: 1000,
              current: 1,
            },
            header: {
              //默认 无 说明：请求头
              "Content-Type": "application/json",
            },
          })
          .then((res) => {
            console.log(res, "内容获取成功");
            if (res.code == 0 && res.result.records.length > 0) {
              this.dataList = res.result.records;
              for (let i = 0; i < this.dataList.length; i++) {
                this.dataList[i].imageslist = [];
                this.dataList[i].imageslist = this.dataList[i].img.split(";");
              }
            } else {
              this.dataList = [];
            }
          })
          .catch((e) => {
            this.dataList = [];
            console.log(e);
          });
      }
      if (this.currentCateIndex == 2) {
        $http
          .request({
            url: "book/medicaldes/lightListByType?type=" + dictType,
            method: "POST",
            data: {
              // loadAnimate: 'none', // 请求加载动画
              limit: 1000,
              page: 1,
            },
            header: {
              //默认 无 说明：请求头
              "Content-Type": "application/json",
            },
          })
          .then((res) => {
            console.log(res, "内容获取成功");
            if (res.code == 0 && res.result.length > 0) {
              this.dataList = res.result;
            } else {
              this.dataList = [];
            }
          })
          .catch((e) => {
            this.dataList = [];
            console.log(e);
          });
      }
      if (this.currentCateIndex == 3) {
        $http
          .request({
            url: "book/medicaldes/recordByType?type=" + dictType,
            method: "POST",
            data: {
              // loadAnimate: 'none', // 请求加载动画
              limit: 1000,
              page: 1,
            },
            header: {
              //默认 无 说明：请求头
              "Content-Type": "application/json",
            },
          })
          .then((res) => {
            console.log(res, "内容获取成功");
            if (res.code == 0 && res.result.length > 0) {
              this.dataList = res.result;
            } else {
              this.dataList = [];
            }
          })
          .catch((e) => {
            this.dataList = [];
            console.log(e);
          });
      }
    },
    setTwoCateIndex(item, index) {
      let dictType = item.dictType;
      this.curTwoCateIndex = index;
      this.getTitles(dictType);
    },
    async handleselectCate(e) {
      this.$emit("handleselectCate", e, e.index);
      var that = this;
    },

    transformData(inputData) {
      const result = {};
      inputData.forEach((item) => {
        const { letter } = item;
        if (!result[letter]) {
          result[letter] = [];
        }
        result[letter].push(item);
      });
      // const finalResult = Object.keys(result).map(key => ({ [key]: result[key] }));
      return result;
    },
    // getJFList(id) {
    // 	$http.request({
    // 		url: "book/prescript/prescriptListForJF",
    // 		method: "POST", // POST、GET、PUT、DELETE，具体说明查看官方文档
    // 		data: {
    // 			loadAnimate: 'none', // 请求加载动画
    // 			'categoryId': id
    // 		},
    // 		header: { //默认 无 说明：请求头
    // 			'Content-Type': 'application/json'
    // 		},
    // 	}).then(res => {
    // 		if (res.code == 0 && res.list.length > 0) {
    // 			this.twoCateList = []
    // 			this.dataList = this.transformData(res.list)
    // 			console.log('JF经方', this.dataList)
    // 		} else {
    // 			this.twoCateList = []
    // 			this.dataList = []
    // 		}
    // 	}).catch(e => {
    // 		this.twoCateList = []
    // 		this.dataList = []
    // 		console.log(e)
    // 	})
    // },
    getCateList(id) {
      id ? "" : (id = 0);
      this.twoCateList = [];
      this.curTwoCateIndex = 0;
      // 0为获取顶级分类，其他为搜索下级分类，目前的逻辑，顶级是写死的，所以可能只会涉及到搜索第二级
      // $http.request({
      // 	url: "book/prescript/prescriptCategoryList",
      // 	method: "POST", // POST、GET、PUT、DELETE，具体说明查看官方文档
      // 	data: {
      // 		loadAnimate: 'none', // 请求加载动画
      // 		'categoryId': id
      // 	},
      // 	header: { //默认 无 说明：请求头
      // 		'Content-Type': 'application/json'
      // 	},
      // }).then(res => {
      // console.log(res, '脉穴分类获取成功')
      // if (res.code == 0 && res.list.length > 0) {
      // this.cateList = res.list
      this.getTowCateList(this.cateList[0].type);
      // } else {
      // 	this.cateList = []
      // }
      // }).catch(e => {
      // 	this.cateList = []
      // 	console.log(e)
      // })
    },

    // 放大图片
    previewImage(url) {
      console.log(url);
      uni.previewImage({
        urls: [url],
        longPressActions: {
          itemList: ["很抱歉，暂不支持保存图片到本地"],
          success: function (res) {
            // console.log(res,'+++++')
          },
        },
      });
    },
    // getSearch() {
    // 	$http.request({
    // 		url: "book/prescript/searchPrescript",
    // 		method: "POST", // POST、GET、PUT、DELETE，具体说明查看官方文档
    // 		data: {
    // 			loadAnimate: 'none', // 请求加载动画
    // 			'keywords': this.searchValue,
    // 			type: this.currentCateIndex + 1
    // 		},
    // 		header: { //默认 无 说明：请求头
    // 			'Content-Type': 'application/json'
    // 		},
    // 	}).then(res => {
    // 		console.log(res, '搜索结果')
    // 		if (res.code == 0 && res.list.length >= 0) {
    // 			this.showSearchList = true
    // 			this.searchList = res.list
    // 		} else {
    // 			this.searchList = []
    // 		}
    // 	}).catch(e => {
    // 		// this.dataList = []
    // 		this.searchList = []
    // 		console.log(e)
    // 	})
    // },
    // search(res) {
    // 	console.log(res, 'res')
    // 	// uni.showToast({
    // 	// 	title: '搜索：' + res,
    // 	// 	icon: 'none'
    // 	// })
    // 	if (res == '') {
    // 		this.showSearchList = false
    // 		this.searchList = []
    // 	} else {
    // 		this.getSearch()
    // 	}

    // },
    // input(res) {
    // 	console.log('----input:', res)
    // 	if (res == '') {
    // 		this.searchList = []
    // 	} else {
    // 		this.getSearch()
    // 	}
    // },
    // clear(res) {
    // 	console.log('----clear:', res)
    // 	// uni.showToast({
    // 	// 	title: 'clear事件，清除值为：',
    // 	// 	icon: 'none'
    // 	// })
    // 	this.searchValue = ''
    // 	this.showSearchList = false
    // },
    // blur(res) {
    // 	// console.log('----blur:', res)
    // 	// if (res == '') {
    // 	// 	this.showSearchList = false
    // 	// 	this.searchList = []
    // 	// } else {
    // 	// 	this.getSearch()
    // 	// }
    // },
    // focus(e) {
    // 	console.log('----focus:')
    // 	// uni.showToast({
    // 	// 	title: 'focus事件，输出值为：' + e.value,
    // 	// 	icon: 'none'
    // 	// })
    // 	// 等于1 就是有权限
    // 	// this.showSearchList = true

    // },
    // cancel(res) {
    // 	uni.showToast({
    // 		title: '点击取消，输入值为：' + res.value,
    // 		icon: 'none'
    // 	})
    // }
  },
  onBackPress() {
    // #ifdef APP-PLUS
    plus.key.hideSoftKeybord();
    // #endif
  },
};
</script>

<style lang="scss" scoped>
.headImage {
  width: 100%;
  height: 300rpx;
  // margin-bottom: 20rpx;
}

.scroll-Y {
  height: 100%;
}

.scroll-view_H {
  white-space: nowrap;
  width: 100%;
}

.scroll-view-item {
  // height: 300rpx;
  // line-height: 300rpx;
  // text-align: center;
  // font-size: 36rpx;
}

.scroll-view-item_H {
  display: inline-block;
  width: 100%;
  // height: 300rpx;
  // line-height: 300rpx;
  // text-align: center;
  // font-size: 36rpx;
}

.dataList {
  height: 100%;
}

.titleList2 {
  height: calc(100% - 170rpx);
}

.instructionsForUse {
  height: calc(100% - 380rpx);
  padding: 30rpx 30rpx 0;
  box-sizing: border-box;
}

.cateList {
  width: 100%;
  margin-top: 15rpx;
}
.instructionsForUseBox {
  height: calc(100%);
}
</style>
