<template>
  <div>
    <div class="titleBox">
       <!-- 头部 -->
      <PageTitle title="巡访任务管理">
        <el-button type="primary" @click="addEdit('add', '')">
          <el-icon style="vertical-align: middle"> <CirclePlus /> </el-icon>
          <span style="vertical-align: middle">新增</span>
        </el-button>
        <el-button @click="delDictItem(ids)" :disabled="ids.length == 0" typeof="danger">
          <el-icon style="vertical-align: middle"><Delete /> </el-icon>
          <span style="vertical-align: middle">批量删除</span>
        </el-button>
      </PageTitle>
    </div>
    <!-- 搜索 --> 
    <div ref="searchBox">
        <Search :searchArr="searchConfiger" @submit="onSearch">
          <template #defaultSlot>
            <MOSTY.Department width="100%" clearable v-model="listQuery.ssbmdm" />
          </template>
        </Search>
      </div>
    <!-- 表格 -->
    <div class="tabBox">
      <MyTable
        :tableData="pageData.tableData"
        :tableColumn="pageData.tableColumn"
        :tableHeight="pageData.tableHeight"
        :key="pageData.keyCount"
        :tableConfiger="pageData.tableConfiger"
        :controlsWidth="pageData.controlsWidth"
        @chooseData="chooseData"
      >
        <template #xfdw ="{ row }">
          <el-tag v-for="it in row.xfdw" :key="it.id" style="margin:0 4px;">{{it.dwmc}}</el-tag>
        </template>
        <template #xflx ="{ row }">
          <dict-tag :options="D_BZ_XFLX" :value="row.xflx" :tag="false" />
        </template>
        <!-- 操作 -->
        <template #controls="{ row }">
          <el-button size="small" @click="addEdit('edit', row.id)">编辑</el-button>
          <el-button size="small" @click="addEdit('detail', row.id)">详情</el-button>
          <el-button size="small" @click="delDictItem([row.id])">删除</el-button>
        </template>
      </MyTable>
      <Pages
        @changeNo="changeNo"
        @changeSize="changeSize"
        :tableHeight="pageData.tableHeight"
        :pageConfiger="{
          ...pageData.pageConfiger,
          total: pageData.total
        }"
      ></Pages>
    </div>
    <!-- 编辑-新增弹窗 -->
    <EditAddForm ref="addEditDiloag" :dic="{D_BZ_XFLX}" @updateDate="getData" />
  </div>
</template>

<script setup>
import { qcckGet, qcckPost ,qcckDelete} from "@/api/qcckApi.js";
import * as MOSTY from "@/components/MyComponents/index";
import PageTitle from "@/components/aboutTable/PageTitle.vue";
import MyTable from "@/components/aboutTable/MyTable.vue";
import Pages from "@/components/aboutTable/Pages.vue";
import Search from "@/components/aboutTable/Search.vue";
import EditAddForm from './components/editAddForm.vue'
import { reactive, ref ,onMounted,getCurrentInstance } from 'vue';
const { proxy } = getCurrentInstance();
const { D_BZ_XFLX,D_BZ_RWZT } = proxy.$dict("D_BZ_XFLX","D_BZ_RWZT");
const ids = ref([]);//多选
const addEditDiloag = ref()
const searchBox = ref() //搜索框
const searchConfiger = reactive([
  {
    showType: "defaultSlot",
    prop: "ssbmdm",
    options: [],
    placeholder: "请选择单位",
    label: "归属单位"
  },
  {
    showType: "select",
    prop: "xflx",
    placeholder: "请选择巡防类型",
    label: "巡防类型",
  },
  {
    showType: "input",
    prop: "xfdw",
    placeholder: "请输入巡防单位",
    label: "巡防单位"
  },
  {
    showType: "input",
    prop: "xfmj",
    placeholder: "请输入巡防民警",
    label: "巡防民警"
  },
  {
    showType: "select",
    prop: "rwzt",
    placeholder: "请选择任务状态",
    label: "任务状态",
    options:D_BZ_RWZT
  },
  {
    showType:"date",
    prop: "jssj",
    label: "起止时间",
  },
])
const pageData = reactive({
  tableData: [], //表格数据
  keyCount: 0,
  tableConfiger: {
    loading: false,
    rowHieght: 61,
    showSelectType:'checkBox'
  },
  total: 0,
  pageConfiger: {
    pageSize: 10,
    pageNum: 1
  }, //分页
  controlsWidth: 210, //操作栏宽度
  tableColumn: [
    {
      label: "巡防时间",
      prop: "xfsj"
    },
    {
      label: "巡防主责人",
      prop: "xfzzXm"
    },
    {
      label: "巡防单位",
      prop: "xfdw",
      showSolt:true
    },
    {
      label: "巡防类型",
      prop: "xflx",
      showSolt:true
    },
    {
      label: "巡防内容",
      prop: "xfnr"
    },
  ]
});
const listQuery = ref({ssbmdm:''})
onMounted(() => {
  proxy.mittBus.on("mittFn", (data) => {
    pageData.keyCount = data;
  });
  tabHeightFn();
  getData()
});
// 搜索
const onSearch = (val)=>{
  listQuery.value = {...listQuery.value,...val,}
  if(val.cz) listQuery.value.ssbmdm = '';
  delete listQuery.value.cz;
  getData()
}
// 获取数据
const getData = ()=>{
   let pramas = {
    pageSize:pageData.pageConfiger.pageSize,
    pageCurrent:pageData.pageConfiger.pageNum,
    ...listQuery.value
  }
  delete pramas.daterange
  pageData.tableConfiger.loading = true
  qcckGet(pramas,'/mosty-jcgl/tbJcglXf').then(res=>{
    pageData.tableData = res.records || []
    pageData.tableData.forEach(item =>{
      item.xfdw = JSON.parse(item.xfdw)
      item.xfzy = JSON.parse(item.xfzy)
    })
    pageData.tableConfiger.loading = false
    pageData.total = res.total
  }).catch(()=> { pageData.tableConfiger.loading = false })
}

// 多选
const chooseData = (val)=>{
  if(!val) return false;
  ids.value = val.map(v=>{ return v.id })
}

// 批量删除
const delDictItem = (row)=> {
  proxy.$confirm("确定要删除", "警告", {type: "warning"}).then(() => {
    qcckPost(row,'/mosty-jcgl/tbJcglXf/bacth').then(() => {
      proxy.$message({type: "success", message: "删除成功" });
      pageData.pageConfiger.pageNum = 1
      getData();
    });
    }).catch(() => {
      proxy.$message.info("已取消");
  });
};

// 新增
const addEdit =  (type,id)=>{
  addEditDiloag.value.init(type,id)
}
// 表格高度计算
const tabHeightFn = () => {
  pageData.tableHeight = window.innerHeight - searchBox.value.offsetHeight - 244;
  window.onresize = function () {
    tabHeightFn();
  };
};
</script>

<style>
.el-loading-mask{
  background: rgba(0,0,0,0.3);
}
</style>
