<template>
  <div>
    <div class="bigBox" :style="{ height: bigHeight }">
      <MOSTY.FromPage :title="props.title" @closeDialog="CloseEvent">
        <template #content>
          <div class="titpl">{{ dialogForm.planName }}</div>
          <div v-if="isShowfrom">
            <el-form :model="wcjhFrom" ref="ruleFormRef2" width="1000px" label-width="140px" :disabled="false"
              :rules="rules2" style="display: block; width:80%;padding: 10px 20px;margin: 0 auto;">
              <el-form-item label="项目名称：" style="width: 79%;" class="mt15">
                <el-input v-model="dialogForm.name" disabled />
              </el-form-item>
              <el-form-item label="年度工作任务：" style="width: 79%;" class="mt15">
                <el-input v-model="dialogForm.workContent" disabled />
              </el-form-item>
              <el-form-item label="完成时限：" style="width: 30%;" class="mt15">
                <el-date-picker v-model="dialogForm.finishTime" type="data" format="YYYY-MM-DD"
                  value-format="YYYY-MM-DD" style="width: 100%;" disabled>
                </el-date-picker>
              </el-form-item>
              <el-form-item label="项目说明：" prop="description" style="width: 79%;" class="mt15">
                <el-input v-model="wcjhFrom.description" type="textarea" autosize />
              </el-form-item>
              <el-form-item label="附件：" prop="files" style="width: 79%;" class="mt15">
                <MOSTY.Upload :widthNumber="640" :nopicer="true" :isImg="false" :ShowfileList="true"
                  v-model="wcjhFrom.files" :limit="5" :showinput="true" :placeholder="'请上传pdf,ofd, doc, docx,wps'"
                  :gsgfList="['pdf', 'ofd', 'doc', 'docx', 'wps']" />
              </el-form-item>
            </el-form>
          </div>
        </template>
        <template #footer>

          <el-button type="primary" @click="savewc(ruleFormRef2)" v-if="props.Plantype == 'wczj'" :loading="loading">
            <el-icon>
              <DocumentChecked />
            </el-icon>
            <span>保存</span>
          </el-button>
          <el-button type="primary" @click="CloseEvent">
            <el-icon>
              <DocumentDelete />
            </el-icon><span>返回</span>
          </el-button>

        </template>
      </MOSTY.FromPage>
    </div>
  </div>
</template>

<script setup>
// 引入
import { onMounted, ref, defineProps, getCurrentInstance, reactive } from "vue";
import { ElMessage } from "element-plus";
import { getItem } from "@/utils/storage";
import { getApi, postApi } from "@/api/tobAcco_api.js";
import * as MOSTY from "@/components/MyComponents/index";
const emits = defineEmits(["close"]);
const { proxy } = getCurrentInstance();
const ruleFormRef2 = ref(null)
const planName = ref(`${getItem("deptId").ssdwmc}${new Date().getFullYear()}年安全生产工作计划（要点）`)
const isShowfrom = ref(true)
const zzlx = ref(0)
const rules2 = reactive({
  description: [{ required: true, message: "请输入项目说明", trigger: "blur" }],
  files: [{ required: true, message: "请选择附件", trigger: "blur" }],
})
const props = defineProps({
  saveBtnShow: {
    default: true,
    type: Boolean
  },
  title: String,
  xplanId: String,
  Plantype: String,
  id: String,
  rwid: String,
});
// 数据
const bigHeight = ref(); //整个高度
const rowObj = ref(null)
const loading = ref(false); //新增保存按钮截流
const showfb = ref(false);
const wcjhFrom = ref({});
const dialogForm = ref({});

// 初始化
onMounted(() => {
  bigHeightFn();
  if (props.id) {
    wcjhFrom.value.id = props.xplanId;
    getxxqData(props.id)
  }
});


// 方法
const bigHeightFn = () => {
  bigHeight.value = window.innerHeight - 147 + "px";
};
//获取详情

function getxxqData(id) {
  getApi({ planId: id, id: props.xplanId }, '/mosty-jcgl/plansummary/queryInfo').then(res => {
    dialogForm.value = res

  })
}
// 关闭
const CloseEvent = () => {
  if (props.Plantype == 'wczj') {
    proxy.$modal.confirm('离开会丢失页面中修改的内容，确认离开吗？')
      .then(() => {
        emits("close");
      })
      .catch(() => {
        // catch error
      })
  } else {
    emits("close");
  }

};


//完成
const savewc = async (ruleFormRef2) => {
  loading.value = true
  if (!ruleFormRef2) return;
  await ruleFormRef2.validate((valid) => {
    if (valid) {
      wcjhFrom.value.files = wcjhFrom.value.files ? wcjhFrom.value.files.toString() : null;
      postApi(wcjhFrom.value, '/mosty-jcgl/plansummary/finish').then(res => {
        ElMessage.success("保存成功");
        loading.value = false;
        let params = {
          id: props.rwid,
          sfyd: "1",
          clzt: "02"
        };
        //修改任务状态
        postApi(params, "/mosty-jcgl/rw/updateRw")
          .then((res) => {
            emits("close");
          });

      }).catch(() => {
        loading.value = false;
      })
    } else {
      loading.value = false;
      ElMessage.warning('请输入必填项！！！')
    }
  })
}
</script>

<style lang="scss" scoped>
.red {
  text-align: right;
  color: red;
}

.black {
  // text-align: right;
  color: #000;
  width: 140px;
}

.el-form-item {
  margin-right: 10px;
}

.bigBox {
  .titpl {
    width: 100%;
    text-align: center;
    color: #000;
    font-size: 18px;
    margin-top: 10px;
  }

  .title {
    height: 60px;
    line-height: 60px;
    font-size: 18px;
    color: #0f3916;
  }

  .right {
    width: 100%;
    padding: 10px;
    box-sizing: border-box;
  }

  .btnBox {
    display: flex;
  }
}

.tab-top {
  display: flex;
  justify-content: space-between;
  margin: 10px auto;

  >div {
    >span {
      color: #000;
      font-size: 15px;
      margin-right: 20px;
    }
  }
}

.dialog-box {
  z-index: 3 !important;
}
</style>