<template>
  <div>
    <div class="mrg-b">
      <el-row>
        <el-col :span="21">
          <el-button v-auth="50600030105" type="primary" @click="handleAdd">新增</el-button>
          <el-button v-auth="50600030106" type="primary" @click="handleDeleteRows">删除</el-button>
          <el-button v-auth="50600030107" type="primary" @click="handleCopy">复制</el-button>
          <el-button v-auth="50600030108" type="primary" @click="handleAudit">审核</el-button>
          <el-button v-auth="50600030113" type="primary" @click="handleCancelAudit">取消审核</el-button>
          <el-button v-auth="50600030120" type="primary" @click="handleAgain">重新计算库存费用</el-button>
        </el-col>
        <el-col :span="3">
            <el-button v-auth="50600030102" type="primary" @click="handleMoreSearch">更多</el-button>
            <el-button
              v-auth="50600030101"
              icon="el-icon-refresh"
              class="query__item"
              type="primary"
              @click="handleRefresh"
              plain
              circle
            ></el-button>
            <el-button
            v-if="false"
              icon="el-icon-download"
              type="primary"
              @click="handleExcel"
              plain
              circle
            ></el-button>
        </el-col>
      </el-row>
    </div>
    <div class="inputBox">
        <el-form inline :model="query" ref="query" label-position="left">
          <el-form-item label="费用ID" prop="feeId">
            <el-input
              v-model="query.feeId"
              @keyup.enter.native="handleSearch"
              placeholder="快捷查询(费用ID)"
            ></el-input>
          </el-form-item>
          <el-form-item label="费用名称" prop="feeNameCode">
            <el-input v-model="query.feeNameCode" @keyup.enter.native="handleSearch"></el-input>
          </el-form-item>
           <el-form-item label="费用类别" prop="feeType">
            <el-select multiple v-model="feeType" @change="handleFeeType" >
                <el-option label="运输费用" value="TRANSPORT_CHARGE"></el-option>
                <el-option label="特殊费用" value="SPECIAL_CHARGE"></el-option>
                <el-option label="增值服务费用" value="APPENDED_CHARGE"></el-option>
                <el-option label="服务费用" value="SERVICE_CHARGE"></el-option>
                <el-option label="全部" value="ALL"></el-option>
                <el-option label="理赔费用" value="CLAIM_CHARGE"></el-option>
                <el-option label="实际报账费用" value="DRIVER_REIMBURSE"></el-option>
                <el-option label="库存费用" value="KCFY"></el-option>
            </el-select>
            </el-form-item>
           <el-form-item label="状态" prop="status" @change="handleStatus">
              <el-select multiple  v-model="status"  >
                    <el-option label="创建" value="00"></el-option>
                    <el-option label="审核" value="10"></el-option>
                    <el-option label="确认" value="20"></el-option>
                </el-select>
            </el-form-item>
        </el-form>
      </div>
    <more-query
      :moreQueryVisible="moreQueryVisible"
      @close="moreQueryVisible=false"
      @toGetList="getQueryList"
    ></more-query>

    <again :againVisible="againVisible" @close="againVisible=false" @againSubmit="againSubmit"></again>
  </div>
