<template>
  <div class="role-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"
        align="middle"
        justify="space-around"
      >
        <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 style="width: 600px">
            <el-form-item label="项目时间：">
              <el-date-picker
                :shortcuts="pickerOptions0 && pickerOptions0.shortcuts"
                :disabled-date="pickerOptions0 && pickerOptions0.disabledDate"
                :cell-class-name="
                  pickerOptions0 && pickerOptions0.cellClassName
                "
                v-model="formInline.projectBegintime"
                size="small"
                type="datetime"
                placeholder="请选择开始时间"
                value-format="yyyy-MM-dd HH:mm:ss"
              ></el-date-picker>
              ~
              <el-date-picker
                :shortcuts="pickerOptions1 && pickerOptions1.shortcuts"
                :disabled-date="pickerOptions1 && pickerOptions1.disabledDate"
                :cell-class-name="
                  pickerOptions1 && pickerOptions1.cellClassName
                "
                v-model="formInline.projectEndtime"
                size="small"
                type="datetime"
                placeholder="请选择结束时间"
                value-format="yyyy-MM-dd HH:mm:ss"
                default-time="23:59:59"
              ></el-date-picker>
            </el-form-item>
          </el-col>
          <el-col
            :span="5"
            style="
              padding: 0;
              text-align: right;
              padding-right: 15px;
              float: right;
            "
          >
            <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="id"
          label="ID编号"
          min-width="100"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="projectName"
          label="项目名称"
          min-width="100"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="createdName"
          label="创建人"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="createdTime"
          label="创建时间"
          width="100"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="projectIntro"
          label="项目简介"
          align="center"
          min-width="100"
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column
          prop="projectBegintime"
          label="项目开始时间"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="projectEndtime"
          label="项目结束时间"
          align="center"
        ></el-table-column>
        <el-table-column prop="projectStatus" label="状态" align="center">
          <template v-slot="scope">
            <span>{{
              $filters.statusProject([scope.row.projectStatus, idType])
            }}</span>
          </template>
        </el-table-column>
        <el-table-column fixed="right" label="操作" width="200" align="center">
          <template v-slot="scope">
            <el-button type="primary" size="small" @click="toPage(scope.row)"
              >查看项目人员</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>
    </div>
  </div>
</template>

<script>
import BreadCrumb from '../../components/breadcrumb.vue'
import { create } from 'domain'
import { mapGetters } from 'vuex'
import { openLoading, closeLoading } from '../../utils/utils'
import * as commonUtil from '../../utils/utils'
let vm = null
export default {
  components: {
    BreadCrumb,
  },
  data() {
    return {
      curmbFirst: '系统管理',
      curmbSecond: '角色管理',
      tableData: [],
      loading: false,
      timingTime: '',
      currentPage: 1,
      duringTime: 0,
      totalRows: 0,
      formInline: {
        projectName: '',
        projectBegintime: '',
        projectEndtime: '',
        pageNo: 1,
        pageSize: 10,
        type: 2,
      },
      pickerOptions0: {
        disabledDate: (time) => {
          if (
            this.formInline.projectEndtime != '' &&
            this.formInline.projectEndtime != null
          ) {
            return (
              time.getTime() >
              new Date(this.formInline.projectEndtime).getTime()
            )
          }
        },
      },
      pickerOptions1: {
        disabledDate: (time) => {
          return (
            time.getTime() <
            new Date(this.formInline.projectBegintime).getTime()
          ) //减去一天的时间代表可以选择同一天;
        },
      },
    }
  },
  computed: {
    ...mapGetters(['_token']),
  },
  created() {
    vm = this
    vm.idType = localStorage.getItem('storageIdType')
    console.log('idType:', vm.idType)
    this.search()
  },
  // 挂载到Dom完成时
  mounted: function () {
    commonUtil.resizeHeight()
  },
  methods: {
    searchList() {
      this.formInline.pageNo = 1
      this.search()
    },
    search() {
      let req = {}
      //console.log(this.formInline);
      req = this.formInline
      openLoading(vm)
      vm.GET('portal/portalInfo/getProjectList', req).then((res) => {
        closeLoading(vm)
        if (res.code == '000000') {
          vm.tableData = res.data.data
          vm.totalRows = res.data.totalRows
        }
      })
    },
    resetForm() {
      vm.formInline = Object.assign(
        {},
        {
          projectName: '',
          projectBegintime: '',
          projectEndtime: '',
          duringTime: '',
          pageNo: 1,
          pageSize: 10,
        }
      )
      vm.search()
    },
    toPage(row) {
      this.$router.push(
        'item-role?portalProjectId=' +
          row.id +
          '&projectName=' +
          row.projectName
      )
    },
    handleSizeChange(val) {
      this.formInline.pageSize = val
      this.search()
      console.log(`每页 ${val} 条`)
    },
    handleCurrentChange(val) {
      this.formInline.pageNo = val
      this.search()
      console.log(`当前页: ${val}`)
    },
  },
}
</script>

<style lang="scss">
.role-wrap {
  .component-content {
    padding: 10px;
    background: #fff;
    .header-title {
      padding: 10px 12px;
      font-size: 12px;
      color: #449284;
      border-bottom: 1px solid #efefef;
    }
    .to-right {
      float: right;
    }
    .add-button {
      float: right;
    }
    .table-empty {
      img {
        width: 100px;
      }
      p {
        margin-top: -50px;
      }
    }
  }
}
.el-tooltip__popper {
  max-width: 50%;
}
</style>
