<template>
  <div>
    <obj-modal
      ref="modal"
      labelWidth="150px"
      :modalCols="modalCols"
      :modalConfig="modalConfig"
      :modalData="modalData"
      :modalHandles="modalHandles"
    >
      <template slot="dialog__after"> </template>
    </obj-modal>
  </div>
</template>
<script>
import { debounce, cloneDeep } from "lodash";
import { Divider } from "element-ui";
export default {
  components: {},
  data() {
    return {
      isAdd: true,
      //表格属性
      modalConfig: {
        title: "添加账号",
        show: false,
        width: "700px",
      },
      modalData: {},
      settingId: "",
      form: {},
    };
  },
  watch: {
    "modalConfig.show"(newVal) {
      if (!newVal) {
        //关闭弹窗清空校验
        setTimeout(() => {
          this.$refs.modal.resetFields();
        });
      }
    },
  },
  methods: {
    queryTableData(pageNo, pageSize) {},
    toggle(e) {
      if (this.modalConfig.show == false) {
        this.modalConfig.show = true;
      } else {
        this.modalConfig.show = false;
      }
      if (e) {
        this.init(cloneDeep(e.row));
      }
      return {
        add: () => {
          this.modalData = {};
          this.modalConfig.title = "添加账号";
          this.isAdd = true;
        },
        update: () => {
          this.modalConfig.title = "编辑账号";
          this.isAdd = false;
        },
      };
    },
    init(row) {
      this.modalData = row;
    },
  },
  computed: {
    modalCols() {
      if (this.isAdd) {
        return [
          {
            label: "姓名",
            prop: "username",
            type: "Input",
            required: true,
            rules: {
              required: true,
              message: "请输入姓名",
              trigger: "blur",
            },
          },
          {
            label: "账号",
            prop: "mobile",
            type: "Input",
            required: true,
            rules: {
              required: true,
              message: "请输入角色编码",
              trigger: "blur",
            },
          },
          {
            label: "密码",
            prop: "password",
            type: "Input",
            required: true,
            rules: {
              required: true,
              message: "请输入权限字段",
              trigger: "blur",
            },
          },
          {
            label: "角色",
            prop: "subRole",
            rules: {
              required: true,
              message: "请绑定角色",
              trigger: "blur",
            },
            type: "jsx",
            render: () => {
              return (
                <el-select
                  v-model={this.modalData.subRole}
                  placeholder="请选择销售单位"
                >
                  {this.roleList.map((item) => {
                    return (
                      <el-option label={item.name} value={item.id}></el-option>
                    );
                  })}
                </el-select>
              );
            },
          },
        ];
      } else {
        return [
          {
            label: "姓名",
            prop: "username",
            type: "Input",
            required: true,
            rules: {
              required: true,
              message: "请输入姓名",
              trigger: "blur",
            },
          },
          {
            label: "账号",
            prop: "mobile",
            type: "Input",
            required: true,
            disabled: true,
            rules: {
              required: true,
              message: "请输入角色编码",
              trigger: "blur",
            },
          },
          {
            label: "角色",
            prop: "subRole",
            rules: {
              required: true,
              message: "请绑定角色",
              trigger: "blur",
            },
            type: "jsx",
            render: () => {
              return (
                <el-select
                  v-model={this.modalData.subRole}
                  placeholder="请选择销售单位"
                >
                  {this.roleList.map((item) => {
                    return (
                      <el-option label={item.name} value={item.id}></el-option>
                    );
                  })}
                </el-select>
              );
            },
          },
        ];
      }
    },
    modalHandles() {
      return [
        {
          label: "取消",
          handle: () => {
            this.toggle();
          },
        },
        {
          label: "确认",
          type: "primary",
          submit: true,
          handle: () => {
            console.log(this.modalData);
            if (this.isAdd) {
              this.$api.accountNumber
                .addAccount({
                  ...this.modalData,
                  ownerId: JSON.parse(sessionStorage.getItem("userInfo"))
                    .managerId
                    ? JSON.parse(sessionStorage.getItem("userInfo")).managerId
                    : JSON.parse(sessionStorage.getItem("userInfo")).merchantId,
                })
                .then((res) => {
                  this.toggle();
                  this.$emit("queryList");
                });
            } else {
              this.$api.accountNumber
                .updateAccount(this.modalData)
                .then((res) => {
                  this.toggle();
                  this.$emit("queryList");
                });
            }
          },
        },
      ];
    },
  },
  asyncComputed: {
    async roleList() {
      let res = await this.$api.role.roleList({
        ownerId: JSON.parse(sessionStorage.getItem("userInfo")).managerId
          ? JSON.parse(sessionStorage.getItem("userInfo")).managerId
          : JSON.parse(sessionStorage.getItem("userInfo")).merchantId,
      });
      console.log(res);

      return res.data.data;
    },
  },
};
</script>
<style lang="scss" scoped>
</style>