<template>
  <div class="customer-wrap">
    <div class="content-box">
      <div class="form-box">
        <el-form ref="searchForm" :model="searchForm">
          <el-row>
            <el-col :span="6">
              <el-form-item label="客户名称" prop="custName" label-width="80px">
                <el-input
                  v-model="searchForm.custName"
                  clearable
                  @keyup.enter.native="handleSearch"
                  @clear="handleSearch"
                />
              </el-form-item>
            </el-col>
            <el-col v-if="selectedTab === '1'" :span="6">
              <el-form-item label="证件号" prop="custIdc" label-width="80px">
                <el-input
                  v-model="searchForm.custIdc"
                  clearable
                  @keyup.enter.native="handleSearch"
                  @clear="handleSearch"
                />
              </el-form-item>
            </el-col>
            <el-col v-else :span="6">
              <el-form-item label="统一信用码" prop="socialCreditCode" label-width="100px">
                <el-input
                  v-model="searchForm.socialCreditCode"
                  clearable
                  @keyup.enter.native="handleSearch"
                  @clear="handleSearch"
                />
              </el-form-item>
            </el-col>
            <el-col :span="5" :offset="1" style="text-align: left">
              <el-button type="primary" @click="handleSearch">查询</el-button>
              <el-button @click="handleReset">重置</el-button>
            </el-col>
          </el-row>
        </el-form>
      </div>

      <div class="operate-btn">
        <el-button @click="returnLastPage">返回上一级</el-button>
        <el-button type="primary" @click="handleDownload">导出</el-button>
      </div>

      <div class="remark">
        <span>统计日期：<span class="span-value">{{ dt }}</span></span>
        <span>客群名称：<span class="span-value">{{ groupName }}</span></span>
        <span>客群模式：<span class="span-value">{{ groupModeText }}</span></span>
      </div>

      <div class="main_table">
        <el-table v-loading="loading" :data="tableData" style="width: 100%">
          <el-table-column
            v-for="(item, index) in tableColumns"
            :key="index"
            align="center"
            :prop="item.prop"
            :label="item.label"
            show-overflow-tooltip
            :width="item.width || 120"
          >
            <template slot-scope="scope">
              <el-button
                v-if="item.prop === 'custName'"
                type="text"
                class="special-btn"
                @click="openCustomer(scope.row)"
              >
                {{ scope.row[item.prop] || '-' }}
              </el-button>
              <span v-else>{{ scope.row[item.prop] || '-' }}</span>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          :page-sizes="[10, 20, 30, 40]"
          :page-size="pageSize"
          layout="->,total,prev,pager,next,sizes"
          :total="total"
          :current-page="pageNum"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </div>
  </div>
</template>

<script>
import {
  getGroupPerformanceLsCustList,
  getGroupPerformanceGsCustList,
  exportGroupPerformanceLsCust,
  exportGroupPerformanceGsCust
} from '@/api/group/performance';
import { retailDetailColumns, publicDetailColumns, groupModeDict } from '../list/list';
import { downloadFiles } from '@/utils';

export default {
  name: 'GroupPerformanceCustom',
  data() {
    return {
      loading: false,
      tableData: [],
      total: 0,
      pageSize: 10,
      pageNum: 1,
      tableColumns: [],
      selectedTab: '1',
      dt: '',
      groupId: '',
      groupName: '',
      groupMode: '',
      searchForm: {
        custName: '',
        custIdc: '',
        socialCreditCode: ''
      }
    };
  },
  computed: {
    groupModeText() {
      return groupModeDict[this.groupMode] || '-';
    }
  },
  created() {
    const { type, dt, groupId, groupName, groupMode } = this.$route.query;
    this.selectedTab = type || '1';
    this.dt = dt || '';
    this.groupId = groupId || '';
    this.groupName = groupName || '';
    this.groupMode = groupMode || '';
    this.tableColumns = this.selectedTab === '1' ? retailDetailColumns : publicDetailColumns;
    this.getList();
  },
  methods: {
    getList() {
      this.loading = true;
      const api = this.selectedTab === '1' ? getGroupPerformanceLsCustList : getGroupPerformanceGsCustList;
      const params = {
        groupId: this.groupId,
        dt: this.dt,
        custName: this.searchForm.custName,
        custIdc: this.searchForm.custIdc,
        socialCreditCode: this.searchForm.socialCreditCode,
        pageNum: this.pageNum,
        pageSize: this.pageSize
      };
      api(params).then(res => {
        this.tableData = res.rows;
        this.total = res.total;
        this.loading = false;
      }).catch(() => {
        this.loading = false;
      });
    },
    handleSearch() {
      this.pageNum = 1;
      this.getList();
    },
    handleReset() {
      this.searchForm = {
        custName: '',
        custIdc: '',
        socialCreditCode: ''
      };
      this.pageNum = 1;
      this.getList();
    },
    handleSizeChange(size) {
      this.pageSize = size;
      this.getList();
    },
    handleCurrentChange(page) {
      this.pageNum = page;
      this.getList();
    },
    handleDownload() {
      const api = this.selectedTab === '1' ? exportGroupPerformanceLsCust : exportGroupPerformanceGsCust;
      const fileName = this.selectedTab === '1' ? '零售客群客户明细' : '公司客群客户明细';
      api({
        groupId: this.groupId,
        dt: this.dt,
        custName: this.searchForm.custName,
        custIdc: this.searchForm.custIdc,
        socialCreditCode: this.searchForm.socialCreditCode
      }).then(res => {
        downloadFiles(res, `${fileName}_${new Date().getTime()}.xlsx`);
      });
    },
    returnLastPage() {
      this.$router.replace({
        path: '/center/groupPerformance/list'
      });
    },
    openCustomer(row) {
      const custType = row.custType;
      let path = '';
      const rawId = this.selectedTab === '1' ? row.custIdc : row.socialCreditCode;
      const custId = rawId ? (custType === '0' ? `101${rawId}` : `202${rawId}`) : '';
      if (custType === '0') {
        path = '/360charts/indexcharts';
      } else if (custType === '1') {
        path = '/360charts/commercial/';
      } else if (custType === '2') {
        path = '/360charts/firm/';
      }
      if (!path || !custId) {
        return;
      }
      this.$router.push({
        path: path,
        query: {
          custId,
          selectedTab: custType,
          backUrl: '/center/groupPerformance/list'
        }
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.customer-wrap {
  background-color: #ffffff;
  overflow: hidden;
  box-shadow: 0 3px 8px 0 #00000017;
}

.content-box {
  padding: 20px 24px 24px;
}

.operate-btn {
  margin-bottom: 12px;

  .el-button + .el-button {
    margin-left: 12px;
  }
}

.remark {
  margin-bottom: 12px;
  color: #666666;

  span {
    display: inline-block;
    margin-right: 20px;
    margin-bottom: 8px;
  }

  .span-value {
    color: #333333;
    font-weight: 500;
  }
}

.main_table {
  margin-top: 15px;
}

::v-deep .el-input {
  width: 100%;
}

::v-deep .el-pagination {
  margin-top: 15px;
}
</style>
