<template>
  <div class="app-container">
    <div class="ticketHead">
      <div class="infoTitle">工单详情</div>
      <div class="flex space-between">
        <div class="ticketTitle">
          <div>房票协议编号{{ form.numbering }}</div>
          <span class="tag" v-if="form.disuse">已作废</span>
          <span class="tag" v-else>{{
            form.currentAccountPhase
              ? form.preAudit
                ? "已预审"
                : "已处理"
              : "未处理"
          }}</span>
        </div>
        <div style="display: flex; justify-content: space-around">
          <el-button
            type="primary"
            v-if="roles[0] === 3 || (roles[0] === 6 && form.fourAspect)"
            @click="
              $router.push({
                path: roles[0] === 3 ? '/print' : '/printFourParty',
                query: { id: form.id },
              })
            "
            >查看协议</el-button
          >
          <el-button
            type="primary"
            v-if="
              roles[0] === 5 &&
              form.currentAccountPhase === 0 &&
              form.phase === 2 &&
              form.preAudit !== true &&
              !form.disuse
            "
            @click="handleAudit(form.id, 0)"
            >预审核</el-button
          >
          <div
            v-if="
              roles[0] === 5 &&
              form.currentAccountPhase === 0 &&
              form.preAudit === true &&
              form.phase === 2 &&
              !form.disuse
            "
          >
            <el-button type="primary" @click="handleAudit(form.id, 1)"
              >审核通过</el-button
            >
            <el-button type="danger" @click="handleAudit(form.id, 2)"
              >拒绝贷款</el-button
            >
          </div>

          <div v-if="roles[0] === 4 && form.phase === 2.5 && !form.disuse">
            <el-button type="primary" @click="handleKfsAudit(form.id, true)"
              >审核通过</el-button
            >
            <el-button type="danger" @click="handleKfsAudit(form.id, false)"
              >审核不通过</el-button
            >
          </div>

          <div v-if="roles[0] === 0 && form.phase === 5.5 && !form.disuse">
            <el-button type="primary" @click="handleGlyAudit(form.id, true)"
              >审核通过</el-button
            >
            <el-button type="danger" @click="handleGlyAudit(form.id, false)"
              >审核不通过</el-button
            >
          </div>

          <el-button
            style="margin-left: 10px"
            v-if="roles[0] === 0 && form.phase <= 5 && !form.disuse"
            type="danger"
            size="mini"
            @click="handleDisuse(form.id)"
            >作废</el-button
          >

          <el-button
            v-if="roles[0] === 7 && form.phase === 4 && !form.disuse"
            type="primary"
            size="mini"
            @click="handleRegistries(form.id)"
            >登记备案</el-button
          >
          <!--  -->

          <el-button
            v-if="roles[0] === 8 && form.phase === 5 && !form.disuse"
            type="primary"
            @click="handleSettlement(form.id)"
            >结算信息填写</el-button
          >
          <el-button
            v-if="
              roles[0] === 8 &&
              form.phase === 5 &&
              !form.disuse &&
              form.billingInfo &&
              form.billingInfo.repaymentCode
            "
            type="primary"
            @click="handleDealPhaseConfirm(form.id)"
            >确认结算</el-button
          >
        </div>
      </div>
    </div>
    <div class="ticketBody">
      <!--  -->
      <div class="userInfo">
        <div class="item">房票归属：{{ form.nameB }}</div>
        <div class="item">房票归属身份证：{{ form.idCardB }}</div>
        <div class="item">手机号：{{ form.phoneNumberB }}</div>
        <div class="item">
          创建时间：{{ form.createDate | parseTime("{y}-{m}-{d} {h}:{i}:{s}") }}
        </div>
        <template v-if="form.repaymentPlan">
          <div v-permission="[4]" class="item">
            首付：{{ form.repaymentPlan.amount1 }}
          </div>
          <div v-permission="[4]" class="item">
            客户自筹：{{ form.repaymentPlan.amount2 }}
          </div>
          <div v-permission="[4]" class="item">
            贷款金额：{{ form.repaymentPlan.amount3 }}
          </div>
          <div v-permission="[4]" class="item">
            月供：{{ form.repaymentPlan.amountOfInstallments }}
          </div>
          <div v-permission="[4]" class="item">
            分期数：{{ form.repaymentPlan.numberOfInstallments }}
          </div>
        </template>

        <!-- phase0 -->
        <div v-permission="[3, 5, 8]" class="item">
          房票金额：{{ form.number }}
        </div>
        <div v-permission="[3]" class="item">
          房票有效期：{{
            form.ticketExpiration | parseTime("{y}-{m}-{d} {h}:{i}:{s}")
          }}
        </div>
        <div v-permission="[3]" class="item">
          安置人数：{{ form.numberOfPlacements }}
        </div>
        <div v-permission="[3]" class="item">
          换房套数：{{ form.huNumberOfPlacements }}
        </div>
        <!-- phase2 -->
        <div v-permission="[5, 6, 8]" class="item">
          购房总价：{{ form.totalPrice }}
        </div>
        <div v-permission="[5, 6, 8, 9]" class="item">
          贷款金额：{{ form.loanAmount }}
        </div>
        <div v-permission="[5]" class="item">
          分期数：{{ form.numberOfInstallments }}
        </div>
        <div v-permission="[5, 6, 8]" class="item">
          <span v-if="form.fourAspect"
            >实际每月应还款：{{ form.amountOfInstallments }}</span
          >
        </div>
        <div v-permission="[5]" class="item">
          首次还款时间：{{ form.startDate | parseTime("{y}-{m}-{d}") }}
        </div>
        <!-- phase3 -->
        <div v-permission="[6, 7]" class="item">
          房源信息：{{ form.homeInfo }}
        </div>
        <div v-permission="[6, 7]" class="item">
          车位：{{ form.carInfo || "无" }}
        </div>
        <div v-permission="[6, 8]" class="item">
          首付：{{ form.totalFirstPay }}
        </div>

        <div v-permission="[6]" class="item">
          <span v-if="!form.fourAspect && form.fourAspect !== null"
            >剩余第一次还款：{{ form.threeAspectAmount1 }}</span
          >
        </div>
        <div v-permission="[6]" class="item">
          <span v-if="!form.fourAspect && form.fourAspect !== null"
            >第一次还款时间：{{
              form.threeAspectDate1 | parseTime | parseTime("{y}-{m}-{d}")
            }}</span
          >
        </div>
        <div v-permission="[6]" class="item">
          <span v-if="!form.fourAspect && form.fourAspect !== null"
            >剩余第二次还款：{{ form.threeAspectAmount2 }}</span
          >
        </div>
        <div v-permission="[6]" class="item">
          <span v-if="!form.fourAspect && form.fourAspect !== null"
            >第二次还款时间：{{
              form.threeAspectDate2 | parseTime("{y}-{m}-{d}")
            }}</span
          >
        </div>

        <!-- phase4 7 备案 已包含 -->
        <!-- phase5 8 结算-->
        <div v-permission="[8]" class="item">
          <span v-if="!form.fourAspect"
            >剩余款项：{{ form.threeAspectAmountRemainder }}</span
          >
        </div>

        <div v-permission="[8]" class="item">
          结算补差：{{ form.shouldBeRefunded }}
        </div>

        <div v-permission="[8]" class="item">
          <span>首套/二套：{{ form.roomType }}</span>
        </div>
        <div v-permission="[8]" class="item">
          <span
            >监管金额：{{
              form.totalPrice < form.number ? form.totalPrice : form.number
            }}</span
          >
        </div>
        <div v-permission="[8]" class="item">
          <span>每月应还：{{ form.monthRefund }}</span>
        </div>
        <div v-permission="[8]" class="item">
          <span>服务费：{{ form.serviceCharge }}</span>
        </div>
        <div v-permission="[8]" class="item">
          <span
            >还款银行卡：{{
              form.billingInfo ? form.billingInfo.repaymentCode : ""
            }}</span
          >
        </div>
        <div v-permission="[8]" class="item">
          <span
            >还款开户行：{{
              form.billingInfo ? form.billingInfo.repaymentBank : ""
            }}</span
          >
        </div>
        <div v-permission="[8]" class="item">
          <span
            >退款银行卡：{{
              form.billingInfo ? form.billingInfo.refundCode : ""
            }}</span
          >
        </div>
        <div v-permission="[8]" class="item">
          <span
            >退款开户行：{{
              form.billingInfo ? form.billingInfo.refundBank : ""
            }}</span
          >
        </div>
        <div v-permission="[8]" class="item">
          <span
            >退款银行卡姓名：{{
              form.billingInfo ? form.billingInfo.refundName : ""
            }}</span
          >
        </div>

        <!-- phase6 9 还款 -->
        <div v-permission="[9]" class="item">
          分期数：{{ form.hasPayNumberOfInstallments }}/{{
            form.numberOfInstallments
          }}
        </div>
        <div v-permission="[9]" class="item">
          <span v-if="form.fourAspect"
            >每月还款：{{ form.amountOfInstallments }}</span
          >
        </div>
        <div v-permission="[9]" class="item">
          剩余还款：{{ form.waitRepayAmount }}
        </div>

        <!-- <div v-permission="5" class="item">房票金额：{{ form.number }}</div> -->
        <!-- <div v-permission="[8]" class="item">
          月供金额：{{ form.fourAspectContent.homePurchaseInfo.totalPrice }}
        </div> -->

        <!-- <div>银行卡号：62284442451456205</div> -->
        <!-- <div>还款期数：</div> -->
      </div>

      <div class="steps">
        <!-- <div class="step" v-for="(item, index) in steps" :key="index">
          <img
            :src="
              require(`@/assets/images/icon_${
                form.phase > index
                  ? 'done'
                  : form.phase === index
                  ? 'phase' + index + '_active'
                  : 'phase' + (index > 0 && index)
              }.png`)
            "
          />
          <div
            :class="`phaseName ${form.phase === index && 'phaseName_active'}`"
          >
            {{ item }}
          </div>
          <span v-if="form.phase > index">完成时间</span>
          <div class="doneDateTime" v-if="form.phase > index">
            {{
              form.housingTicketRecords[index].createDate
                | parseTime("{y}-{m}-{d} {h}:{i}:{s}")
            }}
          </div>
        </div>
        <div v-if="index < 8" class="stepLine"></div> -->
        <!-- <div class="stepLine"></div> -->
        <div class="step">
          <img
            :src="
              require(`@/assets/images/icon_${
                form.phase > 0
                  ? 'done'
                  : form.phase === 0
                  ? 'phase0_active'
                  : 'done'
              }.png`)
            "
          />
          <div :class="`phaseName ${form.phase === 0 && 'phaseName_active'}`">
            房票发放
          </div>
          <div v-if="form.phase > 0">完成时间</div>
          <div v-if="form.phase > 0">
            {{ form.phaseDateList[0] | parseTime("{y}-{m}-{d} {h}:{i}:{s}") }}
          </div>
        </div>
        <div class="stepLine"></div>
        <div
          :class="`step ${
            form.phase > 1 ? 'done' : form.phase === 1 ? 'active' : ''
          }`"
        >
          <img
            :src="
              require(`@/assets/images/icon_${
                form.phase > 1
                  ? 'done'
                  : form.phase === 1
                  ? 'phase1_active'
                  : 'phase1'
              }.png`)
            "
          />
          <div :class="`phaseName ${form.phase === 1 && 'phaseName_active'}`">
            商品房选购
          </div>
          <div v-if="form.phase > 1">完成时间</div>
          <div v-if="form.phase > 1">
            {{ form.phaseDateList[1] | parseTime("{y}-{m}-{d} {h}:{i}:{s}") }}
          </div>
        </div>
        <div class="stepLine"></div>
        <div
          :class="`step ${
            form.phase > 2 ? 'done' : form.phase === 2 ? 'active' : ''
          }`"
        >
          <img
            :src="
              require(`@/assets/images/icon_${
                form.phase > 2
                  ? 'done'
                  : form.phase === 2
                  ? 'phase2_active'
                  : 'phase2'
              }.png`)
            "
          />
          <div :class="`phaseName ${form.phase === 2 && 'phaseName_active'}`">
            贷款审查
          </div>
          <div v-if="form.phase > 2">完成时间</div>
          <div v-if="form.phase > 2">
            {{ form.phaseDateList[2] | parseTime("{y}-{m}-{d} {h}:{i}:{s}") }}
          </div>
        </div>
        <!-- 2.5 -->
        <div class="stepLine"></div>
        <div
          :class="`step ${
            form.phase > 2.5 ? 'done' : form.phase === 2.5 ? 'active' : ''
          }`"
        >
          <img
            :src="
              require(`@/assets/images/icon_${
                form.phase > 2.5
                  ? 'done'
                  : form.phase === 2.5
                  ? 'phase25_active'
                  : 'phase25'
              }.png`)
            "
          />
          <div :class="`phaseName ${form.phase === 2.5 && 'phaseName_active'}`">
            开发商审核
          </div>
          <div v-if="form.phase > 2.5">完成时间</div>
          <div v-if="form.phase > 2.5">
            {{ form.phaseDateList[3] | parseTime("{y}-{m}-{d} {h}:{i}:{s}") }}
          </div>
        </div>
        <!-- 2.5 end -->
        <div class="stepLine"></div>
        <div
          :class="`step ${
            form.phase > 3 ? 'done' : form.phase === 3 ? 'active' : ''
          }`"
        >
          <img
            :src="
              require(`@/assets/images/icon_${
                form.phase > 3
                  ? 'done'
                  : form.phase === 3
                  ? 'phase3_active'
                  : 'phase3'
              }.png`)
            "
          />
          <div :class="`phaseName ${form.phase === 3 && 'phaseName_active'}`">
            签订四方协议
          </div>
          <div v-if="form.phase > 3">完成时间</div>
          <div v-if="form.phase > 3">
            {{ form.phaseDateList[4] | parseTime("{y}-{m}-{d} {h}:{i}:{s}") }}
          </div>
        </div>

        <div class="stepLine"></div>
        <div
          :class="`step ${
            form.phase > 4 ? 'done' : form.phase === 4 ? 'active' : ''
          }`"
        >
          <img
            :src="
              require(`@/assets/images/icon_${
                form.phase > 4
                  ? 'done'
                  : form.phase === 4
                  ? 'phase4_active'
                  : 'phase4'
              }.png`)
            "
          />
          <div :class="`phaseName ${form.phase === 4 && 'phaseName_active'}`">
            登记备案
          </div>
          <div v-if="form.phase > 4">完成时间</div>
          <div v-if="form.phase > 4">
            {{ form.phaseDateList[5] | parseTime("{y}-{m}-{d} {h}:{i}:{s}") }}
          </div>
        </div>
        <div class="stepLine"></div>
        <div
          :class="`step ${
            form.phase > 5 ? 'done' : form.phase === 5 ? 'active' : ''
          }`"
        >
          <img
            :src="
              require(`@/assets/images/icon_${
                form.phase > 5
                  ? 'done'
                  : form.phase === 5
                  ? 'phase5_active'
                  : 'phase5'
              }.png`)
            "
          />
          <div :class="`phaseName ${form.phase === 5 && 'phaseName_active'}`">
            结算确认
          </div>
          <div v-if="form.phase > 5">完成时间</div>
          <div v-if="form.phase > 5">
            {{ form.phaseDateList[6] | parseTime("{y}-{m}-{d} {h}:{i}:{s}") }}
          </div>
        </div>
        <!-- 5.5 -->
        <!-- <div class="stepLine"></div>
        <div
          :class="`step ${
            form.phase > 5.5 ? 'done' : form.phase === 5.5 ? 'active' : ''
          }`"
        >
          <img
            :src="
              require(`@/assets/images/icon_${
                form.phase > 5.5
                  ? 'done'
                  : form.phase === 5.5
                  ? 'phase5.5_active'
                  : 'phase5.5'
              }.png`)
            "
          />
          <div :class="`phaseName ${form.phase === 5.5 && 'phaseName_active'}`">
            管理员审核
          </div>
          <div v-if="form.phase > 5.5">完成时间</div>
          <div v-if="form.phase > 5.5">
            {{ form.phaseDateList[7] | parseTime("{y}-{m}-{d} {h}:{i}:{s}") }}
          </div>
        </div> -->
        <!-- 5.5 end -->
        <div class="stepLine"></div>
        <div
          :class="`step ${
            form.phase > 6 ? 'done' : form.phase === 6 ? 'active' : ''
          }`"
        >
          <img
            :src="
              require(`@/assets/images/icon_${
                form.phase > 6
                  ? 'done'
                  : form.phase === 6
                  ? 'phase6_active'
                  : 'phase6'
              }.png`)
            "
          />
          <div :class="`phaseName ${form.phase === 6 && 'phaseName_active'}`">
            还款
          </div>
          <div v-if="form.phase > 6">完成时间</div>
          <div v-if="form.phase > 6">
            {{ form.phaseDateList[8] | parseTime("{y}-{m}-{d} {h}:{i}:{s}") }}
          </div>
        </div>
        <div class="stepLine"></div>
        <div
          :class="`step ${
            form.phase > 7 ? 'done' : form.phase === 7 ? 'active' : ''
          }`"
        >
          <img
            :src="
              require(`@/assets/images/icon_${
                form.phase >= 7
                  ? 'done'
                  : form.phase === 7
                  ? 'phase7'
                  : 'phase7'
              }.png`)
            "
          />
          <div :class="`phaseName ${form.phase === 7 && ''}`">完结</div>
          <div v-if="form.phase >= 7">完成时间</div>
          <div v-if="form.phase >= 7">
            {{ form.phaseDateList[9] | parseTime("{y}-{m}-{d} {h}:{i}:{s}") }}
          </div>
        </div>
      </div>
    </div>
    <div class="ticketFooter">
      <!--  -->
      <div class="infoTitle">任务处理流程</div>
      <div class="timeLine">
        <div
          class="timeLineItem"
          v-for="item in form.housingTicketRecords"
          :key="item.id"
        >
          <div class="date">
            {{ item.staffName }} 完成时间：{{
              item.createDate | parseTime("{y}-{m}-{d} {h}:{i}:{s}")
            }}
          </div>
          <div class="info">
            <div class="title">
              <!-- {{
                item.phase === 0
                  ? item.remark === "0"
                    ? steps[item.phase]
                    : "房票发放-变更"
                  : item.phase ===2?item.remark===2?'贷款审查-未通过':'贷款审查':steps[item.phase]
              }} -->
              {{ item.phase === 6 ? "还款" : item.remark }}
              <!-- {{ item.remark }} -->
            </div>
            <!-- <div class="title">{{item.phase===0?(index>0?3:1):2}}</div> -->
            <div class="content">
              <div v-if="item.remark === '房票作废'">
                <div>
                  作废时间：{{
                    item.createDate | parseTime("{y}-{m}-{d} {h}:{i}:{s}")
                  }}
                </div>
              </div>
              <div v-if="item.remark === '签订自愿放弃协议'">
                <el-link
                  type="primary"
                  @click="
                    $router.push({ path: '/fqcns', query: { id: form.id } })
                  "
                  >自愿放弃协议</el-link
                >
              </div>
              <template v-else>
                <div v-if="item.phase === 0 || item.phase === 5">
                  房票金额：<span class="money">{{ form.number }} 元</span>
                </div>
                <div v-if="item.phase === 0">
                  房票有效期：{{
                    form.ticketExpiration | parseTime("{y}-{m}-{d} {h}:{i}:{s}")
                  }}
                </div>
                <div v-if="item.phase === 0">
                  安置人数：
                  {{ form.numberOfPlacements }}
                  人
                </div>
                <div v-if="item.phase === 0">
                  换房套数：
                  {{ form.huNumberOfPlacements }}
                  套
                </div>
                <div v-if="item.phase === 0">
                  生成协议：<el-link
                    type="primary"
                    @click="
                      $router.push({ path: '/print', query: { id: form.id } })
                    "
                    >房票安置转换协议</el-link
                  >
                </div>
                <div
                  v-if="
                    item.phase === 1 || item.phase === 3 || item.phase === 4
                  "
                >
                  房源信息：{{ form.homeInfo }}
                </div>
                <div v-if="item.phase === 1 || item.phase === 4">
                  车位：{{ form.carInfo || "无" }}
                </div>
                <div
                  v-if="
                    item.phase === 1 || item.phase === 3 || item.phase === 5
                  "
                >
                  购房总价：<span class="money">{{ form.totalPrice }} 元</span>
                </div>
                <div v-if="item.phase === 1">
                  房票首付：{{ form.ticketFirstPay }} 元
                </div>
                <div v-if="item.phase === 3 || item.phase === 5">
                  首付金额：{{ form.totalFirstPay }} 元
                </div>
                <div v-if="item.phase === 5">
                  贷款金额：{{ form.loanAmount }} 元
                </div>
                <div
                  v-if="
                    item.phase === 2 || item.phase === 2.5 || item.phase === 5.5
                  "
                >
                  <!-- 已{{ item.remark === "0" ? "预" : "" }} -->
                  审核时间：{{
                    item.createDate | parseTime("{y}-{m}-{d} {h}:{i}:{s}")
                  }}

                  <!-- remark 0 预审核 1已通过 -->
                </div>

                <div
                  v-if="
                    (item.phase === 3 || item.phase === 5) && form.fourAspect
                  "
                >
                  分期期数：{{ form.numberOfInstallments }} 期
                </div>
                <div
                  v-if="
                    (item.phase === 3 || item.phase === 5) && form.fourAspect
                  "
                >
                  贷款月供：{{ form.amountOfInstallments }} 元
                </div>
                <div v-if="item.phase === 3 && !form.fourAspect">
                  剩余金额第一次还款：{{ form.threeAspectAmount1 }}
                </div>
                <div v-if="item.phase === 3 && !form.fourAspect">
                  第一次还款时间：{{
                    form.threeAspectDate1 | parseTime("{y}-{m}-{d}")
                  }}
                </div>
                <div v-if="item.phase === 3 && !form.fourAspect">
                  剩余金额第二次还款：{{ form.threeAspectAmount2 }}
                </div>
                <div v-if="item.phase === 3 && !form.fourAspect">
                  第二次还款时间：{{
                    form.threeAspectDate2 | parseTime("{y}-{m}-{d}")
                  }}
                </div>
                <div v-if="item.phase === 3">
                  协议：<el-link
                    @click="
                      $router.push({
                        path: '/printFourParty',
                        query: { id: form.id },
                      })
                    "
                    type="primary"
                    >安置补偿款监管使用协议-{{ form.nameB }}</el-link
                  >
                </div>

                <!-- <div v-if="item.phase === 5">
                应补缴：{{ form.payableForSupplementaryPayment }} 元
              </div> -->
                <div v-if="item.phase === 5">
                  结算补差：{{ form.shouldBeRefunded }} 元
                </div>
                <div v-if="item.phase === 6">
                  还款期数：{{ item.remark.split(",")[0] }}
                </div>
                <div v-if="item.phase === 6">
                  还款金额：{{ item.remark.split(",")[1] }}
                </div>

                <div v-if="item.remark === '提交申请书'">
                  <el-link
                    type="primary"
                    @click="
                      $router.push({ path: '/sqs', query: { id: form.id } })
                    "
                    >申请书</el-link
                  >
                </div>

                <div v-if="item.remark === '提交征信预审'">
                  <div v-for="pre in form.preliminaryInfo" :key="pre.idCardB">
                    <div>姓名：{{ pre.nameB }}</div>
                    <div>身份证：{{ pre.idCardB }}</div>
                    <div>电话：{{ pre.phoneNumberB }}</div>
                    <div>
                      附件：
                      <a target="_blank" :href="pre.attachments">{{
                        pre.attachments
                      }}</a>
                    </div>
                  </div>
                </div>
              </template>
            </div>
          </div>
        </div>
      </div>
    </div>

    <el-dialog title="分期信息填写" :visible.sync="dialogAudit" width="30%">
      <el-form :model="auditForm" :rules="rules" ref="form" label-width="120px">
        <el-form-item label="首付：" prop="repaymentPlan.amount1">
          <el-input v-model="auditForm.repaymentPlan.amount1"></el-input
          ><el-tooltip
            class="item"
            effect="dark"
            content="商品房总价款中的 ?元，由甲方授权丁方在收到本协议项下的甲方安置补偿款后20个工作日内代为向乙方支付"
            placement="right"
          >
            <i class="el-icon-question" style="color: #999"></i>
          </el-tooltip>
        </el-form-item>

        <el-form-item label="客户自筹：" prop="repaymentPlan.amount2">
          <el-input v-model="auditForm.repaymentPlan.amount2"></el-input
          ><el-tooltip
            class="item"
            effect="dark"
            content="商品房总价款中的 ? 元，由甲方自行筹集资金，在签订商品房买卖合同前直接向乙方支付"
            placement="right"
          >
            <i class="el-icon-question" style="color: #999"></i>
          </el-tooltip>
        </el-form-item>

        <el-form-item label="贷款金额：" prop="repaymentPlan.amount3">
          <el-input v-model="auditForm.repaymentPlan.amount3"></el-input
          ><el-tooltip
            class="item"
            effect="dark"
            content="除上述第（1）（2）项的款项作为购房首付款，商品房总价款中的剩余款项 ? 元由甲方向丙方进行按揭贷款，甲方授权丁方按月将安置补偿款用于代甲方向丙方偿付按揭款本息。"
            placement="right"
          >
            <i class="el-icon-question" style="color: #999"></i>
          </el-tooltip>
        </el-form-item>

        <!-- <el-form-item label="贷款金额：" prop="repaymentPlan.amount4">
          <el-input v-model="auditForm.repaymentPlan.amount4"></el-input
          ><el-tooltip
            class="item"
            effect="dark"
            content="丙方经甲方申请，同意向甲方发放购买乙方商品房所需的按揭贷款共计 ? 元......"
            placement="right"
          >
            <i class="el-icon-question" style="color: #999"></i>
          </el-tooltip>
        </el-form-item> -->

        <el-form-item label="月供" prop="repaymentPlan.amountOfInstallments">
          <el-input v-model="auditForm.repaymentPlan.amountOfInstallments" />
        </el-form-item>
        <el-form-item label="分期数" prop="repaymentPlan.numberOfInstallments">
          <el-input v-model="auditForm.repaymentPlan.numberOfInstallments" />
        </el-form-item>
        <!-- <el-form-item label="首次还款期限" prop="repaymentPlan.startDate">
          <el-date-picker
            v-model="auditForm.repaymentPlan.startDate"
            type="datetime"
            value-format="timestamp"
            placeholder="选择日期时间"
          />
        </el-form-item> -->
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogAudit = false">取 消</el-button>
        <el-button type="primary" @click="audit">确 定</el-button>
      </span>
    </el-dialog>

    <el-dialog
      title="结算确认信息填写"
      :visible.sync="dialogSettlement"
      width="30%"
    >
      <el-form
        :model="settlementForm"
        :rules="rules"
        ref="settlementForm"
        label-width="130px"
      >
        <el-form-item label="还款卡号：" prop="repaymentCode">
          <el-input v-model="settlementForm.repaymentCode"></el-input>
        </el-form-item>
        <el-form-item label="还款开户行：" prop="repaymentBank">
          <el-input v-model="settlementForm.repaymentBank"></el-input>
        </el-form-item>

        <el-form-item label="退款卡号：" prop="refundCode">
          <el-input v-model="settlementForm.refundCode"></el-input>
        </el-form-item>

        <el-form-item label="退款开户行：" prop="refundBank">
          <el-input v-model="settlementForm.refundBank"></el-input>
        </el-form-item>

        <el-form-item label="退款银行卡姓名：" prop="refundName">
          <el-input v-model="settlementForm.refundName"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogSettlement = false">取 消</el-button>
        <el-button type="primary" @click="settlementConfirm">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { info } from "@/api/ticket";
import { parseTime } from "@/utils";
import { mapGetters } from "vuex";
import {
  dealPhase2,
  dealPhase4,
  dealPhase5,
  dealPhase5F,
  dealPhase25,
  dealPhase55,
  phase2GetData,
  disuse,
} from "@/api/housingTicket";

export default {
  data() {
    return {
      id: this.$route.query.id,
      form: {},
      steps: [
        "房票发放",
        "商品房选购",
        "贷款审查",
        "签订四方协议",
        // 3.1管理员审核

        "登记备案",
        "结算确认",
        "还款",
        "完结",
      ],
      dialogAudit: false,
      auditForm: {
        id: undefined,
        repaymentPlan: {
          amountOfInstallments: undefined,
          numberOfInstallments: undefined,
          startDate: undefined,
        },
        type: 0,
      },
      rules: {
        "repaymentPlan.amount1": [
          {
            required: true,
            message: "不能为空",
            trigger: "blur",
          },
        ],
        "repaymentPlan.amount2": [
          {
            required: true,
            message: "不能为空",
            trigger: "blur",
          },
        ],
        "repaymentPlan.amount3": [
          {
            required: true,
            message: "不能为空",
            trigger: "blur",
          },
        ],
        "repaymentPlan.amount4": [
          {
            required: true,
            message: "不能为空",
            trigger: "blur",
          },
        ],
        "repaymentPlan.amountOfInstallments": [
          {
            required: true,
            message: "不能为空",
            trigger: "blur",
          },
        ],
        "repaymentPlan.numberOfInstallments": [
          {
            required: true,
            message: "不能为空",
            trigger: "blur",
          },
        ],
        "repaymentPlan.startDate": [
          { required: true, message: "不能为空", trigger: "change" },
        ],
        repaymentCode: [
          { required: true, message: "不能为空", trigger: "change" },
          {
            pattern: new RegExp(/^\d{19}$/),
            message: "银行卡格式错误",
            trigger: "blur",
          },
        ],

        repaymentBank: [
          { required: true, message: "不能为空", trigger: "change" },
        ],
      },
      settlementId: undefined,
      dialogSettlement: false,
      settlementForm: {
        id: undefined,
        refundBank: undefined,
        refundCode: undefined,
        refundName: undefined,
        repaymentBank: undefined,
        repaymentCode: undefined,
      },
    };
  },
  computed: {
    ...mapGetters(["roles"]),
  },
  created() {
    this.getInfo();
  },

  methods: {
    getInfo() {
      info({ id: this.id }).then((res) => {
        this.form = res.d;
      });
    },
    resetForm() {
      this.auditForm = {
        id: undefined,
        repaymentPlan: {
          amountOfInstallments: undefined,
          numberOfInstallments: undefined,
          startDate: undefined,
        },
        type: 0,
      };
    },
    handleAudit(id, type) {
      this.resetForm();
      this.auditForm.id = id;
      this.auditForm.type = type;
      if (type === 1) {
        this.dialogAudit = true;
        phase2GetData({ ticketId: id }).then((res) => {
          console.log(res.d.amount1);
          this.auditForm.repaymentPlan = Object.assign({}, res.d);
        });
      } else {
        this.$confirm(`是否确认?`, "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }).then(() => {
          dealPhase2({ id, type }).then((res) => {
            if (res.c === 200) {
              this.$message.success("操作成功");
              // this.getList();
              this.getInfo();
            }
          });
        });
      }
    },
    audit() {
      let payload = JSON.parse(JSON.stringify(this.auditForm));
      payload.repaymentPlan.startDate = payload.repaymentPlan.startDate / 1000;
      dealPhase2(payload).then((res) => {
        if (res.c === 200) {
          this.$message.success(`审核成功`);
          this.dialogAudit = false;
          this.getInfo();
        }
      });
    },
    handleSettlement(id) {
      this.dialogSettlement = true;
      this.settlementForm.id = id;
      // this.$confirm(`是否结算?`, "提示", {
      //   confirmButtonText: "确定",
      //   cancelButtonText: "取消",
      //   type: "warning",
      // }).then(() => {
      //   dealPhase5({ id }).then((res) => {
      //     if (res.c === 200) {
      //       this.$message.success("结算成功");
      //       this.getInfo();
      //     }
      //   });
      // });
    },
    settlementConfirm() {
      this.$refs["settlementForm"].validate((valid) => {
        if (valid) {
          dealPhase5F(this.settlementForm).then((res) => {
            if (res.c == 200) {
              this.$message.success("填写完成");
              this.dialogSettlement = false;
              this.getInfo();
            }
          });
        }
      });
    },
    handleDealPhaseConfirm(id) {
      this.$confirm(`是否结算?`, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        dealPhase5({ id }).then((res) => {
          if (res.c === 200) {
            this.$message.success("结算成功");
            this.getInfo();
          }
        });
      });
    },
    handleRegistries(id) {
      this.$confirm(`是否登记备案?`, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        dealPhase4({ id }).then((res) => {
          if (res.c === 200) {
            this.$message.success("登记备案成功");
            this.getInfo();
          }
        });
      });
    },
    handleGlyAudit(id, bool) {
      this.$confirm(`是否确认?`, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        dealPhase55({ id: id, audit: bool }).then((res) => {
          if (res.c === 200) {
            this.$message.success("操作成功");
            this.getInfo();
          }
        });
      });
    },
    handleKfsAudit(id, bool) {
      this.$confirm(`是否确认?`, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        dealPhase25({ id: id, audit: bool }).then((res) => {
          if (res.c === 200) {
            this.$message.success("操作成功");
            this.getInfo();
          }
        });
      });
    },

    handleDisuse(id) {
      this.$confirm(`是否确认作废?`, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        disuse(id).then((res) => {
          if (res.c === 200) {
            this.$message.success("操作成功");
            this.getInfo();
          }
        });
      });
    },
  },
};
</script>

<style scoped lang="scss">
.ticketHead {
  border-bottom: 1px solid #f3f3f3;
  padding-bottom: 20px;

  .tag {
    background: #fff3ed;
    color: #ff783c;
    margin-left: 10px;
    padding: 4px;
    border-radius: 4px;
    font-size: 14px;
    font-family: PingFang SC;
    font-weight: 400;
  }
  .flex {
    display: flex;
  }
  .ticketTitle {
    display: flex;
    align-items: center;
    font-size: 20px;
    font-family: PingFang SC;
    font-weight: 600;
    color: #272727;
  }
  .space-between {
    justify-content: space-between;
  }
}

.infoTitle {
  font-size: 16px;
  font-family: PingFang SC;
  font-weight: 600;
  color: #272727;
  margin-bottom: 10px;
  position: relative;
  &::before {
    content: "";
    border-left: 3px solid #468eff;
    height: 100%;
    position: absolute;
    left: -10px;
  }
}
.ticketBody {
  .userInfo {
    display: flex;
    flex-wrap: wrap;
    .item {
      width: 25%;
      // margin-right: 200px;
      margin-top: 20px;
      font-size: 14px;
      font-family: PingFang SC;
      font-weight: 400;
      color: #404040;
    }
  }
  .steps {
    display: flex;
    justify-content: space-between;
    position: relative;
    background: #fbfbfb;
    padding: 27px;
    font-size: 14px;
    font-family: PingFang SC;
    font-weight: 400;
    color: #a0a0a0;
    margin-top: 25px;

    .phaseName {
      font-size: 16px;
      font-family: PingFang SC;
      font-weight: 600;
      color: #272727;
      margin-bottom: 12px;
    }
    .doneDateTime {
      width: 60%;
    }
    .phaseName_active {
      font-size: 16px;
      font-family: PingFang SC;
      font-weight: 600;
      color: #ff783c;
    }
    .stepLine {
      width: 100%;
      border-top: 1px solid #ececec;
      position: relative;
      margin-top: 25px;
    }

    .step {
      width: 100%;
      position: relative;
      display: flex;
      flex-direction: column;
      align-items: center;
      z-index: 1;
      overflow: hidden;
      div {
        text-align: center;
        line-height: 20px;
      }
      img {
        width: 53px;
        height: 53px;
        border-radius: 50%;
        margin-bottom: 20px;
      }
    }
  }
}
.ticketFooter {
  margin-top: 20px;
  .timeLine {
    display: flex;
    flex-direction: column;
    margin-top: 20px;
    .timeLineItem {
      padding-left: 35px;
      position: relative;
      &:not(:first-child) {
        padding-top: 10px;
      }
      &::before {
        content: "";
        background: url("../../assets/images/icon_timeLineIcon.png") no-repeat;
        background-size: cover;
        width: 16px;
        height: 16px;
        border-radius: 16px;
        position: absolute;
        left: 0px;
        z-index: 1;
      }
      &::after {
        content: "";
        height: 100%;
        border-left: 2px solid #f2f2f2;
        position: absolute;
        left: 7px;
        top: 0;
      }
      .date {
        // margin-bottom: 10px;
        padding-bottom: 10px;
      }
      .info {
        display: flex;
        flex-direction: column;
        background: #f7f9ff;
        padding: 20px;
        margin-bottom: 30px;

        .title {
          font-size: 16px;
          font-family: PingFang SC;
          font-weight: 600;
          color: #2986ff;
          margin-bottom: 15px;
        }
        .content {
          display: flex;
          // justify-content: space-between;
          flex-wrap: wrap;
          font-size: 14px;
          font-family: PingFang SC;
          font-weight: 400;
          color: #404040;
          line-height: 30px;
          .money {
            color: #ff4800;
          }
          div {
            margin-right: 100px;
            width: 250px;
          }
        }
      }
    }
  }
}
</style>
