<template>
  <div v-if="props.modelValue">
    <div class="bigBox">
      <MOSTY.FromPage :title="props.title" @closeDialog="CloseEvent">
        <template #content>
          <div class="Box pt20 pb20">
            <el-form ref="ruleFormRef" :model="FromData" label-width="120px" class="demo-ruleForm" status-icon
              :inline="true" :rules="rules">
              <el-form-item label="部门：" prop="depname">
                <el-input v-model="FromData.depname" style="width: 240px" :disabled="true"></el-input>
              </el-form-item>
              <el-form-item label="姓名：" prop="username">
                <el-input v-model="FromData.username" style="width: 250px" :disabled="true"></el-input>
              </el-form-item>
              <el-form-item label="添加时间：" prop="addtime">
                <el-input v-model="FromData.addtime" style="width: 753px" :disabled="true"></el-input></el-form-item>
              <el-form-item label="建议内容：" prop="jycontent">
                <el-input v-model="FromData.jycontent" :rows="6" style="width: 753px" type="textarea"></el-input>
              </el-form-item>
              <el-form-item label="回复：">
                <el-input v-model="FromData.pjcontent" placeholder="请输入" style="width: 753px"
                  type="textarea"></el-input>
              </el-form-item>
              <el-form-item label="状态：">
                <el-radio-group v-model="FromData.status" style="width: 753px" :disabled="props.type == '1'">
                  <el-radio label="1">采用</el-radio>
                  <el-radio label="2">弃用</el-radio>
                </el-radio-group>
              </el-form-item>
            </el-form>
          </div>

        </template>
        <template #footer>

          <el-button type="primary" @click="addHander(ruleFormRef)">
            <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,
  reactive,
  defineProps,
  defineEmits,
  watchEffect,
  getCurrentInstance
} from "vue";
import * as MOSTY from "@/components/MyComponents/index";
import { postApi } from "@/api/tobAcco_api.js";
const { proxy } = getCurrentInstance();
const props = defineProps({
  //显示
  modelValue: Boolean,
  // 标题 
  title: {
    default: "",
    type: String
  },
  //操作类型
  type: String,
  //详情信息
  detail: Object
});
const emits = defineEmits(["update:modelValue"])
const rules = reactive({
  depname: [
    { required: true, message: "部门不能为空", trigger: "blur" }
  ],
  username: [
    { required: true, message: "姓名不能为空", trigger: "blur" }
  ],
  addtime: [{ required: true, message: "添加时间不能为空", trigger: "blur" }],
  jycontent: [
    { required: true, message: "建议内容不能为空", trigger: "blur" }
  ],
});
const ruleFormRef = ref();
const FromData = ref({

});

onMounted(() => {

});


//关闭
const CloseEvent = () => {
  proxy.$modal.confirm('离开会丢失页面中修改的内容，确认离开吗？')
    .then(() => {
      emits("update:modelValue", false);
    })
    .catch(() => {
      // catch error
    })

};
//保存
const addHander = async (ruleFormRef) => {
  if (!ruleFormRef) return;
  await ruleFormRef.validate((valid) => {
    if (valid) {
      if (FromData.value.status != 0) {
        if (!FromData.value.pjcontent) {
          proxy.$message.waring("请输入回复内容")
          return
        }
      }
      postApi(FromData.value, "/mosty-jcgl/suggest/updateSuggestOne").then(res => {
        proxy.$message.success("成功")
        emits("update:modelValue", false);
      })
    }
  })
}

watchEffect(() => {
  FromData.value = props.detail
})
</script>

<style lang="scss" scoped>
.bigBox {
  display: block;

}

.Box {
  margin: 0 auto;

  width: 1100px;
  color: black;
  font-size: 20px;
  margin-top: 31px;
  max-height: 75vh;
  overflow-y: scroll;
}

::v-deep .el-collapse {
  padding: 20px !important;
}

::v-deep .el-form-item--default .el-form-item__content {
  line-height: 32px;
  color: #000;
  display: flex !important;
}

::v-deep .el-form--inline .el-form-item {
  margin: 9px 71px;
  display: inline-flex;
  vertical-align: middle;
  /* margin-right: 143px; */
  /* display: flex; */
  justify-content: space-between;
}

::v-deep .el-textarea.is-disabled .el-textarea__inner {
  color: #474545;
}

.el-radio__input.is-disabled .el-radio__inner {
  background-color: none !important;
}

.from_box {
  width: 100%;
  margin: 0 auto;
}

.demo-ruleForm {
  display: block;
}

.txbj {
  display: flex;
  font-size: #000;
}
</style>
