<!--
 * @Description:
 * @Autor: renchao
 * @LastEditTime: 2023-09-15 11:00:11
-->
<template>
  <div class="tableBox">
    <div v-show="false">
      <printTemplate
        id="boxdiyaq"
        :tableData="tableData"
        :render="render" />
    </div>
    <div class="title">
      {{ title }}
      <el-button class="print" v-show="shows" @click="openPrint()">打印1</el-button>
      <div class="checkbox">
        <el-checkbox-group v-model="checkList" @change="checkChange">
          <el-checkbox
            v-for="item in qsztList"
            :key="item.value"
            :label="item.value">{{ item.label }}</el-checkbox>
        </el-checkbox-group>
      </div>
    </div>
    <div class="xxTableBox rollTable">
      <table class="xxTable">
        <tr v-for="(item, colindex) in columns" :key="colindex">
          <td>
            {{ item.label }}
          </td>
          <td
            v-for="(row, index) in tableData"
            :key="index"
            :class="[
                row.qszt == '2' ? 'lishi' : '',
                row.qszt == '0' ? 'linshi' : '',
                row.qlzt == '4' ? 'linshi' : '',

                item.prop == 'qszt' && row.qlzt == '3' ? 'linshiIcon' : '',
                item.prop == 'qszt' && row.qlzt == '2' ? 'linshiIcon' : '',
                item.prop == 'qszt' && row.qlzt == '1' ? 'xianshiIcon' : '',
                item.prop == 'qszt' && row.qlzt == '4' ? 'zhuxiaoIcon' : '',
              ]">
            <div
              class="setbut"
              v-if="item.prop == 'cz' && row.sjlx != '系统数据'">
              <el-button
                type="text"
                icon="el-icon-edit-outline"
                @click="editDialog(row)">编辑</el-button>
              <el-button
                type="text"
                icon="el-icon-edit-outline"
                @click="editDialog(row, 'D')">删除</el-button>
            </div>
            <div class="icon" v-if="item.prop == 'qszt' && row.qlzt == '1'">
              有效
            </div>
            <div class="icon" v-if="item.prop == 'qszt' && row.qlzt == '2'">
              正在补录
            </div>
            <div class="icon" v-if="item.prop == 'qszt' && row.qlzt == '3'">
              正在申请
            </div>
            <div class="icon" v-if="item.prop == 'qszt' && row.qlzt == '4'">
              正在注销
            </div>

            <p v-if="!['djyy', 'fj'].includes(item.prop)">
              <span v-if="item.prop == 'qszt'">
                {{ getQsztName(row[item.prop]) }}
              </span>
              <span v-else>{{ row[item.prop] }}</span>
            </p>

            <el-tooltip
              v-else
              effect="dark"
              :content="row[item.prop]"
              placement="top"
              popper-class="tooltip-width">
              <span class="ellipsis-line">
                {{ row[item.prop] }}
              </span>
            </el-tooltip>
          </td>
          <td v-for="count in emptycolNum" :key="~count"></td>
        </tr>
      </table>
    </div>
  </div>
</template>
<script>
  import { datas } from "../qlxxFormData.js";
  import printTemplate from "../components/printTemplate.vue";
  export default {
    components: {
      printTemplate
    },
    props: {
      title: {
        type: String,
        default: ''
      },
      shows: {
        type: Boolean,
        default: false
      },
      // 传递参数
      propsParam: {
        type: Object,
        default: () => { }
      },
      // 列表数据
      tableData: {
        type: Array,
        default: () => []
      },
      columns: {
        type: Array,
        default: () => []
      },
    },
    data () {
      return {
        qsztList: datas.columns().qsztList,
        checkList: datas.columns().checkList,
        //空列值个数
        emptycolNum: datas.columns().emptycolNum,
        render: false,
      };
    },
    methods: {
      openPrint () {
        console.log("tableData",this.tableDataaaa);
        this.render = true;
        setTimeout(() => {
          this.prinsss();
        }, 100);
      },
      /**
       * @description: prinsss
       * @author: miaofang
       */
      prinsss () {
        printJS({
          printable: "boxdiyaq", // // 文档来源：pdf或图像的url，html元素的id或json数据的对象
          type: "html",
          maxWidth: 800, // 最大宽度
          font_size: "", // 不设置则使用默认字体大小
          style: `@font-face {
          font-family: "STZHONGS";
          src: url(${window.ttf}) format("truetype");
        }`,
          // 继承原来的所有样式
          targetStyles: ["*"],
        });
        this.render = false
      },
      /**
       * @description: checkChange
       * @author: renchao
       */
      checkChange () {
        if (this.checkList.length === 0) {
          this.tableData = [];
          this.emptycolNum = datas.columns().emptycolNum;
        } else {
          this.$parent.loadData();
        }
      },
      /**
       * @description: getQsztName
       * @param {*} code
       * @author: renchao
       */
      getQsztName (code) {
        let name = "";
        for (let item of this.qsztList) {
          if (item.value == code) {
            name = item.label;
            break;
          }
        }
        return name;
      },
      /**
       * @description: 新增一条补录信息
       * @param {*} row
       * @param {*} del
       * @author: renchao
       */
      editDialog (row, del) {
        this.$confirm("此操作将新增一条补录信息, 是否继续?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
          .then(() => {
            this.$parent.$parent.addRepairRecord(row, del);
            this.$message({
              type: "success",
              message: "补录成功!"
            })
          })
          .catch(() => {
            this.$message({
              type: "info",
              message: "取消编辑"
            })
          })
      }
    }
  }
</script>

<style lang="scss" scoped>
  @import "../qlxxCommon.scss";
  .title {
    position: relative;
    .print {
      z-index: 10;
      position: absolute;
      left: 11px;
      top: 5px;
    }
  }
</style>