<template>
  <div class="app-container">
    <div id="qrCodeUrlf" ref="qrCodeUrl" style="text-align: center;">
    			   <div id="nhgrew" ref="nhgrew">
    				    <canvas id="canvas" ref="canvas" class="canvas" ></canvas>
    			   </div>
				   
    			   <el-button  v-print="printObj" ref="hussar_19Ref"
    			       class="hussar_19 jxd_ins_elButton lay-btn button_additional default">
    			       <span>打印</span>
					   </el-button>
					   <el-button @click="zhuantp"   ref="hussar_19Refgt">
					       <span>保存图片</span>
    			  </el-button>
    </div>

    <!-- 添加或修改部门对话框 -->
    <el-dialog :title="title" :visible.sync="open" width="600px" append-to-body>
      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
        <el-row>
          <el-col :span="24" v-if="form.parentId !== 0">
            <el-form-item label="上级部门" prop="parentId">
              <treeselect v-model="form.parentId" :options="deptOptions" :normalizer="normalizer" placeholder="选择上级部门" />
            </el-form-item>
          </el-col>
        </el-row>
		<el-row>
		  <el-col :span="12">
		    <el-form-item label="年级名称" prop="njname">
		      <el-select style="width: 100%;" v-model="form.njname" placeholder="请选择年级名称">
		                  <el-option
		                    v-for="dict in dict.type.nj_name"
		                    :key="dict.value"
		                    :label="dict.label"
		                    :value="dict.label"
		      				 style="width: 100%;"
							 @click.native="mjyhe(dict)"
		                  ></el-option>
		      </el-select>
		    </el-form-item>
		  </el-col>
		  <el-col :span="12">
		    <el-form-item label="班级名称" prop="classname">
		      <el-select style="width: 100%;" v-model="form.classname" placeholder="请选择班级名称">
		                  <el-option
		                    v-for="dict in dict.type.class_name"
		                    :key="dict.value"
		                    :label="dict.label"
		                    :value="dict.label"
		      				 style="width: 100%;"
							 @click.native="mjyhe(dict)"
		                  ></el-option>
		      </el-select>
		    </el-form-item>
		  </el-col>
		</el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="部门名称" prop="deptName">
              <el-input v-model="form.deptName" placeholder="请输入部门名称" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="显示排序" prop="orderNum">
              <el-input-number v-model="form.orderNum" controls-position="right" :min="0" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="负责人" prop="leader">
              <el-input v-model="form.leader" placeholder="请输入负责人" maxlength="20" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="联系电话" prop="phone">
              <el-input v-model="form.phone" placeholder="请输入联系电话" maxlength="11" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="邮箱" prop="email">
              <el-input v-model="form.email" placeholder="请输入邮箱" maxlength="50" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="部门状态">
              <el-radio-group v-model="form.status">
                <el-radio
                  v-for="dict in dict.type.sys_normal_disable"
                  :key="dict.value"
                  :label="dict.value"
                >{{dict.label}}</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
	<!-- <div  v-show="false"  :disabled="hussar_20Disabled"  ref="hussar_20Ref" class="hussar_20 jxd_ins_elContainer lay-container default">
			   <div id="qrCodeUrlf" ref="qrCodeUrl">
				   <canvas id="canvas" ref="canvas" class="canvas" ></canvas>
			   </div>
	</div> -->
	 <!-- <el-dialog title="生成学校二维码(预约使用)" :visible.sync="opent" width="600px" append-to-body>
	   <div v-show="opent">
		   <div id="qrCodeUrlf" ref="qrCodeUrl" style="text-align: center;">
			   <div id="nhgrew">
				    <canvas id="canvas" ref="canvas" class="canvas" ></canvas>
			   </div>
			  
			   <el-button  v-print="printObj" ref="hussar_19Ref"
			       class="hussar_19 jxd_ins_elButton lay-btn button_additional default">
			       <span>打印</span>
			  </el-button>
		   </div>
	   </div>
	 </el-dialog>	 -->
  </div>
</template>

