<template>
  <div>
    <vxe-modal
      :value="isShow"
      show-footer
      title="绑定角色"
      show-confirm-button
      :width="600"
      :height="600"
      esc-closable
      @input="e => $emit('update:isShow',e)"
    >
      <template>
        <vxe-table
          ref="table"
          stripe
          style="margin-top: 10px;"
          keep-source
          show-overflow
          :column-config="{ resizable: true }"
          :checkbox-config="{ trigger: 'row', highlight: true }"
          :data="tableData"
        >
          <vxe-column type="checkbox" width="60" fixed="left" />
          <vxe-column type="seq" width="58" align="center" />
          <vxe-column field="name" width="160" title="角色" />
          <vxe-column field="permissions" title="权限菜单" min-width="200" show-overflow="tooltip">
            <template #default="{ row }">
              <div>
                <el-tag v-for="item in row.permissions" :key="item.id">{{ item.name }}</el-tag>
              </div>
            </template>
          </vxe-column>
          <vxe-column field="sortnumber" width="80" title="排序" align="center" />
        </vxe-table>
        <p class="total" type="primary">共 {{ total }} 条数据</p>
      </template>

      <template #footer>
        <el-button type="primary" :loading="loading" @click="submit">确认</el-button>
      </template>
    </vxe-modal>
  </div>
</template>

<script>
import { setRoles, getRoles } from '@/api/user'
export default {
  props: {
    isShow: {
      type: Boolean,
      default: false,
      required: true
    }
  },
  data() {
    return {
      loading: false,

      tableData: [],
      total: 0,
      form: {
        id: '',
        role_id: []
      }
    }
  },
  computed: {},
  watch: {
    'form.role_id': function(val, oldVal) {
      this.setSelectRow()
    }
  },
  created() {
    this.getRoles()
  },
  methods: {
    /**
     * @param {array[string]} keys
     * @param {array[all]} values
     * @returns {void}
     */
    setForm(keys = [], values = []) {
      keys.forEach((key, index) => {
        this.form[key] = values[index]
      })
    },

    setSelectRow() {
      this.$nextTick(() => {
        if (this.$refs['table']) {
          this.$refs['table'].clearCheckboxRow()
          this.$refs['table'].setCheckboxRow(
            this.tableData.filter(row => this.form.role_id.findIndex(j => j === row.id) !== -1),
            true
          )
        }
      })
    },

    async getRoles() {
      const res = await getRoles()
      this.tableData = res
      this.total = res.length
    },

    async submit() {
      if (this.$refs['table']) {
        this.loading = true
        const selectRecords = this.$refs['table'].getCheckboxRecords()
        try {
          setRoles({
            id: this.form.id,
            role_id: selectRecords.map(row => row.id)
          })
          // 接口中角色信息有延迟
          setTimeout(() => {
            this.loading = false
            this.$emit('update:isShow', false)
            this.$emit('refresh')
          }, 500)
        } catch (err) {
          this.loading = false
        }
      }
    }
  }
}
</script>

<style scoped lang="scss">
.total {
  color: #666;
  text-align: right;
  line-height: 3;
}
</style>
