<template>
  <div>
    <el-dialog
      title=""
      :visible.sync="isShow"
      width="900px"
      class="cashFlowBox"
      :close-on-click-modal="false"
      :before-close="closeDialog"
      append-to-body
    > 
        <el-descriptions v-if="descriptionList && descriptionList.length > 0" :column="2" border>
          <el-descriptions-item v-for="item in descriptionList" :key="item.value" :label="$t( item.langId)" :labelStyle="labelStyle" :contentStyle="contentStyle">
            {{ item.value }}
          </el-descriptions-item>
        </el-descriptions>
        <div v-if="cashData && cashData.length > 0" :class="{'table-sty':  desList.length > 0 }">
          <el-table :data="cashData" border stripe :max-height="300" :header-cell-style="{'text-align': 'center'}">
            <el-table-column width="1" />
            <el-table-column
              v-for="(col, index) in columns"
              :key="index"
              :label="$t(col.langId)"
              :prop="col.field"
              :width="100"
              :align="col.align || 'center'"
            >
              <template slot-scope="scope">
                <template v-if="col.isLink && scope.row.hasChildren">
                  <el-link :underline="false" type="primary" @click="handleClick(scope.row)">{{scope.row[col.field]}}</el-link>
                </template>
                <template v-else>
                  <span>{{scope.row[col.field]}}</span>
                </template>
              </template>
            </el-table-column>
          </el-table>
        </div>
      <template #footer>
        <div class="btns">
          <el-button size="medium" @click="closeDialog">关闭</el-button>
        </div>
      </template>
    </el-dialog>
    <cash-flow-msg-box v-if="showBox" ref="subCashMsgBox" :isShow="showBox" :columns="dialogCols" :desList="dialogDes" :tableData="dialogTable" @handleClose="closeSelf"></cash-flow-msg-box>
  </div>
</template>
<script>
import {formatMoney, formateDate} from '@/utils' 
export default {
  name: 'cashFlowMsgBox',
  props: {
    isShow: {
      type: Boolean,
      default: () => false
    },
    desList: {
      type: Array,
      default: () => []
    },
    columns: {
      type: Array,
      default: () => []
    },
    tableData: {
      type: Array,
      default: () => []
    },
  },
  data() {
    return {
      // dialogVisible: false,
      showDes: true,
      showTable: true,
      showBox: false,
      contentStyle: {
        'text-align': 'left'
      },
      labelStyle: {
        'width': '140px',
        'background-color':'var(--bg-color-2)',
        'color':'var(--table-text-color)'
      },
      dialogDes: [],
      dialogCols: [],
      dialogTable: [],
      cashData: [],
      descriptionList: []
    };
  },
  mounted() {
    this.init()
  },
  methods: {
    init() {
      this.cashData = !this.tableData ? [] : JSON.parse(JSON.stringify(this.tableData))
      this.descriptionList = !this.desList ? [] : JSON.parse(JSON.stringify(this.desList))
      this.cashData.forEach(item => {
        item.coupon = item.coupon ? formatMoney(item.coupon, 8) : ''
        item.paymentDateDf = item.paymentDateDf ? formatMoney(item.paymentDateDf, 8) : ''
        item.fixingRate = item.fixingRate ? formatMoney(item.fixingRate, 8) : ''
        item.amount =item.amount ? formatMoney(item.amount, 2) : ''
        item.dfAmount = item.dfAmount ? formatMoney(item.dfAmount, 2) : ''
        item.startDateDf = item.startDateDf ? formatMoney(item.startDateDf, 8) : ''
        item.endDateDf = item.endDateDf ? formatMoney(item.endDateDf, 8) : ''
        item.nominal = item.nominal ? formatMoney(item.nominal, 2) : ''
        item.startDate = item.startDate ? formateDate(item.startDate) : ''
        item.endDate = item.endDate ? formateDate(item.endDate) : ''
        item.paymentDate = item.paymentDate ? formateDate(item.paymentDate) : ''
        item.fixingDate = item.fixingDate ? formateDate(item.fixingDate) : ''
        item.periodStartDate = item.periodStartDate ? formateDate(item.periodStartDate) : ''
        item.periodEndDate = item.periodEndDate ? formateDate(item.periodEndDate) : ''
      })
      this.descriptionList.forEach(item => {
        if (item.field === 'coupon' || item.field === 'fixingRate' || item.field === 'startDateDf' || item.field === 'endDateDf') {
          item.value = formatMoney(item.value, 8)
        } else if (item.field === 'startDate' || item.field === 'endDate' || item.field === 'periodStartDate' || item.field === "periodEndDate" || item.field === 'fixingDate' || item.field === 'paymentDate') {
          item.value = formateDate(item.value, 2)
        }
      })
    },
    closeDialog() {
      this.showBox = false;
      this.$emit('handleClose');
    },
    showDialog() {
      this.isShow = true;
    },
    handleClick(row) {
      this.dialogCols = row.columns || []
      if (Object.keys(row.labelData).length > 0) {
        for (const key in row.labelData) {
          row.labelInfo.forEach(item => {
            if (item.field === key) item.value = row.labelData[key]
          })
        }
      }
      this.dialogDes = JSON.parse(JSON.stringify(row.labelInfo))
      this.dialogTable = row.children || []
      this.showBox = true
    },
    setDesc(row, list) {
      for(const key in row) {
        list.forEach(i => {
          if (i.key === key) i.value = row[key]
        })
      }
      return list
    },
    closeSelf() {
      this.showBox = false
    }
  },
}
</script>
<style lang="scss" scoped>
.cashFlowBox {
  .table-sty {
    margin-top: 16px;
  }
}

</style>