<style>
  .GuestAccountList .el-button-group .el-button{
    padding:5px;
  }
</style>

<template>
  <div class="flexOne GuestAccountList">
    <div class="query-box">
      <ul class="user_time_picker">
        <li>
          <span>
            <em>姓名</em>
            <el-input v-model="msg.AccountName" @keyup.enter.native="getList"></el-input>
          </span>
        </li>
        <li>
          <span>
            <em>护照号</em>
            <el-input v-model="msg.PassportNo" @keyup.enter.native="getList"></el-input>
          </span>
        </li>
        <li>
          <span>
            <em>账户</em>
            <el-input v-model="msg.LoginAccount" @keyup.enter.native="getList"></el-input>
          </span>
        </li>
        <li>
          <span>
            <em>手机号码</em>
            <el-input v-model="msg.MobilePhone" @keyup.enter.native="getList"></el-input>
          </span>
        </li>
        <li>
          <span>
            <em>{{$t('admin.admin_status')}}</em>
            <el-select filterable v-model="msg.AccountStatus">
              <el-option :label="$t('pub.unlimitedSel')" :value="-1"></el-option>
              <el-option label="正常" :value="0"></el-option>
              <el-option label="禁用" :value="1"></el-option>
              <el-option label="删除" :value="2"></el-option>
            </el-select>
          </span>
        </li>
        <li>
          <input type="button" @click="getList()" class="hollowFixedBtn" :value="$t('pub.searchBtn')">
        </li>
      </ul>
    </div>
    <div class="clearfix"></div>
    <table class="singeRowTable" border="0" cellspacing="0" cellpadding="0" v-loading="loading">
      <tr>
        <th>姓名</th>
        <th>账户</th>
        <th>手机号码</th>
        <th>护照</th>
        <th>性别</th>
        <th>状态</th>
        <th>创建时间</th>
        <th>{{$t('system.table_operation')}}</th>
      </tr>
      <tr v-for="(item,index) in dataList" :key="index">
        <td>{{item.AccountName}}</td>
        <td>{{item.LoginAccount}}</td>
        <td>{{item.MobilePhone}}</td>
        <td>{{item.PassportNo}}</td>
        <td>{{item.SexStr}}</td>
        <td>{{item.AccountStatusStr}}</td>
        <td>{{item.CreateTimeStr}}</td>
        <td>
          <el-button-group>
            <template v-if="item.AccountStatus==0">
              <el-tooltip class="item" effect="dark" content="禁用" placement="top">
                <el-button type="primary" size="mini" icon="iconfont icon-jinyong" @click="SetAccountStatus(item.Id,1)">
                </el-button>
              </el-tooltip>
              <el-tooltip class="item" effect="dark" content="删除" placement="top">
                <el-button type="danger" size="mini" icon="iconfont icon-img_delete_small" @click="SetAccountStatus(item.Id,2)">
                </el-button>
              </el-tooltip>
            </template>
            <template v-else>
              <el-tooltip class="item" effect="dark" content="启用" placement="top">
                <el-button type="primary" size="mini" icon="iconfont icon-qidong" @click="SetAccountStatus(item.Id,0)">
                </el-button>
              </el-tooltip>
            </template>
             <el-tooltip class="item" effect="dark" content="收货地址" placement="top">
                <el-button type="primary" size="mini" icon="iconfont icon-beizhu" @click="GetAddressInfo(item.Id)">
                </el-button>
              </el-tooltip>
          </el-button-group>
        </td>
      </tr>
      <tfoot>
        <tr>
          <td colspan="8">
            <el-pagination background @current-change="handleCurrentChange" layout="total,prev, pager, next, jumper"
              :page-size="msg.pageSize" :total="msg.total">
            </el-pagination>
          </td>
        </tr>
      </tfoot>
    </table>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        //查询参数
        msg: {
          AccountName: "", //姓名
          PassportNo: "", //护照
          MobilePhone: "", //手机号码
          AccountStatus: -1, //状态，
          LoginAccount: "", //登录账户
          pageIndex: 1,
          pageSize: 10,
          total: 0,
        },
        loading: false,
        dataList: [],
        //账户修改
        editMsg: {
          Id: 0,
          AccountStatus: 0,
        }
      };
    },
    mounted() {
      this.getList();
    },
    filters: {},
    methods: {
      handleCurrentChange(val) {
        this.msg.pageIndex = val;
        this.getList();
      },
      //获取数据
      getList() {
        this.loading = true;
        this.apipost("ShopGuest_get_GetGuestAccountPageListService", this.msg, res => {
          this.loading = false;
          if (res.data.resultCode === 1) {
            this.dataList = res.data.data.pageData;
            this.msg.total = res.data.data.count;
          } else {
            this.Error(res.data.message);
          }
        }, null);
      },
      //修改账户类型
      SetAccountStatus(Id, AccountStatus) {
        this.editMsg.Id = Id;
        this.editMsg.AccountStatus = AccountStatus;
        var tipStr = "";
        if (AccountStatus == 0) {
          tipStr = "启用";
        } else if (AccountStatus == 1) {
          tipStr = "禁用";

        } else if (AccountStatus == 2) {
          tipStr = "删除";
        }
        var that = this;
        this.Confirm("是否[" + tipStr + "]此账户?", function () {
          that.apipost("ShopGuest_post_SetGuestAccountStatusService", that.editMsg, res => {
            if (res.data.resultCode === 1) {
              that.editMsg.Id = 0;
              that.editMsg.AccountStatus = 0;
              that.getList();
            } else {
              that.Error(res.data.message);
            }
          }, null);
        });
      },
      GetAddressInfo(Id)
      {
        this.$router.push({ name: "GuestAddressList",query:{blank: 'y',Id:Id} })
      }
    }
  };
</script>