<template>
  <div class="app-container">
    <div v-show="viewState == 1">
      <div class="tab-header webtop">
        <div>{{ viewTitle }}</div>
        <div>
          <el-button type="primary" size="small" @click="lookSuSong()">查看诉讼申请</el-button>
          <el-button type="info" size="small" @click="handleReturn()">关闭</el-button>
        </div>
      </div>
      <div class="listconadd">
        <el-form ref="form_obj" :model="formobj" :rules="rules" class="formaddcopy02">
          <el-row style="border-top: 1px solid #e0e3eb">
            <el-col :span="8">
              <div class="span-sty">分公司</div>
              <el-form-item><span class="addinputInfo">{{ formobj.useOrgName }}</span></el-form-item>
            </el-col>
            <el-col :span="8">
              <div class="span-sty">创建部门</div>
              <el-form-item><span class="addinputInfo">{{ formobj.createDept }}</span></el-form-item>
            </el-col>
            <el-col :span="8">
              <div class="span-sty">创建人</div>
              <el-form-item><span class="addinputInfo">{{ formobj.createByName }}</span></el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="8">
              <div class="span-sty">创建日期</div>
              <el-form-item><span class="addinputInfo">{{ formobj.createDate }}</span></el-form-item>
            </el-col>
            <el-col :span="8">
              <div class="span-sty">公司负责人</div>
              <el-form-item><span class="addinputInfo">{{ formobj.companyHead }}</span></el-form-item>
            </el-col>
            <el-col :span="8">
              <div class="span-sty">法务部门负责人</div>
              <el-form-item><span class="addinputInfo">{{ formobj.legalHead }}</span></el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="8">
              <div class="span-sty">案件编号</div>
              <el-form-item><span class="addinputInfo">{{ formobj.caseNo }}</span></el-form-item>
            </el-col>
            <el-col :span="8">
              <div class="span-sty">案件类型</div>
              <el-form-item><span class="addinputInfo">{{ formobj.caseType }}</span></el-form-item>
            </el-col>
            <el-col :span="8">
              <div class="span-sty">贷款合同编号</div>
              <el-form-item><span class="addinputInfo">{{ formobj.loanContractNo }}</span></el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="8">
              <div class="span-sty">贷款人</div>
              <el-form-item><span class="addinputInfo">{{ formobj.loanName }}</span></el-form-item>
            </el-col>
            <el-col :span="8">
              <div class="span-sty">贷款人证件号码</div>
              <el-form-item><span class="addinputInfo">{{ formobj.idNumber }}</span></el-form-item>
            </el-col>
            <el-col :span="8">
              <div class="span-sty">贷款人户籍/注册地址</div>
              <el-form-item><span class="addinputInfo">{{ formobj.borrowerAddress }}</span></el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="8">
              <div class="span-sty">客户</div>
              <el-form-item><span class="addinputInfo">{{ formobj.customerName }}</span></el-form-item>
            </el-col>
            <el-col :span="8">
              <div class="span-sty">资方</div>
              <el-form-item><span class="addinputInfo">{{ formobj.bankName }}</span></el-form-item>
            </el-col>
            <el-col :span="8">
              <div class="span-sty">资方合同编号</div>
              <el-form-item><span class="addinputInfo">{{ formobj.bankContractNo }}</span></el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="8">
              <div class="span-sty">欠款合计</div>
              <el-form-item><span class="addinputInfo">{{ formobj.amountAll }}</span></el-form-item>
            </el-col>
            <el-col :span="8">
              <div class="span-sty">是否全额诉讼</div>
              <el-form-item><span class="addinputInfo">{{ formobj.full }}</span></el-form-item>
            </el-col>
            <el-col :span="8">
              <div class="span-sty">起诉金额合计</div>
              <el-form-item><span class="addinputInfo">{{ formobj.sueMoney }}</span></el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <div class="span-sty">部分诉讼说明</div>
              <el-form-item><span class="addinputInfo">{{ formobj.sueShows }}</span></el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <div class="span-sty">起诉原因</div>
              <el-form-item><span class="addinputInfo">{{ formobj.sueReason }}</span></el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="8">
              <div class="span-sty">案件当前阶段</div>
              <el-form-item><span class="addinputInfo">{{ formobj.caseStage }}</span></el-form-item>
            </el-col>
            <el-col :span="8">
              <div class="span-sty">案件当前环节</div>
              <el-form-item><span class="addinputInfo">{{ formobj.caseTache }}</span></el-form-item>
            </el-col>
            <el-col :span="8">
              <div class="span-sty">进入当前环节日期</div>
              <el-form-item>
                <div style="display: flex;flex-direction: row;justify-content: space-between;align-items: center">
                  <span class="addinputInfo">{{ formobj.enterDate }}</span>
                  <span>用时： {{ formobj.useDays }}天</span>
                </div>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <div class="span-sty">诉讼时效</div>
              <el-form-item><span class="addinputInfo">{{ formobj.sueAging }}</span></el-form-item>
            </el-col>
          </el-row>
          <div class="title">车辆信息</div>
          <el-table :key="carKey" :data="formobj.veh" :index="index" border style="width: 100%">
            <el-table-column prop="vinNo" label="车架号" align="center" />
            <el-table-column prop="carNum" label="车牌号" align="center" />
            <el-table-column prop="affiliatedCompany" label="挂靠公司" align="center" />
            <el-table-column prop="carState" label="车辆状态" align="center" />
            <el-table-column prop="remarks" label="备注" align="center" />
          </el-table>
          <div class="title">担保人</div>
          <el-table :key="cautionerKey" :data="formobj.guarantor" :index="index" border style="width: 100%">
            <el-table-column prop="name" label="姓名" align="center" />
            <el-table-column prop="idCardNo" label="身份证号" align="center" />
            <el-table-column prop="registerAddress" label="户籍地址" align="center" />
            <el-table-column prop="currentAddress" label="现住址" align="center" />
            <el-table-column prop="mobile" label="联系电话" align="center" />
          </el-table>
          <div class="title">诉讼相关费用</div>
          <el-table :key="lawsuitKey" :data="formobj.fees" :index="index" border style="width: 100%">
            <el-table-column prop="paymentItems" label="缴费项目" align="center" />
            <el-table-column prop="paymentTime" label="缴费时间" align="center" />
            <el-table-column prop="paymentMoney" label="缴费金额" align="center" />
            <el-table-column prop="remarks" label="备注" align="center" />
            <el-table-column prop="operatingTime" label="操作时间" align="center" />
            <el-table-column prop="operator" label="操作人" align="center" />
            <el-table-column label="附件" align="center">
              <template slot-scope="scope">
                <el-button type="primary" size="mini" style="padding-left: 5px" v-show="scope.row.feesfile.length > 0" @click="handleLook(scope.row.feesfile)">查看</el-button>
              </template>
            </el-table-column>
          </el-table>
          <div class="title">保全</div>
          <el-table :key="preserveKey" :data="formobj.preserve" :index="index" border style="width: 100%">
            <el-table-column prop="preserveType" label="保全类型" align="center" />
            <el-table-column prop="preserveItems" label="保全项目" align="center" />
            <el-table-column prop="preserveTime" label="保全日期" align="center" />
            <el-table-column prop="preserveMoney" label="保全金额" align="center" />
            <el-table-column prop="dateTo" label="有效期至" align="center" />
            <el-table-column prop="remarks" label="备注" align="center" />
            <el-table-column prop="operatingTime" label="操作时间" align="center" />
            <el-table-column prop="operator" label="操作人" align="center" />
            <el-table-column label="附件" align="center">
              <template slot-scope="scope">
                <el-button type="primary" size="mini" style="padding-left: 5px" v-show="scope.row.preservefile.length > 0" @click="handleLook(scope.row.preservefile)">查看</el-button>
              </template>
            </el-table-column>
          </el-table>
          <el-row>
            <el-col :span="24">
              <el-button :type="isFirstSelect ? 'primary' : 'default'" size="small" @click="toFirst">一审</el-button>
              <el-button :type="isTwoSelect ? 'primary' : 'default'" size="small" @click="toTwo">二审</el-button>
              <el-button :type="isThreeSelect ? 'primary' : 'default'" size="small" @click="toThree">再审</el-button>
              <el-button :type="isFourSelect ? 'primary' : 'default'" size="small" @click="toFour">执行</el-button>
              <el-button :type="isFiveSelect ? 'primary' : 'default'" size="small" @click="toFive">结案</el-button>
            </el-col>
          </el-row>
          <div>
            <!-- 一审模块 -->
            <firstinstanceInfo v-show="activeName == 1" ref="divFirst"/>
            <!-- 二审模块 -->
            <trialofsecondinstanceInfo v-show="activeName == 2" ref="divSecond" />
            <!-- 再审模块 -->
            <examineagainInfo v-show="activeName == 3" ref="divExamineagain" />
            <!-- 执行模块 -->
            <executeInfo v-show="activeName == 4" ref="divExecute" />
            <!-- 结案模块 -->
            <settlealawsuitInfo v-show="activeName == 5" ref="divSettlealawsuit" />
          </div>
        </el-form>
      </div>
    </div>
    <!-- 查看诉讼申请 -->
    <caseactionInfo v-show="viewState == 2" ref="divCaseaction" @doback="resetState"/>
    <!-- 诉讼费用、保全查看 -->
    <el-dialog :visible.sync="dialogVisible">
      <el-image style="width: 150px; height: 150px" v-for="(item, index) in list" :key="index" :src="item" :preview-src-list="list"/>
    </el-dialog>
  </div>
