<template>
  <div class="container">
    <header>
      <el-form :label-width="120">
        <el-row>
          <el-col :span="6">
            <el-form-item label="提醒类型">
              <div class="flex gap">
                <el-select
                    v-model="query.alarmTypeId"
                    style="min-width: 185px"
                >
                  <el-option :value="-1" label="全部"/>
                  <el-option :value="1" label="预警问题"/>
                  <el-option :value="2" label="风险问题"/>
                  <el-option :value="3" label="提醒通知"/>
                </el-select>
              </div>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="提醒时间">
              <date-time-range-picker-ext
                  v-model="query.discoveryTime"
              />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="回复情况">
              <div class="flex gap">
                <el-select
                    v-model="query.replyState"
                    style="min-width: 185px"
                >
                  <el-option :value="-1" label="全部"/>
                  <el-option :value="1" label="已回复"/>
                  <el-option :value="0" label="未回复"/>
                </el-select>
              </div>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item
                label="被通知单位"
                prop="involveDepartId"
                :rules="{
                                message: '请选择问题涉及单位',
                                trigger: ['blur'],
                            }"
            >
              <depart-tree-select
                  v-model="formData.involveDepartId"
                  :check-strictly="true"
                  @node-click="
                                    (row) =>
                                        (formData.involveDepartName =
                                            row.shortName)
                                "
              />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="提醒内容">
              <el-input
                  placeholder="请输入"
                  v-model="query.alarmContent"
                  clearable
              />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div class="flex between mt-20 mb-26">
        <div></div>
        <div>
          <el-button type="primary" @click="getList">
            <template #icon
            >
              <icon name="el-icon-Search"
              />
            </template>
            查询
          </el-button
          >
          <el-button @click="reset">重置</el-button>
        </div>
      </div>
    </header>
    <main>
      <div class="table-container" v-loading="loading">
        <el-table :data="list" ref="tableRef">
          <el-table-column
              label="提醒时间"
              prop="alarmTime"
              width="150"
          />
          <el-table-column
              label="提醒类型"
              prop="alarmType"
              width="90"
          />
          <el-table-column
              label="被通知单位"
              prop="notificationDepartName"
              width="150"
          />
          <el-table-column
              label="提醒内容"
              prop="alarmContent"
          />
          <el-table-column label="回复情况" width="110">
            <template #default="{ row }">
              <el-text v-if="row.replyState==1" class="mx-1">已回复</el-text>
              <el-text v-else type="warning" class="mx-1">未回复</el-text>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="160">
            <template #default="{ row }">
              <el-button
                  type="primary"
                  link
                  @click="showDetail(row)"
              >查看详情
              </el-button>
              <el-button
                  type="primary"
                  link
                  @click="handleEdit(row)"
                  v-perms="['negative:edit']"
              >立即回复
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="flex end mt-8">
        <el-pagination
            @size-change="getList"
            @current-change="getList"
            :current-page="query.current"
            :page-sizes="[10, 20, 50]"
            :page-size="query.size"
            v-model:current-page="query.current"
            layout="total, sizes, prev, pager, next"
            :total="total"
        >
        </el-pagination>
      </div>
    </main>
    <el-dialog v-model="editShow" title="回复问题" width="900px">
      <el-form label-width="148" :model="formData" ref="formRef">
        <el-form-item
            label="提醒类型"
        >
          <el-input
              v-model="formData.alarmType"
              style="width: 280px"
              disabled
          />
        </el-form-item>
        <el-form-item
            label="提醒时间"
        >
          <el-input
              v-model="formData.alarmTime"
              disabled
              style="width: 280px"
          />
        </el-form-item>
        <el-form-item
            label="被通知单位"
        >
          <el-input
              v-model="formData.notificationDepartName"
              disabled
              style="width: 280px"
          />
        </el-form-item>
        <el-form-item
            label="提醒内容"
        >
          <el-input
              type="textarea"
              v-model="formData.alarmContent"
              :autosize="{ minRows: 6 }"
              disabled
              style="width: 280px"
          />
        </el-form-item>
        <el-form-item
            label="回复问题"
            :rules="{
                        required: true,
                        message: '请输入回复内容',
                        trigger: ['blur'],
                    }"
        >
          <el-input
              type="textarea"
              placeholder="请输入回复内容"
              v-model="formData.replyResultContent"
              :autosize="{ minRows: 6 }"
          />
        </el-form-item>
      </el-form>
      <footer class="flex end">
        <el-button @click="editShow = false" size="large">取消</el-button>
        <el-button type="primary" @click="handleSumbit" size="large"
        >确定
        </el-button
        >
      </footer>
    </el-dialog>

    <el-dialog
        title="查看详情"
        v-model="dialogShow"
        width="600"
    >
      <el-form :model="showData" :label-width="120" ref="fomrRef">
        <el-form-item
            label="提醒类型"
        >
          <el-input
              v-model="showData.alarmType"
              style="width: 280px"
              disabled
          />
        </el-form-item>
        <el-form-item
            label="提醒时间"
        >
          <el-input
              v-model="showData.alarmTime"
              disabled
              style="width: 280px"
          />
        </el-form-item>
        <el-form-item
            label="被通知单位"
        >
          <el-input
              v-model="showData.notificationDepartName"
              disabled
              style="width: 280px"
          />
        </el-form-item>
        <el-form-item
            label="提醒内容"
        >
          <el-input
              type="textarea"
              v-model="showData.alarmContent"
              :autosize="{ minRows: 6 }"
              disabled
              style="width: 280px"
          />
        </el-form-item>

        <el-form-item
            v-if="showData.replyState == 1"
            label="回复内容"
        >
          <el-input
              type="textarea"
              v-model="showData.replyResultContent"
              disabled
              :autosize="{ minRows: 4 }"
              style="width: 280px"
          />
        </el-form-item>
      </el-form>
      <footer class="flex end">
        <el-button @click="dialogShow = false">关闭</el-button>
      </footer>
    </el-dialog>
  </div>

