<template>
  <div class="page-body">
    <div class="page-search row items-center">
      <div class="col row wrap q-mr-lg q-col-gutter-md">
        <div class="col-3">
          <q-input
            @input="resetSearch"
            clearable
            standout="bg-primary text-white"
            v-model="msg.CourseName"
            label="课程名称"
            @clear="resetSearch"
            maxlength="20"
          />
        </div>
        <div class="col-3">
          <select-tree
            :treeData="TreeCategoryList"
            :defaultArray="returnString"
            nodeKey="CateId"
            :multiple="true"
            labelKey="CateName"
            childrenKey="ChildList"
            tipText="课程系列"
            @getChild="getChild"
          ></select-tree>
        </div>
        <div class="col-3">
          <q-select
            @input="resetSearch"
            standout="bg-primary text-white"
            v-model="msg.CourseSubject"
            :options="CourseSubjectList"
            option-label="SubjectName"
            option-value="Id"
            emit-value
            map-options
            label="所属科目"
            clearable
          />
        </div>
        <div class="col-3">
          <q-select
            @input="resetSearch"
            standout="bg-primary text-white"
            v-model="msg.Status"
            :options="ShowOpts"
            emit-value
            map-options
            label="状态"
          />
        </div>
        <div class="col-3">
          <q-select
            @input="resetSearch"
            standout="bg-primary text-white"
            v-model="msg.Saleplat"
            :options="platOpts"
            option-label="Name"
            option-value="Id"
            emit-value
            map-options
            label="上架渠道"
          />
        </div>
      </div>
    </div>
    <div class="page-content">
      <q-table
        :pagination="msg"
        :loading="loading"
        no-data-label="暂无相关数据"
        flat
        class="sticky-two-header-table sticky-tow-column-table sticky-right-column-table"
        style="height: calc(100vh - 250px) !important;"
        separator="none"
        :data="data"
        :columns="columns"
        row-key="name"
      >
        <template v-slot:top="props">
          <div class="col-2 q-table__title">课程信息</div>
          <q-space />
          <div class="page-option">
            <q-btn
              color="accent"
              size="sm"
              class="q-mr-md"
              icon="add"
              label="新增课程"
              @click="EditCourse(null, 1)"
            />
          </div>
        </template>
        <template v-slot:body-cell-CoverImg="props">
          <q-td :props="props">
            <q-img
              :src="props.value"
              spinner-color="white"
              style="height: 54px; max-width: 100px"
              class="rounded-borders"
            >
            </q-img>
          </q-td>
        </template>
        <template v-slot:body-cell-CourseIntro="props">
          <q-td :props="props">
            <span v-html="props.value"></span>
          </q-td>
        </template>

        <template v-slot:body-cell-B2CRatio="props">
          <q-td :props="props">
            <span>{{ props.row.B2CRatio }}%</span>
          </q-td>
        </template>
        <template v-slot:body-cell-B2CReNewRatio="props">
          <q-td :props="props">
            <span>{{ props.row.B2CReNewRatio }}%</span>
          </q-td>
        </template>
        <template v-slot:body-cell-B2BRebateRatio="props">
          <q-td :props="props">
            <span
              >{{ props.row.B2BRebateRatio
              }}{{ props.row.CommissionReType == 1 ? "%" : "" }}</span
            >
          </q-td>
        </template>
        <template v-slot:body-cell-B2BReNewRatio="props">
          <q-td :props="props">
            <span
              >{{ props.row.B2BReNewRatio
              }}{{ props.row.CommissionReType == 1 ? "%" : "" }}</span
            >
          </q-td>
        </template>
        <template v-slot:body-cell-SchoolRebateRatio="props">
          <q-td :props="props">
            <span
              >{{ props.row.SchoolRebateRatio
              }}{{ props.row.CommissionReType == 1 ? "%" : "" }}</span
            >
          </q-td>
        </template>
        <template v-slot:body-cell-SchoolReNewRatio="props">
          <q-td :props="props">
            <span
              >{{ props.row.SchoolReNewRatio
              }}{{ props.row.CommissionReType == 1 ? "%" : "" }}</span
            >
          </q-td>
        </template>
        <template v-slot:body-cell-TransIntroductceRatio="props">
          <q-td :props="props">
            <span
              >{{ props.row.TransIntroductceRatio
              }}{{ props.row.CommissionReType == 1 ? "%" : "" }}</span
            >
          </q-td>
        </template>
        <template v-slot:body-cell-TransIntroductceReNewRatio="props">
          <q-td :props="props">
            <span
              >{{ props.row.TransIntroductceReNewRatio
              }}{{ props.row.CommissionReType == 1 ? "%" : "" }}</span
            >
          </q-td>
        </template>
        <template v-slot:body-cell-InnerRecommendRatio="props">
          <q-td :props="props">
            <span
              >{{ props.row.InnerRecommendRatio
              }}{{ props.row.CommissionReType == 1 ? "%" : "" }}</span
            >
          </q-td>
        </template>
        <template v-slot:body-cell-InnerRecommendReNewRatio="props">
          <q-td :props="props">
            <span
              >{{ props.row.InnerRecommendReNewRatio
              }}{{ props.row.CommissionReType == 1 ? "%" : "" }}</span
            >
          </q-td>
        </template>
        <template v-slot:body-cell-B2CRbRatio="props">
          <q-td :props="props">
            <span
              >{{ props.row.B2CRbRatio
              }}{{ props.row.CommissionReType == 1 ? "%" : "" }}</span
            >
          </q-td>
        </template>
        <template v-slot:body-cell-B2CRNRatio="props">
          <q-td :props="props">
            <span
              >{{ props.row.B2CRNRatio
              }}{{ props.row.CommissionReType == 1 ? "%" : "" }}</span
            >
          </q-td>
        </template>

        <template v-slot:body-cell-PreferentialList="props">
          <q-td :props="props" style="padding-right: 0px">
            <div v-for="x in props.value">
              <div class="border-bottom" v-if="x.PriceDiscountType == 1">
                买{{ x.BuyNum }}送{{ x.SendNum }}
              </div>
              <div class="border-bottom" v-if="x.PriceDiscountType == 2">
                单人报名享优惠{{ x.PriceMoney }}%
              </div>
              <div class="border-bottom" v-if="x.PriceDiscountType == 3">
                双人报名优惠{{ x.PriceMoney }}%
              </div>
              <div class="border-bottom" v-if="x.PriceDiscountType == 4">
                续费享优惠{{ x.PriceMoney }}%
              </div>
              <div class="remark-font" v-if="x.PriceDiscountType == 0">
                暂无优惠政策
              </div>
            </div>
            <div v-if="!props.value || props.value.length == 0">
              <div class="remark-font">暂无优惠政策</div>
            </div>
          </q-td>
        </template>
        <template v-slot:body-cell-PreferentialListSellCommission="props">
          <q-td :props="props" style="padding-right: 0px; padding-left: 0px">
            <div v-for="x in props.value">
              <div
                class="border-bottom"
                style="padding-left: 16px; padding-right: 16px"
                :class="{ 'text-red': x.SaleCommissionType == 1 }"
                v-if="x.PriceDiscountType != 0"
              >
                {{ x.SaleCommissionType == 1 ? "￥" : ""
                }}{{ x.SaleCommissionMoney
                }}{{ x.SaleCommissionType == 0 ? "%" : "" }}
              </div>
              <div v-if="x.PriceDiscountType == 0">
                <div class="remark-font">暂无佣金信息</div>
              </div>
            </div>
            <div v-if="!props.value || props.value.length == 0">
              <div class="remark-font">暂无佣金信息</div>
            </div>
          </q-td>
        </template>
        <template v-slot:body-cell-PreferentialListB2BCommission="props">
          <q-td :props="props" style="padding-left: 0px">
            <div v-for="x in props.value">
              <div
                class="border-bottom"
                style="padding-left: 16px"
                :class="{ 'text-red': x.B2BCommissionType == 1 }"
                v-if="x.PriceDiscountType != 0"
              >
                {{ x.B2BCommissionType == 1 ? "￥" : ""
                }}{{ x.B2BCommissionMoney
                }}{{ x.B2BCommissionType == 0 ? "%" : "" }}
              </div>
              <div v-if="x.PriceDiscountType == 0">
                <div class="remark-font">暂无佣金信息</div>
              </div>
            </div>
            <div v-if="!props.value || props.value.length == 0">
              <div class="remark-font">暂无佣金信息</div>
            </div>
          </q-td>
        </template>
        <template v-slot:body-cell-EducationCommission="props">
          <q-td :props="props" style="padding-left: 0px">
            <div v-for="x in props.value">
              <div
                class="border-bottom"
                style="padding-left: 16px"
                :class="{ 'text-red': x.EduCommissionType == 1 }"
                v-if="x.PriceDiscountType != 0"
              >
                {{ x.EduCommissionType == 1 ? "￥" : ""
                }}{{ x.EduCommissionMoney
                }}{{ x.EduCommissionType == 0 ? "%" : "" }}
              </div>
              <div v-if="x.PriceDiscountType == 0">
                <div class="remark-font">暂无佣金信息</div>
              </div>
            </div>
            <div v-if="!props.value || props.value.length == 0">
              <div class="remark-font">暂无佣金信息</div>
            </div>
          </q-td>
        </template>
        <template v-slot:body-cell-plat="props">
          <q-td :props="props">
            <q-badge
              color="green"
              label="小程序"
              v-if="props.row.Saleplat.includes(4)"
            />
          </q-td>
        </template>
        <template v-slot:body-cell-Status="props">
          <q-td :props="props">
            <q-badge
              :color="props.value == 1 ? 'negative' : 'primary'"
              :label="props.value == 0 ? '正常' : '删除'"
            />
          </q-td>
        </template>
        <template v-slot:body-cell-IsScrollClass="props">
          <q-td :props="props">
            <span>{{ props.row.IsScrollClass == 0 ? "否" : "是" }}</span>
          </q-td>
        </template>
        <template v-slot:bottom>
          <q-pagination
            class="full-width justify-end"
            v-model="msg.pageIndex"
            color="primary"
            :max="pageCount"
            :input="true"
            @input="changePage"
          />
        </template>
        <template v-slot:body-cell-optioned="props">
          <q-td :props="props">
            <q-btn
              flat
              size="xs"
              icon="edit"
              color="accent"
              style="font-weight: 400"
              label="编辑"
              @click="EditCourse(props.row, 1)"
            />
            <q-btn
              flat
              size="xs"
              icon="edit"
              color="accent"
              style="font-weight: 400"
              label="价格设置"
              @click="EditCourse(props.row, 2)"
              v-if="isHavePriceAction"
            />
            <q-btn-dropdown
              flat
              size="xs"
              color="dark"
              label="更多"
              style="margin-left: 10px"
            >
              <q-list>
                <q-item
                  clickable
                  v-close-popup
                  @click="DeleteCourse(props.row, 1)"
                  v-if="props.row.Status == 0"
                >
                  <q-item-section>
                    <q-item-label>删除</q-item-label>
                  </q-item-section>
                </q-item>
                <q-item
                  clickable
                  v-close-popup
                  @click="DeleteCourse(props.row, 0)"
                  v-if="props.row.Status == 1"
                >
                  <q-item-section>
                    <q-item-label>恢复</q-item-label>
                  </q-item-section>
                </q-item>
                <q-item clickable v-close-popup @click="goMycourse(props.row)">
                  <q-item-section>
                    <q-item-label>课程详情</q-item-label>
                  </q-item-section>
                </q-item>
                <q-item
                  clickable
                  v-close-popup
                  @click="goMyroster(props.row, 1)"
                >
                  <q-item-section>
                    <q-item-label>学员名单</q-item-label>
                  </q-item-section>
                </q-item>
                <q-item
                  clickable
                  v-close-popup
                  @click="goMyroster(props.row, 2)"
                >
                  <q-item-section>
                    <q-item-label>学员订单</q-item-label>
                  </q-item-section>
                </q-item>
              </q-list>
            </q-btn-dropdown>
          </q-td>
        </template>
      </q-table>
      <course-form
        v-if="isShowCourseForm"
        :save-obj="courseObjOption"
        @close="closeMenuSaveForm"
        @success="refreshPage"
      >
      </course-form>
      <courseprice-form
        v-if="isShowCoursePriceForm"
        :save-obj="courseObjOption"
        @close="closeMenuSaveForm"
        @success="refreshPage"
      >
      </courseprice-form>
    </div>
  </div>
