<template>
  <div class="userinfo">
    <div class="header">
      <div style="height: 32px; line-height: 32px">
        <RadioGroup v-model="form_search.ltype" @on-change="seach">
          <Radio :label="1" :value="1">申请试用</Radio>
          <Radio :label="2" :value="2">申请试用负责人</Radio>
        </RadioGroup>
        <Input
          v-if="form_search.ltype == 1"
          style="width: 200px; margin-left: 20px"
          placeholder="请输入联系人"
          @on-enter="seach"
          @on-search="seach"
          search
          v-model="form_search.account"
        />
      </div>
      <Button @click="add" type="primary">
        {{ form_search.ltype == 1 ? "添加" : "修改" }}
      </Button>
    </div>
    <div>
      <Table
        v-if="form_search.ltype == 1"
        border
        :data="userinfo.list"
        :columns="columns"
      >
      </Table>
      <Table v-else border :data="userinfo.list" :columns="columns1"> </Table>
      <div
        class="foot_page"
        v-if="userinfo.total > 0 && form_search.ltype == 1"
      >
        <Page
          :total="userinfo.total"
          @on-change="changePage"
          :current="form_search.page"
          show-total
        ></Page>
      </div>
    </div>
    <!--    添加-->
    <Modal
      v-model="add_form.show"
      class="modal1"
      :mask-closable="false"
      title="添加联系人"
    >
      <Form
        :label-width="90"
        label-position="right"
        ref="AddForm"
        :rules="addFormRules"
        :model="add_form"
      >
        <FormItem label="联系人" prop="account">
          <Input
            v-model="add_form.account"
            maxlength="32"
            placeholder="请输入联系人"
          />
        </FormItem>
        <FormItem label="电话" prop="phone">
          <Input
            v-model="add_form.phone"
            maxlength="16"
            placeholder="请输入电话"
          />
        </FormItem>
        <FormItem label="邮箱" prop="mailbox">
          <Input
            v-model="add_form.mailbox"
            maxlength="64"
            placeholder="请输入邮箱"
          />
        </FormItem>
        <FormItem label="其他">
          <Input
            v-model="add_form.comm"
            maxlength="512"
            type="textarea"
            placeholder="请输入内容"
          />
        </FormItem>
      </Form>
      <div slot="footer" style="text-align: right">
        <Button @click="add_form.show = false">取消</Button>
        <Button @click="toSaveAdd()" type="primary">保存</Button>
      </div>
    </Modal>
    <!--    修改-->
    <Modal
      v-model="revise_form.show"
      class="modal1"
      :mask-closable="false"
      title="修改负责人"
    >
      <Form
        :label-width="90"
        label-position="right"
        ref="reForm"
        :rules="addFormRules"
        :model="revise_form"
      >
        <FormItem label="联系人" prop="account">
          <Input
            v-model="revise_form.account"
            maxlength="32"
            placeholder="请输入联系人"
          />
        </FormItem>
        <FormItem label="电话" prop="phone">
          <Input
            v-model="revise_form.phone"
            maxlength="16"
            placeholder="请输入电话"
          />
        </FormItem>
      </Form>
      <div slot="footer" style="text-align: right">
        <Button @click="revise_form.show = false">取消</Button>
        <Button @click="toSavere()" type="primary">保存</Button>
      </div>
    </Modal>
    <!-- 等待窗 -->
    <Spin fix v-if="showLoading" style="background-color: transparent">
      <Icon type="ios-loading" size="18" class="demo-spin-icon-load"></Icon>
      <div>加载中</div>
    </Spin>
  </div>
</template>

