<template>
  <div>
    <el-dialog
      v-dialogDrag
      :title="title"
      :visible="dialogFormVisible"
      @close="cancelForm"
      :close-on-click-modal="false"
      class="el-dialog-single"
    >
      <div style="height: 100%; display: flex;align-items: center; justify-content: center;">
        <div v-for="item in list" :key="item.type" class="info-box">
          <div style="font-size: 20px; font-weight: bold">
            {{ item.title }}
          </div>
          <img
            id="u86_img"
            style="width: 50px; height: 50px; margin: 16px 0"
            class="img"
            data-src="images/选择添加方式/u86.svg"
            src="../../../assets/homeImgs/md5__d6064a5d0a9053e2caa47a73e1ccd2d6.svg"
          />
          <p style="margin: 16px 0; line-height: 1.5">
            {{ item.info }}
          </p>
          <el-button
            style="width: 100px"
            type="primary"
            @click="action(item)"
            >{{ item.button }}</el-button
          >
        </div>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancelForm()">取 消</el-button>
      </div>
    </el-dialog>
    <el-dialog
      v-dialogDrag
      title="生成集团专属码"
      :visible="type3"
      @close="closeT3"
      :close-on-click-modal="false"
      class=""
    >
      <div style="text-align: left; padding: 32px">
        <div style="font-weight: bold">集团专属码</div>
        <div style="margin: 16px 0">
          下级组织系统管理员可在【组织管理】后台主动输入本代码加入集团管理组织架构。
        </div>

        <div
          style="
            width: 608px;
            padding: 36px;
            margin: 18px 0;
            background: #f2f2f2;
            font-size: 28px;
            font-weight: bold;
          "
        >
          {{code}}
        </div>

        <el-button type="primary" @click="copy()"> 复制代码</el-button>
     
      </div>
      <div slot="footer" class="dialog-footer">
          <el-button @click="closeT3">返回</el-button>
        </div>
    </el-dialog>
  </div>
</template>
<script>
import { codeGNT } from "@/api/staffApi.js";

export default {
  props: ["showdialog"],
  watch: {
    showdialog() {
      this.dialogFormVisible = this.showdialog;
    },
  },
  components: {
    //注册组件
  },
  data() {
    return {
      code:'',
      type3:  false,
      title: "选择新增组织方式",
      dialogFormVisible: this.showdialog,
      list: [
        {
          title: "生成集团码",
          type: "3",
          img: "",
          info: "生成专属集团码，下级组织系统管理员主动输入代码加入集团管理",
          button: "生成代码",
        },
      ],
    };
  },
  methods: {
    cancelForm() {
      //取消关闭
      this.$emit("update:showdialog", false);
    },
    closeT3() {
      this.type3 = false;
    },
    copy() {
      navigator.clipboard.writeText(this.code).then(() =>{
        this.$message.success("复制到剪切板成功");

  }, () => {
    this.$message.error("复制到剪切板失败");

  });
    },
    action(item) {
      switch (item.type) {
        case "3":
        codeGNT().then((res) => {
     if(res.data){
      this.code=res.data
      this.type3 = true;

     }
          
        })
          break;

        default:
          break;
      }
      this.dialogFormVisible = false;
    },
  },
};
</script>
<style lang="scss" scoped>
.info-box {
  cursor: pointer;
  display: inline-block;
  text-align: center;
  padding: 32px;
  margin: 32px;
  border-width: 0px;
  width: 217px;
  height: 321px;
  background: inherit;
  background-color: rgba(255, 255, 255, 1);
  box-sizing: border-box;
  border-width: 2px;
  border-style: solid;
  border-color: rgba(215, 215, 215, 1);
  border-radius: 9px;
  -moz-box-shadow: none;
  -webkit-box-shadow: none;
  box-shadow: none;

  &:hover {
    border-color: rgba(0, 118, 246, 1);
  }
}
</style>
