<!--
 * @Description:
 * @Autor: miaofang
 * @LastEditTime: 2023-10-30 10:59:40
-->
<template>
  <div class="djxxTable">
    <div v-show="false">
      <printTemplate
        id="boxfdcq"
        :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"
            :class="judge(item.label) ? 'cols' : ''"
            :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>
              <span v-if="item.prop == 'qszt'">
                {{ getQsztName(row[item.prop]) }}
              </span>
              <el-link v-if=" ['zxywh', 'ywh'].includes(item.prop)"
                @click="handleSelectYwh(row, row[item.prop])"
                type="primary">{{ row[item.prop] }}</el-link>
              <el-tooltip
                v-if="['djyy', 'fj'].includes(item.prop)"
                effect="dark"
                :content="row[item.prop]"
                placement="top"
                popper-class="tooltip-width">
                <span class="ellipsis-line">
                  {{ row[item.prop] }}
                </span>
              </el-tooltip>

              <span
                v-if="
                  item.prop !== 'zxywh' &&
                  item.prop !== 'ywh' &&
                  item.prop !== 'qszt' &&
                  item.prop !== 'djyy' &&
                  item.prop !== 'fj' &&
                  !judge(item.label)
                ">
                {{ getLable(item.prop,row[item.prop]) }}
              </span>
              <div class="many" v-if="judge(item.label)">
                <div
                  v-for="(label, index) in row.djQlxxFdcqxmDoList"
                  :key="index">
                  {{ label[item.prop] }}
                </div>
              </div>
            </td>
            <td v-for="count in emptycolNum" class="empty" :key="~count"></td>
          </tr>
        </table>
      </div>
    </div>
  </div>
</template>

<script>
  import Router from '@/router'
  import printJS from "print-js";
  import store from '@/store/index.js'
  import { datas } from "./qlxxFormData.js";
  import { getSjlx } from "@/utils/dictionary.js";
  import { getFdcq1List } from "@/api/djbDetail.js";
  import printTemplate from "./components/printTemplate.vue";
  import { getXtParamsByYwh, getBlParamsByYwh } from '@/api/djyw'
  export default {
    components: {
      printTemplate,
    },
    data () {
      return {
        printObj: {
          id: "box",
          //其他配置项，
        },
        shows: false,
        title: "房地产权登记信息（多幢）",
        qsztList: datas.columns().qsztList,
        checkList: datas.columns().checkList,
        //传递参数
        propsParam: this.$attrs,
        //列表数据
        tableData: [],
        // 异步传值
        datalist: [],
        //空列值个数
        emptycolNum: datas.columns().emptycolNum,
        //列名称对象
        columns: datas.columns().FDCQ1,
        render: false,
      };
    },
    created () {
      this.loadData()
      if (this.$parent.addRepairRecord) {
        this.columns.unshift({ prop: "cz", label: "操作" });
      }
    },
    methods: {
      getLable (prop, label) {
        const ztObj = {
          0: '否',
          1: '是'
        };

        const strategies = {
          sfygdj: (label) => ztObj[label] || label,
          sfczjzhxz: (label) => ztObj[label] || label,
          dyrlx: (label) => {
            let arr = store.getters.dictData['A36'].filter(item => item.dcode === label);
            return arr.length > 0 ? arr[0].dname : label;
          },
          default: (label) => label
        };

        const strategy = strategies[prop] || strategies.default;
        return strategy(label);
      },
      openPrint () {
        this.render = true;
        setTimeout(() => {
          this.prinsss();
        }, 100);
      },
      /**
       * @description: prinsss
       * @author: miaofang
       */
      prinsss () {
        printJS({
          printable: "boxfdcq", // // 文档来源：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 () {
        getFdcq1List({
          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);
            });
            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: judge
       * @param {*} lable
       * @author: miaofang
       */
      judge (label) {
        if (
          "项目名称幢号总层数规划用途用途名称批准用途实际用途房屋结构房屋结构名称建筑面积竣工时间总套数".indexOf(
            label
          ) > -1
        ) {
          return true;
        } else {
          return false;
        }
      },
      /**
       * @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: "取消编辑",
            });
          });
      },
      // 选择业务号
      handleSelectYwh (row, ywh) {
        let sjlx = row.sjlx,
          bsmQlxx = row.bsmQlxx
        if (sjlx == '系统数据') {
          getXtParamsByYwh(ywh).then(res => {
            let data = res.result
            const { href } = Router.resolve('/workFrameView?bsmSlsq=' + data.bsmSlsq + '&bsmBusiness=' + data.bsmBusiness)
            window.open(href, `urlname${new Date().getTime()}`)
          })
        } else {
          getBlParamsByYwh(ywh, bsmQlxx).then(res => {
            let data = res.result
            this.$popup('材料信息', 'registerBook/components/clxx/index', {
              width: '60%',
              formData: data
            })
          })
        }
      }
    }
  };
</script>

<style lang="scss" scoped>
  @import "./qlxxCommon.scss";
  .cols {
    td {
      .many {
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: row;
        div {
          flex: 1;
          border-right: 2px solid #e3e2e2;
          line-height: 40px;
          overflow: unset;
        }
        div:last-child {
          border: 0;
        }
      }
    }
  }
  .title {
    position: relative;
    .print {
      // background-color: #0079fe;
      z-index: 10;
      position: absolute;
      left: 11px;
      top: 5px;
    }
  }
</style>