<template>
  <a-drawer
    :title="title"
    :width="width"
    placement="right"
    @close="close"
    destroyOnClose
    :visible="visible"
    class="equipment-detail-drawer"
    >

    <a-descriptions bordered>
        <a-descriptions-item label="名称">
            {{dataList.name}}
        </a-descriptions-item>
        <a-descriptions-item label="能源分类">
            {{dataList.energytypeid_dictText}}
        </a-descriptions-item>
        <a-descriptions-item label="费率类型">
            {{dataList.ratetype_dictText}}
        </a-descriptions-item>
        <a-descriptions-item label="单位">
            {{dataList.rateunit}}
        </a-descriptions-item>
        <a-descriptions-item label="费率有效期开始">
            {{dataList.begintime}}
        </a-descriptions-item>
        <a-descriptions-item label="费率有效期结束">
            {{dataList.endtime}}
        </a-descriptions-item>
        <a-descriptions-item label="备注" :span="2">
            {{dataList.remark}}
        </a-descriptions-item>
    </a-descriptions>

    <a-divider orientation="left" style="font-size: 14px;"> 价格信息表 </a-divider>

    <a-table
        size="small"
        :columns="columns"
        :dataSource="logData"
        :pagination="false"
        :rowKey="(record, index) => { return index }"
        bordered
        class="j-table-force-nowrap"
        >

        <template slot="pandv" slot-scope="record">
          <div v-if="record.pandv == 0">尖</div>
          <div v-if="record.pandv == 1">峰</div>
          <div v-if="record.pandv == 2">平</div>
          <div v-if="record.pandv == 3">谷</div>
        </template>
    </a-table>

  </a-drawer>
</template>

<script>
  import { httpAction, getAction } from '@/api/manage'
  export default {
    components: { 
    },
    name: 'RepairManageDetail',
    data () {
      return {
        title:"详情",
        width:'1000',
        visible: false,
        confirmLoading: false, // 加载中
        dataList: {}, // 详情
        logData: [], // 操作日志表格数据
        // 表头
        columns: [
        ],
        url: {
            list: '/energyRate/energyRate/xqqueryById'
        },
      }
    },
    created(){
    },
    methods: {
      detail (record) {
        console.log(record)
        this.dataList = record
        getAction(this.url.list, {id:record.id}).then((res) => {
        //   console.log(77777,res)
          this.logData = res.result.baseEnergyRateDetailList
          if (res.result.ratetype == 1) {
            this.columns = [
              {
                title: '分时开始时间',
                dataIndex: 'begintime',
                key: 'begintime',
                width:"200px",
                align: 'center',
              },
              {
                title: '分时结束时间',
                dataIndex: 'endtime',
                key: 'endtime',
                width:"200px",
                align: 'center',
              },
              {
                title: '峰平谷',
                // dataIndex: 'pandv',
                key: 'pandv',
                width:"200px",
                align: 'center',
                scopedSlots: { customRender: 'pandv' },
              },
              {
                title: '价格',
                dataIndex: 'price',
                key: 'price',
                width:"200px",
                align: 'center',
              },
            ]
          } else {
            this.columns = [
              {
                title: '起始量',
                dataIndex: 'beginamount',
                key: 'beginamount',
                width:"200px",
                align: 'center',
              },
              {
                title: '结束量',
                dataIndex: 'endamount',
                key: 'endamount',
                width:"200px",
                align: 'center',
              },
              {
                title: '价格',
                dataIndex: 'price',
                key: 'price',
                width:"200px",
                align: 'center',
              },
            ]
          }
        })
        this.visible = true;
      },
      close () {
        this.visible = false;
      },
      callback(key) {
        console.log(key);
      },

    }
  }
</script>

<style lang="less" scoped>
</style>