</template>

<script>
import req from '@/api/courseofthecase/courseofthecase'
import caseactionInfo from '../caseaction/caseactionInfo'
import firstinstanceInfo from './relation/firstinstance/firstinstanceInfo'
import trialofsecondinstanceInfo from './relation/trialofsecondinstance/trialofsecondinstanceInfo'
import examineagainInfo from './relation/examineagain/examineagainInfo'
import executeInfo from './relation/execute/executeInfo'
import settlealawsuitInfo from './relation/settlealawsuit/settlealawsuitInfo'

export default {
  name: 'CourseOfTheCaseInfo',
  components: {
    caseactionInfo,
    firstinstanceInfo,
    trialofsecondinstanceInfo,
    examineagainInfo,
    executeInfo,
    settlealawsuitInfo
  },
  data() {
    return {
      viewTitle: '',
      viewState: 1,
      submitdisabled: false,
      dialogVisible: false,
      list: [],
      carKey: 0,
      cautionerKey: 1,
      lawsuitKey: 2,
      preserveKey: 3,
      index: 0,
      activeName: 0,
      isFirstSelect: false, // 一审是否选中
      isTwoSelect: false, // 二审是否选中
      isThreeSelect: false, // 再审是否选中
      isFourSelect: false, // 执行是否选中
      isFiveSelect: false, // 结案是否选中
      formobj: {
        sid: '',
        useOrgName: '',
        createDept: '',
        createByName: '',
        createDate: '',
        companyHead: '',
        companyHeadSid: '',
        legalHead: '',
        legalHeadSid: '',
        caseType: '',
        caseNo: '',
        caseTypeKey: '',
        loanContractNo: '',
        loanName: '',
        idNumber: '',
        borrowerAddress: '',
        customerName: '',
        bankName: '',
        bankContractNo: '',
        amountAll: '',
        full: '',
        sueMoney: '',
        sueShows: '',
        sueReason: '',
        caseStage: '',
        useDays: '',
        enterDate: '',
        caseTache: '',
        sueAging: '',
        veh: [],
        fees: [],
        guarantor: [],
        preserve: []
      },
      rules: {}
    }
  },
  methods: {
    showInfo(row) {
      this.viewTitle = '案件办理详情'
      this.$nextTick(() => {
        this.$refs['form_obj'].clearValidate()
      })
      req.fetchBySid({ sid: row.sid }).then((res) => {
        if (res.success) {
          this.formobj = res.data
          if (this.formobj.caseStage === '一审') {
            // 获取一审模块
            this.toFirst()
          } else if (this.formobj.caseStage === '二审') {
            // 获取二审模块
            this.toTwo()
          } else if (this.formobj.caseStage === '再审') {
            // 获取再审模块
            this.toThree()
          } else if (this.formobj.caseStage === '执行') {
            // 获取执行模块
            this.toFour()
          } else if (this.formobj.caseStage === '结案') {
            // 获取结案模块
            this.toFive()
          }
        }
      })
    },
    // 诉讼相关费用、保全--附件查看
    handleLook(row) {
      this.dialogVisible = true
      if (row.length > 0) {
        const aa = []
        row.forEach((e) => {
          aa.push(e.url)
        })
        this.list = aa
      }
    },
    // 一审模块
    toFirst() {
      this.isFirstSelect = true
      this.isTwoSelect = false
      this.isThreeSelect = false
      this.isFourSelect = false
      this.isFiveSelect = false
      this.activeName = 1
      this.$refs['divFirst'].showEdit(this.formobj.sid)
    },
    // 二审模块
    toTwo() {
      this.isFirstSelect = false
      this.isTwoSelect = true
      this.isThreeSelect = false
      this.isFourSelect = false
      this.isFiveSelect = false
      this.activeName = 2
      this.$refs['divSecond'].showEdit(this.formobj.sid)
    },
    // 再审模块
    toThree() {
      this.isFirstSelect = false
      this.isTwoSelect = false
      this.isThreeSelect = true
      this.isFourSelect = false
      this.isFiveSelect = false
      this.activeName = 3
      this.$refs['divExamineagain'].showEdit(this.formobj.sid)
    },
    toFour() {
      this.isFirstSelect = false
      this.isTwoSelect = false
      this.isThreeSelect = false
      this.isFourSelect = true
      this.isFiveSelect = false
      this.activeName = 4
      this.$refs['divExecute'].showEdit(this.formobj.sid)
    },
    toFive() {
      this.isFirstSelect = false
      this.isTwoSelect = false
      this.isThreeSelect = false
      this.isFourSelect = false
      this.isFiveSelect = true
      this.activeName = 5
      this.$refs['divSettlealawsuit'].showEdit(this.formobj.sid)
    },
    lookSuSong() {
      if (this.formobj.suSongSid !== '') {
        this.viewState = 2
        this.$refs['divCaseaction'].showInfo({ sid: this.formobj.suSongSid })
      } else {
        this.$message({ showClose: true, type: 'error', message: '暂无诉讼记录' })
      }
    },
    resetState() {
      this.viewState = 1
    },
    handleReturn() {
      this.formobj = {
        sid: '',
        useOrgName: '',
        createDept: '',
        createByName: '',
        createDate: '',
        companyHead: '',
        companyHeadSid: '',
        legalHead: '',
        legalHeadSid: '',
        caseType: '',
        caseNo: '',
        caseTypeKey: '',
        loanContractNo: '',
        loanName: '',
        idNumber: '',
        borrowerAddress: '',
        customerName: '',
        bankName: '',
        bankContractNo: '',
        amountAll: '',
        full: '',
        sueMoney: '',
        sueShows: '',
        sueReason: '',
        suSongSid: '',
        caseStage: '',
        useDays: '',
        enterDate: '',
        caseTache: '',
        sueAging: '',
        veh: [],
        fees: [],
        guarantor: [],
        preserve: []
      }
      this.activeName = 0
      this.isFirstSelect = false
      this.isTwoSelect = false
      this.isThreeSelect = false
      this.isFourSelect = false
      this.isFiveSelect = false
      this.$emit('doback')
    }
  }
}
</script>

<style scoped>
.span-sty {
  width: 150px !important;
}
.addinputInfo {
  margin-left: 140px !important;
}
</style>
