<template>
    <div class="app-container" id="">
        <div style="display: flex; justify-content: center;">
            <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="80px">
                <el-form-item prop="maCode">
                <el-input
                    v-model="queryParams.maCode"
                    placeholder="请输入设备编号"
                    clearable :maxlength="20"

                />
                </el-form-item>

                <el-form-item  >
                    <el-select v-model="queryParams.maCodeTwo" placeholder="请选择相关联编号" clearable filterable @change="getList">
                    <el-option v-for="item in optionList" :key="item.label" :label="item.label" :value="item.label"/>
                    </el-select>
                </el-form-item>

                <el-form-item tyle="display: flex; align-items: center;">
                    <el-button
                        type="primary"
                        icon="el-icon-search"
                        size="small"
                        @click="handleQuery"
                        >查询</el-button
                    >
                    <el-button
                        icon="el-icon-refresh"
                        size="small"
                        @click="resetQuery"
                        >重置</el-button
                    >
                </el-form-item>
            </el-form>
        </div>
         <div style="display: flex; justify-content: center;">
            <el-card style="width: 600px; height: 300px; border: 6px solid green; position: relative;" v-if="isJj!=null && isJj==0">
                <div style="height: 280px; padding: 0 0px">
                    <div
                        class="title"
                        style="text-align: center; font-weight: 450; font-size: 18px; color: #4dad7e"
                    >
                    检 验 合 格 证
                    </div>
                    <div
                        class="info"
                        style="margin-top: 10px; display: flex; flex-wrap: wrap"
                    >
                        <div
                        class="item"
                        style="
                            width: 50%;
                            flex-shrink: 0;
                            margin-bottom: 1px;
                            font-size: 18px;
                            display: flex; /* 添加 flex 布局 */
                            align-items: center; /* 垂直居中对齐 */
                        "
                        >
                        <span style="color: #4dad7e">名称：</span>
                        <span style="margin-left: 80px;">{{this.tagInfo.materialName}}</span>
                        </div>

                        <div
                        class="item"
                        style="
                            width: 50%;
                            flex-shrink: 0;
                            margin-bottom: 1px;
                            font-size: 18px;
                            display: flex;
                            justify-content: end;
                            align-items: center;
                        "
                        >
                        <span style="color: #4dad7e">检验结论</span>
                        </div>
                    </div>

                    <div
                        class="info"
                        style="margin-top: 1px; display: flex; flex-wrap: wrap"
                    >
                        <div
                        class="item"
                        style="
                            width: 50%;
                            flex-shrink: 0;
                            margin-bottom: 1px;
                            font-size: 18px;
                            display: flex; /* 添加 flex 布局 */
                            align-items: center; /* 垂直居中对齐 */
                        "
                        >
                        <span style="color: #4dad7e">型号：</span>
                        <span style="margin-left: 80px;">{{this.tagInfo.materialModel}}</span>
                        </div>

                        <div
                        class="item"
                        style="
                            width: 50%;
                            flex-shrink: 0;
                            margin-bottom: 1px;
                            font-size: 18px;
                            display: flex;
                            justify-content: end;
                            align-items: center;
                        "
                        >
                        <span style="color: #ef3e3e;margin-right: 20px;">{{this.tagInfo.inspectStatus}}</span>
                        </div>
                    </div>

                    <div
                        class="info"
                        style="margin-top: 1px; display: flex; flex-wrap: wrap"
                    >
                        <div
                        class="item"
                        style="
                            width: 50%;
                            flex-shrink: 0;
                            margin-bottom: 1px;
                            font-size: 18px;
                            display: flex; /* 添加 flex 布局 */
                            align-items: center; /* 垂直居中对齐 */
                        "
                        >
                        <span style="color: #4dad7e">编号：</span>
                        <span style="margin-left: 80px;">{{this.tagInfo.maCode}}</span>
                        </div>

                    </div>

                    <div
                        class="info"
                        style="margin-top: 1px; display: flex; flex-wrap: wrap"
                    >
                        <div
                        class="item"
                        style="
                            width: 100%;
                            flex-shrink: 0;
                            margin-bottom: 1px;
                            font-size: 18px;
                            display: flex; /* 添加 flex 布局 */
                            align-items: center; /* 垂直居中对齐 */
                        "
                        >
                        <span style="color: #4dad7e">本次检验日期：</span>
                        <span style="margin-left: 80px;">{{this.tagInfo.thisCheckTime}}</span>
                        </div>

                    </div>

                    <div
                        class="info"
                        style="margin-top: 1px; display: flex; flex-wrap: wrap"
                    >
                        <div
                        class="item"
                        style="
                            width: 100%;
                            flex-shrink: 0;
                            margin-bottom: 1px;
                            font-size: 18px;
                            display: flex; /* 添加 flex 布局 */
                            align-items: center; /* 垂直居中对齐 */
                        "
                        >
                        <span style="color: #4dad7e">下次检验日期：</span>
                        <span style="margin-left: 80px;">{{this.tagInfo.nextCheckTime}}</span>
                        </div>

                    </div>


                    <div
                        class="info"
                        style="margin-top: 1px; display: flex; flex-wrap: wrap"
                    >
                        <div
                        class="item"
                        style="
                            width: 50%;
                            flex-shrink: 0;
                            margin-bottom: 1px;
                            font-size: 18px;
                            display: flex; /* 添加 flex 布局 */
                            align-items: center; /* 垂直居中对齐 */
                        "
                        >
                        <span style="color: #4dad7e">检修员：</span>
                        <span style="margin-left: 80px;">{{this.tagInfo.inspectMan}}</span>
                        </div>

                        <div
                        class="item"
                        style="
                            width: 50%;
                            flex-shrink: 0;
                            margin-bottom: 1px;
                            font-size: 18px;
                            display: flex;
                            justify-content: end;
                            align-items: center;
                        "
                        >
                        <span style="color: #4dad7e">检验员：</span>
                        <span style="margin-left: 80px;margin-right: 20px;">{{this.tagInfo.checkMan}}</span>
                        </div>
                    </div>


                    <div
                        class="info"
                        style="margin-top: 1px; display: flex; flex-wrap: wrap"
                    >
                        <div
                        class="item"
                        style="
                            width: 100%;
                            flex-shrink: 0;
                            margin-bottom: 1px;
                            font-size: 18px;
                            display: flex; /* 添加 flex 布局 */
                            align-items: center; /* 垂直居中对齐 */
                        "
                        >
                        <span style="color: #4dad7e">联系电话：</span>
                        <span style="margin-left: 80px;">{{this.tagInfo.phone}}</span>
                        </div>

                    </div>

                    <div
                        class="info"
                        style="margin-top: 1px; display: flex; flex-wrap: wrap"
                    >
                        <div
                        class="item"
                        style="
                            width: 100%;
                            flex-shrink: 0;
                            margin-bottom: 1px;
                            font-size: 18px;
                            display: flex; /* 添加 flex 布局 */
                            align-items: center; /* 垂直居中对齐 */
                        "
                        >
                        <span style="color: #4dad7e">出库检验报告：</span>
                        <span style="margin-left: 80px; text-decoration: underline; cursor: pointer;color: #4dad7e" @click="handleReportClick">
                              {{"检测报告"}}
                        </span>
                        </div>

                    </div>



                </div>
                 <canvas id="canvas" width="210" height="210" style="position: absolute; top: 50%; left: 8%; transform: translate(0, -50%); z-index: 9999;"></canvas>
            </el-card>

        </div>


         <div style="display: flex; justify-content: center;">
            <el-card style="width: 600px; height: 300px; border: 6px solid #0055aa; position: relative;" v-if="isJj!=null && isJj==1">
                <div style="height: 280px; padding: 0 0px">
                    <div
                        class="title"
                        style="text-align: center; font-weight: 450; font-size: 18px; "
                    >
                    安徽顺凯检测技术有限公司
                    </div>
                    <div
                        class="title"
                        style="text-align: center; font-weight: 450; font-size: 18px; "
                    >
                    合格证
                    </div>


                    <div
                        class="info"
                        style="margin-top: 1px; display: flex; flex-wrap: wrap"
                    >
                        <div
                        class="item"
                        style="
                            width: 100%;
                            flex-shrink: 0;
                            margin-bottom: 1px;
                            font-size: 18px;
                            display: flex; /* 添加 flex 布局 */
                            align-items: center; /* 垂直居中对齐 */
                        "
                        >
                        <span >试样名称：</span>
                        <span style="margin-left: 80px;">{{this.tagInfo.materialName}}</span>
                        </div>
                    </div>

                    <div
                        class="info"
                        style="margin-top: 1px; display: flex; flex-wrap: wrap"
                    >
                        <div
                        class="item"
                        style="
                            width: 100%;
                            flex-shrink: 0;
                            margin-bottom: 1px;
                            font-size: 18px;
                            display: flex; /* 添加 flex 布局 */
                            align-items: center; /* 垂直居中对齐 */
                        "
                        >
                        <span >规格型号：</span>
                        <span style="margin-left: 80px;">{{this.tagInfo.materialModel}}</span>
                        </div>
                    </div>

                    <div
                        class="info"
                        style="margin-top: 1px; display: flex; flex-wrap: wrap"
                    >
                        <div
                        class="item"
                        style="
                            width: 100%;
                            flex-shrink: 0;
                            margin-bottom: 1px;
                            font-size: 18px;
                            display: flex; /* 添加 flex 布局 */
                            align-items: center; /* 垂直居中对齐 */
                        "
                        >
                        <span >编号：</span>
                        <span style="margin-left: 80px;">{{this.tagInfo.maCode}}</span>
                        </div>
                    </div>


                    <div
                        class="info"
                        style="margin-top: 1px; display: flex; flex-wrap: wrap"
                    >
                        <div
                        class="item"
                        style="
                            width: 100%;
                            flex-shrink: 0;
                            margin-bottom: 1px;
                            font-size: 18px;
                            display: flex; /* 添加 flex 布局 */
                            align-items: center; /* 垂直居中对齐 */
                        "
                        >
                        <span >本次检验日期：</span>
                        <span style="margin-left: 80px;">{{this.tagInfo.thisCheckTime}}</span>
                        </div>

                    </div>


                    <div
                        class="info"
                        style="margin-top: 1px; display: flex; flex-wrap: wrap"
                    >
                        <div
                        class="item"
                        style="
                            width: 100%;
                            flex-shrink: 0;
                            margin-bottom: 1px;
                            font-size: 18px;
                            display: flex; /* 添加 flex 布局 */
                            align-items: center; /* 垂直居中对齐 */
                        "
                        >
                        <span >下次检验日期：</span>
                        <span style="margin-left: 80px;">{{this.tagInfo.nextCheckTime}}</span>
                        </div>

                    </div>


                    <div
                        class="info"
                        style="margin-top: 1px; display: flex; flex-wrap: wrap"
                    >
                        <div
                        class="item"
                        style="
                            width: 100%;
                            flex-shrink: 0;
                            margin-bottom: 1px;
                            font-size: 18px;
                            display: flex; /* 添加 flex 布局 */
                            align-items: center; /* 垂直居中对齐 */
                        "
                        >
                        <span >试验人：</span>
                        <span style="margin-left: 80px;">{{this.tagInfo.checkMan}}</span>
                        </div>

                    </div>

                    <div
                        class="info"
                        style="margin-top: 1px; display: flex; flex-wrap: wrap"
                    >
                        <div
                        class="item"
                        style="
                            width: 100%;
                            flex-shrink: 0;
                            margin-bottom: 1px;
                            font-size: 18px;
                            display: flex; /* 添加 flex 布局 */
                            align-items: center; /* 垂直居中对齐 */
                        "
                        >
                        <span >检测结果：</span>
                        <span style="margin-left: 80px;">{{this.tagInfo.inspectStatus}}</span>
                        </div>

                    </div>


                    <div
                        class="info"
                        style="margin-top: 1px; display: flex; flex-wrap: wrap"
                    >
                        <div
                        class="item"
                        style="
                            width: 100%;
                            flex-shrink: 0;
                            margin-bottom: 1px;
                            font-size: 18px;
                            display: flex; /* 添加 flex 布局 */
                            align-items: center; /* 垂直居中对齐 */
                        "
                        >
                        <span >检测报告：</span>
                        <span style="margin-left: 80px; text-decoration: underline; cursor: pointer;color: #0055aa" @click="handleReportClick">
                              {{"检测报告"}}
                        </span>
                        </div>

                    </div>

                </div>

                 <canvas id="canvasTwo" width="210" height="210" style="position: absolute; top: 50%; left: 8%; transform: translate(0, -50%); z-index: 9999;"></canvas>
            </el-card>

        </div>
    </div>
