<template>
    <div>
      <el-dialog
        title="合同明细"
        :visible.sync="dialogVisible"
        width="70%"
        :before-close="handleClose">
        <div class="detail-top">
          <div>行号: {{currentDate.lineNo}}</div>
          <div>费用名称: {{ currentDate.ebfhNameCn }}</div>
          <div>费用种类: {{ $utils.keyMatcher(currentDate.feeCategory, $keys.charging.feeCategory).name }}</div>
          <div>作业环节: {{ $utils.keyMatcher(currentDate.tranType, $keys.charging.tranType).name }}</div>
          <div>收支类型: {{ $utils.keyMatcher(currentDate.receivePay, $keys.charging.receivePay).name }}</div>
          <div>计费基准: {{ $utils.keyMatcher(currentDate.chargeBase, $keys.charging.chargeBase).name }}</div>
          <div>舍入类型: {{currentDate.roundingType}}</div>
          <div>费用类别: {{ $utils.keyMatcher(currentDate.feeType, $keys.charging.feeType).name }}</div>
          <div>单价: {{currentDate.price}}</div>
          <div>最低费用: {{currentDate.minFee}}</div>
          <div>最高费用: {{currentDate.maxFee}}</div>
          <div>备注: {{currentDate.remark}}</div>
          <div>计费方式:  {{ $utils.keyMatcher(currentDate.chargeType, $keys.charging.chargeType).name }}</div>
          <div>计费阶梯方式: {{currentDate.ladderType}}</div>
          <div>级差类型: {{currentDate.classType}}</div>
          <div>周期单位: {{currentDate.cycleUnit}}</div>
          <div>计费周期: {{currentDate.chargeCycle}}</div>
          <div>固定计费日: {{currentDate.fixDay}}</div>
        </div>
        <el-collapse v-model="activeName">
          <el-collapse-item title="级差" name="1" style="margin-bottom:20px;">
            <el-table
              ref="multipleTable"
              :data="poor"
              tooltip-effect="dark"
              style="width: 100%">
              <table-column
                type="selection"
                width="55">
              </table-column>
              <table-column
                prop="seq"
                label="序号"
                width="120">
              </table-column>
              <table-column
                label="级差区间从（大于）"
                prop="fmClass"
                width="120">
              </table-column>
              <table-column
                prop="toClass"
                label="级差区间到（小于等于）"
                width="120">
              </table-column>
              <table-column
                prop="priceType"
                label="按单价/按总价"
                show-overflow-tooltip>
              </table-column>
              <table-column
                prop="price"
                label="单价/总价"
                show-overflow-tooltip>
              </table-column>
            </el-table>
          </el-collapse-item>
          <el-collapse-item title="生效条件" name="2">
            <el-table
              ref="multipleTable"
              :data="takeEffect"
              tooltip-effect="dark"
              style="width: 100%">
              <table-column
                type="selection"
                width="55">
              </table-column>
              <table-column
                label="AND/OR"
                prop="andOr"
                width="120">
              </table-column>
              <table-column
                prop="leftBracket"
                label="("
                width="120">
              </table-column>
              <table-column
                prop="objName"
                label="对象"
                show-overflow-tooltip>
              </table-column>
               <table-column
                prop="objAttName"
                label="对象属性"
                show-overflow-tooltip>
              </table-column>
              <table-column
                prop="operator"
                label="运算符"
                show-overflow-tooltip>
              </table-column>
              <table-column
                prop="value"
                label="值"
                show-overflow-tooltip>
              </table-column>
              <table-column
                prop="rightBracket"
                label=")"
                show-overflow-tooltip>
              </table-column>
            </el-table>
          </el-collapse-item>
        </el-collapse>
      </el-dialog>
    </div>
</template>

<script>
export default {
  props: {
    dialogVisible: Boolean,
    currentDate: {
      type: Object,
      default: () => ({})
    },
  },
  data () {
    return {
      activeName: ['1', '2'],
      takeEffect: [],
      poor: [],
    }
  },
  watch: {
    currentDate: {
      handler (item) {
        const getPoorUrl = this.$API.charging.getPoor
        const url = this.$API.charging.getDetailCond
        const param = { contractNo: item.contractNo, lineNo: item.lineNo }
        this.$https.post(getPoorUrl, param).then(res => {
          this.poor = res.rows
        })
        this.$https.post(url, param).then(res => {
          this.takeEffect = res.rows
        })
      },
      deep: true
    }
  },
  methods: {
    handleClose (done) {
      this.$emit('dialogClose')
    }
  }
}
</script>

<style>
.detail-top {
  display: flex;
  flex-wrap: wrap;
}
.detail-top div{
  width: 25%;
  height: 30px;
  margin:10px 0;
}
</style>
