﻿﻿﻿﻿﻿﻿﻿﻿<template>
  <div style="height:100%;width:100%;">
    <a-layout style="height:100%;width:100%;">
      <a-layout-sider
        width="320px"
        theme="light"
        style="border-right:2px solid #d5d5ff;float:left"
        :style="{ 'max-height': testHeight + 'px', 'height': testHeight + 'px' }">
        <div class="tree" style="width: 100%; height: 100%; overflow: auto; display: inline-flex;">
          <a-tree
            :tree-data="treeData"
            @select="treeNodeClickHandler"
            :fieldNames="{ children: 'children', title: 'pnm', key: 'id' }"
            :autoExpandParent="false"
            ref="jigou_tree"
            style="height:100%;">
            <template #custom="item">
              <span style="float:left;">{{ item.pnm }}</span>
            </template>
          </a-tree>
        </div>
      </a-layout-sider>
      <a-layout-content id="dxdcListMainsk" style="padding:5px 20px;position:relative;">
        <a-row>
          <a-col :span="24">
            <a-form
              layout="inline"
              class="demo-form-inline"
              style="padding-left: 10px;">
              <a-form-item label="复核状态" style="min-width: 200px;">
                <a-select v-model:value="dcType" placeholder="复核状态" allow-clear>
                  <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="width: 23%;">
                                    <addvSearch
                                      v-model="adName"
                                      :maxHeight="300"
                                      :maxWidth="250"
                                      :rootAddCode="curAdcode_long"
                                      :level="&quot;3&quot;"
                                      :nameOrCode="'name'"></addvSearch>
                                  </a-form-item> -->
              <a-form-item label="项目名称" style="min-width: 23%;">
                <a-input v-model:value="name" placeholder="项目名称" />
              </a-form-item>
              <!-- <a-form-item label="工程规模" style="width: 23%;">
                      <a-select v-model:value="engScale" placeholder="工程规模" allow-clear>
                        <a-select-option v-for="item in engScales" :key="item.id">{{ item.name }}</a-select-option>
                      </a-select>
                    </a-form-item> -->
              <!-- <a-form-item label="所在组" style="width: 23%;">
                      <a-auto-complete
                        v-model="groupName"
                        allow-clear
                        placeholder="请输入内容"
                        :filter-option="querySearchAsync"
                        @select="handleSelect"/>
              </a-form-item> -->
              <a-form-item label="督查时间" style="min-width: 23%;">
                <div style="display: flex;">
                  <a-range-picker v-model:value="dateRange" format="YYYY-MM-DD" separator="至" allow-clear />
                </div>
              </a-form-item>
              <a-form-item style="min-width: 23%;">
                <a-button type="primary" @click="downloadTemplate" size="small" icon="download">导出</a-button>
                <a-button type="primary" @click="onSubmit" size="small" >查询</a-button>
              </a-form-item>
            </a-form>
          </a-col>
        </a-row>
        <a-table
          ref="table"
          :columns="columns"
          :data-source="slDataList"
          :loading="expLoading"
          :pagination="false"
          row-key="rgstrId"
          style="width: 100%;"
          :style="{ height: tableHeight + 'px' }"
          :scroll="{ x: 'max-content', y: tableHeight - 60 }"
          bordered>
          <template #bodyCell="{ column, record }">
            <template v-if="column.dataIndex === 'name'">
              <a-tooltip placement="top">
                <template #title>
                  <span>{{ record.name }}</span>
                </template>
                <span class="ellipsis150">{{ record.name }}</span>
              </a-tooltip>
            </template>
            <template v-else-if="column.dataIndex === 'province'">
              <a-tooltip placement="top">
                <template #title>
                  <span>{{ record.province }}</span>
                </template>
                <span class="ellipsis100">{{ record.province }}</span>
              </a-tooltip>
            </template>
            <template v-else-if="column.dataIndex === 'city'">
              <a-tooltip placement="top">
                <template #title>
                  <span>{{ record.city }}</span>
                </template>
                <span class="ellipsis100">{{ record.city }}</span>
              </a-tooltip>
            </template>
            <template v-else-if="column.dataIndex === 'county'">
              <a-tooltip placement="top">
                <template #title>
                  <span>{{ record.county }}</span>
                </template>
                <span class="ellipsis100">{{ record.county }}</span>
              </a-tooltip>
            </template>
            <template v-else-if="column.dataIndex === 'pblmType'">
              <span v-if="record.pblmType == '1'">乱占</span>
              <span v-else-if="record.pblmType == '2'">乱采</span>
              <span v-else-if="record.pblmType == '3'">乱堆</span>
              <span v-else-if="record.pblmType == '4'">乱建</span>
              <span v-else-if="record.pblmType == '5'">其他</span>
              <span v-else>{{ record.pblmType }}</span>
            </template>
            <template v-else-if="column.dataIndex === 'pblmDesc'">
              <a-tooltip placement="top">
                <template #title>
                  <span>{{ record.pblmDesc }}</span>
                </template>
                <span class="ellipsis150">{{ record.pblmDesc }}</span>
              </a-tooltip>
            </template>
            <template v-else-if="column.dataIndex === 'rectConc'">
              <span v-if="record.rectConc == '1'">已销号</span>
              <span v-else-if="record.rectConc == '2'">未销号</span>
              <span v-else>{{ record.rectConc }}</span>
            </template>
            <template v-else-if="column.dataIndex === 'groupName'">
              <a-tooltip placement="top">
                <template #title>
                  <span>{{ record.groupName }}</span>
                </template>
                <span class="ellipsis150">{{ record.groupName }}</span>
              </a-tooltip>
            </template>
            <template v-else-if="column.dataIndex === 'intm'">
              <a-tooltip placement="top">
                <template #title>
                  <span>{{ formatDate(record.intm) }}</span>
                </template>
                <span class="ellipsis120">{{ formatDate(record.intm) }}</span>
              </a-tooltip>
            </template>
            <template v-else-if="column.dataIndex === 'uptm'">
              <a-tooltip placement="top">
                <template #title>
                  <span>{{ formatDate(record.uptm) }}</span>
                </template>
                <span class="ellipsis120">{{ formatDate(record.uptm) }}</span>
              </a-tooltip>
            </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 || record.state == '0'">未复核</span>
              <span
                style="padding: 3px 10px;background:#FBB56D;border-radius:15px;color:rgba(255,255,255,1)"
                v-else-if="record.state == 1">复核中</span>
              <span
                style="padding: 3px 10px;background:#63C25E;border-radius:15px;color:rgba(255,255,255,1)"
                v-else-if="record.state == 2">已复核</span>
            </template>
            <template v-else-if="column.dataIndex === 'action'">
              <a-button size="small" type="primary" v-if="!record.rgstrId" ghost @click="toAddMember('填报',record)">填报
              </a-button>
              <a-button size="small" type="primary" v-if="record.rgstrId" ghost @click="toAddMember('编辑',record)">编辑</a-button>
              <a-button size="small" type="danger" ghost @click="deleteMember(record)">删除</a-button>
              <a-button size="small" type="danger" ghost @click="submitHandler(record)">提交</a-button>
            </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;" />
        <!-- <div class="open_board">
          <a-icon type="left" v-if="isOpen" @click="closeLeft" />
          <a-icon type="right" v-else @click="openLeft" />
        </div> -->
      </a-layout-content>
      <siLuanTianBao
        v-if="showsiLuanTianBao"
        :rowData="rowData"
        :currentObjectRgstrId="currentObjectRgstrId"
        :currentBaseId="currentBaseId"
        :currentObjectId="currentObjectId"
        :currentObjectName="currentResName"
        :objType="18"
        :openType="openType"
        @cancelHandler="cancelHandler"
        @addQiTaSuccess="addQiTaSuccess">
      </siLuanTianBao>
    </a-layout>
  </div>
