<template>
  <div class="item-manager-wrap">
    <bread-crumb
      :curmbFirst="curmbFirst"
      :curmbSecond="curmbSecond"
    ></bread-crumb>
    <div class="component-content screenSet" id="screenSet">
      <div class="header-title">学科管理</div>
      <!-- 搜索查询 -->
      <el-row :gutter="30" class="row" type="flex" style="margin-top: 10px">
        <el-form
          ref="formInline"
          :model="formInline"
          label-width="75px"
          style="min-width: 1200px"
        >
          <el-col style="width: 300px">
            <el-form-item label="学科名称：">
              <el-input
                style="width: 192px"
                v-model="formInline.subjectName"
                size="small"
                placeholder="请输入学科名称"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col style="width: 600px">
            <el-form-item label="发布状态：">
              <el-select
                size="small"
                v-model="formInline.status"
                placeholder="请选择发布状态"
              >
                <el-option
                  v-for="item in optionStatus"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col
            :span="4"
            style="padding: 0; text-align: right; padding-right: 15px"
          >
            <el-button type="primary" size="small" @click="searchList"
              >查询</el-button
            >
            <el-button
              type="default"
              size="small"
              @click="resetForm"
              style="margin-left: 0"
              >重置</el-button
            >
          </el-col>
        </el-form>
      </el-row>
      <!-- 新建 -->
      <el-form :model="formInline" class="demo-form-inline">
        <el-form-item>
          <el-button
            class="add-button"
            size="small"
            type="primary"
            @click="openProject()"
            >新建学科</el-button
          >
        </el-form-item>
      </el-form>
      <!-- 表格 -->
      <el-table class="item-table" :data="tableData" style="width: 100%">
        <el-table-column
          prop="id"
          label="ID编号"
          min-width="100"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="firstSubjectName"
          label="学科名称"
          align="center"
        ></el-table-column>
        <!-- <el-table-column prop="title" label="所属职称" align="center"></el-table-column> -->
        <el-table-column
          prop="createdName"
          label="创建人"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="statusText"
          label="状态"
          align="center"
        ></el-table-column>
        <el-table-column
          fixed="right"
          label="操作"
          min-width="250"
          align="center"
        >
          <template v-slot="scope">
            <el-button
              v-for="btn in scope.row.btns"
              :key="btn.type"
              @click="onBtnClick(scope.row, btn)"
              type="primary"
              size="small"
              >{{ btn.name }}</el-button
            >
          </template>
        </el-table-column>
        <template v-slot:empty>
          <div>
            <div class="table-empty">
              <img src="../../assets/image/no-content1.png" />
              <p>没有查询到相关结果</p>
            </div>
          </div>
        </template>
      </el-table>
      <!-- 分页 -->
      <div class="pagination">
        <el-pagination
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="formInline.pageNo"
          :page-sizes="[10, 30, 50, 100]"
          :page-size="formInline.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="totalRows"
        ></el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
import BreadCrumb from '../../components/breadcrumb.vue'
import { create } from 'domain'
import { mapGetters, mapActions } from 'vuex'
import { returnData } from '../../utils/mock'
import { openLoading, closeLoading } from '../../utils/utils'
import * as commonUtil from '../../utils/utils'

