<template>
  <el-card
    shadow="never"
    class="aui-card--fill"
  >
    <div class="meetingsAdd">
      <div class="title"><span class="substyle">会议内容 </span> </div>
      <div class="meetingsContent">
        <el-form
          :rules="dataRule"
          ref="dataForm"
          :model="dataForm"
        >
          <div
            class="meeting"
            style="width:100%;border:2px solid #ccc;border-radius:5px;margin-bottom:20px"
          >
            <el-form-item prop="title">
              <el-input
                v-model="dataForm.title"
                style="font-size:22px;border:0"
                placeholder="请在这里输入会议标题"
              ></el-input>
            </el-form-item>
            <el-form-item
              prop="content"
              label=""
            >

              <el-input
                type="textarea"
                :rows="14"
                resize="none"
                v-model="dataForm.content"
                placeholder="请在这里输入会议内容"
              ></el-input>

            </el-form-item>
          </div>
          <el-form-item
            label="选择发送人员:"
            prop="invitedUserIDs"
          >

            <!--  <el-tooltip
              :content="allPeople"
              placement="left"
              :disabled="dataForm.invitedUserNames.length>0?false:true"
            > -->
            <div class="peoplehide">
              <span
                v-for="(item,index) in dataForm.invitedUserNames.slice(0,200)"
                :key="index"
              >
                {{item.name}}
                <span v-if="index<199&&index<dataForm.invitedUserNames.length-1">、</span>

              </span>

              <span v-if="dataForm.invitedUserNames.length>200">...</span>
              <el-button
                @click="isShow=true"
                class="sendbtn"
                circle
                icon="el-icon-plus"
              ></el-button>
            </div>

            <!--  </el-tooltip> -->

          </el-form-item>

        </el-form>

        <el-dialog
          title="选择发送人员"
          :visible.sync="isShow"
          width="50%"
          :before-close="handleClose"
        >
          <el-tabs
            v-model="activeName"
            @tab-click="handleClick"
          >
            <el-tab-pane
              label="委员会选择"
              name="first"
            >
              <committeeTable
                v-on:childByValue="childByValue"
                :invitedUserNames="dataForm.invitedUserNames"
              />
            </el-tab-pane>
            <el-tab-pane
              label="市区级选择"
              name="second"
            >
              <locationTable
                v-on:childByValue="childByValue"
                :invitedUserNames="dataForm.invitedUserNames"
              />
            </el-tab-pane>

          </el-tabs>
          <span
            slot="footer"
            class="dialog-footer"
          >
            <el-button @click="handleClose1">取 消</el-button>
            <el-button
              type="primary"
              @click="sub()"
            >确 认</el-button>
          </span>
        </el-dialog>

      </div>

      <div class="footer">
        <el-button
          style="border:1px solid #17B3A3;color:#17B3A3;width:100px"
          @click="goback"
        >
          返回
        </el-button>
        <el-button
          @click="dataFormSubmitHandle()"
          style="background:#17B3A3;color:#fff"
        >保存并发送
        </el-button>
      </div>
    </div>
  </el-card>
</template>

<script>
import committeeTable from "./committee-table";
import locationTable from "./location-table";
import debounce from "lodash/debounce";

