<template>
  <div>
    <el-button size="mini" type="primary" @click="addBtn">新 建</el-button>
    <el-dialog :visible.sync="drawer2" title="选择财务信息" append-to-body width="50%">
      <el-table
        ref="multipleTable"
        :data="moneyInfo"
        style="width: 100%"
        size="mini"
        border>
        <el-table-column
          prop="bank"
          label="银行"
          width="180">
        </el-table-column>
        <el-table-column
          prop="bankcardno"
          label="银行编号"
          width="180">
        </el-table-column>
         <el-table-column
          prop="enterprisename"
          label="经销商"
          width="150">
        </el-table-column>
        <el-table-column
          prop="phonenumber"
          label="手机号"
          width="150">
        </el-table-column>
        <el-table-column
          prop="address"
          label="地址">
        </el-table-column>
        <el-table-column
          label="操作"
          width="90"
          fixed="right">
          <template slot-scope="scope">
            <el-button type="text" size="small" @click="selectInfoRow(scope.row)">选 择</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="dialog-footer" style="margin-top:20px">
        <el-button size="small" @click="drawer2=false" class="normal-btn-width">取 消</el-button>
        <el-button size="small" type="warning" class="normal-btn-width btn-warning">确 定</el-button>
      </div>
    </el-dialog>
    <el-drawer title="新建打款凭证" append-to-body :visible.sync="dialogFormVisible" size="50%">
      <div class="drawer__panel">
        <el-row :gutter="20">
          <el-form :model="form" :rules="rules" ref="form" label-width="100px" label-position="right" size="mini">
            <el-col :span="12">
              <el-form-item label="经销商:" prop="enterprisename">
                <el-popover
                  placement="bottom"
                  trigger="click"
                  v-model="visible">
                  <selectAgentInfo ref="UseAgent" @selectRow="selectRow"></selectAgentInfo>
                  <el-input readonly slot="reference" v-model="form.enterprisename"  suffix-icon="el-icon-arrow-down" placeholder="经销商"></el-input>
                </el-popover>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="付款人:" prop="payer">
                <el-input readonly v-model="form.payer" placeholder="付款人"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="银行账号:" prop="bankcardno">
                <el-input readonly v-model="form.bankcardno" placeholder="银行账号"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item readonly label="银行:" prop="bank">
                <el-input readonly v-model="form.bank" placeholder="银行"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="付款时间:" prop="paydate">
                <el-date-picker
                  v-model="form.paydate"
                  type="date"
                  value-format="yyyy-MM-dd"
                  placeholder="付款时间">
                </el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="打款总金额:" prop="amount">
                <el-input v-model="form.amount" placeholder="请输入打款总金额"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="转入银行:" prop="inbank">
                <el-input v-model="form.inbank" placeholder="转入银行"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="转入账号:" prop="inbankcardno">
                <el-input v-model="form.inbankcardno" placeholder="转入账号"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="备注:" prop="remarks">
                <el-input v-model="form.remarks" placeholder="备注"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="打款明细:" prop="">
                <selectTable v-if="dialogFormVisible" @selectChange="selectChange" idName="sa_accountclassid" ref="table" v-model="result" :layout="tablecols" :data="list" :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="scope.column.data.amount" size="small"></el-input>
                    </div>
                    <div v-else>{{scope.column.data[scope.column.columnname]}}</div>
                  </template>
                </selectTable>
              </el-form-item>
            </el-col>
          </el-form>
        </el-row>
      </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" class="normal-btn-width">确 定</el-button>
      </div>
    </el-drawer>
  </div>
</template>

<script>
import selectAgentInfo from '@/HDrpManagement/remitvoucher/components/selectAgentInfo'
import selectTable from '@/components/selectTable/index'

