<template>
  <a-layout>
    <a-layout-content>
      <div class="page" style="display: flex;background-color: #fff;">
        <div class="">
          <a-form layout="inline" class="demo-form-inline" style="display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px 24px; margin-bottom: 1%;">
            <a-form-item label="督查计划" style="white-space: nowrap; flex-shrink: 0; margin-bottom: 0;">
              <a-select v-model:value="searchObj.inspTask" placeholder="督查计划" @select="getTypeList" style="width: 200px;">
                <a-select-option v-for="item in inspTaskList" :value="item.id" :key="item.id">{{ item.name }}</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="searchObj.type" placeholder="督查事项" allow-clear style="width: 200px;">
                <a-select-option v-for="item in typeList" :value="item.dictTypeCd" :key="item.dictTypeCd">{{ item.dictTypeDesc }}</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="searchObj.nm" allow-clear placeholder="督查对象名称" />
            </a-form-item>
            <a-form-item label="申请单位" style="white-space: nowrap; flex-shrink: 0; margin-bottom: 0;">
              <a-tree-select
                v-model:value="searchObj.adCode"
                :tree-data="treeData"
                show-search
                :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
                placeholder="申请单位"
                allow-clear
                :fieldNames="{children: 'children', title: 'label', value: 'id', key: 'id'}"
                tree-node-filter-prop="label"></a-tree-select>
            </a-form-item>
            <a-form-item label="调整方式" style="white-space: nowrap; flex-shrink: 0; margin-bottom: 0;">
              <a-select v-model:value="searchObj.adjustWay" placeholder="调整方式" allow-clear style="width: 200px;">
                <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-select v-model:value="searchObj.status" placeholder="状态" allow-clear style="width: 200px;">
                <a-select-option v-for="item in statusList" :value="item" :key="item">{{ item }}</a-select-option>
              </a-select>
            </a-form-item>
            <a-form-item v-if="readOnlyRole == 'display'" style="margin-bottom: 0;">
              <a-button type="primary" icon="appstore" @click="agreeShow" :disabled="!multipleSelection || multipleSelection.length==0">批量审核</a-button>
            </a-form-item>
            <a-form-item style="margin-bottom: 0;">
              <a-button type="primary"  ghost @click="searchPlan">查询</a-button>
            </a-form-item>
          </a-form>
          <a-table
            :data-source="tableData"
            :columns="columns"
            :pagination="false"
            row-key="objId"
            style="width: 100%;"
            :style="{ height: tableHeight + 'px' }"
            :row-selection="rowSelection"
            :scroll="{y:tableHeight-60}"
            bordered>
            <template #bodyCell="{ column, record, text, index }">
              <template v-if="column.dataIndex === 'index'">
                <span>{{ (pageIndex - 1) * pageSize + (index + 1) }}</span>
              </template>
              <template v-else-if="column.dataIndex === 'adjustWay'">
                <span v-if="record.adjustWay == '1'">数据调整</span>
                <span v-if="record.adjustWay == '2'">逻辑删除</span>
              </template>
              <template v-else-if="column.dataIndex === 'status'">
                <span :style="{color:record.buttonCss}">{{ record.status }}</span>
              </template>
              <template v-else-if="column.dataIndex === 'action'">
                <a-button v-if="readOnlyRole == 'display'" type="primary" size="small" @click="showFileList(record)">相关文件</a-button>
                <a-button v-if="readOnlyRole == 'display'" type="primary" size="small" @click="showApprove(record)">查看</a-button>
                <a-button type="primary" size="small" @click="showRecord(record)">记录</a-button>
              </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']"
            :show-total="total => `共${total}条`"
            @showSizeChange="handleSizeChange"
            @change="handleCurrentChange"
            style="margin-top: 10px;" />
        </div>
      </div>
      <a-modal :title="editTitle+'信息调整申请'" :open="isEditShow" width="30%" @cancel="isEditShow=false">
        <a-form :model="editForm" :label-col="{ span: 6 }" ref="editForm" class="demo-ruleForm" style="max-width: 100%;">
          <a-form-item label="调整方式">
            {{ editForm.adjustWay=='1'?'数据调整':'逻辑删除' }}
          </a-form-item>
          <a-form-item label="对象名称">
            {{ editForm.nm }}
          </a-form-item>
          <a-form-item label="原所属区划" v-show="editForm.adjustWay=='1'">
            {{ editForm.codeNm }}
          </a-form-item>
          <a-form-item label="调整后区划" v-show="editForm.adjustWay=='1'">
            {{ editForm.newCodeNm }}
          </a-form-item>
          <a-form-item label="所属区划" v-show="editForm.adjustWay=='2'">
            {{ editForm.adName }}
          </a-form-item>
          <a-form-item :label="editForm.adjustWay=='1'?'调整说明':'删除原因'">
            {{ editForm.adjustRecord }}
          </a-form-item>
        </a-form>
        <template #footer>
          <span class="dialog-footer" style="display: flex;justify-content: center;" v-if="editForm.button">
            <a-button type="primary" @click="agree(1)" :disabled="isLoadingBtn">同 意</a-button>
            <a-button type="danger" @click="agree(2)" :disabled="isLoadingBtn">驳 回</a-button>
          </span>
        </template>
      </a-modal>
      <adjustment :bizId="bizId" :bizType="bizType" :objId="objId" v-if="isAdjust" @jqmmDialogClose="jqmmDialogClose"></adjustment>
      <a-modal :title="recordTitle+'数据调整记录'" :open="isRecord" width="40%" @cancel="isRecord=false">
        <span style="display: block;max-height:500px;overflow:auto;padding: 20px">
          <a-timeline v-if="activities && activities.length>0">
            <a-timeline-item v-for="(activity, index) in activities" :key="index" color="#3fa4ff">
              <p style="font-size: 18px;font-weight: bold;">{{ activity.timestamp }}</p>
              <p style="font-size: 18px;">{{ activity.title }}</p>
              <p style="font-size: 15px;">{{ activity.detail }}</p>
            </a-timeline-item>
          </a-timeline>
          <div
            style="width:100%;height:100%;display: flex;align-items: center;justify-content: center;font-size: 20px;font-weight: bold"
            v-else>无记录</div>
        </span>
        <template #footer>
          <a-button @click="isRecord=false">关闭</a-button>
        </template>
      </a-modal>
      <a-modal
        :title="'批量审核'"
        :open="isApprove"
        width="300px"
        @cancel="isApprove=false"
        :footer="null">
        <span style="display:block;text-align: center;">
          <a-button type="primary" @click="batchAgree(1)" :disabled="isLoadingBtn">同意</a-button>
          <a-button type="warning" @click="batchAgree(2)" :disabled="isLoadingBtn">驳回</a-button>
        </span>
      </a-modal>
    </a-layout-content>
  </a-layout>
