<template>
  <div class="doc-page" v-loading="loading">
    <h3 class="page-title" style="margin: 24px 0 16px;">科德集团</h3>
    <h3 class="page-title" style="margin: 24px 0 16px;">研发项目验收资料</h3>

    <div class="project-basic-info">
      <div class="info-row">{{ `研发项目名称：${ selProject.xmmc || '' }` }}</div>
      <div class="info-row">{{ `项目负责人：${ selProject.xmfzrxm || '' }` }}</div>
      <div class="info-row">{{ `项目申请单位：${ selProject.xmsqdw || '' }` }}</div>
      <div class="info-row">{{ `项目执行期：${ getXmDateRange || '' }` }}</div>
      <div class="info-row">
        <span>填报时间：</span>
        <span><el-date-picker v-model="formData.tbsj" value-format="yyyy-MM-dd" /></span>
      </div>
    </div>

    <table style="margin-top: 20px;">
      <tbody>
        <tr>
          <td class="doc-label">研发项目名称</td>
          <td class="doc-input">
            <project-select
              v-model="currProjectId"
              @change="handleProjectChange"
            ></project-select>
          </td>
          <td class="doc-label">项目申请单位</td>
          <td class="doc-input">{{ selProject.xmsqdw }}</td>
        </tr>
        <tr>
          <td class="doc-label">项目负责人</td>
          <td class="doc-input">{{ selProject.xmfzrxm }} </td>
          <td class="doc-label">研究类型</td>
          <td class="doc-input">{{ selProject.yjlx }}</td>
        </tr>

        <tr>
          <td class="doc-label">研发开始时间</td>
          <td class="doc-input">{{ selProject.xmkssj }} </td>
          <td class="doc-label">研发结束时间</td>
          <td class="doc-input">{{ selProject.xmjssj }}</td>
        </tr>

        <tr>
          <td class="doc-label">项目来源</td>
          <td class="doc-input">{{ selProject.xmly }} </td>
          <td class="doc-label">项目开展形式</td>
          <td class="doc-input">{{ selProject.xmkzxs }}</td>
        </tr>

        <tr>
          <td class="doc-label">预期成果形式</td>
          <td class="doc-input">{{ selProject.yqcgxs }} </td>
          <td class="doc-label">项目技术经济目标</td>
          <td class="doc-input">{{ selProject.xmjsjjmb }}</td>
        </tr>

      </tbody>
    </table>

    <avue-form v-model="formData" :option="option" style="margin-top: 30px; padding: 0;">
      <template slot="ysbgLabel">
        <label>验收报告</label>
        <el-link type="primary" style="position: absolute; left: 220px; z-index: 1;">下载模板</el-link>
      </template>
      <template slot="jsbgLabel">
        <label>技术报告</label>
        <el-link type="primary" style="position: absolute; left: 220px; z-index: 1;">下载模板</el-link>
      </template>
      <template slot="cgbgLabel">
        <label>成果报告</label>
        <el-link type="primary" style="position: absolute; left: 220px; z-index: 1;">下载模板</el-link>
      </template>
      <template slot="xybgLabel">
        <label>效益报告</label>
        <el-link type="primary" style="position: absolute; left: 220px; z-index: 1;">下载模板</el-link>
      </template>
      <template slot="yspwLabel">
        <label>验收批文</label>
        <el-link type="primary" style="position: absolute; left: 220px; z-index: 1;">下载模板</el-link>
      </template>
    </avue-form>
    <p class="tip">注：可一次上传多个相关文件（文档、表格、图片等）。 支持格式：DOC, PDF, Excel, PNG, JPG, PPT 等。 请确保文件内容清晰有效。</p>

    <div class="btn-wrap" style="text-align: center; margin-top: 30px;">
      <el-button type="primary" style="width: 160px;" @click="handleSaveBtn">保存</el-button>
    </div>
  </div>
</template>

<script>
import projectSelect from "@/components/project-select";
import { save, getDetail } from "@/api/projectManage/accept";
import moment from "moment";

