<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" :size="ELsize" label-width="auto">
      <el-form-item label="店铺名称" prop="businessName">
        <el-input v-model="queryParams.businessName" placeholder="请输入商家名称" clearable
          @keyup.enter.native="handleQuery" />
      </el-form-item>
      <el-form-item label="法人姓名" prop="legalName">
        <el-input v-model="queryParams.legalName" placeholder="请输入" clearable @keyup.enter.native="handleQuery" />
      </el-form-item>
      <el-form-item label="店铺分类" prop="businessType">
        <el-select v-model="queryParams.businessType" placeholder="请选择" clearable>
          <el-option v-for="(v, i) in ShopTypeOption" :key="i" :label="v.label" :value="v.value" />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" @click="resetQuery('queryForm')">重置</el-button>
      </el-form-item>
    </el-form>

    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-radio-group v-model="AuditType" :size="ELsize">
          <el-radio-button label="AwaitAudit">待审核</el-radio-button>
          <el-radio-button label="AuditRecord">审核记录</el-radio-button>
        </el-radio-group>
      </el-col>

      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
    </el-row>

    <el-table v-loading="loading" :border="TableBorder" :size="ELTableSize" :data="dataList">
      <el-table-column type="index" width="55" label="序号" align="center">
        <template slot-scope="{$index}">
          {{ $getTableIndex(queryParams, $index + 1) }}
        </template>
      </el-table-column>
      <el-table-column label="店铺信息" align="center" prop="businessName">
        <template slot-scope="{row}">
          <div>
            <p class="table-p">店铺名称：{{ row.businessName | TableItemEmpty }}</p>
            <p class="table-p">店铺所在区域：{{ joint(row, ['provinceName', 'cityName', 'areaName']) | TableItemEmpty
            }}</p>
            <p class="table-p">店铺地址：{{ row.address }}</p>
            <p class="table-p">客服电话：{{ row.customerServicePhone }}</p>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="主体信息" align="center" prop="enterpriseName">
        <template slot-scope="{row}">
          <div>
            <p class="table-p">企业名称：{{ row.enterpriseName }}</p>
            <p class="table-p">统一信用代码：{{ row.uscCode }}</p>
            <p class="table-p">法人姓名：{{ row.legalName }}</p>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="店铺类型" align="center" width="150">
        <template slot-scope="{row}">
          {{ row.businessType | ShopTypeOptionFilter | TableItemEmpty }}
        </template>
      </el-table-column>
      <el-table-column label="申请时间" align="center" width="100">
        <template slot-scope="{row}">
          {{ row.createTime | TableItemEmpty }}
        </template>
      </el-table-column>
      <el-table-column label="状态" align="center" prop="auditStatus" width="120">
        <template slot-scope="{row}">
          <StatusTag :status-vo="row.auditStatus | AuditStatusOptionFilter(true)" />
        </template>
      </el-table-column>


      <el-table-column label="操作" align="center" width="120">
        <template slot-scope="{row}">
          <el-button :size="ELTableSize" v-if="row.auditStatus === AuditStatusEnum.AUDIT_PENDING" type="text"
            @click="handleUpdate(row, 'check', '审核')">审核</el-button>
          <el-button :size="ELTableSize" v-else type="text" @click="handleUpdate(row, 'show', '查看')">查看</el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
      @pagination="getList" />

    <!-- 审核详情弹窗 -->
    <AuditDetails ref="auditDetailsRef" @success="getList" />
  </div>
</template>

<script>
import { businessApplyWaitPage, getBusinessAuditPageApi } from "@/api/shop.js";
import { ShopTypeOption, AuditStatusOption, AuditStatusEnum } from "@/utils/statusEnum.js";
import getListApi from "@/mixins/getListApi.js";
import AuditDetails from "@/views/shop/components/AuditDetails.vue"
export default {
  mixins: [getListApi],
  components: { AuditDetails },
  data() {
    return {
      ShopTypeOption,
      AuditStatusOption,
      AuditStatusEnum,
      AuditType: "AwaitAudit",
      AuditTypeOption: [
        {
          label: "待审核",
          value: "AwaitAudit",
          pageUrl: businessApplyWaitPage
        },
        {
          label: "审核记录",
          value: "AuditRecord",
          pageUrl: getBusinessAuditPageApi
        }
      ],
      // -----------------------------------
      showSearch: true,
      listURL: null,
      initializationShow: false,
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        businessName: undefined,
        businessType: undefined,
        legalName: undefined
      },
    }
  },
  created() {

  },
  watch: {
    AuditType: {
      handler(newVal, oldVal) {
        this.listURL = this.AuditTypeOption.find(item => item.value == newVal).pageUrl
        this.handleQuery()
      },
      immediate: true
    }
  },
  methods: {
    joint(row, fields) {
      let str = ''
      fields.forEach(field => {
        str += row[field] || ''
      })
      return str
    },

    handleAdd() {
      this.$router.push({
        path: '/shop/details'
      })
    },
    handleUpdate(row, type, title) {
      this.$refs.auditDetailsRef.openHandle({
        businessAuditId: row.businessAuditId,
        type: type
      }, title)
      // this.$router.push({
      //   path: '/shop/details',
      //   query: {
      //     businessAuditId: row.businessAuditId,
      //     type: type
      //   }
      // })
    },

  }
}
</script>
