<template>
  <page-meta
    :page-font-size="$baseFontSize() + 'px'"
    :root-font-size="$baseFontSize() + 'px'"
  ></page-meta>
  <view
    class="container commonPageBox"
    style="background-color: #fff !important"
  >
    <!-- 公共组件-每个页面必须引入 -->
    <public-module></public-module>
    <z-nav-bar title="专著出版" bgColor="#3AB3AE" fontColor="#fff"></z-nav-bar>
    <!-- <uni-search-bar @confirm="search" :focus="true" v-model="searchValue" @blur="blur" @focus="focus" @input="input"
			@cancel="cancel" @clear="clear">
		</uni-search-bar> -->

    <view class="contentBox">
      <!-- <scroll-view class="scroll-view_H oneCateList" scroll-x="true" scroll-left="0"> -->
      <!-- <view class="oneCateList flexbox">
				<text :class="[curOneCateIndex == index ? 'cur' : '']" @click="setOneCateIndex(item,index)"
					v-for="(item, index) in oneCateList" :key="item.type">{{item.title}}</text>
			</view> -->
      <!-- <view class="search_box" v-if="oneCateList.length > 0">
				<u-search @click="checkDisable" placeholder="请输入方剂名" @focus="focus" @clear="clear" v-model="searchValue"
					@input="input" @blur="blur" @search="search" @custom="search"></u-search>
			</view> -->
      <!-- <view class="searchList" v-show="showSearchList">
				<view class="itemBox" v-if="searchList.length > 0">
					<view class="item" v-for="(item, index) in searchList" :key="index" @click="gotoDetail(item)">
						{{item.title}}
					</view>
				</view>
				<view v-else class="">
					<u-divider text="未找到相关方剂哦~"></u-divider>
				</view>
			</view> -->
      <!-- </scroll-view> -->
      <view v-show="!showSearchList" style="width: 100%; height: 100%">
        <view class="grid twoCateList" v-if="twoCateList.length > 0">
          <u-grid :col="3" border class="u-grid-list">
            <u-grid-item
              v-for="(item, index) in twoCateList"
              :key="item.dictType"
              @click="setTwoCateIndex(item, index)"
            >
              <view
                :class="['grid-text', curTwoCateIndex == index ? 'cur' : '']"
                >{{ item.dictValue }}</view
              >
            </u-grid-item>
          </u-grid>
        </view>
        <!-- 吴门缘起-吴门之徽 -->
        <view
          class="titleList"
          v-if="curOneCateIndex == 2 && curTwoCateIndex == 2"
        >
          <u-grid :col="3" v-if="titleList.length > 0">
            <u-grid-item
              v-for="(item, index) in titleList"
              :key="item.id"
              @click="previewImage(item.url)"
              style="align-items: flex-start"
            >
              <!-- <view :class="['titleItem']">{{item.name}}</view> -->
              <img :src="item.url" alt="" class="wmzhimg" mode="aspectFit" />
            </u-grid-item>
          </u-grid>
          <u-divider v-else text="暂无数据哦~"></u-divider>
        </view>
        <!-- 其他 -->
        <view class="titleList" v-else>
          <u-grid
            :col="1"
            v-if="
              titleList.length > 0 &&
              (curOneCateIndex == 0 || curOneCateIndex == 2)
            "
          >
            <u-grid-item
              v-for="(item, index) in titleList"
              :key="item.id"
              @click="gotoDetail(item)"
              style="align-items: flex-start; border-bottom: 2px solid #fff"
            >
              <view :class="['titleItem']">{{ item.name }}</view>
            </u-grid-item>
          </u-grid>
          <u-grid :col="1" v-if="titleList.length > 0 && curOneCateIndex == 3">
            <u-grid-item
              v-for="(item, index) in titleList"
              :key="item.id"
              @click="gotoDetail(item)"
              style="align-items: flex-start; border-bottom: 2px solid #fff"
            >
              <view :class="['titleItem']">{{ item.title }}</view>
            </u-grid-item>
          </u-grid>
          <view :col="1" v-if="titleList.length > 0 && curOneCateIndex == 1">
            <view
              v-for="(item, index) in titleList"
              :key="item.id"
              @click="gotoDetail(item)"
              style="
                align-items: flex-start;
                border-bottom: 2px solid #fff;
                display: flex;
                padding: 20rpx 0;
              "
            >
              <view style="width: 280rpx; text-align: center">
                <img
                  src=""
                  v-if="item.imageslist && item.imageslist.length == 0"
                  class="chImage"
                />
                <img
                  :src="item.imageslist && item.imageslist[0]"
                  v-else
                  class="chImage"
                />
              </view>
              <view :class="['titleItem']">{{ item.name }}</view>
            </view>
          </view>
          <u-divider
            text="暂无数据哦~"
            v-if="titleList.length == 0"
          ></u-divider>
        </view>
      </view>
    </view>

    <!-- <view class="search_box flexbox" @click="">
			<view class="search">
				<text class="icon_search"></text>
				<text class="prompt">请输入方剂名</text>
			</view>
		</view> -->

    <!-- <u-modal :show="limitShow" :title="limitTitle" :content='limitContent' @confirm="limitShow=false">
			<view class="limiTy">
				<view v-if="curOneCateIndex == 0">
					此功能使用权限仅对同一手机账号注册过一路健康APP，且开通《吴门验方基础班》【上中下】与《吴门验方提高班》【上下】五部课程的疯子读书APP学员开通。
					<br>如果您符合条件，请联系微信客服开通。
					<br>客服微信：<b>yilujiankangkefu</b>
				</view>
				<view v-if="curOneCateIndex == 3">
					此功能使用权限仅对在疯子读书APP购买《肿瘤六经辨证法》书籍的学员开通。
					<br>如果您符合条件，请联系微信客服开通。
					<br>客服微信：<b>yilujiankangkefu</b>
				</view>
			</view>
		</u-modal> -->

    <!-- <z-navigation></z-navigation> -->
  </view>
