﻿﻿﻿﻿﻿﻿<template>
  <div class="main">
    <a-row>
      <a-form layout="inline">
        <a-form-item label="姓名" style="min-width: 19%;">
          <a-input v-model:value="sender" allow-clear placeholder="请输入姓名"/>
        </a-form-item>
        <a-form-item label="责任处室" style="min-width: 19%;">
          <a-select v-model:value="dutyDept" placeholder="请选择责任处室" allow-clear show-search :filter-option="filterOption" style="min-width: 200px;">
            <a-select-option v-for="item in ywcsList" :key="item" :value="item">{{ item }}</a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item label="机构名称" style="min-width: 19%;">
          <a-tree-select
            v-model:value="orgId"
            :tree-data="rectifyUnits"
            show-search
            placeholder="请选择行政区划"
            search-placeholder="请输入行政区划"
            :fieldNames="{children: 'children', label: 'label', key: 'id', value: 'id'}"
            treeNodeFilterProp="label"
            :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
            allow-clear />
        </a-form-item>
        <a-form-item>
          <a-button type="primary" @click="getTableData">查询</a-button>
        </a-form-item>
        <a-form-item v-if="readOnlyRole == 'display' && isJdcjbr">
          <a-button type="primary" @click="dialogVisible = true">添加</a-button>
        </a-form-item>
        <a-form-item v-if="readOnlyRole == 'display' && isJdcjbr">
          <a-upload
            name="file"
            :multiple="false"
            action="/modular-source/6ace62b8e2bb467d98286d260aebcef2/pdcApi/bis/insp/SmsSysConfig/importListSmsConfig"
            :headers="header"
            :accept="'.xls,.xlsx'"
            @change="handleChange"
            :show-upload-list="false"
          >
            <a-button type="primary">导入</a-button>
          </a-upload>
        </a-form-item>
        <a-form-item v-if="readOnlyRole == 'display' && isJdcjbr">
          <a-button type="primary" @click="deleteMore">批量删除</a-button>
        </a-form-item>
      </a-form>
    </a-row>
    <a-row class="tableDiv">
      <a-table
        :data-source="tableData"
        :columns="columns"
        :pagination="false"
        row-key="id"
        style="width: 100%;"
        :style="{ height: windowHeight + 'px' }"
        :scroll="{ x: 'max-content', y: windowHeight - 60 }"
        :row-selection="{
          columnWidth: 60,
          selectedRowKeys: selectedRowKeys,
          onChange: handleSelection,
        }"
        bordered>
        <template #bodyCell="{ column, record, text }">
          <template v-if="column.slots?.customRender === 'tooltipCell'">
            <a-tooltip placement="topLeft" :title="text">
              <span>{{ text }}</span>
            </a-tooltip>
          </template>
          <template v-else-if="column.dataIndex === 'action'">
            <a-button size="small" type="primary" @click="handleEdit(record)">编辑</a-button>
            <a-button size="small" type="danger" @click="handleDelete(record.id)">删除</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;" />
    </a-row>
    <!--  添加弹窗 -->
    <a-modal title="添加" :open="dialogVisible" width="50%" @cancel="dialogVisible = false">
      <a-form :model="form" :label-col="{ span: 6 }" style="max-width: 100%;" ref="form" :rules="rules">
        <a-form-item label="姓名" required prop="sender">
          <a-input v-model:value="form.sender" allow-clear placeholder="请输入姓名" />
        </a-form-item>
        <a-form-item label="联系方式" required prop="senderNumber">
          <a-input v-model:value="form.senderNumber" allow-clear placeholder="请输入联系方式" />
        </a-form-item>
        <a-form-item label="责任处室">
          <a-select v-model:value="form.dutyDept" placeholder="请选择责任处室" allow-clear show-search :filter-option="filterOption" style="min-width: 200px;">
            <a-select-option v-for="item in ywcsList" :key="item" :value="item">{{ item }}</a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item label="机构名称" required prop="orgId">
          <a-tree-select
            v-model:value="form.orgId"
            :tree-data="rectifyUnits"
            show-search
            placeholder="请选择行政区划"
            search-placeholder="请输入行政区划"
            :fieldNames="{children: 'children', label: 'label', key: 'id', value: 'id'}"
            treeNodeFilterProp="label"
            :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
            allow-clear />
        </a-form-item>
        <a-form-item label="整改状态" required prop="workflowStat">
          <a-select v-model:value="form.workflowStat" mode="tags" placeholder="请选择责任处室" allow-clear style="min-width: 200px;">
            <a-select-option v-for="item in rectifyProcStates" :key="item.code" :value="item.code">{{ item.name }}</a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item label="是否当月时限" required prop="zgDate">
          <a-select v-model:value="form.zgDate" placeholder="是否当月时限" allow-clear style="min-width: 200px;">
            <a-select-option value="是">是</a-select-option>
            <a-select-option value="否">否</a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item label="月份" required prop="monthM">
          <a-input v-model:value="form.monthM" allow-clear placeholder="请输入月份" />
        </a-form-item>
        <a-form-item label="日期" required prop="dayD">
          <a-input v-model:value="form.dayD" allow-clear placeholder="请输入日期" />
        </a-form-item>
        <a-form-item label="时间" required prop="hourH">
          <a-input v-model:value="form.hourH" allow-clear placeholder="请输入时间" />
        </a-form-item>
        <a-form-item label="短信内容" required prop="content">
          <a-textarea v-model:value="form.content" allow-clear placeholder="请输入短信内容" />
        </a-form-item>
      </a-form>
      <template #footer>
        <a-button @click="dialogVisible = false">取 消</a-button>
        <a-button type="primary" @click="addSMS">确 定</a-button>
      </template>
    </a-modal>
    <!--  修改 -->
    <a-modal title="修改" :open="editVisible" width="50%" @cancel="editVisible = false">
      <a-form :model="form1" :label-col="{ span: 6 }" style="max-width: 100%;" ref="form" :rules="rules">
        <a-form-item label="姓名" required prop="sender">
          <a-input v-model:value="form1.sender" allow-clear placeholder="请输入姓名" />
        </a-form-item>
        <a-form-item label="联系方式" required prop="senderNumber">
          <a-input v-model:value="form1.senderNumber" allow-clear placeholder="请输入联系方式" />
        </a-form-item>
        <a-form-item label="责任处室">
          <a-select v-model:value="form1.dutyDept" placeholder="请选择责任处室" allow-clear show-search :filter-option="filterOption" style="min-width: 200px;">
            <a-select-option v-for="item in ywcsList" :key="item" :value="item">{{ item }}</a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item label="机构名称" required prop="orgId">
          <a-tree-select
            v-model:value="form1.orgId"
            :tree-data="rectifyUnits"
            show-search
            placeholder="请选择行政区划"
            search-placeholder="请输入行政区划"
            :fieldNames="{children: 'children', label: 'label', key: 'id', value: 'id'}"
            treeNodeFilterProp="label"
            :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
            allow-clear />
        </a-form-item>
        <a-form-item label="整改状态" required prop="workflowStat">
          <a-select v-model:value="form1.workflowStat" mode="tags" placeholder="请选择责任处室" allow-clear style="min-width: 200px;">
            <a-select-option v-for="item in rectifyProcStates" :key="item.code" :value="item.code">{{ item.name
            }}</a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item label="是否当月时限" required prop="zgDate">
          <a-select v-model:value="form1.zgDate" placeholder="是否当月时限" allow-clear style="min-width: 200px;">
            <a-select-option value="是">是</a-select-option>
            <a-select-option value="否">否</a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item label="月份" required prop="monthM">
          <a-input v-model:value="form1.monthM" allow-clear placeholder="请输入月份" />
        </a-form-item>
        <a-form-item label="日期" required prop="dayD">
          <a-input v-model:value="form1.dayD" allow-clear placeholder="请输入日期" />
        </a-form-item>
        <a-form-item label="时间" required prop="hourH">
          <a-input v-model:value="form1.hourH" allow-clear placeholder="请输入时间" />
        </a-form-item>
        <a-form-item label="短信内容" required prop="content">
          <a-textarea v-model:value="form1.content" allow-clear placeholder="请输入短信内容" />
        </a-form-item>
      </a-form>
      <template #footer>
        <a-button @click="editVisible = false">取 消</a-button>
        <a-button type="primary" @click="editSMS">确 定</a-button>
      </template>
    </a-modal>
  </div>
