<template>
  <div id="">
    <a-button @click="addProblem" type="primary" style="float: right;margin-bottom: 10px;position: relative;z-index: 1;" v-if="openType">添加问题
    </a-button>
    <a-table
      :loading="loading"
      :columns="columns"
      bordered
      ref="multipleTable"
      :data-source="problemList"
      row-key="pblmId"
      :pagination="false"
      :style="{ height: tableHeight + 'px' }"
      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" type="link" @click="showDetails(text.pblmId)" />
        <a-button icon="edit" type="link" @click="changeSup(text.pblmId)" v-if="ownPriv('manage') && openType" />
        <a-button
          icon="delete"
          type="link"
          v-if="ownPriv('manage') && openType"
          @click="removeSuperviseOne(text.pblmId)" />
      </span>
    </a-table>
    <a-pagination
      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-modal
      :open="supervisionDetailsVisible"
      @cancel="supervisionDetailsVisible = false"
      class="custom_dialog"
      title="问题详情"
      width="60%">
      <supervision-details ref="xianqing" :problemId="currentProblemId"></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="pType">
    </problem-edit>
    <!-- 添加问题组件 -->
    <problem-dialog
      v-if="showAddProblemDialog"
      :objType="pType"
      :villType="0"
      :objId="currentObjectId"
      :objName="currentObjectName"
      :problemMiddleType="'重点水利工程'"
      @closeDialog="closePlDialog"
      :newModelData="newModelData"
      :currentObjectRgstrId="currentObjectRgstrId">
    </problem-dialog>
    <a-modal
      :open="pblmEascaderVisible"
      class="pblmEascader"
      title="新增问题"
      width="60%"
      @ok="submitEascader"
      @cancel="pblmEascaderVisible = false">
      <pblmEascader :objType="pType" @modelData="modelData" v-if="pblmEascaderVisible"></pblmEascader>
      <span slot="footer">
        <a-button @click="pblmEascaderVisible = false">返 回</a-button>
        <a-button type="primary" @click="submitEascader">确 定</a-button>
      </span>
    </a-modal>
  </div>
</template>

<script>
import request from '../../../utils/gw_ajax_request.js';
import { dateFormat } from '../../../utils/gw_date';
import problemDialog from '../../duChaWenTi/addProblem/xiaoshuiku_problem_dialog.vue';
import ProblemDelete from '../../duChaWenTi/problemDelete.vue';
import supervisionDetails from '../../duChaWenTi/supervisionDetails_com.vue';
import problemEdit from '../../duChaWenTi/xshdProblemModify.vue';
import pblmEascader from '../project/pblmEascader';
export default {
  props: [
    'currentObjectId',
    'currentObjectName',
    'currentObjectRgstrId',
    'activeLabel',
    'pType',
    'openType',
  ],
  data() {
    return {
      tableHeight: window.innerHeight - 250,
      problemList: [],
      loading: false,
      currentPage: 1,
      pageSize: 10,
      pageNum: 1,
      total: 0,
      supervisionDetailsVisible: false,
      currentProblemId: '',
      problemDeleteVisible: false,
      deleteId: '',
      editId: '',
      changeSupervisionVisible: false,
      showAddProblemDialog: false,
      rsvrRules: null,
      probId: '',
      pblmEascaderVisible: false,
      newModelData: null,
      columns: [
        {
          title: '序号',
          dataIndex: 'index',
          align: 'center',
          width: 40,
          ellipsis: true,
        },
        {
          title: '重点水利工程问题类别',
          dataIndex: 'inspPblmName',
          align: 'center',
          width: 140,
          ellipsis: true,
        },
        {
          title: '检查项目',
          dataIndex: 'checkPoint',
          align: 'center',
          width: 100,
          ellipsis: true,
        },
        {
          title: '问题描述',
          dataIndex: 'pblmDesc',
          align: 'center',
          width: 100,
          ellipsis: true,
        },
        {
          title: '上报时间',
          dataIndex: 'collTime',
          align: 'center',
          width: 100,
          ellipsis: true,
          sorter: (a, b) => b.collTime - a.collTime,
        },
        {
          title: '操作',
          dataIndex: 'action',
          align: 'center',
          width: 100,
        },
      ],
    };
  },
  components: {
    // 详情页
    supervisionDetails,
    // 删除描述页
    ProblemDelete,
    // 修改问题
    problemEdit,
    problemDialog,
    pblmEascader,
  },
  computed: {
    persId() {
      return localStorage.getItem('persId')
        ? localStorage.getItem('persId')
        : '1098101939614724096';
    },
  },
  created() {},
  mounted() {
    this.getProblemList();
  },
  methods: {
    getProblemList() {
      const problemForm = {};
      problemForm.objId = this.currentObjectId;
      problemForm.objType = this.pType;
      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) => {
          if (res.success) {
            this.problemList = res.data.list;
            this.total = res.data.total;
            this.loading = false;
          }
        })
        .catch((err) => {
          this.$message.error(err);
          this.loading = false;
        });
    },
    showDetails(pblmId) {
      this.currentProblemId = pblmId;
      this.supervisionDetailsVisible = true;
    },
    changeSup(pblmId) {
      this.editId = pblmId;
      this.changeSupervisionVisible = true;
    },
    removeSuperviseOne(pblmId) {
      this.deleteId = pblmId;
      this.problemDeleteVisible = true;
    },
    deleteSuccess() {
      this.problemDeleteVisible = false;
      this.getProblemList();
    },
    search(val) {
      this.currentPage = val;
      this.getProblemList();
    },
    handleSizeChange() {},
    closeEditDialog() {
      this.changeSupervisionVisible = false;
      this.getProblemList();
    },
    addProblem(item) {
      this.pblmEascaderVisible = true;
    },
    closePlDialog(val) {
      this.showAddProblemDialog = false;
      this.getProblemList();
      this.newModelData = null;
    },
    submitEascader() {
      if (!this.newModelData || !this.newModelData.model.length) {
        this.$message.warning('问题不可以为空');
        return;
      }
      this.pblmEascaderVisible = false;
      // let rest = this.rsvrRules
      // this.probId = rest[0].id;
      this.showAddProblemDialog = true;
    },
    modelData(val) {
      this.newModelData = val;
    },
    timestampToTime(row) {
      return dateFormat(row.collTime, 'yyyy-MM-dd hh:mm');
    },
  },
  watch: {
    activeLabel(val) {
      if (val == '问题清单') {
        this.getProblemList();
      }
    },
  },
};
</script>

<style lang='less' scoped>
.pblmEascader .el-dialog__body {
  height: 15vh;
  overflow: auto;
}
</style>