</template>
<script>
import MoreQuery from './more-query'
import Again from './again'
export default {
  components: {
    MoreQuery,
    Again
  },
  data () {
    return {
      query: {},
      moreQueryVisible: false,
      againVisible: false,
      feeModel: [{
        'feeId': null,
        'feeName': null,
        'feeNameCode': null,
        'feeType': null,
        'status': null,
        'feeCategory': null,
        'tranType': null,
        'quantity': null,
        'chargeBase': null,
        'price': null,
        'amount': null,
        'actAmout': null,
        'currency': null,
        'taxRate': null,
        'taxAmount': null,
        'noTaxAmount': null,
        'roundingType': null,
        'orderType': null,
        'orderNo': null,
        'orderLineNo': null,
        'tranId': null,
        'ownerName': null,
        'ownerCode': null,
        'skuName': null,
        'skuCode': null,
        'lotNum': null,
        'receivePay': null,
        'contractNo': null,
        'feeDate': null,
        'remark': null
      }],
      feeType: [],
      status: [],
      moreData: {}
    }
  },
  props: {
    selectIds: Array,
    rows: Array
  },
  methods: {

    // 检查是否选中行
    checkSelections () {
      if (!this.selectIds.length) {
        this.$message.error('请选择记录')
        return false
      } else {
        return true
      }
    },

    // 新增
    handleAdd () {
      this.$emit('handleOpenForm', 'create')
    },

    handleFeeType (val) {
      this.query.feeType = val.join(',')
      this.handleSearch()
    },
    handleStatus (val) {
      this.query.status = val.join(',')
      this.handleSearch()
    },

    handleRefresh () {
      this.feeType = []
      this.status = []
      this.$refs.query.resetFields()
      this.$emit('getList')
    },
    // 搜索
    handleSearch () {
      const query = { ...this.query, feeId: `%${this.query.feeId || ''}%`, feeNameCode: `%${this.query.feeNameCode || ''}%` }
      this.moreData = query
      this.$emit('getList', query)
    },

    // 更多查询数据
    getQueryList (query) {
      this.moreQueryVisible = false
      this.moreData = query
      this.$emit('getList', query)
    },

    // 更多搜索查询
    handleMoreSearch () {
      this.moreQueryVisible = true
    },

    // 删除
    handleDeleteRows () {
      const url = this.$API.charging.maintain.delList
      const param = { feeIds: JSON.stringify(this.selectIds) }
      if (!this.checkSelections()) return
      this.$confirm(`您已选中${this.selectIds.length}条数据,是否删除？`, '删除', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$https.post(url, param).then(res => {
          this.$emit('getList')
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    // 请求
    getData (urlkey, param, text) {
      const url = this.$API.charging.maintain[urlkey]
      if (!this.checkSelections()) return
      this.$confirm(`是否执行${text}操作？`, `${text}`, {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$https.post(url, param).then(res => {
          this.$emit('getList', {}, this.type)
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: `已取消${text}`
        })
      })
    },

    // 审核
    handleAudit () {
      const urlkey = 'audit'
      const param = { feeIds: JSON.stringify(this.selectIds) }
      this.getData(urlkey, param, '审核')
    },

    // 取消审核
    handleCancelAudit () {
      const urlkey = 'cancelAudit'
      const param = { feeIds: JSON.stringify(this.selectIds) }
      this.getData(urlkey, param, '取消审核')
    },

    // 重新计算库存费用
    handleAgain () {
      this.againVisible = true
    },

    // 复制
    handleCopy () {
      // console.log(this.feeModel)
      // console.log(this.rows)
      if (!this.rows.length) return this.$message.warning('请选择数据')
      if (this.rows.length > 1) return this.$message.warning('请选择一条数据')
      let newObj = {}
      for (let i = 0; i < this.feeModel.length; i++) {
        let obj1 = this.feeModel[i]
        for (let j = 0; j < this.rows.length; j++) {
          let obj2 = this.rows[j]
          Object.keys(obj1).map((item, index) => {
            Object.keys(obj2).map((ele, x) => {
              if (item === ele) {
                newObj[item] = obj2[item]
              }
            })
          })
        }
      }
      const row = { ...newObj, ...{ feeId: null, status: null, feeDate: null } }
      this.$emit('handleOpenForm', 'copy', row)
    },

    againSubmit (data) {
      // console.log(data)
      const url = this.$API.charging.maintain.chargeAgain
      const param = { ownerCode: JSON.stringify(data.ownerCode), dateFm: JSON.stringify(data.dateFm), dateTo: JSON.stringify(data.dateTo) }
      this.$https.post(url, param).then(res => {
        this.$emit('getList', {}, this.type)
        this.againVisible = false
      })
    },
    handleExcel () {
      const url = this.$API.charging.maintain.getList
      const options = this.moreData
      this.$exportExcel(url, options)
    },
  }
}
</script>
<style lang="scss" scoped>
.inputBox {
  width: 100%;
  border: 1px solid #d1d5db;
  margin-top: 10px;
  margin-bottom: 10px;
  border-radius: 10px;
  padding-bottom: 10px;
  padding-left: 10px;
  .el-form-item {
    margin-bottom: 0px;
    margin-top: 10px;
  }
}
.mrg-b {
  margin-bottom: 20px;
}
.mrg-l {
  margin-left: 10px;
}
.query {
  &__operations {
    float: left;
  }
  &__retrieve {
    float: right;
    .el-input {
      max-width: 180px;
    }
  }
  &__item {
    margin-left: 10px;
  }
}
</style>
