<template>
  <div id="">
    <a-table
      ref="pblmMonthlyReportDataTable"
      :row-selection="{
        columnWidth: 60,
        selectedRowKeys: selectedRowKeys,
        onChange: handleSelectionChange,
      }"
      :columns="columns"
      :data-source="tableSetting.data"
      :rowClassName="tableRowClassName"
      :loading="loading"
      :pagination="false"
      row-key="pblmId"
      style="width: 100%;"
      :style="{height: height + 'px'}"
      class="mainTable"
      :scroll="{x: 'max-content', y: height - 60}"
      bordered>
      <template #bodyCell="{ column, record }">
        <template v-if="column.dataIndex === 'adName'">
          <a-tooltip placement="top">
            <template #title>
              <span>{{ record.adName }}</span>
            </template>
            <span class="ellipsis150">{{ record.adName }}</span>
          </a-tooltip>
        </template>
        <template v-if="column.dataIndex === 'upAdName'">
          <a-tooltip placement="top">
            <template #title>
              <span>{{ record.upAdName }}</span>
            </template>
            <span class="ellipsis150">{{ record.upAdName }}</span>
          </a-tooltip>
        </template>
        <template v-if="column.dataIndex === 'fileNoNumber'">
          <a-tooltip placement="top">
            <template #title>
              <span>{{ record.fileNoNumber }}</span>
            </template>
            <span class="ellipsis150">{{ record.fileNoNumber }}</span>
          </a-tooltip>
        </template>
        <template v-if="column.dataIndex === 'inspPblmDesc'">
          <a-tooltip placement="top">
            <template #title>
              <span>{{ record.inspPblmDesc }}</span>
            </template>
            <span class="ellipsis180">{{ record.inspPblmDesc }}</span>
          </a-tooltip>
        </template>
        <template v-if="column.dataIndex === 'pblmSource'">
          <a-tooltip placement="top">
            <template #title>
              <span>{{ record.pblmSource }}</span>
            </template>
            <span class="ellipsis180">{{ record.pblmSource }}</span>
          </a-tooltip>
        </template>
        <template v-if="column.dataIndex === 'nm'">
          <a-tooltip placement="top">
            <template #title>
              <span>{{ record.nm }}</span>
            </template>
            <span class="ellipsis150">{{ record.nm }}</span>
          </a-tooltip>
        </template>
        <template v-if="column.dataIndex === 'ym'">
          <a-tooltip placement="top">
            <template #title>
              <span>{{ record.ym }}</span>
            </template>
            <span class="ellipsis150">{{ record.ym }}</span>
          </a-tooltip>
        </template>
        <template v-if="column.dataIndex === 'zgDate'">
          <a-tooltip placement="top">
            <template #title>
              <span>{{ record.zgDate }}</span>
            </template>
            <span class="ellipsis150">{{ record.zgDate }}</span>
          </a-tooltip>
        </template>
        <template v-if="column.dataIndex === 'zgContent'">
          <a-tooltip placement="top">
            <template #title>
              <span>{{ record.zgContent }}</span>
            </template>
            <span class="ellipsis150">{{ record.zgContent }}</span>
          </a-tooltip>
        </template>
        <template v-if="column.dataIndex === 'action'">
          <a-button type="link" icon="eye" @click.stop="showPblmDetailDialog(record.pblmId, record.workflowStat)"></a-button>
        </template>
      </template>
    </a-table>
    <a-pagination
      show-size-changer
      :pageSize="tableSetting.pagination.pageSize"
      @update:pageSize="(val) => { tableSetting.pagination.pageSize = val }"
      :total="tableSetting.pagination.pblmCount"
      :page-size-options="['10','20','50','100']"
      :show-total="total => `共${total}条`"
      @showSizeChange="handleSizeChange"
      @change="handlePageNumChange"
      style="margin-top: 10px;" />
    <!-- 详情弹框 -->
    <pblm-detail
      :pblmId="tableSetting.currentPblmId"
      :pType="1"
      :pblmCurrentWorkflowStat="tableSetting.currentPblmWorkflowStat"
      @closePblmDetailDialog="closePblmDetailDialog"
      v-if="showPblmDetail" />
    <!-- 整改信息录入弹框 -->
    <pblm-rectify-info
      :pblmId="tableSetting.currentPblmId"
      :pType="1"
      @saveRectifyInfo="saveRectifyInfo"
      @closePblmRectifyInfoDialog="closePblmRectifyInfoDialog"
      v-if="showPblmRectifyInfo" />
    <!-- 整改进度月报弹框 -->
    <pblm-monthly-report-info
      :pblmId="tableSetting.currentPblmId"
      :pType="1"
      @savePblmMonthlyReportInfo="savePblmMonthlyReportInfo"
      @closePblmMonthlyReportInfoDialog="closePblmMonthlyReportDialog"
      v-if="showPblmMonthlyReportDialog" />
    <a-modal title="批量修改预计完成整改日期" v-if="showUpdateDate" :open="showUpdateDate" :ok-text="'提交'" @ok="submitUpdateDate" @cancel="showUpdateDate = false">
      <a-form-item label="需要修改的月报时间">
        <a-date-picker v-model:value="upDate.ym" placeholder="需要修改的月报时间" style="width: 100%;" />
      </a-form-item>
    </a-modal>
  </div>
