<template>
  <div class="container">
    <header>
      <el-form :label-width="114">
        <el-row>
          <el-col :span="6">
            <el-form-item label="问题来源">
              <el-select
                  placeholder="全部"
                  clearable
                  v-model="query.sourceTables"
                  multiple
                  collapse-tags
              >
                <el-option value="data_mailbox" label="局长信箱"/>
                <el-option value="data_petition_complaint_21" label="公安部信访"/>
                <el-option value="data_petition_complaint_22" label="国家信访"/>
                <el-option value="data_case_verif" label="12389投诉"/>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="编号">
              <el-input
                  placeholder="请输入编号"
                  v-model="query.originId"
                  clearable
              />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="受理时间">
              <date-time-range-picker-ext
                  v-model="query.discoveryTimeList"
              />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="来件人">
              <el-input
                  placeholder="来件人姓名、身份证号码、联系电话"
                  v-model="query.personInfo"
                  clearable
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="6">
            <el-form-item label="涉及二级机构" prop="secondDepartName">
              <depart-tree-select
                  v-model="query.secondDepartId"
                  :check-strictly="true"
                  @node-click="(row) => (query.secondDepartName = row.shortName)"
              />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="办理方式">
              <el-select
                  v-model="query.handleMethod"
                  placeholder="全部"
                  clearable
              >
                <el-option value="0" label="自办"/>
                <el-option value="1" label="下发"/>
              </el-select>

            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="办理情况">
              <el-select
                  v-model="query.xxx"
                  :disabled="true"
              >
                <el-option value="-1" label="全部"/>
                <el-option value="0" label="自办"/>
                <el-option value="1" label="下发"/>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="办结时间">
              <date-time-range-picker-ext
                  v-model="query.xxxxTime"
                  :disabled="true"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="6">
            <el-form-item label="来件内容">
              <el-input
                  placeholder="请输入来件内容"
                  v-model="query.thingDesc"
                  clearable
              />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="是否重复件">
              <el-select
                  v-model="query.repeatt"
                  placeholder="全部"
                  clearable
              >
                <el-option value="0" label="否"/>
                <el-option value="1" label="是"/>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="是否领导批示">
              <el-select
                  v-model="query.leadApproval"
                  placeholder="全部"
                  clearable
              >
                <el-option value="0" label="否"/>
                <el-option value="1" label="是"/>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="标签">
              <el-select
                  placeholder="全部"
                  clearable
                  v-model="query.tags"
                  multiple
                  collapse-tags
              >
                <el-option
                    v-for="item in dict.tagList"
                    :key="item.id"
                    :value="item.dictValue"
                    :label="item.dictLabel"
                />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <!--        <el-row>-->
        <!--          <el-col :span="6">-->
        <!--            <el-form-item label="核查结论">-->
        <!--              <el-select-->
        <!--                  v-model="query.xxx"-->
        <!--                  :disabled="true"-->
        <!--              >-->
        <!--                <el-option value="-1" label="全部"/>-->
        <!--                <el-option value="0" label="否"/>-->
        <!--                <el-option value="1" label="是"/>-->
        <!--              </el-select>-->
        <!--            </el-form-item>-->
        <!--          </el-col>-->
        <!--          <el-col :span="6">-->
        <!--            <el-form-item label="涉及对象">-->
        <!--              <el-select-->
        <!--                  v-model="query.xxx"-->
        <!--                  :disabled="true"-->
        <!--              >-->
        <!--                <el-option value="-1" label="全部"/>-->
        <!--                <el-option value="0" label="否"/>-->
        <!--                <el-option value="1" label="是"/>-->
        <!--              </el-select>-->
        <!--            </el-form-item>-->
        <!--          </el-col>-->
        <!--          <el-col :span="6">-->
        <!--            <el-form-item label="问题核查情况">-->
        <!--              <el-input-->
        <!--                  placeholder="请输入问题核查情况"-->
        <!--                  v-model="query.xxx"-->
        <!--                  clearable-->
        <!--                  :disabled="true"-->
        <!--                  style="width: 200px"-->
        <!--              />-->
        <!--            </el-form-item>-->
        <!--          </el-col>-->
        <!--          <el-col :span="6">-->
        <!--            <el-form-item label="涉及人员姓名">-->
        <!--              <el-input-->
        <!--                  placeholder="请输入涉及人员姓名"-->
        <!--                  v-model="query.xxx"-->
        <!--                  clearable-->
        <!--                  :disabled="true"-->
        <!--                  style="width: 200px"-->
        <!--              />-->
        <!--            </el-form-item>-->
        <!--          </el-col>-->
        <!--        </el-row>-->
        <!--        <el-row>-->
        <!--          <el-col :span="6">-->
        <!--            <el-form-item label="涉及人员姓名">-->
        <!--              <el-input-->
        <!--                  placeholder="请输入涉及人员姓名"-->
        <!--                  v-model="query.xxx"-->
        <!--                  clearable-->
        <!--                  :disabled="true"-->
        <!--                  style="width: 200px"-->
        <!--              />-->
        <!--            </el-form-item>-->
        <!--          </el-col>-->
        <!--        </el-row>-->
      </el-form>
      <div class="mb-25 flex between">
        <div>
          <!--          <el-button type="primary" @click="show = true"-->
          <!--          >数据导入-->
          <!--          </el-button>-->
          <el-button type="primary" @click="add()">添加</el-button>
        </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>
    <div class="table-container" v-loading="loading">
      <el-table :data="list">
        <el-table-column type="expand">
          <template #default="{ row }">
            <div class="row mt-10">
              <div class="col col-6">
                <label>编号</label>
                <span>{{ row.originId }}</span>
              </div>
              <div class="col col-6">
                <label>问题发现时间</label>
                <span>{{ row.discoveryTime }}</span>
              </div>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="案件编号" width="100" prop="originId" show-overflow-tooltip/>
        <el-table-column label="来源" width="100" show-overflow-tooltip>
          <template #default="{ row }">
            {{ getDictLabel(dict.sfssSourceTable, row.sourceTable) }}
          </template>
        </el-table-column>
        <el-table-column label="来源(全)" width="100" show-overflow-tooltip>
          <template #default="{ row }">
            {{ row.sourceTablePath }}
          </template>
        </el-table-column>
        <el-table-column label="受理时间" width="100" prop="discoveryTime"
                         :formatter="(_, __, v) => timeFormat(v,'yyyy-mm-dd hh:MM:ss')" show-overflow-tooltip/>
        <el-table-column label="来件人姓名" width="100" prop="responderName"/>
        <el-table-column label="身份证号" width="100" prop="responderIdCode" show-overflow-tooltip/>
        <el-table-column label="联系电话" width="100" prop="responderPhone" show-overflow-tooltip/>
        <el-table-column label="被投诉机构" width="130" prop="secondDepartName"/>
        <el-table-column label="来信内容" width="100" prop="thingDesc" show-overflow-tooltip/>
        <el-table-column label="涉嫌问题" width="100" prop="involveProblemStr" show-overflow-tooltip/>
        <el-table-column label="是否重复件" width="100">
          <template #default="{ row }">
            {{ getDictLabel(dict.yesNo, row.repeatt) }}
          </template>
        </el-table-column>
        <el-table-column label="是否领导批示" width="130" v-if="false">
          <template #default="{ row }">
            {{ getDictLabel(dict.yesNo, row.leadApproval) }}
          </template>
        </el-table-column>
        <el-table-column label="标签" width="100">
          <template #default="{ row }">
            {{ getDictLabel(dict.tagList, row.tag) }}
          </template>
        </el-table-column>
        <el-table-column label="办理方式" width="100">
          <template #default="{ row }">
            {{ getDictLabel(dict.handleMethodType, row.handleMethod) }}
          </template>
        </el-table-column>
        <el-table-column label="办理情况" width="100" prop="xxx" v-if="false"/>
        <el-table-column label="业务类别" width="100" prop="businessTypeName"/>
        <el-table-column label="业务类别Code" width="100" prop="businessTypeCode" v-if="false"/>
        <el-table-column label="状态" width="100" prop="status"/>
        <el-table-column label="操作" width="240" fixed="right">
          <template #default="{ row }">
            <el-button type="primary" v-if="row.status === '0'" link @click="handleAction(row)">办理</el-button>
            <el-button type="primary" v-if="row.status === '0'" link @click="handleUpdate(row)">修改</el-button>
            <el-button type="danger" v-if="row.status === '0'" link @click="handleDel(row)">删除</el-button>
            <el-button type="primary" v-if="row.status === '1'" link @click="handleWatchDetail(row)">查看详情
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="flex end mt-8">
      <el-pagination
          @size-change="getList"
          @current-change="getList"
          :page-sizes="[10, 20, 50]"
          v-model:page-size="query.size"
          v-model:current-page="query.current"
          layout="total, sizes, prev, pager, next"
          :total="total"
      >
      </el-pagination>
    </div>
  </div>

  <data-import-case
      v-model="show"
      title="案件核查 数据导入"
      @close="show = false"
      @update="getList"
  />

  <!-- 添加 -->
  <data-complaintformdialog
      v-model="addShow"
      mode="add"
      :model="addForm"
      :dict="dict"
      :rules="addRules"
      @submit="submitAdd"
  />

  <!-- 修改  -->
  <data-complaintformdialog
      v-model="updateShow"
      mode="edit"
      :model="updateForm"
      :dict="dict"
      :rules="addRules"
      @submit="submitUpdate"
  />

  <!-- 办理 -->
  <el-dialog
      v-model="negativeVerifySfssDailog"
      title="办理情况"
      width="80vw"
      top="5vh"
      destroy-on-close
  >
    <div v-loading="submitLoading" element-loading-text="提交中...">
      <negative-verify-sfss ref="negativeVerifySfssRef" />
    </div>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="negativeVerifySfssDailog = false">取消</el-button>
        <el-button type="primary" @click="handleSubmit" :loading="submitLoading" :disabled="submitLoading" >提交</el-button>
      </div>
    </template>

  </el-dialog>


  <!-- 详情 -->
  <!--  <negative-dialog-->
  <!--      v-model="dialogShow"-->
  <!--      id="2003439481629294659"-->
  <!--      @close="show = false"-->
  <!--      ref="negativeDialogRef"-->
  <!--  />-->
  <complaint_detail
      v-model="detailShow"
      :id="activeId"
      :dict="dict"/>

