<template>
  <div>
    <!-- 搜索 -->
    <div ref="searchBox" class="mt10">
      <Search :searchArr="searchConfiger" @submit="onSearch" >
   <el-button type="primary" size="small" @click="handleAdd('add', null)">发起布控</el-button>
      </Search>
    </div>

    <!-- 按钮组 -->
      <!-- 表格 -->
      <div class="margTop">
        <MyTable 
          :tableData="pageData.tableData" 
          :tableColumn="pageData.tableColumn" 
          :tableHeight="pageData.tableHeight"
          :key="pageData.keyCount" 
          :tableConfiger="pageData.tableConfiger" 
          :controlsWidth="pageData.controlsWidth">

          <template #bkZt="{ row }">
            <DictTag :tag="false" :value="row.bkZt" :options="D_GS_BK_ZT" />
          </template>
          <template #bkDj="{ row }">
            <DictTag :tag="false" :value="row.bkDj" :options="D_GS_SSYJ" v-if="route.name == 'myControl'" />
            <DictTag :tag="false" :value="row.bkDj" :options="D_BZ_JQDJ" v-else />
          </template>
          <template #bkDx="{ row }">
            <DictTag :tag="false" :value="row.bkDx" :options="D_GS_BK_NEWDX" />
          </template>
          <template #bkdxList="{ row }">
            <span v-if="row.bkdxList"><span class="nowrap" v-for="(it, idx) in row.bkdxList" :key="idx">
                {{ it.ryXm ? it.ryXm : it.imei ? it.imei : it.imsi ? it.imsi : '' }}
                <!-- :it.ryXm?it.mac:it.imsi?it.imsi:'xxxx' -->
                <span v-if="idx < row.bkdxList.length - 1">、</span></span></span>
            <span v-else>暂无</span>
          </template>
          <!-- <template #sjrs="{ row }">
          <span v-if="row.bkdxList"> {{ row.bkdxList.length }} </span>
           <span v-else>0</span>
        </template> -->
          <!-- <template #qyList="{ row }">
          <span v-for="(it,idx) in row.qyList" :key="idx"> {{ it.qymc }} <span v-if="idx < row.qyList.length-1">、</span></span>
        </template> -->
          <!-- <template #yjcs="{row}">
          <span @click="openWarning(row)" style="color: #00ffff;" class="mr5 pointer">{{ row.yjcs || 0}}</span>次
        </template> -->
          <!-- 操作 -->
          <template #controls="{ row }">
            <template v-if="!row.gzlid">
              <!-- 工作流的送审 -->
              <!-- <el-link type="primary" v-if="['01', '03', '06'].includes(row.bkZt)" size="small"
                @click="createProcess(row)">送审</el-link> -->
                
                <!-- 不走工作流的送审 -->
                <el-link type="primary" size="small" v-if="['01', '03', '06'].includes(row.bkZt)" @click="hadleSendSH(row)">送审</el-link>

                <el-link type="primary" size="small" @click="tbGsxtBkQuashList(row)" v-if="!!!(['01', '03', '06'].includes(row.bkZt))">撤控</el-link>
              
              <el-link type="primary" v-if="['01', '03', '06'].includes(row.bkZt)" size="small"
                @click="handleAdd('edit', row)">编辑</el-link>

            </template>
            <!-- 审核通过后才有轨迹 -->
            <el-link type="primary" size="small" @click="openShowHzd(row)" v-if="row.bkZt == '05'">回执单</el-link>
            <el-link type="primary" size="small" @click="handleAdd('detail', row)">详情</el-link>
            <el-link type="danger" size="small" @click="handleRow(row.id)"
              v-if="['01', '03', '06'].includes(row.bkZt)">删除</el-link>
          </template>
        </MyTable>
        <Pages @changeNo="changeNo" @changeSize="changeSize" :tableHeight="pageData.tableHeight" :pageConfiger="{
          ...pageData.pageConfiger,
          total: pageData.total
        }"></Pages>
      </div>
  </div>
  <!-- 布控类型 -->
  <AddBkdx ref="addBkdxForm" @change="getList" :name="route.name" :dic="{
    D_GS_BK_NEWDX, D_GS_BK_BKYS, D_BZ_XB, D_GS_BK_CZYQ, D_BZ_JQDJ, D_BZ_BKLYS,
    D_GS_SSYJ, BD_BK_CLYJBQ, D_GS_BK_CZJSDWLX, D_GS_BK_TJFS, D_GS_ZDR_YJDJ,
  }" />
  <!-- 预警弹窗 -->
  <YjDialog ref="warningkdxForm"></YjDialog>

  <SubmissionProcess 
    v-model="showSp" 
    :data="rowData" 
    :userData="{ ajmc: '布控审批', flowType: 'BKSP', modelName: '布控' }"
    :path="fixedValue" 
    @getList="getList" 
  />
  <Hzd
    v-model="hzdVisible"
    :dataList="dataList"
    :dict="{D_GS_BK_NEWDX,D_BZ_BKLYS,D_GS_SSYJ,D_BZ_JQDJ,D_GZL_SHZT,D_GS_BK_CZYQ}"
    :name="route.name"
  />
