<!--
 * @Description:
 * @Autor: renchao
 * @LastEditTime: 2023-08-11 15:33:53
-->
<template>
    <div class="djxxTable">
      <div class="tableBox">
        <div class="title">
          {{ title }}
          <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>
              </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";
    export default {
      data () {
        return {
          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.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";
  </style>