<template>
  <div class="app-container">
    <el-form ref="form" :model="form" :rules="rules" label-width="80px">
      <el-row>
        <el-col :span="8">
          <el-form-item label="绑定人员" prop="loginName">
            <el-select filterable v-model="form.loginName" placeholder="请选择消费人员类型" multiple clearable
                       size="small">
              <el-option
                v-for="item in userList"
                :key="item.userName"
                :label="item.phonenumber + '  ' + item.nickName"
                :value="item.userName"
              />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8">
          <el-form-item label="机构名称" prop="organizationCode">
            <el-select  v-model="form.organizationCode" disabled>
              <el-option
                v-for="item in organizations"
                :key="item.deptCode"
                :label="item.deptName"
                :value="item.deptCode"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8">
          <el-form-item label="用户类型" prop="userType">
            <el-select  v-model="form.userType" >
              <el-option
                v-for="dict in dict.type.user_type"
                :key="dict.value"
                :label="dict.label"
                :value="dict.value"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-form-item label="有效日期" prop="effectiveDate">
          <el-date-picker clearable size="small"
            v-model="form.effectiveDate"
            type="date"
            value-format="yyyy-MM-dd"
            placeholder="选择有效日期">
          </el-date-picker>
        </el-form-item>
      </el-row>
    </el-form>
    <el-form label-width="100px">
      <el-form-item >
        <el-button type="primary" @click="submitForm()">授权绑定</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import {queryUser, singleUserTypeAuth} from "@/api/system/user";
import {queryLoginOrganizationInfo} from "@/api/system/dept";
import user from "@/store/modules/user";

export default {
  name: "BindRole",
  dicts: ['user_type'],
  data() {
    return {
       // 遮罩层
      loading: true,
      // 分页信息
      total: 0,
      pageNum: 1,
      pageSize: 10,
      // 选中角色编号
      roleIds:[],
      organizations: [],
      userList: [],
      // 用户信息
      form: {
        phonenumber: '',
        loginName: '',
        nickName: '',
        organizationCode: '',
        userType: null,
        effectiveDate: null
      },
      rules: {
        organizationCode: [
          { required: true, message: "机构名称不能为空", trigger: "blur" },
        ],
        userType: [
          { required: true, message: "用户类型不能为空", trigger: "blur" },
        ],
        effectiveDate: [
          { required: true, message: "有效日期不能为空", trigger: "blur" },
        ]
      }
    };
  },
  created() {
    queryLoginOrganizationInfo().then((response) => {
      this.organizations = response.data;
    });
    this.form.organizationCode = user.state.organ;
    this.queryNickName();
  },
  methods: {
    queryNickName() {
      queryUser().then(response =>{
        if (response.code == 200){
          this.userList = response.data;
          // this.userList.forEach(item =>{
          //   item.value = item.phonenumber + '  ' + item.nickName;
          // })
        }
      })
    },

    /** 提交按钮 */
    submitForm() {
      this.form.loginName = this.form.loginName.join(',');
      this.$refs["form"].validate(valid => {
        if(valid) {
            singleUserTypeAuth(this.form).then((response) => {
              this.$modal.msgSuccess("授权成功");
              this.form.loginName = this.form.loginName.split(',');
            });
        }
      });
    }
  },
};
</script>
