<template>
  <el-card class="box-card" id="manage">
    <div slot="header" class="clearfix">
      <span style="font-size:24px;color:#eff0dc">后台管理</span>
    </div>
    <!-- ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ -->
    <el-row type="flex" justify="start" style="text-align :left;border-bottom:1px solid #ebeef5;padding-bottom:18px">
      <el-col :span="6">
        <el-input class="input" v-model="contract_unid" placeholder="合同编号"></el-input>
        <el-button type="primary" @click="contract_unid_add">添加</el-button>
      </el-col>
      <el-col :span="6">
        <el-input class="input" v-model="customer_name" placeholder="客户名称"></el-input>
        <el-button type="primary" @click="customer_name_add">添加</el-button>
      </el-col>
      <el-col :span="6">
        <el-input class="input" v-model="salesperson" placeholder="销售员"></el-input>
        <el-button type="primary" @click="salesperson_add('employee')">添加</el-button>
      </el-col>
      <el-col :span="6">
        <el-input class="input" v-model="project_name" placeholder="项目名称"></el-input>
        <el-button type="primary" @click="project_name_add">添加</el-button>
      </el-col>
    </el-row>
    <el-row style="border-bottom:1px solid rgb(235, 238, 245);padding-bottom:18px">
      <el-col :span="6">
        <el-button class="add_button" type="primary" @click="product_line_type">产品线类型</el-button>
      </el-col>
      <el-col :span="6">
        <el-button class="add_button" type="primary" @click="contract_statu">合同状态</el-button>
      </el-col>
      <el-col :span="6">
        <el-button class="add_button" type="primary" @click="contract_type">合同性质</el-button>
      </el-col>
      <el-col :span="6">
        <el-button class="add_button" type="primary" @click="amount_statu">账款状态</el-button>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="6">
        <el-button class="add_button" type="primary" @click="login_user_dialog_show = !login_user_dialog_show">用户管理</el-button>
      </el-col>
      <transition name="el-fade-in-linear">
        <el-tabs type="border-card" v-show="login_user_dialog_show" style="width:30%;margin:auto">
          <el-tab-pane label="新建用户">
            <el-form :model="login_user_form" label-width="100px" label-position="left" :rules="login_user_form_rules" ref="login_user_form">
              <el-form-item label="用户类型" prop="role_unid">
                <el-select v-model="login_user_form.role_unid" clearable placeholder="用户类型" style="width:100%">
                  <el-option v-for="item in roles" :key="item.role_unid" :label="item.name" :value="item.role_unid">
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="用户名" prop="username">
                <el-input v-model="login_user_form.username" placeholder="用户名" style="width:100%"></el-input>
              </el-form-item>
              <el-form-item label="姓名" prop="name">
                <el-input v-model="login_user_form.name" placeholder="姓名" style="width:100%"></el-input>
              </el-form-item>
            </el-form>
            <el-button-group>
              <el-button type="primary" @click="login_user_dialog_confirm()">确 定</el-button>
              <el-button type="primary" @click="login_user_dialog_cancel()">取 消</el-button>
            </el-button-group>
          </el-tab-pane>
          <el-tab-pane label="权限管理">
            <el-form :model="selected_user_data" label-width="60px" label-position="left" ref="selected_user_data">
              <el-form-item label="姓名">
                <el-input v-model="selected_user_data.user_name" :disabled="true"></el-input>
              </el-form-item>
              <el-form-item label="权限">
                <el-select v-model="selected_user_data.user_role_unid" style="width:100%">
                  <el-option v-for="item in roles" :key="item.role_unid" :label="item.name" :value="item.role_unid">
                  </el-option>
                </el-select>
              </el-form-item>
              <el-button-group>
                <el-button type="primary" @click="user_role_modify">确定</el-button>
                <el-button type="primary" @click="reset_role">重置</el-button>
              </el-button-group>
            </el-form>
            <br>
            <el-table :data="users_data" border style="max-height:350px;overflow-y:auto">
              <el-table-column label="姓名" prop="name" min-width="20%" align="center">
              </el-table-column>
              <el-table-column label="权限" prop="roles[0].name" min-width="20%" align="center">
              </el-table-column>
              <el-table-column label="操作" min-width="20%" align="center">
                <template slot-scope="scope">
                  <el-button type="text" @click="select_user_to_modify(scope.row)">
                    修改
                  </el-button>
                </template>
              </el-table-column>
            </el-table>
          </el-tab-pane>
        </el-tabs>
      </transition>
    </el-row>
    <el-dialog lock-scroll :visible.sync="add_dialog_show" width="30%" :show-close="false" style="">
      <el-input v-model="add_data.text"></el-input>
      <el-button type="primary" style="width:100%;margin-bottom:20px;margin-top:5px" @click="add_to_database">添加</el-button>
      <el-table :data="add_data.data" border style="max-height:350px;overflow-y:auto">
        <el-table-column label="名称" prop="name" min-width="30%" align="center">
        </el-table-column>
        <el-table-column label="码" prop="code" min-width="30%" align="center">
        </el-table-column>
        <el-table-column label="操作" min-width="20%" align="center">
          <template slot-scope="scope">
            <el-button type="text" @click="delete_code(scope.row)">
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>
  </el-card>

