<template>
  <div class="app-container">
    <div id="table" v-show="showTable">
      <el-form class="print-selfMutualInspection">
        <el-row>
          <el-col :span="5">
            <img src="@/assets/logo/lanjv.png" class="lanju-logo" />
          </el-col>
          <el-col class="tittle-text" :span="14">
            <span>中山榄菊日化实业有限公司</span>
          </el-col>
          <el-col :span="5"> </el-col>
        </el-row>
        <el-row>
          <el-col class="tittle-text">
            <span>自检互检记录表</span>
          </el-col>
        </el-row>
        <br>
        <el-row>
          <el-col :span="10">
            <div>生产车间:黑蚊香车间</div>
            <br />
          </el-col>
          <el-col :span="9">
            <div>产品名称: {{ headerParameters.productName }}</div>
            <br />
          </el-col>
          <el-col :span="5">
            <div>检查人: {{ headerParameters.checkPeople }}</div>
            <br />
          </el-col>
          <el-col :span="10">
            <div>
              生产产线:
              <el-select
                v-model="headerParameters.lineCode"
                filterable
                placeholder="请选择产线"
                style="width: 160px"
              >
                <el-option
                  v-for="item in lineCodeOption"
                  :key="item.equipmentCode"
                  :label="item.equipmentName"
                  :value="item.equipmentCode"
                >
                </el-option>
              </el-select>
            </div>
            <br />
          </el-col>
          <el-col :span="9">
            <div>
              检查日期:
              <el-date-picker
                clearable
                v-model="headerParameters.checkDate"
                type="date"
                value-format="yyyy-MM-dd"
                placeholder="请选择检查日期"
              >
              </el-date-picker>
            </div>
          </el-col>
          <el-col :span="5">
            <el-button
              type="primary"
              icon="el-icon-search"
              size="mini"
              @click="handleQuery"
              >搜索</el-button
            >
            <el-button icon="el-icon-refresh" size="mini" @click="resetQuery"
              >重置</el-button
            >
            <el-button
              type="warning"
              plain
              icon="el-icon-download"
              size="mini"
              @click="handlePrintPre"
              >打印
            </el-button>
          </el-col>
        </el-row>
      </el-form>

      <div>
        <table class="bordered-table">
          <tr>
            <th v-for="item in tableTittle0" style="width:300px" :key="item.key">
              {{ item.label }}
            </th>
            <!-- 动态渲染列名 -->
            <th v-for="item in tableTittle" :key="item.key" :width = tableTittleWidth >
              {{ item.label }}
            </th>
          </tr>

          <tr>
            <!-- 动态渲染列名 -->
            <th v-for="(index, key) in tableData[0]" :key="key">{{ key }}</th>
          </tr>

          <tr v-for="item in tableData" :key="item.id">
            <!-- 动态渲染列值 -->
            <td columnspan="1" v-for="(value, key) in item" :key="key">
              {{ value }}
            </td>
          </tr>

          <tr>
            <td colspan = "1">异常处理</td>
            <td :colspan = propertyNum>{{ headerParameters.bz }}</td>
          </tr>
            <!-- <tr>
              <td colspan = "1">备注</td>
              <td :colspan = propertyNum>{{ headerParameters.remark }}</td>
            </tr> -->
        </table>
      </div>
      <br />
      <div>
        备注:{{ headerParameters.remark }}
      </div>
    </div>

    <div id="printPage" v-show="showPrintPage">
      <br />
      <br />
      <br />
      <el-row>
        <el-col :span="5">
          <img src="@/assets/logo/lanjv.png" class="lanju-logo-print" />
        </el-col>
        <el-col class="tittle-text-print" :span="14">
          <span>中山榄菊日化实业有限公司</span>
        </el-col>
        <el-col :span="5"> </el-col>
      </el-row>
      <el-row>
        <el-col class="tittle-text-print">
          <span>自检互检记录表</span>
        </el-col>
      </el-row>
      <br />
      <br />
      <br />
      <el-row>
        <el-col :span="11">
          <div class="text-print">生产车间:黑蚊香车间</div>
          <br />
        </el-col>
        <el-col :span="9">
          <div class="text-print">
            生产产线: {{ headerParameters.lineCode }}
          </div>
          <br />
        </el-col>
        <el-col :span="4">
          <div class="text-print">
            检查人: {{ headerParameters.checkPeople }}
          </div>
          <br />
        </el-col>
        <el-col :span="20">
          <div class="text-print">
            产品名称: {{ headerParameters.productName }}
          </div>
          <br />
        </el-col>
        <el-col :span="4">
          <div class="text-print">
            检查日期: {{ headerParameters.checkDate }}
          </div>
          <br />
        </el-col>
      </el-row>
      <row>
        <el-col :span="24">
          <table class="bordered-table-print" border="1">
            <tr>
            <th v-for="item in tableTittle0" style="width:300px" :key="item.key">
              {{ item.label }}
            </th>
            <!-- 动态渲染列名 -->
            <th v-for="item in tableTittle" :key="item.key" :width = tableTittleWidth >
              {{ item.label }}
            </th>
          </tr>

            <tr>
              <th v-for="(index, key) in tableData[0]" :key="key">
                {{ key }}
              </th>
            </tr>

            <tr v-for="item in tableData" :key="item.id">
              <td v-for="(value, key) in item" :key="key">{{ value }}</td>
            </tr>

            <tr>
              <td colspan = "1">异常处理</td>
              <td :colspan = propertyNum>{{ headerParameters.bz }}</td>
            </tr>
            <!-- <tr>
              <td colspan = "1">备注</td>
              <td :colspan = propertyNum>{{ headerParameters.remark }}</td>
            </tr> -->
          </table>
        </el-col>
      </row>
      <div class="bottom-remark">
        备注:{{ headerParameters.remark }}
      </div>
    </div>

    <!-- <el-table :data="tableData">
      <el-table-column
        v-for="(value, key) in tableData"
        :key="key"
        :prop="value"
        :label="value"
      >
      </el-table-column>
    </el-table> -->
  </div>
