<template>
  <div>
    <div class="bigBox" :style="{ height: bigHeight }">
      <MOSTY.FromPage :title="props.title" @closeDialog="CloseEvent">
        <template #content>
          <el-form :model="data.dialogForm" label-width="140px" :rules="rules" ref="ruleFormRef"
            :disabled="!props.saveBtnShow">
            <el-form-item label="活动名称：" prop="activityname">
              <el-input v-model="data.dialogForm.activityname" maxlength="100" autosize type="textarea" show-word-limit
                style="width: 450px" placeholder="不能超过100个字" />
            </el-form-item>
            <el-form-item label="活动地点：" prop="activitysite">
              <el-input v-model="data.dialogForm.activitysite" maxlength="300" autosize type="textarea" show-word-limit
                style="width: 450px" placeholder="不能超过300个字" />
            </el-form-item>
            <el-form-item label="参与人员：">
              <el-input v-model="data.dialogForm.participationpeople" readonly autosize type="textarea"
                style="width: 450px">
              </el-input>
              <el-button style='margin-left:10px;' @click="ChooesDdld('01')">选择</el-button>
            </el-form-item>
            <!-- <el-form-item label="参与人员：">
              <el-input v-model="data.dialogForm.participationpeople" maxlength="100" autosize type="textarea"
                show-word-limit style="width: 450px" placeholder="不能超过100个字" />
            </el-form-item> -->
            <el-form-item label="开始日期:" prop="starttime">
              <el-date-picker v-model="data.dialogForm.starttime" type="date" style="width: 450px"
                value-format="YYYY-MM-DD" :disabled-date="disablednowDate1" />
            </el-form-item>
            <el-form-item label="结束日期:" prop="endtime">
              <el-date-picker v-model="data.dialogForm.endtime" type="date" style="width: 450px"
                value-format="YYYY-MM-DD" :disabled-date="disabledjsrq" />
            </el-form-item>
            <el-form-item label="活动内容：">
              <el-input v-model="data.dialogForm.activitycontent" style="width: 450px" />
            </el-form-item>
            <el-form-item label="注解：">
              <el-input v-model="data.dialogForm.zj" type="textarea" row="10" style="width: 450px" />
            </el-form-item>
            <el-form-item label="备注：">
              <el-input v-model="data.dialogForm.bz" type="textarea" row="10" style="width: 450px" />
            </el-form-item>
            <el-form-item label="现场活动图片：">
              <MOSTY.Upload v-model="data.dialogForm.pics" :limit="5" :delrow="delrow" :isEdit="fileEdit"
                :ShowfileList="true" @filehandleChange="changeFile" :isImg="true" :disabled="!props.saveBtnShow" />
            </el-form-item>
            <el-form-item label="更多附件：">
              <MOSTY.Upload :widthNumber="450" :limit="20" :nopicer="true" :isImg="false" :ShowfileList="true"
                :placeholder="'请上传pdf,ofd, doc, docx,wps'" :gsgfList="['pdf', 'ofd', 'doc', 'docx', 'wps']"
                v-model="data.dialogForm.files" :showinput="true" :delrow="delrow"></MOSTY.Upload>
            </el-form-item>
          </el-form>
        </template>
        <template #footer>

          <el-button type="primary" v-loading='loading' @click="save(ruleFormRef)" v-if="props.saveBtnShow">
            <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>
    <ChooseUser v-model="chooseUserVisible" :Single="singleShow" :leaderid="leaderid" :data="memberList"
      :deptId="props.orgcode" @choosedUsers="getSonValue"></ChooseUser>
  </div>
</template>

