<template>
  <el-form ref="form" :model="form" :rules="{}">
    <ele-pro-table show-summary :summary-method="getSummaries" ref="table" row-key="id" :needPage="false"
                   :columns="columns" max-height="500px" :toolkit="[]" :datasource="form.datasource"
                   cache-key="systemRoleTable17-1111" class="time-form">
      <!-- 表头工具栏 -->
      <template v-slot:action="{ row,$index }">
        <el-popconfirm class="ele-action" title="确定要删除吗？" @confirm="remove(index,$index,'line')">
          <template v-slot:reference>
            <el-link type="danger" v-if="dialogType!=='view'" :underline="false" icon="el-icon-delete">
              删除
            </el-link>
          </template>
        </el-popconfirm>
      </template>
      <template v-slot:productCode="{ row,$index }">
        <el-popover
          placement="right"
          width="80%"
          trigger="hover">
          <ele-pro-table ref="childrenTable"
                         row-key="id"
                         max-height="300px"
                         :needPage="false" :columns="childrenColumns" :toolkit="[]"
                         :datasource="row.productList"
                         cache-key="systemRoleTable17-222" class="time-form">
          </ele-pro-table>
          <el-button type="text" slot="reference">{{ row.productCode }}</el-button>
        </el-popover>
      </template>
      <template v-if="taskDefinitionKey=='financeLeader'" v-slot:paidPrice="{row,$index}">
        <el-form-item
          :prop="'datasource.'+$index+'.paidPrice'"
          :rules="{required:true,trigger:'change',message:'请选择'}">
          <el-input-number :controls="false"
                           style="width: 100%"
                           v-model="row.paidPrice"
                           :precision="2"
                           @blur="(val)=>handleEditCost(row,'paidPrice','notPaidPrice')"
                           :max="row.totalPrice"></el-input-number>
        </el-form-item>

      </template>
      <template v-if="taskDefinitionKey=='financeLeader'" v-slot:paidDate="{row,$index}">
        <el-form-item
          :prop="'datasource.'+$index+'.paidDate'"
          :rules="{required:true,trigger:'change',message:'请选择'}">
          <el-date-picker
            type="date"
            style="width: 100%"
            v-model="row.paidDate"
            value-format="yyyy-MM-dd"
            placeholder="选择日期">
          </el-date-picker>
        </el-form-item>


      </template>
      <template v-if="taskDefinitionKey=='financeLeader'" v-slot:invoicedPrice="{row,$index}">
        <el-form-item
          :prop="'datasource.'+$index+'.invoicedPrice'"
          :rules="{required:true,trigger:'change',message:'请选择'}">
          <el-input-number :controls="false"
                           style="width: 100%"
                           v-model="row.invoicedPrice"
                           :precision="2"
                           @blur="(val)=>handleEditCost(row,'invoicedPrice','notInvoicedPrice')"
                           :max="row.totalPrice"></el-input-number>
        </el-form-item>
      </template>
      <template v-slot:headerReceivedPrice="{ column }">
        <span class="is-required">{{ column.label }}</span>
      </template>
      <template v-slot:headerpaidDate="{ column }">
        <span class="is-required">{{ column.label }}</span>
      </template>
      <template v-slot:headerInvoicedPrice="{ column }">
        <span class="is-required">{{ column.label }}</span>
      </template>
    </ele-pro-table>

    <el-row style="margin-top: 10px">
      <el-col :span="6" style="float: right;">
        <el-descriptions class="margin-top" direction="vertical" :column="3" size="small" border>
          <el-descriptions-item label="未付款总金额" >{{ priceObj.amountNotPaidPrice }}</el-descriptions-item>
          <el-descriptions-item label="未开票总金额">
            <template>{{ priceObj.amountNotInvoicedPrice }}</template>
          </el-descriptions-item>
        </el-descriptions>
      </el-col>
    </el-row>

  </el-form>

</template>
<script>

