<template>
  <div class="content-main">
    <el-form
      :model="formData"
      ref="formData"
      label-width="210px"
      :rules="rules"
    >
      <el-row>
        <el-col :span="24">
          <el-form-item label="通知标题：">
            <el-input
              v-model="formData.title"
              autocomplete="off"
              :disabled="btnAction == '详情' || btnAction == '接收'"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="发布日期：" prop="fbrq">
            <el-date-picker
              v-model="formData.fbrq"
              style="width: 100%"
              :disabled="btnAction == '详情' || btnAction == '接收'"
              value-format="yyyy-MM-dd"
              type="date"
              placeholder="选择日期"
            ></el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="发布人：" prop="fqr">
            <el-input
              v-model="formData.fqr"
              autocomplete="off"
              :disabled="true"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="发布单位：" prop="fbdw">
            <el-input
              v-model="formData.fbdw"
              autocomplete="off"
              :disabled="true"
            ></el-input>
          </el-form-item>
        </el-col>
        <!-- <el-col :span="24">
          <el-form-item label="通知对象：" >
            <el-radio
              v-model="formData.fblx"
              label="0"
              @change="tzdxchange"
              :disabled="btnAction == '详情' || btnAction == '接收'"
              >全部</el-radio
            >
            <el-radio
              v-model="formData.fblx"
              label="1"
              @change="tzdxchange"
              :disabled="btnAction == '详情' || btnAction == '接收'"
              >购销公司</el-radio
            >
            <el-radio
              v-model="formData.fblx"
              label="2"
              @change="tzdxchange"
              :disabled="btnAction == '详情' || btnAction == '接收'"
              >承储库</el-radio
            >
            <el-radio
              v-model="formData.fblx"
              label="3"
              @change="tzdxchange"
              :disabled="btnAction == '详情' || btnAction == '接收'"
              >指定企业</el-radio
            >
          </el-form-item>
        </el-col> -->
        <!-- <el-col :span="24">
          <el-form-item label="通知对象：" >
            <div
              style="
                border: 1px solid;
                height: 200px;
                padding: 15px;
                overflow-y: auto;
              "
            >
              <span
                v-for="item in formData.jsdw"
                style="
                  display: inline-block;
                  margin-right: 10px;
                  margin-bottom: 10px;
                "
              >
                <el-tag>{{ item }}</el-tag>
              </span>
            </div>
          </el-form-item>
        </el-col> -->
        <el-col :span="24" class="upload-plan">
          <el-form-item label="通知附件：">
            <!-- <el-upload
                  class="upload-demo"
                  ref="upload"
                  :action="uploadUrlBc"
                  :on-success="onSuccess1Bc"
                  :on-preview="handlePreviewBc"
                  :on-remove="handleRemoveBc"
                  :before-remove="beforeRemove1Bc"
                  :on-exceed="handleExceedBc"
                  :on-error="onError"
                  multiple
                  :file-list="fileList1Bc"
                  :auto-upload="true"
                >
                  <el-button size="small" type="primary" class="outButton">点击上传</el-button>
                </el-upload> -->
            <el-row
              v-for="(item, index) in fileList1Bc"
              :key="index"
              v-if="btnAction == '详情' || btnAction == '接收'"
            >
              <span @click="viewFileFun(item.id)" style="cursor: pointer">{{
                item.name
              }}</span>
            </el-row>
          </el-form-item>
        </el-col>

        <el-col :span="24">
          <el-form-item label="通知详情：" prop="fssj">
            <quill-editor
              :disabled="btnAction == '详情' || btnAction == '接收'"
              v-model="formData.nr"
              ref="myQuillEditor"
              :options="quillOption"
            ></quill-editor>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row class="saveCancel" style="text-align: center">
        <el-col :span="24">
          <div class="grid-content bg-purple">
            <!-- <el-button type="primary" @click="saveBasic('formData')" v-if="btnAction !== '详情'">
                  <i class="iconfont">&#xe683;</i>
                  保存
                </el-button> -->
            <!-- <el-button
              type="primary"
              @click="saveBasic('formData', 'send')"
              v-if="btnAction !== '详情'"
            >
              <i class="iconfont">&#xe6a0;</i>
              接收
            </el-button> -->
            <el-button
              type="primary"
              class="iconfont iconfanhui"
              @click="goBack"
              >返回</el-button
            >
          </div>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>