</template>

<script>
import $http from "@/config/requestConfig.js";
import { mapState } from "vuex";
export default {
  data() {
    return {
      playData: {},
      searchValue: "",
      oneCateList: [
        {
          title: "专著出版",
          type: "medicaldesBookType",
        },
        {
          title: "学术传承",
          type: "inheritType",
        },
        {
          title: "吴门缘起",
          type: "lightType",
        },
        {
          title: "吴门纪实",
          type: "recordType",
        },
      ], // 一级分类标题1
      twoCateList: [], // 二级分类标题
      titleList: [], // 方剂标题
      curOneCateIndex: 0, // 当前选中的一级分类
      curTwoCateIndex: 0, // 当前选中的二级分类
      searchList: [], // 搜索结果数组
      showSearchList: false,
      userMes: {}, // 用户信息
      searchDisable: false, // 搜索不可用
      limitShow: false,
      limitTitle: "提示",
      limitContent: "",
    };
  },
  onLoad() {
    this.getUserInfo();
    // this.getCateList()
  },
  onHide() {
    // this.showSearchList = false
    // this.searchList = []
  },
  computed: {
    ...mapState(["userInfo"]),
  },
  methods: {
    // 检查是有权限使用搜索功能
    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.curOneCateIndex", this.curOneCateIndex);
      console.log("this.curTwoCateIndex", this.curTwoCateIndex);
      if (this.curOneCateIndex == 0) {
        uni.navigateTo({
          // url: '../bookShop/commodityDetail?id=' + item.id
          url: "../eBook/bookContent?Id=" + item.id,
        });
        return;
      }
      if (this.curOneCateIndex == 1) {
        uni.navigateTo({
          url: "./medicaldesDetail?id=" + item.id,
        });
        return;
      }
      if (this.curOneCateIndex == 2) {
        console.log("111", item);
        uni.navigateTo({
          url: "./video?title=" + item.name + "&src=" + item.url,
        });
        return;
      }
      if (this.curOneCateIndex == 3) {
        console.log("111", item);
        uni.navigateTo({
          url: "./recordDetail?id=" + item.id,
        });
        return;
      }
    },
    // 获取名称
    getTitles(dictType) {
      console.log("dictType", dictType);
      if (this.curOneCateIndex == 0) {
        $http
          .request({
            url: "book/medicaldes/bookListByType?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.titleList = res.result;
            } else {
              this.titleList = [];
            }
          })
          .catch((e) => {
            this.titleList = [];
            console.log(e);
          });
      }
      if (this.curOneCateIndex == 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.titleList = res.result.records;
              for (let i = 0; i < this.titleList.length; i++) {
                this.titleList[i].imageslist = [];
                this.titleList[i].imageslist = this.titleList[i].img.split(";");
              }
            } else {
              this.titleList = [];
            }
          })
          .catch((e) => {
            this.titleList = [];
            console.log(e);
          });
      }
      if (this.curOneCateIndex == 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.titleList = res.result;
            } else {
              this.titleList = [];
            }
          })
          .catch((e) => {
            this.titleList = [];
            console.log(e);
          });
      }
      if (this.curOneCateIndex == 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.titleList = res.result;
            } else {
              this.titleList = [];
            }
          })
          .catch((e) => {
            this.titleList = [];
            console.log(e);
          });
      }
    },
    setTwoCateIndex(item, index) {
      let dictType = item.dictType;
      this.curTwoCateIndex = index;
      this.getTitles(dictType);
    },
    setOneCateIndex(item, index) {
      // if(this.userMes.tgdzPower == 0){
      // 	let that = this
      // 	uni.showModal({
      // 		content: "购买 针灸六经法要上册和下册 后方可使用此功能",
      // 		confirmText: '好的',
      // 		showCancel: false,
      // 		success: function(res) {
      // 			if (res.confirm) {
      // 				// console.log('用户点击确定');
      // 			}
      // 		}
      // 	})
      // 	return
      // }
      // if(item.title == "时辰取穴"){
      // 	uni.navigateTo({
      // 		url: "../timeAcupoint/timeAcupoint"
      // 	})
      // 	return
      // }
      let type = item.type;
      this.curOneCateIndex = index;
      this.curTwoCateIndex = 0;
      this.searchValue = "";
      this.searchList = [];
      this.showSearchList = false;
      // if (index != 2) {
      this.getTowCateList(type);
      // } else {
      // 	this.getJFList(dictType)
      // }
    },
    getTowCateList(type) {
      $http
        .request({
          url: "book/medicaldes/typeList?label=" + type,
          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.result.length >= 0) {
            this.twoCateList = res.result;
            if (this.curOneCateIndex == 2) {
              this.twoCateList = [
                {
                  dictType: "1",
                  dictValue: "吴门之歌",
                },
                {
                  dictType: "2",
                  dictValue: "巴山夜语",
                },
                {
                  dictType: "3",
                  dictValue: "吴门之徽",
                },
              ];
            }
            if (this.curOneCateIndex == 3) {
              this.twoCateList = [
                {
                  dictType: "1",
                  dictValue: "学术贡献",
                },
                {
                  dictType: "2",
                  dictValue: "抗疫纪实",
                },
                {
                  dictType: "3",
                  dictValue: "吴门公益",
                },
              ];
            }
            this.getTitles(this.twoCateList[0].dictType);
          } else {
            this.twoCateList = [];
            this.titleList = [];
          }
        })
        .catch((e) => {
          this.twoCateList = [];
          this.titleList = [];
          console.log(e);
        });
    },
    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.titleList = this.transformData(res.list)
    // 			console.log('JF经方', this.titleList)
    // 		} else {
    // 			this.twoCateList = []
    // 			this.titleList = []
    // 		}
    // 	}).catch(e => {
    // 		this.twoCateList = []
    // 		this.titleList = []
    // 		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.oneCateList = res.list
      this.getTowCateList(this.oneCateList[0].type);
      // } else {
      // 	this.oneCateList = []
      // }
      // }).catch(e => {
      // 	this.oneCateList = []
      // 	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.curOneCateIndex + 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.titleList = []
    // 		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
  },
  components: {},
};
</script>

