<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.projectName" size="small" placeholder="请输入"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form ref="formInline" :model="formInline" label-width="75px" style="width:100%;">
              <el-form-item label="模板状态：">
                <el-select size="small" v-model="formInline.projectStatus" 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-form>
          </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 :model="formInline" class="demo-form-inline">
        <el-form-item>
          <el-button size="small" type="primary" @click="openProject()">+ 新建模板</el-button>
        </el-form-item>
      </el-form>

      <el-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="projectName" label="模板名称" min-width="100" align="center">
          <template slot-scope="scope">
            <el-button type="text" @click="go">{{scope.row.projectName}}</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="projectBegintime" label="有效期" min-width="90" align="center"></el-table-column>
        <el-table-column prop="projectStatus" label="状态" align="center">
          <template slot-scope="scope">
            <span>{{ scope.row.projectStatus | templateStatus }}</span>
          </template>
        </el-table-column>
        <el-table-column fixed="right" label="操作" min-width="360" align="center">
          <template slot-scope="scope">
            <el-button
              @click="changeStatus(scope.row,0)"
              v-show="showButton(scope.row,0)"
              type="primary"
              size="small"
            >编辑</el-button>
            <el-button
              @click="changeStatus(scope.row,1)"
              v-show="showButton(scope.row,1)"
              type="primary"
              size="small"
            >通过</el-button>
            <el-button
              @click="changeStatus(scope.row,2)"
              v-show="showButton(scope.row,2)"
              type="primary"
              size="small"
            >拒绝</el-button>
            <el-button
              @click="changeStatus(scope.row,3)"
              v-show="showButton(scope.row,3)"
              type="primary"
              size="small"
            >上架</el-button>
            <el-button
              @click="changeStatus(scope.row,4)"
              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>
        <div slot="empty">
          <div class="table-empty">
            <img src="../../assets/image/no-content1.png">
            <p>没有查询到相关结果</p>
          </div>
        </div>
      </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
        :visible.sync="deleteVisible"
        :close-on-click-modal="false"
        width="600px"
        center>
        <p style="text-align: center;">删除后将不可撤销，确认删除吗？</p>
        <span slot="footer" class="dialog-footer">
          <el-button @click="confirmDelete">删 除</el-button>
          <el-button type="primary" @click="hideDeleteFrom">取 消</el-button>
        </span>
      </el-dialog>

      <dialog-compont :dialogObj="downObj" @confirm="downConfirm" @hide="downHide"></dialog-compont>
      <dialog-compont :dialogObj="passObj" @confirm="passConfirm" @hide="passHide"></dialog-compont>
      <dialog-compont :dialogObj="rejectObj" @confirm="rejectConfirm" @hide="rejectHide"></dialog-compont>
    </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: {
        projectName: '',
        projectStatus: 0,
        pageSize: 15,
        pageNo: 1
      },
      optionStatus: [
        {
          value: 0,
          label: '全部状态'
        },
        {
          value: 1,
          label: '草稿'
        },
         {
          value: 2,
          label: '未上架'
        },
        // {
        //   value: 3,
        //   label: '审核中'
        // },
        {
          value: 3,
          label: '待审核'
        },
        {
          value: 4,
          label: '已上架'
        },
        {
          value: 5,
          label: '已下架'
        },
        // {
        //   value: 6,
        //   label: '已拒绝'
        // },
        {
          value: 6,
          label: '未上架'
        }
      ],
      tableData: [
        {
          allowLearn: 2,
          authorityType: 1,
          blackModifiable: true,
          certificateType: 1,
          checkStatus: 2,
          courseRequire: 0,
          createdId: 198,
          createdName: "李三银",
          createdTime: "2020-01-03 13:34:58",
          creatorOrganizationName: null,
          creditId: null,
          deleteFlag: 1,
          editCreditId: null,
          id: 177,
          idType: 1,
          learnableFlag: 2,
          level: "L1",
          modifiedId: 198,
          modifiedTime: "2020-01-03 13:34:59",
          mustKnow: null,
          operateType: null,
          organizationId: 0,
          organizationName: "云鹊医",
          organizationNameList: ["云鹊医"],
          passAverageScore: null,
          passExamCount: null,
          passTotalLearnTime: null,
          passType: 1,
          projectBegintime: "2020-01-14 00:00:00",
          projectEndtime: "2020-01-23 23:59:59",
          projectIntro: "329899",
          projectLeader: "刘佳敏",
          projectLeaderId: null,
          projectLevel: null,
          projectLevelValue: null,
          projectName: "李三银测试项目3",
          projectNo: null,
          projectStatus: 1,
          projectSubject: null,
          projectSubjectId: null,
          projectType: 2,
          projectTypeValue: "CME项目",
          scopeType: 0,
          status4Flag: 1,
          visibleFlag: 1
        }
      ],
      totalRows: 10,
      deleteVisible: false,    // 删除弹框显示与否
      downObj: {
        title: '确认要下架该项目模板吗？',
        message: '下架后,用户则无法查看项目',
        visible: false
      },
      passObj: {
        title: '确认要通过该项目模板审核吗？',
        message: '审核通过后,用户可在工作站查看或购买该项目模板',
        visible: false
      },
      rejectObj: {
        title: '确认要拒绝该项目模板吗？',
        message: '拒绝后该项目模板将从列表中消失',
        visible: false
      },
      idType: 1   //idType 1为内部项目，其他为外部项目
    }
  },
  components: {
    BreadCrumb,
    dialogCompont: dialog
  },
  created() {
    vm = this;
    vm.idType = localStorage.getItem('storageIdType');
    // vm.searchList();
  },
  mounte() {
    commonUtil.resizeHeight();
  },
  methods: {
    // 查询列表
    searchList() {
      let req = {};
      req = vm.formInline;
      openLoading(vm);
      vm.GET("openTemplate/getOpenTemplateList", req).then(res => {
        closeLoading(vm);
        if (res.code == "000000") {
        //   vm.tableData = res.data.data;
        //   vm.totalRows = res.data.totalRows;
        // }
          console.log('====================================');
          console.log( res.data.data);
          console.log('====================================');
        }
      });
    },
    // 重置搜索
    resetForm() {},
    // 新建模板
    openProject() {},
    // 改变状态
    changeStatus(row,type) {
      if (type == 1) {
        vm.passObj.visible = true;
      }
    },
    //删除
    deleteRow() {
      vm.deleteVisible = true;
    },
     // 删除项目
    confirmDelete() {
      alert('delete')
    },
    hideDeleteFrom() {
      vm.deleteVisible = false;
    },
    // 显示操作按钮
    showButton(row,type) {
      // （1.草稿 2.未上架 3.审核中/待审核 4.已上架 5.已下架 6.已拒绝/未上架）
      // 内部用户
      let projectStatus = row.projectStatus;
      let idType = row.idType;
      let level = row.level;
      let flag = false;
      let typeStr = parseInt(type);
      return true;
     
    },
    handleSizeChange() {},
    handleCurrentChange() {},
    // 跳转到模板详情
    go() {
       vm.$router.push("template-editor");
    },
    downConfirm() {},
    downHide() {},
    // 通过按钮
    passConfirm() {
      alert('通过');
    },
    passHide() {
      alert('quxiao')
    },
    rejectConfirm() {},
    rejectHide() {}
  }
}
</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>
