<template>
  <div class="app-container">
    <div class="head-container">
      <el-input
        v-model="columnName"
        clearable
        placeholder="请输入课程名称"
        style="width: 200px;margin-right: 10px"
      />
      <el-select
        v-if="!yinxiao"
        v-model="columnStatus"
        placeholder="请选择状态"
        style="width: 200px;margin-right: 10px"
        clearable
      >
        <el-option :value="1" label="待提交"></el-option>
        <el-option :value="2" label="待审核"></el-option>
        <el-option :value="3" label="已上架"></el-option>
        <el-option :value="4" label="已驳回"></el-option>
        <el-option :value="5" label="已下架"></el-option>
        <el-option v-if="yunyin" :value="6" label="已删除"></el-option>
      </el-select>
      <el-button size="mini" @click="getLists(1)">查询</el-button>
      <el-button
        v-if="zhujiao || tougu"
        type="success"
        size="mini"
        @click="addTag()"
        >新增课程</el-button
      >
    </div>

    <el-table
      v-loading="loading"
      :data="data"
      size="small"
      style="width: 100%;"
    >
      <el-table-column label="序号" align="center" type="index" fixed />
      <el-table-column prop="name" label="课程名称" width="180">
        <template slot-scope="scope">
          <el-button
            type="text"
            style="white-space: normal;"
            @click="detail(scope.row)"
          >
            {{ scope.row.name }}
          </el-button>
        </template>
      </el-table-column>
      <el-table-column prop="coverImage" label="封面图" width="100">
        <template #default="scope">
          <el-popover placement="right" :width="400" trigger="hover">
            <img :src="scope.row.coverImage" width="375" height="300" />
            <template #reference>
              <img
                :src="scope.row.coverImage"
                style="max-height: 60px; max-width: 60px"
              />
            </template>
          </el-popover>
        </template>
      </el-table-column>
      <el-table-column prop="contentCount" label="内容数" width="80">
      </el-table-column>
      <el-table-column prop="createUserName" label="创建人" width="180">
      </el-table-column>
      <el-table-column prop="createTime" label="创建时间" width="180">
      </el-table-column>
      <el-table-column prop="auditTime" label="审核时间" width="180">
      </el-table-column>
      <el-table-column prop="riskLevel" label="风险等级" width="100">
        <template slot-scope="scope">
          {{ riskLevelList[scope.row.riskLevel] }}
        </template>
      </el-table-column>
      <el-table-column label="观看限制" width="100">
        <template slot-scope="scope">
          {{ scope.row.authorityId ? "权限判断" : "无限制" }}
        </template>
      </el-table-column>
      <el-table-column prop="status" label="状态" width="100">
        <template slot-scope="scope">
          {{ statusList[scope.row.status] }}
        </template>
      </el-table-column>
      <el-table-column prop="reason" label="备注" width="180">
      </el-table-column>
      <el-table-column label="操作" fixed="right" align="center" width="250">
        <template slot-scope="scope">
          <el-button
            v-if="yunyin && scope.row.status === 2"
            type="text"
            size="mini"
            @click="addTag(scope.row, 2)"
            >审核</el-button
          >
          <el-button
            v-if="tougu || yunyin || zhujiao || yinxiao"
            type="text"
            size="mini"
            @click="addTag(scope.row, 1)"
            >查看</el-button
          >
          <el-button
            v-if="
              (tougu || zhujiao) &&
                scope.row.status !== 3 &&
                scope.row.status !== 2
            "
            type="text"
            size="mini"
            @click="addTag(scope.row, 0)"
            >修改</el-button
          >
          <el-button
            v-if="(tougu || zhujiao) && scope.row.status === 1"
            type="text"
            size="mini"
            @click="update(scope.row, 101)"
            >申请上架</el-button
          >
          <el-button
            v-if="(tougu || zhujiao) && scope.row.status === 2"
            type="text"
            size="mini"
            @click="update(scope.row, 102)"
            >撤回</el-button
          >
          <!-- <el-button v-if="yinxiao" type="text" size="mini" @click="update(scope.row)">数据</el-button> -->
          <el-button
            v-if="(tougu || yinxiao || zhujiao) && scope.row.status === 3"
            type="text"
            size="mini"
            @click="copyUrl($event, scope.row)"
            >复制课程链接</el-button
          >
          <el-button
            v-if="yunyin && scope.row.status === 5"
            type="text"
            size="mini"
            @click="update(scope.row, 105)"
            >上架</el-button
          >
          <el-button
            v-if="yunyin && scope.row.status === 3"
            type="text"
            size="mini"
            @click="update(scope.row, 106)"
            >下架</el-button
          >
          <el-button
            v-if="yunyin && [5].includes(scope.row.status)"
            type="text"
            @click="update(scope.row, 107)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <div style="display: inline-block">
      <el-dialog
        v-model="form"
        :visible.sync="dialog"
        :close-on-click-modal="false"
        :title="dialogTitle"
        append-to-body
        width="700px"
      >
        <el-form label-width="80px">
          <el-form-item label="课程名称">
            <el-input
              v-model="form.name"
              clearable
              placeholder="请输入课程名称"
              :maxlength="20"
              show-word-limit
              :disabled="isAdjust || isReadOnly"
            />
          </el-form-item>
          <el-form-item label="简介">
            <el-input
              v-model="form.remark"
              clearable
              type="textarea"
              :autosize="{ minRows: 2, maxRows: 10 }"
              :disabled="isAdjust || isReadOnly"
              maxlength="500"
              show-word-limit
              placeholder="请输入课程介绍"
            />
          </el-form-item>
          <el-form-item label="详情">
            <vue-editor
              :disabled="isAdjust || isReadOnly"
              v-model="form.detail"
              useCustomImageHandler
              @image-added="handleImageAdded"
            />
          </el-form-item>
          <el-form-item label="封面图">
            <el-upload
              class="avatar-uploader"
              :show-file-list="false"
              :on-success="handleSuccess"
              :disabled="isAdjust || isReadOnly"
              :on-error="handleError"
              :headers="headers"
              action="/admin/common/file/upload"
              accept=".jpg,.jpeg,.png"
              :before-upload="beforeUpload"
            >
              <img
                v-if="form.coverImage"
                :src="form.coverImage"
                class="avatar"
              />
              <el-button v-else type="primary">上传图片</el-button>
            </el-upload>
          </el-form-item>
          <el-form-item label="讲师设置">
            <adviser-select
              v-model="form.advisorId"
              :disabled="isAdjust || isReadOnly || !zhujiao || form.id"
              :dept-id="user.user.deptId"
              @init="
                item => {
                  form.advisorId = item.id;
                }
              "
            ></adviser-select>
          </el-form-item>
          <el-form-item label="观看限制">
            <el-radio-group
              v-model="authority"
              :disabled="isAdjust || isReadOnly"
            >
              <el-radio label="0">无限制</el-radio>
              <el-radio label="1">权限判断</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item v-if="authority === '1'" label="权限号">
            <el-input
              v-model="form.authorityId"
              :disabled="isAdjust || isReadOnly"
              placeholder="请输入权限号，多个权限号可通过逗号区分"
            />
          </el-form-item>
          <el-form-item v-if="authority === '1'" label="链接类型">
            <el-select v-model="linkType" :disabled="isAdjust || isReadOnly">
              <el-option label="落地页链接" value="1"></el-option>
              <el-option label="支付页链接" value="2"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item v-if="authority === '1'" label="链接地址">
            <template v-if="linkType == '1'">
              <page-select
                v-model="form.pageId"
                :disabled="isAdjust || isReadOnly"
              />
            </template>
            <template v-if="linkType == '2'">
              <el-input
                v-model="form.paymentUrl"
                :disabled="isAdjust || isReadOnly"
              />
            </template>
          </el-form-item>
          <el-row v-if="authority === '1'">
            <el-col :span="12">
              <el-form-item label="价格">
                <el-input
                  v-model="form.originalPrice"
                  :disabled="isAdjust || isReadOnly"
                />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="活动价">
                <el-input
                  v-model="form.activityPrice"
                  :disabled="isAdjust || isReadOnly"
                />
              </el-form-item>
            </el-col>
          </el-row>

          <el-form-item label="风险等级">
            <el-select
              v-model="form.riskLevel"
              placeholder="请选择风险等级"
              :disabled="isAdjust || isReadOnly"
            >
              <el-option
                v-for="item in RISK_LEVEL"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item v-if="isAdjust" label="审核结果">
            <el-radio-group v-model="adjustForm.event">
              <el-radio :label="103">通过</el-radio>
              <br />
              <el-radio :label="104">驳回</el-radio>
              <el-input
                v-model="adjustForm.reason"
                :disabled="adjustForm.event === 103"
                size="mini"
                placeholder="驳回理由（必填）"
                style="display: inline-block;width: 180px;"
              ></el-input>
            </el-radio-group>
          </el-form-item>
        </el-form>
        <div v-if="!isReadOnly" slot="footer" class="dialog-footer">
          <el-button size="mini" @click="cancel()">取消</el-button>
          <el-button
            size="mini"
            :loading="editLoading"
            type="primary"
            @click="submit()"
            >确认</el-button
          >
        </div>
      </el-dialog>
    </div>
    <!-- 分页器 -->
    <el-pagination
      style="margin-top: 50px;"
      :current-page="page"
      :page-sizes="[10, 20, 30, 40]"
      :page-size="100"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
      @size-change="sizeChange"
      @current-change="pageChange"
    />
  </div>
