<template>
  <el-form ref="queryFormRef" :model="queryParams" :inline="true" @keyup.enter.native="queryList" style="margin-top: -10px;">
    <el-form-item label="配置角色:">
      <el-input v-model="queryParams.authName" placeholder="角色名称" width="120px" size="small"/>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" class="button" @click="queryList">查询角色</el-button>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" class="button" @click="handleAdd" :disabled="!adminFlag">新增角色</el-button>
    </el-form-item>
  </el-form>
  <!-- <div class="wrapper"> -->
  <el-table v-loading="loading" :data="state.tableData" border stripe style="width: 100%;margin-top: -20px;" :height="tableHeight"
    highlight-current-row @current-change="handleCurrentRowChange"
    :header-cell-style="{ background: '#606266', color: '#FFFFFF' }">
    <el-table-column fixed type="index" width="50" align="center" />
    <el-table-column fixed prop="authName" label="角色名称" header-align="center" width="120" align="center"/>
    <el-table-column label="设备SN" header-align="center" align="center" width="100">
      <template #default="scope">
        <span v-if="scope.row.deviceSn === '0'" style="color:red;">✖</span>
        <span v-if="scope.row.deviceSn === '1'" style="color:green;">✔</span>
      </template>
    </el-table-column>
    <el-table-column label="遥测站编码" header-align="center" align="center" width="100">
      <template #default="scope">
        <span v-if="scope.row.stationCode === '0'" style="color:red;">✖</span>
        <span v-if="scope.row.stationCode === '1'" style="color:green;">✔</span>
      </template>
    </el-table-column>
    <el-table-column label="通道1地址" header-align="center" align="center" width="100">
      <template #default="scope">
        <span v-if="scope.row.ip1Port1 === '0'" style="color:red;">✖</span>
        <span v-if="scope.row.ip1Port1 === '1'" style="color:green;">✔</span>
      </template>
    </el-table-column>
    <!-- <el-table-column label="通道2地址" header-align="center" align="center" width="100">
      <template #default="scope">
        <span v-if="scope.row.ip2Port2 === '0'" style="color:red;">✖</span>
        <span v-if="scope.row.ip2Port2 === '1'" style="color:green;">✔</span>
      </template>
    </el-table-column> -->
    <!-- <el-table-column label="通道3地址" header-align="center" align="center" width="110">
      <template #default="scope">
        <span v-if="scope.row.ip3Port3 === '0'" style="color:red;">✖</span>
        <span v-if="scope.row.ip3Port3 === '1'" style="color:green;">✔</span>
      </template>
    </el-table-column>
    <el-table-column label="通道4地址" header-align="center" align="center" width="100">
      <template #default="scope">
        <span v-if="scope.row.ip4Port4 === '0'" style="color:red;">✖</span>
        <span v-if="scope.row.ip4Port4 === '1'" style="color:green;">✔</span>
      </template>
    </el-table-column> -->
    <el-table-column label="域名地址" header-align="center" align="center" width="100">
      <template #default="scope">
        <span v-if="scope.row.domainNamePort === '0'" style="color:red;">✖</span>
        <span v-if="scope.row.domainNamePort === '1'" style="color:green;">✔</span>
      </template>
    </el-table-column>
    <el-table-column label="最新读数" header-align="center" align="center" width="100">
      <template #default="scope">
        <span v-if="scope.row.lastVal === '0'" style="color:red;">✖</span>
        <span v-if="scope.row.lastVal === '1'" style="color:green;">✔</span>
      </template>
    </el-table-column>
    <el-table-column label="水表口径" header-align="center" align="center" width="100">
      <template #default="scope">
        <span v-if="scope.row.dnType === '0'" style="color:red;">✖</span>
        <span v-if="scope.row.dnType === '1'" style="color:green;">✔</span>
      </template>
    </el-table-column>
    <el-table-column label="数字个数类" header-align="center" align="center" width="100">
      <template #default="scope">
        <span v-if="scope.row.digitNum === '0'" style="color:red;">✖</span>
        <span v-if="scope.row.digitNum === '1'" style="color:green;">✔</span>
      </template>
    </el-table-column>
    <el-table-column label="安装方向" header-align="center" align="center" width="100">
      <template #default="scope">
        <span v-if="scope.row.setupDir === '0'" style="color:red;">✖</span>
        <span v-if="scope.row.setupDir === '1'" style="color:green;">✔</span>
      </template>
    </el-table-column>
    <el-table-column label="时间间隔" header-align="center" align="center" width="100">
      <template #default="scope">
        <span v-if="scope.row.timeInterval === '0'" style="color:red;">✖</span>
        <span v-if="scope.row.timeInterval === '1'" style="color:green;">✔</span>
      </template>
    </el-table-column>
    <el-table-column label="工作温度" header-align="center" align="center" width="100">
      <template #default="scope">
        <span v-if="scope.row.workTemplate === '0'" style="color:red;">✖</span>
        <span v-if="scope.row.workTemplate === '1'" style="color:green;">✔</span>
      </template>
    </el-table-column>
    <el-table-column label="电压报警" header-align="center" align="center" width="100">
      <template #default="scope">
        <span v-if="scope.row.batAlarmVt === '0'" style="color:red;">✖</span>
        <span v-if="scope.row.batAlarmVt === '1'" style="color:green;">✔</span>
      </template>
    </el-table-column>
    <el-table-column label="电量报警" header-align="center" align="center" width="100">
      <template #default="scope">
        <span v-if="scope.row.batAlarmSoc === '0'" style="color:red;">✖</span>
        <span v-if="scope.row.batAlarmSoc === '1'" style="color:green;">✔</span>
      </template>
    </el-table-column>
    <el-table-column label="AI参数" header-align="center" align="center" width="100">
      <template #default="scope">
        <span v-if="scope.row.aiThreshold === '0'" style="color:red;">✖</span>
        <span v-if="scope.row.aiThreshold === '1'" style="color:green;">✔</span>
      </template>
    </el-table-column>
    <el-table-column label="CPU版本" header-align="center" align="center" width="100">
      <template #default="scope">
        <span v-if="scope.row.cpuVersion === '0'" style="color:red;">✖</span>
        <span v-if="scope.row.cpuVersion === '1'" style="color:green;">✔</span>
      </template>
    </el-table-column>
    <el-table-column label="通讯版本" header-align="center" align="center" width="100">
      <template #default="scope">
        <span v-if="scope.row.tongxunVersion === '0'" style="color:red;">✖</span>
        <span v-if="scope.row.tongxunVersion === '1'" style="color:green;">✔</span>
      </template>
    </el-table-column>
    <el-table-column label="天线类型" header-align="center" align="center" width="100">
      <template #default="scope">
        <span v-if="scope.row.tianxianType === '0'" style="color:red;">✖</span>
        <span v-if="scope.row.tianxianType === '1'" style="color:green;">✔</span>
      </template>
    </el-table-column>
    <el-table-column label="数传类型" header-align="center" align="center" width="100">
      <template #default="scope">
        <span v-if="scope.row.tongxunWay === '0'" style="color:red;">✖</span>
        <span v-if="scope.row.tongxunWay === '1'" style="color:green;">✔</span>
      </template>
    </el-table-column>
    <el-table-column label="注册超时时间" header-align="center" align="center" width="110">
      <template #default="scope">
        <span v-if="scope.row.networkRegTimeout === '0'" style="color:red;">✖</span>
        <span v-if="scope.row.networkRegTimeout === '1'" style="color:green;">✔</span>
      </template>
    </el-table-column>
    <el-table-column label="背光相关" header-align="center" align="center" width="100">
      <template #default="scope">
        <span v-if="scope.row.pwmHz === '0'" style="color:red;">✖</span>
        <span v-if="scope.row.pwmHz === '1'" style="color:green;">✔</span>
      </template>
    </el-table-column>
    <el-table-column label="闪光灯相关" header-align="center" align="center" width="110">
      <template #default="scope">
        <span v-if="scope.row.flashBright === '0'" style="color:red;">✖</span>
        <span v-if="scope.row.flashBright === '1'" style="color:green;">✔</span>
      </template>
    </el-table-column>

    <el-table-column label="安装年份" header-align="center" align="center" width="100">
      <template #default="scope">
        <span v-if="scope.row.setupYear === '0'" style="color:red;">✖</span>
        <span v-if="scope.row.setupYear === '1'" style="color:green;">✔</span>
      </template>
    </el-table-column>

    <el-table-column label="周规则" header-align="center" align="center" width="100">
      <template #default="scope">
        <span v-if="scope.row.upWholeImgWeekRule === '0'" style="color:red;">✖</span>
        <span v-if="scope.row.upWholeImgWeekRule === '1'" style="color:green;">✔</span>
      </template>
    </el-table-column>

    <el-table-column label="输出串口日志" header-align="center" align="center" width="110">
      <template #default="scope">
        <span v-if="scope.row.debugInfo !== '1'" style="color:red;">✖</span>
        <span v-if="scope.row.debugInfo === '1'" style="color:green;">✔</span>
      </template>
    </el-table-column>

    <el-table-column label="上传错误日志" header-align="center" align="center" width="110">
      <template #default="scope">
        <span v-if="scope.row.uploadLastFailLog !== '1'" style="color:red;">✖</span>
        <span v-if="scope.row.uploadLastFailLog === '1'" style="color:green;">✔</span>
      </template>
    </el-table-column>

    <el-table-column fit fixed="right" label="" align="left" min-width="150">
      <template #default="scope">
        <el-button type="text" @click="handleEdit(scope.row)" :disabled="!adminFlag">编辑</el-button>
        <el-button type="text" @click="submitDeleteForm(scope.row)" :disabled="!adminFlag">删除</el-button>
      </template>
    </el-table-column>
  </el-table>

  <el-dialog :title="dialog.title" v-model="dialog.visible" width="650px" draggable center>
    <el-form ref="dataFormRef" :model="formData" label-width="100px" :rules="state.rules">
      <el-form-item label="角色名称:" prop="authName">
        <el-input v-model="formData.authName" placeholder="权限名称" width="120px" maxlength="20" />
      </el-form-item>
      <el-descriptions title="权限列表" direction="vertical" column="6" border labelStyle="word-break:keep-all"
       contentStyle="max-width:300px;word-break:break-all">
        <el-descriptions-item label="设备SN" width="100px">
          <el-switch v-model="formData.deviceSn" inline-prompt="true" active-value="1" inactive-value="0" />
        </el-descriptions-item>
        <el-descriptions-item label="遥测站编码" width="100px">
          <el-switch v-model="formData.stationCode" inline-prompt="true" active-value="1" inactive-value="0" />
        </el-descriptions-item>
        <el-descriptions-item label="通道1地址" width="100px">
          <el-switch v-model="formData.ip1Port1" inline-prompt="true" active-value="1" inactive-value="0" />
        </el-descriptions-item>
        <!-- <el-descriptions-item label="通道2地址">
          <el-switch v-model="formData.ip2Port2" inline-prompt="true" active-value="1" inactive-value="0" />
        </el-descriptions-item> -->
        <!-- <el-descriptions-item label="通道3地址">
          <el-switch v-model="formData.ip3Port3" inline-prompt="true" active-value="1" inactive-value="0" />
        </el-descriptions-item>
        <el-descriptions-item label="通道4地址">
          <el-switch v-model="formData.ip4Port4" inline-prompt="true" active-value="1" inactive-value="0" />
        </el-descriptions-item> -->
        <el-descriptions-item label="紧急域名" width="100px">
          <el-switch v-model="formData.domainNamePort" inline-prompt="true" active-value="1" inactive-value="0" />
        </el-descriptions-item>
        <el-descriptions-item label="最新读数" width="110px">
          <el-switch v-model="formData.lastVal" inline-prompt="true" active-value="1" inactive-value="0" />
        </el-descriptions-item>
        <el-descriptions-item label="水表口径" width="110px">
          <el-switch v-model="formData.dnType" inline-prompt="true" active-value="1" inactive-value="0" />
        </el-descriptions-item>
        <el-descriptions-item label="数字个数类">
          <el-switch v-model="formData.digitNum" inline-prompt="true" active-value="1" inactive-value="0" />
        </el-descriptions-item>
        <el-descriptions-item label="安装方向">
          <el-switch v-model="formData.setupDir" inline-prompt="true" active-value="1" inactive-value="0" />
        </el-descriptions-item>
        <el-descriptions-item label="时间间隔">
          <el-switch v-model="formData.timeInterval" inline-prompt="true" active-value="1" inactive-value="0" />
        </el-descriptions-item>
        <el-descriptions-item label="工作温度">
          <el-switch v-model="formData.workTemplate" inline-prompt="true" active-value="1" inactive-value="0" />
        </el-descriptions-item>
        <el-descriptions-item label="电压报警">
          <el-switch v-model="formData.batAlarmVt" inline-prompt="true" active-value="1" inactive-value="0" />
        </el-descriptions-item>
        <el-descriptions-item label="电量报警">
          <el-switch v-model="formData.batAlarmSoc" inline-prompt="true" active-value="1" inactive-value="0" />
        </el-descriptions-item>
        <el-descriptions-item label="AI参数">
          <el-switch v-model="formData.aiThreshold" inline-prompt="true" active-value="1" inactive-value="0" />
        </el-descriptions-item>
        <el-descriptions-item label="CPU版本">
          <el-switch v-model="formData.cpuVersion" inline-prompt="true" active-value="1" inactive-value="0" />
        </el-descriptions-item>
        <el-descriptions-item label="通讯版本">
          <el-switch v-model="formData.tongxunVersion" inline-prompt="true" active-value="1" inactive-value="0" />
        </el-descriptions-item>
        <el-descriptions-item label="天线类型">
          <el-switch v-model="formData.tianxianType" inline-prompt="true" active-value="1" inactive-value="0" />
        </el-descriptions-item>
        <el-descriptions-item label="数传类型">
          <el-switch v-model="formData.tongxunWay" inline-prompt="true" active-value="1" inactive-value="0" />
        </el-descriptions-item>
        <el-descriptions-item label="注册超时时间">
          <el-switch v-model="formData.networkRegTimeout" inline-prompt="true" active-value="1" inactive-value="0" />
        </el-descriptions-item>
        <el-descriptions-item label="背光相关">
          <el-switch v-model="formData.pwmHz" inline-prompt="true" active-value="1" inactive-value="0" />
        </el-descriptions-item>
        <el-descriptions-item label="闪光相关">
          <el-switch v-model="formData.flashBright" inline-prompt="true" active-value="1" inactive-value="0" />
        </el-descriptions-item>
        <el-descriptions-item label="安装年份">
          <el-switch v-model="formData.setupYear" inline-prompt="true" active-value="1" inactive-value="0" />
        </el-descriptions-item>
        <el-descriptions-item label="周规则">
          <el-switch v-model="formData.upWholeImgWeekRule" inline-prompt="true" active-value="1" inactive-value="0" />
        </el-descriptions-item>

        <el-descriptions-item label="输出串口日志">
          <el-switch v-model="formData.debugInfo" inline-prompt="true" active-value="1" inactive-value="0" />
        </el-descriptions-item>
        <el-descriptions-item label="上传错误日志">
          <el-switch v-model="formData.uploadLastFailLog" inline-prompt="true" active-value="1" inactive-value="0" />
        </el-descriptions-item>
      </el-descriptions>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="cancel()">取消</el-button>
        <el-button type="primary" @click="submitForm">确定</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script lang="ts" setup>
