<template>
    <el-form ref="form" :model="form" :rules="rules">
      <ele-pro-table ref="table" :needPage="false" :columns="columns" :datasource="form.datasource"
        cache-key="systemRoleTable17" class="time-form">
        <!-- 表头工具栏 -->
        <template v-slot:toolbar>
          <el-button size="small" type="primary" icon="el-icon-plus" class="ele-btn-icon" @click="handlAdd">
            新增
          </el-button>
        </template>
        <template v-slot:moneyName="scope">
          <el-form-item style="margin-bottom: 20px;" :prop="'datasource.' + scope.$index + '.moneyName'" :rules="{
            required: true,
            message: '请输入',
            trigger: 'blur'
          }">
            <el-input v-model="scope.row.moneyName" placeholder="请输入"></el-input>
          </el-form-item>
        </template>
        
        <template v-slot:ratio="scope">
          <el-form-item style="margin-bottom: 20px" :prop="'datasource.' + scope.$index + '.ratio'"  :rules="{
          required: true,
          pattern:numberReg,
          message: '请输入正确的比例',
          trigger: 'change'
        }">
            <el-input v-model="scope.row.ratio"  placeholder="请输入" @input="(val)=>ratioInput(val,scope.$index)">
                <template slot="append">%</template>
            </el-input>
          </el-form-item>
        </template>
        <template v-slot:price="scope">
            <el-form-item style="margin-bottom: 20px" :prop="'datasource.' + scope.$index + '.price'" :rules="{
          required: true,
          pattern:numberReg,
          message: '请输入正确的金额',
          trigger: 'change'
        }">
        {{scope.row.price||0.00}}元
            <!-- <el-input v-model="scope.row.price" placeholder="请输入" disabled>
              <template slot="append">元</template>
            </el-input> -->
        </el-form-item>
        </template>
        <template v-slot:deadLine="scope">
          <el-form-item style="margin-bottom: 20px" :prop="'datasource.' + scope.$index + '.deadLine'" :rules="{
            required: true,
            message: '请选择日期',
            trigger: 'change'
          }">
                  <el-date-picker
                  style="width:140px"
                   v-model="scope.row.deadLine"
                   type="date"
                   placeholder="选择日期">
          </el-date-picker>
          </el-form-item>
        </template>
          <template v-slot:remark="scope">
        <el-form-item style="margin-bottom: 20px" :prop="'datasource.' + scope.$index + '.remark'">
            <el-input v-model="scope.row.remark" type="textarea" placeholder="请输入"></el-input>
        </el-form-item>
      </template>
        <!-- 操作列 -->
        <template v-slot:action="{ row }">
          <el-popconfirm class="ele-action" title="确定要删除吗？" @confirm="remove(row)">
            <template v-slot:reference>
              <el-link type="danger" :underline="false" icon="el-icon-delete">
                删除
              </el-link>
            </template>
          </el-popconfirm>
        </template>
      </ele-pro-table>
    </el-form>
  </template>
  <script>
  import { emailReg, phoneReg,numberReg } from 'ele-admin';
  export default {
    props: {
      delDetailIds: Array
    },
    data() {
      const defaultForm = {
        key: null,
        deadLine:null,
        moneyName:'',
        price:null,
        ratio:null,
        remark:''
      };
      return {
        numberReg,
        defaultForm,
        form: {
          datasource: []
        },
        rules: {},
        columns: [
          {
            width: 45,
            type: 'index',
            columnKey: 'index',
            align: 'center',
            fixed: 'left'
          },
          
          {
            width: 240,
            prop: 'moneyName',
            label: '款项名称',
            slot: 'moneyName'
          },
          {
            width: 170,
            prop: 'ratio',
            label: '比例',
            slot: 'ratio'
          },
          {
            width: 150,
            prop: 'price',
            label: '金额',
            slot: 'price'
          },
         
          {
            width: 160,
            prop: 'deadLine',
            label: '截止日期',
            slot: 'deadLine'
          },
          {
            width: 260,
            prop: 'remark',
            label: '说明',
            slot: 'remark'
          },
          {
            columnKey: 'action',
            label: '操作',
            align: 'center',
            resizable: false,
            slot: 'action',
            showOverflowTooltip: true
          }
        ],
      };
    },
    computed: {
      canHandl() {
        return this.form.datasource.length;
      },
      discountAmount(){
        return this.$store.state.concact.discountAmount
      }
    },
    watch:{
      discountAmount(newval){
        if(newval){
          this.refreshprice()
        }
      }
    },
    methods: {
      //输入比例更新金额
     async ratioInput(val,index=null){
      val=Number(val)
      try {
        if(index!=null){
          await this.checkRatio()
        }
        let newval=(val/100).toFixed(2)
          let price=(this.discountAmount*newval).toFixed(2)
          console.log(newval,price,index,'88888')
          if(index!=null){
            console.log(newval,price,index,'999999')
           this.$set( this.form.datasource[index], 'price',  price)
          }else{
           return price
          }
      } catch (error) {
         return 0
      }
       
      
       
       //this.$set( this.form.datasource[index], 'price',  price)
      },
      //检验比例
      checkRatio(){
        return new Promise((resolve, reject) => {
                let newData=this.form.datasource,sum=0
              newData.forEach(r=>{
                if(r.ratio){
                  sum+=Number(r.ratio)
                }
              })
              console.log(sum,'3333333')
              if(sum>100){
                this.$message.error('总共比例不能超过100')
                this.$set( this.form.datasource[this.form.datasource.length-1], 'ratio',  null)
                this.$set( this.form.datasource[this.form.datasource.length-1], 'price',  0.00)
                reject(false);
              }else{
                resolve(true)
              }
            })
      
      },
      refreshprice(){
        let newData=this.form.datasource
        newData.forEach(async (r,index)=>{
          if(r.ratio){
            console.log(this.ratioInput(Number(r.ratio)),'9999888888')
            r.price =await this.ratioInput(Number(r.ratio));
          }
        })
      },
        // 返回列表数据
     getTableValue(){
         return this.form.datasource
      },
      //修改回显
      putTableValue(data){
        if(data&&data?.length){
            this.form.datasource=data
        }
      },
      remove(row) {
        let index = this.form.datasource.findIndex((n) => n.key == row.key);
        if (index !== -1) {
          this.form.datasource.splice(index, 1);
          this.setSort();
          if (row.id) {
            this.delDetailIds.push(row.id);
          }
        }
      },
      // 清空表格
      restTable() {
        this.form.datasource = [];
      },
      // 重新排序
      setSort() {
        this.form.datasource.forEach((n, index) => {
          n.key = index + 1;
        });
      },
      // 添加
      handlAdd() {
        let item = JSON.parse(JSON.stringify(this.defaultForm));
        item.key = this.form.datasource.length + 1;
        this.form.datasource.push(item);
      },
 

      validateForm (callback) {
        //开始表单校验
        this.$refs.form.validate((valid) => {
          callback(valid);
        });
      },
  
  
    }
  };
  </script>
  <style lang="scss" scoped>
  .time-form .el-form-item {
    margin-bottom: 0 !important;
  }
  </style>
  