<template>
    <div class="firstStoreApply">
      <div class="head-title" >
        心愿列表
        <div style="float:right;margin-top:-5px">
           
        </div>
       
      </div>
      <div class="content">
        <div>
          <span style="margin-left: 10px">品牌信息</span>
          <div class="searchInput" style="width:250px">
            <el-input @keyup.enter.native="msg.pageIndex=1,getList()" @clear="msg.pageIndex=1,getList()"
              style="display:inline-block;width:225px;height:30px" placeholder="品牌信息" v-model="msg.BranchName" size="small"
              clearable>
            </el-input>
            <span @click="msg.pageIndex=1,getList()" class="el-icon-search"
              style="color:#979dad;font-size:14px;position:relative;top:1px"></span>
          </div>
          <span style="margin-left: 10px">对标载体</span>
          <div class="searchInput" style="width:250px">
            <el-input @keyup.enter.native="msg.pageIndex=1,getList()" @clear="msg.pageIndex=1,getList()"
              style="display:inline-block;width:225px;height:30px" placeholder="对标载体" v-model="msg.CarrierName" size="small"
              clearable>
            </el-input>
            <span @click="msg.pageIndex=1,getList()" class="el-icon-search"
              style="color:#979dad;font-size:14px;position:relative;top:1px"></span>
          </div>
          <span style="margin-left: 10px">认证用户</span>
          <el-select size="small" v-model="msg.UserId" :filter-method="ChangeListName" filterable  @change="(msg.pageIndex = 1), getList()"
            placeholder="请选择">
            <el-option label="不限" :value="0"></el-option>
            <el-option v-for="item in userList" :key="item.Id" :label="item.Name" :value="item.Id">
            </el-option>
          </el-select>
        </div>

        <el-table :data="tableData" v-loading="loading" border style="width: 100%;margin:20px 0">
        
          <el-table-column prop="UserName"  label="用户名称">
            <template slot-scope="scope">
              <span>{{scope.row.UserName}} <span style="cursor: pointer;text-decoration: underline;font-size: 12px;" @click="guanlianbrand(scope.row.UserId)">关联品牌</span> </span>
             </template>
          </el-table-column>
        
          <el-table-column prop="BranchName"  label="品牌信息">
          </el-table-column>
          <el-table-column prop="CarrierName"  label="对标载体">
          </el-table-column>
          <el-table-column prop="Area"  label="区域">
          </el-table-column>
          <el-table-column prop="Status"  label="名片">
            <template slot-scope="scope">
             <img :src="scope.row.NameCard" alt="" style="width: 100px;height: 40px;border-radius: 3px;">
            </template>
          </el-table-column>
          <!-- <el-table-column prop="Status"  label="详情">
            <template slot-scope="scope">
                <div style="cursor: pointer;text-decoration: underline;" @click="Description =scope.row.Description,resondialog = true ">查看详情</div>
            </template>
          </el-table-column> -->

          <el-table-column prop="Status"  label="状态">
            <template slot-scope="scope">
              <span v-if="scope.row.Status==0" style="color:green;">正常</span>
              <span v-if="scope.row.Status==1" style="color:#e95252;">删除</span>
            </template>
          </el-table-column>
          <el-table-column prop="UpdateDate" width="200" label="时间">
          </el-table-column>
          <el-table-column label="操作" width="130">
          
            <template slot-scope="scope">
              <el-tooltip class="item" effect="dark" content="查看详情" placement="top">
                <img src="../../assets/img/userman/icon-show.png" alt="" class="imgstyle" @click="Description =scope.row.Description,resondialog = true ">
              </el-tooltip>
                <el-tooltip
                class="item"
                effect="dark"
                content="删除"
                placement="top"
              >
                <img
                  src="../../assets/img/setup/del.png"
                  alt=""
                  class="imgstyle"
                  @click="delete_b(scope.row)"
                />
              </el-tooltip>
             
            </template>
          </el-table-column>
        </el-table>
        <el-pagination style="text-align:right" background @current-change="handleCurrentChange" :page-size="msg.pageSize"
          :current-page.sync="msg.pageIndex" layout="total,prev, pager, next" :total="total">
        </el-pagination>
      </div>

      <el-dialog title="心愿详情" :visible.sync="resondialog" width="600px">
        <div style="max-height: 700px;overflow-y: auto;" class="activityContent" v-html="Description"></div>

      </el-dialog>
  
     
    </div>
  </template>
  <script>
    export default {
      data() {
        return {
            loading:false,
            resondialog:false,
          msg: {
            pageIndex: 1,
            pageSize: 15,
            UserId: 0, //	用户id
            BranchName: '', //	品牌
            CarrierName: '', //	对标载体
          
          },
          Description:'',
          usermsg: {
            pageIndex: 1,
            pageSize: 20,
            Name: '',
            Source: 0,
            MemberGrade: 0,
            Id: 0,
            Moblie: ''
            },
       
          total: 0,
          tableData: [], //数据列表
          resondialog: false,
          resondialog2: false,
          userList:[],
        };
      },
      created() {
        this.getList();
        this.getuserList()
      },
      methods: {
        getList() {
          this.loading = true;
         
          this.apipost("/api/Trade/GetFirstShopWishPageList", this.msg, res => {
            this.loading = false;
            if (res.data.resultCode == 1) {
              this.total = res.data.data.count;
              let pageData = res.data.data.pageData;
              this.tableData = pageData;
            }
          })
        },
        handleCurrentChange(val) {
          this.msg.pageIndex = val;
          this.getList();
        },
        ChangeListName(val) {
            this.usermsg.Name = val;
            this.getuserList();
        },
        getuserList() {
            this.apipost("/api/user/GetMemberUserDropDownList", this.usermsg, res => {
            if (res.data.resultCode == 1) {
                let pageData = res.data.data.pageData;
                this.userList = pageData;
            }
            })
        },
        delete_b(row) {
            let that = this;
            that.Confirm("是否删除?", function () {
                that.apipost(
                "/api/Trade/DelFirstShopWishInfo",
                {
                    WishId: row.Id,
                },
                (res) => {
                    if (res.data.resultCode == 1) {
                        that.Success(res.data.message);
                        that.getList();
                    } else {
                        that.Error(res.data.message);
                    }
                }
                );
            });
          },
          guanlianbrand(UserId){
            this.$router.push({
              name: "brandManagement",
              query: {
                UserId: UserId,
                blank: "y",
              },
      });
          }
  
      },
      mounted() {}
    };
  
  </script>
  <style>
    .firstStoreApply .content .searchInput {
      border: 1px solid #DCDFE6;
      border-radius: 4px;
    }
  
    .firstStoreApply .content .searchInput .el-input__inner {
      border: none;
      outline: none;
      height: 30px;
      line-height: 30px;
    }
  
    .firstStoreApply .content .searchInput {
      line-height: normal;
      display: inline-table;
      width: 100%;
      border-collapse: separate;
      border-spacing: 0;
      width: 250px;
      margin-right: 20px;
    }
  
    .firstStoreApply .content {
      background: #fff;
      margin-top: 10px;
      padding: 20px;
      box-sizing: border-box;
    }
  
  </style>
  