<template>
  <div class="component_body">
    <a-modal  v-model="newVisible" title="标的信息" :afterClose="onClose" width="1350px" :bodyStyle="modeStyle">
      <a-tabs default-active-key="1" tab-position="left" :tabBarStyle="tabsStyle">
        <a-tab-pane key="1">
          <span slot="tab">
            <span class="tab_span">*</span>
            授权方信息
          </span>
          <p>授权方信息</p>
          <div class="tab_body">
            <template v-if="userinfo">
              <div class="tab_body_content" >
                <p class="tab_body_p">机构名称：{{userinfo.name}}</p>
                <p class="tab_body_p">认证类型：{{userinfo.userType}}</p>
                <p class="tab_body_p">认证状态：{{userinfo.state==0?'认证中':userinfo.state==1?'认证成功':'认证失败'}}</p>
                <p class="tab_body_p">统一社会信用代码：{{userinfo.uscc}}</p>
                <p class="tab_body_p">身份ISLI认证码：{{userinfo.islicode}}</p>
                <!-- <p class="tab_body_p">机构类型：{{item.userType}}</p>

                <p class="tab_body_p" v-if="item.certType">证件类型：{{item.certType}}</p>
                <p class="tab_body_p" v-if="item.idNumber">证件号码：{{item.idNumber}}</p>
                <p class="tab_body_p" v-if="item.cellPhone">手机号码：{{item.cellPhone}}</p>

                <p class="tab_body_p" v-if="item.legalsName">法人名称：{{item.legalsName}}</p>
                <p class="tab_body_p" v-if="item.legalsType">法人证件类型：{{item.legalsType}}</p>
                <p class="tab_body_p" v-if="item.legalsIdnum">法人证件号：{{item.legalsIdnum}}</p>
                <p class="tab_body_p" v-if="item.legalsCellPhone">法人手机号：{{item.legalsCellPhone}}</p>

                <p class="tab_body_p">银行账户：{{item.publicAccount}}</p>
                <p class="tab_body_p">银行卡类型：{{item.bankCardType}}</p>
                <p class="tab_body_p">银行行别：{{item.bankType}}</p>
                <p class="tab_body_p">开户行名称：{{item.bankName}}</p>
                <p class="tab_body_p">开户人姓名：{{item.bankAccountName}}</p>
                <p class="tab_body_p">开户人身份证号码：{{item.certIdnum}}</p>
                <p class="tab_body_p">开户行预留手机号码：{{item.bankCellPhone}}</p>
                <p class="tab_body_p">开户行所在地：{{item.bankAddress}}</p> -->
              </div>
            </template>
            <!-- <span v-else>暂无数据</span> -->
          </div>
        </a-tab-pane>
        <a-tab-pane key="2" force-render>
          <span slot="tab">
            <span class="tab_span">*</span>
            数据信息
          </span>
          <div class="tab_body">
            <div class="tab_body_title">
              <p class="tab_body_title_bg"></p>
              <div>{{entrust_goods.goods[0].goods_type==1?'文化资源数据':'文化数字内容'}}-基本信息</div>
            </div>
            <template v-if="entrust_goods.goods.length!=0">
              <div class="tab_content " v-for="(item,index) in entrust_goods.goods" :key="index">
                <div class="tab_content_infoImg">
                  <img :src="item.goods_image" class="tab_content_img" v-if="item.goods_image!=''">
                  <img src="data:image/png;base64,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" class="tab_content_img" v-else>
                </div>
                <div class="tab_content_right">
                  <div class="content_right_title">标的名称：{{item.goods_name}}</div>
                  <div class="content_info">
                    <div class="content_info_left">
                      <p>标志码：{{item.goods_islicode}}</p>
                      <!-- <p>交易关联标识符：{{item.contract_code}}</p> -->
                      <p>交易品种：{{item.goods_type==1?'文化资源数据':'文化数字内容'}}</p>
                      <p>交易方式：{{item.goods_entrust==1?'转让':'授权'}}</p>
                      <p>权利类型：{{item.goods_ownership_str}}</p>
                      <p>委托类型：{{item.contractual_period==1?'永久性委托':item.contractual_period==2?'一次性委托':'阶段性委托'}}</p>
                      <p>收费类型：{{item.charges_type==1?'免费':'付费'}}</p>
                      <!-- <p>交易保证金：{{item.earnest_money}}</p> -->
                      <p>自报价：{{item.price}}</p>
                      <p>委托开始时间：{{item.contractual_start_time}}</p>
                      <p>委托终止时间：{{item.contractualtime_end_time}}</p>
                    </div>
                  </div>
                </div>
              </div>
            </template>
            <!-- <p v-else class="none_p">暂无数据</p> -->
            <div class="tab_body_title">
              <p class="tab_body_title_bg"></p>
              <div>{{entrust_goods.goods[0].goods_type==1?'文化资源数据':'文化数字内容'}}-关联资源</div>
            </div>
            <div class="tab_content">
              <p class="tab_content_title">{{entrust_goods.goods[0].goods_type==1?'文化资源数据':'文化数字内容'}}集</p>
            </div>
            <div class="content_table">
              <a-table :columns="columns1" :data-source="entrust_goods.source_gather" bordered :pagination="false">
                <template slot="operation" >
                  <span @click="selectDetails(entrust_goods.goods[0].goods_islicode)" class="details_span">详情</span>
                </template>
              </a-table>
            </div>

            <!-- <div class="tab_content">
              <p class="tab_content_title">文化资源数据</p>
            </div>
            <div class="content_table">
              <a-table :columns="columns" :data-source="entrust_goods.source" bordered :pagination="false"></a-table>
            </div> -->

          </div>
        </a-tab-pane>
        <!-- <a-tab-pane key="3" tab="资产评价报告">
          Content of Tab Pane 3
        </a-tab-pane> -->
      </a-tabs>
      <template slot="footer">
        <div>
          <a-button type="white" @click="onClose">返 回</a-button>
        </div>
      </template>
    </a-modal>

    <a-modal  v-model="newVisible1" title="标的信息" width="1172px" :bodyStyle="modeStyle">
        <div class="tab_body">
          <div class="tab_body_title">
            <p class="tab_body_title_bg"></p>
            <div>{{sourceDate.collectionType}}-基本信息</div>
          </div>
          <div class="tab_content ">
            <!-- <div class="tab_content_infoImg"> -->
              <!-- <img src="../../assets/img/test.png" class="tab_content_img"> -->
            <!-- </div> -->
            <div class="tab_content_right">
              <div class="content_right_title">标的名称：{{sourceDate.source_name}}</div>
              <div class="content_info">
                <div class="content_info_left">
                  <p>其他标识符：{{sourceDate.otherIdentifiers}}</p>
                  <p>标识符：{{sourceDate.identifier}}</p>
                  <p>类型：{{sourceDate.collectionType}}</p>
                  <p>服务类型：{{sourceDate.serviceType}}</p>
                  <p>分类：{{sourceDate.classification}}</p>
                  <p>贡献者：{{sourceDate.contributors}}</p>
                  <p>著作权人：{{sourceDate.copyrightOwner}}</p>
                  <p>载体：{{sourceDate.carrier==1?'纸张':sourceDate.carrier==2?'感光材料':sourceDate.carrier==3?'磁带':sourceDate.carrier==4?'光盘':
                    sourceDate.carrier==5?'移动终端':sourceDate.carrier==6?'计算机':sourceDate.carrier==7?'数字化数据':sourceDate.carrier==8?'天然载体':
                    sourceDate.carrier==9?'器具载体':'其他载体'
                    }}</p>
                  <p>登记者：{{sourceDate.registrant}}</p>
                  <p>登记日期：{{sourceDate.registerDate}}</p>
                </div>
                <div>
                  <p>所属/收藏机构：{{sourceDate.repositoryName}}</p>
                  <p>尺寸：{{sourceDate.dimensions}}</p>
                  <p>组件数量：{{sourceDate.quantity}}</p>
                  <p>标签：{{sourceDate.label}}</p>
                  <p>描述：{{sourceDate.description}}</p>
                  <p>哈希值：{{sourceDate.md5}}</p>
                  <p>版本：{{sourceDate.edition==1?'真迹':sourceDate.edition==2?'抄本':sourceDate.edition==3?'拓本':sourceDate.edition==4?'临摹':
                    sourceDate.edition==5?'复制':sourceDate.edition==6?'复原':sourceDate.edition==7?'重建':sourceDate.edition==8?'原始录音':sourceDate.edition==9?'原始视频':
                    sourceDate.edition==10?'刻录':'原创'}}</p>
                  <p>现况：{{sourceDate.collectionCondition==1?'完好':sourceDate.collectionCondition==2?'残破':sourceDate.collectionCondition==3?'残缺':
                    sourceDate.collectionCondition==4?'霉变':
                    sourceDate.collectionCondition==5?'皱褶':sourceDate.collectionCondition==6?'污渍':sourceDate.collectionCondition==7?'脱浆':sourceDate.collectionCondition==8?'脱线':
                    sourceDate.collectionCondition==9?'生锈':sourceDate.collectionCondition==10?'褪色':'焦脆'}}</p>
                  <p>封面：{{sourceDate.covers}}</p>
                </div>
              </div>
            </div>
          </div>

          <div class="tab_body_title">
            <p class="tab_body_title_bg"></p>
            <div>{{sourceDate.collectionType}}-关联资源</div>
          </div>
          <div v-for="(item,index) in sourceDate.entrust_goods.source" :key="index">
            <div class="tab_content">
              <p class="tab_content_title">{{item.serviceType}}</p>
            </div>
            <div class="content_table">
              <a-table :columns="columns" :data-source="item.data" bordered :pagination="false"></a-table>
            </div>
          </div>
        </div>
      <template slot="footer">
        <div>
          <a-button type="white" @click="onClose(1)">返 回</a-button>
        </div>
      </template>
    </a-modal>

  </div>