<script setup>
// 引入
import { reactive, onMounted, ref, defineProps, watch, watchEffect, getCurrentInstance } from "vue";
import { filterYear } from "@/utils/auth.js";
import ChooseUser from "@/components/MyComponents/ChooseUser/Leader.vue";
import { ElMessage } from "element-plus";
import { disablednowDate1 } from '@/utils/tools.js'
import { getApi, deleteApi, putApi, postApi } from "@/api/tobAcco_api.js";
import * as MOSTY from "@/components/MyComponents/index";
const emits = defineEmits(["close"]);
const { proxy } = getCurrentInstance();
const props = defineProps({
  saveBtnShow: {
    default: true,
    type: Boolean
  },
  title: String,
  orgcode: String,
  rowId: {
    default: {},
    type: Object
  }
});
const rules = reactive({
  activityname: [{ required: true, message: "请输入活动名称", trigger: "change" }],
  activitysite: [{ required: true, message: "请输入活动地点", trigger: "change" }],
  starttime: [{ required: true, message: "请选择是否属于剧毒品", trigger: "change" }],
  endtime: [{ required: true, message: "请选择是否属于易制毒品", trigger: "change" }],
});
// 数据
const singleShow = ref(true); //单选多选
const chooseUserVisible = ref(false);
const bigHeight = ref(); //整个高度
const memberList = ref([]); //成员选择的id回显
const data = reactive({
  dialogForm: {}
});
const fileEdit = ref(true);
// 方法
const zzlx = ref(null);
watchEffect(() => {
  if (props.rowId) {
    getDataxq(props.rowId)
  }
});
watch(
  () => props.saveBtnShow,
  (val) => {

  }
);
onMounted(() => {
  bigHeightFn();
});
function disabledjsrq(time) {
  return time.getTime() + 24 * 60 * 60 * 1000 < new Date(data.dialogForm.starttime).getTime()
}
//获取详情
function getDataxq(id) {
  getApi(
    {},
    "/mosty-jcgl/supervisionactivity/getSupervisionactivityById/" + id
  ).then((res) => {
    if (res) {
      data.dialogForm = res;
    }
  });
}
function ChooesDdld(val) {
  zzlx.value = val;
  memberList.value = data.dialogForm.participationpeopleid ? data.dialogForm.participationpeopleid.split(',') : []

  chooseUserVisible.value = true;
  singleShow.value = false;
}
const getSonValue = (value) => {
  let arr = [];
  let arrid = [];
  for (let i = 0; i < value.length; i++) {
    const element = value[i];
    element.zzlx = zzlx.value;
    arr.push(element.userName + "(" + element.deptName + ")");
  }
  memberList.value = value.map((item) => {
    return item.id;
  });
  data.dialogForm.participationpeople = value.map((item) => {
    return item.userName;
  });
  data.dialogForm.participationpeople = arr.toString();
  data.dialogForm.participationpeopleid = value.map((item) => {
    return item.id;
  }).toString();
};
const bigHeightFn = () => {
  bigHeight.value = window.innerHeight - 147 + "px";
};
const ruleFormRef = ref();
const loading = ref(false)
const save = async (ruleFormRef) => {
  if (!ruleFormRef) return;
  await ruleFormRef.validate((valid) => {
    if (valid) {
      loading.value = true
      data.dialogForm.files = data.dialogForm.files ? data.dialogForm.files.toString() : null;
      data.dialogForm.pics = data.dialogForm.pics ? data.dialogForm.pics.toString() : null;
      if (props.title === "监督活动新增") {
        let params = data.dialogForm;
        postApi(
          params,
          "/mosty-jcgl/supervisionactivity/add"
        )
          .then((res) => {
            ElMessage.success("新增成功");
            emits("close");
            loading.value = false
          }).catch((err) => {
            loading.value = false;
          })

      }
      if (props.title === "监督活动修改") {
        let params = data.dialogForm;
        postApi(
          params,
          "/mosty-jcgl/supervisionactivity/edit"
        )
          .then((res) => {
            ElMessage.success("修改成功");
            emits("close");
            loading.value = false
          }).catch((err) => {
            loading.value = false;
          })

      }
    } else {
      ElMessage.error("请输入必填项!");
    }
  });
};
// 新的文件上传返回
const changeFile = (row) => {
  // dialogForm.value.files = row
  // dialogForm.value.files = row.map((item) => {
  //   return item.response.data;
  // });

};
//关闭综合配置表
const CloseEvent = () => {
  if (props.saveBtnShow) {
    proxy.$modal.confirm('离开会丢失页面中修改的内容，确认离开吗？')
      .then(() => {
        // 关闭上一次的表单校验
        ruleFormRef.value.clearValidate();
        emits("close");
      })
      .catch(() => {
        // catch error
      })
  } else {
    // 关闭上一次的表单校验
    ruleFormRef.value.clearValidate();
    emits("close");
  }

};

</script>

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

}

.el-form {
  display: block !important;

  .el-form-item {
    width: 600px;
    margin: 0 auto;
    margin-top: 10px;
  }
}

::v-deep .el-form-item__content {
  flex-wrap: nowrap !important;
}
</style>