<template>
  <div id="content-container" :class="{'expand-right': expandRight}">
    <page-loading :show="pageLoading"></page-loading>
    <!--Page Title-->
    <div id="page-title">
      <h1 class="page-header text-overflow">{{title}}</h1>
      <!--Searchbox-->
      <!--<div class="searchbox">-->
      <!--<div class="input-group custom-search-form">-->
      <!--<input type="text" class="form-control" placeholder="Search..">-->
      <!--<span class="input-group-btn">-->
      <!--<button class="text-muted" type="button"><i class="demo-pli-magnifi-glass"></i></button>-->
      <!--</span>-->
      <!--</div>-->
      <!--</div>-->
    </div>
    <!--End page title-->

    <!--Breadcrumb-->
    <!--<ol class="breadcrumb">-->
    <!--<li><a href="#">Home</a></li>-->
    <!--<li><a href="#">Layouts</a></li>-->
    <!--<li class="active">Demo</li>-->
    <!--</ol>-->
    <!--End breadcrumb-->

    <!--Page content-->
    <div class="page-content">
      <div style="margin-bottom: 10px" >
        <el-button type="primary" @click="addProjectApply" v-if="!isSuperAdmin && projectStep=='apply'">新增</el-button>
        <search-box
          :placeholderInfo="placeholderInfo"
          :placeholderInfo2="placeholderInfo2"
          :activitiShow="activitiShow"
          :searchBoxHide="searchBoxHide"
          :yearShow="yearShow"
          :searchValue2Show="searchValue2Show"
          @activitiSelectChanged="activitiSelectChanged"
          @searchValueChange="searchValueChange"
          @searchValueChange2="searchValueChange2"
          @searchClick="getProject"
          @getYearChange="getYearChange"
        ></search-box>
      </div>
      <data-table
        :totalColumnsData="tableColumnsData"
        :rowsData="tableRowsData"
        :singleOperateColumnWidth="80"
        :showSingleOperation="tableShowSingleOperation"
        :showMultipleOperation="false"
        :canFolded="true"
        :showPageCtr="true"
        :totalPage="tableTotalPage"
        :currentPage="pageNo"
        @singleCheck="tableSingleCheck"
        @singleEdit="tableSingleEdit"
        @singleAccept="tableSingleAccept"
        @singleDelete="tableSingleDelete"
        @selectPageSize="tableSelectPageSize"
        @selectPage="tableSelectPage"
        @singleAnnotation="singleAnnotation"
      >
      </data-table>
    </div>
    <!--End Page content-->
  </div>
</template>

