<template>
  <div>
    <!--  会员信息  -->
    <el-row>
      <el-col  :span="18">
        <el-card style="height: 170px; overflow: hidden;" >
          <div slot="header" class="clearfix">
            <span style="font-weight: bold; font-size: 16px;">{{ formData.levelName }}</span>
          </div>
          <!--客户基本信息-->
          <el-descriptions size="mini" class="margin-top" :column="3" border>
            <el-descriptions-item>
              <template slot="label">
                会员名称
              </template>
              {{ formData.cusName }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                性别
              </template>
              <dict-tag :type="DICT_TYPE.DICT_SYS_USER_SEX" :value="formData.sex"/>
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                联系方式
              </template>
              {{ formData.phoneNumber }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                生日
              </template>
              {{ parseTime(formData.birthday, '{y}-{m}-{d}') }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                客户来源
              </template>
              <dict-tag :type="DICT_TYPE.DICT_CUS_DATA_FROM" :value="formData.dataFrom"/>
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                最近办理业务
              </template>
              <dict-tag :type="DICT_TYPE.DICT_CUS_BUSI_TYPE" :value="formData.nearDoContent"/>
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                联系地址
              </template>
              {{ formData.address }}
            </el-descriptions-item>

            <el-descriptions-item>
              <template slot="label">
                会员标签
              </template>
              <template v-for="item in formData.labelList">
                <el-popover
                  placement="top-start"
                  width="200"
                  trigger="hover"
                  :content="item.labelContent">
                  <el-tag
                    style="margin-left: 5px"
                    :key="item.id"
                    slot="reference"
                    :type="item.labelType">
                    {{ item.labelName }}
                  </el-tag>
                </el-popover>
              </template>
            </el-descriptions-item>

          </el-descriptions>
        </el-card>
      </el-col>
      <el-col  :span="6">
        <el-card style="height: 170px; overflow: hidden;" >
          <div slot="header" class="clearfix">
            <span style="font-weight: bold; font-size: 16px;">余额/积分</span>
          </div>
          <div class="card-content">
            <span class="balance-label">余额：</span>
            <span class="balance-value">{{ formData.balance }}</span>
            <br />
            <span class="balance-label">累计充值：</span>
            <span class="balance-value">{{ formData.allBalance }}</span>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <!--  余额卡券  -->
    <el-row >
      <el-col :span="16">
        <el-card style="height: 260px; overflow: hidden;" >
          <div slot="header" class="clearfix">
            <span style="font-weight: bold; font-size: 16px;"> 会员卡券</span>
          </div>
          <el-table
            :data="formData.couponList"
            border
            size="mini"
            height="200"
            style="width: 100%">
            <el-table-column   show-overflow-tooltip prop="couponName" label="卡券名称" >
            </el-table-column>
            <el-table-column label="卡券类型" width="80" align="left" prop="couponType">
              <template v-slot="scope">
                <dict-tag :type="DICT_TYPE.MEMBER_COUPON_TYPE" :value="scope.row.couponType"/>
              </template>
            </el-table-column>
            <el-table-column label="适用车型" width="130" align="center" prop="carModel">
              <template v-slot="scope">
                <span v-if="scope.row.carModel == null">不限</span>
                <dict-tag :type="DICT_TYPE.MEMBER_CAR" :value="scope.row.carModel"/>
              </template>
            </el-table-column>
            <el-table-column label="核销规则" width="100" align="center" prop="outRule">
              <template v-slot="scope">
                <dict-tag :type="DICT_TYPE.MEMBER_COUPON_OUT_RULE" :value="scope.row.outRule"/>
              </template>
            </el-table-column>
            <el-table-column label="开始有效期" align="center" prop="beginTime" width="150">
              <template v-slot="scope">
                <span>{{ parseTime(scope.row.beginTime) }}</span>
              </template>
            </el-table-column>
            <el-table-column label="结束有效期" align="center" prop="endTime" width="150">
              <template v-slot="scope">
                <span>{{ parseTime(scope.row.endTime) }}</span>
              </template>
            </el-table-column>
            <el-table-column label="领取时间" align="center" prop="createTime" width="150">
              <template v-slot="scope">
                <span>{{ parseTime(scope.row.createTime) }}</span>
              </template>
            </el-table-column>
            <el-table-column fixed="right" label="操作" width="110" align="center" class-name="small-padding fixed-width">
              <template v-slot="scope">
                <el-button size="mini" type="text" icon="el-icon-goods" @click="openChildForm(scope.row.id)">核销</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-card>
      </el-col>
      <el-col :span="8">
        <el-card style="height: 260px; overflow: hidden;" >
          <div slot="header" class="clearfix">
            <span style="font-weight: bold; font-size: 16px;"> 会员车辆</span>
          </div>
          <template v-for="item in formData.carList">
            <el-descriptions  direction="vertical" :column="3" :title="item.modelStr+'('+item.licenseNumber+')'">
              <el-descriptions-item label="下次保养时间">{{ parseTime(item.nextMaintenanceDate, '{y}-{m}-{d}') }}</el-descriptions-item>
              <el-descriptions-item label="下次年检时间">{{ parseTime(item.nextInspectionDate, '{y}-{m}-{d}') }}</el-descriptions-item>
              <el-descriptions-item label="保险到期时间">{{ parseTime(item.insuranceExpiryDate, '{y}-{m}-{d}') }}</el-descriptions-item>
            </el-descriptions>
          </template>
        </el-card>
      </el-col>
    </el-row>
    <!--  可参与活动  -->
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span style="font-weight: bold; font-size: 16px;">可参与活动</span>
      </div>
      <el-table size="mini" height="200" v-loading="loading" :data="list" :stripe="true" :show-overflow-tooltip="true">
        <el-table-column width="100" label="活动名称" align="left" prop="name"/>
        <el-table-column label="活动描述" show-overflow-tooltip align="left" prop="remark"/>
        <el-table-column label="活动开始时间" align="center" prop="beginTime" width="150">
          <template v-slot="scope">
            <span>{{ parseTime(scope.row.beginTime) }}</span>
          </template>
        </el-table-column>
        <el-table-column label="活动结束时间" align="center" prop="endTime" width="150">
          <template v-slot="scope">
            <span>{{ parseTime(scope.row.endTime) }}</span>
          </template>
        </el-table-column>
        <el-table-column label="是否可重复参与" align="center" prop="endTime" width="150">
          <template v-slot="scope">
            <span v-if="scope.row.isParticipate == '1'">可重复参与</span>
            <span v-else>不可重复参与</span>
          </template>
        </el-table-column>
        <el-table-column label="参与情况" align="center" prop="endTime" width="150">
          <template v-slot="scope">
            <span v-if="scope.row.isJoin == '1'">已参与</span>
            <span v-else>未参与</span>
          </template>
        </el-table-column>
        <el-table-column width="100" label="操作" align="center" class-name="small-padding fixed-width">
          <template v-slot="scope">
            <el-button :disabled="scope.row.isParticipate != '1' && scope.row.isJoin == '1'" size="mini" type="text" icon="el-icon-present" @click="openActive(scope.row)">参与活动</el-button>
          </template>
        </el-table-column>
      </el-table>

    </el-card>
    <ReceiveCouponForm @success="getById(param.id)"  ref="receiveCouponForm"/>
    <RuchForm @success="getById(param.id)"  ref="RuchFormRef"/>

  </div>
</template>

<script>
import * as CustomerMainApi from '@/api/base/customer';
import * as ActiveMainApi from '@/api/member/active';
import ReceiveCouponForm from '@/views/base/customer/ReceiveCouponForm.vue'
import RuchForm from '@/views/base/customer/RuchForm.vue'
export default {
  name: "CustomerMember",
  components: {ReceiveCouponForm,RuchForm},
  data() {
    return {
      //列表传入数据
      param: {},
      //当前客户数据
      formData: {},
      // 遮罩层
      loading: true,
      //可参与活动列表
      list:[],
      // 总条数
      total: 0,
      // 查询参数
      queryParams: {
        isNow:'1',
        cusId:'',
      },
    };
  },
  created() {
    const row = this.$route.query.row
    this.param = row
    this.queryParams.cusId = row.id
    this.getById(row.id)
    this.getActiveList()

  },
  methods: {
    /**通过id客户信息查询*/
    async getById(id) {
      const res = await CustomerMainApi.getCustomerMain(id);
      this.formData = res.data;
    },
    /**可参与活动列表*/
    async getActiveList() {
      try {
        this.loading = true;
        const res = await ActiveMainApi.joinActive(this.queryParams);
        this.list = res.data;
      } finally {
        this.loading = false;
      }
    },
    /**参与活动*/
    async openActive(row){
      if (row.isCoupon == '1' && row.isRechRule == '0'){
        this.$refs["receiveCouponForm"].open(row.id,this.param);
      }
      if (row.isRechRule == '1'){
        this.$refs["RuchFormRef"].open(row.id,this.param);
      }
    }

  }
}
</script>

<style scoped>
.el-card_body {
  padding: 5px 5px 5px 5px;
}
.custom-card {
  height: 165px;
  overflow: hidden;
  border-radius: 10px; /* 圆角 */
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); /* 阴影 */
  padding: 15px; /* 内边距 */
}

.card-header {
  margin-bottom: 10px; /* 头部和内容之间的间距 */
}

.card-content {
  font-size: 25px; /* 内容的字体大小 */
}

.balance-label {
  font-weight: bold; /* 标签字体加粗 */
}

.balance-value {
  color: #f50a1d; /* 自定义颜色，例如 Element 的主色 */
  font-weight: normal; /* 余额的显示要求正常 */
}
.el-card.is-always-shadow{
  -webkit-box-shadow:none;
  box-shadow:none;
  border-radius: 0;
}
</style>
