<template>
  <div>
    <!-- 职称评审 -->
    <div>
      <el-row>
        <el-col :span="1"><div class="grid-content ep-bg-purple" /></el-col>
        <el-col :span="22">
          <div class="grid-content ep-bg-purple-light">
            <div
              style="
                text-align: center;
                width: 100%;
                font-weight: 700;
                font-size: 22px;
              "
            >
              专业技术人员职称评审推荐
            </div>
            <div
              style="
                margin-top: 20px;
                padding-top: 20px;
                border: 1px solid #dcdfe6;
                padding-right: 20px;
                width: 97%;
                text-align: center;
              "
            >
              <el-form
                style="margin-left: 1vw"
                :model="form"
                label-width="120px"
              >
                <div style="display: flex">
                  <el-form-item label="事项名称">
                    <el-input
                      :disabled="deskWork !== undefined"
                      v-model="form.title"
                      placeholder="请输入事项名称"
                      style="width: 15rem"
                    />
                  </el-form-item>
                  <el-form-item style="margin-left: 1vw" label="添加时间">
                    <el-date-picker
                      :disabled="deskWork !== undefined"
                      @change="getTime(form.createTime)"
                      style="width: 15rem"
                      v-model="form.createTime"
                      type="datetime"
                      placeholder="请选择时间"
                    />
                  </el-form-item>
                </div>
                <div style="display: flex">
                  <el-form-item label="添加部门">
                    <el-input
                      :disabled="deskWork !== undefined"
                      v-model="form.deptname"
                      placeholder="请输入所属部门"
                      style="width: 15rem"
                    />
                  </el-form-item>
                  <el-form-item style="margin-left: 1vw" label="添加人员">
                    <el-input
                      :disabled="deskWork !== undefined"
                      v-model="form.createBy"
                      placeholder="请输入人员姓名"
                      style="width: 15rem"
                    />
                  </el-form-item>
                </div>
                <div style="margin-left: 2.5vw">
                  <div
                    style="
                      text-align: center;
                      font-weight: 600;
                      color: #606266;
                      font-size: 15px;
                    "
                  >
                    内控节点
                  </div>
                  <el-table
                    v-loading="loading"
                    :data="oaAleaveNodeList"
                    style="
                      width: 50vw;
                      margin-top: 10px;
                      height: 418px;
                      overflow: auto;
                    "
                  >
                    <el-table-column
                      type="index"
                      label="序号"
                      align="center"
                      width="130"
                    >
                    </el-table-column>
                    <el-table-column
                      prop="nodeName"
                      align="center"
                      label="节点名称"
                      width="250"
                    >
                    </el-table-column>
                    <el-table-column
                      v-if="deskWork !== undefined"
                      align="center"
                      label="附件查看"
                    >
                      <template #default="scope">
                        <div
                          align="left"
                          style="margin-left: 20px"
                          v-for="item in scope.row.files"
                          :key="item"
                        >
                          <div
                            id="hover"
                            style="
                              cursor: pointer;
                              width: 17vw;
                              overflow: hidden;
                              white-space: nowrap;
                              text-overflow: ellipsis;
                            "
                          >
                            <div
                              @click="Preview(item)"
                              style="padding-left: 40px"
                            >
                              <el-icon style="margin-top: 5px"
                                ><Document
                              /></el-icon>
                              {{ item.name }}
                              <!-- <el-icon
                                style="
                                  color: #7cca56;
                                  position: absolute;
                                  right: 20px;
                                  margin-top: 6.5px;
                                "
                                ><CircleCheck
                              /></el-icon> -->
                            </div>
                          </div>
                        </div>
                      </template>
                    </el-table-column>
                    <el-table-column width="40" v-if="deskWork !== undefined">
                      <template #default="scope">
                        <div
                          align="left"
                          style="margin-left: 20px"
                          v-for="item in scope.row.files"
                          :key="item"
                        >
                          <div
                            style="
                              display: inline-block;
                              width: 15px;
                              height: 15px;
                              position: absolute;
                              right: 20px;
                              margin-top: -7px;
                              background-color: #15d36a;
                              border-radius: 50%;
                            "
                          ></div>
                        </div>
                      </template>
                    </el-table-column>
                    <el-table-column v-else align="center" label="节点文件">
                      <template #default="scope">
                        <el-upload
                          v-model:file-list="scope.row.files"
                          class="upload-demo"
                          :headers="upload.headers"
                          :action="upload.url"
                          multiple
                          :on-success="handleSuccessFiles(scope.row)"
                        >
                          <el-button size="small" type="primary"
                            >上传文件</el-button
                          >
                        </el-upload>
                      </template>
                    </el-table-column>
                  </el-table>
                </div>
                <el-form-item
                  v-if="deskWork == undefined"
                  label="运行状态"
                  style="margin-top: 20px"
                  ><el-radio-group v-model="form.status">
                    <el-radio
                      :disabled="deskWork !== undefined"
                      @click.prevent="getCurrentRow(1)"
                      :label="1"
                      >公示中</el-radio
                    >
                    <el-radio
                      :disabled="deskWork !== undefined"
                      @click.prevent="getCurrentRow(0)"
                      :label="0"
                      >已完成</el-radio
                    >
                    <!-- <el-radio :label="2">未公示</el-radio> -->
                  </el-radio-group></el-form-item
                >
                <el-form-item
                  v-else
                  v-model="form.status"
                  label="运行状态"
                  style="margin-top: 20px"
                >
                  <div v-if="form.status == 1">公示中</div>
                  <div v-if="form.status == 0">已完成</div>
                </el-form-item>
                <el-form-item v-if="deskWork == undefined">
                  <div
                    style="
                      text-align: center;
                      margin-top: 20px;
                      margin-left: 14vw;
                    "
                  >
                    <el-button
                      style="padding: 0 40px"
                      type="primary"
                      @click="onSubmit"
                      >保 存</el-button
                    >
                  </div>
                  <!-- <el-button>Cancel</el-button> -->
                </el-form-item>
              </el-form>
            </div>
          </div>
        </el-col>
        <el-col :span="6"><div class="grid-content ep-bg-purple" /> </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
