<template>
  <el-dialog v-dialogDrag title="配置租户" :visible.sync="show" width="500px" :close-on-click-modal="false" :before-close="closePage">
    <el-form ref="form" :rules="rules" :model="formData" label-width="120px">
      <el-row>
        <el-col>
          <el-form-item prop="name" label="租户名称">
            <el-input v-model="formData.name"/>
          </el-form-item>

          <el-form-item prop="systems" label="配置模块">
              <el-select v-model="formData.systems" placeholder='请选择模块' multiple filterable
                         clearable
                         style="width: 99%">
                  <el-option v-for="item in modules" :key="item.id" :value="item.id" :label="item.name"/>
              </el-select>
          </el-form-item>
          <el-form-item label="行政区划" prop="areaCode" >
            <treeselect v-model="formData.areaCode" :options="areaOptions" :normalizer="normalizer" placeholder="选择行政区划" />

          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <div slot="footer" class="dialog-footer" style="text-align: center">
      <el-button type="primary" class="el-icon-tickets" @click="saveData">保存</el-button>
      <el-button type="danger" class="el-icon-close" @click="closePage">关闭</el-button>
    </div>
  </el-dialog>
</template>
<script>
import Treeselect from "@riophae/vue-treeselect";
import {addTenant, editTenant, getTenant, getTenantModule} from '@/api/system/tenant'

export default {
  name: "editTenant",
  components: {Treeselect},

  data() {
    return {
      areaTreeData: [], // 用于存储树状数据
      // 部门树选项
      areaOptions: [],
      show: false,
      isEdit: false,
      formData: this.initForm(),
      modules:[],
      rules: {
          name: [
              {required: true, message: this.$t('system_tenant_edit_624'), trigger: 'blur'},
          ],
          systems: [
              {required: true, message: this.$t('system_tenant_edit_systemId'), trigger: 'blur'},
          ]
      }
    }
  },
  created() {
    this.getList();

  },
  methods: {
    /** 转换部门数据结构 */
    normalizer(node) {
      if (node.children && !node.children.length) {
        delete node.children;
      }
      return {
        id: node.areaCode,
        label: node.areaName,
        children: node.children
      };
    },

    convertToTreeData(areaList) {
      const map = {};
      const treeData = [];

      return treeData;
    },

    openEdit(obj) {
      this.show = true;
        if (obj) {
            this.isEdit = true;
            this.formData = obj;
            getTenantModule(this.formData.id).then(res => {
              this.formData.systems = res.data;
            })
        } else {
            this.isEdit = false;
        }
    },
    //保存数据
    saveData() {
        this.$refs['form'].validate((valid) => {
            if (valid) {
                if (!this.isEdit) {
                    addTenant(this.formData).then(res => {
                        if (res.code === 200) {
                            this.closePage();
                        }
                        this.msgInfo(res.msg);
                    })
                } else {
                    editTenant(this.formData).then(res => {
                        if (res.code === 200) {
                            this.closePage();
                        }
                        this.msgInfo(res.msg);
                    })
                }
            }
        })
        //   }
        // });
    },
    //初始化表单
    initForm() {
      return {
        id: undefined,
        name: undefined,
        status: 1,
        sortSeq: 0,
        systems: [],
        areaCode:null,
      }
    },
    //关闭窗口
    closePage() {
      this.formData = this.initForm();
      this.show = false;
      this.$emit('click', false);
    }
  },
}
</script>

<style scoped>

</style>
