<template>
  <div id="shuikutianbaoId">
    <a-modal :title="currentObjectName + '督查填报'" :footer="null" width="60%" :open="dialogFormVisible" @cancel="closeDialog">
      <a-layout>
        <a-layout-content id="dxdcListMain" style="padding:5px 20px;">
          <a-tabs v-model="currentViewId" type="card">
            <a-tab-pane key="问题清单" tab="问题清单">
              <a-button v-if="openType" @click="addProblem" type="primary" style="margin-bottom: 10px;position: relative;z-index: 1;">添加问题</a-button>
              <a-table
                ref="multipleTable"
                :loading="loading"
                :data-source="problemList"
                :columns="columns"
                bordered
                row-key="pblmId"
                :pagination="false"
                :style="{ height: tableHeight + 'px' }"
                :scroll="{ y: tableHeight - 60 }"
                style="width: 100%">
                <span slot="index" slot-scope="text, recode, index">
                  {{ (currentPage - 1) * pageSize + (index + 1) }}
                </span>
                <span slot="collTime" slot-scope="text">
                  {{ timestampToTime(text) }}
                </span>
                <span slot="action" slot-scope="text">
                  <a-button icon="eye" title="查看详情" type="link" @click="showDetails(text.pblmId)" />
                  <a-button icon="edit" type="link" title="修改问题" @click="changeSup(text.pblmId)" v-if="openType && !(text.workflowStat && text.workflowStat != '10')" />
                  <a-button icon="delete" type="link" v-if="openType && !(text.workflowStat && text.workflowStat!='10')" title="删除问题" @click="removeSuperviseOne(text.pblmId)" />
                </span>
              </a-table>
              <a-pagination
                :current="currentPage"
                show-size-changer
                :pageSize.sync="pageSize"
                :total="total"
                :page-size-options="['10', '20', '50', '100']"
                :show-total="total => `共${total}条`"
                @showSizeChange="handleSizeChange"
                @change="search"
                style="margin-top: 10px;" />
            </a-tab-pane>
          </a-tabs>
        </a-layout-content>
      </a-layout>
    </a-modal>

    <a-modal
      :open="pblmEascaderVisible"
      class="pblmEascader"
      title="新增问题"
      width="60%"
      @cancel="pblmEascaderVisible = false">
      <pblmEascader v-if="pblmEascaderVisible" :objType="rowData.type" @modelData="modelData"></pblmEascader>
      <span slot="footer">
        <a-button @click="pblmEascaderVisible = false">返 回</a-button>
        <a-button type="primary" @click="submitEascader">确 定</a-button>
      </span>
    </a-modal>

    <!-- 添加问题组件 -->
    <problem-dialog
      v-if="showAddProblemDialog"
      :showAddProblemDialog="showAddProblemDialog"
      :objType="111"
      :rowData="rowData"
      :villType="111"
      :objId="currentObjectId"
      :regId="currentObjectRgstrId"
      :objName="currentObjectName"
      :problemMiddleType="'通用督查'"
      @closeDialog="closePlDialog"
      :newModelData="newModelData"
      :currentObjectRgstrId="currentObjectRgstrId"
      :flag="flag">
    </problem-dialog>

    <!-- 详情组件-->
    <a-modal
      :open="supervisionDetailsVisible"
      @cancel="supervisionDetailsVisible = false"
      class="custom_dialog"
      title="问题详情"
      width="60%">
      <supervision-details ref="xianqing" :problemId="currentProblemId" :objType="pType"></supervision-details>
      <span slot="footer">
        <a-button style="margin-top:5px;" @click="supervisionDetailsVisible = false">返回</a-button>
      </span>
    </a-modal>

    <!-- 删除组件 -->
    <a-modal
      :open="problemDeleteVisible"
      @cancel="problemDeleteVisible = false"
      class="deleteDialog"
      title="问题删除描述"
      width="60%">
      <Problem-delete ref="deleteMiaoShu" :deleteProblemId="deleteId" @deleteSuccess="deleteSuccess"></Problem-delete>
      <span slot="footer">
        <a-button @click="problemDeleteVisible = false">返回</a-button>
      </span>
    </a-modal>

    <!-- 修改组件 -->
    <problem-edit :editId="editId" @closeEditDialog="closeEditDialog" v-if="changeSupervisionVisible" :pType="rowData.type">
    </problem-edit>
  </div>
</template>