</template>

<script>
import { formatDateTime2 } from '../../../utils/gw_date';
import {
  distributePblmToSjdw,
  formatWorkflowStat,
  savePblmRectifyInfo,
  updateBatchMendDate,
} from '../../PblmRectify/Common/rectify_api';
import { formatDeadLineDate } from '../../PblmRectify/Common/rectify_date';
import pblmDetail from '../../PblmRectify/Components/pblmDetail.vue';
import pblmRectifyInfo from '../../PblmRectify/Components/pblmRectifyInfo.vue';
import pblmMonthlyReport from '../../PblmRectifyMonthlyReport/Components/pblmMonthlyReport.vue';
export default {
  props: {
    pblmTableSetting: {
      type: Object,
      default: () => {
        return {
          isDuty: false,
          data: [], // 主数据源
          pagination: {
            pageSize: 20,
            pageNum: 1,
            pblmCount: 0,
          }, // 翻页相关配置项
          height: 700,
          currentPblmId: '', // 当前选中的问题的ID
          currentPblmWorkflowStat: '', // 当前选中的问题的流程状态
          selectedPblms: [], // 多选模式下选中的所有问题集合
          multiSelect: true, // 是否出现行复选框
          enablePblmRectifyInfo: false, // 是否在操作栏显示输入整改信息按钮
          showWorkflowStat: true, // 是否显示整改状态,默认显示
          enableMonthlyReport: false,
        };
      },
    },
  },
  data() {
    return {
      upDate: {
        ym: '',
      },
      showUpdateDate: false,
      showPblmDetail: false, // 是否显示问题详情
      showPblmRectifyInfo: false, // 是否显示整改内容输入窗体
      showPblmMonthlyReportDialog: false, // 是否显示整改进度月报输入窗体
      tableSetting: this.pblmTableSetting,
      loading: false,
      height: window.screen.height - 370,
      selectedRowKeys: [],
      columns: [
        {
          title: '县（市、区）',
          dataIndex: 'adName',
          width: 150,
          fixed: 'left',
          align: 'center',
        },
        {
          title: '设区市/直管县',
          dataIndex: 'upAdName',
          width: 150,
          align: 'center',
        },
        {
          title: '序号',
          dataIndex: 'fileNoNumber',
          align: 'center',
          width: 150,
        },
        {
          title: '问题描述',
          dataIndex: 'inspPblmDesc',
          align: 'center',
          width: 180,
        },
        {
          title: '问题来源',
          dataIndex: 'pblmSource',
          align: 'center',
          width: 180,
        },
        {
          title: '工程名称',
          dataIndex: 'nm',
          align: 'center',
          width: 150,
        },
        {
          title: '月报时间',
          dataIndex: 'ym',
          align: 'center',
          width: 150,
        },
        {
          title: '要求整改完成时限',
          dataIndex: 'zgDate',
          align: 'center',
          width: 150,
        },
        {
          title: '整改工作进展情况',
          dataIndex: 'zgContent',
          align: 'center',
          width: 150,
        },
        {
          title: '操作',
          dataIndex: 'action',
          align: 'center',
          width: 150,
          fixed: 'right',
        },
      ],
    };
  },
  components: {
    pblmDetail,
    pblmRectifyInfo,
    pblmMonthlyReportInfo: pblmMonthlyReport,
  },
  computed: {
    formatDateTime() {
      return formatDateTime2;
    },
    formatDeadLineDate() {
      return formatDeadLineDate;
    },
    formatWorkflowStat() {
      return formatWorkflowStat;
    },
  },
  created() {
    if (typeof this.pblmTableSetting.showWorkflowStat === undefined) {
      this.pblmTableSetting.showWorkflowStat = true;
    }
  },
  mounted() {
    // this.$refs.pblmMonthlyReportDataTable.doLayout();
  },
  methods: {
    submitUpdateDate() {
      if (!this.upDate.ym) {
        this.$message.warning('请选择需要更新的月报时间');
        return;
      }
      updateBatchMendDate(this.upDate).then((res) => {
        if (res.success) {
          this.upDate = {
            ym: '',
          };
          this.showUpdateDate = false;
          this.$emit('refreshTable');
        } else {
          this.$message.warning(res.messsage);
        }
      });
    },
    showBatchUpdate() {
      this.showUpdateDate = true;
    },
    checkSelect(row, index) {
      if (row.zgContent) {
        return true;
      }
      return false;
    },
    tableRowClassName(data, index) {
      if (data.zgContent) {
        return 'redRow';
      }
      return 'whiteRow';
    },
    handleSizeChange(current, size) {
      this.tableSetting.pagination.pageSize = size;
      // 触发父组件更新主数据源数据(主要将分页信息传回)
      this.$emit('sizeChange', {
        pageSize: this.tableSetting.pagination.pageSize,
      });
    },
    handlePageNumChange(pageNum) {
      this.tableSetting.pagination.pageNum = pageNum;
      // 触发父组件更新主数据源数据(主要将分页信息传回)
      this.$emit('pageChange', {
        pageNum: this.tableSetting.pagination.pageNum,
      });
    },
    handleSelectionChange(val, row) {
      this.selectedRowKeys = val;
      this.tableSetting.selectedPblms = row;
      this.$emit('selectionChange', {
        selectedPblms: this.tableSetting.selectedPblms,
      });
    },
    tableRowClick(row) {
      this.$refs.pblmMonthlyReportDataTable.toggleRowSelection(row);
    },
    closePblmDetailDialog(id) {
      this.tableSetting.currentPblmId = '';
      this.tableSetting.currentPblmWorkflowStat = '';
      this.showPblmDetail = false;
    },
    showPblmDetailDialog(pblmId, workflowStat) {
      this.tableSetting.currentPblmId = pblmId;
      this.tableSetting.currentPblmWorkflowStat = workflowStat;
      if (this.tableSetting.currentPblmId) {
        this.showPblmDetail = true;
      } else {
        this.$message.warning('请选择需要查看的问题!');
      }
    },
    showPblmRectifyInfoDialog(pblmId) {
      this.tableSetting.currentPblmId = pblmId;
      if (this.tableSetting.currentPblmId) {
        this.showPblmRectifyInfo = true;
      } else {
        this.$message.warning('请选择需要整改的问题!');
      }
    },
    saveRectifyInfo(val) {
      const pblm = {};
      pblm.pblmId = this.tableSetting.currentPblmId;
      pblm.zgZgxx = val.zgZgxx;
      savePblmRectifyInfo(pblm).then((res) => {
        this.tableSetting.currentPblmId = '';
        this.showPblmRectifyInfo = false;
      });
    },
    closePblmRectifyInfoDialog() {
      this.tableSetting.currentPblmId = '';
      this.showPblmRectifyInfo = false;
    },
    openPblmMonthlyReportDialog(pblmId) {
      this.tableSetting.currentPblmId = pblmId;
      if (this.tableSetting.currentPblmId) {
        this.showPblmMonthlyReportDialog = true;
      } else {
        this.$message.warning('请选择需要操作的问题!');
      }
    },
    savePblmMonthlyReportInfo(val) {
      const pblm = {};
      pblm.pblmId = this.tableSetting.currentPblmId;
      // Todo
      // pblm.zgZgxx = val.MonthlyReportInfo;
      savePblmRectifyInfo(pblm).then((res) => {
        this.tableSetting.currentPblmId = '';
        this.showPblmMonthlyReportDialog = false;
      });
    },
    closePblmMonthlyReportDialog() {
      this.tableSetting.currentPblmId = '';
      this.showPblmMonthlyReportDialog = false;
    },
    clearSelection() {
      this.selectedRowKeys = [];
    },
  },
};
</script>

<style lang='less' scoped>
/deep/ .ant-table-thead>tr>th,
/deep/ .ant-table-tbody>tr>td {
  padding: 0;
  height: 60px;
}
.ellipsis150 {
  display: block;
  width: 148px;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
      margin: 0 auto;
}
.ellipsis180 {
  display: block;
  width: 178px;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
      margin: 0 auto;
}
/deep/ .warning-row {
  background: oldlace;
}
/deep/ .success-row {
  background: #f0f9eb;
  padding: 2px 10px;
  border-radius: 10px;
  color: #ffffff;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
}
/deep/.success-jcflow {
  background: #bbf5ff !important;
}
.zgDateExpired {
  color: #FF0000;
}

.zgDateExpiring {
  color: #E6A23C;
}

.zgDateNormal {
  color: #000;
}

.zgDateUndefined {
  /*background: #F56C6C;
    padding: 2px 10px;
    border-radius: 10px;
    color: #ffffff;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;*/
  color: #FF0000;
}
</style>