</template>

<script>
  import {goodsDetail,sourceDetail,orderDetail} from '../../api/index'
  export default {
    name:'dataSelect',
    props:{
      visible:{
        type:Boolean,
        require: true
      },
      goods_islicode:{
        type:String,
      },
      batchcode:{
        type:String,
      },
      type:{
        type:Number
      }
    },
    data(){
      return{
        newVisible:true,
        newVisible1:false,
        modeStyle:{
          'height':'530px'
        },
        tabsStyle:{
          'height':'500px'
        },
        entrust_goods:{
          goods:[{goods_type:''}]
        },
        userinfo:[],
        sourceDate:{
          entrust_goods:{}
        },
        data:[],
        columns:[
          {
            title: '资源名称',
            dataIndex: 'source_name',
            width:'144px',
            align:'center'
          },
          {
            title: 'ISLI标志码',
            dataIndex: 'islicode',
            width:'242px',
            align:'center'
          },
          {
            title: 'ISLI关联编码',
            dataIndex: 'relevancy_isli',
            width:'259px',
            align:'center'
          },
          {
            title: '大小',
            dataIndex: 'filesize',
            width:'70px',
            align:'center'
          },
          {
            title: '格式',
            dataIndex: 'format',
            width:'70px',
            align:'center'
          },
          {
            title: '时间',
            dataIndex: 'registerDate',
            width:'148px',
            align:'center'
          },
        ],
        columns1:[
          {
            title: '文化数字内容集名称',
            dataIndex: 'source_name',
            width:'166px',
            align:'center'
          },
          {
            title: '分类',
            dataIndex: 'source_type',
            width:'82px',
            align:'center'
          },
          {
            title: '生成时间',
            dataIndex: 'allocationtime',
            width:'177px',
            align:'center'
          },
          {
            title: 'ISLI标志码',
            dataIndex: 'linkCode',
            width:'310px',
            align:'center'
          },
          {
            title: '关联目标数量',
            dataIndex: 'source_count',
            width:'110px',
            align:'center'
          },
          {
            title: '查看',
            scopedSlots: { customRender: 'operation' },
            width:'138px',
            align:'center'
          },
        ]
      }
    },
    created(){
      if(this.type==0){
        this.goodsDetail()
      }else{
        this.orderDetail()
      }
    },
    methods:{
      //订单数据查看
      orderDetail(){
        let data={batchcode:this.batchcode}
        orderDetail(data).then(res=>{
          console.info(res)
          if(res.code==200){
            if(res.data.length!=0){
              this.userinfo=res.data.userinfo
              this.entrust_goods=res.data.entrust_goods
              this.columns1[0].title=this.entrust_goods.goods[0].goods_type==1?'文化资源数据集名称': '文化数字内容集名称'
            }
          }else{
            this.$message.error(res.msg);
          }
        })
      },
      selectDetails(val){
        let data={isli:val}
        sourceDetail(data).then(res=>{
          console.info(res)
          if(res.code==200){
            this.sourceDate=res.data
            this.newVisible1=true
          }else{
            this.$message.error(res.msg);
          }
        })
      },
      goodsDetail(){
        let data={islicode:this.goods_islicode}
        goodsDetail(data).then(res=>{
          console.info(res)
          if(res.code==200){
            // this.userinfo.push(res.data.userinfo)
            this.userinfo=res.data.userinfo
            console.info(this.userinfo)
            let goods=[res.data.entrust_goods.goods]
            this.entrust_goods=res.data.entrust_goods
            this.entrust_goods.goods=goods
            this.columns1[0].title=this.entrust_goods.goods[0].goods_type==1?'文化资源数据集名称': '文化数字内容集名称'
          }else{
            this.$message.error(res.msg);
          }
        })
      },
      onClose(type) {
        if(type==1){
          this.newVisible1=false
        }else{
          this.newVisible=false
          this.$emit('update:visible', false)
        }
      }
    },
  }