</template>

<script>
import { curAdcode_long } from '../../utils/global_variable';
import request from '../../utils/gw_ajax_request.js';
import { dateFormat } from '../../utils/gw_date.js';
import addvSearch from '../../widgets/addvSearch.vue';
import adjustment from './adjustment';
export default {
  components: {
    addvSearch,
    adjustment,
  },
  data() {
    return {
      searchObj: {
        inspTask: undefined,
        type: undefined,
        nm: '',
        adCode: undefined,
        adjustWay: undefined,
        status: undefined,
      },
      inspTaskList: [], // 督查计划下拉框
      typeList: [], // 督查事项下拉框
      treeData: [], // 申请单位下拉框
      statusList: [], // 状态下拉框
      tableHeight: window.innerHeight - 250,
      loading: false,
      pageIndex: 1,
      total: 0,
      pageSize: 10,
      addDialogVisible: false,
      addObj: {},
      userRole: '',
      dialogTitle: '添加',
      tableData: [],
      editTitle: '',
      editForm: {},
      isEditShow: false,
      isLoadingBtn: false,
      bizId: '',
      bizType: '',
      isAdjust: false,
      isEditRecordShow: false,
      isRecord: false,
      activities: [],
      recordTitle: '',
      multipleSelection: [],
      isApprove: false,
      selectedRowKeys: [],
      columns: [
        {
          title: '序号',
          dataIndex: 'index',
          width: 80,
          align: 'center',
          ellipsis: true,
        },
        {
          title: '督查对象名称',
          dataIndex: 'nm',
          align: 'center',
          ellipsis: true,
        },
        {
          title: '督查事项',
          dataIndex: 'typeName',
          align: 'center',
          ellipsis: true,
        },
        {
          title: '原所属区划',
          dataIndex: 'codeNm',
          align: 'center',
          ellipsis: true,
        },
        {
          title: '调整后区划',
          dataIndex: 'newCodeNm',
          align: 'center',
          ellipsis: true,
        },
        {
          title: '调整方式',
          dataIndex: 'adjustWay',
          align: 'center',
          ellipsis: true,
        },
        {
          title: '状态',
          dataIndex: 'status',
          align: 'center',
          ellipsis: true,
        },
        {
          title: '操作',
          dataIndex: 'action',
          align: 'center',
          ellipsis: true,
          width: 300,
        },
      ],
      objId: '',
      readOnlyRole: localStorage.getItem('readOnlyRole'),
    };
  },
  computed: {
    userId: () =>
      localStorage.getItem('persId')
        ? localStorage.getItem('persId')
        : '1098101939614724096',
    curAdcode_long() {
      return curAdcode_long;
    },
    rowSelection() {
      return {
        selectedRowKeys: this.selectedRowKeys,
        onChange: this.handleSelectionChange,
        getCheckboxProps: (record) => ({
          props: {
            disabled: record.button === false,
          },
        }),
      };
    },
  },
  created() {
    this.getinspTaskList();
    this.getTreeData();
    this.getStatusList();
  },
  mounted() {},
  methods: {
    getinspTaskList() {
      // 获取督查计划
      request.post('/bis/insp/all/plan/getList', {}).then((res) => {
        if (res.data) {
          this.inspTaskList = res.data;
          this.searchObj.inspTask = res.data[res.data.length - 1].id;
          this.getTypeList();
        }
      });
    },
    getTypeList() {
      // 获取督查事项
      this.searchObj.type = undefined;
      request
        .get(`/dict/type/getListByPlanId`, {
          params: {
            id: this.searchObj.inspTask,
            role: this.$route.path.substring(this.$route.path.length - 1),
          },
        })
        .then((res) => {
          this.typeList = res.data;
          // this.searchObj.type = res.data && res.data.length !== 0 ? res.data[0].dictTypeCd : undefined
          this.searchPlan();
        });
    },
    getTreeData() {
      // 获取申请单位
      request.get('/dc/ad/base/getOrgTreeData').then((res) => {
        this.treeData = [res.data];
        this.searchObj.adCode = res.data ? res.data.id : undefined;
      });
    },
    getStatusList() {
      // 获取状态
      request.get('/bis/insp/BisInspInfoAdjustAudit/getListVal').then((res) => {
        this.statusList = res.data;
      });
    },
    searchPlan() {
      // 查询
      this.loading = true;
      this.searchObj.pageNum = this.pageIndex;
      this.searchObj.pageSize = this.pageSize;
      this.searchObj.userRole = this.$route.path.substring(
        this.$route.path.length - 1,
      );
      request
        .post('/bis/insp/BisInspInfoAdjustAudit/getList', this.searchObj)
        .then((res) => {
          if (res.success) {
            this.tableData = res.data.list;
            this.total = res.data.total;
            this.loading = false;
            this.multipleSelection = [];
            this.$nextTick(() => {
              this.selectedRowKeys = [];
            });
          }
        });
    },
    agreeShow() {
      this.isApprove = true;
    },
    handleSelectionChange(val, row) {
      this.selectedRowKeys = val;
      this.multipleSelection = row;
    },
    showRecord(row) {
      this.recordTitle = row.nm;
      this.isRecord = true;
      this.activities = [];
      var params = {
        objId: row.objId,
      };
      request
        .post('/bis/insp/gnrlRgstrAdjust/findDtoList', params)
        .then((res) => {
          if (res.success) {
            if (res.data && res.data.length > 0) {
              var data = res.data;
              var dataList = [];
              data.forEach((item, index) => {
                var updateContent = item.detail;
                item.auditList.forEach((item1) => {
                  var date = new Date(item1.intm);
                  var timestamp =
                    date.getFullYear() +
                    '年' +
                    (date.getMonth() + 1) +
                    '月' +
                    date.getDate() +
                    '日';
                  dataList.push({
                    title: item1.roleName + '-' + item1.auditPersName,
                    timestamp: timestamp,
                    detail: item1.opStatus + ',' + updateContent,
                  });
                });
                if (index !== data.length - 1) {
                  dataList.push({
                    title: '',
                    timestamp: '--------------------------------',
                    detail: '',
                  });
                }
              });
              this.activities = dataList;
            }
          } else {
            this.$message.error(res.message);
          }
        })
        .catch((res) => {
          this.$message.error('请求错误' + res.message);
        });
    },
    jqmmDialogClose() {
      this.isAdjust = false;
    },
    showFileList(row) {
      this.bizId = row.id;
      this.bizType = 'adjustment';
      this.isAdjust = true;
      this.objId = row.objId;
    },
    batchAgree(type) {
      this.isLoadingBtn = true;
      var list = [];
      this.multipleSelection.forEach((item) => {
        list.push({
          id: item.id,
          auditWay: type,
        });
      });
      this.$confirm({
        title: '提示',
        content: `确认要批量${type == '1' ? '同意' : '驳回'}, 是否继续?`,
        okType: 'warning',
        onOk: () => {
          request
            .post(
              '/bis/insp/gnrlRgstrAdjust/batchAgreeToDismissFlowStatus',
              list,
            )
            .then((res) => {
              if (res.success) {
                this.isLoadingBtn = false;
                this.isApprove = false;
                this.searchPlan();
              }
            });
        },
        onCancel: () => {
          this.isLoadingBtn = false;
          this.$message.info('已取消删除');
        },
      });
    },
    agree(type) {
      this.isLoadingBtn = true;
      var obj = {
        id: this.editForm.id,
        auditWay: type,
      };
      request
        .post('/bis/insp/gnrlRgstrAdjust/agreeToDismissFlowStatus', obj)
        .then((res) => {
          if (res.success) {
            this.isLoadingBtn = false;
            this.isEditShow = false;
            this.searchPlan();
          }
        });
    },
    showApprove(row) {
      this.isLoadingBtn = false;
      this.editForm = row;
      this.editTitle = row.nm;
      this.isEditShow = true;
    },
    formatDate(row, column) {
      if (row[column.property]) {
        return dateFormat(row[column.property], 'yyyy-MM-dd');
      }
    },
    addPlanDialog() {
      this.addDialogVisible = true;
      this.addObj = {};
      this.dialogTitle = '添加';
    },
    handleSizeChange(size, val) {
      this.pageSize = val;
      this.searchPlan();
    },
    handleCurrentChange(val) {
      this.pageIndex = val;
      this.searchPlan();
    },
  },
  watch: {
    $route(to, from) {
      this.getinspTaskList();
      this.getTreeData();
      this.getStatusList();
      this.searchPlan();
    },
  },
};
</script>

