<template>
  <div class="customer-wrap">
    <div class="content-box">
      <div class="form-box">
        <el-form ref="searchForm" :model="searchForm">
          <el-row>
            <el-col :span="5">
              <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 :span="5">
              <el-form-item label="证件号" prop="custIdc" label-width="80px" v-show="selectedTab == '1'">
                <el-input v-model="searchForm.custIdc" clearable @keyup.enter.native="handleSearch"
                  @clear="handleSearch" />
              </el-form-item>
            </el-col>
            <el-col :span="6" :offset="1" style="text-align: left">
              <el-button type="primary" @click="handleSearch">查询</el-button>
              <el-button @click="handleRest">重置</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" v-if="!isActive6">导出</el-button>
            <el-dropdown trigger="click" v-if="isActive6" class="active6Btn">
              <el-button type="primary" size="medium" style="height:36px">
                导出<i class="el-icon-arrow-down export_icon"></i>
              </el-button>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item @click.native="handleExportSelect"
                  :disabled="selectRows.length == 0">导出所选</el-dropdown-item>
                <el-dropdown-item @click.native="handleDownload">导出前1000条<i class="quesiton"></i></el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
        </div>
        <div class="remark" v-if="!isActive6">
            <span>
                统计日期：<span class="span-value">{{dt}}</span>
            </span>
            <span v-if="isActive1">
                镇/街道：<span class="span-value">{{town}}</span>
            </span>
            <span v-if="type == '1' && isActive1" class="span-value">
                村/社区：<span>{{village}}</span>
            </span>
            <span v-if="isActive4">
                区域类型：<span class="span-value">{{shapeType}}</span>
            </span>
            <span v-if="isActive4">
                区域名称：<span class="span-value">{{shapeName}}</span>
            </span>
            <span v-if="isActive3">
                网格名称：<span class="span-value">{{gridName}}</span>
            </span>
            <span v-if="isActive3">
                网格类型：<span class="span-value">{{gridType}}</span>
            </span>
        </div>
        <div class="main_table">
            <el-table ref="tableRef" :data="tableData" style="width: 100%" v-loading="Loading" @selection-change="handleSelectionChange">
              <el-table-column v-if="isActive6" type="selection" width="55"></el-table-column>
                <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 || 100"
                >
                <template slot-scope="scope">
                  <el-button
                    v-if="item.prop == 'custName' || item.prop == 'socialCreditCode' || item.prop == 'custIdc'"
                    type="text"
                    @click="openDialog(scope.row.custIdc || scope.row.socialCreditCode,scope.row.custType)"
                    class="special-btn">
                      {{scope.row[item.prop]}}
                   </el-button>
                   <span v-else>{{scope.row[item.prop]}}</span>
                </template>
                </el-table-column>
            </el-table>
            <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :page-sizes="[10, 20, 30, 40]"
                :page-size="pageSize"
                layout="->,total,prev,pager,next,sizes"
                :total="total"
                :current-page="pageNum"
            ></el-pagination>
        </div>
    </div>
  </div>
</template>
<script>
import {

  getColDetailList1, getColDetailList2, downloadLsCust, downloadGsCust,
  getColDetailListNm1, getColDetailListNm2, downloadLsCustNm, downloadGsCustNm,
  getColDetailListMap1, getColDetailListMap2, downloadLsCustMap, downloadGsCustMap,
  getColDetailListAll1, getColDetailListAll2, downloadLsCustAll, downloadGsCustAll,

} from "@/api/grid/performance/collect.js";
import { mapGetters } from "vuex";
import { cloneDeep, isEmpty } from "lodash";
import { Message } from "element-ui";
import {

  privateTotalColumns, publicTotalColumns,
  privateTotalColumnsNew825,
  privateTotalColumnsNm, publicTotalColumnsNm,
  privateTotalColumnsMap, publicTotalColumnsMap,
  privateTotalColumnsAll, publicTotalColumnsAll,

} from '../list/list'
import { downloadFiles } from "@/utils";

