<template>
  <div class="mainView">
    <bread-crumb />
    <div class="contentBox">
      <articleModule :article="articleDetali">
        <div class="articleInfo">
          <span class="title"
            >[征集部门]
            <span> {{ filterData(articleDetali.unitName) }}</span></span
          >
          <span class="title"
            >[开始时间] <span> {{ articleDetali.startTime }}</span></span
          >
          <span class="title"
            >[结束时间] <span> {{ articleDetali.endTime }}</span></span
          >
          <span class="title"
            >[征集状态]
            <span> {{ articleDetali.progressStatusName }}</span></span
          >
        </div>
      </articleModule>
      <div class="leaveWords">
        <div class="letterModule" v-if="articleDetali.progressStatus == '1'">
          <span class="publish">请发表你的看法</span>
          <el-form
            :model="formData"
            ref="ruleFormRef"
            :formData="formData"
            label-width="120"
            :rules="rules"
          >
            <el-form-item label="昵称" prop="nickname">
              <el-input
                size="large"
                v-model="formData.nickname"
                placeholder="请填写昵称"
              />
            </el-form-item>
            <el-form-item label="内容" prop="content">
              <el-input
                type="textarea"
                size="large"
                :rows="5"
                placeholder="请填写内容"
                v-model="formData.content"
              />
            </el-form-item>
            <el-form-item label="手机号" prop="mobileNumber">
              <el-input
                size="large"
                v-model="formData.mobileNumber"
                placeholder="请填写手机号"
              />
            </el-form-item>
            <el-form-item class="imgCode" label="图形验证码" prop="checkCode">
              <el-input
                size="large"
                maxlength="4"
                v-model="formData.checkCode"
                placeholder="请填写验证码"
              />
              <el-image
                size="large"
                :src="checkCode.imgCode"
                @click="getCodeImg()"
              />
            </el-form-item>
          </el-form>
          <div class="btnBox">
            <el-button
              size="mini"
              type="warning"
              @click="submitLetter(ruleFormRef)"
              >发表</el-button
            >
            <el-button size="mini" @click="resetForm">取消</el-button>
          </div>
        </div>
        <span class="statistics"
          >(共有<b>{{ articleDetali.leaveMsgList.length }}</b
          >人提出意见)
        </span>

        <div class="commentatorBox" v-if="articleDetali.leaveMsgList.length">
          <div
            :key="item.id"
            class="commentator"
            v-for="item in articleDetali.leaveMsgList"
          >
            <p class="letter">
              <span class="name">【{{ item.nickname }}】</span>
              {{ item.content }}
            </p>
            <p class="date">{{ item.createTime }}</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
import api from "@/api/hdjl.js";
import "@/style/hdjl/myDetail.less";
import { useRouter } from "vue-router";
import codeApi from "@/api/captcha.js";
import { ElMessage } from "element-plus";
import { ref, onMounted, reactive } from "vue";
import dictStore from "@/store/dictionary.js"; //引入仓库
import articleModule from "@/components/article/index.vue";
import BreadCrumb from "@/components/breadcrumbModule/index.vue";
import { validateMobile, valiReportCode } from "@/utils/filterRuies.js";
const ruleFormRef = ref();
const unitDict = dictStore().DICT_BM;
const router = useRouter();
const articleId = router.currentRoute.value.query.id;
const formData = reactive({
  mobileNumber: "",
  publicOpinionCollectId: "",
});
const checkCode = reactive({
  code: "",
  imgCode: "",
});
const articleDetali = reactive({
  fileList: [],
  attachments: "",
  leaveMsgList: [],
});

const rules = {
  nickname: [
    {
      required: true,
      trigger: "blur",
      message: "请填写昵称",
    },
  ],
  content: [
    {
      required: true,
      trigger: "blur",
      message: "请填写信件内容",
    },
  ],
  phoneNum: [
    {
      validator: validateMobile,
      trigger: "blur",
    },
  ],
  checkCode: [
    {
      required: true,
      trigger: "blur",
      message: "请填写验证码",
    },
    {
      validator: (rule, value, callback) => {
        valiReportCode(value, callback, checkCode, getCodeImg);
      },
      trigger: "blur",
    },
  ],
};

onMounted(() => {
  getCodeImg();
  getDetalis();
});

// 获取文章详情
function getDetalis() {
  api.popularWilldetail({ id: articleId }).then((res) => {
    if (res.code == 200) {
      let article = res.data.icPublicOpinionCollect;
      articleDetali.title = article.collectionTitle;
      articleDetali.endTime = article.endTime;
      articleDetali.startTime = article.startTime;
      articleDetali.attachments = article.attachments;
      articleDetali.progressStatus = article.progressStatus;
      articleDetali.contentHtml = article.announcementContent;
      articleDetali.unitName = article.ioDepartmentFunctionId;
      articleDetali.leaveMsgList = res.data.icPublicOpinionCollectMessages;
      formData.publicOpinionCollectId = articleId;
      articleDetali.progressStatusName =
        article.progressStatus == 0
          ? "未开始"
          : article.progressStatus == 1
            ? "征集中"
            : "已结束";
    }
  });
}
// 提交
function submitLetter() {
  ruleFormRef.value.validate((valid) => {
    if (valid) {
      api.leaveMessage(formData).then((res) => {
        if (res.code == 200) {
          getDetalis();
          getCodeImg();
          ruleFormRef.value.resetFields();
          ElMessage.success("留言发表成功");
        } else {
          ElMessage.error(res.msg);
        }
      });
    }
  });
}

// 过滤部门
function filterData(data) {
  let name = "";
  unitDict.map((item) => {
    if (item.id == data) {
      name = item.departmentName;
    }
  });
  return name;
}

// 获取图形校验码
function getCodeImg() {
  codeApi.getPicCaptcha().then((res) => {
    checkCode.code = res.data.code;
    checkCode.imgCode = "data:image/png;base64," + res.data.file;
  });
}

function resetForm() {
  ruleFormRef.value.resetFields();
}
</script>
