<template>
  <div class="container">
    <header-title :title="title" />
    <div class="form">
      <el-form ref="form" :model="form" :rules="rules" label-width="120px">
        <el-row type="flex" justify="center">
          <el-col :span="colSize">
            <el-form-item
              label="科室名称"
              prop="departmentName"
              label-class-name="labelClass"
            >
              <el-input
                v-model="form.departmentName"
                placeholder="最多30个字"
              />
            </el-form-item>
          </el-col>
          <el-col :span="colSize">
            <el-form-item
              label="科室级别"
              prop="departmentLevel"
              label-class-name="labelClass"
            >
              <el-select
                v-model="form.departmentLevel"
                filterable
                @change="departmentLevelChange"
                placeholder="请选择科室级别"
              >
                <el-option label="一级科室" value="1"> </el-option>
                <el-option label="二级科室" value="2"> </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="colSize">
            <el-form-item
              v-if="form.departmentLevel === '2'"
              label="上级科室"
              prop="parentDepartmentId"
              label-class-name="labelClass"
            >
              <el-select
                v-model="form.parentDepartmentId"
                filterable
                placeholder="请选择上级科室"
              >
                <el-option
                  v-for="item in FirstLevelDepartmentList"
                  :key="item.id"
                  :label="item.departmentName"
                  :value="item.id"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row type="flex" justify="center">
          <el-col :span="colSize">
            <el-form-item
              label="是否重点学科"
              prop="isKeynoteSubject"
              label-class-name="labelClass"
            >
              <el-select
                v-model="form.isKeynoteSubject"
                filterable
                placeholder="请选择"
              >
                <el-option label="否" value="0"> </el-option>
                <el-option label="是" value="1"> </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="colSize">
            <el-form-item
              label="是否重点专科"
              prop="isKeynoteEducation"
              label-class-name="labelClass"
            >
              <el-select
                v-model="form.isKeynoteEducation"
                filterable
                placeholder="请选择"
              >
                <el-option label="否" value="0"> </el-option>
                <el-option label="是" value="1"> </el-option>
              </el-select>
            </el-form-item>
          </el-col>

          <el-col :span="colSize">
            <el-form-item
              label="科室电话"
              prop="departmentPhone"
              label-class-name="labelClass"
            >
              <el-input v-model="form.departmentPhone" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row type="flex" justify="center">
          <el-col :span="colSize">
            <el-form-item
              label="是否特色专科"
              prop="isFeatureEducation"
              label-class-name="labelClass"
            >
              <el-select
                v-model="form.isFeatureEducation"
                filterable
                placeholder="请选择"
              >
                <el-option label="否" value="0"> </el-option>
                <el-option label="是" value="1"> </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="colSize">
            <el-form-item required label="展示图片：" prop="contentImage">
              <upload-img-single v-model="form.contentImage" />
            </el-form-item>
          </el-col>
          <el-col :span="colSize"></el-col>
        </el-row>
        <el-row type="flex" justify="center">
          <el-col :span="colSize * 3">
            <el-form-item
              label="科室介绍"
              prop="departmentText"
              label-class-name="labelClass"
            >
              <div id="richText"></div>
            </el-form-item>
          </el-col>
        </el-row>

        <div class="confirm">
          <el-button type="primary" size="small" @click="submit"
            >确认</el-button
          >
        </div>
      </el-form>
    </div>
  </div>
</template>

<script>
import departmentAPI from "@/api/department";
import HeaderTitle from "@/components/HeaderTitle/index";
import listItemInfo from "@/mixins/listItemInfo";
import E from "wangeditor";
import UploadImgSingle from "@/components/imageUploadSingle/index";

import { type } from "os";
import { uuid } from "@/utils";
import uploadAnyFile from "@/api/uploadAnyFile";
import { getUrl } from "@/config";