</template>

<script setup>
import AddBkdx from "./components/addBkdx.vue";
import YjDialog from "./components/yjDialog.vue";
import MyTable from "@/components/aboutTable/MyTable.vue";
import Pages from "@/components/aboutTable/Pages.vue";
import Search from "@/components/aboutTable/Search.vue";
import { qcckGet, qcckPost, qcckDelete } from "@/api/qcckApi.js";
import SubmissionProcess from '@/components/flowPath/submissionProcess.vue'
import { tbGsxtBkQuash } from '@/api/zdr.js'
import { useRouter, useRoute } from 'vue-router'
import { reactive, ref, onMounted, getCurrentInstance } from "vue";
import Hzd from "./components/dolog/hzd.vue";
const router = useRouter()
const route = useRoute()
const { proxy } = getCurrentInstance();
const { D_GS_BK_BKYS, D_BZ_XB, D_GS_BK_SJLX, D_GS_SSYJ, BD_BK_CLYJBQ, D_GS_ZDR_YJDJ,
  D_GS_BK_NEWDX, D_GS_BK_ZT, D_GS_BK_CZYQ, D_GS_BK_CZJSDWLX, D_GS_BK_TJFS, D_BZ_BKLYS,D_GZL_SHZT,
  D_BZ_JQDJ, D_BZ_SF } = proxy.$dict("D_GS_ZDR_YJDJ", "D_GS_BK_BKYS", "D_BZ_XB", "D_GS_BK_SJLX",
    "D_GS_SSYJ", "D_GS_BK_NEWDX", "D_GS_BK_ZT", "D_GS_BK_CZYQ", "D_GS_BK_CZJSDWLX", "D_GS_BK_TJFS",'D_GZL_SHZT',
    'BD_BK_CLYJBQ', 'D_BZ_JQDJ', "D_BZ_BKLYS", "D_BZ_SF"); //获取字典数据
const addBkdxForm = ref(null); //布控对象组件
const warningkdxForm = ref(); //布控对象组件
const searchBox = ref(); //搜索框
const searchConfiger = ref([
  {
    label: "布控等级",
    prop: "bkDj",
    placeholder: "请选择布控等级",
    showType: "select",
    options: route.name == 'myControl' ? D_GS_SSYJ : D_BZ_JQDJ
  },
  {
    label: "布控类型",
    prop: "bkDx",
    placeholder: "请选择布控类型",
    showType: "select",
    options: D_GS_BK_NEWDX
  },
  {
    label: "布控状态",
    prop: "bkZt",
    placeholder: "请选择布控状态",
    showType: "select",
    options: D_GS_BK_ZT
  },
  {
    label: "布控时间",
    prop: "startTime",
    placeholder: "请选择布控时间",
    showType: "datetimerange",
  }, {
    label: "布控部门",
    prop: "bkfqrSsbmdm",
    placeholder: "请选择布控部门",
    showType: "department",
  },
]);
const queryFrom = ref({});
const pageData = reactive({
  tableData: [], //表格数据
  keyCount: 0,
  tableConfiger: {
    rowHieght: 61,
    showSelectType: "null", //选择类型
    loading: false
  },
  total: 0,
  pageConfiger: {
    pageSize: 20,
    pageCurrent: 1
  }, //分页
  controlsWidth: 250, //操作栏宽度

  tableColumn: [
    { label: "布控对象", prop: "bkdxList", showSolt: true, showOverflowTooltip: true },
    { label: "布控类型", prop: "bkDx", showSolt: true, showOverflowTooltip: true },
    { label: "布控等级", prop: "bkDj", showSolt: true },
    { label: "开始时间", prop: "bkSjKs", showOverflowTooltip: true },
    { label: "结束时间", prop: "bkSjJs", showOverflowTooltip: true },
    { label: "申请人", prop: "bkfqrXm" },
    { label: "布控状态", prop: "bkZt", showSolt: true },
  ]
});
// 固定值
const fixedValue = {
  clueVerification: 'deploymentApproval',
  byMeansOf: 'tbGsxtBk/gsbkCallback',
  nobyMeansOf: 'tbGsxtBk/gsbkCallback',
  recycle: 'tbGsxtBk/gsbkCallback',
}
const showSp = ref(false);
const rowData = ref()
const createProcess = (row) => {
  showSp.value = true;
  rowData.value = row
}
onMounted(() => {
  getList();
  tabHeightFn();
});