import { reactive, toRefs, toRef, ref, onMounted } from "vue";
import { ElForm, ElMessage, ElMessageBox } from 'element-plus';
import DicConfigAuthAction from "@/api/app/dicconfigauth";
import { DicConfigAuthQueryParam, DicConfigAuthModel, Dialog } from '@/types';
import { PageResult } from "@/types/api/base";
import { stat } from "fs";

const queryFormRef = ref(ElForm); // 属性名必须和元素的ref属性值一致
const dataFormRef = ref(ElForm); // 属性名必须和元素的ref属性值一致

const loading = ref(false)
const adminFlag = localStorage.getItem("AdminFlag")?.toString() === '1';
const state = reactive({
  currentType: 0,
  queryParams: { page: 1, rows: 10 } as DicConfigAuthQueryParam,
  dialog: {} as Dialog,
  formData: {} as DicConfigAuthModel,
  tableData: [] as DicConfigAuthModel[],
  total: 0,
  rules: {
    authName: [
      { required: true, message: "角色名称不能为空", trigger: "blur" },
      { min: 2, max: 15, message: "角色长度不合法", trigger: "blur" },
    ]
  },
});

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

const tableHeight = ref(document.documentElement.clientHeight - 170);

const currentRow = ref()

const handleCurrentRowChange = (val: DicConfigAuthModel | undefined) => {
  currentRow.value = val
}