export default {
  components: {},
  data() {
    return {
      selectedTab: "1",
      Loading: false,
      tableData: [],
      total: 0,
      pageSize: 10,
      pageNum: 1,
      tableColumns: [],
      picktaskDateOption: {
        disabledDate(time) {
          return time.getTime() < Date.now() - 8.64e7;
        },
      },
      pickclaimDateOption: {
        disabledDate(time) {
          return time.getTime() < Date.now() - 8.64e7;
        },
      },
      searchForm: {
        custName: '',
        custIdc: ''
      },
      type: '',
      dt: '',
      town: '',
      village: '',
      regionCode: '',
      isActive1: true,
      isActive3: false,
      isActive4: false,
      gridName: "",
      gridType: "",
      gridId: '',
      shapeType: '',
      shapeName: '',
      shapeId: '',
      selectRows:[],
    };
  },

  computed: {
    ...mapGetters(["roles", "deptId"]),
    //对公
    isPublic() {
      return this.roles.includes("headPublic");
    },
    //对私
    isPrivate() {
      return this.roles.includes("headPrivate");
    },
    isRetailNew825Tenant() {
      return String(this.deptId || '').slice(0, 3) === '825';
    },
  },
  created() {
    const {
      type, dt, town, village, regionCode,
      gridName, gridType, gridId,
      isActive, shapeType, shapeName, shapeId
    } = this.$route.query;
    // console.log(this.$route.query)
    this.type = type;
    this.dt = dt;
    this.town = town;
    this.village = village;
    this.regionCode = regionCode;
    this.isActive1 = isActive == '1';
    this.isActive3 = isActive == '3';
    this.isActive4 = isActive == '4';
    this.isActive6 = isActive == '6';
    this.gridName = gridName;
    this.gridType = gridType;
    this.gridId = gridId;
    this.shapeType = shapeType;
    this.shapeName = shapeName;
    this.shapeId = shapeId;
    if (type == '1') {
      this.tableColumns = this.isActive1 ? (this.isRetailNew825Tenant ? privateTotalColumnsNew825 : privateTotalColumns) : this.isActive3 ?
        privateTotalColumnsNm : this.isActive4 ? privateTotalColumnsMap : privateTotalColumnsAll;
    }
    if (type == '2') {
      this.tableColumns = this.isActive1 ? publicTotalColumns : this.isActive3 ?
        publicTotalColumnsNm : this.isActive4 ? publicTotalColumnsMap : publicTotalColumnsAll;
    }
    this.init()
  },
  methods: {
    handleSelectionChange(val) {
      this.selectRows = val;
    },
    handleExportSelect() {
      const url = this.type == '1' ? '/ibs/GridUnionCount/exportLsCust' : '/ibs/GridUnionCount/exportGsCust';
      const name = this.type == '1' ? '零售整体业绩客户明细汇总':'公司整体业绩客户明细汇总';
      this.downloadPOST(
        `${url}`,
        this.selectRows,
        `${name}_${new Date().getTime()}.xlsx`,
        {},
        'post'
      )
      this.$refs.tableRef.clearSelection();
      this.selectRows=[];
    },

    // 跳转业务视图
    openDialog(custIdc, type) {
      const custId = type == '0' ? `101${custIdc}` : `202${custIdc}`
      if (type == '0') {
        this.$router.push({
          path: '/360charts/indexcharts',
          query: {
            custId
          }
        })
      } else if (type == '1') {
        this.$router.push({
          path: '/360charts/commercial/',
          query: {
            custId
          }
        })
      } else if (type == '2') {
        this.$router.push({
          path: '/360charts/firm/',
          query: {
            custId
          }
        })
      }

    },
    init() {
      this.Loading = true;
      const params = {
        ...this.searchForm,
        pageSize: this.pageSize,
        pageNum: this.pageNum,
        regionCode: this.regionCode,
        socialCreditCode: this.searchForm.custIdc,
        gridId: this.gridId,
        shapeId: this.shapeId,
        dt: this.dt
      };
      console.log(params, 'params')
      const Api = this.type == '1' ? (this.isActive1 ? getColDetailList1 : this.isActive3 ? getColDetailListNm1 : this.isActive4 ? getColDetailListMap1 : getColDetailListAll1) :
        (this.isActive1 ? getColDetailList2 : this.isActive3 ? getColDetailListNm2 : this.isActive4 ? getColDetailListMap2 : getColDetailListAll2);
      Api(params).then((res) => {
        if (res.code == "200") {
          this.tableData = res.rows;
          this.total = res.total;
          this.Loading = false;
        }
      });
    },
    handleChange(val) {
      this.searchForm = {};
      this.pageSize = 1;
      this.pageNum = 10;
      this.init();
    },
    handleRefersh() {
      this.searchQuery = "";
      this.init();
    },
    handleSizeChange(newSize) {
      this.pageSize = newSize;
      this.init();
    },
    handleCurrentChange(newPage) {
      this.pageNum = newPage;
      this.init();
    },
    handleSearch() {
      this.init();
    },

    handleRest() {
      this.searchForm = {}
      this.init()
    },

    handleDownload() {
      const { custName, custIdc } = this.searchForm;
      const Api = this.type == '1' ? (this.isActive1 ? downloadLsCust : this.isActive3 ? downloadLsCustNm : this.isActive4 ? downloadLsCustMap : downloadLsCustAll) :
        (this.isActive1 ? downloadGsCust : this.isActive3 ? downloadGsCustNm : this.isActive4 ? downloadGsCustMap : downloadGsCustAll);
      const name = this.type == '1' ? (this.isActive1 ? '零售行政区域客户明细汇总' : this.isActive3 ? '零售自定义名单客户明细汇总' : this.isActive4 ? '零售自定义地图客户明细汇总' : '零售整体业绩客户明细汇总') :
        (this.isActive1 ? '公司行政区域客户明细汇总' : this.isActive3 ? '公司自定义名单客户明细汇总' : this.isActive4 ? '公司自定义地图客户明细汇总' : '公司整体业绩客户明细汇总');
      Api({
        custName,
        custIdc,
        socialCreditCode: custIdc,
        regionCode: this.regionCode,
        gridId: this.gridId,
        shapeId: this.shapeId,
        dt: this.dt
      }).then(res => {
        downloadFiles(res, `${name}_${new Date().getTime()}.xlsx`)
      })
    },
    returnLastPage() {
      const { query } = this.$route;
      this.$router.replace({
        path: '/center/performance/list',
        query
      })
    },
  },
};
</script>
<style lang="scss" scoped>
.customer-wrap {
  background-color: #ffffff;
  //   padding: 0px 30px 100px 30px;
  overflow: hidden;
  //   border-radius: 16px 16px 0 0 ;
  box-shadow: 0 3px 8px 0 #00000017;

  .header-radio {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid #ebebeb;

    .btn-disabled {
      ::v-deep .el-radio-button__inner {
        background-color: #e7e7e7;
      }
    }

    .el-radio-button {
      flex: 1;

      ::v-deep .el-radio-button__inner {
        width: 100%;
        border: none;
        font-weight: 400;
        letter-spacing: 0.44px;
        line-height: 25px;
        font-size: 16px;
        color: #666666;
        padding: 11px 0 12px 0;
      }

      ::v-deep .el-radio-button__orig-radio:checked+.el-radio-button__inner {
        background-color: #4886f8;
        font-weight: 400;
        color: #ffffff;
        border-bottom-left-radius: 0;
        border-bottom-right-radius: 0;
      }

      //   &:nth-child(2) {
      //     &::before,
      //     &::after {
      //       content: "";
      //       position: absolute;
      //       top: 50%;
      //       transform: translateY(-50%);
      //       height: 21px;
      //       width: 1px;
      //       background: #ebebeb;
      //       z-index: 1;
      //     }

      //     &::after {
      //       right: 1px;
      //     }
      //   }

      &.is-active {

        &::before,
        &::after {
          content: none;
        }
      }
    }
  }
}

