<template>
  <div class="client-account-set ">
    <div class="part-box-top">
      <Button type="success" icon="md-add" @click="toAdd">新增</Button>
    </div>
    <div class="part-box">
      <Table ref="TableList" :columns="columes" :data="users" border></Table>
    </div>
  </div>
</template>

<script>
import {
  inspectionUserPageList,
  deleteInspectionUser,
  uploadInspectionUser
} from "@/api";

const initModalForm = {
  id: "",
  roleName: "纪检",
  loginName: "",
  password: ""
};

export default {
  name: "client-account-set",
  data() {
    return {
      workId: this.$route.params.workId,
      users: [],
      curUser: {},
      columes: [
        {
          type: "index",
          title: "序号",
          width: 100,
          align: "center"
        },
        {
          title: "角色",
          key: "roleName"
        },
        {
          title: "账号",
          key: "loginName",
          render: (h, param) => {
            return h("Input", {
              props: {
                value: param.row.loginName,
                clearable: true
              },
              style: {
                width: "200px"
              },
              on: {
                input: function(value) {
                  param.row.loginName = value;
                }
              }
            });
          }
        },
        {
          title: "操作",
          key: "action",
          width: 240,
          align: "center",
          render: (h, param) => {
            let actions = [
              {
                name: "重置",
                disabled: !param.row.id,
                action: () => {
                  this.toSave(param.row);
                }
              },
              {
                name: "保存",
                action: () => {
                  this.toSave(param.row);
                }
              },
              {
                name: "删除",
                type: "error",
                action: () => {
                  this.toDelete(param.row);
                }
              }
            ];
            return h("div", this.$tableAction(h, actions));
          }
        }
      ]
    };
  },
  mounted() {
    this.getList();
  },
  methods: {
    async getList() {
      const datas = {
        workId: this.workId
      };
      const data = await inspectionUserPageList(datas);

      this.users = data.map(item => {
        return {
          id: item.id,
          loginName: item.loginName,
          password: item.password,
          roleName: "纪检"
        };
      });

      if (!this.users.length) this.toAdd();
    },
    toAdd() {
      this.users.push({ ...initModalForm });
    },
    async toSave(row) {
      if (!row.loginName.match(new RegExp(`^[a-zA-Z0-9_]{3,20}$`))) {
        this.$Message.error(
          "当前账号名只能由数字、字母和下划线组成，长度3-20个字符"
        );
        return;
      }
      await uploadInspectionUser({
        id: row.id,
        loginName: row.loginName,
        password: "123456"
      });
      this.$Message.success("保存成功！");
      this.getList();
    },
    toDelete(row) {
      this.$Modal.confirm({
        title: "删除警告",
        content: "确定要删除当前账号吗？",
        onOk: () => {
          this.toDel(row.id);
        }
      });
    },
    async toDel(id) {
      await deleteInspectionUser(id);
      this.$Message.success("删除成功！");
      this.getList();
    }
  }
};
</script>