import {
  listCatagory,
  getCatagory,
  delCatagory,
  addCatagory,
  updateCatagory,
} from "@/api/aleave/catagory";
import {
  listAleaves,
  getAleaves,
  delAleaves,
  addAleaves,
  updateAleaves,
} from "@/api/aleave/aleaves";
import { Base64 } from "js-base64";
import { getToken } from "@/utils/auth";
import { addAleave } from "@/api/aGodGod/submitEdit";
import { getInfo } from "@/api/login";
export default {
  name: "YinetoaWjwWebIndex",
  props: ["Id1", "deskWork"],
  data() {
    return {
      loading: true,
      form: {
        files: [],
        status: null,
        id: this.$route.query.id,
        title: "",
        createTime: "",
        deptname: "",
      },
      // Id: null,
      files: [],
      upload: {
        headers: { Authorization: "Bearer " + getToken() },
        url: import.meta.env.VITE_APP_BASE_API + "/system/file/fileupload",
      },
      value1: "",
      queryParams: {
        pageSize: 10,
        pageNum: 1,
      },
      catagoryList: [],
      oaAleaveNodeList: [],
      nodeList: [],
      id: null,
      filesArray: null,
    };
  },
  created() {
    this.getList();
    this.getInfo();
    this.currentTime();
  },
  watch: {
    Id1: {
      handler(newValue, oldValue) {
        if (newValue) {
          this.Id = newValue;
          this.getList();
        }
      },
      deep: true,
      immediate: true,
    },
  },
  mounted() {
    // this.$nextTick(() => {
    //   this.Id = null;
    // });
  },

  methods: {
    currentTime() {
      var date = new Date();
      this.form.createTime = date;
      this.getTime(this.form.createTime);
    },
    //基本信息
    async getInfo() {
      let { user } = await getInfo();
      this.form.deptname = user.dept.deptName;
      this.form.createBy = user.nickName;
    },
    Preview(item) {
      // var url = "http://192.168.3.213:9000/public" + item.path;
      // var b64Encoded = Base64.encode(url);
      // window.open(
      //   "http://192.168.3.213:8201/onlinePreview?url=" +
      //     encodeURIComponent(b64Encoded)
      // );
      var url = import.meta.env.VITE_APP_KKFILE1 + item.path;
      var b64Encoded = Base64.encode(url);
      window.open(
        import.meta.env.VITE_APP_KKFILE2 + encodeURIComponent(b64Encoded)
      );
    },
    getList() {
      listCatagory(this.queryParams).then((response) => {
        this.catagoryList = response;
        this.id = response.rows[0].id;
        this.editOrheadleUpdate();
        this.form.title = response.rows[0].title;
      });
    },
    //节点数据
    async handleUpdate() {
      let response = await getCatagory(this.id);

      this.oaAleaveNodeList = response.data.oaAleaveNodeList;
      this.loading = false;
      if (this.$route.query.id !== undefined || this.Id !== undefined) {
        this.edit();
      } else {
      }
    },
    editOrheadleUpdate() {
      this.handleUpdate();
    },
    //编辑
    edit() {
      const _id = this.$route.query.id || this.Id;

      getAleaves(_id).then((response) => {
        this.form = response.data;
        let filesNode = response.data.file;
        for (let i = 0; i < filesNode.length; i++) {
          for (let j = 0; j < this.oaAleaveNodeList.length; j++) {
            if (filesNode[i].nodeId == this.oaAleaveNodeList[j].nodeId) {
              this.oaAleaveNodeList[j]["files"] = filesNode[i].yfiles;
            }
          }
        }
        // });
      });
    },

    reset() {
      this.form = {
        id: null,
        files: [],
        status: null,
        title: "",
        createTime: "",
        deptname: "",
        createBy: "",
      };
      this.getList();
    },
    getCurrentRow(row) {
      if (this.form.status === row) {
        this.form.status = "";
        return;
      }
      // 不是选中，选中当前点击 Radio
      this.form.status = row;
      // 选中操作
    },
    handleSuccessFiles(row) {},

    getTime(time) {
      var date = new Date(time);
      var y = date.getFullYear();
      var m = date.getMonth() + 1;
      m = m < 10 ? "0" + m : m;
      var d = date.getDate();
      d = d < 10 ? "0" + d : d;
      var h = date.getHours();
      h = h < 10 ? "0" + h : h;
      var minute = date.getMinutes();
      minute = minute < 10 ? "0" + minute : minute;
      var s = date.getSeconds();
      s = s < 10 ? "0" + s : s;

      this.form.createTime =
        y + "-" + m + "-" + d + " " + h + ":" + minute + ":" + s;
      return y + "-" + m + "-" + d + " " + h + ":" + minute + ":" + s;
    },
    async onSubmit() {
      // 合并上传的数据

      const combinedData = [];
      this.form.catagory = this.id;
      this.oaAleaveNodeList.forEach((row) => {
        if (row.files !== undefined) {
          for (let i = 0; i < row.files.length; i++) {
            // this.filesArray = row.files.map((v) => {
            //   return v.response.data.path;
            // });

            if (row.files[i].response == undefined) {
              this.filesArray = row.files[i].fileId;
            } else {
              this.filesArray = row.files[i].response.data.fileId;
            }

            combinedData.push({
              nodeId: row.nodeId,
              files: this.filesArray,
            });
          }
        }
      });

      this.form.files = combinedData;
      // 输出合并后的数据

      let { code } = await addAleave(this.form);
      if (code == 200) {
        if (this.$route.query.id !== undefined) {
          this.$modal.msgSuccess("编辑成功");
          this.form.id = this.$route.query.id;
        } else {
          this.$modal.msgSuccess("保存成功");
          this.reset();
          this.getInfo();
          this.currentTime();
          this.$route.query.id = undefined;
          this.Id = undefined;
        }
      }
    },
    //获取token
    getToken() {
      return getToken();
    },
  },
};
</script>

<style lang="scss" scoped>
#hover :hover {
  // background-color: #ebf5ff;
  color: #409eff;
}
</style>