<script type="text/ecmascript-6">
  import routerData from '../../../router.json'
  import PageLoading from '../../components/PageLoading.vue'
  import DataForm from '../../components/form/DataForm.vue'
  import DataTable from '../../components/DataTable.vue'
  import Api from '../../server/index.js'
  import {getItem} from '../../config/mUtils.js';
  import SearchBox from '../../components/SearchBox.vue'

  export default {
    beforeRouteEnter (to, from, next) {
      next(function (vm) {
        global.getMenuIndex(vm);
      })
    },
    data (){
      return {
        expandRight: false,
        isSuperAdmin: false,
        title: '',
        projectType: '',
        projectStep: '',
        pageLoading: true,
        tableColumnsData: [],
        tableRowsData: [],
        tableShowSingleOperation: {
          show: true,
          showCheck: true,
          showAnnotation: true
        },
        tableTotalPage: 0,
        pageNo: 1,
        pageSize: 10,
        selectedRow: {},

        //搜索条件
        activitiShow: true,
        placeholderInfo: '请输入项目名称',
        placeholderInfo2: '请输入项目负责人或项目成员',
        searchBoxHide: true,
        yearShow: true,
        searchValue2Show: true,
        queryCondition: {
          activitiStatus: '-2',
          searchValue: '',
          searchValue2: '',
          year: '',
        }
      }
    },
    created () {
      this.judgeSuperAdmin();
      this.initUI();
      this.initTableColumn();
      this.getProject();
    },
    watch: {
      $route () {
        this.initUI();
        this.initTableColumn();
        this.getProject();
      },
    },
    methods: {
      //判断是否是超级管理员
      judgeSuperAdmin(){
        this.isSuperAdmin = (getItem('userId') == 0);
      },
      //初始化界面
      initUI(){
        this.projectType = this.$route.meta.type;
        this.projectStep = this.$route.meta.step;
        switch (this.projectType){
          case 'portrait':
            switch (this.projectStep){
              case 'apply':
                this.title = '纵向项目申报';
                break;
              // case 'verify':
              //   this.title = '纵向项目评审';
              //   break;
              case 'execute':
                this.title = '纵向项目执行';
                break;
              case 'check':
                this.title = '纵向项目验收';
                break;
            }
            break;
          case 'market':
            switch (this.projectStep){
              case 'apply':
                this.title = '市场项目申报';
                break;
              case 'execute':
                this.title = '市场项目执行';
                break;
              case 'check':
                this.title = '市场项目验收';
                break;
            }
            break;
          case 'internal':
            switch (this.projectStep){
              case 'apply':
                this.title = '内部项目申报';
                break;
              case 'execute':
                this.title = '内部项目执行';
                break;
              case 'check':
                this.title = '内部项目验收';
                break;
            }
            break;
        }
      },
      //初始化table column
      initTableColumn() {
        this.tableColumnsData = [
          // {
          //   label: '项目编号',
          //   prop: 'projectNo',
          //   show: true
          // },
          {
            label: '所属年份',
            prop: 'applyDate',
            show: true
          },
          {
            label: '项目名称',
            prop: 'projectName',
            show: true
          },
          {
            label: '项目负责人',
            prop: 'projectManagerData',
            show: true
          },
          {
            label: '项目成员',
            prop: 'membersList',
            show: true
          },
          // {
          //   label: '备注',
          //   prop: 'description',
          //   show: true
          // },
          {
            label: '项目简介',
            prop: 'instruction',
            show: true
          },
          {
            label: '审批状态',
            prop: 'activitiStatusName',
            show: true
          },
          // {
          //   label: '更新时间',
          //   prop: 'updateAt',
          //   show: true
          // },
        ];
      },
      //获取项目列表
      getProject() {
//        {
//          "activitiStatus": 0,
//          "projectCategory": "string",
//          "projectName": "string",
//          "projectStep": "string"
//        }
        let projectCategory= '';
        let projectStep= '';
        switch (this.projectType){
          case 'portrait':
            projectCategory = 'longitudinal';
            break;
          case 'market':
            projectCategory = 'market';
            break;
          case 'internal':
            projectCategory = 'internal';
            break;
        }
        switch (this.projectStep){
          case 'apply':
            projectStep = 'declare';
            break;
          case 'execute':
            projectStep = 'execute';
            break;
          case 'check':
            projectStep = 'accepting';
            break;
        }
        let param = {
          data: {
            projectCategory: projectCategory,
            projectStep: projectStep,
            activitiStatus: this.queryCondition.activitiStatus,
            membersList: this.queryCondition.searchValue2,
            projectName: this.queryCondition.searchValue,
            projectManagerData: this.queryCondition.searchValue2,
            applyDate: this.queryCondition.year,
            pageNo: this.pageNo,
            pageSize: this.pageSize,
          },
        };
        this.pageLoading = true;
        let self = this;
        Api.ProjectManagement.getProject(param).then((result) => {
          console.log("result--",result);
          this.pageLoading = false;
          if (result.status === 0) {
            this.tableRowsData.splice(0, this.tableRowsData.length);
            for (let i = 0; i < result.data.ls.length; i++) {
              let project = {};
              $.extend(true, project, result.data.ls[i]);
              if(project.ext.hasOwnProperty("instruction")){
                project["instruction"] = project.ext.instruction;
              }
              if(project.ext.hasOwnProperty("projectManagerData")){
                let projectManager = project.ext.projectManagerData[1];
                if(self.projectStep == "execute"){
                  if(getItem("userInfoId") == projectManager || getItem("roles").indexOf("项目专员") != -1){
                    project["isShowEdit"] = project.isEdit;
                  }else{
                    project["isShowEdit"] = false;
                  }
                }
                if(self.projectStep == "check"){
                  if(getItem("userInfoId") == projectManager){
                    project["showAccept"] = project.isEdit;
                  }else{
                    project["showAccept"] = false;
                  }
                }
              }
              if (project.ext.hasOwnProperty("applyDate")) {
                let applyTime = moment(project.ext.applyDate).toDate();
                project["applyDate"] = moment(applyTime).format("YYYY");
              }
              project.membersList = project.membersList.join(",");
              this.tableRowsData.push(project);
            }
            this.tableTotalPage = result.data.total;
          } else {
            this.$message.error(result.msg);
          }
        });
      },
      //新增项目申请
      addProjectApply() {
        let routerName = '';
        switch (this.projectType){
          case 'achieve':
            switch (this.projectStep){
              case 'apply':
                routerName = 'AddAchieveApply';
                break;
              case 'verify':
                routerName = 'AddPortraitProjectVerify';
                break;
              case 'execute':
                routerName = 'AddPortraitProjectExecute';
                break;
              case 'check':
                routerName = 'AddPortraitProjectCheck';
                break;
            }
            break;
          case 'market':
            switch (this.projectStep){
              case 'apply':
                routerName = 'AddMarketProjectApply';
                break;
              case 'execute':
                routerName = 'AddMarketProjectExecute';
                break;
              case 'check':
                routerName = 'AddMarketProjectCheck';
                break;
            }
            break;
          case 'internal':
            switch (this.projectStep){
              case 'apply':
                routerName = 'AddInternalProjectApply';
                break;
              case 'execute':
                routerName = 'AddInternalProjectExecute';
                break;
              case 'check':
                routerName = 'AddInternalProjectCheck';
                break;
            }
            break;
        }
        this.$router.push({name: routerName});
      },
      /*
       * table相关回调方法
       */
      tableSingleCheck(index){
        let routerName = '';
        switch (this.projectType){
          case 'portrait':
            switch (this.projectStep){
              case 'apply':
                routerName = 'PortraitProjectApplyDetail';
                break;
              // case 'verify':
              //   routerName = 'PortraitProjectVerifyDetail';
              //   break;
              case 'execute':
                routerName = 'PortraitProjectExecuteDetail';
                break;
              case 'check':
                routerName = 'PortraitProjectCheckDetail';
                break;
            }
            break;
          case 'market':
            switch (this.projectStep){
              case 'apply':
                routerName = 'MarketProjectApplyDetail';
                break;
              case 'execute':
                routerName = 'MarketProjectExecuteDetail';
                break;
              case 'check':
                routerName = 'MarketProjectCheckDetail';
                break;
            }
            break;
          case 'internal':
            switch (this.projectStep){
              case 'apply':
                routerName = 'InternalProjectApplyDetail';
                break;
              case 'execute':
                routerName = 'InternalProjectExecuteDetail';
                break;
              case 'check':
                routerName = 'InternalProjectCheckDetail';
                break;
            }
            break;
        }
        this.$router.push({name: routerName, params: {id: this.tableRowsData[index].id}});
      },
      tableSingleDelete (data){

      },
      tableSelectPageSize (param){
        this.pageSize = param;
        this.getProject();
      },
      tableSelectPage (param){
        this.pageNo = param;
        this.getProject();
      },
      tableSingleEdit(index) {
        let routerName = '';
        switch (this.projectType){
          case 'portrait':
            routerName = 'PortraitProjectExecuteEditDetail';
            break;
          case 'market':
            routerName = 'MarketProjectExecuteEditDetail';
            break;
          case 'internal':
            routerName = 'InternalProjectExecuteEditDetail';
            break;
        }
        this.$router.push({name: routerName, params: {id: this.tableRowsData[index].id}});
      },
      tableSingleAccept(index) {
        let routerName = '';
        switch (this.projectType){
          case 'portrait':
            routerName = 'PortraitProjectCheckAcceptDetail';
            break;
          case 'market':
            routerName = 'MarketProjectCheckAcceptDetail';
            break;
          case 'internal':
            routerName = 'InternalProjectCheckAcceptDetail';
            break;
        }
        this.$router.push({name: routerName, params: {id: this.tableRowsData[index].id}});
      },
      activitiSelectChanged(data) {
        this.queryCondition.activitiStatus = data;
      },
      searchValueChange(data) {
        this.queryCondition.searchValue = data
      },
      searchValueChange2(data) {
        this.queryCondition.searchValue2 = data
      },
      getYearChange(data) {
        this.queryCondition.year = data ? moment(data).format("YYYY") : '';
      },
      singleAnnotation(index, value){
        Api.Common.addAnnotation(this.tableRowsData[index].id,value,"project").then((result) =>{
          if (result.status === 0) {
            this.$message.success("添加批注成功！");
          } else {
            this.$message.error(result.msg);
          }
        })
      }
    },
    components: {
      PageLoading, DataTable, SearchBox
    }
  }
</script>

<style scoped lang="less" rel="stylesheet/less">
  .expand-right {
    @media (min-width: 768px) {
      padding-left: 0 !important;
    }
  }

  .page-content {
    padding: 15px;
  }
</style>
