<template>
  <el-card class="content-div">
    <div class="all-content">
      <div class="top-div">
        <el-button type="primary" @click="addData">新增</el-button>
      </div> 
      <el-table
        :data="tableData"
        height="730"
        style="width: 100%"
        border
        stripe
        :header-cell-style="{ background: '#F6F7FC' }"
      >
        <el-table-column type="index" label="序号" width="80" align="center" />
        <el-table-column
          prop="name"
          label="模板名称"
          width="200"
          align="center"
          show-overflow-tooltip
        />
        <el-table-column
          prop="type"
          label="模板类型"
          width="200"
          align="center"
          show-overflow-tooltip
        />
        <el-table-column
          prop="description"
          label="模板描述"
          width="200"
          align="center"
          show-overflow-tooltip
        /> 
        <el-table-column label="模板管理" align="center" show-overflow-tooltip>
          <template #default="scope">
            <el-button type="info" @click="manageData(scope.row)">
              点位
            </el-button>
            <el-button type="primary" @click="editData(scope.row)">
              编辑
            </el-button>
            <el-button type="danger" @click="delData(scope.row)">
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <AddMb
      :type="type"
      :formData="formData"
      :dialogVisible="dialogVisible"
      v-if="dialogVisible"
      @dialogClose="dialogClose"
      @dialogSuccess="dialogSuccess"
    >
    </AddMb>
    <AddPoint
      :formData="formData1"
      :dialogVisible="dialogVisible1"
      v-if="dialogVisible1"
      @dialogClose="dialogClose"
      @dialogSuccess="dialogSuccess"
    >
    </AddPoint>
  </el-card>
</template>

<script>
import { onMounted, reactive, ref, toRefs } from "vue"; 
import { ElMessage, ElMessageBox } from "element-plus"; 
import AddMb from "@/components/AddMb.vue";
import infoApi from "@/api/infoApi.js";
import { response, mb_info, mb_list } from '../proto/data/pd'
import AddPoint from "@/components/AddPoint.vue";
export default {
  name: "model",
  components: {
    AddMb,
    AddPoint
  },
  setup() {
    const state = reactive({
      dialogVisible: false,
      dialogVisible1: false,
      tableData: [],
      formData: {
        name: '',
        description: '',
        type: 'modbus'
      },
      formData1: {},
      type: 'I'
    });

    onMounted(() => {
      getTableData();
    });
    const getTableData = async () => {
      const res = await infoApi.getMb();
      const ret = response.decode(new Uint8Array(res));
      
      if (ret.code == 0) {
          // 获取数据
          state.tableData = mb_list.decode(ret.data).mb;
          console.log(mb_list.decode(ret.data).mb);
      } else {
          console.log(res);
      }
    };
    const editData = (item) => {
      state.dialogVisible = true;
      state.type = 'U';
      state.formData = JSON.parse(JSON.stringify(item));
    };

    const delData = (item) => {
      ElMessageBox.confirm("确定删除该数据?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          const req_databuf = mb_info.encode({
              name: item.name,
          }).finish();
          // 截取有效长度
          const req_data = req_databuf.slice(0, req_databuf.length);
 
          const res = await infoApi.delMb(req_data);
          const ret = response.decode(new Uint8Array(res));
          if (ret.code == 0) {
            ElMessage.success(res.msg || "请求成功");
            getTableData();
          } else {
            ElMessage.error(res.msg);
          }
        })
        .catch(() => {
          ElMessage.info("已取消删除");
        });
    };

    const addData = () => {
      state.dialogVisible = true;
      //清空数据
      state.formData = {
        name: '',
        description: '',
        type: 'modbus'
      }
      state.type = 'I';
    };

    const manageData = (item) => {
      state.dialogVisible1 = true;
      state.formData1 = item;
    };
    const dialogClose = () => {
      state.dialogVisible = false;
      state.dialogVisible1 = false;
    };

    const dialogSuccess = () => {
      state.dialogVisible = false;
      state.dialogVisible1 = false;
      getTableData();
    };
    return {
      ...toRefs(state),
      editData,
      delData,
      manageData,
      getTableData,
      addData,
      dialogSuccess,
      dialogClose
    };
  },
};
</script>
<style lang="scss" scoped>
.all-content {
  display: flex;
  flex-direction: column;
} 
.top-div {
  display: flex;
  justify-content: flex-end;
}
</style>
