<template>
  <a-modal :title="title" :open="visible" @cancel="closeModal" width="1380px" :footer="false">
    <a-tabs v-model="tabsVisible" type="card" @tabClick="tabIndexChange">
      <a-tab-pane key="info" tab="基础信息填报">
        <a-form ref="form" :model="formData" :label-col="{span: 4}" :wrapper-col="{span: 14}" :rules="rules">
          <a-form-item label="项目大类" prop="projectCategories">
            <a-input v-model:value="formData.projectCategories" disabled/>
          </a-form-item>
          <a-form-item label="项目小类" prop="projectSubcategories">
            <a-input v-model:value="formData.projectSubcategories" disabled/>
          </a-form-item>
          <a-form-item label="总投资" prop="totalInvestment">
            <a-input v-model:value="formData.totalInvestment" disabled/>
          </a-form-item>
          <a-form-item label="完成投资" prop="completeInvestment">
            <a-input v-model:value="formData.completeInvestment" :disabled="openType && isCompletedOrNot" style="width: 85%;"/>
            <a-button @click="getUpdateRecords" type="primary">投资修改记录</a-button>
          </a-form-item>
          <a-form-item label="是否完工" prop="">
            <a-checkbox :checked="completedOrNot" @change="getCompletedOrNot">是</a-checkbox>
          </a-form-item>
          <a-form-item label="年份" prop="">
            <a-input v-model:value="formData.objYear" :disabled="openType && isCompletedOrNot" />
          </a-form-item>
          <a-form-item label="项目开工时间" prop="projectStartTime">
            <a-date-picker v-model:value="formData.projectStartTime" format="YYYY-MM-DD" value-format="YYYY-MM-DD" :disabled="openType && isCompletedOrNot"/>
          </a-form-item>
          <a-form-item label="计划完工时间" prop="projectEndTime">
            <a-date-picker v-model:value="formData.projectEndTime" format="YYYY-MM-DD" value-format="YYYY-MM-DD" :disabled="openType && isCompletedOrNot" />
          </a-form-item>
          <a-form-item :wrapper-col="{ span: 14, offset: 4 }">
            <a-button @click="submitForm" type="primary">保存</a-button>
            <a-button @click="closeModal">取消</a-button>
          </a-form-item>
        </a-form>

        <a-modal title="投资修改记录" :open="isRecords" @cancel="isRecords = false" width="600px" :footer="false">
          <a-timeline v-if="updateRecordsData.length > 0">
            <a-timeline-item v-for="item in updateRecordsData" :key="item.id">
              <p style="font-size: 18px; font-weight: bold;">{{ item.intm }}</p>
              <p><span style="font-weight: bold;">{{ item.persName }}</span> 完成投资资金: <span style="font-weight: bold;">{{ item.oldInvest }}</span>(元) 修改至: <span style="font-weight: bold;">{{ item.newInvest }}</span>(元)</p>
            </a-timeline-item>
          </a-timeline>
          <div v-else>暂无修改记录</div>
        </a-modal>
      </a-tab-pane>
      <a-tab-pane key="problem" tab="督查发现问题填报" :disabled="formData.status != '1'">
        <problemList
          :currentObjectRgstrId="currentObjectRgstrId"
          :currentObjectName="currentObjectName"
          :currentResCode="currentResCode"
          :currentObjectId="currentObjectId"
          :activeLabel="activeLabel"
          :pType="pType"
          :rowData="currentRowData"
          :openType="openType"
          :labelList="signatureLabelList"
          @cancelHandler="closeModal"
          @addShuiKuSuccess="addShuiKuSuccess"
          :flag="flag"></problemList>
      </a-tab-pane>
    </a-tabs>
  </a-modal>
</template>

