<!-- 用户编辑弹窗 -->
<template>
  <ele-modal
    width="680px"
    :visible="visible"
    :close-on-click-modal="true"
    custom-class="ele-dialog-form"
    :title="isMaJia ? '修改马甲' : '披上马甲'"
    @update:visible="updateVisible"
  >
    <el-form ref="form" :model="form" label-width="82px">
      <el-row :gutter="15">
        <el-col v-bind="styleResponsive ? { sm: 12 } : { span: 12 }">
          <el-form-item label="选择马甲:">
            <ele-table-select
              ref="select"
              v-model="form.maJiaId"
              :multiple="false"
              :clearable="true"
              :placeholder="isMaJia ? '马甲已删除请保存' : '请选择'"
              value-key="userId"
              label-key="maJiaShow"
              :table-config="tableConfig"
              :popper-width="580"
              :init-value="initValue"
            >
              <!-- 角色列 -->
              <template v-slot:roleName="{ row }">
                <el-tag type="primary" size="mini">
                  {{ row.roleName }}
                </el-tag>
              </template>
              <!-- 表头工具栏 -->
              <template v-slot:toolbar>
                <members-majia-search @search="search" />
              </template>
            </ele-table-select>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <template v-slot:footer>
      <el-button @click="updateVisible(false)">取消</el-button>
      <el-button type="primary" :loading="loading" @click="save">
        保存
      </el-button>
    </template>
  </ele-modal>
</template>

<script>
  import { pageMembers, updateMembersMaJia } from '@/api/sylive/members';
  import MembersMajiaSearch from './members-majia-search.vue';

  export default {
    components: { MembersMajiaSearch },
    props: {
      // 弹窗是否打开
      visible: Boolean,
      // 修改回显的数据
      data: Object
    },
    data() {
      const defaultForm = {
        maJiaId: null
      };
      return {
        defaultForm,
        // 表单数据
        form: { ...defaultForm },
        tableConfig: {
          datasource({ page, limit, where, order }) {
            return pageMembers({ ...where, ...order, page, limit });
          },
          columns: [
            {
              prop: 'userId',
              label: 'ID',
              showOverflowTooltip: true,
              minWidth: 60
            },
            {
              prop: 'uname',
              label: '姓名',
              showOverflowTooltip: true,
              minWidth: 90
            },
            {
              prop: 'nickname',
              label: '微信昵称',
              showOverflowTooltip: true,
              minWidth: 90
            },
            {
              prop: 'mobile',
              label: '手机号',
              showOverflowTooltip: true,
              minWidth: 90
            },
            {
              prop: 'organizationName',
              label: '机构',
              showOverflowTooltip: true,
              minWidth: 120
            },
            {
              prop: 'roleName',
              label: '角色',
              showOverflowTooltip: true,
              minWidth: 60,
              slot: 'roleName'
            }
          ],
          pageSize: 5,
          pageSizes: [5, 10, 15, 20],
          rowClickChecked: true,
          rowClickCheckedIntelligent: false,
          toolkit: ['reload', 'columns'],
          size: 'small',
          toolStyle: { padding: '0 10px' }
        },
        // 提交状态
        loading: false,
        // 是否是修改
        isUpdate: false,
        // 是否有马甲
        isMaJia: false,
        // 回显值
        initValue: undefined
      };
    },
    computed: {
      // 是否开启响应式布局
      styleResponsive() {
        return this.$store.state.theme.styleResponsive;
      }
    },
    methods: {
      // 搜索
      search(where) {
        this.$refs.select.reload({
          where: where,
          page: 1
        });
      },
      /* 保存编辑 */
      save() {
        this.$refs.form.validate((valid) => {
          if (!valid) {
            return false;
          }
          this.loading = true;
          updateMembersMaJia(this.data.userId, this.form.maJiaId)
            .then((msg) => {
              this.loading = false;
              this.$message.success(msg);
              this.updateVisible(false);
              this.$emit('done');
            })
            .catch((e) => {
              this.loading = false;
              this.$message.error(e.message);
            });
        });
      },
      /* 更新visible */
      updateVisible(value) {
        this.$emit('update:visible', value);
      }
    },
    watch: {
      visible(visible) {
        if (visible) {
          if (this.data) {
            this.initValue = {
              userId: this.data.maJiaId,
              maJiaShow: this.data.maJiaName
            };
            this.isMaJia = this.data.maJiaId ? true : false;
          } else {
            this.form.maJiaId = null;
            this.isMaJia = false;
          }
        } else {
          this.$refs.form.clearValidate();
          this.form = { ...this.defaultForm };
        }
      }
    }
  };
</script>