<script>
import axios from "axios";
import { fcu_add, fc_list, fc_add, fcu_get_user } from "@/api/index";
import { dateFormat } from "@/utils/index";
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 callback(new Error("手机号码不能为空"));
      }
      let blnTest = filter.test(value);
      if (!blnTest) {
        return callback(new Error("手机号码格式不正确"));
      }
    };
    // 邮箱验证
    const mailboxCheck = async (rule, value, callback) => {
      var filter =
        /^[A-Za-z0-9\u4e00-\u9fa5]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/;
      if (!value) {
        return;
      }
      let blnTest = filter.test(value);
      if (!blnTest) {
        return callback(new Error("邮箱格式不正确"));
      }
    };
    return {
      userInfo: {},
      showLoading: false,
      form_search: {
        page: 1,
        size: 10,
        account: "",
        ltype: 1 //1中文2英文
      },
      userinfo: {
        total: 0,
        list: []
      },
      columns: [
        {
          title: "序号",
          align: "center",
          key: "slorder",
          width: 70,
          render: (h, params) => {
            return h(
              "span",
              params.index +
                (this.form_search.page - 1) * this.form_search.size +
                1
            );
          }
        },
        {
          title: "联系人",
          key: "account",
          align: "center",
          width: 140
        },
        {
          title: "联系电话",
          key: "phone",
          align: "center",
          width: 140
        },
        {
          title: "邮箱",
          key: "mailbox",
          align: "center",
          width: 180
        },
        {
          title: "提交时间",
          key: "backtime",
          width: 200,
          align: "center"
        },
        {
          title: "其他",
          key: "comm",
          align: "center"
        }
      ], //列表表格
      columns1: [
        {
          title: "序号",
          align: "center",
          key: "slorder",
          width: 70,
          render: (h, params) => {
            return h(
              "span",
              params.index +
                (this.form_search.page - 1) * this.form_search.size +
                1
            );
          }
        },
        {
          title: "负责人",
          key: "account",
          align: "center"
        },
        {
          title: "联系电话",
          key: "phone",
          align: "center"
        },
        {
          title: "提交时间",
          key: "backtime",
          align: "center"
        }
      ], //列表表格
      add_form: {
        show: false,
        account: "",
        phone: "",
        mailbox: "",
        comm: ""
      },
      revise_form: {
        show: false,
        account: "",
        phone: ""
      },
      addFormRules: {
        account: [
          {
            required: true,
            message: "联系人不能为空",
            trigger: "blur"
          }
        ],
        phone: [{ validator: phoneCheck, required: true, trigger: "blur" }],
        mailbox: [{ validator: mailboxCheck, trigger: "blur" }]
      }
    };
  },
  mounted() {
    this.userInfo = JSON.parse(localStorage.getItem("xhWebAdminUser"));
    this.init();
  },
  methods: {
    seach() {
      this.form_search.page = 1;
      //ltype 1申请试用/2申请试用负责人
      if (this.form_search.ltype == 1) {
        this.init();
      } else {
        this.getuser();
      }
    },
    getuser() {
      fcu_get_user().then((res) => {
        if (res.code == 0) {
          this.userinfo.list = [res.obj];
          this.userinfo.list[0].backtime = dateFormat(
            this.userinfo.list[0].createtime
          );
          this.userinfo.list[0].account = this.userinfo.list[0].username;
          this.userinfo.total = Object.keys(res.obj).length;
        } else {
          this.$Message.error(res.msg);
        }
      });
    },
    init() {
      fc_list(this.form_search).then((res) => {
        if (res.code == 0) {
          this.userinfo.list = res.obj.list.map((v) => {
            v.backtime = dateFormat(v.backtime);
            return v;
          });
          this.userinfo.total = res.obj.total;
        } else {
          this.$Message.error(res.msg);
        }
      });
    },
    add() {
      if (this.form_search.ltype == 1) {
        this.$refs["AddForm"].resetFields();
        this.add_form = {
          show: true,
          account: "",
          phone: "",
          mailbox: "",
          comm: ""
        };
      } else {
        this.$refs["reForm"].resetFields();
        var data = JSON.parse(JSON.stringify(this.userinfo.list[0]));
        this.revise_form = {
          show: true,
          account: data.account,
          phone: data.phone
        };
      }
    },
    //修改负责人
    toSavere() {
      this.$refs["reForm"].validate((valid) => {
        if (valid) {
          fcu_add({
            username: this.revise_form.account,
            phone: this.revise_form.phone
          }).then((res) => {
            if (res.code == 0) {
              this.revise_form.show = false;
              this.$Message.success(res.msg);
              this.getuser();
            } else {
              this.$Message.error(res.msg);
            }
          });
        }
      });
    },
    //确定添加
    toSaveAdd() {
      this.$refs["AddForm"].validate((valid) => {
        if (valid) {
          fc_add({
            account: this.add_form.account,
            phone: this.add_form.phone,
            mailbox: this.add_form.mailbox,
            comm: this.add_form.comm
          }).then((res) => {
            if (res.code == 0) {
              this.add_form.show = false;
              this.$Message.success(res.msg);
              this.init();
            } else {
              this.$Message.error(res.msg);
            }
          });
        }
      });
    },
    changePage(page) {
      this.form_search.page = page;
      this.init();
    }
  }
};
</script>

<style scoped lang="less">
.header {
  display: flex;
  justify-content: space-between;
  margin: 20px 0;
}
/deep/ .theme_color {
  color: #2d8cf0;
}
/deep/ .red {
  color: red;
}
.img {
  width: 60px;
  height: 60px;
  cursor: pointer;
  margin-top: 5px;
}
.upload {
  width: 200px;
  height: 100px;
  border: 1px solid #dcdee2;
  box-sizing: border-box;
  cursor: pointer;
  &:hover {
    color: #2d8cf0;
    border: 1px solid #2d8cf0;
    .upload-img,
    .icon-shangchuan,
    .shangchuan_btn {
      color: inherit !important;
    }
  }
  .upload-img {
    width: 198px;
    height: 98px;
    text-align: center;
    object-fit: cover;
  }
}
.uploadimg {
  display: flex;
  .uploadimg_title {
    width: 90px;
    text-align: right;
    padding-right: 10px;
  }
}
</style>
