<script setup>
import { reactive, ref, toRefs } from 'vue'
import { ElImageViewer } from 'element-plus'
import { useRouter } from 'vue-router'

const props = defineProps({
  isPreview:{
      type:Boolean,
      default:false
  },
  dealList:{
      type:Array,
      default:()=>{return []}
  }
})
const emit = defineEmits(['close'])


const $router = useRouter()

const state = reactive({
  ficcContractList:[],
  raiContractList:[],
  contractList:[],
  contractType:'',
  showViewer:false,
  constractFileImgList:[]
})

function getContractList(){
    state.ficcContractList = props.dealList.filter(i=>i.ProductId===1)
    state.raiContractList = props.dealList.filter(i=>i.ProductId===2)
    changeContractType('ficc')
    if(!state.ficcContractList.length&&state.raiContractList.length){
        changeContractType('rai')
    }
}

function changeContractType(type){
    if(state.contractType===type) return 
    state.contractType = type
    type==='ficc'&&(state.contractList=state.ficcContractList)
    type==='rai'&&(state.contractList=state.raiContractList)
}

function showContractFiles(data){
    state.constractFileImgList = []
    const {constractFiles} = data
    const imageList = constractFiles.filter(i=>i.type==='img')
    const wordList = constractFiles.filter(i=>i.type==='word')
    const pdfList = constractFiles.filter(i=>i.type==='pdf')
    imageList.forEach(i=>{
        state.constractFileImgList.push(i.url)
    })
    
    if(state.constractFileImgList.length){
        state.showViewer = true
    }
}

function preViewConstractFile(data,list=[]){
    state.constractFileImgList = []
    if(data.type==='word'){
        window.open('https://view.officeapps.live.com/op/view.aspx?src='+data.url,'_blank');
    }
    if(data.type==='pdf'){
        window.open(data.url);
    }
    if(data.type==='img'){
        //改变list的顺序,当前点击的为第一个
        list.filter(i=>i.type==='img').map(i=>{state.constractFileImgList.push(i.url)})
        const index = state.constractFileImgList.findIndex(url=>url===data.url)
        state.constractFileImgList = [...state.constractFileImgList.slice(index),...state.constractFileImgList.slice(0,index)]
        if(state.constractFileImgList.length){
            state.showViewer = true
        }
    }
}

function showExpand(index,type='root'){
    type==='root'&&(state.contractList[index].extend = !state.contractList[index].extend)
    type==='files'&&(state.contractList[index].filesExtend = !state.contractList[index].filesExtend)
    state.contractList.splice(index,1,state.contractList[index])
}

function toContractDetail(item){
    if(!item.ContractId) return 
    const { href } = $router.resolve({path:'/contractdetail',query:{contractId:item.ContractId}})||{href:''}
    href&&window.open(href, '_blank');
}

const {
  contractList,
  contractType,
  showViewer,
  constractFileImgList
} = toRefs(state)
</script>
<template>
  <!-- 历史签约弹窗 -->
  <div class="history-contract-wrap">
      <el-dialog
      :model-value="isPreview"
      :modal-append-to-body='false'
      @close="emit('close')"
      title="历史签约"
      center
      top="7vh"
      draggable
      width="1200px">
          <div class="dialog-wrap">
              <div class="contract-tab">
                  <span :class="{'active':contractType==='ficc'}" @click="changeContractType('ficc')">FICC</span>
                  <span :class="{'active':contractType==='rai'}" @click="changeContractType('rai')">权益</span>
              </div>
              <div class="contract-list">
                  <div class="contract-item" v-for="(item,index) in contractList" :key="item.ContractCode">
                      <div class="contract-tag">
                          <el-tag>
                              {{item.ContractType}}
                              <el-tooltip
                              class="item" 
                              effect="dark"
                              v-if="item.ContractType!='补充协议'"
                              placement="top-start">
                                <template #content>
                                  <div v-if="item.ContractType=='新签合同'">没有正式转试用记录的客户，在申请转正时提交的合同</div>
                                  <div v-if="item.ContractType=='续约合同'">
                                      1、有正式转试用记录的客户，在申请转正时提交的合同<br>
                                      2、所有客户在续约申请时提交的合同
                                  </div>
                                </template>
                                <i class="el-icon-info"></i>
                              </el-tooltip>
                          </el-tag>
                          <span :style="{'text-decoration-line':item.ContractId?'underline':'none'}" @click="toContractDetail(item)">合同编号：{{item.ContractCode}}</span>
                      </div>
                      <div class="line"></div>
                      <!-- 合同基本信息 -->
                      <div class="contract-base">
                          <ul class="base-lise">
                              <li><p>合同期限：{{item.StartDate+'~'+item.EndDate}}</p><p>合同金额：{{item.Money}}</p></li>
                              <li><p>付款方式：{{item.PayMethod}}</p><p>付款渠道：{{item.PayChannel}}</p></li>
                              <li><p>审批时间：{{item.ModifyTimeStr}}</p><p></p></li>
                          </ul>
                      </div>
                      <!-- 权限设置和查看附件 -->
                      <div class="contract-info">
                          <div @click="showExpand(index,'root')">权限设置 <span><i :class="item.extend?'el-icon-arrow-down':'el-icon-arrow-right'"></i></span></div>
                      </div>
                      <div class="contract-root" v-show="item.extend">
                          <ul class="menu_lists">
                              <li v-for="auth in item.PermissionList" :key="auth.ClassifyName" class="menu_item">
                                  <el-checkbox :indeterminate="auth.CheckList.length>0&&auth.CheckList.length<auth.Items.length" v-model="auth.CheckAll" disabled style="marginRight:30px;fontWeight:bold;">{{auth.ClassifyName+':'}}</el-checkbox>
                                  <el-checkbox-group v-model="auth.CheckList" disabled>
                                      <el-checkbox v-for="list in auth.Items" :label="list.ChartPermissionId" :key="list.ChartPermissionId" class="list_item">{{list.PermissionName}}</el-checkbox>
                                  </el-checkbox-group>
                              </li>
                          </ul>
                      </div>
                      <div class="contract-info">
                          <div @click="showExpand(index,'files')">合同附件 <span><i :class="item.filesExtend?'el-icon-arrow-down':'el-icon-arrow-right'"></i></span></div>
                      </div>
                      <div class="contract-files" v-show="item.filesExtend">
                          <ul class="file-list">
                              <li v-for="img in item.constractFiles" :key="img">
                                  <img :src="require('@/assets/img/constract/word-icon.png')" v-if="img.type=='word'" @click="preViewConstractFile(img)"/>
                                  <img :src="require('@/assets/img/constract/pdf.png')" v-else-if="img.type=='pdf'" @click="preViewConstractFile(img)"/>
                                  <img :src="img.url" v-else-if="img.type=='img'" @click="preViewConstractFile(img,item.constractFiles)"/>
                              </li>
                          </ul>
                      </div>
                  </div>
                  <span v-if="!contractList.length" style="font-size:16px;color:#999;">暂无历史合同</span>
              </div>
          </div>
          <el-image-viewer 
              v-if="showViewer" 
              @close="()=>{this.showViewer = false}" 
              :url-list="constractFileImgList" />
      </el-dialog>
  </div>
</template>
<style scoped lang="scss">

</style>