<!--  -->
<template>
  <div style="background-color:#f7f7f7;padding:10px 10px;">
    <div class="pending" v-if="dialogVisible == false && detbox ==false">
      <div style="height:58px;line-height:58px;">
        <div style="color:#0006"> <span>商家管理</span> <span style="padding:0 5px;">></span> <span
            style="color:#000000e6">商家信息管理</span></div>
      </div>
      <!-- 搜索 -->
      <div class="formSearch">
        <el-form :inline="true" :model="formInline">
          <el-form-item label="店铺名称">
            <el-input v-model="formInline.shopName" placeholder="请输入" style="width:168px" />
          </el-form-item>
          <el-form-item label="店铺编码">
            <el-input v-model="formInline.shopCode" placeholder="请输入" style="width:168px" />
          </el-form-item>
          <el-form-item label="负责人">
            <el-input v-model="formInline.chargePersonName" placeholder="请输入" style="width:168px" />
          </el-form-item>
          <el-form-item label="合同状态">
            <el-select v-model="formInline.contractState" placeholder="请选择" style="width:168px">
              <el-option label="有效" value="1" />
              <el-option label="无效" value="0" />
            </el-select>
          </el-form-item>
        </el-form>
        <div>
          <el-button style="background-color: #3F9B6A;color: #fff;" @click="onSubmit">查询
          </el-button>
          <el-button class="buttonHover" style="color: #606266;border: 1px solid #dddfe5;background-color: #fff;"
            @click="resetting">重置
          </el-button>
        </div>
      </div>
      <div style="margin-bottom:20px;">
        <el-button @click="addbuss" icon="el-icon-circle-plus-outline" style="background-color: #3F9B6A;color: #fff;">新增
        </el-button>
      </div>
      <!-- 表格 -->
      <div class="tableBox">
        <el-table ref="multipleTable" :data="tableData"
          :header-cell-style="{fontSize: '14px',color:'#0009',fontWeight: 'normal',backgroundColor:'#F2F3F5'}"
          tooltip-effect="dark">
          <el-table-column label="店铺名称" min-width="220">
            <template slot-scope="scope">{{ scope.row.shopName }}</template>
          </el-table-column>
          <el-table-column prop="shopCode" label="店铺编码" min-width="200" />
          <el-table-column prop="chargePersonName" label="负责人" min-width="200" />
          <el-table-column prop="chargePersonPhone" label="联系电话" min-width="200" />
          <el-table-column label="合同状态" width="120">
            <template slot-scope="scope">
              <span v-if="scope.row.contractState === 0">无效</span>
              <span v-if="scope.row.contractState === 1">有效</span>
            </template>
          </el-table-column>
          <el-table-column prop="createTime" label="创建时间" min-width="200" />
          <el-table-column label="操作" show-overflow-tooltip min-width="250">
            <template slot-scope="scope">
              <div class="tableBtn greens" @click="seeMore(scope.row)">
                查看
              </div>
              <div class="tableBtn greens" @click="edit(scope.row)">
                编辑
              </div>
              <div class="tableBtn greens" @click="del(scope.row)" v-if="scope.row.state == 1">
                禁用
              </div>
              <div class="tableBtn greens" @click="del(scope.row)" v-else>
                启用
              </div>
              <div class="tableBtn greens" @click="delBusiness(scope.row)">
                删除
              </div>
              <!-- <div class="tableBtn greens">
                画像
              </div> -->
              <!-- <div class="btnList">
                <el-button
                  type="text"
                  @click="seeMore(scope.row)"
                  size="mini"
                  style="color: #3F9B6A;border: 1px solid transparent;"
                >查看
                </el-button>
                <el-button
                  type="text"
                  @click="edit(scope.row)"
                  size="mini"
                  style="color: #3F9B6A;border: 1px solid transparent;"
                >编辑
                </el-button>
                <el-button
                  v-if="scope.row.state == 1"
                  type="text"
                  @click="del(scope.row)"
                  size="mini"
                  style="color: #3F9B6A;border: 1px solid transparent;"
                >禁用
                </el-button>
                <el-button
                  v-else
                  type="text"
                  @click="del(scope.row)"
                  size="mini"
                  style="color: #3F9B6A;border: 1px solid transparent;"
                >启用
                </el-button>
                <el-button
                  type="text"
                  @click="delBusiness(scope.row)"
                  size="mini"
                  style="color: #3F9B6A;border: 1px solid transparent;"
                >删除
                </el-button>
              </div> -->
            </template>
          </el-table-column>
        </el-table>
        <div class="fenye">
          <el-pagination :current-page="currentPage" background small :page-sizes="[10, 20, 50, 100]" :page-size="10"
            layout="total, prev, pager, next" :total="total" @size-change="handleSizeChange"
            @current-change="handleCurrentChange" />
        </div>
      </div>
    </div>
    <!-- ******************************************************弹框开始****************************************************** -->
    <!-- 新建商家弹框 -->
    <div class="zhuti" v-if="dialogVisible">
      <div style="height:58px;line-height:58px;">
        <div style="color:#0006"> <span>商家管理</span> <span style="padding:0 5px;">></span> <span
            style="color:#000000e6">{{userState === 0? '新增': userState === 1? '修改': '查看'}}</span></div>
      </div>
      <div style="margin-top: 30px;">
        <div class="titles">
          商家信息
        </div>
        <el-form ref="ruleForm" :model="ruleForm" :rules="rules" label-width="140px">
          <div style="padding: 20px 20px 20px 0;">

            <el-row :gutter="20">
              <el-col :span="12">
                <el-form-item label="商家类型" prop="merchantType">
                  <el-select v-model="ruleForm.merchantType" :disabled="disabled" placeholder="请选择" style="width:100%">
                    <el-option label="线上商家" value="线上商家" />
                    <el-option label="实体商家" value="实体商家" />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="姓名" prop="venueNumber">
                  <el-input v-model="ruleForm.venueNumber" :disabled="disabled" placeholder="请输入"
                    style="margin-top:5px;"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="20">
              <el-col :span="12">
                <el-form-item label="账号" prop="shopPhone">
                  <el-input v-if="shopPhoneShow" :value="hidden(ruleForm.shopPhone, 3, 4)" :disabled="disabled"
                    maxlength="20" @focus="focusShopPhoneInput" />
                  <el-input v-else ref="shopPhoneCls" v-model="ruleForm.shopPhone" :disabled="disabled"
                    maxlength="20" />
                </el-form-item>

              </el-col>
              <el-col :span="12">
                <el-form-item label="账号密码" prop="shopPassword">
                  <el-input v-model="ruleForm.shopPassword" type="password" :disabled="disabled" maxlength="20" />
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="20">
              <el-col :span="12">
                <el-form-item label="店铺名称" prop="shopName">
                  <el-input v-model="ruleForm.shopName" :disabled="disabled" placeholder="请输入" />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="店铺负责人" prop="chargePersonName">
                  <el-input v-model="ruleForm.chargePersonName" :disabled="disabled" placeholder="请输入" />
                </el-form-item>
              </el-col>
            </el-row>

            <el-row :gutter="20">
              <el-col :span="12">
                <el-form-item label="负责人电话" prop="chargePersonPhone">
                  <el-input v-model="ruleForm.chargePersonPhone" :disabled="disabled" placeholder="请输入" />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="店铺地址" prop="shopAdress">
                  <el-input v-model="ruleForm.shopAdress" :disabled="disabled" placeholder="请输入" />
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="20">
              <el-col :span="12">
                <el-form-item label="证件类型" prop="merchantType">
                  <el-select v-model="ruleForm.certificateType" :disabled="disabled" placeholder="请选择"
                    style="width:100%">
                    <el-option label="身份证" value="身份证" />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="身份证号码" prop="venueNumber">
                  <el-input v-model="ruleForm.idCardNum" :disabled="disabled"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="20">
              <el-col :span="12">
                <el-form-item label="身份证有效期" prop="merchantType">
                  <el-date-picker style="width: 100%;" v-model="plan_Time" value-format="yyyy-MM-dd"
                    type="datetimerange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"
                    align="right" :disabled="disabled">
                  </el-date-picker>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="20">
              <el-col :span="12">
                <el-form-item label="身份证照片(正面)">
                  <img :src="ruleForm.cardPhotoFront" alt="" v-if="disabled" style="width:150px;height:150px" />
                  <upimg v-model="ruleForm.cardPhotoFront" :limit="1" :fileSize="1" :isShowTip="false" v-else></upimg>
                </el-form-item>
              </el-col>

            </el-row>
            <el-row :gutter="20">

              <el-col :span="12">
                <el-form-item label="身份证照片(反面)">
                  <img :src="ruleForm.cardPhotoBack" alt="" v-if="disabled" style="width:150px;height:150px" />
                  <upimg v-model="ruleForm.cardPhotoBack" :limit="1" :fileSize="1" :isShowTip="false" v-else></upimg>
                </el-form-item>
              </el-col>
            </el-row>
          </div>
          <div class="titles">
            商户租赁信息
          </div>
          <div style="padding: 20px 20px 20px 0;">

            <el-row :gutter="20">
              <el-col :span="12">
                <el-form-item label="主体名称" prop="merchantType">
                  <el-input v-model="ruleForm.principalName" placeholder="请输入" :disabled="disabled" />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="主体类型" prop="venueNumber">
                  <el-select v-model="ruleForm.empiricalSubject" :disabled="disabled" placeholder="请选择"
                    style="width:100%">

                    <el-option label="个体" value="个体" />
                    <el-option label="企业" value="企业" />
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>

            <!-- <el-row :gutter="20">
            <el-col :span="24">
              <el-form-item
                label="租赁资源信息"
                prop="merchantType"
              >
                <div style="border: 1px solid #E5E5E5;padding: 1px" id="huodong">
                  <div style="padding: 10px 13px;font-size: 14px;border-bottom: 1px solid #E5E5E5;display: flex;justify-content: space-between;">
                    <div style="color: #3F9B6A;margin-left: 10px;" @click="mingShow">
                      添加
                    </div>
                  </div>
                  <div style="padding: 15px;">
                    <div style="padding: 0px 20px 0px 0px">
                      <el-table :data="tableData"
                        :header-cell-style="{fontSize: '14px',color:'#0009',fontWeight: 'normal',backgroundColor:'#F2F3F5'}"
                         >
                        <el-table-column label="序号" min-width="5%" >
                          <template slot-scope="scope">
                            {{scope.$index + 1}}
                          </template>
                        </el-table-column>
                        <el-table-column label="资源名称" min-width="10%">
                          <template slot-scope="scope">

                          </template>
                        </el-table-column>
                      <el-table-column label="资源类型" min-width="10%">
                        <template slot-scope="scope">

                        </template>
                      </el-table-column>
                        <el-table-column label="详细地址"  min-width="20%" show-overflow-tooltip>
                        <template slot-scope="scope">

                        </template>
                        </el-table-column>

                        <el-table-column prop="notes" label="实际使用面积" min-width="25%" show-overflow-tooltip>
                        </el-table-column>
                        <el-table-column prop="policyName" label="营业执照" min-width="25%" show-overflow-tooltip>
                        </el-table-column>
                        <el-table-column label="操作" min-width="15%">
                          <template slot-scope="scope">
                            <div @click="ceSel(scope.$index)" class="tableBtn greens">查看</div>
                            <div @click="MingEd(scope.row)" class="tableBtn greens">添加营业执照</div>
                            <div @click="MingEd(scope.row)" class="tableBtn greens">录入合同</div>
                            <div @click="MingDelete(scope.$index)" class="tableBtn greens">删除</div>
                          </template>
                        </el-table-column>
                      </el-table>
                    </div>
                  </div>
                </div>
              </el-form-item>
            </el-col>

          </el-row> -->
            <el-row :gutter="20">
              <el-col :span="12">
                <div style="margin-top: 20px">
                  <el-button @click="addCheck('ruleForm')" style="background-color: #3F9B6A;color: #fff;">确
                    定</el-button>
                  <el-button @click="closeFn" class="buttonHover"
                    style="color: #606266;border: 1px solid #dddfe5;background-color: #fff;">取 消</el-button>

                </div>
              </el-col>
            </el-row>
          </div>
        </el-form>
      </div>
    </div>
    <!-- 查看 -->
    <!-- dialogVisible -->
    <el-dialog :title="
        userState === 0
          ? '新增商家'
          : userState === 1
            ? '修改商家'
            : '查看商家'
      " :visible.sync="disabled" width="65%" center custom-class='XDD_css' :close-on-click-modal="false">
      <div style="padding:20px;">
        <el-tabs type="border-card" v-model="activeName" @tab-click="handleClick">
          <el-tab-pane label="入驻类型" name="0">
            <el-form ref="ruleFormInfo" :model="ruleForm" :rules="rulesInfo" label-width="120px">
              <el-form-item label="商家类型" prop="merchantType">
                <el-select v-model="ruleForm.merchantType" :disabled="disabled" placeholder="请选择" style="width:100%">
                  <el-option label="线上商家" value="线上商家" />
                  <el-option label="实体商家" value="实体商家" />
                </el-select>
              </el-form-item>
              <el-form-item label="经营主体" prop="empiricalSubject">
                <el-select v-model="ruleForm.empiricalSubject" :disabled="disabled" placeholder="请选择"
                  style="width:100%">

                  <el-option label="个体" value="个体" />
                  <el-option label="企业" value="企业" />
                </el-select>
              </el-form-item>

            </el-form>
          </el-tab-pane>
          <el-tab-pane label="开店信息" name="1">
            <el-form ref="ruleFormInfo" :model="ruleForm" :rules="rulesInfo" label-width="120px">

              <el-form-item label="店铺名称" prop="shopName">
                <el-input v-model="ruleForm.shopName" :disabled="disabled" />
              </el-form-item>
              <el-form-item label="店铺负责人" prop="chargePersonName">
                <el-input v-model="ruleForm.chargePersonName" :disabled="disabled" />
              </el-form-item>
              <el-form-item label="负责人电话" prop="chargePersonPhone">
                <el-input v-model="ruleForm.chargePersonPhone" v-if="cpPhoneShow"
                  :value="hidden(ruleForm.chargePersonPhone,3,4)" :disabled="disabled" @focus="focuscpPhoneInput" />
                <el-input v-else ref="cpPhoneCls" v-model="ruleForm.chargePersonPhone" clearable :disabled="disabled"
                  @change="changecpPhoneInput" />
              </el-form-item>
              <el-form-item label="店铺地址" prop="shopAdress">
                <el-input ref="addressCls" v-model="ruleForm.shopAdress" :disabled="disabled" />
                <!-- <div v-else @click="inputAddress">
                  <el-input :value="hidden(ruleForm.shopAdress, 1, 1)" :disabled="disabled" />
                </div> -->
              </el-form-item>
              <!-- <el-form-item
                label="生效日期"
                prop="effectiveDate"
              >
                <el-date-picker
                  v-model="ruleForm.effectiveDate"
                  :disabled="disabled"
                  value-format="yyyy-MM-dd"
                  type="date"
                  placeholder="选择日期"
                />
              </el-form-item> -->
              <!-- <el-form-item
                label="生效年限"
                prop="effectiveYear"
              >
                <el-input
                  v-model="ruleForm.effectiveYear"
                  type="text"
                  :disabled="disabled"
                  placeholder="请输入内容"
                  maxlength="4"
                  class="elipt"
                  style="width: 50%"
                  show-word-limit
                />
                <span class="elspan">年</span>
              </el-form-item> -->
            </el-form>
          </el-tab-pane>
          <el-tab-pane label="主体信息" name="2">
            <el-form ref="ruleForm" :model="ruleForm" label-width="130px">
              <el-form-item label="主体名称">
                <el-input v-model="ruleForm.principalName" placeholder="请输入" :disabled="disabled" />
              </el-form-item>
              <el-form-item label="统一社会信用代码">
                <el-input v-model="ruleForm.unifiedSocialCreditCode" :disabled="disabled" placeholder="请输入" />
              </el-form-item>

              <el-form-item label="法定代表人">
                <el-input v-model="ruleForm.legalRepresentative" placeholder="请输入" :disabled="disabled" />
              </el-form-item>
              <el-form-item label="经营范围">
                <el-input type="textarea" v-model="ruleForm.businessScope" :rows="4" :disabled="disabled"></el-input>
              </el-form-item>
              <el-form-item label="注册资本">
                <el-input v-model="ruleForm.registeredCapital" placeholder="请输入" :disabled="disabled" />
              </el-form-item>
              <el-form-item label="成立日期">
                <el-input v-model="ruleForm.dateEstablishment" placeholder="请输入" :disabled="disabled" />
              </el-form-item>
              <el-form-item label="住所">
                <el-input v-model="ruleForm.domicile" placeholder="请输入" :disabled="disabled" />
              </el-form-item>
              <el-form-item label="邮箱地址">
                <el-input v-model="ruleForm.emailAddress" placeholder="请输入" :disabled="disabled" />
              </el-form-item>
              <el-form-item label="营业期限">
                <el-date-picker style="width: 100%;" v-model="business" value-format="yyyy-MM-dd HH:mm:ss"
                  :disabled="disabled" type="datetimerange" range-separator="至" start-placeholder="开始日期"
                  end-placeholder="结束日期" align="right">
                </el-date-picker>
              </el-form-item>
              <el-form-item label="营业执照">
                <img :src="ruleForm.businessLicense" alt="" v-if="disabled" style="width:150px;height:150px" />
                <upimg v-model="ruleForm.businessLicense" :limit="1" :fileSize="1" v-else></upimg>
              </el-form-item>
            </el-form>
          </el-tab-pane>
          <el-tab-pane label="经营者信息" name="3">
            <el-form ref="form" label-width="140px">
              <el-form-item label="客户级别">
                <el-select v-model="ruleForm.customerLevel" :disabled="disabled" placeholder="请选择">
                  <el-option label="A" value="A" />
                  <el-option label="B" value="B" />
                  <el-option label="C" value="C" />
                </el-select>
              </el-form-item>
              <el-form-item label="证件类型">
                <el-select v-model="ruleForm.certificateType" :disabled="disabled" placeholder="请选择">
                  <el-option label="身份证" value="身份证" />
                </el-select>
              </el-form-item>
              <el-form-item label="身份证号码">
                <el-input v-model="ruleForm.idCardNum" :disabled="disabled"></el-input>
              </el-form-item>
              <el-form-item label="身份证有效期">
                <el-date-picker style="width: 100%;" v-model="plan_Time" value-format="yyyy-MM-dd" type="datetimerange"
                  range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" align="right"
                  :disabled="disabled">
                </el-date-picker>
              </el-form-item>
              <el-form-item label="身份证照片(正面)">
                <img :src="ruleForm.cardPhotoFront" alt="" v-if="disabled" style="width:150px;height:150px" />
                <upimg v-model="ruleForm.cardPhotoFront" :limit="1" :fileSize="1" :isShowTip="false" v-else></upimg>
              </el-form-item>
              <el-form-item label="身份证照片(反面)">
                <img :src="ruleForm.cardPhotoBack" alt="" v-if="disabled" style="width:150px;height:150px" />
                <upimg v-model="ruleForm.cardPhotoBack" :limit="1" :fileSize="1" :isShowTip="false" v-else></upimg>
              </el-form-item>
              <el-form-item label="是否为法人">
                <el-select v-model="ruleForm.legalEntity" :disabled="disabled" placeholder="请选择" style="width:100%">
                  <el-option label="是" value="是" />
                  <el-option label="否" value="否" />
                </el-select>
              </el-form-item>
              <el-form-item label="企业授权书">
                <img :src="ruleForm.enterpriseAuthorizationLetter" alt="" v-if="disabled"
                  style="width:150px;height:150px" />
                <upimg v-model="ruleForm.enterpriseAuthorizationLetter" :limit="1" :fileSize="1" :isShowTip="false"
                  v-else></upimg>
              </el-form-item>
            </el-form>
          </el-tab-pane>
          <el-tab-pane label="账号" name="4">
            <el-form ref="ruleForm" :model="ruleForm" :rules="rules" label-width="100px">
              <el-form-item label="账号" prop="shopPhone">
                <el-input v-if="shopPhoneShow" :value="hidden(ruleForm.shopPhone, 3, 4)" :disabled="disabled"
                  maxlength="20" @focus="focusShopPhoneInput" />
                <el-input v-else ref="shopPhoneCls" v-model="ruleForm.shopPhone" :disabled="disabled" maxlength="20" />
              </el-form-item>
              <el-form-item label="密码" prop="shopPassword">
                <el-input v-model="ruleForm.shopPassword" type="password" :disabled="disabled" maxlength="20" />
              </el-form-item>
            </el-form>
          </el-tab-pane>
          <el-tab-pane label="资源" name="5" v-if="ruleForm.merchantType =='实体商家'">
            <div style="border: 1px solid #E5E5E5;padding: 1px" id="huodong">
              <div
                style="padding: 10px 13px;font-size: 14px;border-bottom: 1px solid #E5E5E5;display: flex;justify-content: space-between;">
                <div>资源管理</div>
                <div style="color: #3F9B6A;margin-left: 10px;" @click="addMing = true" v-if="disabled==false">
                  添加
                </div>
              </div>
              <div style="padding: 15px;">
                <div style="padding: 0px 20px 0px 0px">
                  <el-table :data="ziyuanData"
                    :header-cell-style="{fontSize: '14px',color:'#0009',fontWeight: 'normal',backgroundColor:'#F2F3F5'}">
                    <el-table-column label="序号" width="80">
                      <template slot-scope="scope">
                        {{scope.$index + 1}}
                      </template>
                    </el-table-column>
                    <el-table-column label="资源编号" prop="id" width="150">

                    </el-table-column>
                    <el-table-column label="资源名称" width="200">
                      <template slot-scope="scope">
                        {{scope.row.shopName ? scope.row.shopName :  scope.row.advertisingName}}
                      </template>
                    </el-table-column>
                    <el-table-column label="资源类型" width="150">
                      <template slot-scope="scope">
                        {{scope.row.advertisingType ?scope.row.advertisingType:'商铺'}}
                      </template>
                    </el-table-column>
                    <el-table-column prop="notes" label="策略描述" width="300">
                    </el-table-column>
                    <el-table-column prop="policyName" label="策略名称" width="200">
                    </el-table-column>
                    <el-table-column label="操作" width="200">
                      <template slot-scope="scope">
                        <!-- <div @click="ceSel(scope.$index)" class="tableBtn greens">策略选择</div> -->
                        <!-- <div @click="MingEd(scope.row)" class="tableBtn greens">编辑</div> -->
                        <div @click="MingDelete(scope.$index)" class="tableBtn greens">删除</div>
                      </template>
                    </el-table-column>
                  </el-table>
                </div>
              </div>
            </div>
          </el-tab-pane>
        </el-tabs>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="closeFn" class="buttonHover"
          style="color: #606266;border: 1px solid #dddfe5;background-color: #fff;">取 消</el-button>
        <!-- <el-button
          v-if="activeName == '0'"
          @click="next"
         style="background-color: #3F9B6A;color: #fff;"
        >下一步</el-button> -->
        <el-button @click="addCheck('ruleForm')" style="background-color: #3F9B6A;color: #fff;">确 定</el-button>
      </span>
      <!-- 新增资源列表 -->
      <el-dialog :visible.sync="addMing" custom-class='XDD_css' style="padding: 0;" width="50%" append-to-body center
        :close-on-click-modal="false" :close-on-press-escape="false" :show-close="false">
        <div
          style="padding: 10px 13px;font-size: 14px;border-bottom: 1px solid #E5E5E5;display: flex;justify-content: space-between;">
          <div>添加</div>
        </div>
        <div style="padding: 15px;width:100%">
          <div style="border: 1px solid #E5E5E5;padding: 1px" id="huodong">
            <div
              style="padding: 10px 13px;font-size: 14px;border-bottom: 1px solid #E5E5E5;display: flex;justify-content: space-between;">
              <div>选择资源</div>
            </div>
            <div style="padding: 15px;">
              <div style="padding: 0px 20px 0px 0px">
                <el-table :data="AddziyuanData" @selection-change="handleSelectionChange" tooltip-effect="dark"
                  :header-cell-style="{fontSize: '14px',color:'#0009',fontWeight: 'normal',backgroundColor:'#F2F3F5'}">
                  <el-table-column label="选择" type="selection" width="55">
                  </el-table-column>
                  <el-table-column label="序号" min-width="8%">
                    <template slot-scope="scope">
                      {{scope.$index + 1}}
                    </template>
                  </el-table-column>
                  <el-table-column label="编号" prop="id" min-width="22%">

                  </el-table-column>
                  <el-table-column label="资源名称" min-width="15%">
                    <template slot-scope="scope">
                      {{scope.row.shopName ? scope.row.shopName :  scope.row.advertisingName}}
                    </template>
                  </el-table-column>
                  <el-table-column label="资源类型" min-width="15%">
                    <template slot-scope="scope">
                      {{scope.row.advertisingType ?scope.row.advertisingType:'商铺'}}
                    </template>
                  </el-table-column>
                  <el-table-column prop="notes" label="对应策略" min-width="15%">
                  </el-table-column>
                </el-table>
              </div>
            </div>
          </div>
        </div>
        <div style="display: flex;justify-content: flex-end;padding: 10px 20px 10px 0">
          <el-button @click="mingClose" class="buttonHover"
            style="color: #606266;border: 1px solid #dddfe5;background-color: #fff;">取消
          </el-button>
          <el-button @click="minSev" style="background-color: #3F9B6A;color: #fff;">确定
          </el-button>

        </div>
      </el-dialog>
    </el-dialog>
    <buscha :detbox="detbox" :list="ruleForm" @change="change" v-if="detbox"></buscha>
  </div>
