<template>
  <!-- <div class="title">AI抄表器参数配置</div> -->
  <div>
    <el-form ref="queryFormRef" :model="queryParams" :inline="true" @keyup.enter.native="queryList">
      <el-form-item label="设备SN:">
        <el-input v-model="queryParams.deviceSn" placeholder="设备SN" size="small" style="max-width:180px;"
          show-word-limit clearable maxlength="11" />
      </el-form-item>
      <el-form-item label="遥测站编码:" style="margin-left: 10px;">
        <el-input v-model="queryParams.stationCode" placeholder="遥测站编码" size="small" style="max-width:170px;" clearable
          show-word-limit maxlength="10" />
      </el-form-item>
      <el-form-item label="数据来源:" style="margin-left: 10px;">
        <el-select v-model="queryParams.dataFrom" class="filter-item" placeholder="数据来源" size="small" clearable
          style="max-width: 120px;">
          <el-option v-for="(key, value) in dataFromMap" :key="key" :label="key" :value="value" />
        </el-select>
      </el-form-item>
      <el-form-item label="创建时间:" style="margin-left: 10px;">
        <el-config-provider :locale="locale">
          <el-date-picker v-model="queryParams.createTimeStart" type="date" placeholder="选择开始日期" :shortcuts="shortcuts"
            size="small" style="max-width: 145px;" value-format="YYYY-MM-DD 00:00:00" />
        </el-config-provider>
      </el-form-item>

      <el-form-item>
        <el-config-provider :locale="locale">
          <el-date-picker v-model="queryParams.createTimeEnd" type="date" placeholder="选择结束日期" :shortcuts="shortcuts"
            size="small" style="max-width: 145px;" value-format="YYYY-MM-DD 23:59:59" />
        </el-config-provider>
      </el-form-item>

      <el-form-item label="有效性:" style="margin-left: 10px;">
        <el-select v-model="queryParams.useFlag" class="filter-item" placeholder="是否有效" size="small" clearable
          style="max-width: 120px;">
          <el-option v-for="(key, value) in userFlagMap" :key="key" :label="key" :value="value" />
        </el-select>
      </el-form-item>

      <el-form-item label="设备类型:" style="margin-left: 10px;">
        <el-select v-model="queryParams.deviceType" class="filter-item" placeholder="设备类型" style="max-width: 120px;"
          size="small">
          <el-option v-for="(key, value) in Dic.deviceTypeMap" :key="key" :label="key" :value="value" />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" class="button" :disabled="state.search_disabled" @click="queryList">
          查询配置
        </el-button>
      </el-form-item>
    </el-form>

    <el-table v-loading="loading" :data="state.tableData" border stripe style="width: 100%;margin-top: -10px;"
      :height="tableHeight" highlight-current-row @current-change="handleCurrentRowChange" ref="my_table"
      :header-cell-style="{ background: '#606266', color: '#FFFFFF' }">
      <el-table-column fixed type="index" width="50" align="center" />
      <el-table-column fixed prop="deviceSn" label="设备SN" header-align="center" width="120" />
      <el-table-column fit prop="stationCode" label="遥测站编码" header-align="center" width="120" />

      <el-table-column prop="serverIp1,serverPort1" label="通道1地址" width="180">
        <template #default="scope">
          {{ scope.row.serverIp1 }}:{{ scope.row.serverPort1 }}
        </template>
      </el-table-column>

      <el-table-column prop="serverIp2,serverPort2" label="通道2地址" width="180">
        <template #default="scope">
          {{ scope.row.serverIp2 }}:{{ scope.row.serverPort2 }}
        </template>
      </el-table-column>

      <el-table-column prop="serverIp3,serverPort3" label="通道3地址" width="180" v-if="state.deviceType !== '2'">
        <template #default="scope">
          {{ scope.row.serverIp3 }}:{{ scope.row.serverPort3 }}
        </template>
      </el-table-column>

      <el-table-column prop="serverIp4,serverPort4" label="通道4地址" width="180" v-if="state.deviceType !== '2'">
        <template #default="scope">
          {{ scope.row.serverIp4 }}:{{ scope.row.serverPort4 }}
        </template>
      </el-table-column>

      <el-table-column prop="domainName,domainPort" label="域名地址" width="200">
        <template #default="scope">
          {{ scope.row.domainName }}:{{ scope.row.domainPort }}
        </template>
      </el-table-column>

      <el-table-column fit prop="sampleInterval" label="采样间隔(分)" header-align="center" width="65" />
      <el-table-column fit prop="upInterval" label="上传间隔(分)" header-align="center" width="65" />
      <el-table-column fit prop="ltSampleInterval" label="低温采样间隔(时)" header-align="center" width="80" />
      <el-table-column fit prop="lastVal" label="当前读数" header-align="center" width="90" v-if="state.deviceType !== '2'" />
      <el-table-column fit prop="digitNum" label="数字个数" header-align="center" width="60"
        v-if="state.deviceType !== '2'" />
      <el-table-column fit prop="wheelNum" label="字轮个数" header-align="center" width="60"
        v-if="state.deviceType !== '2'" />
      <!-- <el-table-column fit prop="uintType" label="尾数单位" header-align="center" width="80" /> -->

      <el-table-column label="尾数单位(m³)" header-align="center" width="70" v-if="state.deviceType !== '2'">
        <template #default="scope">
          <span v-if="scope.row.uintType === 1">0.001</span>
          <span v-if="scope.row.uintType === 2">0.01</span>
          <span v-if="scope.row.uintType === 3">0.1</span>
          <span v-if="scope.row.uintType === 4">1</span>
          <span v-if="scope.row.uintType === 5">10</span>
          <span v-if="scope.row.uintType === 6">100</span>
          <span v-if="scope.row.uintType === 7">1000</span>
          <span v-if="scope.row.uintType === 8">10000</span>
        </template>
      </el-table-column>

      <!-- 压力表专用 -->
      <el-table-column prop="pgRangeMin,pgRangeMax" label="量程范围" width="110" v-if="state.deviceType === '2'">
        <template #default="scope">
          {{ scope.row.pgRangeMin }} - {{ scope.row.pgRangeMax }}
        </template>
      </el-table-column>

      <el-table-column label="数据精度" header-align="center" width="80" v-if="state.deviceType === '2'">
        <template #default="scope">
          <span v-if="scope.row.pgPrecisionType === 0">1</span>
          <span v-if="scope.row.pgPrecisionType === 1">0.1</span>
          <span v-if="scope.row.pgPrecisionType === 2">0.01</span>
          <span v-if="scope.row.pgPrecisionType === 3">0.001</span>
          <span v-if="scope.row.pgPrecisionType === 4">0.001</span>
        </template>
      </el-table-column>

      <el-table-column prop="pgCorrectvalue" label="校正参数" header-align="center" width="90"
        v-if="state.deviceType === '2'" />
      <el-table-column label="图片是否描点" header-align="center" width="70" v-if="state.deviceType === '2'">
        <template #default="scope">
          <span v-if="scope.row.pgIsDebug === '1'">是</span>
          <span v-if="scope.row.pgIsDebug !== '1'">否</span>
        </template>
      </el-table-column>
      <el-table-column label="目标历史初始化" header-align="center" width="90" v-if="state.deviceType === '2'">
        <template #default="scope">
          <span v-if="scope.row.pgInitTargetRegion === '1'">是</span>
          <span v-if="scope.row.pgInitTargetRegion !== '1'">否</span>
        </template>
      </el-table-column>
      <el-table-column label="配置坐标点优先级" header-align="center" width="90" v-if="state.deviceType === '2'">
        <template #default="scope">
          <span>{{ Dic.PGManualConfigLevel[scope.row.pgManualConfigLevel] }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="pgManualConfigCol" label="压力表坐标点赋值" header-align="center" width="245"
        v-if="state.deviceType === '2'" />
      <!-- 压力表专用 -->

      <el-table-column fit prop="networkRegTimeout" label="入网超时时间(秒)" header-align="center" width="85" />
      <el-table-column fit prop="tongxunWay" label="数传类型" header-align="center" width="60">
        <template #default="scope">
          <span v-if="scope.row.tongxunWay === '0'">默认</span>
          <span v-if="scope.row.tongxunWay === '1'">CAT1</span>
          <span v-if="scope.row.tongxunWay === '2'">NB</span>
        </template>
      </el-table-column>
      <el-table-column label="天线类型" header-align="center" width="60">
        <template #default="scope">
          <span>{{ Dic.tianxianType[scope.row.tianxianType] }}</span>
        </template>
      </el-table-column>
      <el-table-column fit prop="dnType" label="设备口径" header-align="center" width="80" v-if="state.deviceType !== '2'">
        <template #default="scope">
          {{ getDnType(scope.row.dnType) }}
        </template>
      </el-table-column>
      <el-table-column label="安装方向" header-align="center" width="60">
        <template #default="scope">
          <span v-if="scope.row.setupDir === '0'">正向</span>
          <span v-if="scope.row.setupDir === '1'">反向</span>
          <span v-if="scope.row.setupDir === '2'">右90</span>
          <span v-if="scope.row.setupDir === '3'">右90</span>
        </template>
      </el-table-column>
      <el-table-column fit prop="setupYear" label="安装年份" header-align="center" width="60" />

      <el-table-column prop="workLt,workHt" label="工作温度范围" width="110">
        <template #default="scope">
          {{ scope.row.workLt }} - {{ scope.row.workHt }}
        </template>
      </el-table-column>

      <el-table-column fit prop="batAlarmVt" label="低电压报警值" header-align="center" width="70" />
      <el-table-column fit prop="batAlarmSoc" label="余电报警值" header-align="center" width="70" />
      <el-table-column fit prop="aiPullBack" label="强制拉回概率" header-align="center" width="80"
        v-if="state.deviceType !== '2'" />
      <el-table-column fit prop="aiPass" label="识别概率阈值" header-align="center" width="80"
        v-if="state.deviceType !== '2'" />
      <el-table-column fit prop="aiSinglePass" label="位概率阀值" header-align="center" width="70"
        v-if="state.deviceType !== '2'" />
      <el-table-column fit prop="pwmHz" label="背光频率(Hz)" header-align="center" width="90" />
      <el-table-column fit prop="pwmDuty" label="占空比" header-align="center" width="70" />
      <el-table-column prop="flashBrightMin,flashBrightMax" label="亮度范围" width="90">
        <template #default="scope">
          {{ scope.row.flashBrightMin }} - {{ scope.row.flashBrightMax }}
        </template>
      </el-table-column>
      <el-table-column fit prop="cpuVersion" label="CPU版本" header-align="center" width="60" />
      <el-table-column fit prop="tongxunVersion" label="通讯版本" header-align="center" width="60" />
      <el-table-column
        prop="upWholeImgWeek1,upWholeImgWeek2,upWholeImgWeek3,upWholeImgWeek4,upWholeImgWeek5,upWholeImgWeek6,upWholeImgWeek7"
        label="整图上传周规则" width="150" v-if="state.deviceType !== '2'">
        <template #default="scope">
          {{ scope.row.upWholeImgWeek1 == '1' ? '一' : '' }}
          {{ scope.row.upWholeImgWeek2 == '1' ? '二' : '' }}
          {{ scope.row.upWholeImgWeek3 == '1' ? '三' : '' }}
          {{ scope.row.upWholeImgWeek4 == '1' ? '四' : '' }}
          {{ scope.row.upWholeImgWeek5 == '1' ? '五' : '' }}
          {{ scope.row.upWholeImgWeek6 == '1' ? '六' : '' }}
          {{ scope.row.upWholeImgWeek7 == '1' ? '日' : '' }}
        </template>
      </el-table-column>

      <el-table-column label="手动触发传大图" header-align="center" width="80">
        <template #default="scope">
          <span v-if="scope.row.wiTaskManwakeupFlag == '1'">启用</span>
          <span v-if="scope.row.wiTaskManwakeupFlag !== '1'">禁用</span>
        </template>
      </el-table-column>

      <el-table-column label="月初月末传大图" header-align="center" width="80">
        <template #default="scope">
          <span v-if="scope.row.wiTaskMonthFlag == '1'">启用</span>
          <span v-if="scope.row.wiTaskMonthFlag !== '1'">禁用</span>
        </template>
      </el-table-column>

      <el-table-column label="指定日期传大图" header-align="center" width="80">
        <template #default="scope">
          <span v-if="scope.row.wiTaskSpecdateEnable == '1'" :title="global.getWiTaskSpecdateTip(scope.row, 1)">启用</span>
          <span v-if="scope.row.wiTaskSpecdateEnable !== '1'"
            :title="global.getWiTaskSpecdateTip(scope.row, 1)">禁用</span>
        </template>
      </el-table-column>

      <el-table-column label="日志上传规则" header-align="center" width="70">
        <template #default="scope">
          <span v-if="scope.row.logUploadEnable == '1'" :title="global.getLogUploadRulesTip(scope.row, 1)">启用</span>
          <span v-if="scope.row.logUploadEnable !== '1'" :title="global.getLogUploadRulesTip(scope.row, 1)">禁用</span>
        </template>
      </el-table-column>

      <el-table-column label="输出串口日志" header-align="center" width="70">
        <template #default="scope">
          <span v-if="scope.row.isprintcomlog == '1'">是</span>
          <span v-if="scope.row.isprintcomlog !== '1'">否</span>
        </template>
      </el-table-column>

      <el-table-column label="上传错误日志" header-align="center" width="70">
        <template #default="scope">
          <span v-if="scope.row.uploadLastFailLogFlag == '1'">是</span>
          <span v-if="scope.row.uploadLastFailLogFlag !== '1'">否</span>
        </template>
      </el-table-column>

      <el-table-column label="手动触发传日志" header-align="center" width="85">
        <template #default="scope">
          <span v-if="scope.row.logTaskManwakeupFlag == '1'">是</span>
          <span v-if="scope.row.logTaskManwakeupFlag !== '1'">否</span>
        </template>
      </el-table-column>

      <el-table-column label="上传图片类型" header-align="center" width="70">
        <template #default="scope">
          <span v-if="scope.row.imageType == '1'">BMP</span>
          <span v-else>{{ scope.row.imageType }}</span>
        </template>
      </el-table-column>

      <el-table-column fit prop="imageMargin" label="图片外扩像素" header-align="center" width="70" />

      <el-table-column label="指定数字区域" header-align="center" width="70">
        <template #default="scope">
          <span v-if="scope.row.imageConfigFlag == '1'" :title="global.getImageConfigip(scope.row)">启用</span>
          <span v-if="scope.row.imageConfigFlag !== '1'">禁用</span>
        </template>
      </el-table-column>

      <el-table-column label="上传模型输出结果" header-align="center" width="85">
        <template #default="scope">
          <span v-if="scope.row.uploadCnnFlag == '1'">是</span>
          <span v-else>否</span>
        </template>
      </el-table-column>

      <el-table-column fit prop="nmsThreshold" label="NMS阈值" header-align="center" width="60" />

      <el-table-column label="大框去野数字" header-align="center" width="70">
        <template #default="scope">
          <span v-if="scope.row.isUseDetectedNum == '1'">是</span>
          <span v-else>否</span>
        </template>
      </el-table-column>

      <!-- <el-table-column fit prop="ip1ExpandOn" label="IP1启用扩展协议" header-align="center" width="90" /> -->
      <!-- <el-table-column label="字体样式" header-align="center" width="80" v-if="state.deviceType!=='2'">
        <template #default="scope">
          <span v-if="scope.row.meterFontStyle === '0'">黑底白字</span>
          <span v-if="scope.row.meterFontStyle !== '0'">白底黑字</span>
        </template>
      </el-table-column> -->

      <el-table-column label="配置来源" header-align="center" width="80">
        <template #default="scope">
          <span v-if="scope.row.dataFrom === '1'">设备安装</span>
          <span v-if="scope.row.dataFrom === '2'">远程配置</span>
          <span v-if="scope.row.dataFrom === '3'">召测配置</span>
        </template>
      </el-table-column>

      <el-table-column fit prop="createTime" label="创建时间" header-align="center" width="160" />

      <el-table-column fit prop="invalidTime" label="失效时间" header-align="center" width="160" />

      <el-table-column label="是否有效" header-align="center" width="90">
        <template #default="scope">
          <span v-if="scope.row.useFlag === '1'">有效</span>
          <span v-if="scope.row.useFlag !== '1'">无效</span>
        </template>
      </el-table-column>
    </el-table>

    <el-config-provider :locale="locale">
      <el-pagination v-model:currentPage="queryParams.page" v-model:page-size="queryParams.rows"
        :page-sizes="[10, 15, 20, 25, 100]" :small="state.small" :disabled="state.disabled"
        :background="state.background" layout="total, sizes, prev, pager, next, jumper" :total="state.total"
        style="text-align: center; margin-top: 10px; height: 30px" @size-change="handleSizeChange"
        @current-change="handleCurrentChange" />
    </el-config-provider>
  </div>
</template>

<script lang="ts" setup>
import { reactive, toRefs, toRef, ref, onMounted } from "vue";
import { ElForm, ElMessage, ElMessageBox } from "element-plus";
import TAicbqCfgAction from "@/api/taicbqcfg";
import { TAicbqCfgQueryParam, TAicbqCfg, Dialog, PageResult } from "@/types";
import zhCn from "element-plus/lib/locale/lang/zh-cn";
import Dic from "@/dictionary/aicbqcfg";
import global from '@/until/global';

let locale = ref(zhCn);
let pageSize = (localStorage.getItem("PageSize") == null ? 10 : localStorage.getItem("PageSize") as unknown as number) * 1;

//配置的数据来源
const dataFromMap = {
  1: "设备安装",
  2: "远程配置",
  3: "召测配置",
  9: "全部",
};

//配置的数据来源
const userFlagMap = {
  0: "无效",
  1: "有效",
  9: "全部",
};
const my_table = ref();
const state = reactive({
  queryParams: { deviceType: '1', page: 1, rows: pageSize } as TAicbqCfgQueryParam,
  total: 0,
  small: false,
  background: true,
  disabled: false,
  search_disabled: false,
  tableData: [] as TAicbqCfg[],
  deviceType: '2'
});

const {
  queryParams,
  total,
  tableData,
  deviceType
} = toRefs(state);

const loading = ref(false);
const tableHeight = ref(document.documentElement.clientHeight - 180);
const currentRow = ref();
const handleCurrentRowChange = (val: TAicbqCfg | undefined) => {
  currentRow.value = val;
};

const queryList = () => {
  loading.value = true;
  state.search_disabled = true;
  state.deviceType = state.queryParams.deviceType;
  if (state.queryParams.stationCode) {
    state.queryParams.stationCode = state.queryParams.stationCode.padStart(10, '0');     //不足10位前面自动补0
  }
  if (state.queryParams.deviceSn) {
    state.queryParams.deviceSn = state.queryParams.deviceSn.padStart(11, '0');     //不足10位前面自动补0
  }
  TAicbqCfgAction.QueryTAicbqCfgList(state.queryParams)
    .then((result) => {
      if (result.status === 200) {
        const { res, flag, errot } = result.data;
        if (flag != undefined && flag == 1) {
          const pageData = res as PageResult<TAicbqCfg[]>;
          state.tableData = pageData.list;
          state.total = pageData.total;
        } else {
        }
        loading.value = false;
        state.search_disabled = false;
      }
    })
    .catch((error) => {
      //请求失败时的操作
      ElMessage.error(error);
      loading.value = false;
      state.search_disabled = false;
    });
};

const handleSizeChange = (val: number) => {
  queryParams.value.rows = val;
  queryList();
  localStorage.setItem("PageSize", val.toString());
};

const handleCurrentChange = (val: number) => {
  queryParams.value.page = val;
  queryList();
  if (Object.keys(my_table).length > 0) { if (my_table.value != null) { (my_table.value as any).$refs.bodyWrapper.scrollTop = 0; } }
};

const getDnType = (type: number) => {
  for (let index = 0; index < Dic.dnTypeMap.length; index++) {
    if (Dic.dnTypeMap[index].value == type) {
      return Dic.dnTypeMap[index].label;
    }
  }
  return "";
};

/* 日期控件开始 */
const size = ref<'' | 'large' | 'small'>('')
const shortcuts = [
  {
    text: '今天',
    value: new Date(),
  },
  {
    text: '昨天',
    value: () => {
      const date = new Date()
      date.setTime(date.getTime() - 3600 * 1000 * 24)
      return date
    },
  },
  {
    text: '前一周',
    value: () => {
      const date = new Date()
      date.setTime(date.getTime() - 3600 * 1000 * 24 * 7)
      return date
    },
  },
]
/* 日期控件结束 */

onMounted(() => {
  queryList();
  window.onresize = function () {
    tableHeight.value = document.documentElement.clientHeight - 180;
  };
});
</script>

<style lang="scss" scoped>
.title {
  font-size: 30px;
}
</style>