<template>
  <el-dialog :title="(role && role.roleName) + $t('ec.role.assign')" :visible.sync="visible"   top="4%" class="roleUser " width="700px">

    <el-form v-loading="loading" inline :label-width="'85px'">

      <el-form-item :label="$t('ec.user.tenant')">
        <ec-tenant-by-pro :placeholder="$t('ec.user.tenant')" style="width: 184px;" />
      </el-form-item>
      <el-form-item :label="$t('ec.user.system')" prop="roleName">
        <el-input type="text" :placeholder="$t('ec.role.name')" />
      </el-form-item>
      <el-form-item :label="$t('ec.role.name')" prop="roleName">
        <el-input type="text" :placeholder="$t('ec.role.name')" />
      </el-form-item>
      <el-form-item :label="$t('ec.role.code')" prop="roleName">
        <el-input type="text" :placeholder="$t('ec.role.name')" />
      </el-form-item>
      <el-form-item :label="$t('ec.notice.status')" prop="roleName">
        <el-radio-group v-model="radio" style="width:184px;">
          <el-radio :label="3">备选项</el-radio>
          <el-radio :label="6">备选项</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item :label="$t('ec.role.name')" prop="roleName">
        <el-input type="text" :placeholder="$t('ec.role.name')" />
      </el-form-item>
      <el-form-item :label="$t('ec.role.code')" prop="roleName">
        <el-input
          type="textarea"
          :autosize="{ minRows: 3, maxRows: 5}"
          placeholder="请输入内容"
          style="width:464px;"
        />
      </el-form-item>
    </el-form>

    <el-table
      :data="tableData"
      style="width: 100%;"
      :cell-style="{ textAlign: 'center' }"
      :header-cell-style="{ textAlign: 'center' }"
    >
      <el-table-column
        label=""
        width="50"
      >
      </el-table-column>
      <el-table-column
        label="日期"
        width="120"
        style="text-align: center;"
      >
        <template slot-scope="scope">
          <i class="el-icon-time" />
          <span style="margin-left: 10px；">{{ scope.row.date }}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="姓名"
        width="250"
        style="text-align: center !important;"
      >
        <template slot-scope="scope">
          <el-radio-group v-model="radio" style="width:184px;">
            <el-radio :label="3">备选项</el-radio>
            <el-radio :label="6">备选项</el-radio>
          </el-radio-group>
        </template>
      </el-table-column>
      <el-table-column label="操作"        width="200">
        <template slot-scope="scope">
          <el-radio-group v-model="radio" style="width:184px;">
            <el-radio :label="3">备选项</el-radio>
            <el-radio :label="6">备选项</el-radio>
          </el-radio-group>
        </template>
      </el-table-column>
    </el-table>

    <div slot="footer" class="dialog-footer">
      <el-button @click="visible = false">{{ $t('ec.table.cancel') }}</el-button>
      <el-button type="primary" :loading="saveLoading" @click="updateUser">{{ $t('ec.table.confirm') }}</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { findRoleUsers as getRoleUser, saveRoleAppUsers as updateRoleUser } from 'ecip-web/api/vue/role/sysrRoleApi'
import EcTenantByPro from '../../../../../components/EcTenantByPro/EcTenantByPro'
export default {
  name: 'RoleUserModal',
  components: {
    EcTenantByPro
  },
  data() {
    return {
      radio: '',
      visible: false,
      loading: false,
      saveLoading: false,
      appId: '',
      role: {},
      roleUsers: '',
      roleUserList: [],
      roleData: [],
      tableData: [
        {
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-04',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1517 弄'
        }
      ]
    }
  },
  watch: {
    roleUsers: {
      handler(val) {
        this.roleUserList = val.Split(',')
      },
      immediate: true
    }
  },
  methods: {
    init(appId, role) {
      this.appId = appId
      this.role = role
      this.visible = true
      this.$nextTick(() => {
        if (role && role.id) {
          this.roleUser(role.id)
        } else {
          this.roleUserList = []
          this.roleUsers = ''
        }
      })
    },
    async roleUser(id) {
      try {
        this.loading = true
        const { data } = await getRoleUser(id)
        this.roleUserList = data
        this.roleUsers = data.join()
      } finally {
        this.loading = false
      }
    },
    updateUser() {
      this.$confirm(this.$t('ec.role.assignConfirm') + this.role.roleName, this.$t('ec.message.prompt'), {
        confirmButtonText: this.$t('ec.message.confirm'),
        cancelButtonText: this.$t('ec.message.cancel'),
        type: 'warning'
      }).then(async() => {
        try {
          this.saveLoading = true
          await updateRoleUser(this.role.id, this.appId, this.roleUserList)
          this.$notify.success(this.$t('ec.role.assign') + this.$t('ec.message.success'))
          this.visible = false
        } finally {
          this.saveLoading = false
        }
      })
    }
  }
}
</script>

<style scoped>

</style>
