<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 label="序号" type="index" fixed width="50" />
      <el-table-column prop="title" label="视频名称" width="200" />
      <el-table-column prop="imgUrl" label="封面">
        <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="createTime" label="创建时间" width="150" />
      <el-table-column prop="favorCount" label="点赞数" />
      <el-table-column
        prop="watchCount"
        label="播放量"
        width="100"
      />
      <el-table-column prop="commentCount" label="互动数" />
      <el-table-column prop="status" label="状态">
        <template #default="scope">
          {{ statusObj[scope.row.status] }}
        </template>
      </el-table-column>
      <el-table-column prop="riskLevel" label="风险等级">
        <template #default="scope">
          {{ riskLevelObj[scope.row.riskLevel] }}
        </template>
      </el-table-column>
      <el-table-column prop="isCart" label="视频是否带货" width="120">
        <template #default="scope">
          {{ scope.row.isCart === 1 ? "是" : "否" }}
        </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
        prop="name"
        label="操作"
        fixed="right"
        width="200"
        align="center"
      >
        <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>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      :total="total"
      :current-page="formInline.current"
      :page-size="formInline.size"
      layout="total, sizes, prev, pager, next, jumper"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
    <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>
  </div>
</template>
<script>
import { mapGetters } from "vuex";
import { queryShortVideoList, setMainPageParam } from "@/api/shortVideo";
export default {
  props: {
    type: {
      type: String,
      default: ""
    }
  },
  computed: {
    ...mapGetters(["user"])
  },
  data() {
    return {
      statusObj: {
        1: "待提交",
        2: "待审核",
        3: "已上架",
        4: "已驳回",
        5: "已下架"
      },
      riskLevelObj: {
        1: "低风险",
        2: "中低风险",
        3: "中风险",
        4: "中高风险",
        5: "高风险"
      },
      statusOptions: [
        //  状态列表
        { label: "待提交", value: 1 },
        { label: "待审核", value: 2 },
        { label: "已上架", value: 3 },
        { label: "已驳回", value: 4 },
        { label: "已下架", value: 5 }
      ],
      formInline: {
        advisorId: '',
        title: "",
        status: 3,
        current: 1,
        size: 10,
        userType: 2,
        isDisplay: ''
      },
      tableData: [],
      total: 0,
      dialogWeight: false,
      form: {
        id: null,
        isRecommend: null
      }
    };
  },
  methods: {
    onSubmit() {
      this.current = 1
      this.queryList()
    },
    handleSizeChange(val) {
      this.formInline.size = val;
      this.formInline.current = val;
      this.queryList();
    },
    handleCurrentChange(val) {
      this.formInline.current = val || 1;
      this.queryList();
    },
    async queryList(advisorId) {
      this.formInline.advisorId = advisorId || this.formInline.advisorId
      try {
        const { code, data } = await queryShortVideoList(this.formInline);
        if (code === 0) {
          this.tableData = data.list;
          this.total = data.total;
        }
      } catch (error) {
        console.log(error);
      }
    },
    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.queryList()
          }
        })
        .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.queryList()
            }
          })
          .catch(() => { })
      } else {
        const data = { ...this.form }
        const res = await setMainPageParam(data)
        if (res.code === 0) {
          this.$message.success('操作成功')
          this.cancelWeight()
          this.queryList()
        }
      }
    },
    cancelWeight() {
      this.form = {
        id: null,
        isRecommend: null
      }
      this.dialogWeight = false
    }
  }
};
</script>
<style scoped lang="scss"></style>