.taskTop {
  margin-top: 20px;
  display: flex;
  justify-content: space-between;
}

.taskTop_left {
  display: flex;
}

.taskTop_left_item {
  width: 150px;
  text-align: center;
  height: 40px;
  line-height: 40px;
  cursor: pointer;
}

.el-icon-arrow-down {
  margin-left: 15px;
  font-size: 16px;
  color: rgb(64, 149, 229);
}

.taskTop_right {
  display: flex;
}

.search {
  margin-right: 20px;
}

.active {
  border-bottom: 4px solid rgb(64, 149, 229);
}

.main_table {
  margin-top: 15px;
}

.operate-cnt {
  margin: 24px 0 16px 0;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;

  .top-right-btn {
    margin-right: 24px;
    padding-bottom: 6px;
  }

  .plain-raido-btn {
    ::v-deep .el-radio-button__inner {
      color: #666666;
      font-size: 14px;
      font-weight: 400;
      border: 1px solid #ebebeb;
      border-radius: 0;
    }

    ::v-deep .el-radio-button__orig-radio:checked+.el-radio-button__inner {
      border: 1px solid #4886f8;
      color: #4886f8;
      background-color: #ffffff;
      box-shadow: none;
    }
  }
}

::v-deep .el-pagination {
  margin-top: 15px;
}

.main {
  padding: 30px 30px 100px 30px;
  background-color: #fff;

  .main_top {
    display: flex;
    justify-content: space-between;
  }

  .fillInformation {
    margin-top: 20px;
  }

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

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

  .configRulesItem {
    display: flex;
    margin-bottom: 15px;
  }

  .yxjLabel {
    width: 20%;
  }

  .addIcon {
    font-size: 25px;
    line-height: 40px;
    margin-left: 10px;
  }

  .ruleIcon {
    width: 20%;
  }

  .kejlbox {
    display: flex;
    margin-top: 15px;
  }

  .kejlLabel {
    width: 20%;
    margin-right: 15px;
  }

  .item-group {
    position: relative;

    .createBtn {
      position: absolute;
      right: -130px;
      top: 0;

      p {
        color: #666;
        font-size: 12px;
      }
    }
  }

  .formItem {
    .add-btn {
      margin-top: 5px;
    }
  }
}

// .form-box{
//     margin-top: 25px;
// }
.content-box {
  padding: 24px 36px;
}

.remark {
  margin-top: 20px;

  span {
    font-weight: 400;
    font-size: 14px;
    color: #3d3d3d;
  }

  .span-value {
    display: inline-block;
    min-width: 50px;
    margin-right: 5px;
  }
}

.special-btn {
  width: 110%;
  overflow: hidden;
  text-overflow: ellipsis;
}
.export_icon{
  color: #fff;
}
.active6Btn{
  margin-left: 10px;
}

::v-deep .el-dropdown-menu__item {
  line-height: 45px;
}
.operate-btn{
  display: flex;
  align-items: center;
}
</style>
