<template>
  <div class="app-container" v-loading="loading">
    <el-form
      :model="queryParams"
      ref="queryForm"
      size="small"
      :inline="true"
      v-show="showSearch"
      label-width="110px"
    >
      <el-form-item label="项目名称" prop="name">
        <el-input
          v-model="queryParams.name"
          clearable
          style="width: 240px"
        />
      </el-form-item>
    <!-- TODO：后端未定义字段 -->
      <!-- <el-form-item label="项目责任单位" prop="key2">
        <el-input
          v-model="queryParams.key2"
          clearable
          style="width: 240px"
        />
      </el-form-item>
      <el-form-item label="项目阶段" prop="stage">
        <el-select v-model="queryParams.stage">
          <el-option v-for="(name, key) in PROJECT_STAGE_DICT" :key="key" :label="name" :value="Number(key)"></el-option>
        </el-select>
      </el-form-item> -->
      <el-form-item label="技术领域" prop="field">
        <el-select v-model="queryParams.field">
          <el-option v-for="(name, key) in FIELD_DICT" :key="key" :label="name" :value="Number(key)"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="开展形式" prop="expandFrom">
        <el-select v-model="queryParams.expandFrom">
          <el-option v-for="(name, key) in EXPAND_FORM_DICT" :key="key" :label="name" :value="Number(key)"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="项目类型" prop="type">
        <el-select v-model="queryParams.type">
          <el-option v-for="(name, key) in PROJECT_TYPE_DICT" :key="key" :label="name" :value="Number(key)"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="项目来源" prop="source">
        <el-select v-model="queryParams.source">
          <el-option v-for="(name, key) in PROJECT_SOURCE_DICT" :key="key" :label="name" :value="Number(key)"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="项目起止时间" prop="dateRange">
        <el-date-picker
          v-model="queryParams.dateRange"
          type="daterange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          value-format="yyyy-MM-DD"
        >
        </el-date-picker>
      </el-form-item>
      <el-form-item label="计划年份" prop="year">
        <el-date-picker
          v-model="queryParams.year"
          type="year"
          placeholder="选择年份"
          value-format="yyyy"
        >
        </el-date-picker>
      </el-form-item>
      <el-form-item label="审核状态" prop="status">
        <el-select v-model="queryParams.status">
          <el-option v-for="(name, key) in APPROVE_STATUS_DICT" :key="key" :label="name" :value="Number(key)"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="onSearch">
          搜索
        </el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="onReset">重置</el-button>
      </el-form-item>
    </el-form>

    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button type="primary" icon="el-icon-plus" size="mini" @click="handleAddClick">
          新增
        </el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button type="primary" plain icon="el-icon-upload" size="mini" @click="handleUploadClick">
          导入
        </el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button plain icon="el-icon-download" size="mini" @click="handleExport">
          导出
        </el-button>
      </el-col>
      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
    </el-row>

    <el-table :data="listData" border>
      <el-table-column label="序号" type="index" align="center">
        <template slot-scope="scope">
          <span>{{ scope.$index + 1 }}</span>
        </template>
      </el-table-column>
      <el-table-column label="项目名称" align="center" prop="name" />
      <el-table-column label="计划年份" align="center" prop="year" />
      <el-table-column label="技术领域" align="center" prop="field">
        <template slot-scope="{ row }">
          <span>{{ FIELD_DICT[row.field] }}</span>
        </template>
      </el-table-column>
      <el-table-column label="开展形式" align="center" prop="expandFrom">
        <template slot-scope="{ row }">
          <span>{{ EXPAND_FORM_DICT[row.expandFrom] }}</span>
        </template>
      </el-table-column>
      <el-table-column label="项目类型" align="center" prop="type">
        <template slot-scope="{ row }">
          <span>{{ PROJECT_TYPE_DICT[row.type] }}</span>
        </template>
      </el-table-column>
      <el-table-column label="项目来源" align="center" prop="source">
        <template slot-scope="{ row }">
          <span>{{ PROJECT_SOURCE_DICT[row.source] }}</span>
        </template>
      </el-table-column>
      <el-table-column label="项目阶段" align="center" prop="stage">
        <template slot-scope="{ row }">
          <span>{{ PROJECT_STAGE_DICT[row.stage] }}</span>
        </template>
      </el-table-column>
      <el-table-column label="项目预计金额（万元）" align="center" prop="amount" />
      <el-table-column label="操作" align="center" prop="operate">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="text"
            icon="el-icon-edit"
            @click="handleEditClick(scope.row)"
          >
            编辑
          </el-button>
          <el-button
            size="mini"
            type="text"
            icon="el-icon-delete"
            @click="handleDelClick(scope.row)"
          >
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />

    <el-dialog :title="dialogTitle" :visible.sync="visible" width="800px" append-to-body>
      <el-form ref="form" :model="form" label-width="120px" :rules="rules">
        <el-form-item label="项目名称" prop="name">
          <el-input v-model="form.name" placeholder="请输入" />
        </el-form-item>
        <el-form-item label="开展形式" prop="expandFrom">
          <el-select v-model="form.expandFrom">
            <el-option v-for="(name, key) in EXPAND_FORM_DICT" :key="key" :label="name" :value="Number(key)"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="项目类型" prop="type">
          <el-select v-model="form.type">
            <el-option v-for="(name, key) in PROJECT_TYPE_DICT" :key="key" :label="name" :value="Number(key)"></el-option>
          </el-select>
        </el-form-item> 
        <el-form-item label="项目类型" prop="source">
          <el-select v-model="form.source">
            <el-option v-for="(name, key) in PROJECT_SOURCE_DICT" :key="key" :label="name" :value="Number(key)"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="项目计划起止时间" prop="dateRange">
          <el-date-picker
              v-model="form.dateRange"
              type="daterange"
              range-separator="至"
              start-placeholder="开始时间"
              end-placeholder="截止时间"
              value-format="yyyy-MM-DD">
            </el-date-picker>
        </el-form-item> 
        <el-form-item label="计划年份" prop="year">
          <el-date-picker
            v-model="form.year"
            type="year"
            placeholder="选择年份"
            value-format="yyyy"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item label="技术领域" prop="field">
          <el-select v-model="form.field">
            <el-option v-for="(name, key) in FIELD_DICT" :key="key" :label="name" :value="Number(key)"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="项目阶段" prop="stage">
          <el-select v-model="form.stage">
            <el-option v-for="(name, key) in PROJECT_STAGE_DICT" :key="key" :label="name" :value="Number(key)"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="项目预计金额（万元）" prop="amount">
          <el-input-number v-model="form.amount" :min="0" />
        </el-form-item> 
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>

    <!-- 数据导入对话框 -->
    <el-dialog
      :title="uploads.title"
      :visible.sync="uploads.open"
      width="400px"
      append-to-body
    >
      <el-upload
        ref="uploads"
        :limit="1"
        accept=".xlsx, .xls"
        :headers="uploads.headers"
        :action="uploads.url + '?updateSupport=' + uploads.updateSupport"
        :disabled="uploads.isUploading"
        :on-progress="handleFileUploadProgresss"
        :on-success="handleFileSuccesss"
        :auto-upload="false"
        drag
      >
        <i class="el-icon-upload"></i>
        <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
        <div class="el-upload__tip text-center" slot="tip">
          <span>仅允许导入xls、xlsx格式文件。</span>
        </div>
      </el-upload>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitFileForms">确 定</el-button>
        <el-button @click="uploads.open = false">取 消</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>
