<!--
 * @Author: yangwei
 * @Date: 2023-08-15 14:15:06
 * @LastEditors: yangwei
 * @LastEditTime: 2023-08-15 14:15:19
 * @FilePath: \bdcdj-web\src\views\registerBook\sllmsyq.vue
 * @Description:
 *
 * Copyright (c) 2023 by yangwei, All Rights Reserved.
-->
<!--
 * @Description:
 * @Autor: renchao
 * @LastEditTime: 2023-08-11 15:33:53
-->
<template>
  <div class="djxxTable">
    <div v-show="false">
       <printTemplate id="box" :propsParam="propsParam" :tableData="tableData"/>
    </div>
    <div class="tableBox">
      <div class="title">
        {{ title }}
        <el-button class="print" v-show="shows" v-print="printObj">打印</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>

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

              <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 { datas } from "./qlxxFormData.js";
  import { getSjlx } from "@/utils/dictionary.js";
  import { getLqList } from "@/api/djbDetail.js";
import printTemplate from "./components/printTemplate.vue";
export default {
  components: {
    printTemplate,
  },
  data() {
    return {
      printObj: {
        id: "box",
        //其他配置项，
      },
      shows:false,
        title: "林权登记信息",
        qsztList: datas.columns().qsztList,
        checkList: datas.columns().checkList,
        //传递参数
        propsParam: this.$attrs,
        //列表数据
        tableData: [],
        //空列值个数
        emptycolNum: datas.columns().emptycolNum,
        //列名称对象
        columns: datas.columns().LDSYQ,
      };
    },
    created () {
      this.loadData();
    },
    methods: {
      /**
       * @description: loadData
       * @author: renchao
       */
      loadData () {
        if (this.$parent.addRepairRecord) {
          this.columns.unshift({
            prop: "cz",
            label: "操作",
          });
        }
        getLqList({
          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: renchao
       */
      checkChange () {
        if (this.checkList.length === 0) {
          this.tableData = [];
          this.emptycolNum = datas.columns().emptycolNum;
        } else {
          this.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.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>