</template>

<script>
import { curAdcode_long, curAdcode_short } from '../../utils/global_variable';
import request from '../../utils/gw_ajax_request.js';
import { dateFormat } from '../../utils/gw_date.js';
import { exportModel } from '../../utils/gw_exportModel';
import { getTrees } from '../../utils/gw_formatTree';
import addvSearch from '../../widgets/addvSearch.vue';
import provTreeList from '../../widgets/provTreeList.vue';
import siLuanTianBao from './siluan/siLuanTianBao.vue';

export default {
  components: {
    provTreeList: provTreeList,
    siLuanTianBao: siLuanTianBao,
    addvSearch,
  },
  data() {
    return {
      openType: '',
      orgType: '018',
      dateRange: [],
      lyjg: [],
      engScale: '',
      orgName: '',
      groupName: '',
      groupId: '',
      groups: [],
      // sttm:'',
      // ettm:'',
      adName: '',
      treeData: [],
      dxdcMainHeight: window.innerHeight - 304,
      testHeight: window.innerHeight - 111,
      slDataList: [],
      pageIndex: 1,
      pageSize: 20,
      total: 0,
      tableHeight: 0,
      currentBaseId: '',
      currentResName: '',
      currentObjectId: '',
      currentObjectRgstrId: '',
      currentObjectInfoObject: null,
      showsiLuanTianBao: false,
      currentAdCode: '',
      currentNodeId: '',
      rsvrName: '',
      dcType: '',
      sjState: '',
      rowData: '',
      disabled: true,
      showsiLuanTianBaoPl: false,
      downIcon: 'el-icon-download',
      expLoading: false,
      dataStat: '',
      name: '',
      state: '', // 根据不同省份赋值
      columns: [
        {
          title: '项目名称',
          dataIndex: 'name',
          width: 150,
          fixed: 'left',
          align: 'center',
        },
        {
          title: '省',
          dataIndex: 'province',
          width: 100,
          align: 'center',
        },
        {
          title: '市',
          dataIndex: 'city',
          width: 100,
          align: 'center',
        },
        {
          title: '县',
          dataIndex: 'county',
          width: 100,
          align: 'center',
        },
        {
          title: '问题分类',
          dataIndex: 'pblmType',
          width: 130,
          align: 'center',
        },
        {
          title: '问题描述',
          dataIndex: 'pblmDesc',
          width: 150,
          align: 'center',
        },
        {
          title: '是否销号',
          dataIndex: 'rectConc',
          width: 130,
          align: 'center',
        },
        {
          title: '所在组',
          dataIndex: 'groupName',
          width: 150,
          align: 'center',
        },
        {
          title: '创建时间',
          dataIndex: 'intm',
          width: 120,
          align: 'center',
        },
        {
          title: '修改时间',
          dataIndex: 'uptm',
          width: 120,
          align: 'center',
        },
        {
          title: '复核状态',
          dataIndex: 'state',
          width: 130,
          align: 'center',
        },
      ],
    };
  },
  computed: {
    persId() {
      return localStorage.getItem('persId')
        ? localStorage.getItem('persId')
        : '1098101939614724096';
    },
    isAdmin: () =>
      localStorage.getItem('isAdmin') ? localStorage.getItem('isAdmin') : '',
    curAdcode_short() {
      return curAdcode_short;
    },
    curAdcode_long() {
      return curAdcode_long;
    },
  },
  created() {
    if (this.ownPriv('manage')) {
      this.columns.push({
        title: '操作',
        dataIndex: 'action',
        width: 220,
        align: 'center',
        fixed: 'right',
      });
    }
  },
  mounted() {
    this.$nextTick(function () {
      this.tableHeight =
        window.innerHeight - this.$refs.table.$el.offsetTop - 200;
      window.onresize = () => {
        this.tableHeight =
          window.innerHeight - this.$refs.table.$el.offsetTop - 200;
      };
    });
    this.getLeftTreeData();
    this.currentNodeId = '';
    this.rsvrName = '';
    this.dcType = '';
    this.getSiLuanDataList();
    this.getAllGroup();
  },
  watch: {
    currentNodeId(n, o) {
      this.getSiLuanDataList();
    },
    groupName(n, o) {
      if (n == '') {
        this.groupId = '';
      }
    },
  },
  methods: {
    // 获取所有的组
    getAllGroup() {
      request
        .get('/dc/user/getGroupByPersid', {
          params: { persid: this.persId, ptype: '18' },
        })
        .then((res) => {
          if (res.success) {
            this.groups = res.data;
          }
        });
    },
    querySearchAsync(queryString, cb) {
      var restaurants = this.groups;
      var results = queryString
        ? restaurants.filter(this.createStateFilter(queryString))
        : restaurants;

      clearTimeout(this.timeout);
      this.timeout = setTimeout(() => {
        cb(results);
      }, 1500 * Math.random());
    },
    createStateFilter(queryString) {
      return (state) => {
        return state.nm.toLowerCase().indexOf(queryString.toLowerCase()) != -1;
      };
    },
    handleSelect(item) {
      console.log(item);
      this.groupId = item.id;
    },
    getLeftTreeData() {
      this.lyjg = [];
      request
        .get('/dc/organization/base/getAllNode', {
          params: { userId: this.persId, orgType: this.orgType },
        })
        .then((res) => {
          let data = res.data;
          data.forEach((ele) => {
            if (ele.id.length == 6) {
              this.lyjg.push(ele);
            }
          });
          data = getTrees(data);
          this.treeData = data;
          console.log(data);
        });
    },
    treeNodeClickHandler: function (data, node, tree) {
      this.currentNodeId = data[0];
    },
    provTreeSelectChangeHandler: function (params) {
      this.currentAdCode = params.likeCode;
      this.getSiLuanDataList();
    },
    formatDate(timestamp) {
      if (timestamp) {
        return dateFormat(timestamp, 'yyyy-MM-dd');
      }
    },
    getSiLuanDataList: function () {
      this.expLoading = true;
      let paramStartDate = '';
      let paramEndDate = '';
      if (
        this.dateRange &&
        this.dateRange.length > 1 &&
        this.dateRange[0] != '' &&
        this.dateRange[1] != ''
      ) {
        paramStartDate = this.dateRange[0];
        paramEndDate = this.dateRange[1];
      }
      const params = {
        sttm: paramStartDate,
        entm: paramEndDate,
        pageSize: this.pageSize,
        pageNum: this.pageIndex,
        groupId: this.groupId,
        name: this.name,
        state: this.dcType,
        persId: this.persId,
        plnaId: this.currentNodeId,
        adName: this.adName,
      };
      // /bis/insp/fsc/rgstr/list/page
      request
        .post(`/att/jskejian/flkdis/rgstr/list/page`, params)
        .then((res) => {
          if (res.success) {
            this.expLoading = false;
            if (res.data.list) {
              this.slDataList = res.data.list;
              this.total = res.data.total;
            }
          }
        });
    },
    onSubmit() {
      this.getSiLuanDataList();
    },
    toAddMember(type, rowData) {
      this.rowData = rowData;
      console.log(rowData);
      this.currentBaseId = this.rowData.code;
      this.currentObjectId = this.rowData.objId;
      this.currentObjectRgstrId = this.rowData.rgstrId;
      this.currentResName = this.rowData.name;
      this.showsiLuanTianBao = true;
      this.openType = true;
    },
    toCheck(rowData) {
      this.rowData = rowData;
      console.log(rowData);
      this.currentBaseId = this.rowData.code;
      this.currentObjectId = this.rowData.objId;
      this.currentObjectRgstrId = this.rowData.rgstrId;
      this.currentResName = this.rowData.name;
      this.showsiLuanTianBao = true;
      this.openType = true;
    },
    cancelHandler() {
      this.showsiLuanTianBao = false;
    },
    addQiTaSuccess() {
      this.getSiLuanDataList();
      // this.showsiLuanTianBao = false;
    },
    deleteMember(obj) {
      console.log(obj);
      // /dc/insp/rsvrRgstr/delete/{id}
      this.$confirm({
        title: '提示',
        content:
          '此操作将删除该条相关的所有已填报的信息和问题，确认删除该条数据吗？',
        okType: 'warning',
        onOk: () => {
          request
            .get(
              `/supervision/plan/cleanObjDataByObjId?objType=${this.orgType}&objId=${obj.objId}`,
            )
            .then((res) => {
              if (res.success) {
                this.pageIndexChange();
                this.$message.success('删除成功');
              } else {
                this.$message.error(res.message);
              }
            });
        },
      });
    },
    submitHandler(rowData) {
      console.log(rowData);
      this.$confirm({
        title: '提示',
        content: '请确认所有信息填报完毕？',
        okType: 'warning',
        onOk: () => {
          const formObj = {
            id: rowData.rgstrId,
            state: '2',
          };
          request.post('/att/jskejian/flkdis/rgstr', formObj).then((res) => {
            if (res.success) {
              request
                .get('/dc/insp/pblm/submit/updateState/' + rowData.objId)
                .then((res) => {
                  if (res.success) {
                    this.addQiTaSuccess();
                    this.$message.success('提交成功');
                  } else {
                    this.cancelHandler();
                  }
                });
            } else {
              this.cancelHandler();
            }
          });
        },
      });
    },
    pageIndexChange(val) {
      console.log(val);
      this.pageIndex = val;
      this.getSiLuanDataList();
    },
    handleSizeChange(size, val) {
      this.pageSize = val;
      this.getSiLuanDataList();
    },
    // 下载填报模板
    async downloadTemplate() {
      let paramStartDate = '';
      let paramEndDate = '';
      if (
        this.dateRange &&
        this.dateRange.length > 1 &&
        this.dateRange[0] != '' &&
        this.dateRange[1] != ''
      ) {
        paramStartDate = this.dateRange[0];
        paramEndDate = this.dateRange[1];
      }
      const params = {
        sttm: paramStartDate,
        entm: paramEndDate,
        pageSize: this.pageSize,
        pageNum: this.pageIndex,
        groupId: this.groupId,
        name: this.name,
        state: this.dcType,
        persId: this.persId,
        plnaId: this.currentNodeId,
        adName: this.adName,
      };

      var data = params;
      const url = '/pdcApi/att/jskejian/flkdis/rgstr/list/page/export';
      const downloadName = '河湖四乱督查列表.xls';
      const type = 'post';
      await exportModel(type, url, downloadName, data);
      this.disabled = false;
    },
    // downloadTemplate(){
    //     let paramStartDate = '';
    //     let paramEndDate = '';
    //     if(this.dateRange&&this.dateRange.length>1&&this.dateRange[0]!=''&&this.dateRange[1]!=''){
    //         paramStartDate = this.dateRange[0];
    //         paramEndDate = this.dateRange[1];
    //     }
    //     let params = {
    //         "sttm": paramStartDate,
    //         "entm": paramEndDate,
    //         "pageSize": this.pageSize,
    //         "pageNum": this.pageIndex,
    //         "groupId": this.groupId,
    //         "name": this.name,
    //         "state": this.dcType,
    //         "persId": this.persId,
    //         "plnaId": this.currentNodeId,
    //         "adName": this.adName
    //     };
    //
    //     var data = params;
    //     var xhr = new XMLHttpRequest();
    //     xhr.open("post", "/pdcApi/att/jskejian/flkdis/rgstr/list/page/export", true);
    //     xhr.responseType = "blob";
    //     xhr.setRequestHeader(
    //         "Content-Type","application/json;charset=utf-8"
    //     );
    //     xhr.setRequestHeader(
    //         "persId",localStorage.getItem("userid") ? localStorage.getItem("userid") : ""
    //     );
    //     xhr.setRequestHeader(
    //         "orgId",localStorage.getItem('currentOrgId') ? localStorage.getItem('currentOrgId') : ''
    //     );
    //     xhr.setRequestHeader(
    //         'accessToken',localStorage.getItem('accessToken') ? localStorage.getItem('accessToken') : ''
    //     );
    //     xhr.onload = function() {
    //         if (this.status == 200) {
    //         var blob = this.response;
    //         var a = document.createElement("a");
    //         var url = window.URL.createObjectURL(blob);
    //         a.href = url;
    //         //设置文件名称
    //         a.download = "河湖四乱督查列表.xls";
    //         a.click();
    //
    //         }
    //     };
    //     xhr.send(JSON.stringify(data));
    //
    //     // this.downloadTemplateSet();
    //     this.disabled = false;
    // },
    async downloadTemplateSet() {
      let paramStartDate = '';
      let paramEndDate = '';
      if (
        this.dateRange &&
        this.dateRange.length > 1 &&
        this.dateRange[0] != '' &&
        this.dateRange[1] != ''
      ) {
        paramStartDate = this.dateRange[0];
        paramEndDate = this.dateRange[1];
      }
      const url = `/pdcApi/bis/insp/other/pblm/downTemplate?fileName=pblmOther.xlsx&adName=${this.adName}&name=${this.name}&state=${this.dcType}&entm=${paramEndDate}sttm=${paramStartDate}&presId=${this.persId}&startRow=1`;
      const downloadName = '其他填报模板.xls';
      const type = 'get';
      await exportModel(type, url, downloadName);
    },
    // downloadTemplateSet(){
    //     let paramStartDate = '';
    //     let paramEndDate = '';
    //     if(this.dateRange&&this.dateRange.length>1&&this.dateRange[0]!=''&&this.dateRange[1]!=''){
    //         paramStartDate = this.dateRange[0];
    //         paramEndDate = this.dateRange[1];
    //     }
    //     let href = `/pdcApi/bis/insp/other/pblm/downTemplate?fileName=pblmOther.xlsx&adName=${this.adName}&name=${this.name}&state=${this.dcType}&entm=${paramEndDate}sttm=${paramStartDate}&presId=${this.persId}&startRow=1`;
    //     const a = document.createElement('a'); // 创建a标签
    //     a.setAttribute('download', '其他填报模板.xls');// download属性
    //     a.setAttribute('href', href);// href链接
    //     a.click();// 自执行点击事件
    // },
    showPlDialog() {
      this.showsiLuanTianBaoPl = true;
    },
    closePlDialog(val) {
      this.showsiLuanTianBaoPl = false;
    },
    uploadSuccess() {
      this.showsiLuanTianBaoPl = false;
      this.getSiLuanDataList();
    },
    typeFormatter(row, column) {
      return row.pblmType == '1'
        ? '乱占'
        : row.pblmType == '2'
          ? '乱采'
          : row.pblmType == '3'
            ? '乱堆'
            : row.pblmType == '4'
              ? '乱建'
              : row.pblmType == '5'
                ? '其他'
                : row.pblmType;
    },
    rectConcFilter(row, column) {
      return row.rectConc == '1'
        ? '已销号'
        : row.rectConc == '2'
          ? '未销号'
          : row.rectConc;
    },
  },
};
</script>

<style lang='less' scoped>
.el-table .warning-row {
  background: oldlace;
}

.el-table .success-row {
  background: #f0f9eb;
}

#dxdcListMainsk {
  overflow-y: hidden;
}

/deep/ .ant-table-pagination {
  float: left;
}

/deep/ .ant-layout-sider,
/deep/ .ant-layout-content {
  background: #fff;
}

/deep/ .ant-table-thead>tr>th,
/deep/ .ant-table-tbody>tr>td {
  padding: 0;
  height: 60px;
}

.ellipsis200 {
  display: block;
  width: 198px;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}
.ellipsis100 {
  display: block;
  width: 98px;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}
.ellipsis120 {
  display: block;
  width: 118px;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

.ellipsis150 {
  display: block;
  width: 148px;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

/deep/ .ant-table-scroll {
  position: relative;
  z-index: 1;
}

/deep/.ant-table-fixed-left,
/deep/ .ant-table-fixed-right {
  z-index: 2;
}

.open_board {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 24px;
  height: 30px;
  line-height: 30px;
  border: solid 1px #ddd;
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
  text-align: center;
  background-color: #bbebff;
  cursor: pointer;
}
</style>