import { getToken } from "@/utils/auth";
import * as reserveProjectApplyService from "@/api/reserveProjectManage/reserveProjectApply";
// 技术领域字典
const FIELD_DICT = {
  0: "其他",
  1: "食品饮料",
  2: "建筑建材",
  3: "家居用品",
  4: "轻工纺织",
  5: "化学化工",
  6: "新能源",
  7: "机械",
  8: "环保和资源",
  9 : "安全防护",
  10: "交通运输",
  11: "橡胶塑料",
  12: "仪器仪表"
};

// 开展形式字典
const EXPAND_FORM_DICT = {
  1: "自研",
  2: "合作"
};

// 项目类型字典
const PROJECT_TYPE_DICT = {
  1: "研发项目",
  2: "立项项目"
};

// 项目来源字典
const PROJECT_SOURCE_DICT = {
  1: "内部",
  2: "外部"
};

// 项目阶段字典
const PROJECT_STAGE_DICT = {
  0: "概念验证阶段",
  1: "技术验证阶段",
  2: "试点应用阶段",
  3: "商业化推广阶段",
  4: "生态扩展阶段"
};

const APPROVE_STATUS_DICT = {
  0: "草稿",
  1: "待审核",
  2: "已审核",
};

export default {
  name: "ReserveProjectApply",
  data() {
    return {
      // 遮罩层
      loading: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 表单参数
      form: {},
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
      },
      listData: [],
      visible: false,
      formData: {},
      dialogTitle: "新增",
      // 技术领域枚举
      FIELD_DICT,
      // 开展形式枚举
      EXPAND_FORM_DICT,
      PROJECT_TYPE_DICT,
      PROJECT_SOURCE_DICT,
      PROJECT_STAGE_DICT,
      APPROVE_STATUS_DICT,
      rules: {
        name: { required: true, message: "请输入项目名称" }
      },

      // 数据导入参数
      uploads: {
        // 是否显示弹出层
        open: false,
        // 弹出层标题
        title: "",
        // 是否禁用上传
        isUploading: false,
        // 是否更新已经存在的用户数据
        updateSupport: 0,
        // 设置上传的请求头部
        headers: { Authorization: "Bearer " + getToken() },
        // 上传的地址
        url: process.env.VUE_APP_BASE_API + "/system/reserveProject/importData",
      },
    };
  },
  mounted() {
    this.getList();
  },
  methods: {
    handleQuery() {},
    getList() {
      const params = { ...this.queryParams };
      if (params.dateRange && params.dateRange.length) {
        params.startTime = params.dateRange[0];
        params.endTime = params.dateRange[1];
      }
      delete params.dateRange;
      this.loading = true;
      reserveProjectApplyService.listData(params).then(res => {
        this.loading = false;
        if (res.code == 200) {
          this.listData = res.rows;
          this.total = res.total;
        }
      }).catch(err => {
        this.loading = false;
      });
    },
    onSearch() {
      this.getList();
    },
    onReset() {
      this.queryParams = {};
      this.getList();
    },
    btnClick() {
      this.$message.warning("功能建设中...");
    },
    saveOrUpdateData() {
      let func = this.form.id ? reserveProjectApplyService.updateData: reserveProjectApplyService.addData;
      let operateMsg = this.form.id ? "修改" : "新增";
      const params = { ...this.form };
      if (params.dateRange && params.dateRange.length) {
        params.startTime = params.dateRange[0];
        params.endTime = params.dateRange[1];
      }
      delete params.dateRange;
      func(params).then(res => {
        if (res.code == 200) {
          this.$message.success(operateMsg + "成功!");
          this.cancel();
          this.getList();
        }
      });
    },
    handleAddClick() {
      this.visible = true;
    },
    handleEditClick(rowData) {
      this.visible = true;
      this.form = { ...rowData, dateRange: [] };
      if (this.form.startTime && this.form.endTime) {
        this.form.dateRange = [this.form.startTime, this.form.endTime];
      }
    },
    submitForm() {
      this.$refs.form.validate(valid => {
        if (valid) {
          this.saveOrUpdateData();
        }
      })
    },
    cancel() {
      this.visible = false;
      this.form = {};
      this.resetForm("form");
    },
    handleDelClick(rowData) {
      this.$modal
        .confirm('是否确认删除项目名称为"' + rowData.name + '"的数据项？')
        .then(function () {
          return reserveProjectApplyService.delData(rowData.id);
        })
        .then(() => {
          this.getList();
          this.$modal.msgSuccess("删除成功");
        })
        .catch(() => {});
    },
    handleUploadClick() {
      this.uploads.open = true;
      this.uploads.title = "数据导入";
    },
    handleExport() {
      const params = { ...this.form };
      if (params.dateRange && params.dateRange.length) {
        params.startTime = params.dateRange[0];
        params.endTime = params.dateRange[1];
      }
      this.download( "system/reserveProject/export", { ...params }, `储备项目列表_${new Date().getTime()}.xlsx`);
    },
    handleFileUploadProgresss(event, file, fileList) {
      this.uploads.isUploading = true;
    },
    handleFileSuccesss(response, file, fileList) {
      if (response.code == 500) {
        this.uploads.isUploading = false;
        this.$refs.uploads.clearFiles();
        this.$modal.msgError(response.msg);
        return;
      }
      this.uploads.open = false;
      this.uploads.isUploading = false;
      this.$refs.uploads.clearFiles();
      // this.handleImports();
    },
    submitFileForms() {
      this.$refs.uploads.submit();
    },
  },
};
</script>

<!-- <style lang="scss">
.el-date-editor--daterange.el-input, .el-date-editor--daterange.el-input__inner, .el-date-editor--timerange.el-input, .el-date-editor--timerange.el-input__inner {
  width: 220px;
}
</style> -->
