<template>
  <div>
    <div class="header">
      <div class="header_left">
        <span v-for="(item,index) in headerList" :key="index" :class="header_active==index ? 'header_active':''" @click="goPage(item.status)">{{item.name}}</span>
      </div>
      <div class="header_right">
        <button class="hedaer_button" @click="goDetails('',1)">标的挂牌</button>
        <!-- <a class="hedaer_button"  :href="host+'/upload/doc/2021/10/163461522339789618.doc'">标的摘牌模板</a> -->
      </div>
    </div>
    <div class="seach">
      <div class="seach1">
        <div class="seach1_item">
          <span>订单类型</span>
          <el-select      v-model="query.cartellino_type" @change="assetList" class="seach1_select">
            <el-option :key="0" label="全部" value=""></el-option>
            <el-option :key="1" label="协议" :value="1"></el-option>
            <el-option :key="2" label="拍卖" :value="2"></el-option>
          </el-select>
        </div>
        <div class="seach1_item">
          <span>创建时间</span>
          <el-date-picker
            v-model="query.date"
            type="date"
            placeholder="选择日期"
            class="seach1_select1"
            format="yyyy 年 MM 月 dd 日"
            value-format="yyyy-MM-dd"
            @change="assetList">
          </el-date-picker>
        </div>
        <div class="seach1_item">
          <span>标的分类</span>
          <el-select  v-model="query.asset_type_id" @change="assetList" class="seach1_select">
            <el-option :key="item.id" :label="item.name" :value="item.id" v-for="item in AssetClass"></el-option>
          </el-select>
        </div>
        <div class="seach1_item">
          <span>标的名称</span>
          <el-input
            class="seach1_select"
            placeholder="请输入标的名称关键字"
            v-model="query.serial_name">
          </el-input>
        </div>
        <div class="seach1_item">
          <button @click="assetList" class="seach_button">确定</button>
        </div>
      </div>
    </div>
    <div class="body">
      <el-table
        :data="assetLists"
        style="width: 100%"
        :header-cell-style="{background:'#F3F3F3 !important',color:'#333333',height:'60px',fontSize:'14px'}"
        :row-class-name="tableRowClassName">
        <el-table-column prop="id" label="序号" width="50" align="center"></el-table-column>
        <el-table-column prop="name" label="资产" width="280" align="center">
          <template slot-scope="scope" >
            <dir class="order_item">
              <img :src="scope.row.serial_img" alt="" class="order_item_img">
              <div class="table_div">
                <p class="table_p1">{{scope.row.serial_name}}</p>
                <p class="table_p">挂牌方：{{scope.row.firm_name}}</p>
              </div>
            </dir>
          </template>
        </el-table-column>
        <el-table-column  prop="price" label="单价" align="center"></el-table-column>
        <el-table-column  prop="surplus_count" label="库存" align="center"></el-table-column>
        <el-table-column  prop="count" label="数量" align="center"></el-table-column>
        <el-table-column  prop="create_time" label="创建时间" :formatter="formatDate" align="center"></el-table-column>
        <el-table-column  prop="send_time" label="发布时间" :formatter="formatDate" align="center"></el-table-column>
        <el-table-column  prop="out_time" label="下架时间" :formatter="formatDate" align="center"></el-table-column>
        <el-table-column   label="标的状态" align="center">
          <template slot-scope="scope">
            <span>{{scope.row.asset_status==0? '待审核':scope.row.asset_status==1?'待复核':scope.row.asset_status==2?'发布中':scope.row.asset_status==3?'已下架':'已转让'}}</span>
          </template>
        </el-table-column>
        <el-table-column   label="标的操作" align="center">
          <template slot-scope="scope">
            <template  v-if="scope.row.asset_status==0 || scope.row.asset_status==4 ||scope.row.asset_status==3">
              <p  class="table_p2" @click="goDetails(scope.row.id,0)">查看资产</p>
              <p  class="table_p2" @click="showDialog(scope.row,1)" v-if="scope.row.asset_check_status==0&&scope.row.asset_status==3 ">
                摘牌审核
              </p>
            </template>
            <template v-else-if="scope.row.asset_status==1">
              <p  class="table_p2" @click="goDetails(scope.row.id,2)">编辑资产</p>
            </template>
            <template v-else-if="scope.row.asset_status==2">
              <p  class="table_p2" @click="goDetails(scope.row.id,0)">查看资产</p>
              <!-- <el-upload
              class="upload-demo"
              :action="action1"
              :show-file-list="false"
              :on-error="handleAvatarError"
              list-type="picture"
              :on-success="(res,file,id)=>{handleAvatarSuccess1(res,file,scope.row.id)}"
              > -->
              <p  class="table_p2" @click="showDialog(scope.row,0)">申请摘牌</p>
            <!-- </el-upload> -->
            </template>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="pagination">
      <el-pagination
        background
        layout="total, prev, pager, next"
        :current-page="query.page"
        :page-size="query.limit"
        :total="pageTotal"
        @current-change="handlePageChange"
      ></el-pagination>
    </div>
    <el-dialog title="" :visible.sync="editVisible1" :width="dialogType==0?'70%':''">
      <template v-if="dialogType==0">
        <p style="text-align: center; margin-top: 0; margin-bottom: 0;"><span style="font-family: '华文中宋'; font-size: 18pt;">人才产权摘牌申请书</span></p>
        <p>&nbsp;</p>
        <p style="text-align: right; margin-top: 0; margin-bottom: 0;"><span style="font-family: '仿宋'; font-size: 12pt;">金额单位：万元</span></p>
        <table class="10">
        <tr>
        <td>
        <p style="text-align: center; margin-top: 0; margin-bottom: 0;"><span style="font-family: '仿宋'; font-size: 12pt; font-weight: bold;">意向摘牌方名称</span></p>
        </td>
        <td colspan="3">
        <p>
          <el-input v-model="query1.delist_firm_name" class="table_input"></el-input>
        </p>
        </td>
        </tr>
        <tr>
        <td>
        <p style="text-align: center; margin-top: 0; margin-bottom: 0;"><span style="font-family: '仿宋'; font-size: 12pt; font-weight: bold;">拟</span><span style="font-family: '仿宋'; font-size: 12pt; font-weight: bold;">摘牌</span><span style="font-family: '仿宋'; font-size: 12pt; font-weight: bold;">标的名称</span></p>
        </td>
        <td>
        <p>
          <el-input v-model="query1.delist_asset_name" class="table_input"></el-input>
        </p>
        </td>
        <td style="width:20%">
        <p style="text-align: center; margin-top: 0; margin-bottom: 0;"><span style="font-family: '仿宋'; font-size: 12pt; font-weight: bold;">标的代码</span></p>
        </td>
        <td>
        <p>
          <el-input v-model="query1.delist_id" class="table_input"></el-input>
        </p>
        </td>
        </tr>
        <tr>
        <td>
        <p style="text-align: center; margin-top: 0; margin-bottom: 0;"><span style="font-family: '仿宋'; font-size: 12pt; font-weight: bold;">拟摘牌标的类型</span></p>
        </td>
        <td colspan="3">
          <el-radio-group v-model="query1.delist_type" class="table_radio_group">
            <el-radio  label="1" class="table_radio">知识产权（著作权、专利权、专有技术、商标专有权）</el-radio>
            <el-radio  label="2" class="table_radio">销售网络及客户关系</el-radio>
            <el-radio  label="3" class="table_radio">特许经营权</el-radio>
            <el-radio  label="4" class="table_radio">合同权益</el-radio>
            <el-radio  label="5" class="table_radio">域名</el-radio>
            <el-radio  label="6" class="table_radio">商誉</el-radio>
            <el-radio  label="7" class="table_radio">时间和档期</el-radio>
            <div class="table_radio_group_div">
              <el-radio  label="8" class="table_radio">其它</el-radio>
              <el-input v-model="query1.delist_else_type" class="table_input table_input1" ></el-input>
            </div>
          </el-radio-group>
        </td>
        </tr>
        <tr>
        <td>
        <p style="text-align: center; margin-top: 0; margin-bottom: 0;"><span style="font-family: '仿宋'; font-size: 12pt; font-weight: bold;">摘牌价格（万元）</span></p>
        </td>
        <td colspan="3">
        <p>
          <el-input v-model="query1.delist_money" class="table_input"></el-input>
        </p>
        </td>
        </tr>
        <tr>
        <td>
        <p style="text-align: center; margin-top: 0; margin-bottom: 0;"><span style="font-family: '仿宋'; font-size: 12pt; font-weight: bold;">摘牌资格条件说明</span></p>
        </td>
        <td colspan="3">
        <p>
          <el-input v-model="query1.delist_explain" class="table_input"></el-input>
        </p>
        </td>
        </tr>
        <tr>
        <td>
        <p style="text-align: center; margin-top: 0; margin-bottom: 0;"><span style="font-family: '仿宋'; font-size: 12pt; font-weight: bold;">其他</span></p>
        </td>
        <td colspan="3">
        <p>
          <el-input v-model="query1.delist_else_explain" class="table_input"></el-input>
        </p>
        </td>
        </tr>
        </table>
        <p>&nbsp;</p>
      </template>
      <template v-else-if="dialogType==1">
        <div class="examine_content">
          <img src="../../../assets/img/examine_img.png" alt="" class="examine_img" >
          <p class="examine_tips">
            <span >资料已经提交，请耐心等待审核</span>
          </p>
        </div>
      </template>
        <span slot="footer" class="dialog-footer">
            <el-button @click="editVisible1 = false">取 消</el-button>
            <el-button type="primary" @click="soldOut">确 定</el-button>
        </span>
    </el-dialog>
  </div>
