<!--
 * @Description:
 * @Autor: miaofang
 * @LastEditTime: 2023-08-23 15:54:12
-->
<template>
  <div class="djxxTable">
       <djbDetail :title="title" :shows="shows" :propsParam="propsParam"
      :columns="columns" :tableData="tableData" />
    <!-- <div v-show="false">
       <printTemplate id="boxdiyiq" :tableData="tableData" :render="render"/>
    </div>
    <div class="tableBox">
      <div class="title">
        {{ title }}
       <el-button class="print" v-show="shows" @click="openPrint()"
          >打印</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> -->
  </div>
</template>

<script>
 import djbDetail from "./components/djbDetail.vue"
import { datas } from "./qlxxFormData.js";
import { getSjlx, getDictLeabel } from "@/utils/dictionary.js";
import { getDiyiqList } from "@/api/djbDetail.js";
export default {
    components: {
      djbDetail
  },
  data() {
    return {
      shows:false,
      title: "地役权登记信息",
      // qsztList: datas.columns().qsztList,
      // checkList: datas.columns().checkList,
      //传递参数
      propsParam: this.$attrs,
      //列表数据
      tableData: [],
      //空列值个数
      // emptycolNum: datas.columns().emptycolNum,
      //列名称对象
      columns: datas.columns().DYIQ,
      render: false,
    };
  },
  created() {
    this.loadData();
  },
  methods: {   /**
    //  * @description: openPrint
    //  * @author: miaofang
    //  */
    // openPrint() {
    //   this.render = true;
    //   setTimeout(() => {
    //     this.prinsss();
    //   }, 100);
    // },
    // /**
    //  * @description: prinsss
    //  * @author: miaofang
    //  */
    // prinsss() {
    //   printJS({
    //     printable: "boxdiyiq", // // 文档来源：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: loadData
     * @author: miaofang
     */
    loadData() {
      if (this.$parent.addRepairRecord) {
        this.columns.unshift({ prop: "cz", label: "操作" });
      }
      getDiyiqList({
        bdcdyid: this.propsParam.bdcdyid,
        qllx: this.propsParam.qllx,
        qszt: this.checkList,
      }).then((res) => {
        if (res.code === 200) {
          this.tableData = res.result;
          this.shows=this.tableData.length>0
          this.tableData.forEach((item) => {
            item.sjlx = getSjlx(item.sjlx);
            item.dybdclx = getDictLeabel(item.dybdclx, "A27");
          });
          if (this.tableData.length < datas.columns().emptycolNum) {
            this.emptycolNum =
              datas.columns().emptycolNum - this.tableData.length;
          } else {
            this.emptycolNum = 0;
          }
        }
      });
    },
  //   /**
  //    * @description: checkChange
  //    * @author: miaofang
  //    */
  //   checkChange() {
  //     if (this.checkList.length === 0) {
  //       this.tableData = [];
  //       this.emptycolNum = datas.columns().emptycolNum;
  //     } else {
  //       this.loadData();
  //     }
  //   },
  //   /**
  //    * @description: getQsztName
  //    * @param {*} code
  //    * @author: miaofang
  //    */
  //   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: miaofang
  //    */
  //   editDialog(row, del) {
  //     this.$confirm("此操作将新增一条补录信息, 是否继续?", "提示", {
  //       confirmButtonText: "确定",
  //       cancelButtonText: "取消",
  //       type: "warning",
  //     })
  //       .then(() => {
  //         this.$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 {
    // background-color: #0079fe;
    z-index: 10;
    position: absolute;
    left: 11px;
    top: 5px;
  }
}
</style>