<style lang='less' scoped>
.active {
   background: #00b0f0;
   color: white;
 }

 .el-container {
   width: 100%;
   height: 100%;
 }

 .demo-form-inline {
   padding-top: 10px;
   padding-left: 10px;
   padding-right: 10px;
 }

 .page {
   width: 100%;
   height: 100%;
   margin: 0;
   padding: 0;
 }

 .rightContent {
   width: calc(100% - 330px);
   height: calc(100% - 20px);
   margin-top: 10px;
   margin-left: 10px;
   box-shadow: 0 1px 6px 0 rgb(32 33 36 / 28%);
 }

 .rightContent :deep(.el-tabs--border-card) {
   width: 100%;
   height: 100%;
   border: 0;
 }

 .rightContent :deep(.ant-table-content) {
   height: calc(100% - 70px);
 }

 .rightContent :deep(.el-tab-pane) {
   height: 100%;
 }

 .tabs_detail1 .ant-table {
   height: 100% !important;
 }

 .tabs_detail1 :deep(.el-table__body-wrapper) {
   height: calc(100% - 40px);
   overflow: auto;
 }

 .tabs_detail2 .el-table {
   height: calc(100% - 80px) !important;
 }

 .tabs_detail2 :deep(.el-table__body-wrapper) {
   height: calc(100% - 40px);
   overflow: auto;
 }
</style>