</template>

<script>
  export default {
    name: "manage",
    data() {
      return {
        users_data: [],
        add_dialog_show: false,
        login_user_dialog_show: false,
        code_base_url: this.$disparch_data.code_base_url,
        contract_base_url: this.$disparch_data.contract_base_url,
        auth_base_url: this.$disparch_data.auth_base_url,
        contract_unid: null,
        customer_name: null,
        salesperson: null,
        project_name: null,

        selected_user_data: {
          user_unid: "",
          user_name: "",
          user_role_unid: ""
        },
        selected_user_role_unid_before_modify: "",

        add_data: {
          text: null,
          data: [],
          url: null
        },
        roles: [],
        login_user_form: {
          role_unid: "",
          username: "",
          name: "",
          password: "0000",
          norm_type: "login"
        },

        login_user_form_rules: {
          username: {
            required: true,
            pattern: /^[a-zA-Z]{2,8}$/,
            message: "请输入2至8位英文",
            trigger: "blur"
          },
          name: {
            required: true,
            message: "请输入用户姓名",
            trigger: "blur"
          },
          role_unid: {
            required: true,
            message: "请选择用户类型",
            trigger: "blur"
          }
        }
      };
    },
    methods: {
      // -----------------------
      product_line_type() {
        this.add_data.url = this.code_base_url + "custom/cates/4FC51AD3C9/codes";
        this.get_data(this.add_data.url);
      },
      contract_statu() {
        this.add_data.url = this.code_base_url + "custom/cates/13BEFACBCF/codes";
        this.get_data(this.add_data.url);
      },
      contract_type() {
        this.add_data.url = this.code_base_url + "custom/cates/8EC31D08A0/codes";
        this.get_data(this.add_data.url);
      },
      amount_statu() {
        this.add_data.url = this.code_base_url + "custom/cates/42407C5EF2/codes";
        this.get_data(this.add_data.url);
      },
      delete_code(data) {
        this.$confirm("确认删除数据？", "确认信息", {
          confirmButtonText: "确认",
          cancelButtonText: "取消"
        })
          .then(() => {
            this.$Axios({
              method: "delete",
              url: this.add_data.url + "/" + data.unid
            }).then(res => {
              this.show_message("删除成功", "success");
              this.get_data(this.add_data.url);
            });
          })
          .catch(() => {});
      },
      get_data(url) {
        this.$Axios.get(url).then(res => {
          if (res.data.list_data) {
            this.add_data.data = res.data.list_data;
            this.add_dialog_show = true;
          }
        });
      },
      add_to_database() {
        if (this.add_data.text == null) {
          this.$message.error("不能为空");
          return;
        }
        var code = 0;
        this.add_data.data.forEach(e => {
          if (e.code > code) {
            code = e.code;
          }
        });
        code++;
        this.$Axios({
          method: "post",
          url: this.add_data.url,
          data: {
            name: this.add_data.text,
            note: this.add_data.text,
            code: code
          }
        }).then(res => {
          if (res.data.code == code) {
            this.show_message("添加成功", "success");
            this.add_data.text = null;
            this.get_data(this.add_data.url);
          }
        });
      },

      get_users() {
        this.$Axios({
          method: "get",
          url: this.auth_base_url + "users",
          params: {
            norm_type: "login"
          }
        })
          .then(res => {
            this.$set(this, "users_data", res.data.list_data);
            // this.users_data = res.data.list_data;
          })
          .catch(err => {
            console.log(err.message);
          });
      },
      // -----------------------
      contract_unid_add() {
        if (this.contract_unid) {
          this.$Axios({
            method: "post",
            data: { contract_unid: this.contract_unid },
            url: this.contract_base_url,
            headers: { "Content-Type": "application/json" }
          })
            .then(response => {
              if (response.data.ecode == "200") {
                this.contract_unid = null;
                this.show_message("添加成功", "success");
              } else if (response.data.ecode == "600") {
                this.show_message("重复的合同编号", "error");
              } else {
                this.show_message("添加失败", "error");
              }
            })
            .catch(err => {
              console.log(err);
              this.show_message("添加失败", "error");
            });
        } else {
          this.show_message("请填写信息", "info");
        }
      },
      customer_name_add() {
        if (this.customer_name) {
          this.$Axios({
            method: "post",
            url: this.contract_base_url + "customers",
            data: { customer_name: this.customer_name },
            headers: { "Content-Type": "application/json" }
          })
            .then(response => {
              if (response.data.ecode == "200") {
                this.customer_name = null;
                this.show_message("添加成功", "success");
              } else if (response.data.ecode == "600") {
                this.show_message("重复的客户名称", "error");
              } else {
                this.show_message("添加失败", "error");
              }
            })
            .catch(err => {
              console.log(err);
              this.show_message("添加失败", "error");
            });
        } else {
          this.show_message("请填写信息", "info");
        }
      },
      salesperson_add(type) {
        if (this.salesperson) {
          this.$Axios({
            method: "post",
            url: this.auth_base_url + "users",
            data: {
              norm_type: type,
              username: this.salesperson,
              name: this.salesperson,
              password: "0000"
            },
            headers: { "Content-Type": "application/json" }
          })
            .then(response => {
              if (response.data.name) {
                this.salesperson = null;
                this.show_message("添加成功", "success");
              }
            })
            .catch(err => {
              this.show_message("添加失败", "error");
              console.log(err.message);
            });
        } else {
          this.show_message("请填写信息", "info");
        }
      },
      project_name_add() {
        if (this.project_name) {
          this.$Axios({
            method: "post",
            url: this.contract_base_url + "projects",
            data: { project_name: this.project_name },
            headers: { "Content-Type": "application/json" }
          })
            .then(response => {
              this.project_name = null;
              if (response.data.ecode == "200") {
                this.show_message("添加成功", "success");
              } else if (response.data.ecode == "600") {
                this.show_message("重复的项目名称", "error");
              } else {
                this.show_message("添加失败", "error");
              }
            })
            .catch(err => {
              console.log(err);
              this.show_message("添加失败", "error");
            });
        } else {
          this.show_message("请填写信息", "info");
        }
      },
      show_message(message, type) {
        this.$message({
          message: message,
          type: type,
          center: true,
          showClose: true,
          duration: 3000
        });
      },
      get_roles() {
        this.$Axios({
          method: "get",
          url: this.auth_base_url + "roles"
        })
          .then(response => {
            if (response.data.list_data) {
              this.roles = response.data.list_data;
            } else {
              this.show_message("失败", "error");
            }
          })
          .catch(err => {
            this.show_message("失败", "error");
            console.log(err.message);
          });
      },
      select_user_to_modify(row) {
        if (!row.roles) {
          return;
        }
        this.selected_user_data.user_name = row.name;
        this.selected_user_data.user_unid = row.user_unid;

        this.selected_user_data.user_role_unid = row.roles[0].role_unid;
        this.selected_user_role_unid_before_modify = row.roles[0].role_unid;
      },
      reset_role() {
        this.selected_user_data = {
          user_unid: "",
          user_name: "",
          user_role_unid: ""
        };
        this.selected_user_role_unid_before_modify = "";
      },
      user_role_modify() {
        if (
          !this.selected_user_data.user_unid ||
          !this.selected_user_data.user_role_unid ||
          !this.selected_user_role_unid_before_modify
        ) {
          this.show_message("?????", "warning");
          return;
        }
        var user_unid = this.selected_user_data.user_unid;
        var role_unid = this.selected_user_data.user_role_unid;
        var before_role = this.selected_user_role_unid_before_modify;
        this.$Axios({
          method: "delete",
          url:
            this.auth_base_url + "/users/" + user_unid + "/roles/" + before_role
        })
          .then(res => {
            this.$Axios({
              method: "post",
              url: this.auth_base_url + "/users/" + user_unid + "/roles",
              data: { role_unid: role_unid }
            })
              .then(res => {
                this.show_message("修改成功", "success");
                this.get_users();
              })
              .catch(err => {});
          })
          .catch(err => {});
        this.reset_role();
      },
      login_user_dialog_cancel() {
        this.$refs["login_user_form"].resetFields();
        this.login_user_dialog_show = false;
      },
      login_user_dialog_confirm() {
        this.$refs["login_user_form"].validate(valid => {
          if (valid) {
            this.$Axios({
              method: "post",
              url: this.auth_base_url + "users",
              headers: { "Content-Type": "application/json" },
              data: this.login_user_form
            })
              .then(res => {
                if (res.data.user_unid) {
                  this.$Axios({
                    method: "post",
                    url:
                      this.auth_base_url +
                      "users/" +
                      res.data.user_unid +
                      "/roles",
                    headers: { "Content-Type": "application/json" },
                    data: {
                      role_unid: this.login_user_form.role_unid
                    }
                  })
                    .then(res => {
                      this.show_message("添加成功,默认密码: 0000", "success");
                      this.$refs["login_user_form"].resetFields();
                      this.login_user_dialog_show = false;
                    })
                    .catch(err => {
                      this.login_user_dialog_show = false;
                      this.show_message("添加失败", "error");
                    });
                } else {
                  this.show_message("添加失败", "error");
                }
              })
              .catch(err => {
                console.log(err);
                this.show_message("添加失败", "error");
              });
          }
        });
      },
      change_dialog() {
        if (localStorage.getItem("style")) {
          var style = JSON.parse(localStorage.getItem("style"));
          var dialogs = document.getElementsByClassName("el-dialog");
          for (let i = 0; i < dialogs.length; i++) {
            const e = dialogs[i];
            e.style.backgroundColor = style.color;
            e.style.backgroundImage = style.image;
          }
        }
      }
    },
    created() {
      this.get_roles();
      this.get_users();
    },
    mounted(){
      this.change_dialog();
    }
  };
