<template>
  <div style="height:100%;width:100%;">
    <a-layout style="height:100%;width:100%;">
<!--      <a-layout-sider-->
<!--        width="320px"-->
<!--        style="border-right:2px solid #d5d5ff;float:left"-->
<!--        :style="{ 'max-height': testHeight + 'px', 'height': testHeight + 'px' }">-->
<!--        <div class="tree" style="height: calc(100% - 50px); width: 100%; overflow: auto; display: inline-flex;">-->
<!--          <a-tree-->
<!--            :tree-data="treeData"-->
<!--            @select="treeNodeClickHandler"-->
<!--            :fieldNames="{ children: 'children', title: 'pnm', key: 'id' }"-->
<!--            :expandedKeys.sync="expandedKeys"-->
<!--            ref="jigou_tree"-->
<!--            style="height:100%;">-->
<!--            <template #custom="item">-->
<!--              <span style="float:left;" :title="item.pnm">-->
<!--                <span v-if="item.id && item.id.length >= 12">-->
<!--                  <img-->
<!--                    src="../../assets/images/choucha.png"-->
<!--                    v-if="item.chkType == '0'"-->
<!--                    style="width: 25px;height:20px;float: left;" />-->
<!--                  <img-->
<!--                    src="../../assets/images/zicha.png"-->
<!--                    v-if="item.chkType == '1'"-->
<!--                    style="width: 25px;height:20px;float: left;" />-->
<!--                  &nbsp;-->
<!--                </span>-->
<!--                {{ item.pnm ? (item.pnm.length > 12 ? (item.pnm.substring(0, 10)) + "..." : item.pnm) : "" }}-->
<!--              </span>-->
<!--            </div>-->
<!--          </a-tree>-->
<!--        </div>-->
<!--      </a-layout-sider>-->
      <a-layout-content id="dxdcListMainsk" style="padding:5px 20px;">
        <a-row>
          <a-form style="display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px 24px; padding-left: 10px;">
            <a-form-item label="督查事项" style="white-space: nowrap; flex-shrink: 0; margin-bottom: 0;">
              <a-select v-model:value="prjType" placeholder="督查事项" allow-clear style="width: 200px;">
                <a-select-option v-for="(item, index) in prjTypeList" :key="index" :value="item.code">{{ item.val
                }}</a-select-option>
              </a-select>
            </a-form-item>
            <a-form-item label="督查状态" style="white-space: nowrap; flex-shrink: 0; margin-bottom: 0;">
              <a-select v-model:value="dcType" placeholder="督查状态" allow-clear style="width: 200px;">
                <a-select-option value="0">未督查</a-select-option>
                <a-select-option value="1">督查中</a-select-option>
                <a-select-option value="2">已督查</a-select-option>
              </a-select>
            </a-form-item>
            <a-form-item label="对象名称" style="white-space: nowrap; flex-shrink: 0; margin-bottom: 0;">
              <a-input v-model:value="depName" placeholder="对象名称" />
            </a-form-item>
            <a-form-item style="white-space: nowrap; flex-shrink: 0; margin-bottom: 0;">
              <a-button type="primary" @click="getSkDataList" size="small" >查询</a-button>
            </a-form-item>
          </a-form>
        </a-row>
        <a-table
          ref="table"
          :columns="columns"
          :data-source="skDataList"
          :pagination="false"
          :loading="tableLoading"
          row-key="rgstrId"
          style="width: 100%;"
          :scroll="{ y: tableHeight - 120 }"
          bordered>
          <template #bodyCell="{ column, record, text, index }">
            <template v-if="column.dataIndex === 'chkType'">
              <img src="../../assets/images/choucha.png" v-if="record.chkType == '0'" style="width: 25px;height:20px;" />
              <img src="../../assets/images/zicha.png" v-if="record.chkType == '1'" style="width: 25px;height:20px;" />
            </template>
            <template v-else-if="column.dataIndex === 'state'">
              <span
                style="padding: 3px 10px;background:#F56C6C;border-radius:15px;color:rgba(255,255,255,1)"
                v-if="record.state == 0">未督查</span>
              <span
                style="padding: 3px 10px;background:#FBB56D;border-radius:15px;color:rgba(255,255,255,1)"
                v-if="record.state == 1">督查中</span>
              <span
                style="padding: 3px 10px;background:#63C25E;border-radius:15px;color:rgba(255,255,255,1)"
                v-if="record.state == 2">已督查</span>
            </template>
            <template v-else-if="column.dataIndex === 'action'">
              <div>
                <a-button size="small" type="primary" ghost @click="toAddMember(record)">督查</a-button>
                <a-button size="small" type="primary" ghost @click="toCheck(record)">查看</a-button>
                <a-button size="small" type="danger" ghost @click="toDetele(record)">删除</a-button>
              </div>
            </template>
            <template v-else>
              {{ text }}
            </template>
          </template>
        </a-table>
        <a-pagination
          show-size-changer
          v-model:pageSize="pageSize"
          :total="total"
          :page-size-options="['10', '20', '30', '40', '50', '100']"
          :show-total="total => `共${total}条`"
          @showSizeChange="handleSizeChange"
          @change="pageIndexChange"
          style="margin-top: 10px;" />
      </a-layout-content>
    </a-layout>

    <superintendFilling
      v-if="showFulling"
      ref="superintendFilling"
      :currentObjectName=currentResName
      :rowData="rowData"
      :currentObjectRgstrId="currentObjectRgstrId"
      :currentResCode="currentResCode"
      :currentResName="currentResName"
      :currentObjectId="currentObjectId"
      :pType="pType"
      :openType="openType"
      :chkType="chkType"
      @closeModal="closeModal"
      @addShuiKuSuccess="addShuiKuSuccess"
      :isQuanFuGai="true"
    />
  </div>
