<template>
  <div>
    <a-card size="small" :bordered="false" class="searchBoxNormal">
      <a-spin :spinning="spinning" tip="Loading...">
        <!-- 搜索条件 -->
        <div class="table-page-search-wrapper" ref="tableSearch">
          <a-form-model
            id="allocationPresentationList-form"
            ref="ruleForm"
            class="form-model-con"
            layout="inline"
            :model="queryParam"
            :rules="rules"
            @keyup.enter.native="handleSearch">
            <a-row :gutter="15">
              <a-col :md="6" :sm="24">
                <a-form-model-item label="调拨日期" prop="time">
                  <rangeDate ref="rangeDate" id="allocationPresentationList-time" :value="queryParam.time" @change="dateChange" />
                </a-form-model-item>
              </a-col>
              <a-col :md="6" :sm="24">
                <a-form-model-item label="调拨单号">
                  <a-input id="allocationPresentationList-allocateNo" v-model.trim="queryParam.allocateNo" allowClear placeholder="请输入调拨单号"/>
                </a-form-model-item>
              </a-col>
              <a-col :md="6" :sm="24">
                <a-form-model-item label="客户名称">
                  <a-input id="allocationPresentationList-targetName" v-model.trim="queryParam.targetName" allowClear placeholder="请输入客户名称"/>
                </a-form-model-item>
              </a-col>
              <template v-if="advanced">
                <a-col :md="6" :sm="24">
                  <a-form-model-item label="客户级别">
                    <v-select
                      v-model="queryParam.dealer.dealerLevel"
                      ref="dealerLevel"
                      id="allocationPresentationList-dealerLevel"
                      code="DEALER_LEVEL"
                      placeholder="请选择客户级别"
                      allowClear></v-select>
                  </a-form-model-item>
                </a-col>
                <a-col :md="6" :sm="24">
                  <a-form-model-item label="所在区域">
                    <subarea id="allocationPresentationList-subareaSn" ref="subarea" @change="subareaChange"></subarea>
                  </a-form-model-item>
                </a-col>
                <a-col :md="6" :sm="24">
                  <a-form-model-item label="地区">
                    <AreaList id="allocationPresentationList-areaList" changeOnSelect ref="areaList" @change="areaChange" defValKey="id"></AreaList>
                  </a-form-model-item>
                </a-col>
                <a-col :md="6" :sm="24">
                  <a-form-model-item label="新/老客户">
                    <a-select id="allocationPresentationList-dealerNewFlag" v-model="queryParam.dealerNewFlag" placeholder="请选择" allowClear>
                      <a-select-option value="1">新客户</a-select-option>
                      <a-select-option value="0">老客户</a-select-option>
                    </a-select>
                  </a-form-model-item>
                </a-col>
              </template>
              <a-col :md="6" :sm="24">
                <a-button type="primary" @click="handleSearch" :disabled="disabled" id="allocationPresentationList-refresh">查询</a-button>
                <a-button style="margin-left: 5px" @click="resetSearchForm" :disabled="disabled" id="allocationPresentationList-reset">重置</a-button>
                <a-button
                  style="margin-left: 5px"
                  type="primary"
                  class="button-warning"
                  @click="handleExport"
                  :disabled="disabled"
                  :loading="exportLoading"
                  v-if="$hasPermissions('B_allocationPresentationExport')"
                  id="allocationPresentationList-export">导出</a-button>
                <a @click="advanced=!advanced" style="margin-left: 5px">
                  {{ advanced ? '收起' : '展开' }}
                  <a-icon :type="advanced ? 'up' : 'down'"/>
                </a>
              </a-col>
            </a-row>
          </a-form-model>
        </div>
      </a-spin>
    </a-card>
    <a-tabs :tabBarStyle="{'background':'#fff'}">
      <a-tab-pane key="1" tab="费用/调拨类型列表">
        <a-card size="small" :bordered="false" class="allocationPresentationList-wrap" :style="{'margin-top':'-16px'}">
          <!-- 列表 -->
          <s-table
            class="sTable fixPagination"
            ref="table"
            size="small"
            :defaultLoadData="false"
            :rowKey="(record) => record.no"
            :pageSize="30"
            rowKeyName="no"
            :columns="columns"
            :data="loadData"
            :style="{ height: tableHeight+84.5+'px' }"
            :scroll="{ x: 680 + tableWidth,y: tableHeight-40}"
            bordered>
          </s-table>
        </a-card>
      </a-tab-pane>
      <a-tab-pane key="2" tab="费用/调拨类型合计" force-render>
        <a-card size="small" :bordered="false" class="allocationPresentationList-wrap" :style="{'height':tableHeight*1+110*1+'px',overflow:'auto','margin-top':'-16px'}">
          <div class="h-title">
            <div><div>费用类型</div></div>
            <div><div>调拨类别</div></div>
            <div><div>调拨类型</div></div>
          </div>
          <div class="leve1" v-for="item in totalData" :key="item.name">
            <div>
              <div>
                {{ item.name }}
              </div>
              <div>
                {{ item.cost }}
              </div>
            </div>
            <div>
              <!-- 二级 -->
              <div class="leve2" v-for="item2 in item.treeList" :key="item2.name">
                <div>
                  <div>
                    {{ item2.name }}
                  </div>
                  <div>
                    {{ item2.cost }}
                  </div>
                </div>
                <div>
                  <!-- 三级 -->
                  <div class="leve3" v-for="item3 in item2.treeList" :key="item3.name">
                    <div>
                      <div>
                        {{ item3.name }}
                      </div>
                      <div>
                        {{ item3.cost }}
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div v-if="!totalData" style="text-align: center;padding:100px 0;">暂无合计数据</div>
        </a-card>
      </a-tab-pane>
    </a-tabs>
    </a-spin>
    <!-- 导出提示框 -->
    <reportModal :visible="showExport" @close="showExport=false"></reportModal>

  </div>