</script>

<style scoped>
#manage {
  background-color: rgba(0, 0, 0, 0);
}
#manage .el-card__body {
  background-color: rgba(0, 0, 0, 0);
}
.el-col {
  text-align: center;
}
.input {
  width: 200px;
}
.add_button {
  display: inline-block;
  font-size: 18px;
  width: 75%;
  min-width: 200px;
  margin-top: 20px;
}

#manage >>> .el-button--primary {
  border-color: #34352c;
  background-color: rgba(0, 0, 0, 0.3);
}
#manage >>> label {
  color: black;
}
#manage >>> .el-dialog {
  border-radius: 20px;
  background-color: lightblue;
}
#manage >>> input {
  border-color: black;
  color: black;
  background-color: rgba(0, 0, 0, 0.3);
}
#manage >>> .el-card__header {
  background-color: #34352c;
}

#manage >>> tr,
#manage >>> .el-table {
  background-color: rgba(0, 0, 0, 0);
}
#manage >>> th {
  background-color: rgba(0, 0, 0, 0.2);
  color: black;
}
#manage .el-table {
  color: black;
}
#manage .el-tabs,
#manage >>> .el-tabs__header {
  background-color: rgba(0, 0, 0, 0);
}
#manage >>> .is-active {
  background-color: rgba(0, 0, 0, 0.2);
  color: black;
}
</style>