<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')" width="120px">
        <template slot-scope="scope">
          <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) && item.UserTypeEnum !== 20
      )
    },
  },
  methods: {
    cancel() {
      this.$emit('update:visible', false)
    },
    openAdd() {
      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>