<template>
  <div class="app-container">
    <el-row>
      <el-col :span="6">
        <span style="padding-right: 10px;">表格设置</span>
        <el-select v-model="tableHeaderList" multiple collapse-tags placeholder="请选择">
          <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
          </el-option>
        </el-select>
      </el-col>
      <el-col :span="2">
        <el-button plain size="small" @click="handleSearch">高级搜索</el-button>
      </el-col>
      <el-button type="warning" plain icon="el-icon-download" size="mini" @click="handleExport"
        v-hasPermi="['cs:csResourceOrderApply:export']">导出</el-button>
    </el-row>
    <div v-if="showSearch" ref="showSearch" class="searchForm">
      <el-form :inline="true" class="formStyle" :model="queryParams" label-width="100px">
        <el-form-item label="申请日期">
          <el-date-picker v-model="dateRange" type="daterange" range-separator="-" start-placeholder="开始时间"
            end-placeholder="结束时间" format="yyyy-MM-dd" value-format="yyyy-MM-dd">
          </el-date-picker>
        </el-form-item>
          <el-form-item label="申请单号">
            <el-input placeholder="请输入申请单号" v-model="queryParams.applyNumber" />
          </el-form-item>
          <el-form-item label="负责人电话">
            <el-input placeholder="请输入负责人电话" v-model="queryParams.phone" />
          </el-form-item>
          <el-form-item label="使用人姓名">
            <el-input placeholder="请输入使用人姓名" v-model="queryParams.userInfoName" />
          </el-form-item>
          <el-form-item label="项目名称">
            <el-input placeholder="请输入项目名称" v-model="queryParams.projectName" />
          </el-form-item>
      </el-form>
      <div class="search">
        <el-button type="primary" icon="el-icon-search" @click="getList">查询</el-button>
        <el-button icon="el-icon-refresh-right" @click="reset">重置</el-button>
      </div>
    </div>
    <div class="tableData">
      <el-table v-loading="loading" :data="csResourceOrderApplyList" header-cell-class-name="headerClassName">
        <el-table-column label="申请日期" align="center" prop="createAt" fixed="left"
          v-if="tableHeaderList.indexOf('createAt') != -1">
          <template slot-scope="scope">
            <span>{{ parseTime(scope.row.createAt, '{y}-{m}-{d}') }}</span>
          </template>
        </el-table-column>
        <el-table-column label="工单账号" align="center" prop="email" v-if="tableHeaderList.indexOf('emailName') != -1" />
        <el-table-column label="用户姓名" align="center" prop="name" v-if="tableHeaderList.indexOf('name') != -1" />
        <el-table-column label="用户单位" align="center" prop="companyName"
          v-if="tableHeaderList.indexOf('companyName') != -1" />
        <el-table-column label="申请单号" align="center" prop="applyNumber" show-overflow-tooltip
          v-if="tableHeaderList.indexOf('applyNumber') != -1" />
        <el-table-column label="申请标题" align="center" prop="orderTitle"
          v-if="tableHeaderList.indexOf('orderTitle') != -1" />
        <el-table-column label="项目负责人姓名" align="center" prop="name"
          v-if="tableHeaderList.indexOf('name') != -1" />
        <el-table-column label="项目负责人单位" align="center" prop="companyName"
          v-if="tableHeaderList.indexOf('companyName') != -1" />
        <el-table-column label="项目负责人邮箱" align="center" prop="email"
          v-if="tableHeaderList.indexOf('email') != -1" />
        <el-table-column label="项目负责人电话" align="center" prop="phone"
          v-if="tableHeaderList.indexOf('phone') != -1" />
        <el-table-column label="使用人姓名" align="center" prop="userInfoName"
          v-if="tableHeaderList.indexOf('userInfoName') != -1" />
        <el-table-column label="项目名称" align="center" prop="projectName"
          v-if="tableHeaderList.indexOf('projectName') != -1" />
        <el-table-column label="项目编号" align="center" prop="projectNumber"
          v-if="tableHeaderList.indexOf('projectNumber') != -1" />
        <el-table-column label="专业领域" align="center" prop="majorField"
          v-if="tableHeaderList.indexOf('majorField') != -1" />
        <el-table-column label="项目起止时间" align="center" v-if="tableHeaderList.indexOf('projectCycleBegin') != -1">
          <template slot-scope="scope">
            <span>{{ parseTime(scope.row.projectCycleBegin, '{y}-{m}-{d}') }}-{{ parseTime(scope.row.projectCycleEnd,
              '{y}-{m}-{d}') }}</span>
          </template>
        </el-table-column>
        <el-table-column label="其他需求" align="center" prop="otherDemand"
          v-if="tableHeaderList.indexOf('otherDemand') != -1" />
        <el-table-column label="操作" align="center" fixed="right" class-name="small-padding fixed-width">
          <template slot-scope="scope">
            <el-button size="mini" type="text" @click="handleUpdate(scope.row)"
              v-hasPermi="['cs:csResourceOrderApply:query']">查看</el-button>
            <!--
            <el-button size="mini" type="text" @click="handleUpdate(scope.row)"
              v-hasPermi="['cs:csResourceOrderApply:edit']" v-if="scope.row.applyStatus == 2">触发</el-button>
            <el-button size="mini" type="text" @click="handleUpdate(scope.row)"
              v-hasPermi="['cs:csResourceOrderApply:edit']" v-if="scope.row.applyStatus == 4">审核</el-button>
            <el-button size="mini" type="text" @click="handleUpdate(scope.row)"
              v-hasPermi="['cs:csResourceOrderApply:edit']" v-if="scope.row.applyStatus == 6">委派</el-button>
            <el-button size="mini" type="text" @click="handleUpdate(scope.row)"
              v-hasPermi="['cs:csResourceOrderApply:edit']" v-if="scope.row.applyStatus == 7">处理工单</el-button> -->
            <el-button size="mini" type="text" @click="handleDelete(scope.row)"
              v-hasPermi="['cs:csResourceOrderApply:remove']">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="footer">
        <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum"
          :limit.sync="queryParams.pageSize" @pagination="getList" />
      </div>
    </div>
  </div>
