<template>
  <div>
    <div class="searchBox">
      <div>
        <RadioGroup v-model="userSearch.userstate" @on-change="searchList()">
          <Radio :label="0">全部</Radio>
          <Radio :label="1">正常</Radio>
          <Radio :label="10">已删除</Radio>
        </RadioGroup>
        <Input
          v-model="userSearch.username"
          @on-search="searchList()"
          placeholder="请输入用户姓名"
          style="margin: 0 16px; width: 200px"
          clearable
          search
        />
        <!-- <Button type="primary" @click="searchList()">搜索</Button> -->
      </div>
      <div>
        <Button type="primary" @click="toAdd()">添加</Button>
      </div>
    </div>
    <Table border :columns="userColumns" :data="userSearch.list">
      <template slot-scope="{ row }" slot="userstateSlot">
        <span>{{ row.userstate === 1 ? "正常" : "已删除" }}</span>
      </template>
      <template slot-scope="{ row }" slot="createtimeSlot">
        <span>{{ dateFormat(row.createtime) }}</span>
      </template>
      <template slot-scope="{ row }" slot="actionSlot">
        <div v-if="row.userstate === 1">
          <span
            style="color: #2d8cf0; cursor: pointer"
            @click="toModifyUser(row)"
            >修改</span
          >
          <span style="margin: 0 10px; color: #2d8cf0">|</span>
          <span
            style="color: #ff001e; cursor: pointer"
            @click="toDelUser(row.userid)"
            >删除</span
          >
        </div>
      </template>
    </Table>
    <div class="foot_page" v-if="userSearch.total > 0">
      <Page
        :total="userSearch.total"
        @on-change="changePage"
        :current="userSearch.page"
        show-total
      ></Page>
    </div>
    <Modal
      v-model="userAddForm.show"
      class="modal1"
      :mask-closable="false"
      title="添加用户信息"
    >
      <Form
        :label-width="90"
        label-position="right"
        ref="userAddForm"
        :rules="addFormRules"
        :model="userAddForm"
      >
        <FormItem label="用户姓名" prop="username">
          <Input v-model="userAddForm.username" placeholder="请输入用户姓名" />
        </FormItem>
        <FormItem label="登录账号" prop="loginname">
          <Input v-model="userAddForm.loginname" placeholder="请输入登录账号" />
        </FormItem>
        <FormItem label="登录密码" prop="loginpwd">
          <Input v-model="userAddForm.loginpwd" placeholder="请输入登录密码" />
        </FormItem>
        <FormItem label="手机号" prop="userphone">
          <Input v-model="userAddForm.userphone" placeholder="请输入手机号" />
        </FormItem>
      </Form>
      <div slot="footer" style="text-align: right">
        <Button @click="userAddForm.show = false">取消</Button>
        <Button @click="toSaveAdd()" type="primary">保存</Button>
      </div>
    </Modal>
    <Modal
      v-model="userModifyForm.show"
      class="modal1"
      :mask-closable="false"
      title="修改用户信息"
    >
      <Form
        :label-width="90"
        label-position="right"
        ref="userModifyForm"
        :rules="modifyFormRules"
        :model="userModifyForm"
      >
        <FormItem label="用户姓名" prop="username">
          <Input
            v-model="userModifyForm.username"
            placeholder="请输入用户姓名"
          />
        </FormItem>
        <FormItem label="登录账号" prop="loginname">
          <Input
            v-model="userModifyForm.loginname"
            placeholder="请输入登录账号"
          />
        </FormItem>
        <FormItem label="登录密码" prop="loginpwd">
          <Input
            v-model="userModifyForm.loginpwd"
            placeholder="请输入登录密码"
          />
        </FormItem>
        <FormItem label="手机号" prop="userphone">
          <Input
            v-model="userModifyForm.userphone"
            placeholder="请输入手机号"
          />
        </FormItem>
      </Form>
      <div slot="footer" style="text-align: right">
        <Button @click="userModifyForm.show = false">取消</Button>
        <Button @click="toSaveModifyUser()" type="primary">保存</Button>
      </div>
    </Modal>
  </div>
</template>

