<template>
  <div id="userInfo">
    <div class="userInfo-title">
      <p>用户</p>
    </div>
    <div style="margin-top: 15px;">
      <el-input
        placeholder="请输入手机号"
        v-model="searchContent"
        @keyup.enter.native="handleSearch"
        clearable
      >
      </el-input>
    </div>
    <el-table
      v-loading="loading"
      :data="userInfos"
      border
      style="width: 100%;"
      @expand-change="handleExpandChange"
    >
      <el-table-column type="expand">
        <template slot-scope="props">
          <el-form label-position="left" class="demo-table-expand">
            <el-form-item label="头像">
              <el-avatar
                shape="square"
                :size="100"
                :src="props.row.avatar"
              ></el-avatar>
            </el-form-item>
            <el-form-item label="昵称">
              <span>{{ props.row.nickname }}</span>
            </el-form-item>
            <el-form-item label="会员等级">
              <span>{{ levels[props.row.level] }}</span>
            </el-form-item>
            <el-form-item label="性别">
              <span>{{ props.row.sex }}</span>
            </el-form-item>
            <el-form-item label="电话">
              <span>{{ props.row.phone }}</span>
            </el-form-item>
            <el-form-item label="位置">
              <span>{{ props.row.province }}, {{ props.row.city }}</span>
            </el-form-item>
            <el-form-item label="积分">
              <span>{{ props.row.integral }}</span>
            </el-form-item>
            <el-form-item label="镜头信息" v-if="props.row.level > 0">
              <el-table :data="goods">
                <el-table-column prop="model_name" label="型号">
                </el-table-column>
                <el-table-column prop="serialNo" label="序列号">
                </el-table-column>
                <el-table-column prop="integral" label="积分">
                </el-table-column>
                <el-table-column prop="dupload" label="重复提交">
                  <template slot-scope="scope">
                    <i v-if="scope.row.dupload" class="el-icon-success"></i>
                    <i v-else class="el-icon-error"></i>
                  </template>
                </el-table-column>
                <el-table-column prop="distributor_name" label="经销商">
                </el-table-column>
                <el-table-column prop="created_at" label="绑定时间">
                </el-table-column>
              </el-table>
            </el-form-item>
            <el-form-item label="会员卡编号">
              <span>{{ props.row.membercardid }}</span>
            </el-form-item>
            <el-form-item label="用户卡号">
              <span>{{ props.row.memberusercardcode }}</span>
            </el-form-item>
          </el-form>
        </template>
      </el-table-column>
      <el-table-column prop="user_id" label="用户ID"> </el-table-column>
      <el-table-column prop="nickname" label="昵称"> </el-table-column>
      <el-table-column prop="level" label="会员等级">
        <template slot-scope="scope">
          <span>{{ levels[scope.row.level] }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="integral" label="积分">
        <template slot-scope="{ row }">
          <template v-if="row.edit">
            <el-input v-model="row.title" class="edit-input" size="small" />
            <el-button
              class="cancel-btn"
              size="small"
              icon="el-icon-refresh"
              type="warning"
              @click="cancelEdit(row)"
            >
              取消
            </el-button>
          </template>
          <span v-else>{{ row.integral }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="province" label="省份"> </el-table-column>
      <el-table-column prop="subscribe" label="是否关注公众号">
        <template slot-scope="scope">
          <i v-if="scope.row.subscribe" class="el-icon-success"></i>
          <i v-else class="el-icon-error"></i>
        </template>
      </el-table-column>
      <el-table-column prop="created_at" label="注册时间"> </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button
            size="mini"
            @click="handleEdit(scope.$index)"
            v-if="!isEditors[scope.$index]"
            >编辑</el-button
          >
          <el-button
            size="mini"
            @click="handleSave(scope.$index, scope.row)"
            v-else
            >保存</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      background
      @current-change="handleCurrentChange"
      layout="total, prev, pager, next"
      :page-size="20"
      :total="count"
      class="pagination"
    >
    </el-pagination>
  </div>
</template>

<script>
export default {
  data() {
    return {
      userInfos: [],
      goods: [],
      loading: false,
      count: 0,
      levels: [
        '影友',
        'LRC会员',
        '银卡会员',
        '金卡会员',
        '白金卡会员',
        '黑金卡会员'
      ],
      isEditors: [],
      searchContent: '',
      isEditor: false,
      currIndex: 0
    }
  },

  created() {
    var self = this
    this.$axios
      .post('admin/userinfo', {
        page: 1,
        num: 20
      })
      .then(function(response) {
        self.$nextTick(function() {
          self.userInfos = response.data.data.userinfos
          self.count = response.data.data.count
          self.isEditors = new Array(response.data.data.userinfos.length).fill(
            false
          )
        })
      })
  },

  methods: {
    handleCurrentChange(index) {
      this.currIndex = index
      var self = this
      this.$axios
        .post('admin/userinfo', {
          page: index,
          num: 20
        })
        .then(function(response) {
          self.$nextTick(function() {
            self.userInfos = response.data.data.userinfos
            self.count = response.data.data.count
            self.isEditors = new Array(
              response.data.data.userinfos.length
            ).fill(false)
          })
        })
    },

    handleExpandChange(userInfo, isExpand) {
      if (isExpand.length === 0) {
        return
      }
      var self = this
      this.$axios
        .post('admin/query_usergoods', {
          user_id: userInfo.user_id
        })
        .then(function(response) {
          self.$nextTick(function() {
            self.goods = response.data.data.logs
          })
        })
    },

    handleSearch(phone) {
      var self = this
      this.$axios
        .post('admin/query_userinfo', {
          phone: this.searchContent
        })
        .then(function(response) {
          self.$nextTick(function() {
            self.userInfos = response.data.data.userinfos
            self.count = response.data.data.userinfos.length
            self.isEditors = new Array(
              response.data.data.userinfos.length
            ).fill(false)
          })
        })
    },

    handleEdit(index) {
      this.$set(this.isEditors, index, true)
    },

    handleSave(index, row) {
      var self = this
      this.$set(this.isEditors, index, false)
      this.$axios
        .post('admin/userinfo_update', {
          user_id: row.user_id,
          integral: row.integral
        })
        .then(function(response) {
          self.handleCurrentChange(self.currIndex)
        })
    }
  }
}
</script>

<style lang="scss">
#consumer-table {
  min-width: 800px;
  padding: 5px 40px 20px 40px;
  margin-top: 30px;
  background-color: #fff;
  box-shadow: 0 1px 2px rgba(150, 150, 150, 0.3);

  .consumer-title {
    margin-bottom: 40px;

    p {
      float: left;
      font-size: 20px;
      line-height: 20px;
    }

    a {
      float: right;
    }
  }

  .pagination {
    margin: 40 auto;
  }
}
</style>