</template>

<script>
import {
    getListTag,getSelectionList,
} from '@/api/stquery/stquery';
import {downloadFile, downloadFileData} from '@/utils/download'
export default {
    name: 'ElectronicTag',
    dicts: [],
    data() {
        return {
            // 遮罩层
            loading: false,
            // 显示搜索条件
            showSearch: true,
            // 查询参数
            queryParams: {
                maCode: null,
                maCodeTwo: null,
                devType: null,
            },
            isJj:null, //判断是什么类型
            tagInfo:{
                isJj:null,
                maCode:null,
                materialName:null,
                materialModel:null,
                inspectStatus:null,
                thisCheckTime:null,
                nextCheckTime:null,
                inspectMan:null,
                checkMan:null,
                phone:null,
            },
            optionList: [],
        }
    },
    mounted() {
        // this.getList();
    },
    methods: {

      //获取下拉列表
      async getSelectionList(){
       await getSelectionList({'maCode':this.queryParams.maCode}).then((response) => {
            this.optionList = response.data.map((type) => ({
            value: type.maId,
            label: type.maCode,
            devType: type.devType,
          }));
            console.log("xxxxxxxxxxxxxxxxxxxxxx",this.optionList)
        });
     },

      // 获取列表
      async getList() {
        this.queryParams.devType = this.optionList.find((item) => item.label == this.queryParams.maCodeTwo)?.devType;
       await getListTag({'maCode':this.queryParams.maCodeTwo,'devType':this.queryParams.devType}).then((response) => {
            if(response.data &&response.data.length!=0){
                this.tagInfo = response.data[0]
            }
        });
        this.isJj = this.tagInfo.isJj;
        this.$nextTick(() => {
            let canvas = null
            if(this.isJj==null){
               canvas =null
            }else{
             canvas = this.isJj === 0 ? 'canvas' : 'canvasTwo';
            }

            console.log("xxxxxxxxx",canvas)
            if (canvas!=null && this.isJj==0) {
                this.chapter('机具检验专用章', '安徽送变电工程有限公司机具(物流)分公司', canvas);
            }
            if (canvas!=null && this.isJj==1) {
                this.chapter('检验专用章', '安徽顺凯检测技术有限公司', canvas);
            }
        });
      },
      /** 搜索按钮操作 */
      handleQuery() {
        //   this.getList({'maCode':this.queryParams.maCode})
        this.getSelectionList()
      },
      /** 重置按钮操作 */
      resetQuery() {
        this.isJj = null;
        this.queryParams.maCode=null
        this.queryParams.maCodeTwo=null
        this.queryParams.devType=null
        this.resetForm('queryForm')
        this.optionList = []
        this.handleQuery()
      },

      /*handleReportClick(){
        if(this.tagInfo){
           downloadFileData({fileName: "xsdada", fileUrl: "http://192.168.0.244:18583/statics/2025/03/05/清新互联智能事件格式_2021(1)_20250305153249A001.pdf"})
        }

      },*/
      /** 下载按钮操作 */
      handleReportClick() {
        this.download(
          '/material/lease_apply_info/exportInfo',
          { id: this.tagInfo.id, maId : this.tagInfo.maId },
          `出库检验单_${new Date().getTime()}.xlsx`
        )
      },


    chapter(text, companyName,canvasName) {
    let canvas = document.getElementById(canvasName);
    let context = canvas.getContext("2d");
    canvas.width = canvas.width;
    context.height = canvas.height;
    // // 清除画布内容
    // context.clearRect(0, 0, canvas.width, canvas.height);
    //let text = "XXX专用章";
    //let companyName = "XXX科技股份有限公司";

    // 绘制印章边框
    let width = canvas.width / 2;
    let height = canvas.height / 2;
    context.lineWidth = 5;
    context.strokeStyle = "#f00";
    context.beginPath();
    context.arc(width, height, 100, 0, Math.PI * 2); //宽、高、半径
    context.stroke();

    //画五角星
    this.create5star(context, width, height, 30, "#f00", 0);

    // 绘制印章名称
    context.font = "100 18px 宋体";
    context.textBaseline = "middle"; //设置文本的垂直对齐方式
    context.textAlign = "center"; //设置文本的水平对对齐方式
    context.lineWidth = 1;
    context.strokeStyle = "#ff2f2f";
    context.strokeText(text, width, height + 70);

    // 绘制印章单位
    context.translate(width, height); // 平移到此位置,
    context.font = "100 18px 宋体";
    let count = companyName.length; // 字数
    let angle = (4 * Math.PI) / (3 * (count - 1)); // 字间角度
    let chars = companyName.split("");
    let c;
    for (let i = 0; i < count; i++) {
      c = chars[i]; // 需要绘制的字符
      if (i == 0) {
        context.rotate((5 * Math.PI) / 6);
      } else {
        context.rotate(angle);
      }

      context.save();
      context.translate(85, 0); // 平移到此位置,此时字和x轴垂直，公司名称和最外圈的距离
      context.rotate(Math.PI / 2); // 旋转90度,让字平行于x轴
      context.strokeStyle = "#ff5050"; // 设置印章单位字体颜色为较浅的红色
      context.strokeText(c, 0, 0); // 此点为字的中心点
      context.restore();
    }
  },

    //绘制五角星
    create5star(context, sx, sy, radius, color, rotato) {
      context.save();
      context.fillStyle = color;
      context.translate(sx, sy); //移动坐标原点
      context.rotate(Math.PI + rotato); //旋转
      context.beginPath(); //创建路径
      // let x = Math.sin(0);
      // let y = Math.cos(0);
      let dig = (Math.PI / 5) * 4;
      for (let i = 0; i < 5; i++) {
        //画五角星的五条边
        let x = Math.sin(i * dig);
        let y = Math.cos(i * dig);
        context.lineTo(x * radius, y * radius);
      }
      context.closePath();
      context.stroke();
      context.fill();
      context.restore();
    }


    },
}
</script>
<style lang="scss" scoped>
::v-deep.el-table .fixed-width .el-button--mini {
    width: 60px !important;
    margin-bottom: 10px;
}
.clickText {
  color: #02a7f0;
  cursor: pointer;
}
// ::v-deep.el-input--small .el-input__inner {
//     height: 40px;
//     line-height: 32px;
// }

</style>
