<template>
  <div class="container registration-details">
    <div class="content">
      <div>
        <el-table :data="tableData" show-summary style="width: 538px" border>
          <el-table-column align="center" prop="RealName" label="分享人">
            <template slot-scope="{ row }">
              <span>{{ row.RealName }}({{ row.CompanyName }})</span>
            </template>
          </el-table-column>
          <el-table-column align="center" prop="Count" label="报名数量" width="196">
            <template slot-scope="{ row }">
              <span class="editsty" @click="numberHandler(row)">{{ row.Count }}</span>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="chart-content">
        <moneyDetailsChart :chartData="chartData" />
      </div>
    </div>
    <!-- 点击量详情 -->
    <el-dialog :visible.sync="showDetails" :modal-append-to-body="false" v-dialogDrag width="65vw" @close="cancelHandle">
      <div slot="title">{{ shareInfo.RealName }}-报名详情</div>
      <div style="margin-bottom: 118px">
        <el-table :data="detailsList" style="width: 100%; margin: 20px 0 30px" ref="clickNumberRef" border @sort-change="detailSortChange">
          <el-table-column prop="CustomCompanyName" label="公司名称" align="center"> </el-table-column>
          <el-table-column prop="CustomName" label="姓名" align="center"> </el-table-column>
          <el-table-column prop="CustomMobile" label="手机号" align="center"> </el-table-column>
          <el-table-column prop="CreateTime" label="报名时间" align="center" min-width="140"> </el-table-column>
          <el-table-column prop="Amount" label="付款金额（元）" align="center" min-width="140">
            <template slot-scope="scope">
              <div v-if="scope.row.Enable == 1">
                <!-- 如果数据不为空，则双击后显示输入框 -->
                <div v-if="scope.row.isInput" @dblclick="handleDoubleClick(scope.$index, scope.row)">
                  <span class="editsty" v-if="scope.row.isInput">
                    {{ scope.row.Amount }}
                  </span>
                </div>
                <!-- 如果数据为空，则默认显示输入框 -->
                <div v-else>
                  <el-input style="width: 90%" type="number" @input="handleInput(scope.row)" v-model.number="scope.row.Amount" @blur="handleBlur(scope.$index, scope.row)"></el-input>
                </div>
              </div>
              <span v-else>{{ scope.row.Amount }}</span>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { departInterence } from "@/api/api.js";

import moneyDetailsChart from "./components/moneyDetailsChart.vue";
export default {
  data() {
    return {
      tableData: [],
      showDetails: false,
      detailsList: [],
      chartData: [],
      shareInfo: {},
    };
  },
  components: { moneyDetailsChart },
  mounted() {
    this.getDataList();
  },
  methods: {
    // 点击了数量
    numberHandler(row) {
      this.showDetails = true;
      this.shareInfo = row;
      this.getdetailsDataList(row);
    },
    // 关闭了弹框
    cancelHandle() {
      this.detailsList = [];
      this.showDetails = false;
      this.shareInfo = {};
    },
    // 双击切换输入框
    handleDoubleClick(index, row) {
      row.isInput = false;
    },
    // 失去焦点后的请求
    handleBlur(index, row) {
      // 可能需要更新tableData来反映新输入的值
      this.editAmount(row);
      // 完成编辑，隐藏输入框
      row.isInputBol = row.Amount && row.Amount > 0 ? true : false;
    },
    // 输入框的值
    handleInput(row) {
      row.Amount = row.Amount ? row.Amount : 0;
    },
    // 获取数据
    async getDataList() {
      const res = await departInterence.getResearchStatisticsItem({
        BannerId: +this.$route.query.id,
      });
      if (res.Ret === 200) {
        this.tableData = res.Data.List || [];
        this.chartData = [res.Data.HasPayed, res.Data.NoPay];
      }
    },
    // 获取数据
    async getdetailsDataList(row) {
      const res = await departInterence.getResearchStatisticsDetail({
        Mobile: row.Mobile,
        BannerId: row.BannerId,
      });
      if (res.Ret === 200) {
        const arr = res.Data || [];
        this.detailsList = arr.map((item) => {
          return {
            ...item,
            isInput: item.Amount && item.Amount > 0 ? true : false,
          };
        });
      }
    },
    // 修改金额
    async editAmount(row) {
      const res = await departInterence.getResearchStatisticsAmount({
        YbResearchSignupStatisticsId: row.YbResearchSignupStatisticsId,
        Amount: row.Amount,
      });
      if (res.Ret === 200) {
        this.$message.success("修改成功");
      }
    },
  },
  beforeRouteEnter(to, from, next) {
    if (to.query.name) {
      to.matched[1].name = to.query.name + "报名详情";
    }
    next();
  },
};
</script>
<style scoped lang="scss">
.registration-details {
  .content {
    display: flex;
    .chart-content {
      flex: 1;
      flex-shrink: 0;
    }
  }
}
</style>
