<template>
  <a-modal
    class="setmealItemDetailModal"
    title="查看"
    width="80%"
    centered
    :footer="null"
    :maskClosable="false"
    :destroyOnClose="true"
    @cancel="isShow=false"
    v-model="isShow">
    <div class="table-con">
      <div class="table-main" v-if="bundleItemList">
        <p class="table-tit">服务：</p>
        <a-table
          ref="table-item"
          size="middle"
          :rowKey="(record) => record.id"
          :columns="columns_item"
          :dataSource="bundleItemList"
          :pagination="false"
          bordered>
          <!-- 工时费 -->
          <template slot="priceL3" slot-scope="text, record">{{ record.itemPrice ? record.itemPrice : 0 }}元</template>
          <!-- 次数 -->
          <template slot="itemTimes" slot-scope="text, record">{{ record.times ? record.times : '--' }}</template>
          <!-- 价值 -->
          <template slot="worth" slot-scope="text, record">{{ Number(record.itemPrice ? record.itemPrice : 0) * (record.times ? record.times : 0) }}元</template>
        </a-table>
      </div>
      <div class="btn-cont">
        <a-button id="setmealItemDetail-cancel" class="setmealItemDetail-cancel" @click="isShow=false">返回</a-button>
      </div>
    </div>
  </a-modal>
</template>

<script>
import { STable } from '@/components'
import { getBundleDetails } from '@/api/customerBundle.js'
export default {
  name: 'SetmealItemDetailModal',
  components: { STable },
  props: {
    openModal: {
      //  弹框是否展示
      type: Boolean,
      default: false
    },
    setmealId: {
      //  套餐id
      type: String,
      default: ''
    }
  },
  data () {
    return {
      isShow: this.openModal, //  弹框是否展示
      columns_item: [
        { title: '服务名称', dataIndex: 'itemName', width: 120, align: 'center' },
        { title: '服务类别', dataIndex: 'itemClsName', width: 100, align: 'center' },
        { title: '工时费', scopedSlots: { customRender: 'priceL3' }, width: 100, align: 'center' },
        { title: '次数', scopedSlots: { customRender: 'itemTimes' }, width: 100, align: 'center' },
        { title: '价值', scopedSlots: { customRender: 'worth' }, width: 100, align: 'center' }
      ],
      bundleItemList: []
    }
  },
  methods: {
    //  套餐信息
    getSetmealInfo (id) {
      getBundleDetails({ id: id }).then(res => {
        console.log(res)
        if (res.status == 200) {
          this.bundleItemList = res.data.bundleItemList || []
        } else {
          this.bundleItemList = []
        }
      })
    }
  },
  watch: {
    //  父页面传过来的弹框状态
    openModal (newValue, oldValue) {
      this.isShow = newValue
    },
    //  重定义的弹框状态
    isShow (val) {
      if (!val) {
        this.$emit('close')
      }
    },
    setmealId (newValue, oldValue) {
      if (newValue && this.isShow) {
        this.getSetmealInfo(newValue)
      }
    }
  }
}
</script>

<style lang="less">
  .setmealItemDetailModal{
    .table-con{
      .table-main{
        .table-tit{
          margin: 0 0 10px;
        }
        margin: 0 0 30px;
      }
    }
    .btn-cont{
      text-align: center;
      .setmealPayMoney-cancel{
        margin-left: 30px;
      }
    }
  }
</style>
