<script setup>
import {getListData,addOrUpDataFun,removeByIdFun,getNegativePageByQuery} from "@/api/superviseReport/superviseReport";
import {timeFormat} from "@/utils/util";

const tableRef = ref(null)
const query = ref({
  current: 1,
  size: 10,
  type: 2
})
const listData = ref([]);
const total = ref(0);
const loading = ref(false);
/**
 * 获取表单数据
 * */
const getList =async ()=>{
  loading.value=true
  try{
    const res = await  getListData(query.value);
    listData.value=res.records;
    total.value = res.total;
    loading.value = false
  }catch (e) {
    loading.value = false
  }
}
const reset =()=>{
  query.value={
    current: 1,
    size: 10,
    type: 2
  }
  getList()
}

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

//编辑
const editShow =ref(false);
const editLoading = ref(false);
const editRow =ref({});

const editFlag = ref(false)
const editShowFun = () =>{
  editRow.value={
    type: 2
  }
  editFlag.value = false
  editShow.value=true;
}
const UpDataShowFun = (row) =>{
  editShow.value=true;
  editRow.value=row;
  editFlag.value = true
}

const formRef = ref(null)
//保存数据
const handleSumbit = async ()=>{
  await formRef.value.validate();
  editLoading.value=true;
  const res = await addOrUpDataFun(editRow.value);
  editShow.value=false;
  await getList();
}

//详情
const detailShow = ref(false);
const detailRow = ref({})
const getDetailData = (row)=>{
  detailShow.value=true;
  detailRow.value =row
}

//删除数据
const delReportData = async (row)=>{
  const res = await removeByIdFun(row.id);
  await getList();
}

//督察问题
const negativeShow = ref(false)
const negativeTable = ref();
const negativeQuery = ref({
  current: 1,
  size: 10,
  departBranch:false
})
const negativeTotal = ref(0);
const negativeLoging = ref(false);

const handleNegativeTable =async (row)=>{
  if(row.superviseNumber > 0){
    try{
      negativeLoging.value=true;
      await getNegativePageFun(row);
      negativeShow.value = true;
    }catch (e){
      console.log("督察问题获取失败")
      negativeLoging.value=false;
    }
  }
}

const getNegativePageFun = async (row)=>{
  negativeQuery.value.id =row.id;
  const res = await getNegativePageByQuery(row);
  negativeTable.value =res.records;
  negativeTotal.value = res.total;
  negativeLoging.value=false;
}

const closeAdd =()=>{
  editRow.value={}
  console.log(editRow.value)
}
watch(()=>editRow.value.files,(val)=>{
  console.log(val)
  if(val){
    console.log(val[0]?.fileName.split(".")[0])
    editRow.value.reportName = val[0]?.fileName.split(".")[0]
  }

})

</script>

<template>
  <div class="container">
    <header>
      <el-form>
        <el-row :gutter="20">
          <el-col :span="6">
            <el-form-item label="通知标题">
              <el-input  v-model="query.reportName" placeholder="请输入通知标题"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <div class="flex between mt-20 mb-26">
          <div>
            <el-button type="primary" @click="editShowFun" >创建通知</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>
      </el-form>
    </header>
    <main>
      <div class="table-container" v-loading="loading">
        <el-table
            :data="listData"
            ref="tableRef"
            style="width: 100%"
        >
          <el-table-column prop="reportName" label="通知标题" show-overflow-tooltip></el-table-column>
          <el-table-column prop="departName" label="通知单位" show-overflow-tooltip></el-table-column>
          <el-table-column prop="crtTime" label="创建时间" width="100">
            <template #default="{row}">
              {{ timeFormat(row.crtTime) }}
            </template>
          </el-table-column>
          <el-table-column prop="crtUser" label="创建人" width="100"></el-table-column>
          <el-table-column label="操作" fixed="right" width="260">
            <template #default="{ row }">
              <div class="flex v-center">
                <el-button type="primary" link @click="UpDataShowFun(row)" >编辑</el-button>
                <el-button type="primary" link @click="getDetailData(row)" >查看详情</el-button>
                <el-button type="danger" link @click="delReportData(row)" >删除</el-button>
              </div>
            </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"
        />
      </div>
    </main>


    <el-dialog :title="editFlag ? '编辑通知' : `创建通知`" destroy-on-close v-model="editShow" v-loading="editLoading" @close="closeAdd">
      <el-form :model="editRow"  ref="formRef" :label-width="100">
        <el-form-item label="通知标题" prop="reportName" :rules="{
                        required: true,
                        message: '请填写通知标题',
            }">
          <el-input v-model="editRow.reportName" placeholder="请填写通知标题" style="width: 400px"></el-input>
        </el-form-item>
        <el-form-item label="通知单位" prop="departIds">
          <depart-tree-select v-model="editRow.departIds" multiple style="width: 400px" />
        </el-form-item>
        <div class="flex v-center"  style="height:30px;">
          <h5>附件</h5>
        </div>
        <el-form-item :rules="{
                        required: true,
                        message: '请上传通知附件',
            }" prop="files"  style="width: 100%">
          <file-upload
              style="width: 100%"
              :uploadDrag="true"
              v-model:files="editRow.files"></file-upload>
        </el-form-item>
      </el-form>
      <footer class="flex end" style="margin-top: 10px">
        <el-button @click="editShow = false" size="large">取消</el-button>
        <el-button type="primary" @click="handleSumbit" size="large"
        >{{editFlag ? '提交' : '创建' }}</el-button
        >
      </footer>
    </el-dialog>

    <el-dialog :title="`通知详情`" v-model="detailShow">
      <el-row>
        <el-col >
          <el-form-item label="通知标题">
            {{detailRow.reportName}}
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col >
          <el-form-item label="通知单位">
            {{ detailRow.departName }}
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="创建警号">{{detailRow.crtEmpNo}}</el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="创建人">{{detailRow.crtUser}}</el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="创建单位">{{detailRow.crtDepart}}</el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="创建时间"> {{ timeFormat(detailRow.crtTime) }} </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-form-item label="附件">
          <file-list v-model:files="detailRow.files" :removeEnable="false" />
        </el-form-item>
      </el-row>
    </el-dialog>
  </div>
</template>