<template>
  <div class="app-container">
    <el-card>
      <xd-base-field
        ref="testForm"
        :list="formList"
        size="medium"
      >
        <template slot="money" slot-scope="scope">
          <el-form
            :label-width="scope.width"
            ref="customForm"
          >
            <el-form-item
              label="退款:"
            >
              <el-button @click="refund">退款</el-button>
            </el-form-item>
          </el-form>
        </template>
      </xd-base-field>
    </el-card>

    <el-card class="app-container__list">
      <div class="app-container__list-table">
        <el-table class="app-table" :data="tables" border fit highlight-current-row style="width: 100%">
          <el-table-column align="center" label="套餐名称" prop="package_name">
          </el-table-column>
          <el-table-column align="center" label="套餐价格" prop="package_price"></el-table-column>
          <el-table-column align="center" label="套餐类型" width="120" prop="package_type">
          </el-table-column>
          <el-table-column align="center" label="所属机构" prop="hosp_name"></el-table-column>
        </el-table>
      </div>
    </el-card>

    <el-card class="app-container__list">
      <div class="app-container__list-table">
        <el-table class="app-table" :data="operateTable" border fit highlight-current-row style="width: 100%">
          <el-table-column align="center" label="操作" prop="operate_name">
          </el-table-column>
          <el-table-column align="center" label="备注" prop="remark"></el-table-column>
          <el-table-column align="center" label="时间" width="120" prop="time">
          </el-table-column>
          <el-table-column align="center" label="操作人" prop="name"></el-table-column>
        </el-table>
      </div>
    </el-card>
  </div>

</template>

<script>
  import XdBaseField from "@/components/XdBaseField";

  export default {
    name: "detail",
    components: {
      XdBaseField
    },

    data() {
      return {
        formList: [],
        tables: [
          {
            "package_name": "北京慈铭体检入职体检A",
            "package_price": "320",
            "package_type": "入职体检",
            "hosp_name": "北京慈铭体检",
          },
        ],
        operateTable: [
          {
            "operate_name": "退款",
            "remark": "买错或买多",
            "time": "2021-12-15 12:06:30",
            "name": "张三",
          },
        ]
      }
    },

    created() {
      this.initSearchForm()
    },

    methods: {

      /**
       * @description 初始化搜索模块
       */
      initSearchForm() {
        let formList = [
          {
            label: '订单号:', //label
            ele: 'el-input',
            valueKey: 'orderNumber', //form[valueKey]
            value: '100100100', //v-model
            disabled: true
          },
          {
            label: '订单状态:', //label
            ele: 'el-input',
            valueKey: 'order_status', //form[valueKey]
            value: '支付成功', //v-model
            disabled: true
          },
          {
            label: '套餐类型:', //label
            ele: 'el-input',
            valueKey: 'package_type', //form[valueKey]
            value: '入职体检', //v-model
            disabled: true
          },
          {
            label: '套餐名称:', //label
            ele: 'el-input',
            valueKey: 'package_name', //form[valueKey]
            value: '入职体检A', //v-model
            disabled: true
          },
          {
            label: '订单价格:', //label
            ele: 'el-input',
            valueKey: 'order_price', //form[valueKey]
            value: '320', //v-model
            disabled: true
          },
          {
            label: '所属机构:', //label
            ele: 'el-input',
            valueKey: 'hosp_name', //form[valueKey]
            value: '北京慈铭体检', //v-model
            disabled: true
          },
          {
            label: '下单时间:', //label
            ele: 'el-input', //package 名称
            valueKey: 'create_time', //form[valueKey]
            value: '2021-12-15 12:06:30', //v-model
            disabled: true
          },
          {
            label: '预约姓名:', //label
            ele: 'el-input', //package 名称
            valueKey: 'name', //form[valueKey]
            value: '张三', //v-model
            disabled: true
          },
          {
            label: '手机号:', //label
            ele: 'el-input', //package 名称
            valueKey: 'phone', //form[valueKey]
            value: '177xxxx3322', //v-model
            disabled: true
          },
          {
            label: '支付卡号:', //label
            ele: 'el-input', //package 名称
            valueKey: 'card_number', //form[valueKey]
            value: '123456789', //v-model
            disabled: true
          },
          {
            label: '补差金额:', //label
            ele: 'el-input', //package 名称
            valueKey: 'money', //form[valueKey]
            value: '10', //v-model
            disabled: true
          },
          {
            label: '', //label
            ele: 'slot', //package 名称
            slot: 'money',
          },
        ];

        this.formList = formList;

      },

      /**
       * @description 退款
       */
      refund() {
        this.$confirm('您确定要退款吗?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {

        }).catch(() => {

        });
      }
    }
  }
</script>

<style scoped lang="scss">
  .app-container__list {
    margin-top: 20px;
  }

  @media screen and (max-width: 768px) {
    .app-container__list {
      margin-top: 10px;
    }
  }
</style>
