<template>
  <div style="padding: 20px;">
    <!-- 搜索 -->
    <div style="padding: 0 0 10px;">
      <el-button type="primary" size="mini" plain @click="handleSearch">查询</el-button>
      <el-button type="info" size="mini" plain @click="handleClear">重置</el-button>
    </div>
    <!-- 表格 -->
    <div>
      <el-table
        ref="multipleTable" :data="tableData" border
        :header-cell-style="{ background: '#EEF3FF', color: '#333333' }" tooltip-effect="dark" style="width: 100%"
      >
        <el-table-column align="center" prop="applyId" label="申请ID" />
        <el-table-column align="center" prop="relationshipLevelId" label="平台关系等级ID" />
        <el-table-column align="center" prop="checkState" label="入驻处理状态" />
        <el-table-column align="center" width="120" prop="levelType" label="会员类型">
          <template slot-scope="{ row }">
            <el-tag v-if="row.levelType === 5" type="success" effect="plain">区代理</el-tag>
            <el-tag v-else-if="row.levelType === 4" type="success" effect="plain">加盟商</el-tag>
            <el-tag v-else-if="row.levelType === 3" effect="plain">合伙人</el-tag>
            <el-tag v-else-if="row.levelType === 2" effect="plain">团长</el-tag>
            <el-tag v-else-if="row.levelType === 1" type="info" effect="plain">会员</el-tag>
            <div v-else>--</div>
          </template>
        </el-table-column>
        <el-table-column align="center" label="操作" show-overflow-tooltip>
          <template slot-scope="scope">
            <div>
              <el-button type="text" @click="handleExamine(scope.row)">审核</el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>
      <div>
        <el-pagination
          :current-page="currentPage" :page-sizes="[10, 20, 50, 100]" :page-size="10"
          layout="total, sizes, prev, pager, next, jumper" :total="total" @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </div>

    <!-- 申请审核表单 -->
    <el-dialog
      title="申请审核" :visible.sync="dialogFormVisible" width="800px" center
      :close-on-click-modal="false"
    >
      <div>
        <el-form ref="formData" :model="formData" label-width="140px" :rules="rules">
          <el-form-item label="是否通过" prop="checkState">
            <el-radio-group v-model="formData.checkState">
              <el-radio :label="1">是</el-radio>
              <el-radio :label="0">否</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="confirmExamine">确定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
// 加盟商和区域代理有审核。团长要达到产品购买数，就自动审核通过
import {
  selectListPlatformRelationshipApply,
  savePlatformRelationshipApply
} from '@/api/relationshipChainManagement/applicationLeview'
export default {
  name: 'ApplicationLeview',
  data() {
    return {
      listQuery: {
        page: 1,
        pageSize: 10
      },
      total: 1,
      tableData: [],
      currentPage: 1,
      formData: {
        applyId: '',
        relationshipLevelId: '',
        checkState: '',
        levelType: ''
      },
      dialogFormVisible: false,
      rules: {
        checkState: [ { required: true, message: '请选择是否通过', trigger: 'blur' } ]
      }
    }
  },
  mounted() {
    this.getList()
  },
  methods: {
    // 初始化查询所有数据
    async getList() {
      const res = await selectListPlatformRelationshipApply(this.listQuery)
      this.tableData = res.data.list
      this.total = res.data.total
    },
    handleSizeChange(val) {
      this.listQuery.pageSize = val
      this.getList()
    },
    handleCurrentChange(val) {
      this.listQuery.page = val
      this.getList()
    },
    // 查询
    handleSearch() {
      this.total = 1
      this.listQuery.page = 1
      this.getList()
    },
    // 清除
    handleClear() {
      this.listQuery = {
        page: 1,
        pageSize: 10
      }
      this.getList()
    },
    resetForm() {
      this.formData = {
        applyId: '',
        relationshipLevelId: '',
        checkState: '',
        levelType: ''
      }
    },
    // 编辑平台关系等级
    handleExamine(row) {
      this.resetForm()
      this.formData = Object.assign(this.formData, {
        applyId: row.applyId || '',
        relationshipLevelId: row.relationshipLevelId || '',
        levelType: row.levelType || '',
        checkState: ''
      })
      this.dialogFormVisible = true
    },
    confirmExamine() {
      this.$refs.formData.validate((valid) => {
        if (valid) {
          savePlatformRelationshipApply(this.formData)
            .then(() => {
              this.dialogFormVisible = false
              this.$message.success({
                title: '成功',
                message: '操作成功'
              })
              this.getList()
            })
            .catch((response) => {
              this.$message.error({
                title: '失败',
                message: response.data.errmsg
              })
            })
        }
      })
    }
  }
}
</script>

<style lang='less' scoped>
@import url("../../../styles/elDialog.scss");
</style>
