<template>
  <div class="app-container">
    <div class="block">
      <el-row :gutter="20">
        <el-col :span="24">
          <el-row>
            <el-col :span="2" style=";margin-top:.8rem;">
              <span style="font-size:.7rem">审核状态：</span>
            </el-col>
            <el-col :span="30">
              <el-button :type="query.button.css.status.all" size="small"
                @click.native="queryByState('all')">全部</el-button>
              <el-button size="mini" :type="query.button.css.status.unPay" @click.native="queryByState('unchecked')">待审核
                &nbsp;<el-tag type="success" size="mini" /></el-button>
              <el-button size="mini" :type="query.button.css.status.sended"
                @click.native="queryByState('success')">审核成功&nbsp;<el-tag type="info" size="mini" /></el-button>
              <el-button size="mini" :type="query.button.css.status.cancel"
                @click.native="queryByState('failure')">审核失败&nbsp;<el-tag type="info" size="mini" /></el-button>

            </el-col>

          </el-row>

          <br>
        </el-col>

        <el-col :span="4">
          <el-input v-model="listQuery.serverId" size="mini" @keyup.enter.native="search" placeholder="输入家政人员Id" />
        </el-col>
        <el-col :span="6">
          <el-button type="success" plain size="mini" icon="el-icon-search" @click.native="search">搜索</el-button>
          <el-button type="primary" plain size="mini" icon="el-icon-refresh" @click.native="reset">重置</el-button>
        </el-col>
        <el-col><br></el-col>
      </el-row>
    </div>

    <el-table :data="filterTableData" style="width: 100%" v-if="this.total * 1">
      <el-table-column type="expand">
        <!-- 这里是展开的详细信息 -->
        <template #default="props">
          <el-row>
            <el-col :span="6">
              <h4>审核信息</h4>

              <p m="t-0 b-2">编号 : {{ props.row.id }}</p>
              <p m="t-0 b-2">审核状态 : {{ props.row.status }}</p>
              <p m="t-0 b-2">管理员备注 : {{ props.row.tips }}</p>
            </el-col>

            <el-col :span="6">
              <h4>状态详细信息</h4>
              <p m="t-0 b-2">家政分类 : {{ props.row.categoryName }}</p>
              <p m="t-0 b-2">聘请类别 : {{ props.row.serverType }}</p>
              <p m="t-0 b-2">上岗时间 : {{ props.row.workDate }}</p>
              <p m="t-0 b-2">是否住家 : {{ props.row.stay }}</p>
              <p m="t-0 b-2">服务地区 : {{ props.row.serverArea }}</p>
            </el-col>

            <el-col :span="6">
              <br>
              <br>
              <p m="t-0 b-2">家政人员账户名 : {{ props.row.serverName }}</p>
              <p m="t-0 b-2">家政人员昵称 : {{ props.row.serverNickName }}</p>
              <p m="t-0 b-2">家政人员手机号 : {{ props.row.phone }}</p>
              <p m="t-0 b-2">待遇 : {{ props.row.treatment }}</p>
              <p m="t-0 b-2">薪酬 : {{ props.row.salary }}</p>
            </el-col>
          </el-row>
        </template>
      </el-table-column>
      <el-table-column sortable label="编号" prop="serverId" />
      <el-table-column sortable label="家政人员账号名" prop="serverName" />
      <el-table-column sortable label="家政人员昵称" prop="serverNickName" />
      <el-table-column sortable label="家政分类" prop="categoryName" />
      <el-table-column sortable label="审核状态" prop="status" />
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-dropdown size="small" split-button type="primary">
            操作
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item v-if="scope.row.status == '待审核'"
                @click.native="handleServerId(scope.row.serverId, '1')">通过</el-dropdown-item>
              <el-dropdown-item v-if="scope.row.status == '待审核'"
                @click.native="handleServerId(scope.row.serverId, '2')">不通过</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </template>
      </el-table-column>

    </el-table>

    <el-dialog title="发送备注" :visible.sync="centerDialogVisible" width="50%" center>
      <el-form :model="form" label-width="200px">
        <el-row>
          <el-col :span="10">
            <el-form-item label="返回失败原因"></el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="10">
            <el-input v-model="form.tips" placeholder="请输入失败原因"></el-input>
          </el-col>
        </el-row>
      </el-form>

      <span slot="footer" class="dialog-footer">
        <el-button @click="cancel">取 消</el-button>
        <el-button type="primary" @click="confirmForm()">确 定</el-button>
      </span>
    </el-dialog>

    <nav v-if="total * 1" style="text-align: -webkit-center">
      <el-pagination  :total="total" :page-size="listQuery.limit"
        :current-page="listQuery.page" :page-sizes="pageSizes" layout="prev, pager, next" @size-change="handleSizeChange"
        @current-change="handleCurrentChange" />
    </nav>
  </div>
</template>

