
<template>
  <el-dialog
    v-dialog-drag
    :close-on-press-escape="false"
    :close-on-click-modal="false"
    :visible.sync="dialogVisible"
    width="500px"
    title="调整集团"
    append-to-body
    @close="handleCancel"
  >
    <el-form ref="form" class="full-form" :model="formState" label-width="100px">
      <el-form-item label="幼儿园类型" prop="kindergartenType" :rules="{ required: true, message: '幼儿园类型不能为空', trigger: 'blur' }">
        <el-select
          v-model="formState.kindergartenType"
          placeholder="请选择幼儿园类型"
          @change="handleSelectType"
        >
          <el-option
            v-for="dict in options.kindergartenType"
            :key="dict.value"
            :label="dict.label"
            :value="dict.value"
          />
        </el-select>
      </el-form-item>
      <template v-if="isKindergartenGroup">
        <el-form-item
          label="所属集团"
          prop="gardenId"
          :rules="[{required:isKindergartenGroup, message:'所属集团不能为空',trigger:['blur', 'change']}]"
        >
          <el-select v-model="formState.gardenId" placeholder="请选择所属集团" filterable clearable @change="handleChangeGarden">
            <el-option
              v-for="group in gardenList"
              :key="group.id"
              :label="group.name"
              :value="group.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item
          label="是否集团总园"
          prop="isGarden"
          label-width="110px"
          :rules="[{required:isKindergartenGroup ,message:'是否集团总园不能为空',trigger: ['blur', 'change']}]"
        >
          <el-radio-group v-model="formState.isGarden" size="medium">
            <el-radio
              v-for="(item, index) in options.yOrN"
              :key="index"
              :label="item.value"
              :disabled="item.disabled"
            >{{ item.label }}
            </el-radio>
          </el-radio-group>
        </el-form-item>
      </template>
    </el-form>

    <tenant-dialog ref="tenantDialog" @ok="handleOk" />
    <div slot="footer" class="dialog-footer">
      <el-button @click="handleCancel">取 消</el-button>
      <el-button type="primary" :loading="loading" @click="handleSubmit">确 定</el-button>
    </div>
  </el-dialog>
</template>
<script>

import { DEFINE, DICT_TYPE } from '@/utils/dict/config'
import { fetchAllGarden, fetchGardenInfo } from '@/api/system/garden'
import { changeGarden, getBranch } from '@/api/system/branch'
import TenantDialog from '@/views/system/tenant/modules/TenantDialog.vue'
import options from '@/utils/dict/options'
const initForm = {
  kindergartenType: null,
  gardenId: null,
  isGarden: null
}
export default {
  name: 'ChangeGarden',
  components: {
    TenantDialog
  },
  data() {
    return {
      options,
      DEFINE,
      DICT_TYPE,
      innerVisible: false,
      dialogVisible: false,
      loading: false,
      formState: Object.assign({}, initForm),
      gardenList: [],
      gardenHasTenantId: false, // 集团是否开通租户,
      selectedGarden: {
        id: null,
        name: null
      }
    }
  },
  computed: {
    isKindergartenGroup() {
      return this.formState.kindergartenType === options.kindergartenTypeMap.kindergartenGroup
    }
  },
  created() {
    this.getGardenList()
  },
  methods: {
    getGardenList() {
      fetchAllGarden().then(({ data }) => {
        this.gardenList = data && data.length > 0 ? data : []
      })
    },
    handleOpen({ id, params }) {
      this.selectedGarden.id = params && params.gardenId || null
      this.selectedGarden.name = params && params.gardenName || null
      this.getGardenList()
      this.dialogVisible = true
      getBranch(id).then(({ data }) => {
        this.formState = data
      })
    },
    handleChangeGarden(val) {
      this.selectedGarden = this.gardenList.find(item => item.id === val)
    },
    handleCancel() {
      this.dialogVisible = false
      this.$refs.form.resetFields()
    },
    onUpdate() {
      this.loading = true
      changeGarden(this.formState).then(() => {
        this.$modal.msgSuccess(`调整成功`)
        this.$emit('ok')
        this.handleCancel()
      }).finally(() => {
        this.loading = false
      })
    },
    handleSelectType(val) {
      if (val !== options.kindergartenTypeMap.kindergartenGroup) {
        this.formState.gerdenId = null
      }
    },
    handleSubmit() {
      this.$refs.form.validate(valid => {
        if (valid) {
          // 判断集团是否已开通租户
          const { id, name } = this.selectedGarden
          if (this.isKindergartenGroup && id) {
            fetchGardenInfo(id).then(({ data }) => {
              this.gardenHasTenantId = data && data.length > 0
              if (!this.gardenHasTenantId) {
                this.$modal.confirm('当前幼儿园所属集团没有开通租户，是否开通？').then(() => {
                  this.$refs.tenantDialog.handleOpen(false, true, {
                    tenantType: options.sysTenantTypeMap.group,
                    tenantName: name,
                    gardenId: id,
                    status: options.sysTenantStatusMap.Y
                  })
                }).catch(() => {})
              } else {
                this.onUpdate()
              }
            })
          } else {
            this.onUpdate()
          }
        }
      })
    },
    handleOk() {
      this.gardenHasTenantId = true
      this.onUpdate()
    }
  }
}
</script>
<style scoped lang="scss">

</style>