const handleAdd = () => {
  state.currentType = 0;
  state.formData = {} as DicConfigAuthModel;
  state.dialog = {
    title: '新增配置角色',
    visible: true,
    disabled:false,
  };
}

const handleEdit = (row: any) => {
  state.currentType = 1;
  state.formData = row;
  state.dialog = {
    title: '编辑配置角色',
    visible: true,
    disabled:false,
  };
}

const queryList = () => {
  loading.value = true;

  DicConfigAuthAction.QueryDicConfigAuthList(state.queryParams).then(result => {
    if (result.status === 200) {
      const { res, flag, error } = result.data;
      if (flag != undefined && flag == 1) {
        const pageData = res as PageResult<DicConfigAuthModel[]>;
        state.tableData = pageData.list;
        state.total = pageData.total;
      } else {
        ElMessage.error(error);
      }
    }
  }).catch(error => {
    //请求失败时的操作     
    console.log(error);
  })
  loading.value = false;
};

const submitForm = () => {
  dataFormRef.value.validate((valid: any) => {
    if (valid) {
      if (state.currentType == 0) {
        state.formData.createMan = localStorage.getItem("UserName") + "";
        DicConfigAuthAction.AddDicConfigAuth(state.formData).then(result => {
          if (result.status === 200) {
            const { res, flag, error } = result.data;
            if (flag === "1") {
              ElMessage.success('新增成功');
              cancel();
              queryList();
            } else {
              ElMessage.error(error);
            }
          }
        });
      }
      else {
        DicConfigAuthAction.EditDicConfigAuth(state.formData).then(result => {
          if (result.status === 200) {
            const { res, flag, error } = result.data;
            if (flag === "1") {
              ElMessage.success('编辑成功');
              cancel();
              queryList();
            } else {
              ElMessage.error(error);
            }
          }
        });
      }
    }
  });
};

const submitDeleteForm = (row: any) => {
  ElMessageBox.confirm(
    ' 是否删除[' + row.authName + ']? ',
    '提示',
    {
      cancelButtonText: '取消',
      confirmButtonText: '确认',
      type: 'warning',
      center: true,
    }
  )
    .then(() => {
      DicConfigAuthAction.DeleteDicConfigAuth(row.id).then(result => {
        if (result.status === 200) {
          const { res, flag, error } = result.data;
          if (flag === "1") {
            ElMessage.success('删除成功');
            queryList();
          } else {
            ElMessage.error(error);
          }
        }
      });
    })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: '取消删除成功!',
      })
    })


};

const cancel = () => {
  dataFormRef.value.resetFields();
  state.formData = {} as DicConfigAuthModel;
  state.dialog.visible = false;
}

onMounted(() => {
  window.onresize = function () {
    tableHeight.value = document.documentElement.clientHeight - 170
  }

  queryList();
})
</script>

<style lang="scss" scoped>
.button {
  margin: 10px 0;
}
</style>