</template>

<script>
import {
  listSelfMutualInspection,
  getSelfMutualInspectionData,
  getLineCodeList,
} from "@/api/mes/selfMutualInspection";

export default {
  name: "Item",
  dicts: ["device_item_type", "device_loop_type"],
  data() {
    return {
      printData: {
        printable: "printPage",
        ignore: ["no-print"],
      },
      showPrintPage: false,
      showTable: false,
      lineCodeOption: [],
      propertyNum: null,
      tableTittle0: [],
      tableTittle: [],
      tableTittleWidth: null,
      tableData: [],
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 查询参数
      queryParams: {},
      //表头参数
      headerParameters: {
        reportName: "ConversionReport", //表类型
        productionWorkshop: null, //生产车间
        lineCode: null, //生产产线编码
        checkPeople: null, //检查人
        productName: null, //产品名称
        checkDate: null, //检查日期
        bz: null, //异常处理
        remark: null, //备注
      },
      // 表单参数
      form: {},
      // 表单校验
      rules: {},
    };
  },
  created() {
    // this.getDate();
    this.getLineCode();
    this.getList();
  },
  methods: {
    dynamicWidthStyle(){
      return { width: `${1000 / this.propertyNum }px`}
    },

    //预处理
    handlePrintPre() {
      this.showTable = false; //页面上的表格不显示
      this.showPrintPage = true; //打印的表格显示
      this.$nextTick(() => {
        this.handlePrint();
      });
    },

    //真正打印
    handlePrint() {
      printJS({
        printable: this.printData.printable, // 'printPage', // 标签元素id
        type: this.printData.type || "html",
        maxWidth: 1500, // 最大宽度
        font_size: "", // 设置字体大小
        header: this.printData.header, // '表单',
        targetStyles: ["*"],
        style: "@page {margin:0 10mm};", // 可选-打印时去掉眉页眉尾
        ignoreElements: this.printData.ignore || [], // ['no-print']
        properties: this.printData.properties || null,
      });
      this.showTable = true; //页面上的表格显示
      this.showPrintPage = false; //打印的表格不显示
    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },
    // 表单重置
    reset() {
      this.form = {};
      this.resetForm("form");
    },
    /** 搜索按钮操作 */
    handleQuery() {
      if (this.headerParameters.lineCode == null) {
        this.$modal.msg("您没有选择生产产线，请选择！");
      } else if (this.headerParameters.checkDate == null) {
        this.$modal.msg("您没有选择检查时间，请选择！");
      } else {
        this.getList();
      }
    },

    getLineCode() {
      getLineCodeList().then((response) => {
        this.lineCodeOption = response;
      });
    },

    /**获取默认查询时间段**/
    // getDate() {
    // 	let start = this.Fungetdate (0)
    // 	this.headerParameters.checkDate = start;
    // },
    // Fungetdate (num) {
    // 	var dd = new Date();
    // 	dd.setDate(dd.getDate() + num);
    // 	var y = dd.getFullYear();
    // 	var m = dd.getMonth() + 1;//获取当前月份的日期
    // 	var d = dd.getDate();
    // 	return y + "-" + m +"-"+d;
    // },

    /** 重置按钮操作 */
    resetQuery() {
      (this.headerParameters.productionWorkshop = null), //生产车间
        (this.headerParameters.lineCode = null), //生产产线
        (this.headerParameters.checkPeople = null), //检查人
        (this.headerParameters.productName = null), //产品名称
        (this.headerParameters.checkDate = null), //检查日期
        (this.headerParameters.bz = null), //异常处理
        (this.headerParameters.remark = null), //备注
        // this.getDate();
        this.getList();
    },

    /** 查询检查项维护列表 */
    getList() {
      this.showTable = true;//页面上的表格显示
      this.showPrintPage = false;//打印的表格不显示
      this.tableData = [];
      this.tableTittle = [];
      this.tableTittle0 = [];
      this.propertyNum = null;
      this.loading = true;
      getSelfMutualInspectionData(this.headerParameters).then((response) => {
        this.headerParameters.checkPeople = response.createBy; //检查人
        this.headerParameters.productName = response.productName; //产品名称
        this.headerParameters.remark = response.remark; //备注
        this.headerParameters.bz = response.bz; //异常处理
        //this.headerParameters.checkDate = response.checkDate 检查日期
        //生产产线
      });
      listSelfMutualInspection(this.headerParameters).then((response) => {
        this.tableData = response;
        console.log("this.tableData", this.tableData);
        this.propertyNum = Object.keys(this.tableData[0]).length - 1; //属性个数
        this.tableTittle0.push({
          label: "项目",
          key: 0,
        });
        for (let i = 0; i < this.propertyNum; i++) {
          this.tableTittle.push({
            label: "检查时间",
            key: i + 1,
          });
        }

        this.tableTittleWidth = (1000 / (this.propertyNum)) + 'px';
      });
    },
  },
};
</script>