<script>
import { listDept, getDept, delDept, addDept, updateDept, listDeptExcludeChild } from "@/api/system/dept";
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
import QRCode from 'qrcode'
import html2canvas from 'html2canvas'
const defaultSettings = require("@/settings.js");
export default {
  name: "Dept",
  dicts: ['sys_normal_disable','nj_name','class_name'],
  components: { Treeselect },
  data() {
    return {
      // 遮罩层
      loading: true,
	  hussar_20Disabled:false,
      // 显示搜索条件
      showSearch: true,
	   printObj: {
	            id: "nhgrew", // 这里是要打印元素的ID
	            popTitle: "", // 打印的标题
	          },
      // 表格树数据
      deptList: [],
      // 部门树选项
      deptOptions: [],
	  opent:false,
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 是否展开，默认全部展开
      isExpandAll: true,
      // 重新渲染表格状态
      refreshTable: true,
      // 查询参数
      queryParams: {
        deptName: undefined,
        status: undefined
      },
      // 表单参数
      form: {},
      // 表单校验
      rules: {
        deptName: [
          { required: true, message: "部门名称不能为空", trigger: "blur" }
        ],
        orderNum: [
          { required: true, message: "显示排序不能为空", trigger: "blur" }
        ],
        email: [
          {
            type: "email",
            message: "请输入正确的邮箱地址",
            trigger: ["blur", "change"]
          }
        ],
        phone: [
          {
            pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
            message: "请输入正确的手机号码",
            trigger: "blur"
          }
        ]
      },
	  defaultSettings:defaultSettings,
	  isnume:0,
	  lk:''
    };
  },
  created() {
	  // this.opent = false
	  this.isnume = this.$route.query.tenantId
    this.lk ='https://xygl.cnzxy.cn/pages/order/come?id=' + this.isnume
	console.log(this.lk)
    	
    
  },
  mounted(){
	  console.log(this.lk,this.$refs.canvas,6)
	  // console.log(this.defaultSettings)
	  // this.opent = false
	  this.hussar_17Click(this.lk)
	 // this.opent = false
  },
  methods: {
    /** 查询部门列表 */
    getList() {
      this.loading = true;
      listDept(this.queryParams).then(response => {
        this.deptList = this.handleTree(response.data, "deptId");
        this.loading = false;
      });
    },
    /** 转换部门数据结构 */
    normalizer(node) {
      if (node.children && !node.children.length) {
        delete node.children;
      }
      return {
        id: node.deptId,
        label: node.deptName,
        children: node.children
      };
    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },
    // 表单重置
    reset() {
      this.form = {
        deptId: undefined,
        parentId: undefined,
        deptName: undefined,
        orderNum: undefined,
        leader: undefined,
        phone: undefined,
        email: undefined,
        status: "0"
      };
      this.resetForm("form");
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },
    /** 新增按钮操作 */
    handleAdd(row) {
      this.reset();
      if (row != undefined) {
        this.form.parentId = row.deptId;
      }
      this.open = true;
      this.title = "添加部门";
      listDept().then(response => {
        this.deptOptions = this.handleTree(response.data, "deptId");
      });
    },
    /** 展开/折叠操作 */
    toggleExpandAll() {
      this.refreshTable = false;
      this.isExpandAll = !this.isExpandAll;
      this.$nextTick(() => {
        this.refreshTable = true;
      });
    },
    /** 修改按钮操作 */
    handleUpdate(row) {
      this.reset();
      getDept(row.deptId).then(response => {
        this.form = response.data;
        this.open = true;
        this.title = "修改部门";
        listDeptExcludeChild(row.deptId).then(response => {
          this.deptOptions = this.handleTree(response.data, "deptId");
          if (this.deptOptions.length == 0) {
            const noResultsOptions = { deptId: this.form.parentId, deptName: this.form.parentName, children: [] };
            this.deptOptions.push(noResultsOptions);
          }
        });
      });
    },
    /** 提交按钮 */
    submitForm: function() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          if (this.form.deptId != undefined) {
			  if(this.form.parentId == undefined){
				  this.$message.error("请选择上级部门");
				  return false
			  }
            updateDept(this.form).then(response => {
              this.$modal.msgSuccess("修改成功");
              this.open = false;
              this.getList();
            });
          } else {
			  if(this.form.parentId == undefined){
				 this.$message.error("请选择上级部门");
				 return false
			  }
			  
			  if(this.form.njname == undefined || this.form.classname == undefined){
				 this.$message.error("请选择年级名称和班级名称"); 
				 return 
			  }
            addDept(this.form).then(response => {
              this.$modal.msgSuccess("新增成功");
              this.open = false;
              this.getList();
            });
          }
        }
      });
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      this.$modal.confirm('是否确认删除名称为"' + row.deptName + '"的数据项？').then(function() {
        return delDept(row.deptId);
      }).then(() => {
        this.getList();
        this.$modal.msgSuccess("删除成功");
      }).catch(() => {});
    },
	mjyhe(val){
		if(this.form.classname == undefined){
			this.form.deptName = this.form.njname
		}else{
			this.form.deptName = this.form.njname + this.form.classname
		}
	},
	mjyhes(val){
		if(this.form.njname == undefined){
			this.form.deptName =this.form.classname
		}else{
			this.form.deptName = this.form.njname + this.form.classname
		}
		
	},
	zhuantp(){
		html2canvas(this.$refs.nhgrew).then((canvas) => {
		    let dataURL = canvas.toDataURL("image/png"); //base64格式的图片 url
		    // 创建a标签下载图片
		    var addElement = document.createElement('a')
		    addElement.href = dataURL
		    addElement.download = "二维码" //设置下载的图片名称
		    document.body.appendChild(addElement)
		    addElement.click();
		    document.body.removeChild(addElement);
		  });
	},
	erweim(row){
	  	this.opent = true
		this.hussar_20Disabled = true
		let nhge ='https://xyglhf.qs163.cn/pages/order/come?id=' + row.tenantId
		console.log(this.$refs.canvas,6)
		// console.log(this.defaultSettings)
		// this.opent = false
		this.hussar_17Click(nhge)
	},
	hussar_17Click(url) {
		 console.log(url,this.$refs.canvas,6)
	        const _this = this
	        // this.$refs.qrCodeUrl.innerHTML="";
			// this.opent = true
	        QRCode.toCanvas(
	                      canvas,
	                      url,//生成二维码的数据
	                      {width: 260, height: 260, margin: 1.5},//margin调整二维码的白边大小
	                      function (error) {
	                        if (error) {
	                          console.log(error);
	                        }
	                      }
	                    );
        
	        // console.log(qrcode,987)
	      }

  }
};
</script>
<style>
.jxd_ins_elContainer{
	background-color: #f2f2f2;
	position: fixed;
	top:0;
	left:0;
	z-index: 25;
	widht:100%;
	height: 100%;
}
</style>
