<template>
  <div v-loading="userManagementLoading">
    <div class="main-title">{{$t('backendSystem.userManagementTitle')}}</div>

    <el-form :inline="true" :model="userListParams" class="demo-form-inline" :rules="rules" ref="formRef">
      <el-form-item :label="$t('backendSystem.coin')" prop="coin">
        <el-select
          class="input"
         
          size="middle"
          ref="screen"
          @change="changeScreen(screenCurrency)"
          v-model="screenCurrency"
          :placeholder="$t(`personal.screen`)"
        >
          <el-option
            v-for="item in currencyList"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
            <div style="display: flex; align-items: center">
              <img :src="item.imgUrl" style="float: left; width: 20px" />
              <span style="float: left; margin-left: 5px">
                {{ item.label }}</span
              >
            </div>
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item :label="$t('backendSystem.user')"  style="margin-left: 5vw" prop="minerUser">
        <el-input v-model="userListParams.minerUser" :placeholder="$t('backendSystem.pleaseInput')" clearable @clear="handleInputClear"></el-input>
      </el-form-item>
      <el-form-item :label="$t('backendSystem.email')" style="margin-left: 5vw" prop="user">
        <el-input
          v-model="userListParams.user"
          type="email"
          :placeholder="$t('backendSystem.pleaseInput')"
          clearable
          @clear="handleInputClear"
        ></el-input>
      </el-form-item>

      <el-form-item style="margin-left: 1vw">
        <el-button type="primary" @click="handelQuery">{{$t('backendSystem.query')}}</el-button>
      </el-form-item>
    </el-form>
    <el-table
      :data="tableData"
      border
      style="width: 100%; margin-bottom: 18px"
      :header-cell-style="{ 'text-align': 'center' }"
      :cell-style="{ 'text-align': 'center' }"
      height="60vh"
    >
      <el-table-column prop="id" label="ID" width="60" />
      <el-table-column prop="coin" :label="$t('backendSystem.coin2')"  width="100" show-overflow-tooltip>
        <template slot-scope="scope" >
          <div style="display: flex; align-items: center;justify-content: center;">
            <img :src="handelImg(scope.row.coin)" style="width: 20px" />
            <span style="margin-left: 5px">{{ scope.row.coin }}</span>
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="user" :label="$t('backendSystem.email2')" width="200" show-overflow-tooltip/>
      <el-table-column prop="amount" :label="$t('backendSystem.amount2')" width="150" show-overflow-tooltip/>
      <el-table-column prop="status" :label="$t('backendSystem.status2')" width="100">
        <template slot-scope="scope">
          <el-tag :type="scope.row.status === '1' ? 'success' : 'danger'">{{  
            scope.row.status == "0" ? $t('backendSystem.normal') : $t('backendSystem.delete')
          }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="minerUser" :label="$t('backendSystem.minerUser2')" width="180" show-overflow-tooltip/>
      <el-table-column prop="balance" :label="$t('backendSystem.balance2')" show-overflow-tooltip />
      <el-table-column prop="active" :label="$t('backendSystem.active2')" width="100" show-overflow-tooltip>
        <template slot-scope="scope">
          <el-tag :type="scope.row.active === '1' ? 'success' : 'danger'">{{
            scope.row.active == "0" ? $t('backendSystem.yes') : $t('backendSystem.no')
          }}</el-tag>
        </template>
      </el-table-column>

      <el-table-column :label="$t('backendSystem.operation')" width="200">
        <template slot-scope="scope">
          <el-button size="mini" @click="handleDetails(scope.row)" type="primary" plain>{{$t('backendSystem.Details')}}</el-button>
          <el-button size="mini" @click="sendEmail(scope.row)" style="color: #651fff; border: 1px solid #651fff"
            >{{$t('backendSystem.sendEmail')}}</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <el-row>
      <el-col :span="24" style="display: flex; justify-content: center;">
        <el-pagination
    style="margin:0 auto;margin-top: 10px;"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page.sync="currentPage"
      :page-sizes="pageSizes"
      :page-size="userListParams.pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total">
    </el-pagination>
      </el-col>
     
    </el-row>
   


    <!-- 发送邮箱弹窗-->
    <el-dialog
       :title="$t('backendSystem.emailContent')"
       :visible.sync="dialogVisible"
       width="50%"
       :before-close="handleClose"
      :close-on-click-modal="false"
     >
       <el-form :model="senParams" ref="formRef" :rules="emailRules">
        <el-form-item :label="$t('backendSystem.recipient')" prop="to">
           <el-input maxlength="500" resize="none" v-model="senParams.to" type="textarea" :rows="2"  />
          <div style="color: #999; font-size: 12px; margin-top: 4px;">{{$t('backendSystem.emailRemind')}}</div>
          </el-form-item>
         <el-form-item :label="$t('backendSystem.subject')" prop="subject">
           <el-input resize="none"  maxlength="300"  show-word-limit v-model="senParams.subject" type="textarea" :rows="3"  />
         </el-form-item>
         <el-form-item :label="$t('backendSystem.text')" prop="text">
           <el-input resize="none"  maxlength="600"  show-word-limit v-model="senParams.text" type="textarea" :rows="8"  />
         </el-form-item>
        
       </el-form>
       <div slot="footer" class="dialog-footer">
         <el-button @click="handleClose">{{$t("backendSystem.cancel")}}</el-button>
         <el-button type="primary" :loading="sendEmailLoading" @click="sureSendEmail">{{$t("backendSystem.send")}}</el-button>
       </div>
     </el-dialog>
 
  </div>
</template>

<script>
import Index from "./index";
export default {
  mixins: [Index],
};
</script>

<style lang="scss" scoped>
.main-title {
  font-size: 24px;
  font-weight: bold;

  color: #333;
  margin-bottom: 18px;
}
</style>