</template>


<script setup>
import {ProblemSources} from "@/enums/dictEnums";
import {timeFormat} from "@/utils/util";
import feedback from "@/utils/feedback";
import useCatchStore from "@/stores/modules/catch";
import {
  addComplaintCollection, addComplaintCollectionBlame,
  delComplaintCollection,
  getComplaintCollectionPage,
  updateComplaintCollection
} from "@/api/data/complaintCollection.ts";
import Complaint_detail from "@/components/data/complaint_detail.vue";

const route = useRoute()
const catchStore = useCatchStore();
const show = ref(false);


// region  列表
const query = ref({
  size: 10,
  current: 1,
});
const list = ref([]);
const total = ref(0);
const loading = ref(false)
const getList = async () => {
  loading.value = true;
  let res = await getComplaintCollectionPage(query.value);
  console.log(res.complaintCollectionPageDTOS);
  list.value = res.complaintCollectionPageDTOS;
  total.value = res.total;
  loading.value = false;
}

// 重置
function reset() {
  query.value = {
    size: 10,
    current: 1,
  };
  getList();
}


/**
 * 页面初始化
 */
onMounted(() => {
  getList()
})


// endregion

// region添加相关
const createEmptyAddForm = () => ({
  // 来源：级联组件用
  sourcePath: [],
  // 提交给后端用（由 watch 拆出来）
  sourceTable: '',
  sourceTableSubOne: '',

  originId: '',
  discoveryTime: '',
  responderName: '',
  responderIdCode: '',
  responderPhone: '',
  secondDepartId: '',
  secondDepartName: '',
  thingDesc: '',
  involveProblemIdList: [],
  repeatt: '',
  leadApproval: '',
  tags: [],
  handleMethod: '',
});
const addShow = ref(false);
const addForm = ref(createEmptyAddForm());
// 添加按钮
const add = async () => {
  addForm.value = createEmptyAddForm()
  addShow.value = true
}