<script>
import { user_list, user_del, user_save, user_update } from "@/api";
import { dateFormat } from "@/utils";
export default {
  data() {
    // 手机号验证
    const phoneCheck = async (rule, value, callback) => {
      var filter = /^[1][3,4,5,6,7,8,9][0-9]{9}$/;
      if (!value) {
        return;
      }
      let blnTest = filter.test(value);
      if (!blnTest) {
        return callback(new Error("手机号码格式不正确"));
      }
    };
    return {
      dateFormat,
      userSearch: {
        page: 1,
        size: 10,
        userstate: 0,
        username: "",
        total: 0,
        list: []
      },
      userColumns: [
        {
          title: "序号",
          width: 70,
          render: (h, params) => {
            return h(
              "span",
              params.index +
                (this.userSearch.page - 1) * this.userSearch.size +
                1
            );
          }
        },
        {
          title: "用户姓名",
          key: "username"
        },
        {
          title: "登录账号",
          key: "loginname"
        },
        {
          title: "手机号",
          key: "userphone"
        },
        {
          title: "状态",
          slot: "userstateSlot",
          width: 90
        },
        {
          title: "创建人",
          key: "createname",
          width: 120
        },
        {
          title: "创建时间",
          slot: "createtimeSlot",
          width: 200
        },
        {
          title: "操作",
          slot: "actionSlot",
          width: 150
        }
      ],
      userAddForm: {
        show: false,
        username: "",
        loginname: "",
        loginpwd: "",
        userphone: null
      },
      addFormRules: {
        username: [
          {
            required: true,
            message: "用户姓名不能为空",
            trigger: "blur"
          }
        ],
        loginname: [
          {
            required: true,
            message: "登录账号不能为空",
            trigger: "blur"
          },
          {
            min: 4,
            max: 18,
            message: "登录账号长度为4~18个字符",
            trigger: "blur"
          }
        ],
        loginpwd: [
          {
            required: true,
            message: "登录密码不能为空",
            trigger: "blur"
          },
          {
            min: 6,
            max: 16,
            message: "登录密码长度为6~16个字符",
            trigger: "blur"
          }
        ],
        userphone: [{ validator: phoneCheck, trigger: "blur" }]
      },
      userModifyForm: {
        show: false,
        userid: null,
        username: "",
        loginname: "",
        loginpwd: "",
        userphone: null
      },
      modifyFormRules: {
        username: [
          {
            required: true,
            message: "用户姓名不能为空",
            trigger: "blur"
          }
        ],
        loginname: [
          {
            required: true,
            message: "登录账号不能为空",
            trigger: "blur"
          },
          {
            min: 4,
            max: 18,
            message: "登录账号长度为4~18个字符"
          }
        ],
        loginpwd: [
          // {
          //   required: true,
          //   message: "登录密码不能为空",
          //   trigger: "blur",
          // },
          {
            min: 6,
            max: 16,
            message: "登录密码长度为6~16个字符",
            trigger: "blur"
          }
        ],
        userphone: [{ validator: phoneCheck, trigger: "blur" }]
      },
      userInfo: {}
    };
  },
  created() {
    this.userInfo = JSON.parse(localStorage.getItem("xhWebAdminUser"));
    this.getUsersList();
  },
  methods: {
    searchList() {
      this.userSearch.page = 1;
      this.getUsersList();
    },
    getUsersList() {
      user_list({
        page: this.userSearch.page,
        size: this.userSearch.size,
        userstate: this.userSearch.userstate,
        username: this.userSearch.username
      })
        .then((data) => {
          if (data.code === 0) {
            this.userSearch.total = data.obj.total;
            this.userSearch.list = data.obj.list;
          } else {
            this.userSearch.total = 0;
            this.userSearch.list = [];
            this.$Message.error(data.msg);
          }
        })
        .catch(() => {});
    },
    toDelUser(userid) {
      this.$Modal.confirm({
        title: "提示",
        content: "您确定删除选中数据吗?",
        onOk: () => {
          user_del({ userid }).then((res) => {
            if (res.code === 0) {
              this.$Message.success(res.msg);
              this.searchList();
            }
          });
        },
        onCancel: () => {}
      });
    },
    toAdd() {
      this.userAddForm = {
        show: true,
        username: "",
        loginname: "",
        loginpwd: "",
        userphone: null
      };
    },
    toSaveAdd() {
      this.$refs.userAddForm.validate((valid) => {
        if (valid) {
          user_save({
            username: this.userAddForm.username,
            loginname: this.userAddForm.loginname,
            loginpwd: this.userAddForm.loginpwd,
            createid: this.userInfo.userid,
            userphone: this.userAddForm.userphone
          }).then((data) => {
            if (data.code === 0) {
              this.userAddForm.show = false;
              this.$Message.success(data.msg);
              this.searchList();
            } else {
              this.$Message.error(data.msg);
            }
          });
        }
      });
    },
    toModifyUser(user) {
      this.userModifyForm = {
        show: true,
        userid: user.userid,
        username: user.username,
        loginname: user.loginname,
        loginpwd: user.loginpwd,
        userphone: user.userphone
      };
    },
    toSaveModifyUser() {
      this.$refs.userModifyForm.validate((valid) => {
        if (valid) {
          user_update({
            username: this.userModifyForm.username,
            loginname: this.userModifyForm.loginname,
            loginpwd: this.userModifyForm.loginpwd,
            createid: this.userInfo.userid,
            userphone: this.userModifyForm.userphone,
            userid: this.userModifyForm.userid
          }).then((data) => {
            if (data.code === 0) {
              this.userModifyForm.show = false;
              this.$Message.success(data.msg);
              this.searchList();
            } else {
              this.$Message.error(data.msg);
            }
          });
        }
      });
    },
    changePage(page) {
      this.userSearch.page = page;
      this.getUsersList();
    }
  }
};
</script>

<style scoped lang="less">
.searchBox {
  display: flex;
  justify-content: space-between;
  padding: 16px 0;
}
.foot_page {
  padding: 16px 0;
  text-align: right;
}
</style>