let vm = null
export default {
  components: {
    BreadCrumb,
  },
  data() {
    return {
      changeStatusVisible: false,
      currentRow: null,
      curmbFirst: '教培项目',
      curmbSecond: '学科管理',
      searchParam: {
        name: '',
        status: '',
        pageNo: 1,
        pageSize: 10,
      },
      currentRow: {},
      optionStatus: [
        { value: '', label: '全部' },
        // { value: 1, label: "草稿" },
        { value: 2, label: '未上架' },
        { value: 3, label: '审核中/待审核' },
        { value: 4, label: '已上架' },
        { value: 5, label: '已下架' },
        { value: 6, label: '已拒绝/未上架' },
      ],
      tableData: [],
      totalRows: 0,
      loading: true,
      currentPage: 1,
      formInline: {
        subjectName: '',
        status: '',
        pageNo: 1,
        pageSize: 10,
      },
      idType: '',
      isRoleOfOuter: 0,
    }
  },
  computed: {
    ...mapGetters([
      '_token',
      // "idType",
    ]),
  },
  created() {
    vm = this
    vm.idType = localStorage.getItem('storageIdType') //
    vm.isRoleOfOuter = localStorage.getItem('isRoleOfOuter') - 0 // 内部管理员权限

    let pageSize = vm.formInline.pageSize
    console.log('idType:', vm.idType)
    if (this.$route.query.pageNum) {
      this.formInline = { ...this.$store.state.common.itemManager }
      this.formInline.pageNo = parseInt(this.$route.query.pageNum)
      this.formInline.pageSize = pageSize
    }
    this.$nextTick(function () {
      this.getProjectList()
    })
  },
  // 挂载到Dom完成时
  mounted: function () {
    commonUtil.resizeHeight()
  },
  methods: {
    ...mapActions(['updateItemManager', 'setKind']),

    // 打开新建页面
    openProject() {
      this.$router.push('edit-subject')
    },
    searchList() {
      this.formInline.pageNo = 1
      this.getProjectList()
    },
    //查询项目列表
    getProjectList() {
      let req = {}
      req = this.formInline
      openLoading(vm)
      vm.GET('portal/titleTest/list', req).then((res) => {
        closeLoading(vm)
        if (res.code == '000000') {
          const { list = [], total } = res.data
          vm.tableData = list.map((item) => {
            let statusText = ''
            let btns = []
            // 设置按钮名称、类型、操作之后的status、提示文字
            let [edit, publish, accept, reject, outOf, del] = [
              { name: '编辑', type: 'edit' },
              {
                name: '发布',
                type: 'publish',
                next: 3,
                text: '确定要发布该学科吗？',
              },
              {
                name: '通过',
                type: 'accept',
                next: 4,
                text: '确定要通过该学科上架吗？',
              },
              {
                name: '拒绝',
                type: 'reject',
                next: 6,
                text: '确定要拒绝该学科吗？',
              },
              {
                name: '下架',
                type: 'outOf',
                next: 5,
                text: '确定要下架该学科吗？',
              },
              {
                name: '删除',
                type: 'del',
                next: -1,
                text: '确定要删除该学科吗？',
              },
            ]
            switch (item.status) {
              case 1:
                statusText = '草稿'
                btns = [edit, publish, del]
                break
              case 2:
                statusText = '未上架'
                btns = [edit, publish, del]
                break
              case 3:
                statusText = '审核中/待审核'
                btns = [accept, reject]
                break
              case 4:
                statusText = '已上架'
                btns = [edit, outOf]
                break
              case 5:
                statusText = '已下架'
                btns = [edit, publish, del]
                break
              case 6:
                statusText = '已拒绝/未上架'
                btns = [edit, publish, del]
                break
              default:
              //
            }
            return {
              ...item,
              statusText,
              btns,
            }
          })
          //console.log(vm.tableData);
          vm.totalRows = total
        }
      })
    },
    onBtnClick(item, btn) {
      if (btn.type === 'edit') {
        this.$router.push(
          'edit-subject?id=' +
            item.id +
            '&level=' +
            item.level +
            '&pageNum=' +
            this.formInline.pageNo
        )
      } else {
        this.$confirm(btn.text, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        })
          .then(() => {
            this.changeStatus(item.id, btn.next)
          })
          .catch(() => {})
      }
    },
    // 修改状态
    changeStatus(id, status) {
      this.POST('portal/titleTest/changeSubjectStatus', { id, status }).then(
        (res) => {
          this.$message.success(res.message)
          if (res.code == '000000') {
            console.log(res)
            this.getProjectList()
          }
        }
      )
    },
    // 重置表单
    resetForm() {
      vm.formInline = {
        subjectName: '',
        status: '',
        pageNo: 1,
        pageSize: 10,
        duringTime: '',
      }
      vm.getProjectList()
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`)
      this.formInline.pageSize = val
      this.handleCurrentChange(this.searchParam.pageNo)
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`)
      this.formInline.pageNo = val
      this.getProjectList()
      //需要判断是否检索
      // if (!this.flag) {
      //   this.currentChangePage(this.tableDataEnd);
      // } else {
      //   this.currentChangePage(this.filterTableDataEnd);
      // }
    }, //组件自带监控当前页码
    currentChangePage(list) {
      let from = (this.currentPage - 1) * this.pageSize
      let to = this.currentPage * this.pageSize
      this.tableDataEnd = []
      for (; from < to; from++) {
        if (list[from]) {
          this.tableDataEnd.push(list[from])
        }
      }
    },
  },
}
</script>

<style lang="scss">
.item-table .el-button {
  margin: 5px 0;
}
.item-manager-wrap {
  .component-content {
    background: #fff;
    padding: 10px;
    .header-title {
      padding: 10px 12px;
      font-size: 12px;
      color: #449284;
      border-bottom: 1px solid #efefef;
    }
    .demo-form-inline {
      margin-right: 20px;
      .add-button {
        float: right;
        margin-right: 10px;
      }
    }
    .table-empty {
      img {
        width: 100px;
      }
      p {
        margin-top: -50px;
      }
    }
  }
}
.el-tooltip__popper {
  max-width: 50%;
}
.item-table .el-button {
  margin: 5px;
}
</style>