<style scoped>
.tittle-text {
  text-align: center;
  font-size: 30px;
  font-weight: 800;
  color: black;
}

.lanju-logo {
  margin-top: 15px;
  margin-left: 15px;
  height: 50px;
}

.bordered-table {
  border-collapse: collapse; /* 确保边框合并为单一边框 */
  width: 1300px; /* 表格宽度 */
}

.bordered-table th,

.bordered-table td {
  border: 1px solid #ddd; /* 边框样式 */
  padding: 8px; /* 单元格内边距 */
  text-align: center; /* 文本对齐 */
}

.bordered-table tr {
  word-break:break-all;
  word-wrap:break-word;
  border-collapse:collapse
}

.bordered-table-bottom {
  border-collapse: collapse; /* 确保边框合并为单一边框 */
  width: 1300px; /* 表格宽度 */
}

.bordered-table-bottom td {
  border: 1px solid #ddd; /* 边框样式 */
  text-align: left; /* 文本对齐 */
  width: 1300px; /* 表格宽度 */
}

/* 下面是和打印有关系的 */
.tittle-text-print {
  text-align: center;
  font-size: 40px;
  font-weight: 800;
  color: black;
}

.lanju-logo-print {
  margin-top: 15px;
  margin-left: 15px;
  height: 75px;
}

.text-print {
  text-align: left;
  font-size: 20px;
  color: black;
}

.bordered-table-print {
  border-collapse: collapse; /* 确保边框合并为单一边框 */
  width: 1300px; /* 表格宽度 */
}

.bordered-table-print td {
  text-align: center; /* 文本对齐 */
  height: 30px; /* 表格高度 */
}

.bordered-table-bottom-print {
  border-collapse: collapse; /* 确保边框合并为单一边框 */
  width: 1300px; /* 表格宽度 */
}

.bordered-table-bottom-print td {
  text-align: left; /* 文本对齐 */
  height: 35px; /* 表格宽度 */
  width: 1300px; /* 表格高度 */
}

.bottom-remark {
  margin-top: 15px;
}

.bordered-table-print tr {
  word-break:break-all;
  word-wrap:break-word;
  border-collapse:collapse
}
</style>