</template>
<script>
import {
  queryCoursePage,
  queryCourseCategoryTree,
  deleteCourseInfo,
  querySaleplatList,
  getCourseSubject
} from "../../api/course/index";
import courseForm from "../../components/course/course-form";
import coursepriceForm from "../../components/course/courseprice-form";
import selectTree from "../../components/common/select-tree";
import { openURL } from "quasar";
import { mapState } from "vuex";
export default {
  meta: {
    title: "课程管理"
  },
  components: {
    courseForm,
    selectTree,
    coursepriceForm
  },
  data() {
    return {
      currentUrl: "",
      columns: [
        {
          name: "CoverImg",
          label: "课程封面",
          field: "CoverImg",
          align: "left"
        },
        {
          name: "CourseName",
          required: true,
          label: "课程名称",
          align: "left",
          field: row => row.CourseName
        },
        {
          name: "CourseSubjectName",
          required: true,
          label: "所属科目",
          align: "left",
          field: row => row.CourseSubjectName
        },
        {
          name: "CateName",
          required: true,
          label: "系列",
          align: "left",
          field: row => row.CateName
        },
        {
          name: "GuestNum",
          label: "学员数量",
          align: "left",
          field: "GuestNum",
          sortable: true,
          sort: (a, b, rowA, rowB) => parseInt(a, 10) - parseInt(b, 10)
        },
        {
          name: "OrderNum",
          label: "订单数量",
          align: "left",
          field: "OrderNum",
          sortable: true,
          sort: (a, b, rowA, rowB) => parseInt(a, 10) - parseInt(b, 10)
        },
        {
          name: "SellPrice",
          required: true,
          label: "直客价",
          align: "left",
          field: row => row.SellPrice.toFixed(2)
        },
        {
          name: "B2CRatio",
          required: true,
          label: "直客优惠比例",
          align: "left",
          field: row => row.B2CRatio
        },
        {
          name: "B2CReNewRatio",
          required: true,
          label: "直客优惠续费比例",
          align: "left",
          field: row => row.B2CReNewRatio
        },
        {
          name: "B2BRebateRatio",
          required: true,
          label: "一般同行返佣",
          align: "left",
          field: row => row.B2BRebateRatio
        },
        {
          name: "B2BReNewRatio",
          required: true,
          label: "一般同行续费返佣",
          align: "left",
          field: row => row.B2BReNewRatio
        },
        {
          name: "SchoolRebateRatio",
          required: true,
          label: "校园同行返佣",
          align: "left",
          field: row => row.SchoolRebateRatio
        },
        {
          name: "SchoolReNewRatio",
          required: true,
          label: "校园同行续费返佣",
          align: "left",
          field: row => row.SchoolReNewRatio
        },
        {
          name: "TransIntroductceRatio",
          required: true,
          label: "转介返佣",
          align: "left",
          field: row => row.TransIntroductceRatio
        },
        {
          name: "TransIntroductceReNewRatio",
          required: true,
          label: "转介续费返佣",
          align: "left",
          field: row => row.TransIntroductceReNewRatio
        },
        {
          name: "InnerRecommendRatio",
          required: true,
          label: "内推返佣",
          align: "left",
          field: row => row.InnerRecommendRatio
        },
        {
          name: "InnerRecommendReNewRatio",
          required: true,
          label: "内推续费返佣",
          align: "left",
          field: row => row.InnerRecommendReNewRatio
        },
        {
          name: "B2CRbRatio",
          required: true,
          label: "直客返佣",
          align: "left",
          field: row => row.B2CRbRatio
        },
        {
          name: "B2CRNRatio",
          required: true,
          label: "直客续费返佣",
          align: "left",
          field: row => row.B2CRNRatio
        },

        // {
        //   name: "PreferentialList",
        //   required: true,
        //   label: "优惠政策",
        //   align: "left",
        //   field: (row) => row.PreferentialList,
        // },
        // {
        //   name: "PreferentialListSellCommission",
        //   required: true,
        //   label: "销售佣金",
        //   align: "left",
        //   field: (row) => row.PreferentialList,
        // },
        // {
        //   name: "PreferentialListB2BCommission",
        //   required: true,
        //   label: "同行佣金",
        //   align: "left",
        //   field: (row) => row.PreferentialList,
        // },
        // {
        //   name: "EducationCommission",
        //   required: true,
        //   label: "教育同行佣金",
        //   align: "left",
        //   field: (row) => row.PreferentialList,
        // },
        {
          name: "ClassHours",
          label: "课时长度",
          field: "ClassHours",
          align: "left",
          format: (val, row) => `${val}课时`
        },
        {
          name: "plat",
          label: "上架渠道",
          field: "plat",
          align: "left"
        },
        {
          name: "CreateByName",
          label: "创建人",
          field: "CreateByName",
          align: "left"
        },
        {
          name: "UpdateTimeStr",
          label: "更新时间",
          field: "UpdateTimeStr",
          align: "left"
        },
        {
          name: "Status",
          label: "状态",
          align: "left",
          field: "Status"
        },
        {
          name: "IsScrollClass",
          label: "是否开启滚动开班",
          align: "left",
          field: "IsScrollClass"
        },
        {
          name: "ScrollMinNum",
          label: "最小上课人数",
          align: "left",
          field: "ScrollMinNum"
        },
        {
          name: "ScrollMaxNum",
          label: "最大上课人数",
          align: "left",
          field: "ScrollMaxNum"
        },
        {
          name: "optioned",
          label: "操作",
          field: "CourseId"
        }
      ],
      data: [],
      loading: true,
      ShowOpts: [
        {
          label: "全部",
          value: "-1"
        },
        {
          label: "正常",
          value: "0"
        },
        {
          label: "删除",
          value: "1"
        }
      ],
      platOpts: [], //上架渠道
      msg: {
        pageIndex: 1,
        pageSize: 12,
        rowsPerPage: 12,
        CourseName: "",
        QCateIds: "",
        IsQPrice: 1,
        Status: "0",
        Saleplat: 0,
        CourseSubject: "" //所属科目
      },
      //课程分类树形列表
      TreeCategoryList: [],
      returnString: [], //默认值
      pageCount: 0,
      isShowCourseForm: false, //是否显示课程表单
      isShowCoursePriceForm: false, //是否显示课程价格表单
      courseObjOption: null, //课程对象
      isShowPriceEditBtn: 1, //是否显示价格设置
      CourseSubjectList: [] //科目列表
    };
  },
  computed: mapState({
    isHavePriceAction(state) {
      if (
        state.user.userInfo &&
        state.user.userInfo.ActionMenuList &&
        state.user.userInfo.ActionMenuList.length > 0
      ) {
        let action = state.user.userInfo.ActionMenuList.find(x => {
          if (x.FunctionCode == "Edit_CoursePrice") {
            return x;
          }
        });
        return action && action.FunctionCode;
      }
      return false;
    }
  }),
  mounted() {
    if (this.$route.query && this.$route.query.Name) {
      //从订单完成统计跳转过来的带的参数
      this.msg.CourseName = decodeURI(this.$route.query.Name);
    }
    this.queryCourseSubject();
    this.getSaleplat();
    this.getCategorytree();
    this.currentUrl = this.$route.path;
    this.getcourselist();
  },
  methods: {
    queryCourseSubject() {
      getCourseSubject({}).then(res => {
        if (res.Code == 1) {
          this.CourseSubjectList = res.Data;
        }
      });
    },
    //删除课程
    DeleteCourse(item, status) {
      let delMsg = {
        CourseId: item.CourseId,
        Status: status
      };
      var message = "是否要删除该课程？";
      if (status == 0) {
        message = "是否要恢复该课程？";
      }
      this.$q
        .dialog({
          title: "提示信息",
          message: message,
          cancel: true,
          persistent: true,
          ok: "确定",
          cancel: "取消"
        })
        .onOk(() => {
          deleteCourseInfo(delMsg).then(res => {
            if (res.Code == 1) {
              this.$q.notify({
                icon: "iconfont icon-chenggong",
                color: "accent",
                timeout: 2000,
                message: "删除成功！",
                position: "top"
              });
              this.getcourselist();
            } else {
              this.$q.notify({
                icon: "iconfont icon-chenggong",
                color: "accent",
                timeout: 2000,
                message: res.Message,
                position: "top"
              });
            }
          });
        })
        .onCancel(() => {});
    },
    gotoSub(obj, routeStr) {
      var tempStr = "/course/" + routeStr + "?CourseId=" + obj.CourseId;
      this.$router.push({
        path: tempStr
      });
    },
    //分类改变
    getChild(cateObj) {
      var tempStr = "";
      if (cateObj && cateObj != "") {
        tempStr = cateObj;
      }
      this.msg.QCateIds = tempStr;
      this.msg.pageIndex = 1;
      this.getcourselist();
    },
    getCategorytree() {
      this.TreeCategoryList = [];
      var qMsg = {};
      queryCourseCategoryTree(qMsg).then(res => {
        this.TreeCategoryList = res.Data;
      });
    },
    //重新查询
    resetSearch() {
      this.msg.pageIndex = 1;
      this.getcourselist();
    },
    //翻页
    changePage(val) {
      this.msg.pageIndex = val;
      this.getcourselist();
    },
    //获取菜单分页列表
    getcourselist() {
      this.loading = true;
      queryCoursePage(this.msg)
        .then(res => {
          this.loading = false;
          this.data = res.Data.PageData;
          this.pageCount = res.Data.PageCount;
        })
        .catch(() => {
          this.loading = false;
        });
    },
    //刷新页面
    refreshPage() {
      this.isShowCourseForm = false;
      this.isShowCoursePriceForm = false;
      this.getcourselist();
    },
    //新增修改课程及价格
    EditCourse(obj, type) {
      if (obj) {
        this.courseObjOption = obj;
      } else {
        this.courseObjOption = null;
      }
      if (type == 1) {
        this.isShowCourseForm = true;
      } else {
        this.isShowCoursePriceForm = true;
      }
    },
    //关闭弹窗
    closeMenuSaveForm() {
      this.isShowCourseForm = false;
      this.isShowCoursePriceForm = false;
    },
    //跳转至我的课程
    goMycourse(obj) {
      var tempStr =
        window.location.origin +
        "/#/course/courseinfo?CourseId=" +
        obj.CourseId;
      openURL(tempStr);
    },
    //获取销售端口列表
    getSaleplat() {
      querySaleplatList().then(res => {
        this.platOpts = res.Data;
        this.platOpts.unshift({
          Name: "不限",
          Id: 0
        });
      });
    },
    goMyroster(row, type) {
      //type 1 是学员名单 2 学员订单
      if (type == 1) {
        const obj = {
          CourseId: row.CourseId,
          CourseName: encodeURIComponent(row.CourseName),
          source: 1
        };
        this.OpenNewUrl("/stuMan/stuList", obj);
      } else if (type == 2) {
        const obj = {
          CourseId: row.CourseId,
          CourseName: encodeURIComponent(row.CourseName),
          source: 1
        };
        this.OpenNewUrl("/sale/orderStatistics", obj);
      }
    }
  }
};
</script>
<style scoped>
.border-bottom {
  border-bottom: 1px dashed #eee;
  padding-bottom: 5px;
  margin-bottom: 5px;
}
</style>
<style lang="sass">
@import url('~assets/css/table.sass')
</style>