</template>

<script>
import {
  listCsResourceOrderApply, getCsResourceOrderApply,
  delCsResourceOrderApply, addCsResourceOrderApply,
  updateCsResourceOrderApply, getClassListByMark, getStatistics
} from "@/api/cs/csResourceOrderApply";
export default {
  data() {
    return {
      csResourceOrderApplyList: [],
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        applyType: '0',
        applyNumber: null,
        resourceClassName: '',
        projectName: null,
        name: null,
        phone: null,
        applyStatus: null,
      },
      dateRange: [],
      total: 0,
      loading: false,
      showSearch: false,
      options: [
        {
          value: 'createAt',
          label: '申请日期'
        }, {
          value: 'email',
          label: '工单账号'
        }, {
          value: 'name',
          label: '用户姓名'
        }, {
          value: 'companyName',
          label: '用户单位'
        }, {
          value: 'applyNumber',
          label: '申请单号'
        }, {
          value: 'orderTitle',
          label: '申请标题'
        }, {
          value: 'name',
          label: '项目负责人姓名'
        }, {
          value: 'companyName',
          label: '项目负责人单位'
        }, {
          value: 'email',
          label: '项目负责人邮箱'
        }, {
          value: 'phone',
          label: '项目负责人电话'
        }, {
          value: 'userInfoName',
          label: '使用人姓名'
        }, {
          value: 'projectName',
          label: '项目名称'
        }, {
          value: 'projectNumber',
          label: '项目编号'
        }, {
          value: 'majorField',
          label: '专业领域'
        }, {
          value: 'projectCycleBegin',
          label: '项目起止时间'
        }, {
          value: 'otherDemand',
          label: '其他需求'
        },
      ],
      tableHeaderList: [
        'createAt',
        'email',
        'name',
        'companyName',
        'applyNumber',
        'orderTitle',
        'name',
        'companyName',
        'email',
        'phone',
        'userInfoName',
        'projectName',
        'projectNumber',
        'majorField',
        'projectCycleBegin',
        'otherDemand'
      ],

    }
  },
  mounted() {
    this.getList()
  },
  methods: {
    /** 导出按钮操作 */
    handleExport() {
      this.download('/cs/csResourceOrderApply/export', {
        ...this.queryParams
      }, `资源申请_${new Date().getTime()}.xlsx`)
    },
    /** 查询资源、工单申请列表 */
    getList() {
      this.loading = true;
      this.showSearch=false
      this.queryParams.params = {};
      if (null != this.dateRange && '' != this.dateRange) {
        this.queryParams["beginCreateAt"] = this.dateRange[0];
      this.queryParams["endCreateAt"] = this.dateRange[1];
      }
      listCsResourceOrderApply(this.queryParams).then(response => {
        this.csResourceOrderApplyList = response.rows;
        console.log(this.csResourceOrderApplyList)
        this.total = response.total;
        this.loading = false;
      });
    },
    handleSearch() {
      this.queryParams={}
      this.showSearch = !this.showSearch
    },
    handleUpdate(row) {
      // this.reset();
      const applyId = row.applyId || this.ids
      console.log(row)
      if (row.applyType == '1') {
        this.$store.commit('SET_workOrderId', { applyId, type: 0 });
        this.$router.push({ name: 'workOrderApplication', params: { applyId } })
      } else {
        this.$router.push({ name: 'hpcApplication', params: { applyId } })
      }
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      const applyIds = row.applyId || this.ids;
      this.$modal.confirm('是否确认删除资源、工单申请编号为"' + applyIds + '"的数据项？').then(function () {
        return delCsResourceOrderApply(applyIds);
      }).then(() => {
        this.getList();
        this.$modal.msgSuccess("删除成功");
      }).catch(() => { });
    },
    reset() {
      this.queryParams = {
        pageNum: 1,
        pageSize: 10,
        applyType: '0',
        applyNumber: '',
        resourceClassName: '',
        projectName: '',
        name: '',
        phone: '',
        applyStatus: ''
      }
      Object.assign(this.$data, this.$options.data());
      this.getList()
    },
  },
}
</script>

<style scoped>
.formStyle {
  width: 86%;
  display: flex;

  flex-wrap: wrap;
}

.formStyle ::v-deep .el-form-item {
  width: 100%;
  margin-bottom: 10px;
}

.formStyle ::v-deep .el-form-item__label {
  font-size: 14px;
  color: #333333;
  font-weight: normal;
}

.formStyle ::v-deep .el-form-item__content {
  width: 70%;
}

.formStyle ::v-deep .el-date-editor {
  width: 100%;
}

.formStyle ::v-deep .el-select {
  width: 100%;
}

#step2 {
  height: auto;
}

.tableData {
  padding: 10px;
  height: auto;
  margin-top: 12px;
  background-color: #FFFFFF;
}

::v-deep .headerClassName {
  /*padding: 8px !important;
  background: #D6E3F6 !important;*/
}

.searchForm {
  width: 650px;
  padding: 20px;
  position: absolute;
  left: 200px;
  z-index: 100;
  background-color: #FFFFFF;
  border: 1px solid #777777;
}
</style>