</script>

<style scoped>
  .tab_span{
    color: red;
  }
  /deep/ .ant-modal-header{
    border-bottom: none;
  }
  /deep/ .ant-modal-footer{
    border-top: none;
    padding: 20px 16px;
  }
  .tab_body{
    width: 100%;
    height: 476px;
    overflow-y: auto;
    border: 1px solid #9A9A9A;
    border-top-width: 2px;
    border-left-width: 2px;
    border-right-color: #EEEEEE;
    border-bottom-color: #EEEEEE;
    padding:20px 15px;
    box-sizing: border-box;
  }
  .tab_body_p{
    margin-bottom: 5px;
  }
  .tab_body_title{
    font-size: 19px;
    position: relative;
    margin-bottom: 28px;
  }
  .tab_body_title div{
    /* display: inline-block; */
    position: relative;
    z-index: 100;
  }
  .tab_body_title_bg{
    width: 198px;
    background: #AAAAAA;
    margin-bottom: 0;
    height: 10px;
    position: absolute;
    top: 50%;
    margin-top: -5px;
    z-index: 99;
  }
  .tab_content{
    padding-left: 40px;
    margin-bottom: 28px;
    display: flex;
    align-items: center;
  }
  .tab_content_infoImg{
    width: 254px;
    height: 260px;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px solid rgba(215, 215, 215, 1);
    box-shadow: 2px 2px 5px rgb(0 0 0 / 35%);
    margin-right: 15px;
  }
  .tab_content_img{
    width: 242px;
    height: 194px;
  }
  .content_right_title{
    font-size: 16px;
    margin-bottom: 30px;
  }
  .content_info{
    display: flex;
    font-size: 14px;
  }
  .content_info p{
    margin-bottom: 0px;
  }
  .content_info_left{
    margin-right: 36px;
  }
  .tab_content_title{
    position: relative;
    padding-left: 20px;

  }
  .tab_content_title::before{
    content: '';
    width: 7px;
    height: 25px;
    background-color: #374AA5;
    border: 1px solid #9AA4D1;
    position: absolute;
    left: 0;
    top: 50%;
    margin-top: -12.5px;

  }
  .content_table{
    padding-left: 90px;
    margin-bottom: 30px;
  }
  /deep/ .ant-table-tbody > tr > td {
    padding: 5px 16px;
  }
  /deep/ .ant-table-thead > tr > th {
    padding: 5px 16px;
  }
  .details_span{
    cursor: pointer;
  }
  .tab_body_content{
    margin-bottom: 20px;
  }
  .tab_body_content:last-child{
    margin-bottom: 0;
  }
  .none_p{
    text-align: center;
  }
</style>
