<template>
  <div class="usermanage">
    <div class="right">
      <PageTitle title="相关方账号管理">
        <el-button type="primary" @click="addInfo()">新增</el-button>
        <el-button @click="black"><el-icon>
            <DocumentDelete />
          </el-icon>关闭</el-button>
      </PageTitle>
      <div class="bottom">
        <div class="bottomright">
          <div class="table" id="table_xgfgl">
            <MyTable :tableData="data.tableData" :tableColumn="data.tableColumn" :tableConfiger="data.tableConfiger"
              :tableloading="tableloading" @chooseData="chooseData">
              <template #userpwd="">
                <span>隐私信息</span>
              </template>
              <!-- 操作 -->
              <template #controls="{ row }">
                <span class="operedit" @click="editInfo(row)"><el-icon>
                    <EditPen />
                  </el-icon>修改</span>
                <el-popconfirm confirm-button-text="是" cancel-button-text="否" icon-color="red" title="确定要删除?"
                  @confirm="handledelete(row)">
                  <template #reference>
                    <span class="operdel" size="small">
                      <el-icon>
                        <Delete />
                      </el-icon>删除</span>
                  </template>
                </el-popconfirm>
              </template>
            </MyTable>
          </div>
        </div>
      </div>
    </div>
    <el-dialog v-model="dialogVisible" :title="data.dialogtitle" :before-close="handleClose" width="50%">
      <el-form :model="data.ruleForm" :rules="rules" label-width="135px" class="demo-ruleForm.value">
        <div>
          <el-form-item label="相关方账号" prop="useraccount">
            <el-input v-model="data.ruleForm.useraccount" clearable style="width: 400px"></el-input>
          </el-form-item>
          <el-form-item label="密码" prop="userpwd">
            <el-input v-model="data.ruleForm.userpwd" clearable type="password" style="width: 400px"></el-input>
          </el-form-item>
        </div>
      </el-form>

      <template #footer>
        <span class="dialog-footer">

          <el-button type="primary" @click="savexgf"> <el-icon>
              <DocumentChecked />
            </el-icon>保存 </el-button>
          <el-button @click="handleClose"><el-icon>
              <DocumentDelete />
            </el-icon>关闭</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import * as MOSTY from "@/components/MyComponents/index";
import PageTitle from "@/components/PageTitle/PageTitle.vue";
import MyTable from "@/components/aboutTable/MyTable/index.vue";
import { getApi, deleteApi, putApi, postApi } from "@/api/tobAcco_api.js";
import { ElMessage } from "element-plus";
import { reactive, onMounted, ref, getCurrentInstance } from "vue";
const emit = defineEmits("changePage");
const { proxy } = getCurrentInstance();
const rules = reactive({
  useraccount: [
    { required: true, message: "相关方账号不能为空", trigger: "blur" }
  ],
  userpwd: [{ required: true, message: "密码不能为空", trigger: "blur" }]
});
const props = defineProps({
  editObj: {
    type: Object,
    default: () => { }
  }
});
// 树的展开与折叠
const dialogVisible = ref(false);
const iconChange = ref(true);
const searchArr = reactive([]);
const data = reactive({
  dialogtitle: "",
  searchObj: {},
  tableData: [],
  ruleForm: {},
  tableColumn: [
    {
      label: "相关方账号",
      prop: "useraccount",
      showOverflowTooltip: true,
      sortable: false
    },
    {
      label: "密码",
      prop: "userpwd",
      showOverflowTooltip: true,
      sortable: false,
      showSolt: true
    }
  ],
  tableConfiger: {
    showIndex: false,
    loading: false
  }
});

const tableloading = ref(false);
//新增
const addInfo = () => {
  data.dialogtitle = "账号管理新增";
  dialogVisible.value = true;
};
//修改
const editInfo = (row) => {
  data.dialogtitle = "账号管理编辑";
  data.ruleForm = row;
  dialogVisible.value = true;
};
//返回
const black = () => {
  emit("changePage", "Main");
};
//删除
const handledelete = (row) => {
  postApi({}, "/mosty-jcgl/relatedUser/deleteRelatedUserOne/" + row.id).then(
    (res) => {
      ElMessage.success("删除成功");
      loginInfo();
    }
  );
};
//账号管理
const loginInfo = () => {
  if (props.editObj) {
    getApi(
      { relatedid: props.editObj.id },
      "/mosty-jcgl/relatedUser/queryRelatedUser"
    ).then((res) => {
      if (res) {
        data.tableData = res;
        // dialogVisible.value = true;
      }
    });
  }
};
//账号管理修改
const savexgf = () => {
  if (data.dialogtitle == "账号管理编辑") {
    postApi(data.ruleForm, "/mosty-jcgl/relatedUser/updateRelatedUser")
      .then((res) => {
        ElMessage.success("修改成功");
        dialogVisible.value = false;
        loginInfo();
      })
      .catch((err) => {

        dialogVisible.value = false;
      });
  }
  if (data.dialogtitle == "账号管理新增") {
    data.ruleForm.relatedid = props.editObj.id;
    postApi(data.ruleForm, "/mosty-jcgl/relatedUser/addRelatedUserOne")
      .then((res) => {
        ElMessage.success("新增成功");
        dialogVisible.value = false;
        loginInfo();
      })
      .catch((err) => {

        dialogVisible.value = false;
      });
  }
};
function handleClose() {
  proxy.$modal.confirm('离开会丢失页面中修改的内容，确认离开吗？')
    .then(() => {
      dialogVisible.value = false;
    })
    .catch(() => {
      // catch error
    })
}
const treeHeight = ref(""); // 树高度
// 树高度计算
const treeHeightFn = () => {
  treeHeight.value = window.innerHeight - 187 + "px";
};
onMounted(() => {
  treeHeightFn();
  window.onresize = function () {
    treeHeightFn();
  };
  loginInfo();
});
</script>

<style lang="scss" scoped>
.usermanage {
  display: flex;

  .left {
    // height: 100%;
    display: flex;
    flex-direction: column;
    border: 1px solid var(--el-color-primary);
    // width: 300px;
    padding: 0 10px;
    box-sizing: border-box;


  }

  .right {
    height: calc(100%);
    width: calc(100%);
    padding: 0 10px;
    box-sizing: border-box;

    .head {
      display: flex;
      justify-content: space-between;

      .title {
        display: flex;
        margin-top: 10px;
        color: black;
        font-size: 20px;
      }
    }

    .fenye {
      top: 95%;
    }
  }
}
</style>