<template>
  <div>
    <el-row :gutter="15"  append-to-body>
      <el-form ref="elForm" :model="formData" :rules="rules" size="medium" label-width="100px"
        label-position="left">
        <el-col :span="24">
          <el-form-item label="通知标题" prop="tzbt">
            <el-input v-model="formData.tzbt" placeholder="请输入通知标题" clearable :style="{width: '100%'}">
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="通知内容" prop="tznr">
            <el-input v-model="formData.tznr" type="textarea" placeholder="请输入通知内容"
              :autosize="{minRows: 4, maxRows: 4}" :style="{width: '100%'}"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="附件上传" prop="fj">
            <el-upload ref="fj" :file-list="fjfileList" :action="fjAction" :before-upload="fjBeforeUpload">
              <el-button size="small" type="primary" icon="el-icon-upload">点击上传</el-button>
            </el-upload>
          </el-form-item>
        </el-col>

        <el-col :span="24">
          <el-form-item label="收件人">
            <el-tree
              :data="sjr"
              show-checkbox
              ref="menu"
              node-key="id"
              empty-text="加载中，请稍后"
              :props="defaultProps"
            ></el-tree>
          </el-form-item>
        </el-col>

<!--        <el-col :span="24">-->
<!--          <el-form-item label="收件人" prop="sjr">-->
<!--            <el-input v-model="formData.sjr" placeholder="请输入收件人" clearable :style="{width: '100%'}">-->
<!--            </el-input>-->
<!--          </el-form-item>-->
<!--        </el-col>-->
        <el-col :span="24">
          <el-form-item label="收件单位">
            <el-tree
              :data="sjdw"
              show-checkbox
              ref="menu"
              node-key="id"
              empty-text="加载中，请稍后"
              :props="defaultProps"
            ></el-tree>
          </el-form-item>
        </el-col>

<!--        <el-col :span="24">-->
<!--          <el-form-item label="收件单位" prop="sjdw">-->
<!--            <el-input v-model="formData.sjdw" placeholder="请输入收件单位" clearable :style="{width: '100%'}">-->
<!--            </el-input>-->
<!--          </el-form-item>-->
<!--        </el-col>-->
        <el-col :span="12">
          <el-form-item label="联系人" prop="lxr">
            <el-input v-model="formData.lxr" placeholder="请输入联系人" clearable :style="{width: '100%'}">
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="联系电话" prop="lxdh">
            <el-input v-model="formData.lxdh" placeholder="请输入联系电话" clearable :style="{width: '100%'}">
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item size="large">
            <el-button type="primary" @click="submitForm">提交</el-button>
            <el-button @click="resetForm">重置</el-button>
          </el-form-item>
        </el-col>
      </el-form>
    </el-row>
  </div>
</template>

<script>
import { treeselect as menuTreeselect} from "@/api/system/menu";
export default {
  components: {},
  props: [],
  data() {
    return {
      formData: {
        tzbt: undefined,
        tznr: undefined,
        fj: null,
        lxr: undefined,
        lxdh: undefined,
      },
      rules: {
        tzbt: [{
          required: true,
          message: '请输入通知标题',
          trigger: 'blur'
        }],
        tznr: [{
          required: true,
          message: '请输入通知内容',
          trigger: 'blur'
        }],
        sjr: [{
          required: true,
          message: '请输入收件人',
          trigger: 'blur'
        }],
        sjdw: [{
          required: true,
          message: '请输入收件单位',
          trigger: 'blur'
        }],
        lxr: [{
          required: true,
          message: '请输入联系人',
          trigger: 'blur'
        }],
        lxdh: [{
          required: true,
          message: '请输入联系电话',
          trigger: 'blur'
        }],
      },
      // 菜单列表
      sjr: [],
      sjdw: [],
      fjAction: 'https://jsonplaceholder.typicode.com/posts/',
      fjfileList: [],
      defaultProps: {
        children: "children",
        label: "label"
      },
    }
  },
  // computed: {},
  // watch: {},
  created() {
    this.getMenuTreeselect()
  },
  //mounted() {},
  methods: {
    submitForm() {
      this.$refs['elForm'].validate(valid => {
        if (!valid) return
        // TODO 提交表单
      })
    },
    resetForm() {
      this.$refs['elForm'].resetFields()
    },
    fjBeforeUpload(file) {
      let isRightSize = file.size / 1024 / 1024 < 2
      if (!isRightSize) {
        this.$message.error('文件大小超过 2MB')
      }
      return isRightSize
    },
    /** 查询菜单树结构 */
    getMenuTreeselect() {
      menuTreeselect().then(response => {
        this.sjr = response.data;
        this.sjdw = response.data;
      });
    },
    /** 根据角色ID查询菜单树结构 */
    getRoleMenuTreeselect(roleId) {
      roleMenuTreeselect(roleId).then(response => {
        this.sjr = response.menus;
        this.sjdw = response.menus;
        this.$refs.menu.setCheckedKeys(response.checkedKeys);
      });
    },
    // 所有菜单节点数据
    getMenuAllCheckedKeys() {
      // 目前被选中的菜单节点
      let checkedKeys = this.$refs.menu.getHalfCheckedKeys();
      // 半选中的菜单节点
      let halfCheckedKeys = this.$refs.menu.getCheckedKeys();
      checkedKeys.unshift.apply(checkedKeys, halfCheckedKeys);
      return checkedKeys;
    },
  }
};
</script>
<style>
.el-upload__tip {
  line-height: 1.2;
}

</style>
