<script setup>

import {getListData,getDetail,reportedData,upDataTrue} from "@/api/rightsComfort/supervision";
import {getDictLable} from "@/utils/util";
import useCatchStore from "@/stores/modules/catch";
import feedback from "@/utils/feedback";

//字典
const catchStore = useCatchStore();
const dict = catchStore.getDicts(["personType","injurySeverity","formsOfTort","occurrenceStage","investigatingPolice","situation"]);
let InfringerHandleDict = reactive([
  {
    dictValue:"1",
    dictLabel:"刑事案件"
  },
  {
    dictValue:"2",
    dictLabel:"行政案件"
  },
])

const catchSotre = useCatchStore();


//查询条件
let query = ref({
  current: 1,
  size: 10,
  departBranch:false,
  happenTime: []
})
//表格加载
let loading = ref(false);
let editLoading =ref(false)

let list = ref()
let total = ref(0);
//详情数据
const detailData = ref()
//是否显示
let reportedShow = ref(false)
let editShow = ref(false)
//上报表单
const reportedFORM = ref()
const activeName = ref("1");

//初始化数据
const getList = async ()=>{
  loading.value=true
  const res = await  getListData(query.value);
  list.value =res.records
  total.value=res.total
  loading.value=false
}
//重置筛选条件事件
const reset =() =>{
  query.value ={
    current: 1,
    size: 10,
    departBranch:false,
    applyDate: []
  }
  query.value.activeName = activeName.value
  getList();
}
//tab点击切换分页
const TabsClick =(val)=>{
  activeName.value = val.props.name;
}



//获取数据详情，打开上报
const showReportedFun =async (row) =>{
  detailData.value = await  getDetail(row.rpcId);
  if(detailData.value){
    reportedShow.value=true;
  }
}
//获取详情,打开详情
const showDetail = async (row)=>{
  //获取数据
  detailData.value = await getDetail(row.rpcId);
  if(detailData.value){
    editShow.value=true
  }
}

//查否按钮
const isTrueFun = async (row)=>{
  console.log('row-data',row)
  console.log('caseName',row.caseName)
  await feedback.confirm(`是否将${row.caseName || ''}维权案件数据移除至“无效维权”列表`);
  row.verified = "1";
  upDataTrue(row).then((res)=>{
    getList();
  })
}
//恢复数据
const recoverFun = async (row) => {
  await feedback.confirm(`是否将${row.caseName || ''}维权案件数据恢复至“维权督办”列表`)
  row.verified = "0";
  upDataTrue(row).then((res)=>{
    getList();
  })

}

//上报数据
const handleSumbit =  async ()=>{
  await reportedFORM.value.validate();
  const res = await reportedData(detailData.value);
  reportedShow.value=false;
}


//受伤程度
const changeSeverity =(val,index)=>{
  let injurySeverityName = dict.injurySeverity.find(s=>s.dictValue == val).dictLabel;
  detailData.value.rpcApplyPeoples[index].injurySeverityName = injurySeverityName;
}

const closeDialog =()=>{
  getList()
}

onMounted(()=>{
  query.value.activeName = "1";
  getList();
})
//检测tab分页，进行数据查询
watch(()=>activeName,()=>{
  query.value.activeName = activeName.value;
  getList()
},{deep:true})
</script>