</template>

<script>
  // 这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
  // 例如：import 《组件名称》 from '《组件路径》';
  import {
    businessListGetAll,
    businessListSave,
    businessListGetById,
    businessListUpdate,
    businessListStart,
    delBusinessById
  } from '@/api/business'
  import upimg from "@/components/ImageUpload/index";
  import {
    getAlls
  } from '@/api/information.js'
  import {
    getAlls as map1
  } from '@/api/map1'
  import buscha from './busCha.vue'
  export default {
    components: {
      upimg,
      buscha
    },
    data() {
      // 这里存放数据
      return {
        // 新建商家弹框

        detbox: false,
        dialogVisible: false,
        activeName: 0,
        formInline: {
          shopName: '', // 店铺名称
          shopCode: '', // 店铺编码
          chargePersonName: '', // 店铺负责人
          contractState: '', // 合同状态 1-有效 0-无效
          page: '1', // 当前页
          pageSize: '10' // 每页记录数
        },
        disabled: false,
        ruleForm: {
          shopName: '', // 店铺名称
          chargePersonName: '', // 店铺负责人
          chargePersonPhone: '', // 负责人电话
          shopAdress: '', // 地址
          effectiveDate: '', // 生效日期
          effectiveYear: '', // 生效年限
          contractState: 1, // 合同状态 1-有效 0-无效
          auditLive: 1,
          auditLiveProduct: 1,
          shopPhone: '', // 账号
          shopPassword: '', // 密码

        },
        showPhone: false,
        showAddress: false,
        userPhone: '',
        showUserPhone: false,
        newAddress: '',
        personPhone: '',

        rulesInfo: {
          effectiveYear: [{
            required: true,
            message: '请输入生效时限',
            trigger: 'blur'
          }],
          shopName: [{
            required: true,
            message: '请输入店铺名称',
            trigger: 'blur'
          }],
          chargePersonName: [{
            required: true,
            message: '请输入店铺负责人',
            trigger: 'blur'
          }],
          chargePersonPhone: [{
              required: true,
              message: '请输入负责人电话',
              trigger: 'blur'
            },
            {
              pattern: /^1[3456789]\d{9}$/,
              message: '目前只支持中国大陆的手机号码'
            }
          ],
          shopAdress: [{
            required: true,
            message: '请输入地址',
            trigger: 'blur'
          }],
          contractState: [{
            required: true,
            message: '请选择合同状态',
            trigger: 'change'
          }],
          auditLive: [{
            required: true,
            message: '请选择状态',
            trigger: 'change'
          }],
          auditLiveProduct: [{
            required: true,
            message: '请选择状态',
            trigger: 'change'
          }],
          effectiveDate: [{
            required: true,
            message: '请选择日期',
            trigger: 'change'
          }]
        },
        rules: {
          shopPhone: [{
              required: true,
              message: '请输入账号',
              trigger: 'blur'
            },
            {
              pattern: /^1[3456789]\d{9}$/,
              message: '目前只支持中国大陆的手机号码'
            }
          ],
          shopPassword: [{
              required: true,
              message: '请输入密码',
              trigger: 'blur'
            },

            {
              pattern: /^[~!@#$%^&*\-+=_.0-9a-zA-Z]{8,16}$/,
              message: '8-16密码数字英文混合'
            }
          ],
          shopName: [{
            required: true,
            message: '请输入店铺名称',
            trigger: 'blur'
          }],
          chargePersonName: [{
            required: true,
            message: '请输入店铺负责人',
            trigger: 'blur'
          }],
          chargePersonPhone: [{
              required: true,
              message: '请输入负责人电话',
              trigger: 'blur'
            },
            {
              pattern: /^1[3456789]\d{9}$/,
              message: '目前只支持中国大陆的手机号码'
            }
          ],
          shopAdress: [{
            required: true,
            message: '请输入地址',
            trigger: 'blur'
          }],
        },
        total: 1,
        tableData: [],
        currentPage: 1,
        userState: 1,
        privacyTime: 0,
        cpPhoneShow: true, // 是否显示脱敏负责人手机号
        shopPhoneShow: true, // 是否显示脱敏账号
        addMing: false, //添加资源框
        ziyuanData: [], //资源列表
        AddziyuanData: [], //新增资源选择列表
        multipleSelection: [],
        pageindex: {
          pageNumber: 1,
          pageSize: 10,
        },
        business: [],
        plan_Time: []
      }
    },
    // 监听属性 类似于data概念
    computed: {},
    // 监控data中的数据变化
    watch: {},
    // 生命周期 - 创建完成（可以访问当前this实例）
    created() {},
    // 生命周期 - 挂载完成（可以访问DOM元素）
    mounted() {
      this.getAll(this.formInline)
      this.privacyTime = localStorage.getItem('privacyTime')
      console.log(this.privacyTime)
      this.getZiyuan()
    },
    // 方法集合
    methods: {
      async getZiyuan() {
        const ziyuan = await getAlls(this.pageindex)
        const ggw = await map1(this.pageindex)
        this.AddziyuanData = [...ziyuan.data.content, ...ggw.data.content]
      },
      focusShopPhoneInput() {
        this.shopPhoneShow = false
        this.ruleForm.shopPhone = ''
        // 自动获取焦点
        this.$nextTick(() => {
          this.$refs.shopPhoneCls.focus()
        })
      },
      focuscpPhoneInput() {
        this.cpPhoneShow = false
        this.ruleForm.chargePersonPhone = ''
        // 自动获取焦点
        this.$nextTick(() => {
          this.$refs.cpPhoneCls.focus()
        })
      },
      changecpPhoneInput() {},
      handleSizeChange(val) {
        this.formInline.pageSize = val
        this.getAll(this.formInline)
      },
      handleCurrentChange(val) {
        this.formInline.page = val
        this.getAll(this.formInline)
      },
      handleClick(tab, event) {
        console.log(tab, event)
      },
      onSubmit() {
        this.getAll(this.formInline)
      },
      resetting() {
        this.formInline = {
          shopName: '', // 店铺名称
          shopCode: '', // 店铺编码
          chargePersonName: '', // 店铺负责人
          contractState: '', // 合同状态 1-有效 0-无效
          page: '1', // 当前页
          pageSize: '10' // 每页记录数
        }
        this.getAll(this.formInline)
      },
      // 新建商家
      addbuss() {
        this.userState = 0
        this.disabled = false
        this.newAddress = ''
        this.personPhone = ''
        this.ruleForm = {
          shopName: '', // 店铺名称
          chargePersonName: '', // 店铺负责人
          chargePersonPhone: '', // 负责人电话
          shopAdress: '', // 地址
          effectiveDate: '', // 生效日期
          effectiveYear: '', // 生效年限
          contractState: 1, // 合同状态 1-有效 0-无效
          auditLive: 1,
          auditLiveProduct: 1,
          shopPhone: '', // 账号
          shopPassword: '' // 密码
        }
        this.business = []
        this.plan_Time = []


        this.dialogVisible = true
        console.log(this.userState)
      },
      next() {
        this.activeName = this.activeName + 1
      },
      closeFn() {
        this.$nextTick(() => {
          // this.$refs['ruleForm'].clearValidate()
          // this.$refs['ruleFormInfo'].clearValidate()
          this.dialogVisible = false
        })
      },
      // 新建商家确定
      addCheck(ruleForm) {
        this.$refs[ruleForm].validate(valid => {
          if (valid) {
            console.log(this.userState)
            console.log(this.ruleForm)
            // if (this.personPhone !== '') {
            //   this.ruleForm.chargePersonPhone = this.personPhone
            // }
            // if (this.newAddress !== '') {
            //   this.ruleForm.shopAdress = this.newAddress
            // }
            // if (this.userPhone !== '') {
            //   this.ruleForm.shopPhone = this.userPhone
            // }
            // if (this.ruleForm.shopName === '') {
            //   this.$message.error('请输入店铺名称')
            //   return
            // }
            // if (this.ruleForm.effectiveDate === '') {
            //   this.$message.error('请输入生效日期')
            //   return
            // }
            // if (this.ruleForm.effectiveYear === '') {
            //   this.$message.error('请输入生效年限')
            //   return
            // }
            if (this.business.length != 0) {
              this.ruleForm.businessStartDate = this.business[0]
              this.ruleForm.businessEndDate = this.business[1]
            }
            if (this.plan_Time.length != 0) {
              this.ruleForm.validityStartDate = this.plan_Time[0]
              this.ruleForm.validityEndDate = this.plan_Time[1]
            }

            if (!this.userState) {
              businessListSave(this.ruleForm).then(res => {
                console.log(res)
                if (res.code === '') {
                  this.$message({
                    message: '新增成功',
                    type: 'success'
                  })
                }
                this.getAll(this.formInline)
                this.dialogVisible = false
                this.$refs.ruleForm.clearValidate()
              })
            } else {
              businessListUpdate(this.ruleForm).then(res => {
                console.log(res)
                if (res.code === '') {
                  this.$message({
                    message: '修改成功',
                    type: 'success'
                  })
                  this.$refs.ruleForm.clearValidate()
                }
                this.getAll(this.formInline)
                this.dialogVisible = false
              })
            }
          } else {
            console.log('error submit!!')
            this.$message.error('请输入完整信息')
            return false
          }
        })
      },
      // 查看
      async seeMore(row) {
        this.ruleForm = row
        this.detbox = true
        //      this.showPhone = false
        //      this.cpPhoneShow = true
        //      this.shopPhoneShow = true
        //      const res = await businessListGetById({ shopId: row.shopId })
        //      if (res.code === '' || res.code === '200') {
        //        this.userState = 3
        //        this.disabled = true
        //        this.ruleForm = res.data

        // this.$set(this.business, 0, res.data.businessStartDate)
        // this.$set(this.business, 1, res.data.businessEndDate)
        // this.$set(this.plan_Time, 0, res.data.validityStartDate)
        // this.$set(this.plan_Time, 1, res.data.validityEndDate)
        //        this.dialogVisible = true
        // }
      },
      // 编辑
      async edit(row) {
        this.showPhone = false
        this.personPhone = ''
        this.userState = 1
        this.disabled = false
        this.cpPhoneShow = true
        const res = await businessListGetById({
          shopId: row.shopId
        })
        this.ruleForm = res.data
        this.$set(this.business, 0, res.data.businessStartDate)
        this.$set(this.business, 1, res.data.businessEndDate)
        this.$set(this.plan_Time, 0, res.data.validityStartDate)
        this.$set(this.plan_Time, 1, res.data.validityEndDate)
        this.dialogVisible = true


      },
      // 删除
      async del(row) {
        console.log(row)
        if (row.state === 1) {
          const res = await businessListStart({
            shopName: row.shopName,
            state: 0,
            shopId: row.shopId
          })
          if (res.code === '') {
            this.$message({
              message: '停用成功',
              type: 'success'
            })
            this.getAll(this.formInline)
          }
        } else {
          const res = await businessListStart({
            shopName: row.shopName,
            state: 1,
            shopId: row.shopId
          })
          if (res.code === '') {
            this.$message({
              message: '启用成功',
              type: 'success'
            })
            this.getAll(this.formInline)
          }
        }
      },
      delBusiness(row) {
        // todo 判断商家状态
        this.$confirm('此操作将永久删除该商家, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(async () => {
          const res = await delBusinessById({
            shopId: row.shopId
          })
          if (res.code === '') {
            this.$message({
              message: '操作成功',
              type: 'success'
            })
            this.getAll(this.formInline)
          }
        }).catch(() => {

        })
      },
      // businessListGetAll
      // 初始化查询所有数据
      async getAll(formInline) {
        const res = await businessListGetAll(formInline)
        this.total = res.data.total
        this.tableData = res.data.list
      },
      // 编辑号码
      inputPhone() {
        this.showPhone = true
        this.personPhone = ''
        this.$nextTick(() => {
          this.$refs.phoneCls.focus()
        })
      },
      // 编辑地址
      inputAddress() {
        this.showAddress = true
        this.newAddress = ''
        this.$nextTick(() => {
          this.$refs.addressCls.focus()
        })
      },
      // 编辑客户信息
      inputUserPhone() {
        this.showUserPhone = true
        this.userPhone = ''
        this.$nextTick(() => {
          this.$refs.userPhoneCls.focus()
        })
      },
      // 中间部分
      hidden(str, frontLen, endLen) {
        let endLenData = 0
        if (str.length !== 2) {
          endLenData = endLen
        }
        const len = str.length - frontLen - endLenData
        let xing = ''
        for (let i = 0; i < len; i++) {
          xing += '*'
        }
        return (
          str.substring(0, frontLen) + xing + str.substring(str.length - endLenData)
        )
      },
      handleSelectionChange(val) {
        this.multipleSelection = val;
      },
      minSev() {
        this.ziyuanData = this.multipleSelection
        this.addMing = false
        this.multipleSelection = []
      },
      mingClose() {
        this.multipleSelection = []
        this.addMing = false
      },
      MingDelete(index) {
        this.ziyuanData.splice(index, 1);
      },
      change(msg) {
        this.detbox = msg

      }
    }
  }
