<template>
  <div class="mainCss">
    <div class="pageRight_none">
      <a-tabs v-model="activeName" type="card" ref="topContainer" @tabClick="handleClick">
        <a-tab-pane key="approval" tab="待审核投诉"></a-tab-pane>
        <a-tab-pane key="list" tab="投诉列表"></a-tab-pane>
        <a-tab-pane key="hlist" tab="有效投诉清单"></a-tab-pane>
      </a-tabs>
      <div class="content">
        <a-form layout="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-input v-model="searchParam.nm" style="width: 120px;"/>
          </a-form-item>
          <a-form-item label="投诉时间：" style="white-space: nowrap; flex-shrink: 0; margin-bottom: 0;">
            <a-range-picker style="width:200px;" v-model="selectDate" format="YYYY-MM-DD" value-format="YYYY-MM-DD" separator="至" allow-clear/>
          </a-form-item>
          <a-form-item>
            <a-button type="primary" @click="search" style="margin-left: 10px">查询</a-button>
          </a-form-item>
          <a-form-item>
            <a-button type="primary" v-if="(hasStat=='001' || hasStat=='002') && activeName=='approval'" @click="submit(1)">设为有效并推送预警</a-button>
          </a-form-item>
          <a-form-item>
            <a-button type="primary" v-if="(hasStat=='001' || hasStat=='002') && activeName=='approval'" @click="submit(2)">仅设为有效</a-button>
          </a-form-item>
          <a-form-item>
            <a-button type="primary" v-if="(hasStat=='001' || hasStat=='002') && activeName=='approval'" @click="submit(3)">设为无效</a-button>
          </a-form-item>
          <a-form-item>
            <a-button type="primary" v-if="(hasStat=='001' || hasStat=='002') && activeName=='approval'" @click="submit(4)">设为无效并删除</a-button>
          </a-form-item>
          <a-form-item>
            <a-button type="primary" v-if="hasStat=='002' && activeName=='approval'" @click="submit(5)">退回修改</a-button>
          </a-form-item>
        </a-form>
        <a-table
          :columns="columns"
          :data-source="tableData"
          :pagination="false"
          row-key="id"
          style="width: 100%;"
          :row-selection="{
            columnWidth: 30,
            selectedRowKeys: selectedRowKeys,
            onChange: handleSelectionChange,
          }"
          :style="{ height: tableHeight + 'px' }"
          :scroll="{ x: true, y: tableHeight - 60 }"
          bordered>
          <template #bodyCell="{ column, record, text, index }">
            <template v-if="column.dataIndex === 'isHave'">
              <span v-if="record.isHave == '1'">有效</span>
              <span v-if="record.isHave == '2'">无效</span>
            </template>
            <template v-else-if="column.key === 'action'">
              <a-button icon="eye" type="link" @click="showDialog(record)"></a-button>
            </template>
            <template v-else-if="column.slots?.customRender === 'contentTooltip'">
              <a-tooltip placement="topLeft" :title="text">
                <span>{{ text }}</span>
              </a-tooltip>
            </template>
            <template v-else>
              {{ text }}
            </template>
          </template>
        </a-table>
        <a-pagination v-model:pageSize="pageSize" :total="total" :show-total="total => `共${total}条`" @change="handleCurrentChange" style="margin:0px 10px;" />
        <a-modal
          class="outerDialog custom_dialog"
          title="备注信息"
          :open="changeInfoVisible"
          width="500px"
          style="height:400px !important;"
          @cancel="changeInfoVisible = false"
          :footer="null">
          <a-form :label-col="{ span: 4 }" style="max-width: 100%;">
            <a-form-item label="备注">
              <a-textarea
                v-model:value="remark"
                allow-clear
                :rows="4"
                placeholder="备注"
                style="width: 300px !important;"></a-textarea>
            </a-form-item>
            <a-form-item :wrapper-col="{ span: 16, offset: 8 }">
              <a-button type="primary" @click="submitProcess">提交</a-button>
              <a-button @click="changeInfoVisible = false">取消</a-button>
            </a-form-item>
          </a-form>
        </a-modal>
      </div>
    </div>
    <a-modal
        title="投诉信息详情"
        v-model:open="open"
        @cancel="open = false"
        :footer="null"
        width="1300px">
      <div style="height:700px">
        <tsdetail v-if="open" :id="new Date().getTime()" :hasStat="hasStat" :activeName="activeName" @submitBtn="submitBtn"></tsdetail>
      </div>
    </a-modal>
  </div>
</template>