</template>

<script>
import request from '../../utils/gw_ajax_request.js';
import { dateFormat } from '../../utils/gw_date.js';
import superintendFilling from './components/superintendFilling1.vue';
export default {
  data() {
    return {
      testHeight: window.innerHeight - 140,
      tableHeight: 0,
      treeData: [],
      treeList: [],
      expandedKeys: [],
      currentNodeId: '111327001003',
      prjType: undefined,
      prjTypeList: [],
      dcType: undefined,
      depName: '',
      skDataList: [],
      pageIndex: 1,
      pageSize: 10,
      total: 0,
      columns: [
        {
          title: '对象名称',
          dataIndex: 'nm',
          width: 150,
          align: 'center',
          ellipsis: true,
        },
        {
          title: '行政区划',
          dataIndex: 'adName',
          width: 100,
          align: 'center',
          ellipsis: true,
        },
        {
          title: '督查分类',
          dataIndex: 'chkType',
          width: 100,
          align: 'center',
        },
        {
          title: '督查事项',
          dataIndex: 'typeName',
          width: 100,
          align: 'center',
          ellipsis: true,
        },
        {
          title: '工程位置',
          dataIndex: 'objLoc',
          width: 100,
          align: 'center',
          ellipsis: true,
        },
        {
          title: '督查状态',
          dataIndex: 'state',
          width: 100,
          align: 'center',
        },
        {
          title: '上一次督查完成时间',
          dataIndex: 'intm1',
          width: 150,
          align: 'center',
          ellipsis: true,
        },
        {
          title: '经度',
          dataIndex: 'gdX',
          width: 100,
          align: 'center',
          ellipsis: true,
        },
        {
          title: '纬度',
          dataIndex: 'gdY',
          width: 100,
          align: 'center',
          ellipsis: true,
        },
        {
          title: '操作',
          dataIndex: 'action',
          width: 200,
          align: 'center',
        },
      ],
      rowData: '',
      currentResCode: '',
      currentResName: '',
      currentObjectId: '',
      currentObjectRgstrId: '',
      openType: false,
      chkType: '',
      pType: '111',
      showFulling: false,
      tableLoading: false,
    };
  },
  components: {
    superintendFilling,
  },
  computed: {
    persId() {
      return localStorage.getItem('persId')
        ? localStorage.getItem('persId')
        : '1098101939614724096';
    },
  },
  created() {
    this.getLeftTreeData();
    this.getPrjType();
  },
  mounted() {
    this.getSkDataList();
    // 浏览器自适应
    this.tableHeight = window.innerHeight - 240;
    window.addEventListener('resize', () => {
      return (() => {
        this.tableHeight = window.innerHeight - 240;
      })();
    });
  },
  watch: {
    currentNodeId(n, o) {
      this.getPrjType();
      this.getSkDataList();
    },
  },
  methods: {
    // 获取左侧树数据
    getLeftTreeData() {
      this.expandedKeys = [];
      request
        .get('/dc/organization/base/getAllNode', {
          params: {
            userId: this.persId,
            orgType: '111',
            tabType: '0',
            planType: '1',
          },
        })
        .then((res) => {
          let data = res.data;
          this.treeList = res.data;
          data.forEach((ele) => {
            if (ele.pid == null || ele.pid == '') {
              ele.pid = '111';
            }
          });
          data = this.getTrees(data);
          this.treeData = data;
          this.treeData.forEach((item) => {
            if (item.children && item.children.length > 0) {
              item.children.forEach((item1) => {
                if (item1.children && item1.children.length > 0) {
                  item1.children.forEach((item2) => {
                    item2.slots = { title: 'custom' };
                  });
                }
              });
            }
          });
          if (data[0]) {
            this.expandedKeys.push(data[0].id);
          }
          if (data[0] && data[0].children && data[0].children.length !== 0) {
            this.expandedKeys.push(
              data[0].children[data[0].children.length - 1].id,
            );
          }
        });
    },
    // 格式化树形数据
    getTrees(list) {
      // @wxcwater重写方法 适应多个树
      let highLevelLength = 99; // 预设最大节点id长度，目前最大应该为12，所以设置为99保证正常
      list.forEach((item, index) => {
        item['pidLength'] = item.pid && item.pid != '' ? item.pid.length : 0;
        if (highLevelLength > item.pidLength) {
          highLevelLength = item.pidLength;
        }
      });
      const heightLevelNode = [];
      list.forEach((item, index) => {
        if (highLevelLength >= item.pidLength) {
          heightLevelNode.push(item);
        }
      });

      list.forEach((item, index) => {
        heightLevelNode.forEach((pItem) => {
          this.addTreeNode(pItem, item);
        });
      });
      return heightLevelNode;
    },
    addTreeNode(treeNode, leafNode) {
      if (!Object.hasOwn(treeNode, 'children')) {
        treeNode['children'] = [];
      }
      if (leafNode.pid == treeNode.id) {
        treeNode.children.push(leafNode);
        return;
      }
      treeNode.children.forEach((item) => {
        this.addTreeNode(item, leafNode);
      });
    },
    treeNodeClickHandler(data, node) {
      this.currentNodeId = data[0];
    },
    // 获取督查事项下拉框数据
    getPrjType() {
      const params = {};
      const list =
        this.treeList.filter((item) => item.id == this.currentNodeId).length > 0
          ? this.treeList.filter((item) => item.id == this.currentNodeId)[0]
          : '';
      // 12位数是组名称groupName   9位数是批次名称batchName
      if (this.currentNodeId && this.currentNodeId.length == 9) {
        params.batchName = list.pnm;
      } else if (this.currentNodeId && this.currentNodeId.length == 12) {
        params.batchName =
          this.treeList.filter((item) => item.id == list.pid).length > 0
            ? this.treeList.filter((item) => item.id == list.pid)[0].pnm
            : '';
        params.groupName = '水利资金督查';
      }
      request
        .get('/att/gnrl/base/getOrderMatterDropdownBox', { params })
        .then((res) => {
          if (res.success) {
            this.prjTypeList = res.data.filter((item) => item.code != null);
          } else {
            this.$message.error(res.message);
          }
        })
        .catch(() => {
          this.$message.error('请求失败,请联系管理员!');
        });
    },
    // 获取表格数据
    getSkDataList() {
      this.tableLoading = true;
      const params = {
        prjType: this.prjType,
        presId: this.persId,
        pType: '111',
        pageSize: this.pageSize,
        pageNum: this.pageIndex,
        plnaId: this.currentNodeId,
        state: this.dcType,
        nm: this.depName,
        ownerOfc: 'other',
        planType: '1',
      };
      request.post(`/dc/insp/rsvrRgstr/list/type`, params).then((res) => {
        if (res.success) {
          res.data.list.forEach((item) => {
            if (item.intm) {
              item.intm1 = dateFormat(item.intm, 'yyyy-MM-dd');
            }
          });
          this.skDataList = res.data.list;
          this.total = res.data.total;
          this.tableLoading = false;
        }
      });
    },
    handleSizeChange(current, size) {
      this.pageSize = size;
      this.getSkDataList();
    },
    pageIndexChange(val) {
      this.pageIndex = val;
      this.getSkDataList();
    },
    toAddMember(rowData) {
      this.rowData = rowData;
      this.currentResCode = this.rowData.code;
      this.currentResName = this.rowData.nm;
      this.currentObjectId = this.rowData.objId;
      this.currentObjectRgstrId = this.rowData.rgstrId;
      this.showFulling = true;
      this.openType = true;
      this.chkType = this.rowData.chkType;
      this.$nextTick(() => {
        this.$refs.superintendFilling.openModal();
      });
    },
    toCheck(rowData) {
      this.rowData = rowData;
      this.currentResCode = this.rowData.code;
      this.currentObjectId = this.rowData.objId;
      this.currentObjectRgstrId = this.rowData.rgstrId;
      this.currentResName = this.rowData.nm;
      this.showFulling = true;
      this.openType = false;
      this.chkType = this.rowData.chkType;
      this.$nextTick(() => {
        if (this.$refs['superintendFilling']) {
          this.$refs['superintendFilling'].openModal();
        }
      });
    },
    closeModal() {
      this.showFulling = false;
      this.getSkDataList();
    },
    addShuiKuSuccess() {
      this.getSkDataList();
    },
    toDetele(row) {
      this.$confirm({
        title: '提示',
        content: '项目删除后，项目填报的问题会永久删除，请谨慎操作！',
        okType: 'warning',
        onOk: () => {
          request
            .get(`/att/gnrl/base/deleteByIds?id=${row.code}`)
            .then((res) => {
              if (res.success) {
                this.$message.success('删除成功!');
                this.getSkDataList();
              } else {
                this.$message.error(res.message);
              }
            });
        },
      });
    },
  },
};
</script>

<style lang='less' scoped>
@import url('../../assets/style/tableScroll1.less');

#dxdcListMainsk {
  overflow-y: hidden;
}
</style>