// 添加提交
const submitAdd = async () => {
  try {
    const body = {...addForm.value}
    let res = await addComplaintCollection(body);
    if (res === true) {
      feedback.msgSuccess("操作成功");
    } else {
      feedback.notifyError("操作失败");
    }
    addShow.value = false;
    addForm.value = createEmptyAddForm();
  } catch (e) {
    console.error(e);
    feedback.notifyError("操作失败");
  } finally {
    getList()
  }
}
// 添加校验
const addRules = {
  sourcePath: [
    {required: true, message: "请选择来源（一级/二级）", trigger: "change"},
  ],
  // originId: [{required: true, message: '请输入编号', trigger: 'blur'}],
  discoveryTime: [{required: true, message: '请选择受理时间', trigger: 'change'}],
  // responderName: [{required: true, message: '请输入来件人姓名', trigger: 'blur'}],
  // responderIdCode: [{required: true, message: '请输入身份证号码', trigger: 'blur'}],
  // responderPhone: [{required: true, message: '请输入联系电话', trigger: 'blur'}],
  secondDepartId: [{required: true, message: '请选择被投诉二级机构', trigger: 'change'}],
  thingDesc: [{required: true, message: '请输入来件内容', trigger: 'blur'}],
  involveProblemIdList: [{required: true, message: '请选择涉嫌问题', trigger: 'change'}],
  repeatt: [{required: true, message: '请选择是否重复件', trigger: 'change'}],
  // leadApproval: [{required: true, message: '请选择是否领导批示', trigger: 'change'}],
  // tags: [{required: true, message: '请选择标签', trigger: 'change'}],
  // handleMethod: [{required: true, message: '请选择办理方式', trigger: 'change'}],
}
watch(
    () => addForm.value.sourcePath,
    (path) => {
      addForm.value.sourceTable = path?.[0] ?? "";
      addForm.value.sourceTableSubOne = path?.[1] ?? "";
    },
    {deep: true}
);
// endregion