<script>
import tsdetail from '@/views/complaint/tsdetail.vue';
import { hostUrl } from '../../utils/global_variable.js';
import request from '../../utils/gw_ajax_request.js';
import { dateFormat, formatD } from '../../utils/gw_date';
export default {
  components: { tsdetail },
  data() {
    return {
      hasStat: this.$route.path.substring(this.$route.path.length - 3),
      activeName: 'approval',
      selectDate: [],
      searchParam: {
        nm: '',
        cwsCode: undefined,
      },
      tableData: [
        // {id:1,name:"00100111",content:"00100111",tm:"2025-10-10",isHave:1},{id:1,name:"00100111",content:"00100111",tm:"2025-10-10",isHave:2}
      ],
      pageNum: 1,
      pageSize: 10,
      total: 0,
      tableHeight: window.innerHeight - 255,
      multipleSelection: [],
      selectedRowKeys: [],
      columns: [
        {
          title: '投诉人姓名',
          dataIndex: 'name',
          width: 100,
          align: 'center',
        },
        {
          title: '投诉内容',
          dataIndex: 'content',
          align: 'center',
          width: 300,
          slots: { customRender: 'contentTooltip' },
        },
        {
          title: '投诉时间',
          dataIndex: 'tm',
          width: 200,
          align: 'center',
        },
        {
          title: '是否有效投诉',
          dataIndex: 'isHave',
          width: 200,
          align: 'center',
        },
        {
          title: '操作',
          key: 'action',
          width: 200,
          align: 'center',
        },
      ],
      currentProblemId: '',
      currentFlow: false,
      loading: false,
      changeInfoVisible: false,
      remark: '',
      open: false,
      currentRow: {},
    };
  },
  computed: {
    userId() {
      return localStorage.getItem('persId')
        ? localStorage.getItem('persId')
        : '';
    },
    hostUrl() {
      return hostUrl;
    },
    formatD() {
      return formatD;
    },
  },
  watch: {
    $route(n, o) {
      this.hasStat = n.path.substring(n.path.length - 3);
      this.search();
    },
  },
  created() {},
  mounted() {
    this.search();
  },
  methods: {
    submitProcess() {
      const list = [];
      this.multipleSelection.forEach((item, index) => {
        item.remark = this.remark;
        list.push(item);
      });
      request.post(`/dc/insp/pblm/detail/list/`, list).then((res) => {
        if (res.success) {
          this.clearSelection();
          this.search();
          this.open = false;
          this.$message.success('操作成功');
        }
      });
    },
    submitBtn(v) {
      this.multipleSelection = [this.currentRow];
      this.submit(v);
    },
    submit(v) {
      this.currentFlow = v;
      if (this.multipleSelection.length > 0) {
        const params = [];
        this.multipleSelection.forEach((item, index) => {
          params.push(item.id);
        });
        if (v === 4) {
          this.$confirm({
            title: '提示',
            content: '确定要批量删除吗？',
            okType: 'warning',
            onOk: () => {
              request
                .post('/dc/insp/pblm/del?ids=' + params.join(','))
                .then((res) => {
                  if (res.success) {
                    this.clearSelection();
                    this.search();
                    this.$message.success('操作成功');
                  } else {
                    this.$message.error(res.message);
                  }
                });
            },
          });
        } else {
          this.changeInfoVisible = true;
          this.remark = '同意';
        }
      } else {
        this.$message.warning('请选择需要操作的问题!');
      }
    },
    handleClick(name) {
      this.activeName = name;
      this.pageSize = 10;
      this.pageNum = 1;
      this.clearSelection();
      this.search();
    },
    search() {
      this.searchParam.pageNum = this.pageNum;
      this.searchParam.pageSize = this.pageSize;
      // request.post(`/dc/insp/pblm/detail/list/${this.activeName}/${this.hasStat}`, this.searchParam).then(res => {
      //   if (res.success) {
      //     this.tableData = res.data.list
      //     this.total = res.data.total
      //   }
      // })
    },
    batchDelete() {
      if (this.multipleSelection.length > 0) {
        var params = [];
        for (var i = 0; i < this.multipleSelection.length; i++) {
          params.push(this.multipleSelection[i].pblmId);
        }
        this.loading = true;
        this.$confirm({
          title: '提示',
          content: '确定要批量删除吗？',
          okType: 'warning',
          onOk: () => {
            request
              .post('/dc/insp/pblm/del?ids=' + params.join(','))
              .then((res) => {
                if (res.success) {
                  this.clearSelection();
                  this.search();
                  this.$message.success('操作成功');
                } else {
                  this.$message.error(res.message);
                }
              });
          },
        });
      } else {
        this.$message.warning('请选择需要操作的问题!');
      }
    },
    handleSelectionChange(val, row) {
      this.selectedRowKeys = val;
      this.multipleSelection = row;
    },
    clearSelection() {
      this.selectedRowKeys = [];
      this.multipleSelection = [];
    },
    handleCurrentChange(val) {
      this.pageNum = val;
      this.search();
    },
    timestampToTime(val) {
      return dateFormat(val, 'yyyy-MM-dd');
    },
    showDialog(row) {
      this.open = true;
      this.currentRow = row;
    },
  },
};
</script>

<style lang='less' scoped>
: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;
  line-height: 60px;
}

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

:deep(.ant-table-fixed-left),
:deep(.ant-table-fixed-right) {
  z-index: 2;
}
.pageRight_none {
  width: calc(100% - 20px);
  margin-left: 10px;
  box-shadow: 0 1px 6px 0 rgb(32 33 36 / 28%);
}
.content {
  width: 100%;
  height: calc(100% - 41px);
}

:deep(.success-delete) {
  background: #ffa3a8 !important;
}

.mainCss {
  width: 100%;
  height: calc(100% - 20px);
  display: flex;
  margin-top: 10px;
}
.pageLeft_none {
  display: none;
}

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

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

.custom_dialog .scroll300 {
  max-height: 60vh !important;
}
</style>
