<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 slot-scope="scope">
            <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 slot-scope="scope">
            <span>{{ scope.row.openTemplateStatus | templateStatus }}</span>
          </template>
        </el-table-column>
        <el-table-column fixed="right" label="操作" min-width="200" align="center">
          <template slot-scope="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, 4, 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>
        <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="deleteVisible=false">取 消</el-button>
          <el-button type="primary" @click="confirmDelete">删 除</el-button>
        </span>
      </el-dialog>

      <!-- 修改状态 -->
      <el-dialog
        :title="changeStatusConfig.title"
        :show-close=false
        :visible.sync="changeStatusVisible"
        :close-on-click-modal="false"
        width="600px"
        center>
        <p style="text-align: center;">{{changeStatusConfig.message}}</p>
        <span slot="footer" class="dialog-footer">
          <el-button @click="changeStatusVisible=false">取 消</el-button>
          <el-button type="primary" @click="changeStatusConfirm">确 认</el-button>
        </span>
      </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: [{
        id: 1,
        openTemplateName: "脑卒中培训项目（内部）",
        createdName: "曹益盛",
        modifiedId: "203",
        projectType: 3,
        projectTypeValue: "开放模板",
        createdTime: "2019-04-02 17:21:12",
        expireDay: 100,
        openTemplateStatus: 4
      }],
      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() {},

    // 通过 4; 拒绝 6; 上架 4; 下架 5
    changeStatus(row, status, actionType) {
      vm.openTemplateIdid = row.id;
      vm.needChangeStatus = status;
      let title = '', message = '';
      if(status == 4) {
        if(actionType == 1) { // 通过按钮
          title = '确认通过该项目模版审核吗？';
          message = '审核通过后，用户可在工作站查看或购买该项目模版';
        } else {   // 上架按钮
          vm.changeStatusConfirm();
          return;
        }
      } 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 == 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 == 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>
