<!--
 * @Description  :用地
 * @Autor        : miaofang
 * @LastEditTime : 2023-06-02 14:43:11
-->
<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">
        <!-- 固定前三个 -->
        <table class="xxTable">
          <tr v-for="(item, colindex) in columns.slice(0, 3)" :key="colindex">
            <td>
              {{ item.label }}
            </td>
            <td v-for="(row, index) in tableData" :key="index" :class="[
              row.qszt == '2' ? 'lishi' : '',
              row.qszt == '0' ? 'linshi' : '',
              item.prop == 'qszt' && row.qszt == '0' ? 'linshiIcon' : '',
               item.prop == 'qszt' && row.qszt == '1' ? 'xianshiIcon' : '',
            ]">
             <div class="setbut" v-if="item.prop == 'cz'">
                   <el-button type="text" icon="el-icon-edit-outline" @click="editDialog(row)">编辑</el-button>
                   <el-button type="text" icon="el-icon-edit-outline" @click="deleteDialog(row)">删除</el-button>
              </div>
              <div class="icon" v-if="item.prop == 'qszt' && row.qszt == '0'">
                正在办理
              </div>
              <div class="icon" v-if="item.prop == 'qszt' && row.qszt == '1'">
                有效
              </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>

        <table class="xxTable rollTable">
          <tr v-for="(item, colindex) in columns.slice(3)" :key="colindex">
            <td>
              {{ item.label }}
            </td>
            <td v-for="(row, index) in tableData" :key="index" :class="[
              row.qszt == '2' ? 'lishi' : '',
              row.qszt == '0' ? 'linshi' : '',
              item.prop == 'qszt' && row.qszt == '0' ? 'linshiIcon' : '',
            ]">
              <div class="icon" v-if="item.prop == 'qszt' && row.qszt == '0'">
                正在办理
              </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 { getNydsyqList } from "@/api/registerBook.js";
  import { datas } from "./qlxxFormData.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().NYDSYQ,
      };
    },
    created () {
      var qllx = this.$route.query.sqywbm.substr(0, 3)
      if (qllx == 'A09') {
        this.title = '土地经营权登记信息'
      } else {
        this.title = '农用地使用权登记信息'
      }
      this.loadData();
    },
    methods: {
      loadData () {
        getNydsyqList({
          bdcdyid: this.propsParam.bdcdyid,
          qllx: this.propsParam.qllx,
          qszt: this.checkList,
        }).then((res) => {
          if (res.code === 200) {
            this.tableData = res.result;
            if (this.tableData.length < datas.columns().emptycolNum) {
              this.emptycolNum =
                datas.columns().emptycolNum - this.tableData.length;
            } else {
              this.emptycolNum = 0;
            }
          }
        });
      },
      checkChange () {
        if (this.checkList.length === 0) {
          this.tableData = [];
          this.emptycolNum = datas.columns().emptycolNum;
        } else {
          this.loadData();
        }
      },
      getQsztName (code) {
        let name = "";
        for (let item of this.qsztList) {
          if (item.value == code) {
            name = item.label;
            break;
          }
        }
        return name;
      },
     // 编辑
        editDialog(row){
            this.$confirm('此操作将新增一条补录信息, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$parent.addRepairRecord(row)

          this.$message({
            type: 'success',
            message: '补录成功!'
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '取消编辑'
          });
        });

      //   this.$popupDialog("编辑", "djbworkflow/djbBook/components/djbeditDialog", {
      //   datalist:this.columns,
      //   data: row,

      // })

      },
      // 删除
      deleteDialog(row){
        this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
           // let bsmClmx = this.previewImg.imgList[this.previewImg.index].bsmClmx
          // deleteClmx(bsmClmx).then(res => {
          //   if (res.code == 200) {
          //     that.$emit('updateList', res.result)
          //     that.$message({
          //       message: '删除成功!',
          //       type: 'success'
          //     })
          //   }
          // })
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });

      }
    },
  };
</script>

<style lang="scss" scoped>
  @import "./qlxxCommon.scss";
</style>