<template>
  <div class="container-accountability">
    <el-form ref="formData" :model="formData" label-width="150px">
      <el-row>
        <h3 style="text-align: center">{{ this.$route.query.pfbmc }}</h3>
        <el-row>
          <el-col :span="24">
            <el-form-item
              label="考核通知书正文："
              prop="khtzszw"
              :rules="[
                {
                  required: true,
                  message: '请输入正文',
                  trigger: 'blur',
                },
              ]"
            >
              <quill-editor
                :disabled="isShow"
                v-model="formData.khtzszw"
                ref="myQuillEditor"
                id="myQuillEditor"
              ></quill-editor>
            </el-form-item>
          </el-col>
        </el-row>
        <!-- <el-col :span="24">
              <el-form-item label="发布单位：" prop="fbdw">
                <el-input
                  v-model="fbdw"
                  autocomplete="off"
                  :disabled="true"
                ></el-input>
              </el-form-item>
            </el-col> -->
        <el-row>
          <el-col :span="24" class="tzdx">
            <el-form-item label="发布对象：" required>
              已选择{{ fbdw && fbdw.length }}个
              <span class="seeCLa" v-if="seeFlag" @click="seeFun(false)"
                >查看全部</span
              >
              <span class="seeCLa" v-if="!seeFlag" @click="seeFun(true)"
                >收起</span
              >
            </el-form-item>
          </el-col>
        </el-row>
        <el-row v-if="!isShow">
          <el-col :span="24">
            <el-form-item
              prop="fbdw"
              :rules="[
                {
                  required: true,
                  message: '请添加发布对象',
                  trigger: 'blur',
                },
              ]"
            >
              <div
                style="
                  border: 1px solid;
                  height: 25px;
                  padding: 15px;
                  overflow: hidden;
                  cursor: pointer;
                "
                id="tzdxDom"
                @click="choose()"
              >
                <span
                  v-if="fbdw.length == 0"
                  style="
                    color: #666;
                    margin-top: -24px;
                    display: block;
                    margin-left: -10px;
                  "
                  >添加</span
                >
                <span
                  v-for="item in fbdw"
                  style="
                    display: inline-block;
                    margin-right: 10px;
                    margin-bottom: 10px;
                  "
                >
                  <el-tag>{{ item }}</el-tag>
                </span>
              </div>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row v-else>
          <el-col class="zdqyCl">
            <el-col :span="24" v-if="!isShow">
              <el-form-item>
                <el-cascader-panel
                  ref="cascaderAddr"
                  :options="kdOptions"
                  v-model="fbdw"
                  @change="casChangeFn()"
                  :disabled="isShow"
                  :props="{
                    multiple: true,
                    emitPath: false,
                    checkStrictly: true,
                    value: 'orgName',
                    label: 'orgName',
                    children: 'children',
                  }"
                >
                </el-cascader-panel>
              </el-form-item>
            </el-col>
            <el-col :span="24" v-else>
              <el-form-item>
                <div
                  style="border: 1px solid; padding: 15px; overflow-y: auto"
                  id="tzdxDom"
                >
                  <span
                    v-for="item in fbdw"
                    style="
                      display: inline-block;
                      margin-right: 10px;
                      margin-bottom: 10px;
                    "
                  >
                    <el-tag>{{ item }}</el-tag>
                  </span>
                </div>
              </el-form-item>
            </el-col>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24" class="upload-plan" style="margin-top: 20px">
            <el-form-item label="上传附件：" required>
              <el-upload
                v-if="!isShow"
                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="isShow"
              >
                <span @click="viewFileFun(item.id)" style="cursor: pointer">{{
                  item.name
                }}</span>
              </el-row>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="">
              <el-button
                size="small"
                type="primary"
                class="outButton"
                @click="khbFlag = !khbFlag"
                >{{ !khbFlag ? "查看考核表" : "隐藏考核表" }}</el-button
              >
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24" v-show="khbFlag">
            <el-table
              :data="khpfbList"
              stripe
              border
              fit
              highlight-current-row
              style="width: 100%"
              :header-cell-style="headerStyle"
              :span-method="objectSpanMethod"
            >
              <!-- <el-table-column prop="khnra" align="center" label="考核内容"> -->
              <el-table-column prop="khnra" align="center" label="考核内容">
              </el-table-column>
              <el-table-column prop="khnrb" align="center" label="考核内容">
              </el-table-column>
              <!-- </el-table-column> -->

              <el-table-column prop="pfbz" align="center" label="评价标准">
              </el-table-column>
              <el-table-column prop="pfxz" align="center" label="评价细则">
              </el-table-column>
              <el-table-column prop="fz" align="center" label="分值">
              </el-table-column>
            </el-table>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12" style="margin-top: 5px">
            <el-form-item label="发布人：" prop="fbr">
              <el-input
                v-model="formData.fbr"
                autocomplete="off"
                :disabled="true"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="发布时间：" prop="fbsj">
              <el-date-picker
                v-model="formData.fbsj"
                style="width: 100%"
                :disabled="true"
                value-format="yyyy-MM-dd HH:mm:ss"
                format="yyyy-MM-dd HH:mm:ss"
                type="date"
                placeholder="选择日期"
              ></el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row style="text-align: center; margin-top: 20px">
          <span>
            <el-button
              type="primary"
              size="small"
              v-show="!isShow"
              class="iconfont icontijiao"
              @click="handleSave()"
              >发送</el-button
            >
            <el-button
              type="primary"
              size="small"
              class="iconfont iconfanhui"
              @click="retrunList"
              >返回</el-button
            >
          </span>
        </el-row>
      </el-row>
    </el-form>

    <el-dialog title="通知对象" :visible.sync="dialogVisibleDx" width="70%">
      <tree-transfer
        ref="insideChooseProject"
        :datas="treeTransferData"
        :defaultProps="defaultProps"
        :checkedList="treeChecked"
      ></tree-transfer>

      <span slot="footer" style="text-align: center" class="dialog-footer">
        <el-button @click="dialogVisibleDx = false" size="small"
          >取 消</el-button
        >
        <el-button
          style="padding: 9px 15px !important"
          type="primary"
          @click="sureLb"
          size="small"
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>
    
  <script>
