<！--教培项目授权-->
<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="10">
            <el-form-item label="手机号：">
              <el-input v-model="formInline.phoneNumber" size="small" placeholder="请输入"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12" 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-table :data="tableData" style="width: 100%">
        <el-table-column prop="name" label="模板名称"  align="center"></el-table-column>
        <el-table-column prop="phoneNumner" label="手机号" align="center"></el-table-column>
        <el-table-column prop="jigou" label="所属机构"  align="center"></el-table-column>
        <el-table-column prop="diqu" label="所属地区"  align="center"></el-table-column>
        <el-table-column prop="projectStatus" label="状态" align="center">
          <template slot-scope="scope">
            <span>{{ scope.row.status | roleStatus }}</span>
          </template>
        </el-table-column>
        <el-table-column fixed="right" label="操作"  align="center">
          <template slot-scope="scope">
            <el-button
              @click="changeStatus(scope.row,0)"
              v-show="scope.row.status == 0"
              type="primary"
              size="small"
            >开通权限</el-button>
            <el-button
              @click="changeStatus(scope.row,1)"
              v-show="scope.row.status == 1"
              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>

      <dialog-compont :dialogObj="downObj" @confirm="downConfirm" @hide="downHide"></dialog-compont>
      <dialog-compont :dialogObj="passObj" @confirm="passConfirm" @hide="passHide"></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: {
        phoneNumber: '',
        pageSize: 15,
        pageNo: 1
      },
      tableData: [
        {
          name: '王小二',
          phoneNumner: '136638902819',
          jigou: '尼山中心医院',
          diqu: '山东省曲阜市角力中你山乡',
          status: 0
        },
        {
          name: '王小二',
          phoneNumner: '136638902819',
          jigou: '尼山中心医院',
          diqu: '山东省曲阜市角力中你山乡',
          status: 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() {},
    // 改变状态
    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>
