<template>
  <div class="app-container">
    <el-form :model="search" ref="queryForm" :inline="true" v-show="showSearch" label-width="100px">
      <el-form-item label="店铺名称">
        <el-input v-model="search.businessName" placeholder="请输入店铺名称" clearable size="small" style="width: 240px"
          @keyup.enter.native="handleQuery" />
      </el-form-item>
      <el-form-item label="法人姓名">
        <el-input v-model="search.legalName" placeholder="请输入法人姓名" clearable size="small" style="width: 240px"
          @keyup.enter.native="handleQuery" />
      </el-form-item>
      <el-form-item label="所属区域">
        <el-cascader v-model="search.areaTreaList" :options="areaTreaList"
          :props="{ expandTrigger: 'hover', checkStrictly: true }" placeholder="请选择省市区县"></el-cascader>
      </el-form-item>
      <el-form-item label="店铺分类">
        <el-select v-model="search.businessCategoryId" placeholder="请选择店铺分类" clearable size="small"
          style="width: 240px">
          <el-option v-for="item in businessTypeOptions" :key="item.code" :label="item.desc" :value="item.code" />
        </el-select>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>
    <el-row :gutter="10" class="mb8">
      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
    </el-row>
    <el-table :border="TableBorder" :size="ELTableSize" v-loading="loading" :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="scope">
          <div class="store-item">
            店铺名称：{{ scope.row.businessName || "--" }}
          </div>
          <div class="store-item">
            店铺所在区域：{{
              scope.row.provinceName +
              scope.row.cityName +
              (scope.row.areaName || "")
            }}
          </div>
          <div class="store-item">
            店铺地址：{{ scope.row.address || "--" }}
          </div>
          <div class="store-item">
            售后电话：{{ scope.row.customerServicePhone || "--" }}
          </div>
        </template>
      </el-table-column>
      <el-table-column label="主体信息" align="center" prop="cover">
        <template slot-scope="scope">
          <div class="store-item">
            企业名称：{{ scope.row.enterpriseName || "--" }}
          </div>
          <div class="store-item">
            统一信用代码：{{ scope.row.uscCode || "--" }}
          </div>
          <div class="store-item">
            法人姓名：{{ scope.row.phonenumber || "--" }}
          </div>
          <div class="store-item">
            法人手机号：{{ scope.row.customerServicePhone || "--" }}
          </div>
        </template>
      </el-table-column>
      <el-table-column label="店铺分类" align="center" prop="businessIdList"></el-table-column>
      <el-table-column label="入驻时间" align="center" prop="createTime" width="150"></el-table-column>
      <el-table-column label="代理收益" align="center" prop="agentIncome"></el-table-column>
    </el-table>
    <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
      @pagination="getList" />
  </div>
</template>
<script>
import getListApi from "@/mixins/getListApi";
import { agentBusinessPage } from "@/api/agentManage/agentList";
import { businessApplyBusinessType } from "@/api/shop";
export default {
  mixins: [getListApi],
  data() {
    return {
      listURL: agentBusinessPage,
      initializationShow: false,
      businessTypeOptions: [],
    };
  },
  created() {
    this.queryParams.agentId = this.$route.query.agentId;
    this.getList();
    this.getBusinessType();
    this.getCnAreaTree();
  },
  methods: {
    getBusinessType() {
      businessApplyBusinessType().then((res) => {
        // console.log(res);
        if (res.code == 200) {
          this.businessTypeOptions = res.data || [];
        }
      });
    },
  },
};
</script>
<style scoped lang="scss">
.store-item {
  text-align: center;
}
</style>
