<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>