// 搜索
const onSearch = (val) => {
  queryFrom.value = {
    ...val,
    startTime: val.startTime ? val.startTime[0] : '',
    endTime: val.startTime ? val.startTime[1] : ''
  };
  pageData.pageConfiger.pageCurrent = 1;
  getList();
};

const changeNo = (val) => {
  pageData.pageConfiger.pageCurrent = val;
  getList();
};
const changeSize = (val) => {
  pageData.pageConfiger.pageSize = val;
  getList();
};

// 获取列表
const getList = () => {
  pageData.tableConfiger.loading = true;
  let data = {
    ...pageData.pageConfiger,
    ...queryFrom.value,
    bkcxlx: '01',
    bklx: route.name == 'myControl' ? '01' : '02'
  };
  qcckGet(data, "/mosty-gsxt/tbGsxtBk/selectPage").then((res) => {
    pageData.tableData = res.records || [];
    pageData.total = res.total;
    pageData.tableConfiger.loading = false;
  }).catch(() => {
    pageData.tableConfiger.loading = false;
  });
};

function hadleSendSH (row) {
  proxy.$confirm("确定要送审吗？", "提示", { type: "warning" }).then(() => {
    qcckGet({}, '/mosty-gsxt/tbGsxtBk/subExamine/'+row.id).then(res => {
      proxy.$message({ type: "success", message: "送审成功" });
      getList();
    }).catch(() => {
        proxy.$message({ type: "error", message: "送审失败" });
    })
  })
   
}

const shForm = ref({
  id: '',
  sftg: '',
  bkshBtgyy: ''
})
const shFormRef = ref(null)
const shFormRules = {
  sftg: [{ required: true, message: '请选择是否通过', trigger: 'change' }],
  bkshBtgyy: [{ required: true, message: '请输入布控审核不通过原因', trigger: 'blur' }]
}

// 提交送审
const submitSh = () => {
  try {
   shFormRef.value.validate(valida=>{
      if(!valida) return;
      const params = {...shForm.value }
     
    })
  } catch (err) {
    if (err !== false) {
      proxy.$message({ type: "error", message: err.message || '送审失败' });
    }
  }
}

const handleAdd = (type, row) => {
  addBkdxForm.value.init(type, row);
};

// 删除
const handleRow = (id) => {
  proxy.$confirm("确定要删除？", "警告", { type: "warning" }).then(() => {
    qcckDelete({}, "/mosty-gsxt/tbGsxtBk/" + id).then(() => {
      proxy.$message({ type: "success", message: "删除成功" });
      getList();
    });
  })
};
// 回执单
const hzdVisible = ref(false)
const dataList= ref({})
const openShowHzd = (row) => {
  hzdVisible.value = true
  dataList.value = row
}
// 表格高度计算
const tabHeightFn = () => {
  pageData.tableHeight = window.innerHeight - searchBox.value.offsetHeight - 220;
  window.onresize = function () {
    tabHeightFn();
  };
};
const tbGsxtBkQuashList = (item) => {
  tbGsxtBkQuash({ id: item.id }).then(res => {
    proxy.$message({ type: "success", message: "操作成功" });
    getList();
  })
}
</script>

<style lang="scss" scoped>
.el-loading-mask {
  background: rgba(0, 0, 0, 0.5) !important;
}
</style>