<style lang="scss" scoped>
.searchList {
  .item {
    font-size: 28rpx;
    padding: 20rpx;
    border-bottom: 1px solid #dadbde;
  }
}

.scroll-view_H {
  background-color: #fff;
  white-space: nowrap;
  padding: 10rpx;
}

.contentBox {
  height: calc(100% - 50px);
  .oneCateList {
    justify-content: space-between;

    text {
      text-align: center;
      display: inline-block;
      width: 32%;
      padding: 20rpx 0;
      font-size: 34rpx;
      border-radius: 10rpx;
    }

    .cur {
      background-color: #3ab3ae;
      color: #fff;
    }
  }

  .twoCateList {
    font-size: 28rpx;
    margin-top: 20rpx;

    .grid-text {
      padding: 20rpx 0rpx;
      text-align: center;
    }

    .cur {
      color: #3ab3ae;
    }

    // .u-grid-list{border: 0.5px solid #dadbde;}
  }

  .titleList {
    font-size: 26rpx;
    margin-top: 20rpx;
    padding: 0 10rpx;
    border-radius: 10rpx;
    background-color: #f8f9fa;

    .titleItem {
      padding: 20rpx 10rpx;
    }

    .JFtitleItem {
      background-color: #ffffff;
      padding: 20rpx 10rpx;
      width: 100%;
      border-bottom: 0.5px solid #f8f9fa;
    }

    .wmzhimg {
      width: 220rpx;
      height: 220rpx;
    }
  }
}

.container {
  padding: 10rpx;
  height: 100vh;
  background-color: #fff;
}

.search_box {
  margin: 0 auto;
  overflow: hidden;
  align-items: center;
  width: calc(100% - 10px);
  margin-top: 20rpx;
  margin-bottom: 20rpx;

  .search {
    height: 56upx;
    display: flex;
    width: 86%;
    margin: 0 auto;
    align-items: center;
    padding: 0upx 40upx;
    background-color: #fff;
    border-radius: 20upx;
    box-shadow: 0 0px 10px 1px #3ab3ae33;
  }

  .prompt {
    color: #838383;
    font-size: 24rpx;
  }

  .icon_search {
    background-image: url("@/static/icon/map_ic_search.png");
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    width: 36upx;
    height: 36upx;
    margin-right: 20upx;
  }
}

.flexbox {
  display: flex;
}

.uni-modal .uni-modal__bd {
  text-align: left;
}

.limiTy {
  font-size: 28rpx;
  line-height: 46rpx;
}

.chImage {
  height: 100rpx;
}
</style>