</template>

<script>
import { commonMixin } from '@/utils/mixin'
import { hdExportExcel } from '@/libs/exportExcel'
// 组件
import { STable, VSelect } from '@/components'
import rangeDate from '@/views/common/rangeDate.vue'
import reportModal from '@/views/common/reportModal.vue'
import subarea from '@/views/common/subarea.js'
import { allocateTypeTreeList } from '@/api/allocateType'
import AreaList from '@/views/common/areaList.js'
// 接口
import { reportAllocateDbjdReportList, reportAllocateDbjdReportCount, reportAllocateDbjdReportExport } from '@/api/reportData'
export default {
  name: 'AllocationPresentationList',
  mixins: [commonMixin],
  components: { STable, VSelect, rangeDate, subarea, AreaList, reportModal },
  data () {
    return {
      spinning: false,
      advanced: true, // 高级搜索 展开/关闭
      showExport: false, // 导出提示框
      tableHeight: 0, // 表格高度
      disabled: false, //  查询、重置按钮是否可操作
      exportLoading: false, // 导出按钮加载状态
      tableWidth: 0, // 表格宽度
      //  查询条件
      queryParam: {
        time: [], // 调拨日期
        beginDate: '', // 开始日期
        endDate: '', // 结束日期
        allocateNo: '', // 调拨单号
        targetName: '', // 客户名称
        dealerNewFlag: undefined,
        subareaArea: {
          subareaSn: undefined, // 区域
          subareaAreaSn: undefined// 分区
        },
        dealer: {
          provinceSn: undefined, // 省
          citySn: undefined, // 市
          districtSn: undefined, // 区
          dealerLevel: undefined// 客户级别
        }
      },
      rules: {
        'time': [{ required: true, message: '请选择调拨日期', trigger: 'change' }]
      },
      // 加载数据方法 必须为 Promise 对象
      loadData: parameter => {
        this.disabled = true
        this.spinning = true
        const paramsPage = Object.assign(this.queryParam, { pageNo: parameter.pageNo, pageSize: parameter.pageSize })
        // 获取列表数据 有分页
        return reportAllocateDbjdReportList(paramsPage).then(res => {
          let data
          if (res.status == 200) {
            data = res.data
            // 获取 费用/调拨类型合计  数据
            this.getCount(paramsPage)
            // 计算表格序号
            const no = (data.pageNo - 1) * data.pageSize
            for (var i = 0; i < data.list.length; i++) {
              data.list[i].no = no + i + 1
            }
            this.disabled = false
          }
          this.spinning = false
          return data
        })
      },
      totalData: null, // 费用/调拨类型合计  数据
      allocateType: [], // 调拨类型
      atypeColList: []// 重组调拨类型数据
    }
  },
  computed: {
    columns () {
      let arr = [
        { title: '区域', dataIndex: 'subareaName', width: 60, align: 'center', customRender: function (text) { return text || '--' } },
        { title: '分区', dataIndex: 'subareaAreaName', width: 60, align: 'center', customRender: function (text) { return text || '--' } },
        { title: '调拨单号', dataIndex: 'allocateNo', width: 160, align: 'center', customRender: function (text) { return text || '--' } },
        { title: '省份', dataIndex: 'provinceName', width: 90, align: 'center', customRender: function (text) { return text || '--' } },
        { title: '客户名称', dataIndex: 'dealerName', width: 120, align: 'center', customRender: function (text) { return text || '--' }, ellipsis: true },
        { title: '客户级别', dataIndex: 'dealerLevelDictValue', width: 120, align: 'center', customRender: function (text) { return text || '--' } }
      ]
      arr = arr.concat(this.atypeColList)
      arr.splice(arr.length, 0, { title: '调拨单合计金额', width: 90, dataIndex: 'totalCost', align: 'right', customRender: function (text) { return (text || text == 0) ? text : '--' } })
      return arr
    }
  },
  watch: {
    // 展开关闭时，监听表格高度
    advanced (newValue, oldValue) {
      const _this = this
      this.$nextTick(() => { // 页面渲染完成后的回调
        _this.setTableH()
      })
    },
    '$store.state.app.winHeight' (newValue, oldValue) { //  窗口变更时，需同时更改表格高度
      this.setTableH()
    }
  },
  methods: {
    // 组合调拨类型 数据
    getCol (data, key) {
      const ret = []
      for (let i = 0; i < data.length; i++) {
        const row = data[i]
        row.paths = key ? (key + '_' + row.allocateTypeSn) : row.allocateTypeSn
        const params = {
          title: row.name
        }
        if (!row.sonList) {
          params.dataIndex = row.paths
          params.width = 100
          params.align = 'right'
          params.customRender = function (text) {
            return text || '--'
          }
          this.tableWidth += 100
        } else {
          params.children = this.getCol(row.sonList, row.paths)
        }
        ret.push(params)
      }
      return ret
    },
    // 获取调拨类型
    getAllocateType () {
      allocateTypeTreeList({}).then(res => {
        if (res.status == 200) {
          this.allocateType = res.data
          this.atypeColList = this.getCol(this.allocateType, '')
        } else {
          this.allocateType = []
        }
      })
    },
    //  导出
    handleExport () {
      const _this = this
      this.$refs.ruleForm.validate(valid => {
        if (valid) {
          const params = _this.queryParam
          _this.$store.state.app.curActionPermission = 'B_allocationPresentationExport'
          _this.showExport = true
          delete params.time
          _this.exportLoading = true
          _this.spinning = true
          hdExportExcel(reportAllocateDbjdReportExport, params, '调拨交单报表', function () {
            _this.exportLoading = false
            _this.spinning = false
            _this.$store.state.app.curActionPermission = ''
          })
        } else {
          return false
        }
      })
    },
    // 总计
    getCount (params) {
      reportAllocateDbjdReportCount(params).then(res => {
        if (res.status == 200 && res.data) {
          this.totalData = res.data
        } else {
          this.totalData = null
        }
      })
    },
    // 查询
    handleSearch () {
      const _this = this
      this.$refs.ruleForm.validate(valid => {
        if (valid) {
          _this.$refs.table.refresh(true)
        } else {
          _this.$message.error('请选择调拨日期')
          return false
        }
      })
    },
    //  调拨日期  change
    dateChange (date) {
      if (date[0] && date[1]) {
        this.queryParam.time = date
      } else {
        this.queryParam.time = []
      }
      this.queryParam.beginDate = date[0] || ''
      this.queryParam.endDate = date[1] || ''
    },
    // 区域分区  change
    subareaChange (val) {
      this.queryParam.subareaArea.subareaSn = val[0] ? val[0] : undefined
      this.queryParam.subareaArea.subareaAreaSn = val[1] ? val[1] : undefined
    },
    //  重置
    resetSearchForm () {
      this.queryParam.time = []
      this.$refs.rangeDate.resetDate(this.queryParam.time)
      this.queryParam.beginDate = ''
      this.queryParam.endDate = ''
      this.queryParam.allocateNo = ''
      this.queryParam.targetName = ''
      this.queryParam.dealerNewFlag = undefined
      this.queryParam.subareaArea = {
        subareaSn: undefined,
        subareaAreaSn: undefined
      }
      this.queryParam.dealer = {
        provinceSn: undefined,
        citySn: undefined,
        districtSn: undefined,
        dealerLevel: undefined
      }
      this.totalData = null
      if (this.advanced) {
        this.$refs.areaList.clearData()
        this.$refs.subarea.clearData()
      }
      this.$refs.ruleForm.resetFields()
      this.$refs.table.clearTable()
    },
    // 地区
    areaChange (val) {
      this.queryParam.dealer.provinceSn = val[0] ? val[0] : ''
      this.queryParam.dealer.citySn = val[1] ? val[1] : ''
      this.queryParam.dealer.districtSn = val[2] ? val[2] : ''
    },
    // 初始化
    pageInit () {
      this.getAllocateType()
      this.resetSearchForm()
      this.setTableH()
    },
    // 计算表格高度
    setTableH () {
      const tableSearchH = this.$refs.tableSearch.offsetHeight
      this.tableHeight = window.innerHeight - tableSearchH - 255
    }
  },
  mounted () {
    if (!this.$store.state.app.isNewTab) { // 页签刷新时调用
      this.pageInit()
    }
  },
  activated () {
    // 如果是新页签打开，则重置当前页面
    if (this.$store.state.app.isNewTab) {
      this.pageInit()
    }
  },
  beforeRouteEnter (to, from, next) {
    next(vm => {})
  }
}
</script>
<style lang="less" scoped>
  .allocationPresentationList-wrap{
    .h-title{
      display: flex;
      align-items: center;
      margin-top:10px;
      > div{
        padding: 10px;
        width: 33.3%;
        background:#f8f8f8;
        border-left:1px solid #eee;
        > div{
          width: 50%;
          text-align: center;
          font-weight:bold;
          border-right:1px solid #eee;
        }
      }
    }
    .leve1{
      border:1px solid #eee;
      > div{
        &:first-child{
          width: 33.3%;
          display: flex;
          align-items: center;
          > div{
            width: 50%;
            height: 100%;
            text-align: center;
            border-left:1px solid #eee;
            display: flex;
            align-items: center;
            justify-content: center;
          }
        }
        &:last-child{
          align-items: center;
          width: 66.6%;
        }
      }
    }
    .leve2{
      border-bottom:1px solid #eee;
      > div{
        &:first-child{
          width: 50%;
          display: flex;
          align-items: center;
          > div{
            width: 50%;
            height: 100%;
            padding: 10px;
            text-align: center;
            border-left:1px solid #eee;
            display: flex;
            align-items: center;
            justify-content: center;
          }
        }
        &:last-child{
          align-items: center;
          width: 50%;
          border-left:1px solid #eee;
        }
      }
      &:last-child{
        border-bottom:0;
      }
    }
    .leve3{
      border-bottom:1px solid #eee;
      > div{
        width: 100%;
        display: flex;
        align-items: center;
        > div{
          width: 50%;
          height: 100%;
          padding: 10px;
          text-align: center;
          display: flex;
          align-items: center;
          justify-content: center;
          &:last-child{
            border-left:1px solid #eee;
          }
        }
      }
      &:last-child{
        border-bottom:0;
      }
    }
    .leve1,.leve2,.leve3{
      display:flex;
    }
    /deep/.ant-card-body{
      margin-top:-11px !important;
    }
  }
</style>
