<div style="width:99%;height:100%;background-color:white">
  <gsb-pagecard>
    <div slot="content">
        <el-dialog
            width="30%"
            :visible.sync="showLargePic">
            <img v-if="largePicUrl" style="width:100%;height:auto" :src="largePicUrl">
            <img v-else style="width:100%;height:auto" src="http://gsb-zc.oss-cn-beijing.aliyuncs.com/empty2018082212365411225525855.jpg">
            <div style="text-align:center;width: 60%;margin:0 20%;">
              <el-row>
                <el-col :span="12">
                    <gsb-upload :d="d" @setKey="setKey" :action="action" filetype="image/jpeg" :ifshowlist="false" @uploadsuccess="uploadsuccess" @error="error">
                      <el-button type="text" >更换图样</el-button>
                    </gsb-upload>
                </el-col>
                <el-col :span="12">
                    <el-button type="text" @click="useMyPic">应用图样</el-button>
                </el-col>
              </el-row>  
            </div>
            <div style="font-size: 12px;text-align: left;width: 100%;margin-top: 30px;padding-left: 35px;">
              <p>1.支持jpg、png格式。</p>
              <p>2.图片尺寸322*262像素以上，大小不超过500KB。</p>
              <p>3.图片尽量清晰，并能够体现商标寓意。</p>
            </div>
        </el-dialog>
        <el-card >
            <el-form  ref="search" :inline="true" class="demo-form-inline">
                <el-form-item label="发布类型">
                    <template>
                      <el-select  v-model="form.type">
                        <el-option label="申请人" value="applier"> </el-option>
                        <el-option label="申请号" value="code"> </el-option>
                      </el-select>
                    </template>
                  
                </el-form-item>
                <el-form-item label="申请人/申请号" >
                  <!-- <gsb-select2  ref="selectent" flag="selectent" v-if="form.type==\'applier\'" allowcreate="true"
                       size="medium" v-model="form.value" refMethod="getCompanyInfoByLikeName" autoComplete="true" isFilter="true" 
                        refModel="tool"  labelField="entName" valueField="entName" style="position:relative;width:100%;" 
                        placeHolder="请输入申请人或申请号查询商标" >
                    </gsb-select2> -->
                    <template style="width:350px;" v-if="form.type==\'applier\'">
                      <el-select style="width:350px;"  v-model="form.value"
                        clearable
                        filterable
                        remote
                        allow-create
                        reserve-keyword
                        placeholder="请输入申请人或申请号查询商标"
                        :remote-method="selectent"
                        :loading="false">
                        <el-option
                          v-for="(item,index) in entList"
                          :key="index"
                          :label="item.entName"
                          :value="item.entName">
                        </el-option>
                      </el-select>
                    </template>
                    <el-input v-else style="width:350px;" v-model="form.value" placeholder="请输入申请人或申请号查询商标"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="fetchData">查询</el-button>
                </el-form-item>
                <el-form-item>
                    <el-button  type="text" @click="toBatchRelease">批量出售</el-button>
                </el-form-item>
                <el-form-item>
                    <span style="margin: 10px 0;"> 注：如果输入多个申请号，请以空格隔开，一次最多发布100个商标</span>
                </el-form-item>
            </el-form>
              <!-- <el-row >
                <el-col :span="5">
                  <el-select v-model="form.type" placeholder="请选择">
                    <el-option label="申请人" value="applier"> </el-option>
                    <el-option label="申请号" value="code"> </el-option>
                  </el-select>
                </el-col>
                <el-col :span="5">
                    <el-input v-if="form.type==\'code\'" v-model="form.value" placeholder="请输入申请人或申请号查询商标"></el-input>
                    <gsb-select2  ref="selectent" flag="selectent" v-if="form.type==\'applier\'" allowcreate="true"
                       size="medium" v-model="form.value" refMethod="getCompanyInfoByLikeName" autoComplete="true" isFilter="true" 
                        refModel="tool"  labelField="entName" valueField="entName" style="position:relative;width:100%;" 
                        placeHolder="请输入申请人或申请号查询商标" >
                    </gsb-select2>
                </el-col>
                <el-col :span="2"><el-button type="primary" @click="fetchData">查询</el-button></el-col>
                <el-col :span="2"><el-button  type="text">批量出售</el-button></el-col>
                <el-col :span="10" style="margin: 10px 0;"> 注：如果输入多个申请号，请以空格隔开，一次最多发布100个商标</el-col>
              </el-row> -->
                
        </el-card >
        <div style="clear:both;margin:20px 0"></div>
        <!-- 表格 -->
        <el-card clsaa="tmtransactionentrelease_table" style="text-align:center">
          <el-table
          ref="multipleTable"
          :data="tableData"
          tooltip-effect="dark"
          style="width: 98%"
          :header-cell-style="headerCellStyle"
          @selection-change="handleSelectionChange">
          <el-table-column
          type="selection"
          width="55">
          </el-table-column>
          <el-table-column
            label="商标图样"
           >
            <template slot-scope="scope">
                <img :src="scope.row.pic_url" style="width:30px;height:30px;" @click="changepic(scope)">
            </template>
          </el-table-column>
          <el-table-column
            prop="tm_name"
            label="商标名称"
            >
          </el-table-column>
          <el-table-column
            prop="tm_regist_num"
            label="申请号"
           >
          </el-table-column>
          <el-table-column
            prop="ncl_one_codes"
            label="类别"
            >
          </el-table-column>
          <el-table-column
            prop="status"
            label="法律状态"
           >
          </el-table-column>
          <el-table-column
            prop="applicant_cn"
            label="申请人"
            >
          </el-table-column>
          <el-table-column
            label="发布价格"
            >
            <template slot-scope="scope">
                <el-input type="number" v-model="scope.row.price" placeholder="请输入发布价格"></el-input>
            </template>
          </el-table-column>
          <el-table-column
            label="商标简介"
            >
            <template slot-scope="scope">
                <el-input v-model="scope.row.desc" placeholder="请输入商标简介"></el-input>
            </template>
          </el-table-column>
          <el-table-column
            label="操作">
            <template slot-scope="scope">
              <el-button
                @click.native.prevent="changepic(scope)"
                type="text"
                size="small">
                更换图样
              </el-button>
            </template>
          </el-table-column> 
          </el-table>
          <div style="clear:both;margin:15px 0"></div>
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[5,10,15,20,50,100]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="count">
          </el-pagination>
          <!-- <div style="margin-top: 20px">
            <el-button @click="toggleSelection([tableData[1], tableData[2]])">切换第二、第三行的选中状态</el-button>
            <el-button @click="toggleSelection()">取消选择</el-button>
          </div> -->
        </el-card>
        <div style="clear:both;margin:20px 0"></div>
        <el-card style="text-align:center">
            <el-form  ref="tm" :inline="true" :model="tm" :rules="rules" class="demo-form-inline">
              <el-form-item label="已选商标:">
                {{multipleSelection.length}}
              </el-form-item>
              <el-form-item  label="批量设置价格" prop="price">
                <el-input style="width:350px" type="number" v-model="tm.price" placeholder="列表中如未设置发布价格，将采用此输入的价格"></el-input>
              </el-form-item>
              <el-form-item label="联系人" prop="contacts">
                <el-input v-model="tm.contacts" placeholder="联系人"></el-input>
              </el-form-item>
              <el-form-item label="联系电话" prop="mobile">
                <el-input v-model="tm.mobile" placeholder="联系电话"></el-input>
              </el-form-item>
              
              <el-form-item>
                <el-button type="primary" @click="publish">确认发布</el-button>
              </el-form-item>
            </el-form>
            <div v-if="exportExcelUrl" style="margin-top:20px;"> 
              <span style="color:#828282;font-size: 14px;">
                点击下载<a :href="exportExcelUrl" style="color:#409EFF;">发布结果文件</a> 
              </span>
            </div>
            <div style="clear:both"></div>    
        </el-card >
    </div>
  </gsb-pagecard>