</template>
<script>
import moment from 'moment'
import {assetList,getTopAssetClass,soldOut} from '../../../api/index'
export default {
  data(){
    return{
      query:{
        cartellino_type:'',
        date:'',
        page:1,
        limit:10,
        status:'',
        asset_type_id:'',
        serial_name:''
      },
      dialogType:0,
      host:'http://wenhua.xingtongworld.com',
      action1:'http://wenhua.xingtongworld.com/api/Index/uploadFile',
      assetLists:[],
      pageTotal:0,
      headerList:[
        {name:'全部资产',status:''},
        {name:'待审核',status:0},
        {name:'待复核',status:1},
        {name:'发布中',status:2},
        {name:'已下架',status:3},
        {name:'已转让',status:4},
      ],
      header_active:0,
      AssetClass:[],
      editVisible1:false,
      query1:{
        id:'',
        delist_firm_name:'',
        delist_asset_name:'',
        delist_id:'',
        delist_type:'',
        delist_else_type:'',
        delist_money:'',
        delist_explain:'',
        delist_else_explain:'',
      }
    }
  },
  created(){
    this.assetList()
    this.getTopAssetClass()
  },
  methods:{
    goPage(e){
      this.query.status=e
      this.assetList()
    },
    showDialog(data,type){
      if (type==0) {
        this.query1.id=data.id;
        this.query1.delist_id=data.serial
        this.query1.delist_money=data.price/10000
        this.query1.delist_firm_name=data.firm_name
        this.query1.delist_asset_name=data.serial_name
      }
      this.dialogType=type
      this.editVisible1=true
    },
    soldOut(file,id){
      if (this.dialogType==0) {
        if (this.query1. delist_firm_name=='') {
          this.$message.error('意向摘牌方名称不能为空~')
        }else if (this.query1.delist_asset_name=='') {
          this.$message.error('拟摘牌标的名称不能为空~')
        }else if (this.query1.delist_id=='') {
          this.$message.error('标的代码不能为空~')
        }else if (this.query1.delist_type=='') {
          this.$message.error('请选择拟摘牌标的类型~')
        }else if (this.query1.delist_type==8 && this.query1.delist_else_type=='') {
          this.$message.error('请填写其他类型~')
        }else if (this.query1.delist_money=='') {
          this.$message.error('摘牌价格不能为空~')
        }else if (this.query1.delist_explain=='') {
          this.$message.error('摘牌资格条件说明不能为空~')
        }else{
          this.$confirm('申请摘牌并且审核通过后，该标的状态为已下架并且不可恢复，请问是否确定申请摘牌？', '提示').then(_ => {
            soldOut(this.query1).then(res => {
              console.info(res)
              if(res.code==100){
                this.$message.success('申请成功，请等待审核~')
              }else{
                this.$message.error(res.msg)
              }
            })
          }).catch(_ => {});
        }
      }else{
        this.editVisible1=false
      }
    },
    handleAvatarError(){
      this.$message.error('文件上传失败！');
    },
    handleAvatarSuccess1(res,file,id){
      console.info(res)
      if(res.code==1){
        let contract=this.host+res.data.img_url;
        this.soldOut(contract,id)
      }else{
        this.$message.error(res.msg);
      }
    },
    getTopAssetClass(){
      getTopAssetClass(this.query).then(res => {
        // console.info(res)
        if(res.code==100){
          this.AssetClass=res.data;
        }else{
          this.$message.error(res.msg)
        }
      })
    },
    goDetails(id,type){
      // if (type==2) {
      //   this.$router.push({path:'/AssetListing',query:{id:id,type:type}})
      // }else{
        this.$router.push({path:'/AssetListing',query:{id:id,type:type}})
      // }
    },
    tableRowClassName({row, rowIndex}) {
      let n=rowIndex
      for(let i=0 ;i<this.assetLists.length;i++){
        if (rowIndex ===2*i+1 ) {
          return 'warning-row';
        }
      }
      return '';
    },
    //时间戳转换时间
    formatDate(row,colnum){
      if(row[colnum.property]==0){
        return ''
      }else{
        return moment(row[colnum.property]*1000).format('YYYY-MM-DD HH:mm:ss')
      }
    },
    assetList(){
      assetList(this.query).then(res => {
        console.info(res)
        if(res.code==100){
          this.assetLists=res.data.list;
          this.pageTotal=res.data.count
        }else{
          this.$message.error(res.msg)
        }
      })
    },
    // 分页导航
    handlePageChange(val) {
      this.$set(this.query, 'page', val);
      this.assetList();
    }
  }
}
</script>
<style scoped>
  .seach1_select1{
    margin-left: 10px;
  }
  .body_header{
    background: #F2F2F2;
    width: 100%;
    border: 1px solid #D7D7D7;
    border-top: none;
    font-size: 14px;
    color: #333333;
    height: 50px;
    display: flex;
    align-items: center;
    box-sizing: border-box;
  }
  .body_header span{
    display: inline-block;
    text-align: center;
  }
  .seach{
    margin-top: 20px;
  }
  .seach1_select{
    margin-left: 10px;
    width: 170px;
  }
  .seach_button{
    width: 60px;
    height: 30px;
    font-size: 12px;
    color: #333333;
    background-color: transparent;
    border:1px solid #D7D7D7;
    cursor: pointer;
  }
  .seach_input{
    width: 100px;
    margin: 0 15px;
  }
  .seach1{
    width: 100%;
    height: 50px;
    background: #F2F2F2;
    border: 1px solid #D7D7D7;
    box-sizing: border-box;
    display: flex;
    align-items: center;
  }
  .seach1_item{
    padding: 0 15px;
    display: flex;
    align-items: center;
    font-size: 12px;
    height: 100%;
  }
  .seach1_item_span{
    color: #C94C4C;
  }
  .select_city{
    margin: 0 15px;
  }
  .header{
    font-size: 14px;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .header_right{
    display: flex;
    align-items: center;
  }
  .hedaer_button{
    width: 100px;
    height: 30px;
    color: white;
    border: none;
    background: -moz-linear-gradient(top, #F8D89F 0%, #C94C4C 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#F8D89F), color-stop(100%,#C94C4C));
    background: -webkit-linear-gradient(top, #F8D89F 0%,#C94C4C 100%);
    background: -o-linear-gradient(top, #F8D89F 0%,#C94C4C 100%);
    background: -ms-linear-gradient(top, #F8D89F 0%,#C94C4C 100%);
    background: linear-gradient(to bottom, #F8D89F 0%,#C94C4C 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: 15px;
    cursor: pointer;
  }
  .header_active{
    color: rgba(201, 76, 76, 0.698039215686274);
    font-size: 16px;
    font-weight: bold;
  }
  .header span{
    display: inline-block;
    padding: 0 10px;
    cursor: pointer;
    margin-right: 20px;
  }
  .header span:hover{
    color: rgba(201, 76, 76, 0.698039215686274);
    font-size: 16px;
    font-weight: bold;
  }
  .el-dropdown-link{
    color: #EAB1B1;
    cursor: pointer;
  }
  .order_item{
    width: 100%;
    display: flex;
    align-items: center;
    font-size: 14px;
    padding: 15px 0;
  }
  .order_item:nth-child(2n+2){
    background-color: #FDF8F8;
  }
  .order_item_id{
    padding: 0 15px;
  }
  .order_item_img{
    width: 100px;
    height: 100px;
    margin: 0 15px;
  }
  .order_item_info_title{
    display: flex;
    font-size: 14px;
    color: #7F7F7F;
    align-items: center;
    width: 1020px;
    justify-content: space-between;
  }
  .order_item_info_content{
    display: flex;
    align-items: center;
    width: 1020px;
    font-size: 14px;
    justify-content: space-between;
    margin-top: 5px;
    color: #333333;
  }
  .order_item_info_content_left p{
    width: 300px;
    margin-bottom: 5px;
  }
  .order_item_info_content_price{
    /* margin:0 30px; */
    text-align: center;
  }
  .order_item_info_content_price_p{
    text-decoration: line-through;
    margin-bottom: 5px;
  }
  .order_item_info_content_all{
    font-weight: bold;
  }
  .order_item_info_content_operation{
    color: #555555;
  }
  .order_item_info_content_operation p{
    margin-bottom: 5px;
  }
  .body>>>.warning-row{
    background: #F2F2F2;
  }
  .table_div >p{
    font-size: 12px;
    text-align: left;
  }
  .table_p{
    color: #7F7F7F;
  }
  .table_p1{
    color: black;
  }
  .table_p2{
    color: #294CC6;
    cursor: pointer;
  }


  a.NoteRef {text-decoration: none;}
  hr {height: 1px; padding: 0; margin: 1em 0; border: 0; border-top: 1px solid #CCC;}
  table {border: 1px solid black; border-spacing: 0px; width : 100%; height: 500px;}
  td {border: 1px solid black;}
  .Normal {font-size: 10.5pt;}
  h1 {font-size: 22pt; font-weight: bold;}
  .Document Map {margin-top: 0; margin-bottom: 0;}
  .Body Text {font-size: 42pt;}
  .Body Text Indent {font-size: 12pt; font-weight: bold;}
  .Body Text Indent  {margin-bottom: 6pt;}
  .Balloon Text {font-size: 9pt;}
  .footer {font-size: 9pt;}
  .header {font-size: 9pt;}
  .Hyperlink {color: #0000FF; text-decoration: underline ;}

  .table_input >>> .el-input__inner{
    border: none;
    font-family: 仿宋;
    font-size: 12pt;
    font-weight: bold;
  }
  .table_radio{
    font-family: 仿宋;
    font-size: 12pt;
    margin-bottom: 10px;
  }
  .table_radio_group{
    display: flex;
    flex-direction: column;
    margin-left: 20px;
  }
  .table_input1>>> .el-input__inner{
    border-bottom: 1px solid black;
    width: 70%;
    border-radius:0
  }
  .table_radio_group_div{
    display: flex;
    align-items: center;
  }
  .table_radio_group_div .table_radio{
    margin-bottom: 0;
  }




  .examine_img{
    width: 144px;
    height: 129px;
  }
  .error_msg{
    margin-top: 60px;
    text-align: left;
  }
  .error_msg> p{
    color: #555555;
    font-size: 14px;
    margin-bottom: 10px;
  }
  .examine_tips_span{
    display: inline-block;
    color: #C94C4C;
    text-decoration: underline;
    margin-left: 10px;
    cursor: pointer;
  }
  .examine_tips{
    margin-top: 20px;
  }
  .examine_content{
    width: 100%;
    text-align: center;
    padding-top: 40px;
    color: #C3CBD6;
    font-size: 14px;
    box-sizing: border-box;
  }
</style>