// region 修改相关
const updateShow = ref(false);
const updateForm = ref({
  // ✅ 至少要有下面这 3 个字段（子组件会用到）
  sourcePath: [],
  sourceTable: "",
  sourceTableSubOne: "",

  // 其他字段给个默认值，避免表单里 v-model 报 undefined
  id: "",
  originId: "",
  discoveryTime: "",
  responderName: "",
  responderIdCode: "",
  responderPhone: "",
  secondDepartId: "",
  secondDepartName: "",
  thingDesc: "",
  repeatt: "",
  leadApproval: "",
  handleMethod: "",
  involveProblemIdList: [],
  tags: [],
})

// 修改按钮点击事件
const handleUpdate = async (row) => {
  const r = JSON.parse(JSON.stringify(row || {}))
  console.log(r)
  updateForm.value = {
    // id 必须带
    id: r.id ?? '',
    // ✅ 回显来源：cascader 只认 sourcePath
    sourceTable: r.sourceTable ?? '',
    sourceTableSubOne: r.sourceTableSubOne ?? '',
    sourcePath: [r.sourceTable, r.sourceTableSubOne].filter(Boolean),
    // 其它字段正常回显
    originId: r.originId ?? '',
    discoveryTime: r.discoveryTime ?? '',
    responderName: r.responderName ?? '',
    responderIdCode: r.responderIdCode ?? '',
    responderPhone: r.responderPhone ?? '',
    secondDepartId: r.secondDepartId ?? '',
    secondDepartName: r.secondDepartName ?? '',
    thingDesc: r.thingDesc ?? '',
    repeatt: r.repeatt ?? '',
    leadApproval: r.leadApproval ?? '',
    handleMethod: r.handleMethod ?? '',
    // 多选字段
    involveProblemIdList: splitToArray(r.involveProblemIdList ?? r.involveProblem),
    tags: splitToArray(r.tags ?? r.tag),
    businessTypeName: r.businessTypeName ?? '',
    businessTypeCode: r.businessTypeCode ?? '',
  };
  updateShow.value = true
}
const submitUpdate = async () => {
  const body = {
    ...updateForm.value,
  }
  let res = await updateComplaintCollection(body)
  if (res === true) {
    feedback.msgSuccess("操作成功");
    updateShow.value = false
    getList()
  }
}

function splitToArray(val) {
  if (!val) return []
  if (Array.isArray(val)) return val
  if (typeof val === 'string') {
    return val
        .split(/[,，]/)
        .map(s => s.trim())
        .filter(Boolean)
  }
  return []
}


// endregion

// region 删除相关
const handleDel = async (row) => {
  console.log(row)
  await feedback.confirm(`确定删除该数据？`);
  const body = {
    id: row.id
  }
  await delComplaintCollection(body)
  feedback.msgSuccess("操作成功");
  getList();
}
// endregion

// region 枚举相关
const storeDict = computed(() =>
    catchStore.getDicts([
      "businessType",
      "suspectProblem",
      "policeType",
      "hostLevel",
      "timeLimit",
      "approvalFlow",
      "specialSupervision",
      "checkStatus",
      "sfssSourceTable",
    ]) || {}
);