export default {
  components: {
    projectSelect
  },
  props: {
    projectId: [String, Number]
  },
  data() {
    return {
      formData: {},

      loading: false,
      projectList: [],
      selProject: {},

      currProjectId: '',

      loading: false
    };
  },
  computed: {
    getXmDateRange() {
      if (this.selProject.xmkssj && this.selProject.xmjssj) {
        let xmkssj = moment(this.selProject.xmkssj).format('yyyy年MM月DD日');
        let xmjssj = moment(this.selProject.xmjssj).format('yyyy年MM月DD日')
        return `${xmkssj}至${xmjssj}`;
      }
      return `年 月 日至 年 月 日`;
    },
    option() {
      return {
        menuBtn: false,
        labelWidth: 75,
        column: [
          {
            label: "验收报告",
            prop: "ysbg",
            type: "upload",
            multiple: true,
            span: 24,
            dataType: "object",
            propsHttp: {
              url: "link",
              name: "originalName",
              res: "data",
            },
            action: '/api/kd-resource/oss/endpoint/put-file',
            uploadPreview: (file, column, done) => {
              window.open(file.url, "_blank");
              return;
            },
            disabled: !this.currProjectId
          },
          {
            label: "技术报告",
            prop: "jsbg",
            type: "upload",
            multiple: true,
            span: 24,
            dataType: "object",
            propsHttp: {
              url: "link",
              name: "originalName",
              res: "data",
            },
            action: '/api/kd-resource/oss/endpoint/put-file',
            uploadPreview: (file, column, done) => {
              window.open(file.url, "_blank");
              return;
            },
            disabled: !this.currProjectId
          },
          {
            label: "成果报告",
            prop: "cgbg",
            type: "upload",
            multiple: true,
            span: 24,
            dataType: "object",
            propsHttp: {
              url: "link",
              name: "originalName",
              res: "data",
            },
            action: '/api/kd-resource/oss/endpoint/put-file',
            uploadPreview: (file, column, done) => {
              window.open(file.url, "_blank");
              return;
            },
            disabled: !this.currProjectId
          },
          {
            label: "效益报告",
            prop: "xybg",
            type: "upload",
            multiple: true,
            span: 24,
            dataType: "object",
            propsHttp: {
              url: "link",
              name: "originalName",
              res: "data",
            },
            action: '/api/kd-resource/oss/endpoint/put-file',
            uploadPreview: (file, column, done) => {
              window.open(file.url, "_blank");
              return;
            },
            disabled: !this.currProjectId
          },
          {
            label: "验收批文",
            prop: "yspw",
            type: "upload",
            multiple: true,
            span: 24,
            dataType: "object",
            action: '/api/kd-resource/oss/endpoint/put-file',
            uploadPreview: (file, column, done) => {
              window.open(file.url, "_blank");
              return;
            },
            propsHttp: {
              url: "link",
              name: "originalName",
              res: "data",
            },
            disabled: !this.currProjectId
          },
        ],
      }
    }
  },
  watch: {
    currProjectId() {
      this.getImplementDetail();
    }
  },
  mounted() {
    this.currProjectId = this.projectId || '';
  },
  methods: {
    getImplementDetail() {
      this.loading = true;
      getDetail({ xmId: this.currProjectId, yearAndMonth: this.yearAndMonth }).then(({ data }) => {
        this.loading = false;
        if (data.code == 200 && data.data && Object.keys(data.data).length) {
          this.formData = {
            id: data.data.id,
            xmId: data.data.xmId,
            tbsj: data.data.tbsj,
            ysbg: data.data.ysbg ? JSON.parse(data.data.ysbg) : [],
            jsbg: data.data.jsbg ? JSON.parse(data.data.jsbg) : [],
            cgbg: data.data.cgbg ? JSON.parse(data.data.cgbg) : [],
            xybg: data.data.xybg ? JSON.parse(data.data.xybg) : [],
            yspw: data.data.yspw ? JSON.parse(data.data.yspw) : [],
          };
        } else {
          this.formData = {
            tbsj: '',
            ysbg: [],
            jsbg: [],
            cgbg: [],
            xybg: [],
            yspw: [],
          };
        }
      }).catch(() => {
        this.loading = false;
      });
    },
    handleProjectChange(data) {
      this.selProject = data;
    },
    validForm() {
      let errorText = '';
      if (!this.formData.tbsj) {
        errorText = '请选择填报时间';
      } else if (!this.currProjectId) {
        errorText = '请选择填报的项目';
      }

      return errorText;
    },
    handleSaveBtn() {
      let errorText = this.validForm();
      if (errorText) {
        this.$message.error(errorText+'！');
        return;
      }

      const params = { ...this.formData, xmId: this.currProjectId };
      params.ysbg = JSON.stringify(params.ysbg);
      params.jsbg = JSON.stringify(params.jsbg);
      params.cgbg = JSON.stringify(params.cgbg);
      params.xybg = JSON.stringify(params.xybg);
      params.yspw = JSON.stringify(params.yspw);

      this.saveData(params);
    },
    saveData(params) {
      save(params).then(({ data }) => {
        if (data.code == 200) {
          this.$message.success('保存成功!');
        }
      });
    }
  },
};
</script>

<style lang="scss" scoped>
.page-title {
  text-align: center;
  font-size: 24px;
}

.project-basic-info .info-row {
  line-height: 26px;
  color: #666;
}

.doc-page {
  width: 800px;
  margin: 30px auto;
}
table {
  width: 100%;
  border: 1px solid #333;
}
.doc-label {
  text-align: center;
  padding: 6px;
  color: #777;
  font-size: 14px;
  width: 15%;
}
.doc-input {
  text-align: center;
  color: #333;
  width: 35%;
}

.el-input__inner {
  border: none;
}
tr td {
  border: 1px solid #333;
}

.tip {
  position: relative;
  top: 0;
  color: red;
  padding-left: 75px;
  margin-top: 0;
  font-size: 12px;
}
</style>