<script>
import { getListByCondition, getById, agree, disagree } from '@/api/serverCondition'
import { Message } from 'element-ui'
export default {
  name: 'order',
  data() {
    return {
      centerDialogVisible: false,
      filterTableData: [
        {
          id: '',
          serverName: '',
          serverNickName: '',
          serverType: '',
          categoryName: '',
          serverPhone: '',
          treatment: '',
          serverArea: '',
          salary: '',
          status: '',
          stay: '',
          workDate: '',
          tips: '',
        }
      ],
      form: {
        serverId: 1,
        tips: '',
      },
      listQuery: {
        page: 1,
        limit: 5,
        serverId: '',
        status: '全部',
      },
      pageSizes: [10, 20, 50, 100], // 分页下拉框选项
      total: 0,
      selRow: {},
      logVisible: false,
      logs: [],
      expressList: [],
      chosen: {
        all: '全部',
        unchecked: '待审核',
        success: '审核成功',
        failure: '审核失败'
      },
      query: {
        button: {
          lastStatus: 'all',
          lastDate: 'all',
          showCustomer: false,
          css: {
            status: {
              all: 'primary',
              unchecked: 'default',
              success: 'default',
              failure: 'default'
            },
          },
          tag: {
            unchecked: 0,
            success: 0,
            failure: 0
          }
        }
      }
    }
  },
  filters: {
    statusFilter(status) {
      const statusMap = {
        published: 'success',
        draft: 'gray',
        deleted: 'danger'
      }
      return statusMap[status]
    }
  },
  created() {
    this.init()
  },
  methods: {
    init() {
      this.fetchData()
    },
    // 渲染多条数据
    fetchData() {
      // 设置参数
      let data = {
        pageNum: this.listQuery.page,
        pageSize: this.listQuery.limit,
        status: this.listQuery.status
      }
      getListByCondition(data).then(response => {
        // 渲染列表
        if (response.data.code === 200) {
          console.log(response.data.data)
          this.filterTableData = response.data.data.rows
          this.total = parseInt(response.data.data.total);
          this.feachStatus()
          this.feachStay()
        }
      })
    },
    // 通过家政人员Id搜索
    search() {
      this.listQuery.page = 1
      getById(this.listQuery.serverId).then(response => {
        if (response.data.code === 200) {
          this.filterTableData = []
          this.filterTableData[0] = response.data.data
          this.feachStatus()
          this.feachStay()
          if (this.filterTableData.length !== 0 && response.data.code !== 500) {
            Message({
              message: response.data.msg,
              type: 'success',
              duration: 5 * 1000
            })
          } else if (response.data.code !== 500) {
            Message({
              message: '找不到该家政人员',
              type: 'warning',
              duration: 5 * 1000
            })
          }
        } else {
          Message({
            message: response.data.msg,
            type: 'error',
            duration: 5 * 1000
          })
        }
      })
    },
    reset() {
      this.listQuery.serverId = ''
      this.listQuery.status = '全部'
      this.listQuery.page = 1
      this.fetchData()
    },
    // 将后端数据格式进行转换
    feachStatus() {
      for (let i = 0; i < this.filterTableData.length; i++) {
        // 状态转换
        if (this.filterTableData[i].status === 4) {
          // 待审核
          this.filterTableData[i].status = '待审核'
        } else if (this.filterTableData[i].status === 0 || this.filterTableData[i].status === 1) {
          // 审核成功
          this.filterTableData[i].status = '审核成功'
        } else if (this.filterTableData[i].status === 5) {
          // 审核失败
          this.filterTableData[i].status = '审核失败'
        }
      }
    },
    feachStay() {
      for (let i = 0; i < this.filterTableData.length; i++) {
        if (this.filterTableData[i].stay === 1) {
          this.filterTableData[i].stay = '住家'
        } else if (this.filterTableData[i].stay === 2) {
          this.filterTableData[i].stay = '不住家'
        }
      }
    },
    // 获取该行的家政人员Id
    handleServerId(id, flag) {
      this.passAudit(id, flag)
    },
    // 审核是否通过
    passAudit(id, flag) {
      if (flag === '1') {
        agree(id).then(response => {
          if (response.data.code === 200) {
            this.init()
          }
        })
      }
      else if (flag === '2') {
        this.form.serverId = id
        this.centerDialogVisible = true
      }
    },
    // 确认发送备注
    confirmForm() {
      disagree(this.form).then(response => {
        if (response.data.code === 200) {
          this.init()
          this.centerDialogVisible = false
          this.form = {}
          Message({
            message: response.data.msg,
            type: 'success',
            duration: 5 * 1000
          })
        }
      })
    },
    cancel() {
      this.centerDialogVisible = false
      this.form = {}
    },
    queryByState(status) {
      const lastStatus = this.query.button.lastStatus
      this.query.button.css.status[lastStatus] = 'default'
      this.query.button.css.status[status] = 'primary'
      this.query.button.lastStatus = status
      this.listQuery.status = this.chosen[status]
      this.fetchData()
    },
    // 更换一页显示的数目
    handleSizeChange(val) {
      this.listQuery.limit = val
      this.init()
    },
    handleCurrentChange(val) {
      this.listQuery.page = val
      this.init()
    },
  }
}
</script>