</div>
{
    template:'${tmpl}',
    data:function(){
      var that=this;
      var validatePrice=function(rule, value, callback){
        console.log(that.multipleSelection);
        console.log(value);
        console.log(value);
        for(var i=0;i<that.multipleSelection.length;i++){
          var d = that.multipleSelection[i];
          if(!d.price && !value){
            return  callback(new Error("请填写批量设置价格或补全列表已选商标的发布价格"));
          }
        }
        return callback();
      };
        return {
          lawstatus:{1:"有效",2:"无效",3:"待审",4:"不定",5:"未知"},
          form:{
            type:"applier",
            value:"",
          },
          tm:{
            price:"",
            contacts:"",
            mobile:"",
          },
          rules:{
            contacts:[
              { required: true, message: '请输入联系人', trigger: 'blur' },
            ],
            mobile:[
              { required: true, message: '请输入联系电话', trigger: 'blur' },
            ],
            price:[
              { validator: validatePrice, trigger: 'blur' },
            ]
          },
          count:0,
          exportExcelUrl:"",
          d:{},
          action:"",
          loading:false,
          currentPage: 1,
          pageSize:10,
          tableData: [
            
          ],
          multipleSelection: [],
          selectedIndex:-1,
          showLargePic:false,
          largePicUrl:"",
          entList:[],
          
        }
    },
    mounted:function(){
      var that=this;
      this.$root.postReq("/web/uploadCtl/getOssConfig","").then(function(d){
        that.d["key"]="key";
        that.d["Bucket"]=d.Bucket;
        that.d["OSSAccessKeyId"]=d.OSSAccessKeyId;
        that.d["Signature"]=d.Signature;
        that.d["policy"]=d.policy;
        that.d["success_action_status"]=d.success_action_status;
        that.action=d.url;
    });
    },
    created:function(){

    },
    methods:{
      selectent:function(likestr){
        this.$root.postReq("/web/toolCtl/getCompanyInfoByLikeName",{fields:["entName"],likestr:likestr}).then(d=>{
             this.entList=[];
             if(d && d.data){
               this.entList=d.data;
             }
        });
      },
      headerCellStyle:function(){
        return {
                "background-color": "#F5F5F5",
                "color": "#2F2F2F",
                "font-size": "14px",
                "font-weight":"400"
        };
      },
      toBatchRelease(){
        this.$root.pushx({
          title:"批量发布交易商标",
          name:"/tmtransactionbatchrelease"
         });
         return;
      },
      changepic(scope){
        console.log(scope);
        this.selectedIndex = "";
        if(scope && scope.row){
          this.selectedIndex = scope.$index;
          this.showLargePic=true;
          this.largePicUrl=scope.row.pic_url;
        }

        
      },
      showLargeTm(url){
        if(url){
            this.showLargePic=true;
            this.largePicUrl=url;
        }
      },
      toggleSelection(rows) {
        if (rows) {
          rows.forEach(row => {
            this.$refs.multipleTable.toggleRowSelection(row);
          });
        } else {
          this.$refs.multipleTable.clearSelection();
        }
      },
      handleSelectionChange(val) {
        this.multipleSelection = val;
        console.log(val);
      },
      handleSizeChange(val) {
        if(this.pageSize!=val){
          this.pageSize=val;
          console.log(`每页 ${val} 条`);
          console.log(this.pageSize);
          this.fetchData();
        }
        
      },
      handleCurrentChange(val) {
        if(this.currentPage!=val){
          this.currentPage=val;
          console.log(`当前页: ${val}`);
          console.log(this.currentPage);
          this.fetchData();
        }
        
      },
      fetchData(){
        var value = this.form.value;
        this.form.value=value.replace(/(^\s*)|(\s*$)/g, "");
        if(!this.form.value){
          this.$message.warning("请输入申请人或申请号查询商标");
          return;
        }
        if(this.form.type=="applier"){
          var obj={
            applicant_cn:this.form.value,page_size:this.pageSize,current_page:this.currentPage
          };
          this.$root.showMask();
          this.$root.getReq("web/trademarktransactionCtl/fetchDataByApplier",obj).then(d=>{
            console.log(d);
            if(d && d.code==1){
              for(var i=0;i<d.data.length;i++){
                if(d.data[i].status){
                  d.data[i].status = this.lawstatus[d.data[i].status];
                }
              }
              this.tableData=d.data;
              this.count=d.count;
            }
            this.$root.hideMask();
          }).catch(e=>{
            this.$root.hideMask();
          })
        }
        if(this.form.type=="code"){
          var numList = this.form.value.split(" ");
          var obj={
            registNums:numList,page_size:this.pageSize,current_page:this.currentPage
          };
          console.log(obj);
          this.$root.showMask();
          this.$root.getReq("web/trademarktransactionCtl/fetchDataByRegistNums",obj).then(d=>{
            console.log(d);
            if(d && d.code==1){
              for(var i=0;i<d.data.length;i++){
                if(d.data[i].status){
                  d.data[i].status = this.lawstatus[d.data[i].status];
                }
              }
              this.tableData=d.data;
              this.count=d.count;
            }
            this.$root.hideMask();
          }).catch(e=>{
            this.$root.hideMask();
          })
        }
      },
      setKey(name,flag){
        var myDate = new Date();
        var key = "zc_sbjy"+Math.round(Math.random()*10000)+myDate.getMonth()+myDate.getTime()+myDate.getFullYear()+myDate.getDate()+myDate.getHours()+myDate.getMinutes()+myDate.getSeconds()+myDate.getMilliseconds()+".xlsx";
        console.log(this.$refs[flag]);
        this.$refs[flag].d.key = key;
      },
      uploadsuccess(obj){
        var that = this;
        that.loading = true;
        this.largePicUrl = obj.result;
        setTimeout(() => {
          that.loading = false;
        }, 1000);
        return
      },
      useMyPic(){
        if(this.selectedIndex>=0){
          this.$confirm('此操作将替换表格中商标图样, 是否继续?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            this.tableData[this.selectedIndex].pic_url = this.largePicUrl;
            this.$message.success("图样替换成功");
            this.showLargePic=false;
          })
         
        }
      },
      error(err){
        this.$message.warning(`上传失败，请重新上传`);
        console.log(err);
      },
      toList(){
        this.$root.pushx({
          title:"商标交易库",
          name:"/mytmtransaction"
         });
         return;
      },
      publish(){
        var that = this;
        if(!this.multipleSelection || this.multipleSelection.length<1){
          this.$message.warning("请至少选择一条商标数据");
          return;
        }
        this.$refs.tm.validate((valid) => {
          if (valid) {
            this.$confirm('此操作将发布已选商标, 是否继续?', '提示', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning'
            }).then(() => {
              var datalist = this.multipleSelection;
              for(var i=0;i<datalist.length;i++){
                if(!datalist[i].price){
                  datalist[i].price=that.tm.price;
                }
              }
              var obj={tms:datalist,contacts:that.tm.contacts,mobile:that.tm.mobile};
              console.log(obj);
              this.$root.showMask();
              this.$root.postReq("web/trademarktransactionCtl/publishApplierTm",obj).then(d=>{
                if(d && d.code==1){
                  that.exportExcelUrl=d.exportExcelUrl;
                  that.$message.success("发布完成，共发布"+d.sum+"个商标，成功"+d.successCount+"个，失败"+d.errorCount+"个");
                }else{
                  that.$message.warning(d.msg);
                }
                this.$root.hideMask();
              }).catch(e=>{
                this.$root.hideMask();
              })
            }).catch(() => {
                     
            });

          } else {
            return false;
          }
        });
      }
    },
    computed: Vuex.mapState({
      count:state=>state.count,
      headStyle:function(){
        return {"background-color":"white"};
      }
    }),
    vname:"gsb_tmtransactionentrelease"
}
