//贸易服务管理
<template>
  <div class="container">
    <map-drag :class="{active:isActive}"></map-drag>
    <div class="bottom" :class="{active:isActive}">
      <div class="bottom-content">
        <div class="bottom-item" @click="startHacking">查看申请记录</div>
        <div class="bottom-item"><i class="el-icon-d-arrow-right icon"></i></div>
        <el-radio class="bottom-item" v-model="radio" label="1" @change="selectShowType">默认地图</el-radio>
      </div>
    </div>
    <div class="top">
      <div class="top-content">
        <div class="top-item" @click="startHacking1">查看地图</div>
        <div class="top-item"><i class="el-icon-d-arrow-left icon"></i></div>
        <el-radio class="top-item" v-model="radio" label="2" @change="selectShowType">默认列表</el-radio>
      </div>
    </div>
    <div class="content2">
      <div class="header">
        <el-button type="" :type="searchType == 0 ? 'primary' : ''" @click="handlestatus(1)">全部</el-button>
        <el-button type="" :type="searchType == 1 ? 'primary' : ''" @click="handlestatus(2)">待审核</el-button>
        <el-button type="" :type="searchType == 2 ? 'primary' : ''" @click="handlestatus(3)">待审批</el-button>
        <el-button type="" :type="searchType == 3 ? 'primary' : ''" @click="handlestatus(4)">待还</el-button>
        <el-button type="" :type="searchType == 4 ? 'primary' : ''" @click="handlestatus(5)">已还</el-button>
        <el-input placeholder="可按业务编号、合同编号、仓库名查找" class="search-input" v-model="searchKeyWord"></el-input>
        <el-button type="primary" @click='findList'>查找</el-button>
        <el-button type="primary" class="add" @click="add">添加</el-button>
      </div>
      <el-table :data="tradeServicesList" style="width: 100%; margin-top: 20px" ref="tradeServicesList" border
        height="calc(100% - 90px)">
        <el-table-column type="index" label="序号">
          <template scope="scope">
            <span v-if="scope.$index < 9">0{{ scope.$index + 1 }}</span>
            <span v-else>{{ scope.$index + 1 }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="billNo" label="业务编号"></el-table-column>
        <el-table-column prop="contractNo" label="合同编号"></el-table-column>
        <el-table-column prop="warehouseName" label="仓库名"></el-table-column>
        <el-table-column prop="warehouseNo" label="仓位号">
          <!-- <template slot-scope="scope">
            <div>{{scope.row.bankDeposit}}-{{scope.row.bankDepositBranch}}</div>
          </template> -->
        </el-table-column>
        <el-table-column prop="goodsName" label="货名"></el-table-column>
        <el-table-column prop="weight" label="重量（吨）"></el-table-column>
        <el-table-column prop="unitPrice" label="单价（元/吨）"></el-table-column>
        <el-table-column prop="totalValue" label="总价值（元）"></el-table-column>
        <el-table-column prop="paymentAmount" label="发放金额（元）"></el-table-column>
        <el-table-column prop="amountDue" label="应还金额（元）"></el-table-column>
        <el-table-column prop="amountRepaid" label="已还金额（元）"></el-table-column>
        <el-table-column prop="amountToRepaid" label="待还金额（元）"></el-table-column>
        <el-table-column prop="status" label="状态">
          <!-- <template slot-scope="scope">
            <div>{{scope.row.bankDeposit}}-{{scope.row.bankDepositBranch}}</div>
          </template> -->
        </el-table-column>
        <el-table-column prop="address" label="操作" width="430">
          <template slot-scope="scope">
            <el-button size="mini" @click="lookBtnClick(scope.row, 2)" v-show="scope.row.authenticationStatus!='已删除'">
              查看</el-button>
            <el-button size="mini" @click="toExamineBtnClick(scope.row, 2)"
              v-show="scope.row.authenticationStatus!='已删除'">
              审核</el-button>
            <el-button size="mini" @click="approveBtnClick(scope.row, 2)"
              v-show="scope.row.authenticationStatus!='已删除'">
              审批</el-button>
            <el-button size="mini" @click="repaymentBtnClick(scope.row, 2)"
              v-show="scope.row.authenticationStatus!='已删除'">
              还款</el-button>
            <el-button size="mini" @click="rowEditBtnClick(scope.row, 3)"
              v-show="scope.row.authenticationStatus!='已删除'">修改</el-button>
            <el-button size="mini" type="danger" @click="rowDeleteBtnClick(scope.row, '')">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="paging">
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage"
          :page-size="deptCircularPage.pageSize" layout="total, sizes, prev, pager, next, jumper"
          :total="deptBudgetTotal"></el-pagination>
      </div>
    </div>
  </div>
</template>
<script>
  import mapDrag from '@/components/mapdrag/warehouseReceiptMap'
  import {
    getList,
    getMapInfo
  } from '@/model/tradeServicesManagement/index'
  import {
    selectWarehouseSelf,
  } from '@/model/houseSelfCollect/index'
  export default {
    components: {
      mapDrag
    },
    data() {
      return {
        searchVal: '',
        searchKeyWord: '',
        isActive: false,
        radio: '1',
        tradeServicesList: [],
        mapInfo: [],
        currentPage: 1,
        pageSize: 10,
        deptBudgetTotal: 0,
        deptCircularPage: {},
        searchType: '0',
        warehouseList: [],
        compId: '',
      }
    },
    activated() {},
    beforeCreate() {
      document.querySelector('body').setAttribute('style', 'overflow:hidden;')
    },
    mounted() {
      let height = document.body.offsetHeight - 57
      document.querySelector('.container').setAttribute('style', 'height:' + height + 'px;')
      let _showPage = sessionStorage.getItem('warehouseReceiptRegulation_selectShowType')
      if (_showPage == "1") {
        this.radio = '1'
        this.isActive = false
      } else if (_showPage == "2") {
        this.radio = '2'
        this.isActive = true
      } else {
        this.radio = '1'
        this.isActive = false
      }
      this.compId = sessionStorage.getItem('ws-pf_compId')
      this.getList()
      this.getMapInfo()
      // this.getWarehouseList()
      this.tradeServicesList = []
    },
    methods: {
      getMapInfo() {
        getMapInfo().toPromise().then((response) => {
          console.log('地图数据', response)
          // this.mapInfo = response.data.records
        })
      },
      findList() {
        this.currentPage = 1
        this.pageSize = 10
        this.getList()
      },
      handlestatus(status) {
        this.searchType = status
        // this.currentPage:=1
        // this.pageSize=10
        // this.getList()
      },
      lookBtnClick(val1, val2) {
        this.$router.push({
          name: 'warehouseReceiptLook'
        })
      },
      toExamineBtnClick(val1, val2) {
        this.$router.push({
          name: 'reviewWarehouseReceipt'
        })
      },
      approveBtnClick(val1, val2) {
        this.$router.push({
          name: 'approveWarehouseReceipt'
        })
      },
      repaymentBtnClick(val1, val2) {
        this.$router.push({
          name: 'repayment'
        })
      },
      rowEditBtnClick(val1, val2) {
        this.$router.push({
          name: 'warehouseReceiptEdit'
        })
      },
      rowDeleteBtnClick(val1, val2) {},
      handleSizeChange(val) {
        console.log(`每页 ${val} 条`)
        this.pageSize = val
        this.getWarehouseList()
        this.getList()
      },
      handleCurrentChange(val) {
        this.currentPage = val
        console.log(`当前页: ${val}`)
        this.getList()
      },
      startHacking() {
        this.isActive = true
      },
      startHacking1() {
        this.isActive = false
      },
      getWarehouseList() {
        selectWarehouseSelf({
            compId: this.compId
          })
          .toPromise()
          .then(response => {
            this.warehouseList = response
          })
      },
      getList(e, type) {
        if (type == 1) {
          this.isActive = true
        }
        getList({
            compId: this.compId,
            currentPage: this.currentPage,
            pageSize: this.pageSize,
            searchType: this.searchType,
            searchKeyWord: this.searchKeyWord,
          })
          .toPromise()
          .then((response) => {
            console.log('列表数据', response)
            this.tradeServicesList = response.records
          })
      },
      selectShowType(e) {
        this.activated = !this.activated;
        sessionStorage.setItem('warehouseReceiptRegulation_selectShowType', e)
      },
      add() {
        this.$router.push({
          name: 'warehouseReceiptAdd'
        })
      }
    }
  }
</script>
<style lang="scss" scoped>
  .container {}

  .icon {
    transform: rotate(90deg);
    margin: 0 10px;
  }

  .active {
    height: 0 !important;
    overflow: hidden;
  }

  .bottom,
  .top {
    display: flex;
    justify-items: flex-end;
    height: 5%;
    align-content: center;

    .bottom-content,
    .top-content {
      display: flex;
      justify-content: flex-end;
      width: 100%;
      padding-right: 25px;
    }

    .bottom-item,
    .top-item {
      display: flex;
      align-items: center;
    }
  }


  .content2 {
    // background: pink;
    padding: 20px;
    height: calc(100% - 44px);

    .header {
      position: relative;

      .add {
        position: absolute;
        right: 0;
      }
    }

    .search-input {
      width: 300px;
      margin-left: 10px;
    }
  }

  .paging {
    margin-top: 10px;
    text-align: center;
  }
</style>