export default {
  name: "add",
  components: {selectAgentInfo,selectTable},
  data(){
    return {
      dialogFormVisible:false,
      visible:false,
      drawer2:false,
      moneyInfo:[],
      list:[],
      tablecols:[],
      selectArr:[],
      result:'',
      form:{
        "sa_paybillid": 0,
        "sys_enterpriseid": '',
        "payer": "",
        "paydate": "",
        "period": "",
        "amount": "",
        "remarks": "",
        "bank": "",
        "bankcardno": "",
        "inbankcardno":'',
        "inbank":'',
        "enterprisename":''
      },
      rules:{
        enterprisename:[
          { required: true, message: '请选择经销商', trigger: 'change'},
        ],
        payer:[
          { required: true, message: '付款人', trigger: 'blur'}
        ],
        paydate:[
          { required: true, message: '付款时间', trigger: 'blur'},
        ],
        bank:[
          { required: true, message: '银行', trigger: 'blur'}
        ],
        bankcardno:[
          { required: true, message: '银行编号', trigger: 'blur'},
        ],
        amount:[
          { required: true, message: '凭证总金额', trigger: 'blur'},
        ],
      }
    }
  },
  computed: {
    isEdit () {
      return function (data) {
        console.log(this.selectArr.some(item => item == data));
        let is = this.selectArr.some(item => item == data)
        // if(!is) data.amount = ''
        return is
      }
    }
  },
  watch: {
    dialogFormVisible (val) {
      if (!val) {
        this.$refs.form.resetFields()
        this.$refs.table.allArr = []
      }
    }
  },

  created () {
    this.tablecols = this.tool.tabelCol(this.$route.name).accountTable.tablecols.splice(0,3)
  },
  methods:{
    addBtn () {
      this.dialogFormVisible = true
      this.listData()
    },
    onSubmit(){
      this.$refs['form'].validate(async (valid) => {
        if (!valid) return false
        const res = await this.$api.requested({
          "id": "20221226153004",
          "version":1,
          "content": this.form
        })
        this.tool.showMessage(res,async ()=>{
          let data = this.$refs.table.allArr.map(item => {
            return {
              "sa_paybilldetailid": 0,
              "sa_accountclassid": item.sa_accountclassid,
              "amount": item.amount === '' ? 0 : item.amount
            }
          })
          if (data.length > 0) {
            let res2 = await this.$api.requested({
              "id": "20221227092904",
              "content": {
                  "sa_paybillid": res.data.sa_paybillid,
                  "paybilldetails": data
              }
            })
          }
          this.$emit('onSuccess')
          this.dialogFormVisible = false
        })
      })
    },
    selectRow (data) {
      this.form.enterprisename = data.enterprisename
      this.form.sys_enterpriseid = data.sys_enterpriseid
      this.visible = false
      console.log(data);
      this.queryMoneyInfo(data.sys_enterpriseid)
    },
    /* 获取财务信息 */
    async queryMoneyInfo (id) {
      let res = await this.$api.requested({
        "id": 20221013160602,
        "content": {
            "sys_enterpriseid":id,
            "pageNumber": 1,
            "pageSize": 20,
            "where": {
                "condition": ""
            }
        },
      })
      this.moneyInfo = res.data
      if (this.moneyInfo.length > 1) {
        this.drawer2 = true
      } else {
        this.form.payer = this.moneyInfo[0].enterprisename
        this.form.bank = this.moneyInfo[0].bank
        this.form.bankcardno = this.moneyInfo[0].bankcardno
      }
    },
    /* 选中财务信息 */
    selectInfoRow (data) {
      this.form.payer = data.enterprisename
      this.form.bank = data.bank
      this.form.bankcardno = data.bankcardno
      this.drawer2 = false
    },
    selectChange (data) {
      this.selectArr = data
    },
    upDateData (data) {
      this.selectArr = data
    },
    /* 获取打款列表数据 */
    async listData () {
      let res = await this.$api.requested({
        "id": "20221228085004",
        "content": {
            "sa_paybillid":0,
            "where":{
                "condition":""
            }
        }
      })
      res.data.forEach(item => item.amount = 0)
      this.list = res.data
      console.log(this.list);
      
    }
  } 
}
</script>

<style scoped>
.dialog-footer {
  margin-top: 0;
}
</style>