<script>
import moment from 'moment';
import request from '@/utils/gw_ajax_request';
import problemList from '../commonProblemList';
export default {
  props: [
    'rowData',
    'currentObjectRgstrId',
    'currentResCode',
    'currentObjectId',
    'currentObjectName',
    'pType',
    'openType',
    'flag',
    'isQuanFuGai',
    'currentResName',
  ],
  data() {
    return {
      moment,
      title: `${this.currentResName}督查填报`,
      visible: false,
      formData: {
        projectCategories: '', // 项目大类
        projectSubcategories: '', // 项目小类
        totalInvestment: '', // 总投资
        completeInvestment: '', // 完成投资
        projectStartTime: null, // 项目开工时间
        projectEndTime: null, // 计划完工时间
        objYear: '', // 年份
      },
      rules: {
        projectCategories: [
          { required: true, message: '项目大类不能为空', trigger: 'blur' },
        ],
        projectSubcategories: [
          { required: true, message: '项目小类不能为空', trigger: 'blur' },
        ],
        totalInvestment: [
          { required: true, message: '总投资不能为空', trigger: 'blur' },
        ],
        completeInvestment: [
          { required: true, message: '完成投资不能为空', trigger: 'blur' },
        ],
        projectStartTime: [
          {
            required: true,
            message: '项目开工时间不能为空',
            trigger: 'change',
          },
        ],
        projectEndTime: [
          {
            required: true,
            message: '计划完工时间不能为空',
            trigger: 'change',
          },
        ],
      },
      tabsVisible: 'info',
      activeLabel: '',
      currentRowData: {},
      signatureLabelList: ['督查人员'],
      isCompletedOrNot: false,
      completedOrNot: false,
      updateRecordsData: [],
      isRecords: false,
    };
  },
  components: {
    problemList,
  },
  created() {},
  mounted() {
    this.currentRowData = this.rowData;
  },
  methods: {
    getData() {
      const params = {
        objCode: this.currentResCode,
      };
      request
        .post(`/bis/insp/bisInspProjectInfo/getInfoByObjId`, params)
        .then((res) => {
          if (res.success) {
            const { data } = res;
            this.formData = data;
            this.completedOrNot =
              data.completedOrNot && data.completedOrNot != '0';
            this.isCompletedOrNot = this.completedOrNot;
          }
        });
    },
    submitForm() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          const params = {
            id: this.formData.id,
            objCode: this.formData.objCode,
            projectCategories: this.formData.projectCategories,
            projectSubcategories: this.formData.projectSubcategories,
            totalInvestment: this.formData.totalInvestment,
            completeInvestment: this.formData.completeInvestment,
            projectStartTime: this.formData.projectStartTime,
            projectEndTime: this.formData.projectEndTime,
            objYear: this.formData.objYear,
            completedOrNot: this.completedOrNot == true ? '1' : '0',
            status: '1',
          };
          request
            .post(`/bis/insp/bisInspProjectInfo/update`, params)
            .then((res) => {
              if (res.success) {
                this.$message.success('保存成功!');
                // this.formData.status = '1'
                this.$emit('closeModal');
              } else {
                this.$message.error(res.message);
              }
            });
        } else {
          return false;
        }
      });
    },
    openModal() {
      this.visible = true;
      this.getData();
    },
    closeModal() {
      this.$confirm({
        title: '提示',
        content: '确认退出吗？',
        okType: 'warning',
        onOk: () => {
          this.$emit('closeModal');
        },
      });
    },
    addShuiKuSuccess(obj) {
      if (obj && obj.type) {
        this.currentRowData.type = obj.type;
      }
      this.$emit('addShuiKuSuccess');
    },
    tabIndexChange(item) {
      if (item == '问题清单') {
        this.activeLabel = item;
      } else {
        this.activeLabel = '';
      }
    },
    getCompletedOrNot(e) {
      this.completedOrNot = e.target.checked;
    },
    getUpdateRecords() {
      this.isRecords = true;
      request
        .post(`/bis/insp/ProjectInvestAmount/getList`, {
          projectId: this.formData.id,
        })
        .then((res) => {
          this.updateRecordsData = res.data;
        });
    },
  },
};
</script>

<style lang='less' scoped>

</style>
