<template>
  <div class="doc-page">
    <h3 class="page-title" style="margin: 24px 0 16px;">项目变更申请表</h3>
    <table>
      <tbody>
        <tr>
          <td class="doc-label">研发项目名称</td>
          <td class="doc-input">
            <project-select v-model="currProjectId" @change="handleProjectChange" :disabled="disabled"></project-select>
          </td>
          <td class="doc-label">研发项目编号</td>
          <td class="doc-input">{{ selProject.xmbh }}</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.xmsqdw }}</td>
        </tr>

        <tr>
          <td class="doc-label">变更类型</td>
          <td class="doc-input" colspan="3">
            <avue-select
              v-model="formData.zdmc"
              placeholder="请选择"
              :dic="changeTypeList"
              style="width: 100%"
              :disabled="disabled"
            ></avue-select>
          </td>
        </tr>

        <tr>
          <td class="doc-label">变更前</td>
          <td class="doc-input">
            <span v-if="!disabled">{{ selProject[formData.zdmc == 'xmfzr' ? 'xmfzrxm' : formData.zdmc] }}</span>
            <span>{{ formData.bgqdz }}</span>
          </td>
          <td class="doc-label">变更后</td>
          <td class="doc-input">
            <el-input v-if="formData.zdmc === 'xmmc'" placeholder="请输入项目名称" v-model="formData.bghdz" :disabled="disabled" />
            <el-date-picker
              v-if="'xmkssj,xmjssj'.indexOf(formData.zdmc) > -1"
              v-model="formData.bghdz"
              format="yyyy年MM月dd日"
              value-format="yyyy-MM-dd"
              placeholder="请选择日期"
              style="width: 100%"
              :disabled="disabled"
            ></el-date-picker>
            <avue-select
              v-if="formData.zdmc === 'xmfzr'"
              v-model="formData.bghdz"
              placeholder="请选择"
              :dic="fzrList"
              style="width: 100%"
              :disabled="disabled"
            ></avue-select>
          </td>
        </tr>
        
        <tr>
          <td class="doc-label">变更原因说明</td>
          <td class="doc-input" colspan="3">
            <el-input v-model="formData.bgyy" type="textarea" :rows="3" :disabled="disabled" />
          </td>
        </tr>

        <tr>
          <td class="doc-label">变更生效时间</td>
          <td class="doc-input" colspan="3">
            <el-date-picker
              v-model="formData.bgsxsj"
              format="yyyy年MM月dd日"
              value-format="yyyy-MM-dd"
              placeholder="请选择日期"
              style="width: 100%"
              :disabled="disabled"
            ></el-date-picker>
          </td>
        </tr>

        <tr>
          <td class="doc-label">附件上传</td>
          <td class="doc-input" colspan="3" style="text-align: left;">
            <avue-upload
              v-if="!disabled"
              action="/api/kd-resource/oss/endpoint/put-file"
              dataType="object"
              :props-http="{
                url: 'link',
                name: 'originalName',
                res: 'data',
              }"
              type="upload"
              v-model="formData.attachment"
              style="margin: 14px 0 14px 12px;"
              :disabled="disabled"
              :uploadPreview="handleUploadPreview"
            ></avue-upload>
            <div v-else>
              <div v-for="(item, index) of formData.attachment" :key="index" style="line-height: 26px; padding: 6px;">
                <el-link @click="handleDownFile(item)">{{ item.label }}</el-link>
              </div>
            </div>
          </td>
        </tr>
      </tbody>
    </table>

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

<script>
import { getDictionary } from "@/api/system/dictbiz";
import { getList as getTechnicanRosterList } from "@/api/basicResource/technicianRoster";
import { save } from "@/api/projectManage/change";
import moment from "moment";
import projectSelect from "@/components/project-select";

export default {
  props: {
    projectId: [String, Number],
    data: Object,
    disabled: {
      type: Boolean,
      type: false
    }
  },
  components: {
    projectSelect
  },
  data() {
    return {
      currProjectId: '',
      formData: {
        attachment: []
      },
      changeTypeList: [],
      loading: false,
      selProject: {},

      fzrList: [],
    };
  },
  watch: {
    "formData.zdmc"(newVal) {
      if (newVal == 'xmfzr') {
        this.getTechnicanRosterListFunc(moment(this.selProject.xmkssj).format('yyyyMM'));
      }
    }
  },
  mounted() {
    this.getDictList("xm_biangeng_field", "changeTypeList");
    this.currProjectId = this.projectId;

    this.formData = {
      ...this.data,
    };
    console.log(this.formData.attachment)
  },
  methods: {
    /**
     * 获取人员花名册
     */
    getTechnicanRosterListFunc(yearAndMonth) {
      getTechnicanRosterList(1, 99999, { yearAndMonth }).then(res => {
        if (res.data.success) {
          this.fzrList = res.data.data.records.map(item => {
            return { label: item.name, value: item.id };
          });
        }
      });
    },
    getDictList(code, toListKey) {
      getDictionary({ code }).then((res) => {
        this[toListKey] = res.data.data.map((item) => {
          return { label: item.dictValue, value: item.dictKey };
        });
      });
    },
    handleProjectChange(data) {
      this.selProject = data;
    },
    validForm() {
      let errorText = '';
      if (!this.currProjectId) {
        errorText = '请选择变更的项目';
      } else if (!this.formData.zdmc) {
        errorText = '请选择变更类型';
      } else if (!this.formData.bgyy) {
        errorText = '请输入变更原因';
      } else if (!this.formData.bgsxsj) {
        errorText = '请选择变更生效时间';
      } else if (!this.formData.bghdz) {
        errorText = '请输入变更后的值';
      }

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

      const params = {
        ...this.formData,
        bgqdz: this.selProject[this.formData.zdmc],
        attachment: JSON.stringify(this.formData.attachment),
        xmId: this.currProjectId
      };

      this.saveData(params);
    },
    saveData(params) {
      save(params).then(({ data }) => {
        if (data.code == 200) {
          this.$message.success("保存成功!");
          this.$emit("success");
        }
      });
    },
    handleDownFile(file) {
      window.open(file.value);
    },
    handleUploadPreview (file, column, done) {
      window.open(file.url, "_blank");
      return;
    },
  },
};
</script>

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

.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;
}
</style>
