<template>
  <div class="apply_page">
    <div class="content">
      <el-tabs
        v-model="formParams.model.auditState"
        @tab-click="selectItem"
      >
        <el-tab-pane
          v-for="(item, index) in tabList"
          :key="index"
          :label="item.name"
          :name="item.id"
        />
      </el-tabs>
      <div class="toolbar">
        <el-form
          :inline="true"
          :model="formParams"
        >
          <el-form-item label="商家名称">
            <el-input v-model="formParams.model.merchantName" size="mini" />
          </el-form-item>

          <el-form-item label="注册手机号">
            <el-input v-model="formParams.model.headMobile" size="mini" />
          </el-form-item>

          <el-form-item label="店铺类型">
            <el-select
              v-model="formParams.model.organizationType"
              size="mini"
            >
              <el-option
                v-for="(item, index) in typeList"
                :key="index"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>

          <el-form-item label="申请时间">
            <el-date-picker
              v-model="date"
              size="mini"
              type="daterange"
              range-separator="至"
              start-placeholder="开始时间"
              end-placeholder="结束时间"
              value-format="yyyy-MM-dd"
              @change="handleChange"
            />
          </el-form-item>

          <el-form-item>
            <el-button
              type="primary"
              size="mini"
              @click="query"
            >
              查询
            </el-button>
            <el-button
              plain
              size="mini"
              @click="reset"
            >
              重置
            </el-button>
          </el-form-item>
        </el-form>
      </div>

      <div class="content_table">
        <div class="table">
          <el-table
            :data="tableData.records"
            border
            style="width: 100%"
          >
            <el-table-column
              prop="merchantName"
              label="商家名称"
            />
            <el-table-column
              prop="organizationType"
              :formatter="getType"
              label="店铺类型"
            />
            <el-table-column
              prop="headMobile"
              label="注册手机号"
            />
            <el-table-column
              prop="applyTime"
              label="申请时间"
            />
            <el-table-column label="操作">
              <template
                slot-scope="scope"
              >
                <el-button
                  v-if="scope.row.auditState===1"
                  type="text"
                  size="small"
                  @click.native.prevent="handle(scope.row)"
                >
                  处理
                </el-button>
                <el-button
                  v-if="scope.row.auditState===2 || scope.row.auditState===3"
                  type="text"
                  size="small"
                  @click.native.prevent="handle(scope.row)"
                >
                  详情
                </el-button>
                <el-button
                  v-if="scope.row.auditState===3"
                  type="text"
                  size="small"
                  @click.native.prevent="deletes(scope.row.id)"
                >
                  删除
                </el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <pagination
          v-show="tableData.total > 0"
          :limit.sync="formParams.size"
          :page.sync="formParams.current"
          :total="Number(tableData.total)"
          @pagination="query"
        />
      </div>
    </div>
    <deletes :dialog-visible="dialogVisible" @confirm="confirm" @closed="closed" />
  </div>
</template>

<script>
import Pagination from '@/components/Pagination'
import Apply from '@/api/Apply'
import deletes from './deletes'
export default {
  components: {
    Pagination,
    deletes
  },
  data() {
    return {
      formParams: {
        current: 1,
        size: 10,
        map: {},
        order: 'descending',
        sort: 'id',
        model: {
          merchantName: '', // 商家名称
          headMobile: '',
          organizationType: '',
          applyTimeStart: '', // 申请时间(结束)
          applyTimeEnd: '', // 申请时间(结束)
          auditState: '1'
        }
      },
      activeName: 1,
      date: [],
      dialogVisible: {},
      typeList: [
        { label: '全部', value: '' },
        { label: '个人', value: 1 },
        { label: '个体工商户', value: 2 },
        { label: '企业', value: 3 },
        { label: '其他组织', value: 4 }
      ],
      tableData: {},
      tabList: [
        { name: '待处理', id: '1' },
        { name: '已通过', id: '2' },
        { name: '已拒绝', id: '3' }
      ]
    }
  },
  created() {
    this.getList()
  },
  methods: {
    async getList() {
      const res = await Apply.getList(this.formParams)
      const resData = res.data
      if (resData.code === 0) {
        this.tableData = resData.data
      }
    },
    selectItem() {
      this.getList()
    },
    query() {
      this.getList()
    },
    reset() {
      this.formParams = {
        current: 1,
        size: 10,
        map: {},
        order: 'descending',
        sort: 'id',
        model: {
          auditState: '1',
          merchantName: '', // 商家名称
          headMobile: '',
          organizationType: '',
          applyTimeStart: '', // 申请时间(结束)
          applyTimeEnd: ''// 申请时间(结束)
        }
      }
      this.date = []
    },
    handleChange(value) {
      this.formParams.model.applyTimeStart = (value && value[0]) || ''
      this.formParams.model.applyTimeEnd = (value && value[1]) || ''
    },
    getType(row, item, value) {
      let t = ''
      this.typeList.forEach(item => {
        if (item.value === Number(value) ) {
          t = item.label
        }
      })
      return t
    },
    details(item) {
      this.$router.push({ path: '/apply/detail', query: {
        info: item,
        id: item.id,
        type: Number(this.formParams.model.auditState)
      }})
    },
    handle(item) {
      this.$router.push({ path: '/apply/detail', query: {
        info: item,
        id: item.id,
        type: Number(this.formParams.model.auditState)
      }})
    },
    deletes(id) {
      this.dialogVisible = {
        title: '删除',
        visible: true,
        id: id
      }
    },
    closed() {
      this.dialogVisible = {}
    },
    async confirm(v) {
      const res = await Apply.deleteApply({ id: this.dialogVisible.id })
      const resData = res.data
      if (resData.code === 0) {
        this.$message({
          type: 'success',
          message: '删除成功'
        })
        this.getList()
      } else {
        this.$message.error(resData.msg)
      }
      this.closed()
    }
  }
}
</script>

<style lang='less' scoped>
.apply_page {
    padding: 10px 20px;
    box-sizing: border-box;
    .content {
        background-color: #fff;
        padding: 20px;
        // .toolbar {
        //     padding: 10px;
        // }
    }
}

/deep/ .el-table {
  th {
      background: #EEF3FF;
      color:#333333;
      font-size:16px;
      font-weight: 400;
      border-color: #E0E5EB;
      text-align: center;
  }
  td {
    font-size: 14px;
    text-align: center;
    color: #666666;
  }
}
</style>