</script>
<style lang="scss" scoped>
  @import url("../../../styles/elDialog.scss");

  .tableBtn {
    display: inline-block;
    margin-right: 10px;
    cursor: pointer;
  }

  .formSearch {
    display: flex;
    width: 100%;
    font-size: 14px;
    justify-content: space-between;
  }

  .greens {
    color: #3F9B6A;
  }

  .pending {
    padding: 0 20px 20px 20px;
    min-height: calc(100vh - 50px - 20px);
    background-color: #Fff;
  }

  .zhuti {
    padding: 0 20px 20px 20px;
    min-height: calc(100vh - 50px - 20px);
    background-color: #Fff;

  }

  .fenye {
    display: flex;
    justify-content: flex-end;
    position: relative;
  }

  .elipt {
    width: 50%;
  }

  .elspan {
    margin-left: 10px;
  }

  ::v-deep .el-input__inner:focus {
    border: #11be59 1px solid;
  }

  ::v-deep .el-input__inner:hover {
    border: #11be59 1px solid;
  }

  ::v-deep .el-select .el-input.is-focus .el-input__inner {
    border-color: #11be59
  }

  ::v-deep .el-pagination.is-background .el-pager li:not(.disabled).active {
    background-color: #3F9B6A;
  }
</style>
<style lang="scss" scoped>
  ::v-deep .bian_css {
    .el-dialog__header {
      padding: 0px;
    }
  }

  ::v-deep .buttonHover:hover {
    color: #3f9b6a !important;
    border-color: #c5e1d2 !important;
    background-color: #ecf5f0 !important;
    outline: none;
  }

  ::v-deep .el-pagination__total {
    position: absolute;
    left: 10px;
  }

  ::v-deep .diaslog_zhong {
    .el-dialog__body {
      padding: 10px 20px 20px 20px;
    }

    .el-upload--picture-card {
      width: 130px;
      height: 130px;
    }
  }

  ::v-deep .el-tabs--border-card {
    border: none;
    -webkit-box-shadow: none;
    box-shadow: none;

    .el-tabs__content {
      border: 1px solid #E4E7ED;
      padding: 0;
    }

    .el-tabs__header {
      background-color: #fff;
      border-bottom: none;
    }

    .el-tabs__content {
      border: none;
    }

    .el-tabs__header .el-tabs__item {
      border: none;
      margin-right: 10px;
      background-color: #F2F2F2;
      font-size: 12px;
      border-top-left-radius: 8px;
      border-top-right-radius: 8px;
      padding: 0 15px;
    }

    .el-tabs__header .el-tabs__item.is-active {
      color: #fff;
      background-color: #3F9B6A;
    }

    .el-tabs__header .el-tabs__item:not(.is-disabled):hover {
      color: #000;
    }
  }
</style>
