<template>
  <div class="template-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="width: 100%"
        >
          <el-col :span="6">
            <el-form-item label="模板名称：">
              <el-input
                v-model="formInline.openTemplateName"
                size="small"
                placeholder="请输入"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="模板状态：">
              <el-select
                size="small"
                v-model="formInline.openTemplateStatus"
                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="8"
            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 class="demo-form-inline">
        <el-form-item>
          <el-button size="small" type="primary" @click="addOrEditTemplate"
            >+ 新建模板</el-button
          >
        </el-form-item>
      </el-form>

      <el-table :data="tableData" style="width: 100%">
        <el-table-column
          prop="id"
          label="ID编号"
          max-width="100"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="openTemplateName"
          label="模板名称"
          min-width="100"
          align="center"
        >
          <template v-slot="scope">
            <span
              @click="addOrEditTemplate(scope.row, 0)"
              style="color: rgb(2, 130, 132); cursor: pointer"
              >{{ scope.row.openTemplateName }}</span
            >
            <!-- <el-button  type="text" @click="addOrEditTemplate(scope.row, 0)">{{scope.row.openTemplateName}}</el-button> -->
          </template>
        </el-table-column>
        <el-table-column
          prop="createdName"
          label="创建人"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="projectTypeValue"
          label="模板类型"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="createdTime"
          label="创建时间"
          width="100"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="expireDay"
          label="有效期(天)"
          min-width="90"
          align="center"
        ></el-table-column>
        <el-table-column prop="openTemplateStatus" label="状态" align="center">
          <template v-slot="scope">
            <span>{{
              $filters.templateStatus(scope.row.openTemplateStatus)
            }}</span>
          </template>
        </el-table-column>
        <el-table-column
          fixed="right"
          label="操作"
          min-width="200"
          align="center"
        >
          <template v-slot="scope">
            <el-button
              @click="addOrEditTemplate(scope.row, 1)"
              v-show="showButton(scope.row, 0)"
              type="primary"
              size="small"
              >编辑</el-button
            >
            <el-button
              @click="changeStatus(scope.row, 4, 1)"
              v-show="showButton(scope.row, 1)"
              type="primary"
              size="small"
              >通过</el-button
            >
            <el-button
              @click="changeStatus(scope.row, 6)"
              v-show="showButton(scope.row, 2)"
              type="primary"
              size="small"
              >拒绝</el-button
            >
            <el-button
              @click="changeStatus(scope.row, 3, 3)"
              v-show="showButton(scope.row, 3)"
              type="primary"
              size="small"
              >上架</el-button
            >
            <el-button
              @click="changeStatus(scope.row, 5)"
              v-show="showButton(scope.row, 4)"
              type="primary"
              size="small"
              >下架</el-button
            >
            <el-button
              @click="deleteRow(scope.row, 5)"
              v-show="showButton(scope.row, 5)"
              type="primary"
              size="small"
              >删除</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>

      <!-- 删除 弹窗 -->
      <el-dialog
        title="确认要删除该项目模版吗？"
        :show-close="false"
        v-model="deleteVisible"
        :close-on-click-modal="false"
        width="600px"
        center
      >
        <p style="text-align: center">删除后该模版将不在列表显示</p>
        <template v-slot:footer>
          <span class="dialog-footer">
            <el-button @click="deleteVisible = false">取 消</el-button>
            <el-button type="primary" @click="confirmDelete">删 除</el-button>
          </span>
        </template>
      </el-dialog>

      <!-- 修改状态 -->
      <el-dialog
        :title="changeStatusConfig.title"
        :show-close="false"
        v-model="changeStatusVisible"
        :close-on-click-modal="false"
        width="600px"
        center
      >
        <p style="text-align: center">{{ changeStatusConfig.message }}</p>
        <template v-slot:footer>
          <span class="dialog-footer">
            <el-button @click="changeStatusVisible = false">取 消</el-button>
            <el-button type="primary" @click="changeStatusConfirm"
              >确 认</el-button
            >
          </span>
        </template>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import BreadCrumb from '../../components/breadcrumb.vue'
