<template>
    <div id="listOption">
      <div class="content_tBox">
        <div class="tabber">
          <div class="left">教育类型：</div>
          <div class="right">
            <div
              class="t-button"
              v-for="(item, index) in educationList"
              :key="index"
              :class="params.educationId == item.id ? 'active' : null"
              @click="activeEdu(item.id)"
            >
              {{ item.educationName }}
            </div>
          </div>
        </div>
        <div class="tabber" v-if="params.educationId">
          <div class="left">业务层次：</div>
          <div class="right">
            <div
              class="t-button"
              v-for="(item, index) in businessList"
              :key="index"
              :class="params.businessId == item.id ? 'active' : null"
              @click="activeBusiness(item.projectId, item.id)"
            >
              {{ item.aliasName }}
            </div>
          </div>
        </div>
        <div class="tabber" v-if="params.businessId">
          <div class="left">专业分类：</div>
          <div class="right">
            <div
              class="t-button"
              v-for="(item, index) in subjectList"
              :key="index"
              :class="params.subjectId == item.id ? 'active' : null"
              @click="activeSubject(item.id)"
            >
              {{ item.subjectName }}
            </div>
          </div>
        </div>
        <div class="tabber">
          <div class="left">快捷搜索：</div>
          <div class="right" style="align-self: center; margin-top: 5px">
            <el-input
              class="input_search"
              clearable
              v-model="params.businessName"
              :size="size"
              placeholder="输入"
              prefix-icon="el-icon-search"
            ></el-input>
            <div
              v-if="false"
              class="t-button active"
              style="
                margin: 0px;
                border: 1px solid rgb(199, 199, 199);
                background: #fff;
                color: #666;
              "
              @click="init"
            >
              重置
            </div>
          </div>
        </div>
        <div class="tabber">
          <div class="right">
            <div v-if="goodsType == 10" class="t-button-text active">
              综合
            </div>
            <div
              v-else
              class="t-button-text"
              v-for="(item, index) in sort"
              :key="index"
              :class="params.sortType == item.value ? 'active' : null"
              @click="activeSort(item.value)"
            >
              {{ item.label }}
            </div>
            <span
              style="
                padding-right: 10px;
                float: right;
                display: inline-block;
                height: 20px;
                line-height: 20px;
                color: #666;
              "
              >共找到<strong>{{ total }}</strong
              >个结果</span
            >
          </div>
        </div>
        <el-main v-loading="loading">
          <ul class="list">
            <el-empty
              v-if="goodsList.length == 0"
              description="暂无数据"
            ></el-empty>
            <GoodsItemNew
              v-for="(item, index) in goodsList"
              :key="index"
              :goodsItem="item"
              :goodsType="goodsType"
            ></GoodsItemNew>
          </ul>
          <div class="pagination">
            <el-pagination
              @current-change="currentChange"
              background
              layout="prev, pager, next"
              :total="total"
              :pager-count="5"
              :page-size="formData.pageSize"
            >
            </el-pagination>
          </div>
        </el-main>
      </div>
    </div>
  </template>
    
    <script>
  import GoodsItemNew from "../goodsItem-new/index.vue";
  import { cancel } from "@/api/common"
  export default {
    components: { GoodsItemNew }, 
    props: {
      goodsType: {
        type: String,
        default: () => {}
      },
    },
    data() {
      return {
        size: "medium",
        educationList: [],
        businessList: [],
        subjectList: [],
        sort: [
          {
            label: "综合",
            value: 1,
          },
          {
            label: "低价",
            value: 2,
          },
          {
            label: "高价",
            value: 3,
          },
        ],
        params: {
          businessName: "",
        },
        formData: {
          pageNum: 1,
          pageSize: 10,
        },
        loading: false,
        goodsList: [],
        total: 0,
      };
    },
    watch: {
      params: {
        handler(newVal, oldVal) {
          if (cancel) {
            cancel("取消请求");
          }
          this.search();
        },
        deep: true,
      },
    },
    created() {
      this.params = {
        businessName:  "",
        educationId: "",
        projectId: "",
        businessId: "",
        subjectId: "",
        goodsType: Number(this.goodsType),
        sortType: 1,
        // showStatus: 1,
        // goodsStatus: 1,
      };
      this.search();
    },
    async mounted() {
      document.body.scrollTop = 0;
      document.documentElement.scrollTop = 0;
      await this.getEducationTypeList();
      if (this.params.educationId) {
        await this.getBusinessList();
      }
      if (this.params.businessId) {
        await this.getSubjectList();
      }
    },
    methods: {
      //重置
      init() {
        this.params = {
          businessName: "",
          educationId: "",
          projectId: "",
          businessId: "",
          subjectId: "",
        };
        this.formData = {
          pageNum: 1,
          pageSize: 10,
        };
      },
      //搜索
      search() {
        this.loading = true;
        // this.$router.replace({ path: this.$route.path, query: this.params });
        let data = Object.assign(this.params, this.formData);
        console.log(data, '参数')
        data.educationTypeId = data.educationId;
        data.goodsType = this.params.goodsType;
        let _request = data.goodsType == 10 ? 'getBsGoodPackList' : 'getBsGoodList'
        this.$api[_request](data)
          .then((res) => {
            this.goodsList = res.rows || [];
            this.total = res.total || 0;
          })
          .finally(() => {
            this.loading = false;
          });
      },
      //分页
      currentChange(e) {
        document.body.scrollTop = 300;
        document.documentElement.scrollTop = 300;
        this.formData.pageNum = e;
        this.search();
      },
      //排序
      activeSort(id) {
        this.params.sortType = id;
      },
      /**
       * 获取教育类型
       */
      getEducationTypeList() {
        return new Promise((resolve) => {
          this.$api
            .educationTypeList({ status: 1 })
            .then((res) => {
              let item = [
                {
                  educationName: "全部",
                  id: "",
                  status: 1,
                  sort: 0,
                },
              ];
              this.educationList = item.concat(res.rows);
            })
            .finally(() => {
              resolve();
            });
        });
      },
      //选中教育类型
      async activeEdu(id) {
        this.params.educationId = id;
        this.params.projectId = "";
        this.params.businessId = "";
        this.params.subjectId = "";
        if (id) {
          await this.getBusinessList();
          if (this.params.subjectId) {
            await this.getSubjectList();
          }
        }
      },
      /**
       * 获取业务层级
       */
      getBusinessList() {
        return new Promise((resolve) => {
          this.$api
            .businessList({ educationId: this.params.educationId, status: 1 })
            .then((res) => {
              this.businessList = [
                { id: "", projectId: "", aliasName: "全部" },
              ].concat(res.rows);
            })
            .finally(() => {
              resolve();
            });
        });
      },
      //选中业务层级
      async activeBusiness(projectId, id) {
        this.params.projectId = projectId;
        this.params.businessId = id;
        this.params.subjectId = "";
        if (id) {
          await this.getSubjectList();
        }
      },
      /**
       * 获取科目分类
       */
      getSubjectList() {
        return new Promise((resolve) => {
          this.$api
            .subjectList({
              educationId: this.params.educationId,
              projectId: this.params.projectId,
              businessId: this.params.businessId,
              status: 1,
            })
            .then((res) => {
              this.subjectList = [{ id: "", subjectName: "全部" }].concat(
                res.rows
              );
            })
            .finally(() => {
              resolve();
            });
        });
      },
      //选中科目分类
      activeSubject(id) {
        this.params.subjectId = id;
      },
    },
  };
  </script>
    
    <style lang="scss" scoped>
  #listOption {
    .content_tBox {
      & > .el-main {
        padding: 0px;
      }
  
      .tabber {
        display: flex;
        animation: t-tran 0.3s;
        padding: 20px 0px;
        border-bottom: 1px dashed #eee;
        &:first-child {
          padding-top: 0px;
        }
        &:last-of-type {
          border-bottom: none;
        }
        & > .left {
          flex-shrink: 0;
          margin-top: 5px;
          padding: 8px 0;
          width: 80px;
          font-size: 14px;
          font-family: Microsoft YaHei;
          font-weight: 400;
          color: #666;
        }
        & > .right {
          flex: 1;
          flex-wrap: wrap;
          & > .t-button {
            user-select: none;
            display: inline-block;
            cursor: pointer;
            border-radius: 100px;
            margin: 10px;
            padding: 4px 12px;
            color: #666666;
            font-size: 14px;
            background: #f7f9fc;
            color: #666;
            transition: all 0.1s;
            &.active {
              color: #fff;
              background: rgba(0, 122, 255, 1);
            }
            &:hover {
              color: #fff;
              background: rgba(0, 122, 255, 1);
            }
          }
          & > .t-button-text {
            user-select: none;
            display: inline-block;
            cursor: pointer;
            color: #666666;
            font-size: 14px;
            transition: all 0.1s;
            margin-right: 14px;
            &.active {
              color: rgb(0, 122, 255);
            }
            &:hover {
              color: rgb(0, 122, 255);
            }
          }
        }
      }
      @keyframes t-tran {
        from {
          opacity: 0;
        }
        to {
          opacity: 1;
        }
      }
    }
  
    .pagination {
      padding: 30px 0;
      text-align: center;
    }
  }
  .list {
    display: flex;
    flex-wrap: wrap;
  }
  .el-empty {
    margin: 0 auto;
  }
  /deep/ .input_search {
    width: 200px;
    height: 26px;
    line-height: 26px;
    border-radius: 100px;
    & > .el-input__inner {
      width: 200px;
      height: 26px;
      line-height: 26px;
      border-radius: 100px;
    }
  }
  /deep/ .el-input__icon {
    line-height: 28px !important;
  }
  /deep/ .is-background {
    & > button {
      border-radius: 4px !important;
      padding: 0px 24px !important;
      border: 1px solid #eee;
      background-color: #fff !important;
    }
    .el-pager {
      & > li {
        border-radius: 4px !important;
        padding: 0px 24px;
        font-weight: 400;
        border: 1px solid #eee;
        background-color: #fff !important;
        border-left: 1px solid #eee !important;
      }
      & > .active {
        background-color: #409eff !important;
      }
    }
  }
  </style>
    