<template>
  <div>
    <el-dialog
      v-dialogDrag
      :visible.sync="showModal"
      :title="modalTitle"
    >
      <div>
        <div style="margin: 0 20px 10px 0px;">
          <el-radio-group v-model="currentHome" size="small" @change="_radioChange">
            <el-radio-button
              v-for="(item,index) in radioList"
              v-show="item.name !== '平台首页'"
              :key="index"
              :label="index"
            >
              {{ item.name }}
            </el-radio-button>
          </el-radio-group>
        </div>

        <el-table
          stripe
          size="small"
          highlight-current-row
          :data="getPage"
          style="width: 100%"
          :height="400"
        >
          <el-table-column
            type="index"
            width="50"
          />
          <el-table-column
            v-for="item in pageColumns"
            :key="item.id"
            show-overflow-tooltip
            :prop="item.key"
            :label="item.title"
            :min-width="item.width"
          >
            <template slot-scope="scope">
              <div v-if="item.status">
                {{ scope.row.status.display }}
              </div>
              <div v-else>
                {{ scope.row[item.key] }}
              </div>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="120">
            <template slot-scope="scope">
              <el-button
                v-if="scope.row.status.display === '正常'"
                size="mini"
                type="danger"
                @click="_operate(scope.row.status.display, scope.row.id)"
              >
                禁用
              </el-button>
              <el-button
                v-if="scope.row.status.display === '禁用'"
                size="mini"
                @click="_operate(scope.row.status.display, scope.row.id)"
              >
                启用
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </el-dialog>
  </div>
</template>
<script>
/**
 * 分配模块
 */
import {
  sysResource,
  sysModule,
  sysSystem,
  sysCompanyRelModule
} from '../../../api'
export default {
  data() {
    return {
      modalTitle: '分配模块',
      showModal: false,
      currentHome: 0,
      radioList: [],
      getPage: [],
      selectIds: [],
      companyId: '',
      systemId: '',
      radioData: 0,
      loading: true,
      pageColumns: [
        { title: '模块名称', key: 'name', width: 150 },
        { title: '状态', key: 'status', width: 120, status: true }
      ]
    }
  },

  methods: {
    _open(data) {
      this.currentHome = 1
      this.showModal = true
      this.companyId = data.id
      this._getNavMenu()
    },
    _getNavMenu: async function() {
      // 根据平台信息与导航栏tab 取其交集，获取有权限的首页（后期可以换成一个接口）
      const menuList = await sysResource.getNavMenu()
      this._getRadio(menuList)
    },
    _getRadio: async function(menuList) {
      const result = await sysSystem.listIdName()
      const tempData = []
      for (let i = 0; i < result.length; i++) {
        menuList.forEach(value => {
          if (value.name === result[i].name) {
            tempData.push(result[i])
          }
        })
      }
      this.radioList = tempData
      this._radioChange(0)
    },
    _radioChange(data) {
      this.radioData = data
      this.systemId = this.radioList[data].id
      const obj = {
        companyId: this.companyId,
        systemId: this.systemId
      }
      this._page(obj)
    },
    _page: async function(obj) {
      const result = await sysModule.listCompanyId(obj)
      if (result) {
        this.getPage = result
        this.loading = false
      }
    },
    _resultChange(result) {
      if (result) {
        this._radioChange(this.radioData)
        this.selectIds = []
      }
    },
    _batchModuleNormal: async function() {
      const result = await sysCompanyRelModule.addModule({
        companyId: this.companyId,
        moduleIds: this.selectIds
      })
      this._resultChange(result)
    },
    _batchModuleForbidden: async function() {
      const result = await sysCompanyRelModule.deleteModule({
        companyId: this.companyId,
        moduleIds: this.selectIds
      })
      this._resultChange(result)
    },
    _cancel() {
      this.showModal = false
    },
    _operate(status, id) {
      this.selectIds = [id]
      if (status === '禁用') {
        // 启用操作
        this._batchModuleNormal()
      } else {
        this._batchModuleForbidden()
      }
    }
  }
}
</script>