</template>
<script setup>
import moment from "moment";
import {ElLoading} from "element-plus";
import {
  alarmNotificationPages,
  alarmNotificationReply
} from "@/api/work/alarm";
import feedback from "@/utils/feedback";

import useCatchStore from "@/stores/modules/catch";

const catchStore = useCatchStore();

const query = ref({
  current: 1,
  size: 10,
  alarmTypeId: -1,
  replyState: -1
});

const list = ref([]);
const total = ref(0);

let showData = ref({})
let dialogShow = ref(false)

const loading = ref(true);

const showDetail = (data) => {
  showData.value = data;
  dialogShow.value = true;
}

function getList() {
  let param = {
    current: query.value.current,
    size: query.value.size,
  }
  if (query.value.alarmTypeId != -1) {
    param['alarmTypeId'] = query.value.alarmTypeId
  }
  if (query.value.replyState != -1) {
    param['replyState'] = query.value.replyState
  }
  if (query.value.discoveryTime != undefined && query.value.discoveryTime != null) {
    param['startTime'] = query.value.discoveryTime[0]
    param['endTime'] = query.value.discoveryTime[1]
  }
  if (formData.value.involveDepartId != undefined) {
    param['notificationDepartCode'] = formData.value.involveDepartId
  }
  if (query.value.alarmContent != undefined) {
    param['alarmContent'] = query.value.alarmContent;
  }
  loading.value = true;
  alarmNotificationPages(param).then((data) => {
    list.value = data.records;
    total.value = data.total;
    loading.value = false;
  });
}

const tableRef = ref()

function reset() {
  query.value = {
    current: 1,
    size: 10,
    responderKey: "name",
  };
  tableRef.value.clearSort()
  getList();
  // 重置路由
  router.push("/query");
}

const route = useRoute();
watch(
    () => route.query,
    () => {
      updateQuery();
      getList();
    }
);

function updateQuery() {
  if (route.query.processingStatus) {
    query.value.processingStatus = [route.query.processingStatus];
  } else {
    query.value.processingStatus = [];
  }
  if (route.query.crtTime === "today") {
    query.value.crtTime = [
      moment().startOf("day").format("YYYY-MM-DD HH:mm:ss"),
      moment().endOf("day").format("YYYY-MM-DD HH:mm:ss"),
    ];
  } else {
    query.value.crtTime = [];
  }
  if (route.query.extensionFlag === "true") {
    query.value.extensionFlag = true
  } else {
    query.value.extensionFlag = '';
  }
}

onMounted(() => {
  updateQuery();
  getList();
});

const show = ref(false);

function handleAction(row) {
  show.value = true;
}

const router = useRouter();


const editShow = ref(false);
const formData = ref({});
const formRef = ref(null);

function handleEdit(row) {
  editShow.value = true;
  formData.value = {...row};
}

async function handleSumbit() {
  await formRef.value.validate();
  let data = {
    replyResultContent: formData.value.replyResultContent,
    id: formData.value.id
  }
  await alarmNotificationReply(data);
  editShow.value = false;
  feedback.msgSuccess("操作成功");
  getList();
}

</script>
<style lang="scss" scoped>
.form-row {
  padding: 8px 0;
  box-shadow: inset 0px -1px 0px 0px #ebebeb;

  label {
    width: 120px;
    line-height: 24px;
    padding-right: 12px;
    box-sizing: border-box;
    text-align: right;

    & + * {
      width: calc(100% - 126px);
    }
  }

  .btn-box {
    width: 70px;
  }

  .el-form-item {
    margin-bottom: 0;
  }
}

.query-box {
  gap: 10px 20px;
}
</style>