<template>
  <div class="container">
    <el-tabs v-model="activeName" class="demo-tabs" @tab-click="TabsClick">
      <el-tab-pane label="维权督办" name="1"></el-tab-pane>
      <el-tab-pane label="无效维权" name="2"></el-tab-pane>
    </el-tabs>
    <header>
      <el-form>
        <el-row :gutter="20">
          <el-col :span="6">
            <el-form-item label="案件名称">
              <el-input placeholder="请输入案件名称"
                        v-model="query.caseName"/>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="案件管辖单位">
              <depart-tree-select
                  v-model="query.departId"
                  placeholder="请选择案件管辖单位"
              />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="发案时间">
              <date-time-range-picker-ext
                  v-model="query.happenTime"
              />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="案件编号">
              <el-input placeholder="请输入案件编号" v-model="query.caseNumber"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="6">
            <el-form-item label="案件性质">
              <el-select
                  v-model="query.caseType"
                  clearable>
                <el-option
                    v-for="(item,key) in InfringerHandleDict"
                    :key="key"
                    :value="item.dictValue"
                    :label="item.dictLabel"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6" :offset="12">
            <div class="flex end ">
              <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>
          </el-col>

        </el-row>

      </el-form>
    </header>

    <main>
      <div class="table-container" v-loading="loading">
        <el-table
            :data="list"
            ref="tableRef"
            style="width: 100%"
        >
          <el-table-column type="selection" width="55"/>
          <el-table-column label="案件管辖单位" prop="departName" width="160" />
          <el-table-column label="案件编号" prop="caseNumber" width="200" />
          <el-table-column label="案件名称" prop="caseName" width="100"/>
          <el-table-column label="发案时间" prop="happenTime" width="160"/>
          <el-table-column label="简要案情" prop="factReason" width="200" show-overflow-tooltip></el-table-column>
          <el-table-column label="案件性质" prop="" width="120">
            <template #default="{row}">
              {{row.caseType =='1'?'刑事案件':'民事案件'}}
            </template>
          </el-table-column>
          <el-table-column label="案件类别" prop="caseCategory" />
          <el-table-column label="操作" min-width="200">
            <template #default="{ row }">
              <el-button link type="primary" v-if="row.verified === '0' " @click="showReportedFun(row)" >维权上报</el-button>
              <el-button link type="danger"  v-if="row.verified === '0' " @click="isTrueFun(row)">无效维权</el-button>
              <el-button link type="primary" @click="showDetail(row)" >查看详情</el-button>
              <el-button link type="primary" v-if="row.verified === '1' || activeName === '2'" @click="recoverFun(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>


    </main>
    说明：维权督办，展示执法办案系统相关维权案件，由各单位上报维权至市局。
  </div>

  <el-dialog v-model="reportedShow" width="900px" title="维权上报" @close="closeDialog">
    <el-form :model="detailData" ref="reportedFORM" label-width="148">
      <el-row>
        <el-col :span="12">
          <el-form-item
              label="案件管辖公安机关">
            <depart-tree-select
                v-model="detailData.rpcApplyVo.departId"
                placeholder="请选择案件管辖单位"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item
              label="案件名称">
            <el-input disabled v-model="detailData.rpcApplyVo.caseName" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item
              label="案件编号">
            <el-input disabled v-model="detailData.rpcApplyVo.caseNumber" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="案发时间">
            <el-date-picker
                disabled style="width:100%" v-model="detailData.rpcApplyVo.happenTime"></el-date-picker>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-form-item
              label="简要案情">
            <el-input disabled type="textarea" :row="3"  v-model="detailData.rpcApplyVo.factReason"/>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item
              prop="rpcApplyVo.incidentLinkName"
              :rules="{
                    required: true,
                    message: '请输入案发环节',
                    trigger: ['blur'],
                }"
              label="案发环节">
            <el-select v-model="detailData.rpcApplyVo.incidentLinkName">
              <el-option v-for="(item,i) in dict.occurrenceStage"
                         :key="key"
                         :value="item.dictValue"
                         :label="item.dictLabel"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item
              prop="rpcApplyVo.policeJob"
              :rules="{
                    required: true,
                    message: '请选择案发警种',
                    trigger: ['blur'],
                }"
              label="案发警种">
            <el-select
                v-model="detailData.rpcApplyVo.policeJob" >
              <el-option  v-for="(item,key) in dict.investigatingPolice"
                          :key="key"
                          :value="item.dictValue"
                          :label="item.dictLabel"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item
              prop="rpcApplyVo.caseType"
              :rules="{
                    required: true,
                    message: '请选择案件类别',
                    trigger: ['blur'],
                }"
              label="案件类别">
            <el-select  v-model="detailData.rpcApplyVo.caseType" >
              <el-option v-for="(item,i) in InfringerHandleDict" :value="item.dictValue" :label="item.dictLabel" :key="i"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item
              label="案件报送情况">
            <el-input v-model="detailData.rpcApplyVo.caseSubmission" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="变更强制措施报送情况" >
            <el-input v-model="detailData.rpcApplyVo.changeMandate"/>
          </el-form-item>
        </el-col>
      </el-row>

      <!--          被侵权人-->
      <div v-if="detailData.rpcApplyPeoples.length !== 0"  >
        <hr  color="#cccdd1" style="height: 1px;border: 0px"/>
        <div class="flex v-center" style="height:20px;">
          <h5>受害人信息</h5>
        </div>
        <div v-for="(people,index) in detailData.rpcApplyPeoples">
          <div class="flex v-center"  style="height:30px;">
            <h5>受害人{{index + 1}}</h5>
          </div>
          <el-row>
            <el-col :span="12">
              <el-form-item
                  label="姓名">
                <el-input disabled v-model="people.empName"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item
                  label="警号">
                <el-input disabled v-model="people.empNo"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item
                  label="身份证号">
                <el-input disabled v-model="people.idCode"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item
                  label="性别">
                <el-input disabled v-model="people.gender"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item
                  :prop="`rpcApplyPeoples[${index}].empType`"
                  :rules="{
                    required: true,
                    message: '请输入人员类型',
                    trigger: ['blur'],
                }"
                  label="人员类型">
                <el-select v-model="people.empType">
                  <el-option  teleported="true" v-for="(item,key) in dict.personType"
                              :key="key"
                              :value="item.dictValue"
                              :label="item.dictLabel"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item
                  :prop="`rpcApplyPeoples[${index}].injurySeverity`"
                  :rules="{
                    required: true,
                    message: '请输入受伤程度',
                    trigger: ['blur'],
                }"
                  label="受伤程度">
                <el-select v-model="people.injurySeverity" @change="(s)=>changeSeverity(s,index)">
                  <el-option  v-for="(item,key) in dict.injurySeverity"
                              :key="key"
                              :value="item.dictValue"
                              :label="item.dictLabel"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item
                  :prop="`rpcApplyPeoples[${index}].formsOfTort`"
                  :rules="{
                    required: true,
                    message: '请输入侵权形式',
                    trigger: ['blur'],
                }"
                  label="侵权形式">
                <el-select  v-model="people.formsOfTort">
                  <el-option v-for="(item,key) in dict.formsOfTort"
                             :key="key"
                             :value="item.dictValue"
                             :label="item.dictLabel"
                  />
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
        </div>
      </div>
      <!--嫌疑人-->
      <div v-if="detailData.rpcInfringerResults.length !== 0">
        <hr  color="#cccdd1" style="height: 1px;border: 0px"/>
        <div class="flex v-center" style="height:20px;">
          <h5>嫌疑人信息</h5>
        </div>
        <div v-for="(infringer,key) in detailData.rpcInfringerResults">
          <div class="flex v-center"  style="height:30px;">
            <h5>嫌疑人{{key + 1}}</h5>
          </div>
          <el-row>
            <el-col :span="12">
              <el-form-item label="姓名"
                            :prop="`rpcInfringerResults[${key}].tortName`"
              >
                <el-input disabled  v-model="infringer.tortName"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item
                  :prop="`rpcInfringerResults[${key}].idCode`"
                  label="身份证号">
                <el-input disabled

                          v-model="infringer.idCode"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item
                  :prop="`rpcInfringerResults[${key}].gender`"
                  label="性别">
                <el-input disabled

                          v-model="infringer.gender"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item
                  :prop="`rpcInfringerResults[${key}].defendHandleWayName`"
                  :rules="{
                                required: true,
                                message: '请输入打击处理情况',
                                trigger: ['blur'],
                            }"
                  label="打击处理情况">
                <el-select  v-model="infringer.defendHandleWayName">
                  <el-option v-for="(item,key) in dict.situation"
                             :key="key"
                             :value="item.dictValue"
                             :label="item.dictLabel"
                  ></el-option>
                </el-select>

              </el-form-item>
            </el-col>
          </el-row>
        </div>
      </div>

    </el-form>
    <footer class="flex end">
      <el-button @click="reportedShow = false" size="large">取消</el-button>
      <el-button type="primary" @click="handleSumbit" size="large"
      >确定
      </el-button>
    </footer>
  </el-dialog>

  <el-dialog v-model="editShow" width="900px" title="维权详情">
    <el-form :model="detailData" ref="reportedFORM" label-width="148">
      <el-row>
        <el-col :span="12">
          <el-form-item
              label="案件管辖公安机关">

            {{detailData.rpcApplyVo.departName}}
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item
              label="案件名称">
            {{detailData.rpcApplyVo.caseName}}
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item
              label="案件编号">
            {{detailData.rpcApplyVo.caseNumber}}
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="案发时间">
            {{detailData.rpcApplyVo.happenTime}}
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-form-item
              label="简要案情">
            {{detailData.rpcApplyVo.factReason}}
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item
              label="案发环节">
            {{   getDictLable(
              dict.occurrenceStage,
              detailData.rpcApplyVo.incidentLinkName
          ) }}
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item
              label="案发警种">
            {{   getDictLable(
              dict.investigatingPolice,
              detailData.rpcApplyVo.policeJob
          ) }}
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item
              label="案件类别">
            {{detailData.rpcApplyVo.infringerHandle}}
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item
              label="案件报送情况">
            {{detailData.rpcApplyVo.caseSubmission}}
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="变更强制措施报送情况" >
            {{detailData.rpcApplyVo.changeMandate}}
          </el-form-item>
        </el-col>
      </el-row>

      <!--          被侵权人-->
      <div v-if="detailData.rpcApplyPeoples.length !== 0"  >
        <hr  color="#cccdd1" style="height: 1px;border: 0px"/>
        <div class="flex v-center" style="height:20px;">
          <h5>受害人信息</h5>
        </div>
        <div v-for="(people,index) in detailData.rpcApplyPeoples">
          <div class="flex v-center"  style="height:30px;">
            <h5>受害人{{index + 1}}</h5>
          </div>
          <el-row>
            <el-col :span="12">
              <el-form-item
                  label="姓名">
                {{people.empName}}
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item
                  label="警号">
                {{people.empNo}}
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item
                  label="身份证号">
                {{people.idCode}}
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item
                  label="性别">
                {{people.gender}}
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="人员类型">
                {{   getDictLable(
                  dict.personType,
                  people.empType
              ) }}
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="受伤程度">
                {{   getDictLable(
                  dict.injurySeverity,
                  people.injurySeverity
              ) }}

              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="侵权形式">
                {{getDictLable(
                  dict.formsOfTort,
                  people.formsOfTort
              )}}
              </el-form-item>
            </el-col>
          </el-row>
        </div>
      </div>
      <!--嫌疑人-->
      <div v-if="detailData.rpcInfringerResults.length !== 0">
        <hr  color="#cccdd1" style="height: 1px;border: 0px"/>
        <div class="flex v-center" style="height:20px;">
          <h5>嫌疑人信息</h5>
        </div>
        <div v-for="(infringer,key) in detailData.rpcInfringerResults">
          <div class="flex v-center"  style="height:30px;">
            <h5>嫌疑人{{key + 1}}</h5>
          </div>
          <el-row>
            <el-col :span="12">
              <el-form-item label="姓名">
                {{infringer.tortName}}
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="身份证号">
                {{infringer.idCode}}
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="性别">
               {{infringer.gender}}
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="打击处理情况">
                {{   getDictLable(
                  dict.situation,
                  people.injurySeverity
              ) }}
              </el-form-item>
            </el-col>
          </el-row>
        </div>
      </div>
    </el-form>

  </el-dialog>

</template>

<style scoped lang="scss">

</style>