export default {
  name: "modifyPw",
  mixins: [listItemInfo],
  components: { HeaderTitle, UploadImgSingle },
  data() {
    return {
      id: this.$route.query.id ?? "",
      activeRefresh: false,
      form: {
        departmentName: "",
        departmentLevel: "",
        parentDepartmentId: "",
        isKeynoteSubject: "",
        isKeynoteEducation: "",
        isFeatureEducation: "",
        departmentPhone: "",
        departmentText: "",
        contentImage: "",
      },
      title: "title",
      colSize: 7,
      rules: {
        departmentName: [
          { required: true, message: "请输入科室名称", trigger: "blur" },
          { min: 0, max: 30, message: "最多30个字", trigger: "blur" },
        ],
        departmentLevel: [
          { required: true, message: "请选择科室级别", trigger: "change" },
        ],
        parentDepartmentId: [
          { required: true, message: "请选择上级科室", trigger: "change" },
        ],
        isKeynoteSubject: [
          { required: true, message: "请选择", trigger: "change" },
        ],
        isKeynoteEducation: [
          { required: true, message: "请选择", trigger: "change" },
        ],
        isFeatureEducation: [
          { required: true, message: "请选择", trigger: "change" },
        ],
        contentImage: [
          {
            required: true,
            trigger: ["blur", "change"],
            message: "请选择展示图片",
          },
        ],
      },
      FirstLevelDepartmentList: [],
    };
  },
  computed: {},
  mounted() {
    this.initWangEditor();
    this.getInfoByIdMethod = departmentAPI.getDepartmentManagementById;
    this.addOrUpdateInfoMethod = departmentAPI.addOrUpdateDepartmentManagement;
    this.initOptions();
    this.$route.query.id ? this.initInfo() : false;
    // console.log("this.$route.query: ", this.$route.query);
    // this.getMechanismsId();
  },
  methods: {
    //初始化所有配置数据
    initOptions() {
      this.getFirstLevelDepartmentManagementList();
    },

    initWangEditor() {
      this.$nextTick(() => {
        //初始化富文本编辑器及其事件
        this.richEditor = new E("#richText");
        this.richEditor.config.zIndex = 2; //编辑器
        this.richEditor.config.showLinkImg = false;
        this.richEditor.config.customUploadImg = function (
          resultFiles,
          insertImgFn
        ) {
          // resultFiles 是 input 中选中的文件列表
          // insertImgFn 是获取图片 url 后，插入到编辑器的方法
          let names = [];
          resultFiles.forEach((file) => {
            names.push(uuid() + file.name);
          });
          uploadAnyFile
            .uploadAnyFile(resultFiles, ["richText"], names)
            .then((res) => {
              // 上传图片，返回结果，将图片插入到编辑器中
              res.forEach((r) => {
                insertImgFn(getUrl() + r);
              });
            });
        };
        this.richEditor.config.menus = [
          "head", // 标题
          "bold", // 粗体
          "fontSize", // 字号
          "fontName", // 字体
          "italic", // 斜体
          "underline", // 下划线
          "strikeThrough", // 删除线
          "indent", // 缩进
          "lineHeight", // 行高
          "foreColor", // 文字颜色
          "backColor", // 背景颜色
          "splitLine", // 分割线
          "link", // 插入链接
          "list", // 列表
          "justify", // 对齐方式
          "quote", // 引用
          "emoticon", // 表情
          "image", // 插入图片
          "table", // 表格
          "video", // 插入视频
          "code", // 插入代码
          "undo", // 撤销
          "redo", // 重复
        ];
        this.richEditor.create();
        this.richEditor.config.onchange = (newHtml) => {
          this.form.departmentText = newHtml;
        };
      });
    },

    afterInitInfo() {
      this.richEditor.txt.html(this.form.departmentText);
    },

    submit() {
      this.$refs["form"].validate((valid) => {
        if (valid) {
          // if (isChange && !!this.id) {
          // console.log('this.form: ', this.form);

          this.addOrUpdateRoles(this.form);
        }
      });
    },

    departmentLevelChange(val) {
      console.log("val: ", val);
      if (val === "1") this.form.parentDepartmentId = "";
    },

    getFirstLevelDepartmentManagementList() {
      let params = { departmentLevel: "1" };
      departmentAPI
        .getDepartmentManagementList(params)
        .then((res) => {
          if (res?.code === 1000) {
            this.FirstLevelDepartmentList = res.data;
          }
        })
        .catch((err) => {});
    },

    addOrUpdateRoles(params) {
      // console.log("params: ", params);
      // return;
      if (!this.id) {
        let loginUser = JSON.parse(localStorage.getItem("mh_userInfo"));
        if (loginUser) params.createUserId = loginUser.id;
      }
      this.addOrUpdateInfo(params, "form");
    },
  },
};
</script>

<style scoped lang="scss">
.container {
  width: 100%;
  height: 100%;

  .jurisdiction-checked-area {
    // border: 1px solid rgb(209, 204, 204);
    // margin-bottom: 5px;
    .checkbox-title {
      background-color: #f0f2f5;
      padding-left: 5px;

      .checkbox-title-text {
        font-size: 20px;
        font-weight: bold;
      }
    }

    .checkbox-area {
      padding-left: 10px;
    }
  }

  .form {
    width: 100%;
    margin: 0 auto;
    padding-top: 3rem;
    padding-bottom: 1rem;
    box-sizing: border-box;

    .confirm {
      display: flex;
      justify-content: center;
      padding-top: 1rem;
      text-align: center;
      margin-bottom: 10px;
    }
  }
}

.el-select {
  width: 100%;
}
</style>