</template>

<script>
import { mapGetters } from "vuex";
// import { queryTagList, tagSave, tagUpdate, updateStatus } from "@/api/tag.js";
import { getToken } from "@/utils/auth";
import {
  getCourseList,
  saveCourse,
  updateCourse,
  updateCourseStatus
} from "@/api/course.js";
import { urlResize } from "@/api/videoLive.js";
import { handleClipboard } from "@/views/liveBroadcast/manage/config.js";
import AdviserSelect from "@/views/adviser/components/select.vue";
import PageSelect from "@/views/page/components/select.vue";
import { RISK_LEVEL } from "@/utils/options.js";
import { fileUpload } from "@/api/upload";

export default {
  components: { AdviserSelect, PageSelect },
  props: {
    zhujiao: {
      type: Boolean,
      default: false
    },
    yunyin: {
      type: Boolean,
      default: false
    },
    tougu: {
      type: Boolean,
      default: false
    },
    yinxiao: {
      type: Boolean,
      default: false
    },
    status: {
      type: [Number, String],
      default: undefined
    },
    userType: {
      type: Number
    }
  },
  name: "column",
  data() {
    return {
      dialog: false,
      dialogTitle: "",
      loading: false,
      delLoading: false,
      editLoading: false,
      newTag: "",
      total: 0,
      page: 1,
      size: 10,
      data: [],
      advisorList: [],
      tag: {
        id: "",
        name: ""
      },
      columnName: "",
      columnStatus: undefined,
      RISK_LEVEL,
      riskLevelList: {
        0: "低风险",
        1: "低风险",
        2: "中低风险",
        3: "中风险",
        4: "中高风险",
        5: "高风险"
      },
      statusList: {
        1: "待提交",
        2: "待审核",
        3: "已上架",
        4: "已驳回",
        5: "已下架",
        6: "已删除"
      },
      form: {
        advisorId: "",
        name: "",
        type: 1,
        remark: "",
        coverImage: "",
        pageId: "",
        paymentUrl: "",
        authorityId: "",
        riskLevel: "",
        weight: null
      },
      authority: "1",
      linkType: "1",
      adjustForm: {
        event: 103,
        reason: ""
      },
      isAdjust: false,
      isReadOnly: false,
      headers: {
        Authorization: "Bearer " + getToken(),
        "X-File-Size": 0
      }
    };
  },
  computed: {
    ...mapGetters(["user"]),
    title() {
      const role = this.user && this.user.roles && this.user.roles[0];
      return role ? `${role}列表` : "";
    }
  },
  mounted() {
    this.getLists(1);
  },

  methods: {
    async getLists(val) {
      if (val) {
        this.page = 1;
      }
      this.loading = true;
      const { data } = await getCourseList({
        current: this.page,
        name: this.columnName,
        size: this.size,
        status: this.status || this.columnStatus,
        userType: this.userType || this.user.user.userType
      });
      this.data = data.list;
      this.total = data.total;
      this.loading = false;
    },
    // 添加标签
    async addTag(val, type = 0) {
      this.isAdjust = false;
      this.isReadOnly = false;
      if (type === 1) {
        this.form = JSON.parse(JSON.stringify(val));
        this.authority = this.form.authorityId ? "1" : "0";
        this.linkType = this.form.paymentUrl ? "2" : "1";
        this.adjustForm = { event: 103, reason: "" };
        this.dialogTitle = "查看课程";
        this.dialog = true;
        this.isReadOnly = true;
      } else if (type === 2) {
        this.form = JSON.parse(JSON.stringify(val));
        this.authority = this.form.authorityId ? "1" : "0";
        this.linkType = this.form.paymentUrl ? "2" : "1";
        this.adjustForm = { event: 103, reason: "" };
        this.dialogTitle = "审核课程";
        this.dialog = true;
        this.isAdjust = true;
      } else if (val) {
        this.form = JSON.parse(JSON.stringify(val));
        // 观看限制
        this.authority = this.form.authorityId ? "1" : "0";
        this.linkType = this.form.paymentUrl ? "2" : "1";
        this.dialogTitle = "修改课程";
        this.dialog = true;
      } else {
        this.cancel();
        this.dialog = true;
        this.dialogTitle = "新增课程";
      }

      this.$set(this.form, "pageId", this.form.page ? this.form.page.id : "");
    },
    cancel() {
      this.form = {
        advisorId: "",
        name: "",
        type: 1,
        remark: "",
        coverImage: "",
        pageId: "",
        paymentUrl: "",
        authorityId: "",
        riskLevel: ""
      };
      if (!this.form.advisorId && this.user.advisorInfo) {
        this.form.advisorId = this.user.advisorInfo.id;
      }
      this.authority = "1";
      this.linkType = "1";
      this.adjustForm = {
        event: 103,
        reason: ""
      };
      this.dialog = false;
    },
    // 确定栏目按钮
    async submit() {
      if (this.isAdjust) {
        if (this.adjustForm.event === 104 && this.adjustForm.reason === "") {
          this.$message({
            message: "请填写驳回理由",
            type: "error"
          });
          return false;
        }
        const data = await updateCourseStatus({
          ...this.adjustForm,
          id: this.form.id
        });
        if (data.code === 0) {
          this.$message.success("审核成功");
          this.cancel();
          this.getLists();
        } else {
          this.$message.error(data.message);
        }
        return;
      }

      if (!this.form.name) {
        this.$message({
          message: "课程名称不能为空",
          type: "error"
        });
        return false;
      }
      if (!this.form.remark) {
        this.$message({
          message: "课程简介不能为空",
          type: "error"
        });
        return false;
      }
      if (!this.form.coverImage) {
        this.$message({
          message: "封面图不能为空",
          type: "error"
        });
        return false;
      }

      if (!this.form.advisorId) {
        if (this.user.advisorInfo) {
          this.form.advisorId = this.user.advisorInfo.id;
        } else {
          this.$message({
            message: "请选择讲师",
            type: "error"
          });
          return false;
        }
      }
      if (this.authority === "0") {
        this.form.authorityId = "";
        this.form.pageId = "";
        this.form.paymentUrl = "";
        this.form.originalPrice = "";
        this.form.discountPrice = "";
      } else if (!this.form.authorityId) {
        this.$message({
          message: "请输入权限号",
          type: "error"
        });
        return false;
      } else if (this.linkType === "2") {
        if (!this.form.paymentUrl) {
          this.$message({
            message: "请输入支付链接",
            type: "error"
          });
          return false;
        }
        this.form.pageId = "";
        delete this.form.page;
      } else {
        this.form.paymentUrl = "";
      }

      const data = this.form.id
        ? await updateCourse(this.form)
        : await saveCourse(this.form);
      if (data.code === 0) {
        if (this.form.id) {
          this.$message.success("修改成功");
        } else {
          this.$message.success("新增成功");
        }
        this.cancel();
        this.getLists();
      } else {
        this.$message.error(data.message);
      }
    },
    async detail(row) {
      this.$router.push("/course/detail/" + row.id);
    },
    // 删除标签
    async update(item, event) {
      const eventMap = {
        101: "提交",
        102: "撤回",
        103: "通过",
        104: "驳回",
        105: "上架",
        106: "下架",
        107: "删除"
      };
      this.$confirm(`您确定${eventMap[event]}?`, {
        confirmButtonText: "提交",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(async () => {
          const params = {
            id: item.id,
            event,
            reason: ""
          };
          const data = await updateCourseStatus(params);
          // console.log(data)
          if (data.code === 0) {
            this.$message.success("操作成功");
            if (this.data.length === 1 && this.page !== 1) {
              this.page -= 1;
            }
            this.getLists();
          } else {
            this.$message.error(data.message);
          }
        })
        .catch(() => {});
    },
    async copyUrl(event, item) {
      const currentTarget = event.currentTarget;
      const ret = await urlResize({
        url: `/courseDetail?id=${item.id}&saleUserId=${this.user.user.id}`
      });
      if (ret.code === 0) {
        handleClipboard(ret.data, event, currentTarget);
      }
    },
    // 分页器
    sizeChange(e) {
      this.page = 1;
      this.size = e;
      this.getLists();
    },
    pageChange(e) {
      this.page = e;
      this.getLists();
    },
    handlePictureCardPreview() {},
    handleRemove() {},
    handleSuccess(response, file, fileList) {
      console.log(response);
      console.log(file);
      console.log(fileList);
      setTimeout(() => {
        this.form.coverImage = response.data.url;
      }, 100);
      this.$notify({
        title: "封面上传成功",
        type: "success",
        duration: 2500
      });
    },
    // 监听上传失败
    handleError(e, file, fileList) {
      const msg = JSON.parse(e.message);
      this.$notify({
        title: msg.message,
        type: "error",
        duration: 2500
      });
    },
    beforeUpload(file) {
      if (file.type !== "image/jpeg" && file.type !== "image/png") {
        this.$message.error("上传只支持jpeg格式和png格式!");
        return false;
      }
      const isLt = file.size / 1024 < 1024;
      if (!isLt) {
        this.$message.error("上传文件大小不能超过 1MB!");
      }
      this.headers["X-File-Size"] = file.size;
      return isLt;
    },
    async handleImageAdded(file, Editor, cursorLocation, resetUploader) {
      // An example of using FormData
      // NOTE: Your key could be different such as:
      // formData.append('file', file)

      var formData = new FormData();
      formData.append("file", file);

      let ret = await fileUpload(formData);
      if (ret && ret.code === 0) {
        const url = ret.data.url; // Get url from response
        Editor.insertEmbed(cursorLocation, "image", url);
        resetUploader();
      }
    }
  }
};
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
::v-deep .el-pagination {
  width: 100%;
  display: flex;
  justify-content: flex-end;
}

.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}

.avatar-uploader-icon {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}

.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>