import dialog from '../../components/education/template/dialog'
import { openLoading, closeLoading } from '../../utils/utils'
import * as commonUtil from '../../utils/utils'
let vm = null
export default {
  data() {
    return {
      curmbFirst: '教培项目',
      curmbSecond: '模板管理',
      formInline: {
        openTemplateName: '',
        openTemplateStatus: '',
        pageSize: 10,
        pageNo: 1,
      },
      optionStatus: [
        {
          value: '',
          label: '全部状态',
        },
        {
          value: 1,
          label: '草稿',
        },
        {
          value: 2,
          label: '未上架',
        },
        {
          value: 300,
          label: '审核中',
        },
        {
          value: 3,
          label: '待审核',
        },
        {
          value: 4,
          label: '已上架',
        },
        {
          value: 5,
          label: '已下架',
        },
        {
          value: 6,
          label: '已拒绝',
        },
      ],
      tableData: [],
      totalRows: 0,
      deleteVisible: false, // 删除弹框显示与否
      deleteTemplateId: '',
      changeStatusVisible: false,
      openTemplateIdid: 26,
      needChangeStatus: 4,
      changeStatusConfig: {
        title: '确认要下架该项目模板吗？',
        message: '下架后，用户新建项目则无法看到该模版',
      },
      idType: 1, //idType 1为内部项目，其他为外部项目
    }
  },
  components: {
    BreadCrumb,
    dialogCompont: dialog,
  },
  created() {
    vm = this
    // 1: 内部用户; 2: 外部用户
    vm.idType = localStorage.getItem('storageIdType')
    vm.searchList()
  },
  mounte() {
    commonUtil.resizeHeight()
  },
  methods: {
    // 查询列表
    searchList() {
      let req = {}
      req = vm.formInline
      openLoading(vm)
      vm.GET('portal/openTemplate/getOpenTemplateList', req).then((res) => {
        closeLoading(vm)
        if (res.code == '000000') {
          vm.tableData = res.data.data
          vm.totalRows = res.data.totalRows
        }
      })
    },

    // 重置搜索
    resetForm() {
      vm.formInline.openTemplateName = ''
      vm.formInline.openTemplateStatus = ''
    },

    // 新建模板
    openProject() {},

    // 上架 3; 通过 4; 下架 5; 拒绝 6;
    changeStatus(row, status) {
      vm.openTemplateIdid = row.id
      vm.needChangeStatus = status
      let title = '',
        message = ''
      if (status == 3) {
        vm.changeStatusConfirm()
        return
      } else if (status == 4) {
        title = '确认通过该项目模版审核吗？'
        message = '审核通过后，用户可在工作站查看或购买该项目模版'
      } else if (status == 5) {
        title = '确认要下架该项目模版吗？'
        message = '下架后，用户新建项目则无法看到该模版'
      } else if (status == 6) {
        title = '确认要拒绝该项目模版吗？'
        message = '拒绝后该模版将从列表中消失'
      }
      vm.changeStatusConfig.title = title
      vm.changeStatusConfig.message = message
      vm.changeStatusVisible = true
    },

    // 改变状态
    changeStatusConfirm() {
      let req = {
        openTemplateId: vm.openTemplateIdid,
        changeStatus: vm.needChangeStatus,
      }
      openLoading(vm)
      vm.POST('portal/openTemplate/changeStatus', req).then((res) => {
        closeLoading(vm)
        if (res.code == '000000') {
          vm.changeStatusVisible = false
          vm.searchList()
        }
      })
    },

    //删除
    deleteRow(row) {
      console.log('row.id', row.id)
      vm.deleteTemplateId = row.id
      vm.deleteVisible = true
    },

    // 删除项目
    confirmDelete() {
      openLoading(vm)
      vm.DELETE(`portal/openTemplate/delete/${vm.deleteTemplateId}`, {}).then(
        (res) => {
          closeLoading(vm)
          if (res.code == '000000') {
            vm.deleteVisible = false
            vm.searchList()
          }
        }
      )
    },

    // 显示操作按钮
    showButton(row, optionType) {
      // showButton(scope.row, 4)
      // 1.草稿 2.未上架
      // （  3.审核中/待审核 4.已上架（通过） 5.已下架 6.已拒绝/未上架不通过）
      let status = row.openTemplateStatus
      // 审核中(自己的项目)
      if (status == 300) return false
      if (optionType == 0) {
        // 编辑
        if (status == 1 || status == 5 || status == 6) {
          return true
        }
      } else if (optionType == 1) {
        // 通过
        if (status == 3) {
          return true
        }
      } else if (optionType == 2) {
        // 拒绝
        if (status == 3) {
          return true
        }
      } else if (optionType == 3) {
        // 上架
        if (status == 5) {
          return true
        }
      } else if (optionType == 4) {
        // 下架
        if (status == 4) {
          return true
        }
      } else if (optionType == 5) {
        // 删除
        if (status == 1 || status == 5 || status == 6) {
          return true
        }
      }
      return false
    },

    handleSizeChange(val) {
      this.formInline.pageSize = val
      vm.searchList()
    },

    handleCurrentChange(val) {
      this.formInline.pageNo = val
      vm.searchList()
    },

    // 跳转到添加、编辑或修改页面
    addOrEditTemplate(row, isEdit = 0) {
      vm.$router.push(
        `template-editor?id=${(row && row.id) || ''}&isEdit=${isEdit}`
      )
    },
  },
}
</script>

<style lang="scss" scoped>
.template-manager-wrap {
  .component-content {
    background: #fff;
    padding: 10px;
    .header-title {
      padding: 10px 12px 10px 0;
      font-size: 12px;
      color: #449284;
      border-bottom: 1px solid #efefef;
    }
  }
}
</style>
