<template>
  <div>
    <el-form :inline="true" :model="formInline" class="demo-form-inline">
      <el-form-item label="课程名称">
        <el-input v-model="formInline.title" placeholder="课程名称" />
      </el-form-item>
      <el-form-item label="显示状态">
        <el-select v-model="formInline.isDisplay" placeholder="显示状态">
          <el-option label="全部" value="" />
          <el-option label="显示" :value="1" />
          <el-option label="隐藏" :value="2" />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">查询</el-button>
      </el-form-item>
    </el-form>
    <el-table :data="tableData" style="width: 100%">
      <el-table-column type="index" label="序号" />
      <el-table-column prop="name" label="课程名称" width="180" />
      <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="180" />
      <el-table-column prop="createTime" label="创建时间" width="180" />
      <el-table-column prop="auditTime" label="审核时间" width="180" />
      <el-table-column prop="riskLevel" label="风险等级" width="180">
        <template slot-scope="scope">
          {{ riskLevelList[scope.row.riskLevel] }}
        </template>
      </el-table-column>

      <el-table-column prop="" label="收费类型" width="120">
        <template slot-scope="scope">
          {{ scope.row.authorityId ? "收费" : "免费" }}
        </template>
      </el-table-column>
      <el-table-column prop="" label="收费价格" width="120">
        <template slot-scope="scope">
          {{
            scope.row.authorityId
              ? scope.row.activityPrice
                ? scope.row.activityPrice
                : scope.row.originalPrice
              : "--"
          }}
        </template>
      </el-table-column>
      <el-table-column prop="isRecommend" label="权重" />
      <el-table-column label="显示状态">
        <template slot-scope="scope">
          {{ scope.row.isDisplay === 1 ? "显示" : "隐藏" }}
        </template>
      </el-table-column>
      <el-table-column
        v-if="!isYx"
        prop="name"
        label="操作"
        fixed="right"
        align="center"
        width="300"
      >
        <template slot-scope="scope">
          <el-button
            v-if="!scope.row.isRecommend"
            type="text"
            @click="recommend(scope.row)"
            >设置权重</el-button
          >
          <el-button
            v-if="scope.row.isRecommend"
            type="text"
            @click="editWeight(scope.row)"
            >取消权重</el-button
          >
          <el-button
            v-if="scope.row.isDisplay === 1"
            type="text"
            @click="control(scope.row, 1)"
            >隐藏</el-button
          >
          <el-button
            v-if="scope.row.isDisplay !== 1"
            type="text"
            @click="control(scope.row, 2)"
            >显示</el-button
          >
          <el-button type="text" @click="editText(scope.row)"
            >配置文案</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      class="pagination"
      background
      layout="total,prev, pager, next"
      :current-page="current"
      :total="total"
      @current-change="pageChange"
    />
    <el-dialog
      :visible.sync="dialogWeight"
      :close-on-click-modal="false"
      title="推荐"
      append-to-body
    >
      <el-form>
        <el-form-item label="课程权重：">
          <el-input-number
            v-model="form.isRecommend"
            :min="1"
            :max="100"
            label="请输入权重"
          />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button size="mini" type="primary" @click="editWeight()"
          >提交</el-button
        >
        <el-button size="mini" @click="cancelWeight()">取消</el-button>
      </div>
    </el-dialog>
    <el-dialog
      :visible.sync="dialogText"
      :close-on-click-modal="false"
      title="配置文案"
      append-to-body
    >
      <el-form>
        <el-form-item label="产品介绍">
          <el-input
            v-model="formText.mainPageText"
            type="textarea"
            :autosize="{ minRows: 2, maxRows: 4 }"
            clearable
          />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button size="mini" type="primary" @click="submitText()"
          >提交</el-button
        >
        <el-button size="mini" @click="cancelText()">取消</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { getCourseList, setMainPageParam } from "@/api/course.js";
export default {
  name: "CourseTab",
  props: {
    isYx: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      formInline: {
        title: "",
        isDisplay: ""
      },
      current: 1,
      tableData: [],
      total: 0,
      riskLevelList: {
        0: "低风险",
        1: "低风险",
        2: "中低风险",
        3: "中风险",
        4: "中高风险",
        5: "高风险"
      },
      loading: false,
      advisorId: null,
      dialogWeight: false,
      dialogText: false,
      form: {
        id: null,
        isRecommend: null
      },
      formText: {
        id: null,
        mainPageText: null
      }
    };
  },
  methods: {
    onSubmit() {
      this.current = 1;
      this.getList(this.advisorId);
    },
    pageChange(e) {
      this.current = e;
      this.getList(this.advisorId);
    },
    async getList(id) {
      if (!id) return;
      this.advisorId = id;
      this.loading = true;
      const ret = await getCourseList(
        Object.assign(
          {
            current: this.current,
            size: 10,
            status: 3,
            userType: 3,
            advisorId: this.advisorId
          },
          this.formInline
        )
      );
      if (ret.code === 0) {
        this.tableData = ret.data.list;
        console.log("this.tableData", this.tableData);
        this.total = ret.data.total;
        this.loading = false;
      }
    },
    // 推荐
    async recommend(item) {
      // 1 推荐
      this.form.id = JSON.parse(JSON.stringify(item.id));
      this.dialogWeight = true;
    },
    // 隐藏
    async control(item, type) {
      this.$confirm(`您确定${type === 1 ? "隐藏" : "显示"}?`, {
        confirmButtonText: "提交",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(async () => {
          const data = {
            id: item.id,
            isDisplay: type === 1 ? 2 : 1
          };
          const res = await setMainPageParam(data);
          if (res.code === 0) {
            this.$message.success("操作成功");
            this.getList(this.advisorId);
          }
        })
        .catch(() => {});
    },
    async editWeight(val) {
      if (val) {
        this.form.id = val.id;
        this.form.isRecommend = 0;
        this.$confirm(`您确定取消推荐?`, {
          confirmButtonText: "提交",
          cancelButtonText: "取消",
          type: "warning"
        })
          .then(async () => {
            const data = {
              id: this.form.id,
              isRecommend: 0
            };
            const res = await setMainPageParam(data);
            if (res.code === 0) {
              this.$message.success("操作成功");
              this.getList(this.advisorId);
            }
          })
          .catch(() => {});
      } else {
        const data = { ...this.form };
        const res = await setMainPageParam(data);
        if (res.code === 0) {
          this.$message.success("操作成功");
          this.cancelWeight();
          this.getList(this.advisorId);
        }
      }
    },
    cancelWeight() {
      this.form = {
        id: null,
        isRecommend: null
      };
      this.dialogWeight = false;
    },
    editText(item) {
      this.formText.id = JSON.parse(JSON.stringify(item.id));
      this.formText.mainPageText = JSON.parse(
        JSON.stringify(item.mainPageText)
      );
      this.dialogText = true;
    },
    async submitText() {
      const data = {
        id: this.formText.id,
        mainPageText: this.formText.mainPageText
      };
      const res = await setMainPageParam(data);
      if (res.code === 0) {
        this.$message.success("操作成功");
        this.dialogText = false;
        this.getList(this.advisorId);
      }
    },
    cancelText() {
      this.dialogText = false;
      this.formText = {
        id: null,
        mainPageText: null
      };
    }
  }
};
</script>
<style scoped lang="scss">
.pagination {
  display: flex;
  justify-content: flex-end;
  margin-top: 20px;
}
</style>
