<template>
  <el-dialog title="分销详情" :close-on-click-modal="false" :visible.sync="open" width="1200px" append-to-body>
    <el-collapse v-model="activeName" >
      <el-collapse-item title="基本信息" name="base">
        <el-descriptions :contentStyle="CS" :label-style="LS " class="margin-top" :column="3" size="medium" border>
          <el-descriptions-item label="id">
            {{info.id}}
          </el-descriptions-item>
          <el-descriptions-item label="类型">
            <cai-dict-tag :options="consumeLogTypeList" :value="info.type" />
          </el-descriptions-item>
          <el-descriptions-item label="是否计算">
            <cai-dict-tag :options="consumeLogCalculateStatusList" :value="info.calculateStatus" />
          </el-descriptions-item>
          <el-descriptions-item label="类型">
            <cai-dict-tag :options="consumeLogStatusList" :value="info.status" />
          </el-descriptions-item>
          <el-descriptions-item label="后台操作？">
            <cai-dict-tag :options="booleanList" :value="info.admin" />
          </el-descriptions-item>
          <el-descriptions-item label="分销时间">
            {{info.opCreate}}
          </el-descriptions-item>
          <el-descriptions-item label="创建时间">
            {{info.createTime}}
          </el-descriptions-item>
          <el-descriptions-item label="链路号">
            {{info.traceId}}
          </el-descriptions-item>
        </el-descriptions>
      </el-collapse-item>
      <el-collapse-item title="消费方" name="source">
        <el-descriptions :contentStyle="CS" :label-style="LS" class="margin-top" :column="2" size="medium" border>
          <el-descriptions-item label="发生金额">
            {{info.amount}}
          </el-descriptions-item>
          <el-descriptions-item :label="systemName+'号'">
            {{info.sourceUsercode}}
          </el-descriptions-item>
          <el-descriptions-item label="手机">
            {{info.sourcePhone}}
          </el-descriptions-item>
        </el-descriptions>
      </el-collapse-item>
      <el-collapse-item title="接收方" name="target">
        <el-descriptions :contentStyle="CS" :label-style="LS" class="margin-top" :column="3" size="medium" border>
          <el-descriptions-item label="接收方金额">
            {{info.anchorAmount}}
          </el-descriptions-item>
          <el-descriptions-item :label="systemName+'号'">
            {{info.targetUsercode}}
          </el-descriptions-item>
          <el-descriptions-item label="手机">
            {{info.targetPhone}}
          </el-descriptions-item>
          <el-descriptions-item label="费率">
            {{info.targetRate}}
          </el-descriptions-item>
        </el-descriptions>
      </el-collapse-item>
      <el-collapse-item title="邀请方" name="one">
        <el-descriptions :contentStyle="CS" :label-style="LS" class="margin-top" :column="3" size="medium" border>
          <el-descriptions-item label="是否参与分销">
            <cai-dict-tag :options="booleanList" :value="info.oneJoin" />
          </el-descriptions-item>
          <el-descriptions-item label="是否为会长">
            <cai-dict-tag :options="isAnchorList" :value="info.oneIsUnion" />
          </el-descriptions-item>
          <el-descriptions-item label="邀请方金额">
            {{info.oneAmount}}
          </el-descriptions-item>
          <el-descriptions-item :label="systemName+'号'">
            {{info.oneUsercode}}
          </el-descriptions-item>
          <el-descriptions-item label="手机">
            {{info.onePhone}}
          </el-descriptions-item>
          <el-descriptions-item label="费率">
            {{info.oneRate}}
          </el-descriptions-item>
        </el-descriptions>
      </el-collapse-item>
      <el-collapse-item title="工会" name="union">
        <el-descriptions :contentStyle="CS" :label-style="LS" class="margin-top" :column="2" size="medium" border>
          <el-descriptions-item label="是否参与分销">
            <cai-dict-tag :options="booleanList" :value="info.unionJoin" />
          </el-descriptions-item>
          <el-descriptions-item label="工会金额">
            {{info.unionAmount}}
          </el-descriptions-item>
          <el-descriptions-item :label="systemName+'号'">
            {{info.unionUsercode}}
          </el-descriptions-item>
          <el-descriptions-item label="手机">
            {{info.unionPhone}}
          </el-descriptions-item>
          <el-descriptions-item label="费率">
            {{info.unionRate}}
          </el-descriptions-item>
        </el-descriptions>
      </el-collapse-item>
    </el-collapse>
  </el-dialog>
</template>

<script>
import {
  booleanList,
  consumeLogCalculateStatusList,
  consumeLogStatusList,
  consumeLogTypeList,
  isAnchorList
} from '@/constant/statusMap'
import {getConsumeLog, getConsumeLogTraceId} from "@/api/cai/consumeLog";

export default {
  name: "UserInfo",
  data() {
    return {
      systemName: process.env.VUE_APP_SYSTEM_HOME,
      consumeLogTypeList,consumeLogStatusList,consumeLogCalculateStatusList,booleanList,isAnchorList,
      activeName:['base','source'],
      CS: {
        'text-align': 'center',  //文本居中
        'min-width': '250px',   //最小宽度
        'word-break': 'break-all'  //过长时自动换行
      },
      LS: {
        // 'color': '#000',
        'text-align': 'center',
        // 'font-weight': '600',
        'height': '40px',
        // 'background-color': 'rgba(255, 97, 2, 0.1)',
        'min-width': '110px',
        'word-break': 'keep-all'
      },
      open:false,
      info:{},
      id: undefined,
    };
  },
  created() {

  },
  methods: {
    init(id){
      this.open = true;
      this.id = id;
      getConsumeLog(this.id).then(response => {
        this.info = response.data?response.data:{};
      });
    },
    traceIdInit(traceId){
      this.open = true;
      getConsumeLogTraceId(traceId).then(response => {
        this.info = response.data?response.data:{};
      });
    },
  }
};
</script>
<style lang="scss" scoped>
.el-row {
  margin-bottom: -15px;
  display: flex;
  flex-wrap: wrap
}

/* .el-card {
   min-width: 100%;
   height: 80%;  // 高度要设置百分比才可以
   margin-right: 20px;
   transition: all .5s;
 }*/
</style>
