<template>
  <div class="note-sends">
    <el-dialog title="分享《无标题》笔记" :visible.sync="dialogVisible" width="680px" :before-close="handleClose">
      <div>
        <div>
          <el-input style="margin-right: 10px" v-model="input" placeholder="点击按钮,创建分享链接" :disabled="isDisabled"></el-input>
          <div class="sendsinput">
            <el-button type="info" @click="cancellation">取消分享</el-button>
            <el-button type="primary" @click="CreateShare">创建分享</el-button>
          </div>
        </div>

        <div>
          <p style="font-size: 15px; font-weight: bold">设置</p>

          <div class="btn">
            <div class="btnpassword">
              <span style="font-weight: bold;  margin-right: 8px;"> 分享范围 </span>

              <div class="btnSharing" @click="PublicSharing">
                <img v-show="showFirstImage == 0" src="../../../assets/images/note/yuan.png" class="imgyuan" alt="" />
                <img v-show="showFirstImage == 1" src="../../../assets/images/note/yuan1.png" class="imgyuan" alt="" />
                <span :style="{color: textColor,'font-weight': boldText ? 'bold' : 'normal','margin-right': '8px'}">公开分享</span>
              </div>
              <span style="font-size: 12px ;color: #a8afbb">所有人均可查看</span>
            </div>

            <div class="btnlimitation">
              <div class="btnteg" @click="toggleContent">
                <img v-show="showtoggle == 0" src="../../../assets/images/note/yuan.png" class="imgyuan" alt="" />
                <img v-show="showtoggle == 1" src="../../../assets/images/note/yuan1.png" class="imgyuan" alt="" />
                <span :style="{color: texttoggle,'font-weight': toggletext ? 'bold' : 'normal','margin-right': '8px'}">系统内分享</span>
              </div>
              <span style="font-size: 12px ;color: #a8afbb">登录系统用户可查看</span>
            </div>
          </div>

          <div class="content">
            <div class="password">
              <el-button style="background-color: #fff; color: black; border: none" type="primary" icon="el-icon-lock" @click="setPassword"
                >设置密码</el-button
              >
              <el-input v-if="isPasswordVisible" style="width: 100px; margin-left: 10px" v-model="Password" placeholder="密码"></el-input>
            </div>

            <div class="limitation">
              <span style="color: #a8afbb; ">分享限制</span>
              <el-dropdown>
                <el-button style="background-color: #fff; color: black; border: none" type="primary">
                  不限<i class="el-icon-arrow-down el-icon--right"></i>
                </el-button>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item>不限</el-dropdown-item>
                  <el-dropdown-item disabled>分享天数</el-dropdown-item>
                  <el-dropdown-item>1</el-dropdown-item>
                  <el-dropdown-item>3</el-dropdown-item>
                  <el-dropdown-item>7</el-dropdown-item>
                  <el-dropdown-item disabled>阅读次数</el-dropdown-item>
                  <el-dropdown-item>30</el-dropdown-item>
                  <el-dropdown-item>50</el-dropdown-item>
                  <el-dropdown-item>100</el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
            </div>
          </div>
        </div>
      </div>

      <div v-if="showContent">
        <p style="color: #a8afbb">
          好友列表
          <span style="color: red; margin-left: 15px">必填，如不填写“好友分享”不生效</span>
        </p>
        <el-input style="margin-right: 10px" v-model="inputuser" placeholder="输入用户邮箱或手机号后点击回车"></el-input>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      showContent: false,
      dialogVisible: false,
      value: true,
      input: "",
      Password: "",
      inputuser: "",
      isDisabled: true,
      isPasswordVisible: false,

      showFirstImage: 0,
      boldText: false,
      textColor: "black",

      showtoggle: 0,
      toggletext: false,
      texttoggle: "black"
    };
  },
  methods: {
    atclick() {
      this.dialogVisible = true;
    },

    // 随机生成四位数密码
    setPassword() {
      // 生成一个随机的1到9中的四位数
      const randomPassword = Math.floor(Math.random() * 9000) + 1000;

      // 将生成的随机数赋值给v-model绑定的data属性（例如：Password）
      this.Password = randomPassword.toString();
      // this.isPasswordVisible = true;
      this.isPasswordVisible = !this.isPasswordVisible;
    },

    // 创建分享
    CreateShare() {
      this.isDisabled = !this.isDisabled;
    },

    //取消分享
    cancellation() {
      this.isDisabled = true;
    },

    // 系统内分享
    toggleContent() {
      this.showContent = !this.showContent;

      this.showtoggle = this.showtoggle ? 0 : 1;
      this.toggletext = !this.toggletext;
      this.texttoggle = this.showtoggle ? "#1296db" : "black";

      this.showFirstImage = 0;
      this.boldText = false;
      this.textColor = "black";
    },

    // 公开分享
    PublicSharing() {
      this.showContent = false;

      this.showFirstImage = this.showFirstImage ? 0 : 1;
      this.boldText = !this.boldText;
      this.textColor = this.showFirstImage ? "#1296db" : "black";

      this.showtoggle = 0;
      this.toggletext = false;
      this.texttoggle = "black";
      console.log("公开分享");
    },

    handleClose(done) {
      this.$confirm("确认关闭？")
        .then((_) => {
          done();
        })
        .catch((_) => {});
    }
  }
};
</script>

<style lang="scss" scoped>
.sendsswitch {
  display: flex;
  align-items: center;
}

.imgyuan {
  width: 15px;
  height: 15px;
  margin-right: 8px;
}

.sendsinput {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  margin: 25px 0;
}
.btn {
  margin-bottom: 20px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;

  .btnpassword {
    display: flex;
    width: 40%;
    align-items: center;

    .btnSharing {
      cursor: pointer;
      display: flex;
      align-items: center;
    }
  }
  .btnlimitation {
    width: 40%;
    display: flex;
    align-items: center;
    .btnteg {
      display: flex;
      align-items: center;
      cursor: pointer;
    }
  }
}

.content {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;

  .password {
    width: 40%;
  }

  .limitation {
    width: 40%;
  }
}
</style>

弹窗在其他页面使用

<!-- 分享 -->
      <div class="iconBox" @click="lookVissble">
        <svg-icon icon-class="sends" />
      </div>
       <!-- 分享弹框 -->
      <noteSends ref="noteSendsShow" />

//引进组件
import noteSends from "@/views/note-sends.vue";

//注册组件
  components: { noteSends },
//点击打开组件
  methods: {
    lookVissble() {
      this.$refs.noteSendsShow.atclick();
    },
}