export default {
  components: {},
  props: ['datasource', 'dialogType', 'taskDefinitionKey', 'priceObj'],
  computed: {
    columns() {
      let basicFields = [
        {
          width: 60,
          label: '序号',
          type: 'index',
          columnKey: 'index',
          align: 'center',
        },
        {
          minWidth: 130,
          prop: 'contractNo',
          label: '合同编号',
          align: 'center',
          slot: 'contractNo',

        },
        {
          minWidth: 120,
          prop: 'orderNo',
          label: '采购订单编码',
          slot: 'orderNo',
          align: 'center',
          showOverflowTooltip: true
        },
        {
          minWidth: 140,
          prop: 'productName',
          label: '产品名称',
          slot: 'productName',
          align: 'center',
          showOverflowTooltip: true
        },
        {
          minWidth: 100,
          prop: 'specification',
          label: '规格',
          align: 'center',
          slot: 'specification',
          showOverflowTooltip: true
        },
        {
          minWidth: 100,
          prop: 'modelType',
          label: '型号',
          align: 'center',
          slot: 'modelType',
          showOverflowTooltip: true
        },
        {
          minWidth: 130,
          prop: 'contractTotalCount',
          label: '合同总数量',
          align: 'center',
          slot: 'contractTotalCount'
        },
        {
          minWidth: 100,
          prop: 'singlePrice',
          label: '单价',
          align: 'center',
          slot: 'singlePrice'
        },
        {
          minWidth: 100,
          prop: 'discountSinglePrice',
          label: '折后单价',
          align: 'center',
          slot: 'discountSinglePrice'
        },
        {
          minWidth: 130,
          prop: 'contractTotalPrice',
          label: '合同总金额',
          align: 'center',
          slot: 'contractTotalPrice'
        },
        {
          minWidth: 140,
          prop: 'receiveGoodsDate',
          label: '收货日期',
          align: 'center',
          slot: 'receiveGoodsDate',
          showOverflowTooltip: true
        },
        {
          minWidth: 120,
          prop: 'totalCount',
          label: '已收货数量',
          align: 'center',
          slot: 'totalCount'
        },
        {
          minWidth: 130,
          prop: 'totalPrice',
          label: '已收货金额',
          align: 'center',
          slot: 'totalPrice'
        },
        {
          minWidth: 130,
          prop: 'discountTotalPrice',
          label: '折后已收货金额',
          align: 'center',
          slot: 'discountTotalPrice'
        },
      ]
      let permissionType = {
        'financeLeader': [
          {
            minWidth: 140,
            prop: 'paidDate',
            label: '付款日期',
            align: 'center',
            slot: 'paidDate',
            showOverflowTooltip: true,
            headerSlot:'headerPaidDate'
          },
          {
            minWidth: 130,
            prop: 'paidPrice',
            label: '已付款金额',
            align: 'center',
            slot: 'paidPrice'
          },
          {
            minWidth: 130,
            prop: 'notPaidPrice',
            label: '应付款金额',
            align: 'center',
            slot: 'notPaidPrice'
          },
          {
            minWidth: 130,
            prop: 'invoicedPrice',
            label: '已开票金额',
            align: 'center',
            slot: 'invoicedPrice'
          },
          {
            minWidth: 130,
            prop: 'notInvoicedPrice',
            label: '未开票金额',
            align: 'center',
            slot: 'notInvoicedPrice'
          },
        ],
        'leader': [
          {
            minWidth: 140,
            prop: 'paidDate',
            label: '付款日期',
            align: 'center',
            slot: 'paidDate',
            showOverflowTooltip: true
          },
          {
            minWidth: 130,
            prop: 'paidPrice',
            label: '已付款金额',
            align: 'center',
            slot: 'paidPrice'
          },
          {
            minWidth: 130,
            prop: 'notPaidPrice',
            label: '应付款金额',
            align: 'center',
            slot: 'notPaidPrice'
          },
          {
            minWidth: 130,
            prop: 'invoicedPrice',
            label: '已开票金额',
            align: 'center',
            slot: 'invoicedPrice'
          },
          {
            minWidth: 130,
            prop: 'notInvoicedPrice',
            label: '未开票金额',
            align: 'center',
            slot: 'notInvoicedPrice'
          },
        ],
        'uploadReceipt': [
          {
            minWidth: 140,
            prop: 'paidDate',
            label: '付款日期',
            align: 'center',
            slot: 'paidDate',
            showOverflowTooltip: true,
          },
          {
            minWidth: 130,
            prop: 'paidPrice',
            label: '已付款金额',
            align: 'center',
            slot: 'paidPrice'
          },
          {
            minWidth: 130,
            prop: 'notPaidPrice',
            label: '应付款金额',
            align: 'center',
            slot: 'notPaidPrice'
          },
          {
            minWidth: 130,
            prop: 'invoicedPrice',
            label: '已开票金额',
            align: 'center',
            slot: 'invoicedPrice'
          },
          {
            minWidth: 130,
            prop: 'notInvoicedPrice',
            label: '未开票金额',
            align: 'center',
            slot: 'notInvoicedPrice'
          },
        ],
      }
      permissionType[this.taskDefinitionKey] && basicFields.push(...permissionType[this.taskDefinitionKey])
      return basicFields
    },
  },
  data() {
    return {
      rules: {},
      form: {
        datasource: []
      },
      childrenColumns: [
        {
          minWidth: 120,
          prop: 'orderNo',
          label: '单据编码',
          align: 'center',
          slot: 'orderNo'
        },
        {
          minWidth: 120,
          prop: 'orderType',
          label: '单据类型',
          slot: 'orderType',
          align: 'center',
          formatter: (_row, _column, cellValue) => {
            return _row.orderType === 1 ? '销售发货' : _row.orderType === 2 ? '销售退货' : ""
          }
        },
        {
          minWidth: 140,
          prop: 'productName',
          label: '产品名称',
          align: 'center',
          slot: 'productName',
        },
        {
          minWidth: 100,
          prop: 'productCode',
          label: '编码',
          align: 'center',
          slot: 'productCode'
        },
        {
          minWidth: 100,
          prop: 'productBrand',
          label: '牌号',
          align: 'center',
          slot: 'productBrand'
        },
        {
          minWidth: 100,
          prop: 'modelType',
          label: '型号',
          align: 'center',
          slot: 'modelType'
        },
        {
          minWidth: 100,
          prop: 'specification',
          label: '规格',
          align: 'center',
          slot: 'specification'
        },
        {
          minWidth: 100,
          prop: 'totalCount',
          label: '数量',
          align: 'center',
          slot: 'totalCount'
        },
        {
          minWidth: 120,
          prop: 'measuringUnit',
          label: '计量单位',
          align: 'center',
          slot: 'measuringUnit'
        },
        {
          minWidth: 100,
          prop: 'singlePrice',
          label: '单价',
          align: 'center',
          slot: 'singlePrice'
        },
        {
          minWidth: 100,
          prop: 'totalPrice',
          label: '金额',
          align: 'center',
          slot: 'totalPrice'
        }
      ],
    };
  },
  watch: {
    datasource: {
      handler(val) {
        this.form.datasource = this.datasource
      },
      deep: true,
      immediate: true
    },
    form: {
      handler(val) {
        this.$emit('update:datasource', this.form.datasource)
      },
      deep: true,
      immediate: true
    },
  },
  methods: {
    handleEditCost(row, p1, p2) {
      if (!row[p1]) return row[p2] = row.totalPrice.toFixed(2)
      row[p2] = (row.totalPrice - row[p1]).toFixed(2)
    },
    remove(tableIndex, lineIndex, delType) {
      let params = {
        tableIndex,
        lineIndex,
        delType
      }
      this.$emit('handleRemove', params)
    },
    getSummaries(param) {
      const {columns, data} = param;
      const sums = [];
      let fields = ['totalPrice', 'paidPrice', 'notPaidPrice', 'invoicedPrice', 'notInvoicedPrice','discountTotalPrice']
      columns.forEach((column, index) => {
        if (index === 0) {
          sums[index] = '合计';
          return;
        }
        const values = fields.includes(column.property) ? data.map(item => Number(item[column.property])) : []
        if (!values.every(value => isNaN(value))) {
          sums[index] = values.reduce((prev, curr) => {
            const value = Number(curr);
            if (!isNaN(value)) {
              return prev + curr;
            } else {
              return prev;
            }
          }, 0);
          sums[index] = sums[index].toFixed(2)
        } else {
          sums[index] = '';
        }
      });

      return sums;
    }
  }
};
</script>
<style lang="scss" scoped>
.headbox {
  display: flex;
  justify-content: space-between;
  align-items: center;

  .amount {
    font-size: 14px;
    font-weight: bold;
    padding-right: 30px;
  }
}

.time-form .el-form-item {
  margin-bottom: 0 !important;
}

::v-deep .period {
  display: flex;

  .borderleftnone {
    .el-input--medium .el-input__inner {
      border-top-right-radius: 0;
      border-bottom-right-radius: 0;
    }
  }

  .borderrightnone {
    .el-input--medium .el-input__inner {
      border-top-left-radius: 0;
      border-bottom-left-radius: 0;
    }
  }

}

::v-deep .time-form tbody > tr:hover > td {
  background-color: transparent !important;
}

::v-deep .time-form .el-table tr {
  background-color: #ffffff;
}

.pricebox {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  font-weight: bold;
}


</style>