import {
  updateKhpgg,
  listGroupOrg,
  getKhpgDetail,
  fileInfo,
} from "@/api/evaluationMan/index";
import { files } from "@/api";
import quillConfig from "@/utils/quill-config.js";
import treeTransfer from "./treeTransfer.vue";
import { dateTimeFormat } from "@/utils/index";

export default {
  data() {
    return {
      khbFlag: false,
      isShow: false,
      uploadUrlBc: `${files}/file/upload`, //上传地址
      fileList1Bc: [],
      formData: {
        fbzt: "",
        fbr: sessionStorage.getItem("userName"),
        fbsj: dateTimeFormat(new Date()),
        khtzszw: "",
        fbdw: sessionStorage.getItem("deptName"),
        pfbgfjid: "",
      },
      seeFlag: true,
      // 穿梭框默认
      defaultProps: {
        id: "id",
        children: "children",
        label: "label",
        // pCode:"pid"
      },
      // 穿梭框选中数据
      treeChecked: [],
      treeTransferData: [],
      dialogVisibleDx: false,
      xfdwList: [],
      fbdw: [],
      khpfbList: [],
    };
  },
  components: {
    treeTransfer,
  },
  created() {
    if (this.$route.query.id) {
      this.getDetail();
    }
    if (this.$route.query.type == 1) {
      this.isShow = false;
    } else {
      this.isShow = true;
    }
  },
  methods: {
    getDetail() {
      getKhpgDetail(this.$route.query.id).then((res) => {
        if (res.infoCode == 200) {
          this.formData = res.data;

          this.khpfbList = res.data.khpfbList;
          this.fbdw = res.data.fbdw ? res.data.fbdw.split(",") : [];
          // 回显问题附件
          if (this.formData.pfbgfjid) {
            fileInfo(this.formData.pfbgfjid).then((fileRes) => {
              this.fileList1Bc = fileRes.data;
            });
          } else {
            this.fileList1Bc = [];
          }
          if (this.$route.query.type == 1) {
            this.formData.fbr = sessionStorage.getItem("userName");
            this.formData.fbsj = dateTimeFormat(new Date());
            this.formData.khtzszw = "";
            this.formData.fbdw = sessionStorage.getItem("deptName");
          }
        }
      });
    },
    headerStyle({ row, column, rowIndex, columnIndex }) {
      const comStyle = {
        backgroundColor: "#4095e5",
        color: "#333",
        fontSize: "500",
      };
      if (rowIndex === 0) {
        row[0].colSpan = 0; // 将表头第一列和第二列合并，内容展示为第二列的内容
        row[1].colSpan = 2;
        if (columnIndex === 0) {
          // 将表头第一列隐藏
          return {
            display: "none",
            ...comStyle,
          };
        }
      }
      return comStyle;
    },
    // table合并列
    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      if (rowIndex == 0 && columnIndex == 0) {
        return {
          rowspan: 1,
          colspan: 2,
        };
      } else if (rowIndex == 0 && columnIndex == 1) {
        return {
          rowspan: 1,
          colspan: 0,
        };
      } else if (columnIndex == 0 || columnIndex == 1) {
        var spanArr = this.getSpanArr(this.khpfbList, column.property);
        const _row = spanArr[rowIndex];
        const _col = _row > 0 ? 1 : 0;
        return {
          rowspan: _row,
          colspan: _col,
        };
      }
    },
    //处理合并行
    getSpanArr(data, spanKey) {
      var spanArr = [];
      var pos = "";
      for (var i = 0; i < data.length; i++) {
        if (i === 0) {
          spanArr.push(1);
          pos = 0;
        } else {
          // 判断当前元素与上一个元素是否相同
          if (data[i][spanKey] === data[i - 1][spanKey]) {
            spanArr[pos] += 1;
            spanArr.push(0);
          } else {
            spanArr.push(1);
            pos = i;
          }
        }
      }
      return spanArr;
    },
    seeFun(flag) {
      this.seeFlag = flag;
      let dom = document.getElementById("tzdxDom");
      if (flag) {
        dom.style.height = "50px";
      } else {
        dom.style.height = "auto";
      }
    },
    sureLb() {
      this.fbdw = [];
      this.xfdwList = [];
      let arr = this.$refs["insideChooseProject"].getVal();
      console.log(arr, "arr");

      arr.forEach((item) => {
        this.fbdw.push(item.label);
        this.xfdwList.push({
          dwmc: item.label,
          fsfl: item.orgNature,
          orgCode: item.id,
        });
        // this.fbdwbm.push(item.id);
      });

      this.dialogVisibleDx = false;
    },
    choose() {
      // this.fbdw = [];
      // this.fbdwbm = [];
      this.treeTransferData = [];
      listGroupOrg().then((res) => {
        let data = res.data;
        this.all = 0;
        data.forEach((item, index) => {
          if (item.children.length > 0) {
            this.all += item.children.length;
            item.children.forEach((item1) => {
              item1.label = item1.orgName;
              item1.id = item1.orgCode;
            });
          } else {
            this.all += 1;
          }
          item.orgCode = item.orgCode == null ? index : item.orgCode;
          this.treeTransferData.push({
            id: item.orgCode,
            label: item.orgName,
            children: item.children,
          });
        });
      });
      this.dialogVisibleDx = true;
      // this.$refs["insideChooseProject"].getYx()
      this.$refs["insideChooseProject"].getLeft();
      this.$refs["insideChooseProject"].filterText1 = "";
      this.$refs["insideChooseProject"].filterText = "";
    },
    handleSave() {
      this.$refs.formData.validate((valid) => {
        if (valid) {
          if (this.fbdw && this.fbdw.length > 0) {
            if (this.fileList1Bc && this.fileList1Bc.length > 0) {
              this.$confirm("是否确认发送？", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
              })
                .then(() => {
                  this.handleSaveTodo();
                })
                .catch(() => {
                  this.$message({
                    type: "info",
                    message: "已取消提交",
                  });
                });
            } else {
              this.$message.warning("请上传附件");
            }
          } else {
            this.$message.warning("请选择发布对象");
          }
        } else {
          this.$message.warning("请先填写必填项");
        }
      });
    },
    handleSaveTodo() {
      // if (this.fileList1Bc.length > 0) {
      this.formData.pfbgfjid = "";
      let arr = [];
      this.fileList1Bc.forEach((item) => {
        arr.push(item.id ? item.id : item.response.data.id);
      });
      // console.log(this.fileList1Bc, "this.fileList1Bc");
      this.formData.pfbgfjid = arr.join(",");
      // console.log(this.formData.pfbgfjid, "this.formData.fjid");
      //   } else {
      //     this.formData.pfbgfjid = "";
      //   }
      let data = {
        id: this.$route.query.id,
        ...this.formData,
        xfdwList: this.xfdwList,
        zt: "已发布",
      };
      updateKhpgg(data).then((res) => {
        if (res.infoCode == "200") {
          this.$message({
            message: "提交成功！",
            type: "success",
          });
          this.retrunList();
        }
      });
    },
    bohui() {},
    retrunList() {
      this.$router.go(-1);
    },
    onSuccess1Bc(response, file, fileList) {
      console.log(file, fileList, "fileList");
      // if (response.infoCode === 200) {
      //   let arr = {
      //     id: response.data.id,
      //     name: response.data.name,
      //   };
      this.fileList1Bc = fileList;
      // }
    },
    handlePreviewBc(files) {
      window.location.href = `${file}/file/download?id=${
        files.response ? files.response.data.id : files.id
      }`;
      // window.location = `${files}/file/download?id=${this.formInline.bcfj}`;
    },
    handleRemoveBc(file, fileList) {
      this.fileList1Bc = fileList;
    },
    beforeRemove1Bc(file, fileList) {
      // if (this.showLock) {
      //   return false;
      // } else {
      return this.$confirm(`确定移除 ${file.name}？`);
      // }
    },
    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}`;
    },
  },
};
</script>
    
  <style>
</style>
  