<template>
    <div>
        <Tabs type="card" :animated="false" @on-click="tabChange" v-model="tabIndex">
            <TabPane label="机构列表" name="list">
                <company-list ref="companyList" @addOption="addOption" @updateOption="updateOption"></company-list>
            </TabPane>
            <TabPane :label="optionName" name="option">
                <company-option
                        ref="companyOption"
                        :hiddenArr="hiddenArr"
                        :optionState="optionState"
                        :formData="formData"
                        :get-url="getUrl"
                        @cancelOption="cancelOption"
                        @saveOption="saveOption">
                    <template v-slot="{row}">
                        <slot :row="row"></slot>
                    </template>
                </company-option>
            </TabPane>
        </Tabs>
    </div>
</template>

<script>

import CompanyList from './components/company-list'
import CompanyOption from './components/company-option'
import { log } from '../../../libs/util'

export default {
  name: 'WlCompanyManager',
  components: {
    CompanyOption,
    CompanyList
  },
  data () {
    return {
      tabIndex: 'list',
      optionName: '添加机构',
      optionState: false, // 添加false（默认） 修改true
      formData: {}
    }
  },
  props: {
    getUrl: {
      type: String,
      default: () => {
        return ''
      }
    },
    isSuccess: {
      type: Boolean,
      default: () => {
        return true
      }
    },
    hiddenArr: {
      type: Array,
      default: () => {
        return []
      }
    }
  },
  created () {
    log('comapnyManage', 'readme')
  },
  methods: {
    addOption (data) {
      this.optionName = '添加机构'
      this.tabIndex = 'option'
      this.optionState = false
      this.formData = {
        USEABLE: '1', // 是否启用
        super_name: data.name, // 上级机构名称
        parent_id: data.id, // 上级机构id
        sys_area: data.sys_area, // 运营商编号
        area_id: data.area_id, // 归属区域
        type: data.type, // 机构类型
        grade: parseInt(data.grade) + 1 + '', // 机构等级
        sort: parseInt(data.sort) + 30 // 排序
      }
      this.$refs.companyOption.roleState = false
      this.$refs.companyOption.getRoleList({ company_id: data.id })
    },
    updateOption (data) {
      this.optionName = '修改机构'
      this.optionState = true
      this.formData = this.$common.xeUtils.clone(data)
      this.$refs.companyOption.getById({ id: this.formData.id })
      this.tabIndex = 'option'
    },
    saveOption (formData, ret) {
      if (this.isSuccess) {
        this.$Message.success('操作成功')
        this.successAction()
      } else {
        if (!formData.id) {
          formData.id = ret
        }
        this.$emit('successResult', formData)
      }
    },
    successAction () {
      this.tabIndex = 'list'
      this.optionName = '添加机构'
      this.$refs.companyList.findList()
    },
    cancelOption () {
      this.tabIndex = 'list'
      this.optionName = '添加机构'
      this.$refs.companyList.findList()
    },
    tabChange (val) {
      if (val === 'list') {
        this.optionName = '添加机构'
      } else {
        const data = this.$refs.companyList.originData[0]
        this.formData = {
          USEABLE: '1', // 是否启用
          super_name: data.name, // 上级机构名称
          parent_id: data.id, // 上级机构id
          sys_area: data.sys_area, // 运营商编号
          area_id: data.area_id, // 归属区域
          type: data.type, // 机构类型
          grade: parseInt(data.grade) + 1 + '', // 机构等级
          sort: parseInt(data.sort) + 30 // 排序
        }
        this.$refs.companyOption.roleState = false
        this.$refs.companyOption.getRoleList({ company_id: data.id })
      }
    }
  }
}
</script>

<style scoped>

</style>