// ② 页面私有字典
const localDict = {
  sourceTable: [
    {id: 1, dictLabel: "局长信箱", dictValue: "data_mailbox"},
    {id: 2, dictLabel: "公安部信访", dictValue: "data_petition_complaint_21"},
    {id: 3, dictLabel: "国家信访", dictValue: "data_petition_complaint_22"},
    {id: 4, dictLabel: "12389投诉", dictValue: "data_case_verif"},
    {id: 5, dictLabel: "领导交办", dictValue: "leader_explain"},
  ],
  sourceTableAndLevel: [
    {
      id: 1,
      label: "局长信箱",
      value: "23",
      children: [
        {
          label: "局长信箱",
          value: "23_jz",
        },
        {
          label: "厅长信箱",
          value: "23_tz",
        },
      ],
    },
    {
      id: 2,
      label: "公安部信访",
      value: "22",
      children: [
        {
          label: "公安部信访件",
          value: "22_1",
        },
        {
          label: "省厅信访件",
          value: "22_2",
        },
        {
          label: "市局信访件",
          value: "22_3",
        },
      ],

    },
    {
      id: 3,
      label: "国家信访",
      value: "21",
      children: [
        {
          label: "国家信访件",
          value: "21_1",
        },
        {
          label: "省信访件",
          value: "21_2",
        },
        {
          label: "市信访件",
          value: "21_3",
        },
      ],
    },
    {
      id: 4,
      label: "12389投诉",
      value: "17",
      children: [
        {
          label: "公安部件",
          value: "17_1",
        },
        {
          label: "省厅件",
          value: "17_2",
        },
        {
          label: "市局件",
          value: "17_3",
        },
      ],
    },
    {
      id: 5,
      label: "领导交办",
      value: "leader_explain",
      children: [
        {
          label: "市局领导交办",
          value: "18",
        },
        {
          label: "支队领导交办",
          value: "19",
        },
        {
          label: "上级领导交办",
          value: "20",
        },
      ],
    },
  ],
  yesNo: [
    {id: 1, dictLabel: "是", dictValue: "1"},
    {id: 2, dictLabel: "否", dictValue: "0"},
  ],
  tagList: [
    {id: 1, dictLabel: "紧急", dictValue: "URGENT"},
    {id: 2, dictLabel: "一般", dictValue: "NORMAL"},
    {id: 3, dictLabel: "重复投诉", dictValue: "REPEAT"},
  ],
  handleMethodType: [
    {id: 1, dictLabel: "自办", dictValue: "0"},
    {id: 2, dictLabel: "下发", dictValue: "1"},
  ],
  leadResponsibilityType: [
    {dictCode: "1", dictValue: "1", dictLabel: "领导责任"},
  ],
};

// ③ 最终使用的 dict（合并）
const dict = computed(() => ({
  ...storeDict.value,
  ...localDict,
}));

function getDictLabel(list, value) {
  if (!Array.isArray(list)) return '/'

  // 兼容 value 是数组：['0'] / ['1']
  if (Array.isArray(value)) value = value[0]

  if (value === null || value === undefined || value === '') return '/'

  // 兼容你的字典字段：dictValue/dictLabel
  const item = list.find(d => d.dictValue == value)
  return item ? item.dictLabel : '/'
}

// endregion

// region 办理相关
const negativeVerifySfssDailog = ref(false)
const submitLoading = ref(false)
const sleep = (ms) => new Promise((resolve) => setTimeout(resolve, ms));
// 点击办理
const handleAction = async (row) => {
  negativeSfss.value.currentRow = JSON.parse(JSON.stringify(row))
  negativeVerifySfssDailog.value = true
  console.log(row)
}
const negativeVerifySfssRef = ref();
// 办理提交
const handleSubmit = async () => {
  if (submitLoading.value) return
  submitLoading.value = true
  await nextTick();
  try {
    // const formData = await negativeVerifySfssRef.value.validate();
    const formData = negativeVerifySfssRef.value.getData()
    console.log(formData)
    await sleep(3000);
    let res = await addComplaintCollectionBlame(formData);
    feedback.msgSuccess("提交成功");
    negativeVerifySfssDailog.value = false;
    getList();
  } catch (err) {
    feedback.notifyError("提交失败")
  } finally {
    submitLoading.value = false
  }
}



const negativeSfss = ref({
  currentRow: {},
  // problemSourcesCode: ProblemSources.GJXFPT,
  //  涉及人员
  blames: [],
  // 涉及领导
  blameLeaders: [],
  // 经办人
  handlePolices: [{}],
});
provide('negative', negativeSfss)
// endregion


// region  查看详情相关
const detailShow = ref(false)
const activeId = ref("")
const handleWatchDetail = async (row) => {
  activeId.value = row.id
  detailShow.value = true
}
// endregion

</script>


<style>
.widthClass {
  min-width: 50% !important;
}
</style>

<style lang="scss" scoped>
.el-form-item .el-form-item {
  margin-bottom: 18px;
}

:deep() {
  .el-form-item--label-right .el-form-item__label {
    text-align: right;
    line-height: 32px;
    margin-bottom: 0;
  }
}

p {
  margin: 0;
  line-height: 1.4;
}

.radio-group {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
}

.radio-group :deep(.el-radio) {
  margin-right: 0;
}

.dialog-footer {
  display: flex;
  justify-content: flex-end; /* 右下角 */
  padding: 0 24px 16px;      /* 👈 关键：不贴边 */
}


</style>