<script>
import { quillEditor } from "vue-quill-editor";
import quillConfig from "@/utils/quill-config.js";
import {
  getKdListTreeNew,
  getListData,
  detailInfo,
  saveData,
  updateData,
  deleteData,
  sendData,
  viewFile,
  viewFileData,
  viewAllFileData,
} from "@/api/announcement/index";
import { fileDownload, files } from "@/api/index";
export default {
  data() {
    return {
      uploadUrlBc: `${fileDownload}`, //上传地址
      fileList1Bc: [],
      formData: {
        fbzt: "",
        jsdw: "",
        fbrq: "",
      },
      scspName: "",
      scfjName: "",
      dialogVisible: false,
      isImg: false,
      detailLoading: false,
      kdOptions: [],
      gxgsName: [],
      gxgsCode: [],
      cckName: [],
      cckCode: [],
      quillOption: quillConfig,
      activeName: "first",
      tableData: [],
      rules: {
        title: [{ required: true, message: "请输入通知标题", trigger: "blur" }],
        fbrq: [
          { required: true, message: "请选择发布时间", trigger: "change" },
        ],
        fblx: [
          { required: true, message: "请选择通知对象", trigger: "change" },
        ],
      },
      btnAction: "新增",
    };
  },
  components: {
    quillEditor,
  },
  created() {
    getKdListTreeNew().then((res) => {
      res.data.forEach((item) => {
        if (item.children.length == 0) {
          item.children = null;
        } else {
          item.children.forEach((item1) => {
            if (item1.children.length == 0) {
              item1.children = null;
            } else {
              item1.children.forEach((item2) => {
                if (item2.children.length == 0) {
                  item2.children = null;
                }
              });
            }
          });
        }
      });
      this.kdOptions = res.data;
      this.gxgsName = [];
      this.gxgsCode = [];
      this.cckName = [];
      this.cckCode = [];
      this.kdOptions.forEach((item) => {
        if (item.orgType == "10190005") {
          this.gxgsName.push(item.orgName);
          this.gxgsCode.push(item.orgCode);
        } else if (item.orgType == "10190008") {
          this.cckName.push(item.orgName);
          this.cckCode.push(item.orgCode);
        }
        if (item.children) {
          item.children.forEach((item1) => {
            this.cckName.push(item1.orgName);
            this.cckCode.push(item1.orgCode);
          });
        }
      });
    });
    if (this.$route.query.action == "新增") {
      this.btnAction = "新增";
      this.dateFormat();
      this.formData.fqr = sessionStorage.getItem("userName");
      this.formData.fbdw = sessionStorage.getItem("orgName");
    } else if (this.$route.query.action == "接收") {
      this.btnAction = "接收";
      detailInfo(this.$route.query.id).then((res) => {
        this.formData = res;
        this.formData.jsdw = this.formData.jsdw.split(",");
        this.formData.jsdwbm = this.formData.jsdwbm.split(",");
        if (this.formData.fjid) {
          viewAllFileData(this.formData.fjid).then((res) => {
            this.fileList1Bc = res.data;
          });
        } else {
          this.fileList1Bc = [];
        }
        this.saveBasic("formData", "send");
      });
    } else if (this.$route.query.action == "详情") {
      this.btnAction = "详情";
      detailInfo(this.$route.query.id).then((res) => {
        this.formData = res;
        this.formData.jsdw = this.formData.jsdw.split(",");
        this.formData.jsdwbm = this.formData.jsdwbm.split(",");
        if (this.formData.fjid) {
          viewAllFileData(this.formData.fjid).then((res) => {
            this.fileList1Bc = res.data;
          });
        } else {
          this.fileList1Bc = [];
        }
      });
    }

    // this.getInitInfo();
  },
  methods: {
    getInitInfo() {
      this.detailLoading = true;
      helpDetail(this.$route.query.wdId).then((res) => {
        this.formData = res;
        if (res.scfjid) {
          this.getFileFun(res.scfjid, "手册附件");
        }
        if (res.scspid) {
          this.getFileFun(res.scspid);
        }
        this.detailLoading = false;
      });
    },
    getFileFun(ids, mark) {
      getFileInfo(ids).then((res) => {
        if (res.infoCode == 200) {
          if (mark == "手册附件") {
            this.scfjName = res.data[0].name;
          } else {
            this.scspName = res.data[0].name;
            this.isImg = true; //默认的视频图片
          }
        } else {
          this.$message({
            message: res.msg,
            type: "error",
            duration: 2000,
          });
        }
      });
    },
    showVideo() {
      this.dialogVisible = true;
    },
    goBack() {
      this.$router.go(-1);
    },
    tzdxchange(val) {
      this.formData.jsdw = [];
      this.formData.jsdwbm = [];
      if (val == "0") {
        this.formData.jsdw = this.gxgsName.concat(this.cckName);
        this.formData.jsdwbm = this.gxgsCode.concat(this.cckCode);
      } else if (val == "1") {
        this.formData.jsdw = this.gxgsName;
        this.formData.jsdwbm = this.gxgsCode;
      } else if (val == "2") {
        this.formData.jsdw = this.cckName;
        this.formData.jsdwbm = this.cckCode;
      } else if (val == "3") {
      }
    },
    casChangeFn() {
      console.log(this.formData.jsdwbm);
      this.formData.jsdw = [];
      let changeData = "";
      changeData = this.$refs["cascaderAddr"].getCheckedNodes();
      console.log(changeData);
      changeData.forEach((item) => {
        this.formData.jsdw.push(item.label);
      });
    },

    onSuccess1Bc(response, file, fileList) {
      console.log(file);
      if (response.infoCode === 200) {
        let arr = {
          id: response.data.id,
          name: response.data.name,
        };
        this.fileList1Bc.push(arr);
      }
    },
    handlePreviewBc(file) {
      window.location = `${files}/file/download?id=${this.formInline.bcfj}`;
    },
    handleRemoveBc(file, fileList) {},
    beforeRemove1Bc(file, fileList) {
      return this.$confirm(`确定移除 ${file.name}？`, {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        for (let i = 0; i < this.fileList1Bc.length; i++) {
          if (file.fileId == this.fileList1Bc[i].id) {
            this.fileList1Bc.splice(i, 1);
            // this.formData.rectificationNoticeVO.fileVOList.splice(i, 1);
          }
        }
      });
    },
    handleExceedBc(files, fileList) {
      // this.$message.warning(
      //   `当前限制选择1个文件，本次已经选择了 ${files.length} 个文件`
      // );
    },
    onError(err, file, fileList) {
      this.$message({
        message: "上传失败",
        type: "error",
        duration: 2000,
      });
    },
    viewFileFun(fileId) {
      window.location = `${files}/file/download?id=${fileId}`;
    },
    saveBasic(formName, action) {
      // this.$refs[formName].validate((valid) => {
      if (this.btnAction == "接收") {
        // if (valid) {
        let data = {
          noticeId: this.formData.id,
          ckr: sessionStorage.getItem("userName"),
          jsdwbm: sessionStorage.getItem("orgCode"),
        };
        updateData(data)
          .then((response) => {
            if (response.code == 200) {
              // this.$router.go(-1);
              this.$message({
                showClose: true,
                message: "接收成功！",
                type: "success",
              });
            }
          })
          .catch((e) => {});
      } else {
        return false;
      }
      // }
      // });
    },
    dateFormat() {
      let date = new Date();
      let year = date.getFullYear();
      /* 在日期格式中，月份是从0开始的，因此要加0
       * 使用三元表达式在小于10的前面加0，以达到格式统一  如 09:11:05
       * */
      let month =
        date.getMonth() + 1 < 10
          ? "0" + (date.getMonth() + 1)
          : date.getMonth() + 1;
      let day = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
      let hours =
        date.getHours() < 10 ? "0" + date.getHours() : date.getHours();
      let minutes =
        date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();
      let seconds =
        date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
      // 拼接
      // return (year + '-' + month + '-' + day + ' ' + hours + ':' + minutes + ':' + seconds)
      this.formData.fbrq = year + "-" + month + "-" + day;
    },
  },
};
</script>
<style lang="scss" scoped>
.el-form-item {
  margin-bottom: 20px;
  .el-form-item__label {
    // line-height: 30px;
    // color: #333 !important;
  }
  .el-form-item__content {
    // line-height: 30px;
  }
}
.ql-editor {
  min-height: 150px;
}
.ql-toolbar.ql-snow {
  // display: none;
}
.ql-toolbar.ql-snow + .ql-container.ql-snow {
  border-top: 1px solid #ccc !important;
}
</style>
<style>
.upload-plan {
  position: relative;
}
.upload-plan .el-upload-list {
  width: 75%;
}
.upload-plan .view-btn {
  position: absolute;
  right: 0;
  top: 40px;
}
</style>