<template>
  <div class="app-container">
    <div class="head-container">
      <el-input
        v-model="columnName"
        clearable
        placeholder="请输入专栏名称"
        style="width: 200px;"
        class="filter-item"
      />
      <el-button class="filter-item" size="mini" @click="getLists(1)"
        >查询</el-button
      >
      <el-button
        class="filter-item"
        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">
      </el-table-column>
      <el-table-column prop="imgUrl" label="封面" width="100">
        <template #default="scope">
          <el-popover placement="right" :width="400" trigger="hover">
            <img :src="scope.row.imgUrl" width="375" height="300" />
            <template #reference>
              <img
                :src="scope.row.imgUrl"
                style="max-height: 60px; max-width: 60px"
              />
            </template>
          </el-popover>
        </template>
      </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="latestUpdateTime" label="最近更新时间" width="180">
      </el-table-column>
      <el-table-column
        prop="updateVideoCount"
        label="已更新直播期数"
        width="180"
      >
      </el-table-column>
      <el-table-column prop="subCount" label="订阅数" width="180">
      </el-table-column>
      <el-table-column prop="readCount" label="专栏总观看数" width="180">
      </el-table-column>
      <el-table-column prop="likeCount" label="专栏总点赞数" width="180">
      </el-table-column>
      <el-table-column prop="weight" label="是否推荐" width="180">
        <template slot-scope="scope">
          {{ scope.row.weight ? "是" : "否" }}
        </template>
      </el-table-column>
      <el-table-column prop="status" label="状态" width="180">
        <template slot-scope="scope">
          {{ statusList[scope.row.status] }}
        </template>
      </el-table-column>
      <el-table-column label="操作" fixed="right" align="center" width="250">
        <template slot-scope="scope">
          <!-- <el-button
            size="mini"
            v-if="scope.row.status === 2"
            type="primary"
            @click="addTag(scope.row)"
            >审核</el-button
          > -->
          <el-button
            slot="reference"
            v-if="scope.row.status === 3"
            type="primary"
            size="mini"
            @click="update(scope.row)"
            >下架</el-button
          >
          <el-button
            slot="reference"
            v-if="scope.row.status === 3 && !scope.row.weight"
            type="primary"
            @click="recommendation(scope.row)"
            size="mini"
            >推荐</el-button
          >
          <el-button
            slot="reference"
            v-if="scope.row.status === 3 && scope.row.weight"
            type="primary"
            @click="editWeight(scope.row)"
            size="mini"
            >取消推荐</el-button
          >
          <el-button
            slot="reference"
            v-if="scope.row.status === 1 || scope.row.status === 5"
            type="primary"
            size="mini"
            @click="update(scope.row)"
            >上架</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <div style="display: inline-block">
      <el-dialog
        :visible.sync="dialog"
        :close-on-click-modal="false"
        :title="dialogTitle"
        append-to-body
        v-model="form"
        width="500px"
      >
        <el-form label-width="80px">
          <el-form-item label="专栏名称">
            <el-input
              v-model="form.name"
              clearable
              placeholder="请输入专栏名称"
              :maxlength="20"
              show-word-limit
            />
          </el-form-item>
          <el-form-item label="专栏介绍">
            <el-input
              v-model="form.introduce"
              clearable
              type="textarea"
              :autosize="{ minRows: 2, maxRows: 10 }"
              maxlength="500"
              show-word-limit
              placeholder="请输入专栏介绍"
            />
          </el-form-item>
          <el-form-item label="封面">
            <el-upload
              class="avatar-uploader"
              :show-file-list="false"
              :on-success="handleSuccess"
              :on-error="handleError"
              :headers="headers"
              action="/admin/common/file/upload"
              :before-upload="beforeUpload"
            >
              <img v-if="form.imgUrl" :src="form.imgUrl" class="avatar" />
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
              <div slot="tip" class="el-upload__tip">
                只能上传jpeg/png文件，且不超过1MB
              </div>
            </el-upload>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button
            size="mini"
            :loading="editLoading"
            type="primary"
            @click="submit()"
            >提交</el-button
          >
          <el-button size="mini" @click="cancel()">取消</el-button>
        </div>
      </el-dialog>
    </div>
    <div style="display: inline-block">
      <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.weight"
              :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>
    </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 { queryTagList, tagSave, tagUpdate, updateStatus } from "@/api/tag.js";
