<template>
  <el-dialog
    :visible.sync="isTotalDayDialogShow"
    :close-on-click-modal="false"
    :modal-append-to-body="false"
    @close="closeDia"
    width="889px"
    v-dialogDrag
    center
  >
    <div slot="title" style="display: flex; alignitems: center">
      <span style="fontsize: 16px"
        >{{ customInfo ? customInfo.CompanyName : "" }}——累计试用天数</span
      >
    </div>
    <div class="dialog-container">
      <div class="tab-container" v-if="tabsShow">
        <p class="tab" :class="{active:activeTab===tab.key}" 
          v-for="tab in tabs" :key="tab.key"
          @click="changeTab(tab)">{{tab.label}}</p>
      </div>
      <p style="margin:20px 0;">
        <el-tooltip 
          effect="dark" 
          placement="top-start"
          content="累计试用天数：试用日期的并集"
        >
          <i class="el-icon-question" style="font-size:16px;"/>
        </el-tooltip>
        累计试用天数:<span style="color:#409EFF;">{{totalDay}}</span></p>
      <div class="table-container">
          <el-table
              v-if="tableData"
              :data="tableData"
              border
              max-height="600"
              style="width: 100%; margin-bottom: 20px">
              <el-table-column
                type="index"
                label="序号"
                align="center"
                width="50">
              </el-table-column>
              <el-table-column align="center"
                  v-for="item in tableLabel" :key="item.key"
                  :label="item.label"
                  :prop="item.prop"
                  :width="item.widthsty" 
                  :min-width="item.minwidthsty"
              >
              <template slot-scope="{row,$index}">
                <span v-if="item.key==='Date'">
                  {{formatDate(row['StartDate'],row['EndDate'],'range',$index)}}
                </span>
                <span v-if="item.key==='Days'">
                  {{formatDate(row['StartDate'],row['RealEndDate'],'count')}}
                </span>
                <span v-if="item.key==='Status'">
                  {{formatStatus(row['Source'])}}
                </span>
              </template>
              </el-table-column>
          </el-table>
          <el-pagination 
            layout="total,prev,pager,next" 
            background
            :current-page="pageNo"
            @current-change="handleCurrentChange"
            :page-size="pageSize" 
            :total="total"
            style="text-align:right;">
					</el-pagination>
      </div>
    </div>
  </el-dialog>
</template>

<script>
import { customInterence } from '@/api/api.js'
export default {
  name: "",
  components: {},
  props: {
    isTotalDayDialogShow: {
      type: Boolean,
      default: false,
    },//控制弹窗展示
    customInfo: {
      type: Object,
      default:()=>{
        return {
          CompanyType:''
        }
      }
    },//客户信息
  },
  data() {
    return {
        tableData:[],//表格数据
        tableLabel:[
            {
                label:'试用日期',
                key:'Date',
                minwidthsty:180
            },
            {
                label:'试用天数',
                key:'Days',
                widthsty:80
            },
            {
                label:'状态',
                key:'Status',
                minwidthsty:150
            },
        ],
        tabs:[{label:'FICC',key:'ficc'},{label:'权益',key:'rai'}],
        activeTab:'ficc',//默认选中的tab ficc/rai
        totalDay:this.customInfo.FiccTryOutDay,//累计试用天数
        pageNo:1,
        pageSize:5,
        total:1
    };
  },
  computed: {
    tabsShow(){
      const{IsShared} = this.customInfo
      //是否是共享客户
      if(!IsShared) return false
      //是否是管理员
      const role = localStorage.getItem("Role");
      if(!role.includes('admin'))return false
      return true
    }
  },
  watch:{
    isTotalDayDialogShow(val){
      if(val){
        const {CompanyType,IsShared} = this.customInfo
        const companyType = (IsShared||CompanyType.includes('ficc'))?'ficc':'rai'
        this.changeTab({key:companyType})
      }
    },
  },
  created() {
  },
  mounted() {},
  methods: {
    closeDia() {
      this.tableData=[]
      this.$emit("update:isTotalDayDialogShow", false);
    },
    async getTabData(){
      const res = await customInterence.tryOutDeail({
        CompanyId:this.customInfo.CompanyId,
        ProductId:this.activeTab==='ficc'?1:2,
        PageSize:this.pageSize,
        CurrentIndex:this.pageNo
      })
      if(res.Ret!==200) return
      //console.log('res',res)
      const {List,Paging} = res.Data
      this.total = Paging.Totals
      this.tableData = List
    },
    handleCurrentChange(page){
      this.pageNo = page
      this.getTabData()
    },
    changeTab(tab){
      const {FiccTryOutDay,RaiTryOutDay} = this.customInfo
      this.activeTab = tab.key
      this.totalDay = this.activeTab==='ficc'?FiccTryOutDay:RaiTryOutDay
      this.pageNo = 1
      this.getTabData()
    },
    formatDate(startDate,endDate,type,index){
      if(type==='range'){
        const startStr = startDate==='0001-01-01T00:00:00Z'?'--':this.$moment(startDate).format('YYYY.MM.DD')
        //如果是第一页的第一条,判断endDate是否超过当天
        let realDate = endDate
        if(index===0&&this.pageNo===1&&this.$moment()<this.$moment(endDate)){
          realDate = this.$moment()
        }
        const endStr = endDate==='0001-01-01T00:00:00Z'?'--':this.$moment(realDate).format('YYYY.MM.DD')
        return `${startStr} ~ ${endStr}`
      }
      if(type==='count'){
        if(startDate==='0001-01-01T00:00:00Z'||endDate==='0001-01-01T00:00:00Z') return 0
        const day = this.$moment(endDate).diff(this.$moment(startDate),'day')
        return Math.max(day+1,1)
      }
    },
    formatStatus(status){
      const statusMap = {
        'add_try_out':'增开试用',
        'receive':'流失转试用',
        'thaw':'冻结转试用',
        'delay':'试用延期',
        'apply_receive':'流失转试用',
        'add':'新增试用',
        'edit':'试用变更',
        'formal_to_try_out':'正式转试用'
      }
      return statusMap[status]||'--'
    }
  },
};
</script>
<style scoped lang="scss">
.dialog-container{
  padding:0 50px 15px 50px;
  .tab-container{
    display: flex;
    .tab{
      cursor: pointer;
      width:110px;
      height:40px;
      text-align: center;
      line-height: 40px;
      font-size: 14px;
      background-color: #ECF5FF;
      color:#409EFF;
      border:1px solid #B3D8FF;
      margin-right: 42px;
      border-radius: 4px;
      &.active{
        border-color: #409EFF;
        background-color: #409EFF;
        color: #FFFFFF;
      }
    }
  }
}

</style>