<script>
import request from '@/utils/gw_ajax_request';
import problemDialog from '../duChaWenTi/addProblem/xiaoshuiku_problem_dialog.vue';
import problemEdit from '../duChaWenTi/commonProblemModify.vue';
import ProblemDelete from '../duChaWenTi/problemDelete.vue';
import supervisionDetails from '../duChaWenTi/supervisionDetails_common.vue';
import pblmEascader from './project/pblmEascader.vue';
export default {
  props: [
    'rowData',
    'currentObjectRgstrId',
    'currentResCode',
    'currentObjectId',
    'currentObjectName',
    'pType',
    'openType',
    'flag',
  ],
  data() {
    return {
      currentRowData: {},
      currentViewId: '问题清单',
      dialogFormVisible: true,
      loading: false,
      problemList: [],
      columns: [
        {
          title: '序号',
          dataIndex: 'index',
          align: 'center',
          width: 100,
          ellipsis: true,
        },
        {
          title: '督查问题类别',
          dataIndex: 'inspPblmName',
          align: 'center',
          width: 180,
          ellipsis: true,
        },
        {
          title: '检查项目',
          dataIndex: 'checkPoint',
          align: 'center',
          width: 150,
          ellipsis: true,
        },
        // {
        //   title: '问题描述',
        //   dataIndex: 'pblmDescBz',
        //   align: 'center',
        //   width: 200,
        //   ellipsis: true
        // },
        // ,
        {
          title: '详细描述',
          dataIndex: 'inspPblmDesc',
          align: 'center',
          width: 200,
          ellipsis: true,
        },
        {
          title: '上报时间',
          dataIndex: 'collTime',
          align: 'center',
          width: 150,
          ellipsis: true,
          sorter: (a, b) => b.collTime - a.collTime,
        },
        {
          title: '操作',
          dataIndex: 'action',
          align: 'center',
        },
      ],
      tableHeight: 560,
      currentPage: 1,
      pageSize: 10,
      total: 0,
      pblmEascaderVisible: false,
      newModelData: null,
      showAddProblemDialog: false,
      currentProblemId: '',
      supervisionDetailsVisible: false,
      deleteId: '',
      problemDeleteVisible: false,
      editId: '',
      changeSupervisionVisible: false,
    };
  },
  components: {
    pblmEascader,
    problemDialog,
    supervisionDetails,
    ProblemDelete,
    problemEdit,
  },
  computed: {
    persId() {
      return localStorage.getItem('persId')
        ? localStorage.getItem('persId')
        : '1098101939614724096';
    },
  },
  mounted() {
    this.currentRowData = this.rowData;
    this.getProblemList();
  },
  methods: {
    getProblemList() {
      const problemForm = {};
      problemForm.objId = this.currentObjectId;
      problemForm.objType = '111';
      problemForm.pageNum = this.currentPage;
      problemForm.pageSize = this.pageSize;
      problemForm.presId = this.persId;
      this.loading = true;
      request
        .post(`/dc/insp/pblm/list/${this.persId}`, problemForm)
        .then((res) => {
          this.loading = false;
          if (res.success) {
            this.problemList = res.data.list;
            this.total = res.data.total;
          } else {
            this.$message.error(res.message);
            this.loading = false;
          }
        });
    },
    timestampToTime(row, column) {
      var date = new Date(row.collTime);
      var Y = date.getFullYear() + '-';
      var M =
        (date.getMonth() + 1 < 10
          ? '0' + (date.getMonth() + 1)
          : date.getMonth() + 1) + '-';
      var D =
        (date.getDate() < 10 ? '0' + date.getDate() : date.getDate()) + ' ';
      var h =
        (date.getHours() < 10 ? '0' + date.getHours() : date.getHours()) + ':';
      var m =
        date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes();
      return Y + M + D + h + m;
    },
    closeDialog() {
      this.$confirm({
        title: '提示',
        content: '确认退出吗？',
        okType: 'warning',
        onOk: () => {
          this.$emit('cancelHandler');
        },
      });
    },
    search(size) {
      this.currentPage = size;
      this.getProblemList();
    },
    handleSizeChange(val, size) {
      this.pageSize = size;
      this.getProblemList();
    },
    addProblem(item) {
      this.pblmEascaderVisible = true;
    },
    submitEascader() {
      if (!this.newModelData || !this.newModelData.model.length) {
        this.$message.warning('问题不可以为空');
        return;
      }
      this.pblmEascaderVisible = false;
      this.showAddProblemDialog = true;
    },
    modelData(val) {
      this.newModelData = val;
    },
    closePlDialog(val) {
      this.showAddProblemDialog = false;
      this.getProblemList();
      this.newModelData = null;
    },
    showDetails(pblmId) {
      this.currentProblemId = pblmId;
      this.supervisionDetailsVisible = true;
    },
    removeSuperviseOne(pblmId) {
      this.deleteId = pblmId;
      this.problemDeleteVisible = true;
    },
    deleteSuccess() {
      this.problemDeleteVisible = false;
      this.getProblemList();
    },
    changeSup(pblmId) {
      this.editId = pblmId;
      this.changeSupervisionVisible = true;
    },
    closeEditDialog() {
      this.changeSupervisionVisible = false;
      this.getProblemList();
    },
  },
};
</script>

<style lang="less" scoped>
@import url('../../assets/style/tableScroll1.less');
.pblmEascader .el-dialog__body {
  height: 15vh;
  overflow: auto;
}
</style>
