<template>
  <div>
    <div class="member-list">
      <!-- 筛选条件 -->
      <div class="screen-container">
        <div class="top clearfix">
          <div class="title fl">条件筛选</div>
        </div>
        <el-form
          ref="screenForm"
          :model="screenForm"
          label-width="100px"
          size="small"
          label-position="left"
        >
          <el-row :gutter="20">
            <el-col :xs="24" :sm="12" :lg="6">
              <el-form-item label="名称/电话" prop="keyword">
                <el-input
                  v-model="screenForm.keyword"
                  placeholder="请输入名称/电话"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :xs="24" :sm="12" :lg="6">
              <el-form-item label="状态" prop="status">
                <el-select
                  v-model="screenForm.status"
                  placeholder="状态"
                  clearable
                >
                  <el-option label="待审核" value="WAIT"></el-option>
                  <el-option label="通过" value="OK"></el-option>
                  <el-option label="拒绝" value="FAIL"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :xs="24" :sm="12" :lg="6" class="tr">
              <el-form-item label="">
                <el-button size="small" @click="resetScreenForm"
                  >清空</el-button
                >
                <el-button size="small" type="primary" @click="submitScreenForm"
                  >搜索</el-button
                >
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>

      <div class="mymain-container">
        <div class="table">
          <el-table
            v-loading="listLoading"
            :data="dataList"
            element-loading-text="Loading"
            border
            fit
            highlight-current-row
            stripe
          >
            <el-table-column align="center" label="头像" prop="avatar">
              <template slot-scope="scope">
                <div class="demo-image__preview">
                  <el-image
                    v-if="
                      scope.row.avatar &&
                      (scope.row.avatar || '').indexOf('http') >= 0
                    "
                    style="width: 40px; height: 40px"
                    :src="$showImgUrl(scope.row.avatar)"
                    :preview-src-list="[$showImgUrl(scope.row.avatar)]"
                  >
                    <div slot="error" class="image-slot">
                      <i class="el-icon-picture-outline"></i>
                    </div>
                  </el-image>
                  <el-image
                    v-else
                    style="width: 40px; height: 40px"
                    :src="$imageUrl + scope.row.avatar"
                    :preview-src-list="[$imageUrl + scope.row.avatar]"
                  >
                    <div slot="error" class="image-slot">
                      <i class="el-icon-picture-outline"></i>
                    </div>
                  </el-image>
                </div>
              </template>
            </el-table-column>

            <el-table-column
              align="center"
              label="昵称"
              prop="nickName"
              min-width="140"
              show-overflow-tooltip
            ></el-table-column>
            <el-table-column
              align="center"
              label="电话"
              prop="mobile"
              min-width="120"
            ></el-table-column>

            <el-table-column align="center" label="状态" prop="status">
              <template slot-scope="scope">
                <div>
                  {{
                    { WAIT: "待审核", OK: "通过", FAIL: "拒绝" }[
                      scope.row.status
                    ]
                  }}
                </div>
              </template>
            </el-table-column>

            <el-table-column
              align="center"
              label="创建时间"
              prop="createTime"
              min-width="160"
            ></el-table-column>
            <el-table-column
              align="center"
              label="操作"
              fixed="right"
              min-width="200"
            >
              <template slot-scope="{ row }">
                <el-popconfirm
                  v-if="row.status == 'WAIT'"
                  style="margin-left: 10px"
                  title="确定通过？"
                  @confirm="changeStatus(row, true)"
                >
                  <el-button slot="reference" type="text" style="color: #67c23a"
                    >通过</el-button
                  >
                </el-popconfirm>
                <el-popconfirm
                  v-if="row.status == 'WAIT'"
                  style="margin-left: 10px"
                  title="确定拒绝？"
                  @confirm="changeStatus(row, false)"
                >
                  <el-button slot="reference" type="text" style="color: red"
                    >拒绝</el-button
                  >
                </el-popconfirm>
              </template>
            </el-table-column>
          </el-table>
        </div>

        <div class="pagination clearfix">
          <div class="fr">
            <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="currentPage"
              :page-sizes="[10, 20, 30, 50]"
              :page-size="10"
              layout="total, sizes, prev, pager, next, jumper"
              :total="listTotal"
            >
            </el-pagination>
          </div>
        </div>
      </div>
    </div>
    <el-dialog title="审核通过" :visible.sync="dialogFormVisible" width="500px">
      <el-form ref="teshudebd" :model="form" size="mini">
        <el-form-item
          label="姓名"
          prop="workName"
          :rules="[{ required: true, message: '请输入', trigger: 'blur' }]"
        >
          <el-input v-model="form.workName"></el-input>
        </el-form-item>
        <el-form-item
          label="账号"
          prop="workUserId"
          :rules="[{ required: true, message: '请输入', trigger: 'blur' }]"
        >
          <el-input v-model="form.workUserId"></el-input>
        </el-form-item>
        <el-form-item
          label="职务"
          prop="position"
          :rules="[{ required: true, message: '请输入', trigger: 'blur' }]"
        >
          <el-input v-model="form.position"></el-input>
        </el-form-item>
        <el-form-item
          label="手机"
          prop="mobile"
          :rules="[{ required: true, message: '请输入', trigger: 'blur' }]"
        >
          <el-input v-model="form.mobile"></el-input>
        </el-form-item>
        <el-form-item label="网点编号" prop="websitId" :rules="[]">
          <el-input v-model="form.websitId"></el-input>
        </el-form-item>
        <el-form-item label="网点名称" prop="websitName" :rules="[]">
          <el-input v-model="form.websitName"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button size="mini" @click="dialogFormVisible = false"
          >取 消</el-button
        >
        <el-button size="mini" type="primary" @click="quedingtongguo"
          >确 定</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { memberApplyPage, memberExamineApply } from "@/api/member";
