<template>
  <el-dialog v-if="visible" :visible.sync="visible" v-dialogDrag width="540px" :close-on-click-modal="false"
    :close-on-press-escape="false" append-to-body :title="$t('system:userlist:roleList:title')" :before-close="cancel">
    <el-button size="mini" type="primary" @click.stop="openAdd" style="float: right">
      {{ $t('common:button:new') }}
    </el-button>
    <el-table :data="list" style="width: 100%" max-height="300px" v-loading="loading">
      <el-table-column type="index" width="40" />
      <el-table-column prop="UserTypeShortName" :label="$t('system:userlist:roleList:table:UserTypeShortName')" />
      <el-table-column prop="IsUserRoleDisabled" :label="$t('system:userlist:roleList:table:IsUserRoleDisabled')">
        <template slot-scope="scope">
          <span> {{ $fd('IsEnable', !scope.row.IsUserRoleDisabled) }}</span>
        </template>
      </el-table-column>
      <el-table-column :label="$t('common:action:action')" min-width="120px">
        <template slot-scope="scope" v-if="checkRole(scope.row.UserTypeEnum)">
          <el-button size="mini" type="text" :disabled="scope.row.IsUserRoleDisabled"
            @click.stop="scope.row.IsUserRoleDisabled = true">
            {{ $fd('IsEnable', false) }}
          </el-button>
          <el-button size="mini" type="text" :disabled="!scope.row.IsUserRoleDisabled"
            @click.stop="scope.row.IsUserRoleDisabled = false">
            {{ $fd('IsEnable', true) }}
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <div slot="footer">
      <!-- 保存 -->
      <el-button type="primary" :loading="loading" size="small" @click="save">
        {{ $t('common:button:confirm') }}
      </el-button>
      <!-- 取消 -->
      <el-button size="small" @click="cancel">
        {{ $t('common:button:cancel') }}
      </el-button>
    </div>
    <el-dialog v-if="addVisible" :visible.sync="addVisible" v-dialogDrag :close-on-click-modal="false"
      :close-on-press-escape="false" append-to-body width="540px" :title="$t('system:userlist:roleList:addTitle')">
      <el-form ref="addForm" :model="form" :rules="rule" label-width="80px">
        <el-form-item :label="$t('system:userlist:table:UserType')">
          <el-select v-model="form.roles" size="small" placeholder="" multiple style="width: 100%">
            <template v-for="item of roleList">
              <el-option :key="item.Id" :label="item.UserType" :value="item.Id" />
            </template>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer">
        <!-- 保存 -->
        <el-button type="primary" size="small" @click="saveAdd">
          {{ $t('common:button:confirm') }}
        </el-button>
        <!-- 取消 -->
        <el-button size="small" @click="addVisible = false">
          {{ $t('common:button:cancel') }}
        </el-button>
      </div>
    </el-dialog>
  </el-dialog>
</template>
<script>
import { updateUserRoleInfo } from '@/api/admin.js'
export default {
  name: 'roleList',
  props: {
    userId: { type: String, default: '' },
    visible: {
      type: Boolean,
      default: false,
    },
    list: {
      type: Array,
      default: () => {
        return []
      },
    },
    userTypeOptions: {
      type: Array,
      default: () => {
        return []
      },
    },
  },
  data() {
    return {
      addVisible: false,
      loading: false,
      form: {
        roles: [],
      },
      rule: {
        roles: [
          {
            required: true,
            message: 'Please Select',
            trigger: ['blur', 'change'],
          },
        ],
      },
    }
  },
  computed: {
    roleList() {
      let arr = this.list.map((item) => item.UserTypeId)
      return this.userTypeOptions.filter(
        (item) =>
          !arr.includes(item.Id)
      )
    },
  },
  methods: {
    checkRole(UserTypeEnum) {
      if (this.hasPermi(['role:ga']) && [14, 2].includes(UserTypeEnum)) return false
      if (this.hasPermi(['role:sa']) && [2].includes(UserTypeEnum)) return false
      return true
    },
    cancel() {
      this.$emit('update:visible', false)
    },
    openAdd() {
      this.form.roles = []
      this.addVisible = true
    },
    async save() {
      try {
        let data = {
          Id: this.userId,
          UserRoleList: this.list,
        }
        this.loading = true
        let res = await updateUserRoleInfo(data)
        this.loading = false
        if (res.IsSuccess) {
          this.$message.success(this.$t('common:message:updatedSuccessfully'))
          this.$emit('update:visible', false)
          this.$emit('getRoleList')
        }
      } catch (err) {
        this.loading = false
        console.log(err)
      }
    },
    async saveAdd() {
      try {
        let validate = await this.$refs.addForm.validate()
        if (!validate) return
        let arr = this.userTypeOptions.filter((item) =>
          this.form.roles.includes(item.Id)
        )
        arr.forEach((item) => {
          this.list.push({
            UserTypeEnum: item.UserTypeEnum,
            UserTypeId: item.Id,
            IsUserRoleDisabled: false,
            UserTypeShortName: item.UserTypeShortName,
          })
        })
        this.addVisible = false
      } catch (err) {
        console.log(err)
      }
    },
  },
}
</script>