<template>
  <el-dialog
    title="新增缴款"
    :visible.sync="visible"
    width="1000px"
    :close-on-click-modal="false"
    @close="handleClose">
    <div class="form-wrap">
      <h3>实收数据</h3>
      <div
        class="info"
        v-if="detail">
        <span
          v-for="(item,index) in detail.cash_data"
          :key="index">
          {{ item.payChannel }}：<b>{{ item.actual_price }}</b>
        </span>
      </div>
      <el-form
        ref="form"
        :model="form"
        :inline="true"
        label-width="100px">
        <el-form-item
          verify
          prop="pay_manager_name"
          label="缴款人姓名">
          <span class="warning">{{ form.pay_manager_name }}</span>
          <!-- <el-select
            disabled
            v-model="form.pay_manager_name">
            <el-option
              v-for="item in salesList"
              :key="item.id"
              :label="item.nickName"
              :value="item.nickName">
            </el-option>
          </el-select> -->
        </el-form-item>

        <el-form-item
          verify
          prop="hand_in_channel"
          label="结算方式">
          <span class="warning">{{ form.hand_in_channel }}</span>
          <!-- <el-select
            disabled
            v-model="form.hand_in_channel">
            <el-option
              v-for="item in channelOptions"
              :key="item"
              :label="item"
              :value="item">
            </el-option>
          </el-select> -->
        </el-form-item>

        <el-form-item
          verify
          prop="fee"
          label="缴款金额">
          <span class="warning">{{ form.fee }}</span>
          <!-- <el-input-number
            disabled
            :controls="false"
            v-model="form.fee"
            :min="0"
            label=""></el-input-number> -->
        </el-form-item>

        <el-form-item
          verify
          prop="receive_manager_name"
          label="收款人姓名">
          <el-select v-model="form.receive_manager_name">
            <el-option
              v-for="item in salesList"
              :key="item.id"
              :label="item.nickName"
              :value="item.nickName">
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item
          label="备注"
          prop="remark">
          <el-input v-model="form.remark"></el-input>
        </el-form-item>
      </el-form>
    </div>
    <span slot="footer">
      <el-button @click="visible = false">取 消</el-button>
      <el-button
        type="primary"
        @click="submit">提交</el-button>
    </span>
  </el-dialog>
</template>

<script>
import { getHandOverStatisticsById } from '@/api/systemSetting/manager.js'
import { createPaymentHandIn } from '@/api/paymentHandIn'
import { getAccountList } from '@/api/systemSetting/account'

export default {
  props: {
    payManager: {
      type: String,
      default: ''
    }
  },
  created () {
    this.getAccountList()
  },
  computed: {
    salesList () {
      return this.$store.state.user.salesList
    }
  },
  data () {
    return {
      visible: false,
      handInInfo: '',
      list2: [],
      detail: null,
      channelOptions: [
        '现金支付',
        '网上支付',
        '银联支付',
        '签单'
      ],
      form: {
        pay_manager_name: '',
        receive_manager_name: '',
        hand_in_channel: '现金支付',
        bank: '',
        account: '',
        fee: '',
        remark: ''
      }
    }
  },
  methods: {
    getHandOverStatisticsById,
    getAccountList () {
      getAccountList({ pageNum: 0, pageSize: -1 }).then(res => {
        this.userList = res.list
        this.list1 = res.list.filter(i => i.roles.find(j => j.name === 'sale'))
        if (this.list1.length === 0) {
          this.list1 = res.list
        }
        this.list2 = res.list.filter(i => i.roles.find(j => j.name === 'finance'))
        if (this.list2.length === 0) {
          this.list2 = res.list
        }
      })
    },
    show (logInfo) {
      this.id = logInfo.id
      this.visible = true
      this.form.pay_manager_name = logInfo.nickName
      this.form.hand_over_id = logInfo.id

      getHandOverStatisticsById({ id: logInfo.id }).then(res => {
        console.log(res.cash_data)
        this.detail = res
        let cashData = res.cash_data.find(i => i.payChannel.indexOf('现金') > -1)
        this.form.fee = (cashData && cashData.actual_price) || 0
      })
    },
    handleClose () {
      this.visible = false
    },
    submit () {
      this.$refs.form.validate(valid => {
        if (valid) {
          this.$confirm('确定提交吗？', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            createPaymentHandIn(this.form).then(res => {
              this.$message.success('操作成功')
              this.handleClose()
              this.$emit('update')
            })
          }).catch(() => {})
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.form-wrap {
  padding: 10px 20px;
}
.info {
  padding: 20px 0;
  span {
    display: inline-block; margin-right: 20px;
  }
  b {
    font-size: 1.6em;color: red;
  }
}
.warning{
    font-size: 1.4em; font-weight: bold;
}
::v-deep .el-dialog .el-form-item {
  display: inline-block;
}
::v-deep .el-form-item__content{
    width: 200px;
}
</style>