export default {
  components: {},
  data() {
    return {
      dialogFormVisible: false,
      form: {
        workUserId: "",
        workName: "",
        position: "",
        mobile: "",
        websitId: "",
        websitName: "",
      },
      baseURL: process.env.VUE_APP_BASE_API,
      dataList: null, // 列表数据
      listLoading: true, // 列表加载loading
      screenForm: {
        keyword: "",
        status: "",
      },
      currentPage: 1, // 当前页码
      pageSize: 10, // 每页数量
      listTotal: 0, // 列表总数
    };
  },
  created() {
    this.getList();
  },
  methods: {
    getList() {
      this.listLoading = true;

      let params = {
        keyword: this.screenForm.keyword,
        pageNum: this.currentPage,
        pageSize: this.pageSize,
      };

      memberApplyPage(params).then((res) => {
        this.dataList = res.data.records;
        this.listTotal = res.data.total;
        this.listLoading = false;
      });
    },
    // 提交筛选表单
    submitScreenForm() {
      this.currentPage = 1;
      this.getList();
    },
    // 重置筛选表单
    resetScreenForm() {
      this.$refs.screenForm.resetFields();
      this.currentPage = 1;
      this.getList();
    },

    // 更改每页数量
    handleSizeChange(val) {
      this.pageSize = val;
      this.currentPage = 1;
      this.getList();
    },

    // 更改当前页
    handleCurrentChange(val) {
      this.currentPage = val;
      this.getList();
    },

    // 操作
    changeStatus(row, type) {
      if (!type) {
        memberExamineApply({
          id: row.id,
          isOK: type,
        }).then(() => {
          this.getList();
          this.$successMsg();
        });
      } else {
        this.teshudeduixiang = { ...row };
        this.dialogFormVisible = true;
        this.form = {
          workUserId: "",
          workName: "",
          position: "",
          mobile: "",
          websitId: "",
          websitName: "",
        };
      }
    },
    quedingtongguo() {
      this.$refs.teshudebd.validate((valid) => {
        if (valid) {
          memberExamineApply({
            id: this.teshudeduixiang.id,
            isOK: true,
            ...this.form,
          }).then(() => {
            this.dialogFormVisible = false;
            this.form = {
              workUserId: "",
              workName: "",
              position: "",
              mobile: "",
              websitId: "",
              websitName: "",
            };
            this.getList();
            this.$successMsg();
          });
        } else {
          return false;
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.el-image-viewer__wrapper .el-icon-circle-close {
  color: #ffffff !important;
  font-size: 60px;
}
.table ::v-deep .el-button {
  padding: 6px 0;
}
</style>
