<template>
  <div>
    <el-button size="mini" type="primary" :disabled="disabled" @click="addBtn">添 加</el-button>
    <el-drawer append-to-body :visible.sync="dialogFormVisible" size="50%">
      <div slot="title" style="font-size: 15px">
        添加明细
      </div>
      <div class="drawer__panel">
        <el-input style="width:250px;margin-bottom:10px" size="small" placeholder="请输入搜索内容" clearable @clear="getOrderList(params.content.pageNumber=1)" v-model="params.content.where.condition" @keyup.enter.native="getOrderList(params.content.pageNumber=1)"></el-input>
        <selectTable @selectChange="selectChange" v-if="dialogFormVisible" idName="sa_accountclassid" ref="table" v-model="result" :layout="tablecols" :data="orderList" :custom="true" height="500px"  @upDateData="upDateData">
           <template v-slot:customcol="scope">
              <div v-if="scope.column.columnname == 'amount'">
                <el-input :disabled="!isEdit(scope.column.data)" v-model.number="scope.column.data.amount" size="small"></el-input>
              </div>
              <div v-else>{{scope.column.data[scope.column.columnname]}}</div>
            </template>
        </selectTable>
        <div class="container normal-panel" style="text-align:right">
          <el-pagination
              style="text-align:right"
              background
              small
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="params.content.pageNumber"
              :page-sizes="[20, 50, 100, 200]"
              layout="total,sizes, prev, pager, next, jumper"
              :total="total">
          </el-pagination>
        </div>
      </div>
      <div class="fixed__btn__panel">
        <el-button size="small" @click="dialogFormVisible = false" class="normal-btn-width">取 消</el-button>
        <el-button size="small" type="primary" @click="onSubmit" :disabled="isLength" class="normal-btn-width">确 定</el-button>
      </div>
    </el-drawer>
  </div>
</template>

<script>
import selectTable from '@/components/selectTable/index'
import { log } from '@antv/g2plot/lib/utils'
export default {
  name: "add",
  props:['data','disabled'],
  components:{selectTable},
  data(){
    return {
      result:[],
      selectArr:[],
      isLength:true,
      dialogFormVisible:false,
      orderList:[],
      tablecols:[],
      total:0,
      params: {
        "id": 20221228085004,
        "content": {
          "pageNumber": 1,
          "pageSize": 20,
          "sa_paybillid":this.$route.query.id,
          "where": {
              "condition": ""
          }
        }
      }
    }
  },
  computed: {
    isEdit () {
      return function (data) {
        console.log(this.selectArr.some(item => item == data));
        let is = this.selectArr.some(item => item == data)
        return is
      }
    }
  },
  created () {
    this.getOrderList()
    this.tablecols = this.tool.tabelCol(this.$route.name).accountTable.tablecols.splice(0,3)
  },
  watch: {
    dialogFormVisible (val) {
      if(!val) {
        this.$refs.table.allArr = []
      }
    }
  },
  methods:{
    addBtn () {
      this.dialogFormVisible = true
      this.getOrderList()
    },
    async onSubmit(){
      let isNumber = this.$refs.table.allArr.every(item => {
        return typeof item.amount == 'number'
      })
      if (isNumber) {
        let data = this.$refs.table.allArr.map(item => {
          return {
            "sa_paybilldetailid": 0,
            "sa_accountclassid": item.sa_accountclassid,
            "amount": item.amount
          }
        })
        let res2 = await this.$api.requested({
          "id": "20221227092904",
          "content": {
              "sa_paybillid": this.$route.query.id,
              "paybilldetails": data
          }
        })
        this.tool.showMessage(res2,()=>{
          this.$emit('onSuccess')
          this.dialogFormVisible = false
        })
      } else {
        this.$message({
          title:'提示',
          message:'请输入数字',
          type:"warning"
        })
      }
      
    },
    async getOrderList () {
      this.params.content.sa_paybillid = this.$route.query.id
      let res = await this.$api.requested(this.params)
      res.data.forEach(item => item.amount = 0)
      console.log(res.data);
      
      this.orderList = res.data
      this.total = res.total
      console.log(res);
      
    },
    selectChange (data) {
      this.selectArr = data
      this.isLength = data.length < 1
    },
    upDateData (data) {
      this.selectArr = data
      this.isLength = data.length < 1
    },
    handleSizeChange(val) {
      // console.log(`每页 ${val} 条`);
      this.params.content.pageSize = val
      this.getOrderList()
    },
    handleCurrentChange(val) {
      // console.log(`当前页: ${val}`);
      this.params.content.pageNumber = val
      this.getOrderList()
    },
  }
}
</script>

<style scoped>
.dialog-footer {
  margin-top: 0;
}
.el-select {
  width: 100%;
}
</style>