<template>
  <div class="container">
    <div>
      <el-button type="primary" @click="payVisible = true" style="float: right;"
        >添加缴费记录</el-button
      >
    </div>
    <!-- {{ userInfo }}
    {{ h5Info.userName }}
    <hr />
    {{ h5Info.passWord }} -->
    <h4 v-if="payInfoList.length > 0">
      <!-- <span>学生公众号链接:</span><span>{{ h5Link }}</span> -->
      <span>学生公众号链接:</span
      ><span
        ><el-button type="primary" @click="h5LinkDialogVisible = true"
          >显示链接</el-button
        ></span
      >
    </h4>

    <el-dialog
      title="学生公众号链接"
      :visible.sync="h5LinkDialogVisible"
      width="30%"
    >
      <span id="h5Link">{{ h5Link }}</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="h5LinkDialogVisible = false">取 消</el-button>
        <!-- <el-button type="primary" @click="h5LinkDialogVisible = false"
          >确 定</el-button
        > -->
        <el-button
          data-clipboard-target="#h5Link"
          data-clipboard-action="copy"
          type="primary"
          class="btn"
          @click="copy"
          >一键复制</el-button
        >
      </span>
    </el-dialog>

    <!-- {{ allPayCode }} -->

    <div v-for="item2 in allPayCode" :key="item2.label">
      <h2 v-if="payInfoList.length > 0">{{ item2.label }}</h2>
      <div
        class="payInfoItem"
        v-for="(item, index) in payInfoList"
        :key="index"
        v-show="item.costTag == item2.label"
      >
        <!-- {{ item }} -->
        <el-descriptions :title="item.costTag" :column="7">
          <el-descriptions-item label="添加信息人">{{
            item.adminNick
          }}</el-descriptions-item>
          <el-descriptions-item label="姓名">{{
            item.nameCn
          }}</el-descriptions-item>
          <el-descriptions-item label="学校">{{
            item.school
          }}</el-descriptions-item>
          <el-descriptions-item label="费用类型">{{
            // item.status
            item.status == 1
              ? "定金"
              : item.status == 2
              ? "补全费用"
              : item.status == 3
              ? "全款"
              : ""
          }}</el-descriptions-item>
          <!-- <el-descriptions-item label="备注">
          <el-tag size="small">学校</el-tag>
        </el-descriptions-item> -->
          <el-descriptions-item label="课程数量">{{
            item.courseNum
          }}</el-descriptions-item>
          <el-descriptions-item label="课程时间">{{
            item.courseTime
          }}</el-descriptions-item>
          <el-descriptions-item label="校园大使">{{
            item.campusAgent
          }}</el-descriptions-item>
          <el-descriptions-item label="市场负责人">{{
            item.marketLeader
          }}</el-descriptions-item>
          <el-descriptions-item label="费用金额">{{
            item.costMoney
          }}</el-descriptions-item>
          <el-descriptions-item label="优惠">{{
            item.discountMoney
          }}</el-descriptions-item>
          <el-descriptions-item label="支付方式">{{
            item.paymentWay
          }}</el-descriptions-item>
          <el-descriptions-item label="退费备注">{{
            item.returnNote
          }}</el-descriptions-item>
          <el-descriptions-item label="编辑退费备注">
            <el-button
              @click="editReturnNote(item.id, item.returnNote)"
              size="mini"
              >编辑</el-button
            >
          </el-descriptions-item>
          <el-descriptions-item label="导出财务模板">
            <el-button @click="pdf(item.id)" size="mini">预览</el-button>
          </el-descriptions-item>
        </el-descriptions>
      </div>
    </div>

    <el-dialog
      title="添加缴费记录"
      :visible.sync="payVisible"
      @close="cancel('payRecord')"
    >
      <el-form :model="payRecord" :rules="rules" ref="payRecord">
        <div class="line">
          <el-form-item
            label="缴费标签"
            prop="costTagId"
            :label-width="formLabelWidth"
          >
            <el-select v-model="payRecord.costTagId" clearable>
              <el-option
                v-for="item in allPayCode"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item
            label="费用类型"
            prop="status"
            :label-width="formLabelWidth"
          >
            <el-select v-model="payRecord.status" clearable>
              <el-option
                v-for="item in allStatus"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </div>
        <div class="line">
          <el-form-item
            label="课程数量"
            prop="courseNum"
            :label-width="formLabelWidth"
          >
            <el-select v-model="payRecord.courseNum" clearable>
              <el-option
                v-for="item in 10"
                :key="item"
                :label="item"
                :value="item"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </div>
        <div class="line">
          <el-form-item
            label="课程时间"
            prop="courseTime"
            :label-width="formLabelWidth"
          >
            <el-input v-model="payRecord.courseTime"> </el-input>
          </el-form-item>
          <el-form-item
            label="市场负责人"
            prop="marketLeader"
            :label-width="formLabelWidth"
          >
            <el-input v-model="payRecord.marketLeader"> </el-input>
          </el-form-item>
        </div>
        <div class="line">
          <el-form-item
            label="费用金额"
            prop="costMoney"
            :label-width="formLabelWidth"
          >
            <el-input v-model="payRecord.costMoney"> </el-input>
          </el-form-item>
          <el-form-item
            label="优惠"
            prop="discountMoney"
            :label-width="formLabelWidth"
          >
            <el-input v-model="payRecord.discountMoney"> </el-input>
          </el-form-item>
        </div>
        <div class="line">
          <el-form-item label="备注" prop="note" :label-width="formLabelWidth">
            <el-input v-model="payRecord.note"> </el-input>
          </el-form-item>
        </div>
        <el-form-item label="上传缴费截图" prop="picUrlList">
          <el-upload
            :action="`${$UPLOAD_BASE_URL}/storage/upload`"
            :headers="headers"
            list-type="picture-card"
            :on-remove="handleContImgRemove"
            :on-success="uploadLanternUrl"
            :file-list="picUrlList"
          >
            <i class="el-icon-plus"></i>
          </el-upload>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancel('payRecord')">取 消</el-button>
        <el-button type="primary" @click="submitForm('payRecord')"
          >确 定</el-button
        >
        <!-- <el-button type="primary" @click="test">test</el-button> -->
      </div>
    </el-dialog>

    <el-dialog
      title="编辑退费备注"
      :visible.sync="editReturnNoteInfo"
      @close="handleClose"
    >
      <el-input
        type="textarea"
        :rows="2"
        placeholder="请输入内容"
        v-model="textarea"
      >
      </el-input>
      <div slot="footer" class="dialog-footer">
        <el-button @click="handleClose">取 消</el-button>
        <el-button type="primary" @click="submitEditReturnNoteInfo"
          >确 定</el-button
        >
        <!-- <el-button type="primary" @click="test">test</el-button> -->
      </div>
    </el-dialog>

    <el-dialog
      id="pdf"
      title="财务模板"
      :visible.sync="pdfInfo"
      @close="handleClose"
    >
      <el-descriptions :title="pdfItem.nameCn">
        <!-- <el-descriptions-item label="姓名">nameCn</el-descriptions-item> -->
        <el-descriptions-item label="学校">{{
          pdfItem.school
        }}</el-descriptions-item>
        <el-descriptions-item label="费用类型">{{
          pdfItem.status == 1
            ? "定金"
            : pdfItem.status == 2
            ? "补全费用"
            : pdfItem.status == 3
            ? "全款"
            : ""
        }}</el-descriptions-item>
        <el-descriptions-item label="课程数量">{{
          pdfItem.courseNum
        }}</el-descriptions-item>
        <!-- <el-descriptions-item label="课程形式">???</el-descriptions-item> -->
        <el-descriptions-item label="课程时间">{{
          pdfItem.courseTime
        }}</el-descriptions-item>
        <el-descriptions-item label="校园大使">{{
          pdfItem.campusAgent
        }}</el-descriptions-item>
        <el-descriptions-item label="市场负责人">{{
          pdfItem.marketLeader || "无"
        }}</el-descriptions-item>
        <el-descriptions-item label="客服">{{
          pdfItem.adminNick
        }}</el-descriptions-item>
        <el-descriptions-item label="优惠">{{
          pdfItem.discountMoney || "无"
        }}</el-descriptions-item>
        <el-descriptions-item label="支付方式">{{
          pdfItem.paymentWay || "无"
        }}</el-descriptions-item>
      </el-descriptions>
      <div slot="footer" class="dialog-footer">
        <el-button @click="handleClose">取 消</el-button>
        <!-- <el-button type="primary" @click="submitEditReturnNoteInfo"
          >确 定</el-button
        > -->

        <el-button
          data-clipboard-target="#pdf"
          data-clipboard-action="copy"
          type="primary"
          class="btn"
          @click="copy"
          >一键复制</el-button
        >

        <!-- <el-button type="primary" @click="test">test</el-button> -->
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  allPayCode,
  addPayCost,
  payCostInfoAll,
  updatePayCost
} from "@/api/cso";
import Clipboard from "clipboard";
import { getToken } from "@/utils/auth";
export default {
  name: "payCostInfo",
  props: ["userInfo"],
  data() {
    return {
      // h5Info: this.userInfo,
      userId: "",
      payInfoList: [],
      editPayInfoListItemId: "",
      payVisible: false,
      editReturnNoteInfo: false,
      pdfInfo: false,
      payRecord: {
        costTagId: "",
        status: "",
        courseNum: "",
        courseTime: "",
        marketLeader: "",
        costMoney: "",
        discountMoney: "",
        note: ""
      },
      allPayCode: [],
      allStatus: [
        {
          value: "1",
          label: "定金"
        },
        {
          value: "2",
          label: "补全费用"
        },
        {
          value: "3",
          label: "全款"
        }
      ],
      formLabelWidth: "120px",
      picUrlList: [],
      rules: {
        costTagId: [{ required: true, message: "缴费标签", trigger: "change" }],
        status: [
          { required: true, message: "请选择费用类型", trigger: "change" }
        ],
        courseNum: [
          { required: true, message: "请选择课程数量", trigger: "change" }
        ],

        courseTime: [
          { required: true, message: "请填写课程时间", trigger: "blur" }
        ],
        // marketLeader: [
        //   { required: true, message: "请填写市场负责人", trigger: "blur" }
        // ],
        costMoney: [
          { required: true, message: "请填写费用金额", trigger: "blur" }
        ],
        discountMoney: [
          { required: true, message: "请填写优惠", trigger: "blur" }
        ]
      },
      textarea: "",
      pdfItem: "",
      h5LinkDialogVisible: false,
      token: ""
    };
  },
  computed: {
    h5Info() {
      return JSON.parse(JSON.stringify(this.userInfo));
    },
    h5Link() {
      return `${this.$H5_BASE_URL}login?userName=${this.h5Info.userName}&passWord=${this.h5Info.passWord}`;
    },
    headers() {
      return {
        Authorization: this.token
      };
    }
  },
  methods: {
    test() {
      console.log("test");
      let pdf = document.querySelector("#pdf");
      console.log(pdf.innerText, "pdf-test");
    },
    copy() {
      let clipboard = new Clipboard(".btn");
      clipboard.on("success", function(e) {
        // console.info("Action:", e.action);
        // console.info("Text:", e.text);
        // console.info("Trigger:", e.trigger);
        e.clearSelection();
      });
      clipboard.on("error", function(e) {
        console.error("Action:", e.action);
        console.error("Trigger:", e.trigger);
      });
      this.$message({
        type: "success",
        message: "复制成功",
        duration: 1000
      });
      this.pdfInfo = false;
    },

    pdf(id) {
      this.payInfoList.forEach(item => {
        if (item.id == id) {
          this.pdfItem = item;
        }
      });
      this.pdfInfo = true;
    },

    submitForm(formName) {
      // console.log(this.picUrlList.length, "this.picUrlList.length");
      this.payRecord.userId = this.userId;
      this.$refs[formName].validate(valid => {
        if (valid && this.picUrlList.length > 0) {
          this.$confirm("是否提交", "提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning"
          }).then(() => {
            addPayCost(this.payRecord).then(response => {
              this.$message({
                type: "success",
                message: "提交成功",
                duration: 1000
              });

              this.payVisible = false;
              this.picUrlList = [];
              this.getPayInfo();
              this.$forceUpdate();
            });
          });
        } else {
          this.$message({
            type: "error",
            message: "请上传缴费截图",
            duration: 1000
          });
          return false;
        }
      });
    },
    submitEditReturnNoteInfo() {
      this.$confirm("是否提交", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        updatePayCost({
          returnNote: this.textarea,
          id: this.editPayInfoListItemId
        }).then(response => {
          this.$message({
            type: "success",
            message: "提交成功",
            duration: 1000
          });
          // this.editReturnNoteInfo = false;
          this.editReturnNoteInfo = false;
          this.textarea = "";
          this.getPayInfo();
          this.$forceUpdate();
        });
      });
    },

    getAllPayCode() {
      allPayCode({
        pageNum: 1,
        pageSize: 999
      }).then(res => {
        console.log(res.data.list, "getAllPayCode");
        res.data.list.forEach(item => {
          let obj = {};
          obj.label = item.costTag;
          obj.value = item.id;
          this.allPayCode.push(obj);
        });
        // console.log(this.allPayCode);
      });
    },
    getPayInfo() {
      payCostInfoAll({
        pageNum: 1,
        pageSize: 100, //这里不做分页显示
        userId: this.userId
      }).then(res => {
        this.payInfoList = res.data.list;
        // console.log(this.allRecord);
        console.log(this.payInfoList, "this.payInfoList");
      });
    },
    handleContImgRemove(file, fileList) {
      for (let i = 0; i < this.picUrlList.length; i++) {
        if (this.picUrlList[i].url == file.url) {
          this.picUrlList.splice(i, 1);
        }
        // console.log(length);
      }
      // console.log(this.picUrlList, "handleContImgRemove");
    },
    uploadLanternUrl(response) {
      const pic = { name: "", url: "" };
      // this.dialogImageUrl = response.data.url;
      pic.name = response.data.name;
      pic.url = response.data.url;
      this.picUrlList.push(pic);
      this.payRecord.paymentVoucherList = this.picUrlList;
      // console.log(this.picUrlList, "uploadLanternUrl");
    },
    editReturnNote(id, info) {
      // console.log(id, "editReturnNote");
      this.editReturnNoteInfo = true;
      this.editPayInfoListItemId = id;
      this.textarea = info;
      // console.log(this.editPayInfoListItemId, "this.editPayInfoListItemId");
    },
    handleClose() {
      this.editReturnNoteInfo = false;
      this.pdfInfo = false;
      this.textarea = "";
    },
    cancel(formName) {
      this.payVisible = false;
      this.$refs[formName].resetFields();
    }
  },

  mounted() {
    this.userId = this.$route.query.id;

    this.getAllPayCode();

    this.getPayInfo();
    this.token = getToken();
  }
};
</script>

<style lang="scss" scoped>
.line {
  display: flex;
  align-items: center;
}
.payInfoItem {
  margin-top: 20px;
  padding: 20px;
  // box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
  // box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  transition: 0.5s;
  &:hover {
    // transform: scale(1.005);
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  }
}
</style>