import { getToken } from "@/utils/auth";
import {
  columnGet,
  columnList,
  columnSave,
  columnRecommend,
  columnUpdateStatus
} from "@/api/videoLive.js";
export default {
  name: "column",
  data() {
    return {
      dialog: false,
      dialogTitle: "",
      loading: false,
      delLoading: false,
      editLoading: false,
      newTag: "",
      total: 0,
      page: 1,
      size: 10,
      data: [],
      tag: {
        id: "",
        name: ""
      },
      statusList: {
        1: "待提交",
        2: "待审核",
        3: "已上架",
        4: "已驳回",
        5: "已下架"
      },
      columnName: "",
      form: {
        imgUrl: "",
        introduce: "",
        name: "",
        weight: null
      },
      headers: {
        Authorization: "Bearer " + getToken(),

        "X-File-Size": 0
      },
      dialogWeight: false
    };
  },

  mounted() {
    this.getLists(1);
  },

  methods: {
    async getLists(val) {
      if (val) {
        this.page = 1;
      }
      this.loading = true;
      const { data } = await columnList({
        current: this.page,
        size: this.size,
        columnName: this.columnName
      });
      this.data = data.list;
      this.total = data.total;
      this.loading = false;
    },
    // 添加标签
    async addTag(val) {
      if (val) {
        this.form.name = JSON.parse(JSON.stringify(val.name));
        this.form.imgUrl = JSON.parse(JSON.stringify(val.imgUrl));
        this.form.introduce = JSON.parse(JSON.stringify(val.introduce));
        this.dialogTitle = "审核专栏";
        this.dialog = true;
      } else {
        this.dialog = true;
        this.dialogTitle = "新增专栏";
      }
    },
    cancel() {
      this.form = {
        imgUrl: "",
        introduce: "",
        name: "",
        weight: null
      };
      this.dialog = false;
    },
    // 确定栏目按钮
    async submit() {
      if (!this.form.name) {
        this.$message({
          message: "专栏名称不能为空",
          type: "error"
        });
        return false;
      }
      if (!this.form.introduce) {
        this.$message({
          message: "专栏介绍不能为空",
          type: "error"
        });
        return false;
      }
      if (!this.form.imgUrl) {
        this.$message({
          message: "封面图不能为空",
          type: "error"
        });
        return false;
      }
      const data = await columnSave(this.form);
      if (data.code === 0) {
        this.$message.success("修改成功");
        this.cancel();
        this.getLists();
      } else {
        this.$message.error(data.message);
      }
    },
    // 删除标签
    async update(item) {
      this.$confirm(
        `您确定提交${[3].includes(item.status) ? "下架" : "上架"}?`,
        {
          confirmButtonText: "提交",
          cancelButtonText: "取消",
          type: "warning"
        }
      )
        .then(async () => {
          const params = {
            id: item.id,
            option: item.status === 3 ? 106 : 105,
            status: item.status === 3 ? 5 : 3
          };
          const data = await columnUpdateStatus(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(() => {});
    },
    recommendation(val) {
      this.form.weight = JSON.parse(JSON.stringify(val.weight));
      this.form.id = JSON.parse(JSON.stringify(val.id));
      this.dialogWeight = true;
    },
    // 分页器
    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.imgUrl = 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 editWeight(val) {
      if (val) {
        this.$confirm(`您确定取消推荐?`, {
          confirmButtonText: "提交",
          cancelButtonText: "取消",
          type: "warning"
        })
          .then(async () => {
            const data = {
              id: val.id,
              option: 2
            };
            const res = await columnRecommend(data);
            if (res.code === 0) {
              this.$message.success("操作成功");
              this.getLists();
            }
          })
          .catch(() => {});
      } else {
        const data = {
          id: this.form.id,
          option: 1,
          weight: this.form.weight
        };
        const res = await columnRecommend(data);
        if (res.code === 0) {
          this.$message.success("操作成功");
          this.cancelWeight();
          this.getLists();
        }
      }
    },
    cancelWeight() {
      this.form = {
        imgUrl: "",
        introduce: "",
        name: "",
        weight: null
      };
      this.dialogWeight = false;
    }
  }
};
</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>