</template>

<script>
import { h } from 'vue';
import request from '../../utils/gw_ajax_request.js';
import {
  getDutyDept,
  getOrgTreeJson,
  requestUserRole,
  SmsSysConfigUpdate,
} from '../PblmRectify/Common/rectify_api';
import { pblmRectifyProcState1 } from '../PblmRectify/Common/rectifyProcState';
export default {
  data() {
    return {
      sender: '',
      dutyDept: '',
      orgId: null,
      windowHeight: window.innerHeight - 240,
      loading: false,
      tableData: [],
      ywcsList: [],
      rectifyProcStates: pblmRectifyProcState1,
      rectifyUnits: [],
      dialogVisible: false,
      form: {
        sender: '',
        senderNumber: '',
        dutyDept: '',
        orgId: null,
        workflowStat: [],
        zgDate: '',
        monthM: '',
        dayD: '',
        hourH: '',
        content: '',
      },
      editVisible: false,
      form1: {
        sender: '',
        senderNumber: '',
        dutyDept: '',
        orgId: null,
        workflowStat: [],
        zgDate: '',
        monthM: '',
        dayD: '',
        hourH: '',
        content: '',
      },
      rules: {
        sender: [{ required: true, message: '请输入名字', trigger: 'blur' }],
        senderNumber: [
          { required: true, message: '请输入联系方式', trigger: 'blur' },
        ],
        // dutyDept: [
        //   { required: true, message: '请选择责任处室', trigger: 'change' }
        // ],
        orgId: [
          { required: true, message: '请选择机构名称', trigger: 'change' },
        ],
        workflowStat: [
          { required: true, message: '请选择整改状态', trigger: 'change' },
        ],
        zgDate: [
          { required: true, message: '请选择是否当月实现', trigger: 'change' },
        ],
        monthM: [{ required: true, message: '请输入月份', trigger: 'blur' }],
        dayD: [{ required: true, message: '请输入日期', trigger: 'blur' }],
        hourH: [{ required: true, message: '请输入时间', trigger: 'blur' }],
        content: [
          { required: true, message: '请输入短信内容', trigger: 'blur' },
        ],
      },
      formLabelWidth: '120px',
      currentPage: 1,
      pageSize: 10,
      total: 0,
      columns: [
        {
          title: '姓名',
          dataIndex: 'sender',
          width: 80,
          align: 'center',
          slots: { customRender: 'tooltipCell' },
          customCell: () => {
            return {
              style: {
                maxWidth: '80px',
                overflow: 'hidden',
                whiteSpace: 'nowrap',
                textOverflow: 'ellipsis',
              },
            };
          },
        },
        {
          title: '联系方式',
          dataIndex: 'senderNumber',
          width: 120,
          align: 'center',
          slots: { customRender: 'tooltipCell' },
          customCell: () => {
            return {
              style: {
                maxWidth: '120px',
                overflow: 'hidden',
                whiteSpace: 'nowrap',
                textOverflow: 'ellipsis',
              },
            };
          },
        },
        {
          title: '责任处室',
          dataIndex: 'dutyDept',
          width: 120,
          align: 'center',
          slots: { customRender: 'tooltipCell' },
          customCell: () => {
            return {
              style: {
                maxWidth: '120px',
                overflow: 'hidden',
                whiteSpace: 'nowrap',
                textOverflow: 'ellipsis',
              },
            };
          },
        },
        {
          title: '机构名称',
          dataIndex: 'adName',
          width: 150,
          align: 'center',
          slots: { customRender: 'tooltipCell' },
          customCell: () => {
            return {
              style: {
                maxWidth: '150px',
                overflow: 'hidden',
                whiteSpace: 'nowrap',
                textOverflow: 'ellipsis',
              },
            };
          },
        },
        {
          title: '整改状态',
          dataIndex: 'workflowStatNames',
          width: 150,
          align: 'center',
          slots: { customRender: 'tooltipCell' },
          customCell: () => {
            return {
              style: {
                maxWidth: '150px',
                overflow: 'hidden',
                whiteSpace: 'nowrap',
                textOverflow: 'ellipsis',
              },
            };
          },
        },
        {
          title: '月份',
          dataIndex: 'monthM',
          width: 100,
          align: 'center',
          slots: { customRender: 'tooltipCell' },
          customCell: () => {
            return {
              style: {
                maxWidth: '100px',
                overflow: 'hidden',
                whiteSpace: 'nowrap',
                textOverflow: 'ellipsis',
              },
            };
          },
        },
        {
          title: '日期',
          dataIndex: 'dayD',
          width: 150,
          align: 'center',
          slots: { customRender: 'tooltipCell' },
          customCell: () => {
            return {
              style: {
                maxWidth: '150px',
                overflow: 'hidden',
                whiteSpace: 'nowrap',
                textOverflow: 'ellipsis',
              },
            };
          },
        },
        {
          title: '时间',
          dataIndex: 'hourH',
          width: 100,
          align: 'center',
          slots: { customRender: 'tooltipCell' },
          customCell: () => {
            return {
              style: {
                maxWidth: '100px',
                overflow: 'hidden',
                whiteSpace: 'nowrap',
                textOverflow: 'ellipsis',
              },
            };
          },
        },
        {
          title: '短信内容',
          dataIndex: 'content',
          width: 240,
          align: 'center',
          slots: { customRender: 'tooltipCell' },
          customCell: () => {
            return {
              style: {
                maxWidth: '240px',
                overflow: 'hidden',
                whiteSpace: 'nowrap',
                textOverflow: 'ellipsis',
              },
            };
          },
        },
        {
          title: '操作',
          dataIndex: 'action',
          width: 200,
          align: 'center',
          fixed: 'right',
        },
      ],
      header: {
        persId: localStorage.getItem('persId'),
        accessToken: localStorage.getItem('accessToken'),
        orgId: localStorage.getItem('orgId'),
      },
      selectedRowKeys: [],
      readOnlyRole: localStorage.getItem('readOnlyRole'),
      isJdcjbr: false,
    };
  },
  created() {
    this.getTableData();
    this.getDutyDept();
    this.rectifyUnits = this.getOrgTreeJson();
    this.getAuthenticatedTabs(localStorage.getItem('persId'));
  },
  methods: {
    getAuthenticatedTabs(userId, tabs) {
      this.isJdcjbr = false;
      const currentUser = { userId: userId };
      let userRoles = [];
      requestUserRole(currentUser).then((res) => {
        if (res.data != null) {
          userRoles = res.data; // 当前用户的所有角色列表
          userRoles.forEach((userRole) => {
            if (userRole.roleId == '48fb7e333a1b44129bebfe6aff9ff34c') {
              // 判断是否是监督处经办人
              this.isJdcjbr = true;
            }
          });
        }
        console.log(this.isJdcjbr);
      });
    },
    filterOption(input, option) {
      return (
        option.componentOptions.children[0].text
          .toLowerCase()
          .indexOf(input.toLowerCase()) >= 0
      );
    },
    getDutyDept() {
      // 获取责任处室列表
      getDutyDept().then((res) => {
        this.ywcsList = res.data;
      });
    },
    getOrgTreeJson() {
      // 获取行政区划
      getOrgTreeJson().then((res) => {
        const jsonArray = [];
        const jsonStr = JSON.stringify(res.data);
        jsonArray.push(res.data);
        this.rectifyUnits = jsonArray;
      });
    },
    normalizer(node) {
      // 行政区划处理
      if (node.children && !node.children.length) {
        delete node.children;
      }
      return {
        id: node.id,
        label: node.label,
        children: node.children,
      };
    },
    getTableData() {
      // 获取列表
      const { currentPage, pageSize, sender, dutyDept, orgId } = this;
      const params = {
        sender,
        dutyDept,
        orgId,
        pageNum: currentPage,
        pageSize,
      };
      request.post('/bis/insp/SmsSysConfig/pageList', params).then((res) => {
        this.loading = true;
        if (res.success) {
          this.tableData = res.data.list;
          this.total = res.data.total;
          this.loading = false;
        } else {
          this.$message.error('请求失败,请联系管理员!');
          this.loading = false;
        }
      });
    },
    handleSizeChange(size, pageSize) {
      this.pageSize = pageSize;
      this.getTableData();
    },
    handleCurrentChange(pageNum) {
      this.currentPage = pageNum;
      this.getTableData();
    },
    addSMS() {
      // 添加
      this.$refs.form.validate((valid) => {
        if (valid) {
          const params = {
            sender: this.form.sender,
            senderNumber: this.form.senderNumber,
            dutyDept: this.form.dutyDept,
            orgId: this.form.orgId,
            zgDate: this.form.zgDate,
            monthM: this.form.monthM,
            dayD: this.form.dayD,
            hourH: this.form.hourH,
            content: this.form.content,
          };
          params.workflowStat = this.form.workflowStat.join(',');
          request.post('/bis/insp/SmsSysConfig/add', params).then((res) => {
            if (res.success) {
              this.$message.success('添加成功!');
              this.dialogVisible = false;
              this.$refs.form.resetFields();
              this.getTableData();
            } else {
              this.$message.error('添加失败!');
              this.dialogVisible = false;
            }
          });
        } else {
          return false;
        }
      });
    },
    handleEdit(text) {
      this.form1 = text;
      this.form1.workflowStat = text.workflowStat
        ? text.workflowStat.split(',')
        : [];
      this.editVisible = true;
    },
    editSMS() {
      this.form1.workflowStat = this.form1.workflowStat.join(',');
      SmsSysConfigUpdate(this.form1).then((res) => {
        this.getTableData();
        this.editVisible = false;
      });
    },
    handleDelete(id) {
      this.$confirm({
        title: '提示',
        content: '此操作将永久删除, 是否继续?',
        okType: 'warning',
        onOk: () => {
          request.post(`/bis/insp/SmsSysConfig/delete/${id}`).then((res) => {
            if (res.success) {
              this.$message.success('删除成功!');
              this.getTableData();
            } else {
              this.$message.error('删除失败!');
            }
          });
        },
      });
    },
    handleChange(info) {
      if (info.file.status === 'done') {
        if (info.file.response.success) {
          this.$message.success(`${info.file.name} 导入成功!`);
          this.getTableData();
        } else {
          this.$message.error(info.file.response.message);
        }
      } else if (info.file.status === 'error') {
        this.$message.error(`${info.file.name} 导入失败!`);
      }
    },
    handleSelection(val, row) {
      this.selectedRowKeys = val;
    },
    deleteMore() {
      console.log(this.selectedRowKeys);
      if (this.selectedRowKeys && this.selectedRowKeys.length > 0) {
        const params = {
          ids: this.selectedRowKeys.join(','),
        };
        console.log(params);
        request
          .post(`/bis/insp/SmsSysConfig/deleteByIds`, params)
          .then((res) => {
            if (res.success) {
              this.$message.success('删除成功!');
              this.getTableData();
              this.selectedRowKeys = [];
            } else {
              this.$message.error('删除失败!');
            }
          });
      } else {
        this.$message.error('请选择要删除的内容');
      }
    },
  },
};
</script>

<style lang='less' scoped>
</style>