export default {
  name: "meetingsAdd",
  data() {
    return {
      isShow: false,

      activeName: "first",
      allPeople: "",
      peoplelist: [],
      dataForm: {
        id: "",
        title: "",
        content: "",
        /*    allPeople: "", */
        invitedUserIDs: [],

        invitedUserNames: [],
      },
    };
  },
  /*   watch: {
    invitedUserNames: function (newval, oldval) {
      console.log("11", newval);
    },
  }, */
  computed: {
    dataRule() {
      return {
        title: [
          {
            required: true,
            message: this.$t("validate.required"),
            trigger: "blur",
          },
        ],
        content: [
          {
            required: true,
            message: this.$t("validate.required"),
            trigger: "blur",
          },
        ],
        /*  allPeople: [
          {
            required: true,
            message: this.$t("validate.required"),
            trigger: "blur",
          },
        ], */
      };
    },
  },
  created() {
    this.init();
  },
  methods: {
    init() {
      this.$nextTick(() => {
        this.$refs["dataForm"].resetFields();
        // console.log("uuuuuuu", this.$route.query.id);
        if (this.$route.query.id != undefined) {
          this.dataForm.id = this.$route.query.id;
          // console.log(this.dataForm.id);
          if (this.dataForm.id) {
            this.getInfo();
          }
        }
      });
    },
    unique(arr) {
      return Array.from(new Set(arr));
    },
    unique2(arr) {
      const res = new Map();
      return arr.filter((arr) => !res.has(arr.id) && res.set(arr.id, 1));
    },
    //确定选择人员
    sub() {
      this.$confirm("确定提交吗？")
        .then((_) => {
          this.isShow = false;
          this.dataForm.invitedUserNames = this.peoplelist;

          //  console.log("pppp", this.peoplelist);
          this.dataForm.invitedUserNames = this.unique2(
            this.dataForm.invitedUserNames
          );
          /*  console.log(
            "this.dataForm.invitedUserNames",
            this.dataForm.invitedUserNames
          ); */
        })
        .catch((_) => {});
    },
    childByValue: function (childValue) {
      // childValue就是子组件传过来的值

      if (childValue) {
        //console.log("childValue", childValue);
        /*  childValue.forEach((ele) => {
          this.peoplelist.push(ele);
          this.dataForm.invitedUserIDs.push(ele.id);
          // this.dataForm.invitedUserNames.push(ele.name);
        }); */
        this.peoplelist = childValue;
        this.dataForm.invitedUserIDs = childValue.map((el) => el.id);
        //  this.dataForm.invitedUserIDs = childValue;
        this.peoplelist = this.unique2(this.peoplelist);
        this.dataForm.invitedUserIDs = this.unique(
          this.dataForm.invitedUserIDs
        );
      }

      /*  this.dataForm.invitedUserNames = this.unique(
        this.dataForm.invitedUserNames
      ); */

      // this.allPeople = this.dataForm.invitedUserNames.join(",");
    },
    // 获取信息
    getInfo() {
      this.$http
        .get(`/meeting/meeting/${this.dataForm.id}`)
        .then(({ data: res }) => {
          if (res.code !== 0) {
            return this.$message.error(res.msg);
          }

          this.dataForm = {
            ...this.dataForm,
            ...res.data,
          };
          //  console.log(this.dataForm);
          //  this.peoplelist=this.dataForm.
          //this.allPeople = this.dataForm.invitedUserNames.join(",");
          /* if (this.dataForm.invitedUserIDs == null) {
            this.dataForm.invitedUserIDs = [];
          } */
        })
        .catch(() => {});
    },
    // 表单提交
    dataFormSubmitHandle: function () {
      this.$refs["dataForm"].validate((valid) => {
        if (!valid) {
          return false;
        }

        this.$confirm("确定提交吗？")
          .then((_) => {
            this.$http[!this.dataForm.id ? "post" : "put"](
              "/meeting/meeting/",
              this.dataForm
            )
              .then(({ data: res }) => {
                if (res.code !== 0) {
                  return this.$message.error(res.msg);
                }
                this.$message({
                  message: this.$t("prompt.success"),
                  type: "success",
                });
              })
              .then(() => {
                this.$router.go(-1);
              })
              .catch(() => {});
          })
          .catch((_) => {});
      });
    },

    //提交表单
    /*   submitForm(formName) {
      this.$confirm("确定保存并发送吗？")
        .then((_) => {
          this.$refs[formName].validate((valid) => {
            if (valid) {
              alert("submit!");
            } else {
              console.log("error submit!!");
              return false;
            }
          });
        })
        .catch((_) => {});
    }, */
    //模态框右上角关闭按钮的事件
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then((_) => {
          done();
        })
        .catch((_) => {});
    },
    //取消按钮的事件
    handleClose1(done) {
      this.$confirm("确认关闭？")
        .then((_) => {
          this.isShow = false;
        })
        .catch((_) => {});
    },
    handleClick(tab, event) {
      //console.log(tab, event);
    },

    //返回按钮事件
    goback() {
      this.$router.go(-1);
    },
  },
  components: {
    committeeTable,
    locationTable,
  },
};
</script>

<style lang="less" scoped>
/deep/.el-textarea__inner {
  font-size: 16px;
  border: 0;
  padding: 0 0 0 30px;
}
.meeting {
  /deep/.el-input__inner {
    font-size: 22px !important;
    border: 0;
  }
}

/deep/.el-dialog__header {
  background: #17b3a3;
  /deep/.el-dialog__title {
    color: #fff;
  }

  /deep/ .el-dialog {
    background: #fff;
  }
  /deep/.el-dialog__headerbtn .el-dialog__close {
    color: #fff;
  }
}

/* /deep/.el-tooltip__popper {
  width: 600px !important;
} */
/* /deep/.el-tooltip__popper.is-dark {
  background: red;
  color: #fff;
  width: 50%;
} */

.meetingsAdd {
  width: 100%;
  font-size: 18px;

  /*  /deep/.el-textarea__inner {
    font-size: 14px;
  } */

  .title {
    width: 99%;
    margin: 0 auto;
    margin-bottom: 20px;

    padding-bottom: 5px;
    border-bottom: 1px solid #ccc;

    .substyle {
      border-left: 5px solid #43cc93;
      padding-left: 10px;
    }
  }
  .meetingsContent {
    width: 98%;
    margin: 0 auto;
    .sendbtn {
      margin-left: 20px;
      border: 1px solid #17b3a3;
      color: #17b3a3;
    }
  }
  .footer {
    width: 99%;
    text-align: right;
  }
  .peoplehide {
    display: inline-block;
    width: 85%;
    /*  width: 200px;
    height: 100px;
    word-break: keep-all;

    white-space: nowrap;

    overflow: hidden;

    text-overflow: ellipsis; */
  }
}
</style>