<!--
 * @Descripttion:
 * @version:
 * @Author: kBank
 * @Date: 2022-10-24 15:45:01
-->
<template>
  <div class="page">
    <topBar
      v-if="topList.length > 0"
      :top-list="topList"
      :moren="moren"
    />
    <div class="main">
      <div class="form_all">
        <el-form
          ref="select"
          :model="select"
          label-width="auto"
        >
          <el-row :gutter="10">
            <el-col :span="4">
              <el-form-item label="会员编号">
                <el-input
                  v-model="select.memberCode"
                  clearable
                />
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-form-item label="会员姓名">
                <el-input
                  v-model="select.memberName"
                  clearable
                />
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-form-item label="推荐编号">
                <el-input
                  v-model="select.parentCode"
                  clearable
                />
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-form-item label="安置编号">
                <el-input
                  v-model="select.placeParentCode"
                  clearable
                />
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-form-item label="点位状态">
                <el-select
                  v-model="select.pointStatus"
                  :placeholder="'请选择'"
                >
                  <el-option
                    v-for="item in pointList"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-button
                type="primary"
                @click="getDataList"
              > {{ '搜索' }}</el-button>
              <el-button
                type=""
                @click="reset"
              > {{ '重置' }}</el-button>
            </el-col>
          </el-row>
        </el-form>
      </div>
      <div class="maintop">
        <div class="mainbtn">
          <el-button
            size="small"
            class="addBtn"
            @click="openDig"
          >{{ '添加' }}</el-button>
          <el-button
            size="small"
            :disabled="selectRow.length==0"
            class="delBtn"
            @click="deleteTable"
          >删除</el-button>
          <el-button
            size="small"
            class="thebtn2"
            style="background-color: #FF6723;color: #fff"
            @click="handleImport"
          > {{ '导入' }}</el-button>
          <el-button
            size="small"
            style="background-color: #009B58;color: #fff;margin-left: 15px"
            class="thebtn2"
            @click="importTemplate"
          > {{ '下载模板' }}</el-button>
          <el-button
            size="small"
            style="background-color: #FFAD41;color: #fff;margin-left: 15px"
            class="thebtn2"
            @click="creatMember"
          > 生成编号</el-button>
        </div>
        <div>
          <el-button
            size="small"
            class="addBtn"
            @click="changeAllData"
          >批量操作</el-button>
          <el-button
            size="small"
            @click="resetAll"
          >重置</el-button>
        </div>
      </div>
      <div class="maintable">
        <!-- :span-method="objectSpanMethod" -->
        <el-table
          :data="tableData"
          style="width: 100%"
          height="720px"
          :header-cell-style="{ background: '#EEEEEE' }"
          :row-class-name="tableRowClassName"
          @selection-change="handleSelectionChange"
        >
          <el-table-column
            type="selection"
            width="55"
          />
          <el-table-column
            align="center"
            width="180"
            prop="memberCode"
            label="会员编号"
          >

            <template slot-scope="scope">
              <el-input
                v-if="changeIndex == scope.$index"
                v-model="scope.row.memberCode"
                clearable
              />
              <div v-else>{{ scope.row.memberCode }}</div>
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            width="150"
            prop="memberName"
            label="会员姓名"
          >
            <template slot-scope="scope">

              <el-input
                v-if="changeIndex == scope.$index"
                v-model="scope.row.memberName"
                clearable
              />
              <div v-else>{{ scope.row.memberName }}</div>
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            width="150"
            prop="phone"
            label="联系方式"
          >
            <template slot-scope="scope">

              <el-input
                v-if="changeIndex == scope.$index"
                v-model="scope.row.phone"
                clearable
              />
              <div v-else>{{ scope.row.phone }}</div>
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            width="180"
            prop="parentCode"
            :label="'推荐编号'"
          >
            <template slot-scope="scope">

              <el-input
                v-if="changeIndex == scope.$index"
                v-model="scope.row.parentCode"
                clearable
              />
              <div v-else>{{ scope.row.parentCode }}</div>
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            width="180"
            prop="placeParentCode"
            :label="'安置编号'"
          >
            <template slot-scope="scope">

              <el-input
                v-if="changeIndex == scope.$index"
                v-model="scope.row.placeParentCode"
                clearable
              />
              <div v-else>{{ scope.row.placeParentCode }}</div>
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            width="150"
            prop="placeDept"
            label="安置部门"
          >
            <template
              slot="header"
              slot-scope="scope"
            >
              <div>安置部门</div>
              <el-select
                v-model="changeData.placeDept"
                :placeholder="'请选择'"
                @change="setPlace($event)"
              >
                <el-option
                  v-for="item in placeDeptList"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>

            </template>
            <template slot-scope="scope">
              <el-select
                v-if="changeIndex == scope.$index"
                v-model="scope.row.placeDept"
                :placeholder="'请选择'"
                @change="setPlace($event,scope.$index)"
              >
                <el-option
                  v-for="item in placeDeptList"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
              <div v-else>{{ scope.row.placeDeptVal }}</div>
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            width="150"
            prop="pkSettleCountry"
            label="结算国家"
          >
            <template
              slot="header"
              slot-scope="scope"
            >
              <div>结算国家</div>
              <el-select
                v-model="changeData.pkSettleCountry"
                disabled
                :placeholder="'请选择'"
              >
                <el-option
                  v-for="item in countryList"
                  :key="item.pkCountry"
                  :label="item.name"
                  :value="item.pkCountry"
                />
              </el-select>

            </template>
            <template slot-scope="scope">
              <el-select
                v-if="changeIndex == scope.$index"
                v-model="scope.row.pkSettleCountry"
                disabled
                :placeholder="'请选择'"
              >
                <el-option
                  v-for="item in countryList"
                  :key="item.pkCountry"
                  :label="item.name"
                  :value="item.pkCountry"
                />
              </el-select>
              <div v-else>{{ scope.row.pkSettleCountryVal }}</div>
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            width="150"
            prop="pkCountry"
            label="自然国家"
          >
            <template
              slot="header"
              slot-scope="scope"
            >
              <div>自然国家</div>
              <el-select
                v-model="changeData.pkCountry"
                :placeholder="'请选择'"
                @change="setPkcountry($event)"
              >
                <el-option
                  v-for="item in countryList"
                  :key="item.pkCountry"
                  :label="item.name"
                  :value="item.pkCountry"
                />
              </el-select>

            </template>
            <template slot-scope="scope">
              <el-select
                v-if="changeIndex == scope.$index"
                v-model="scope.row.pkCountry"
                :placeholder="'请选择'"
                @change="setPkcountry($event,scope.$index)"
              >
                <el-option
                  v-for="item in countryList"
                  :key="item.pkCountry"
                  :label="item.name"
                  :value="item.pkCountry"
                />
              </el-select>
              <div v-else>{{ scope.row.pkCountryVal }}</div>
            </template>
          </el-table-column>

          <el-table-column
            align="center"
            width="150"
            prop="orderType"
            :label="'注册类型'"
          >
            <template
              slot="header"
              slot-scope="scope"
            >
              <div>{{ '注册类型' }}</div>
              <el-select
                v-model="changeData.orderType"
                :placeholder="'请选择'"
                @change="setType($event)"
              >
                <el-option
                  v-for="item in orderTypeList"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>

            </template>
            <template slot-scope="scope">
              <el-select
                v-if="changeIndex == scope.$index"
                v-model="scope.row.orderType"
                :placeholder="'请选择'"
                @change="setType($event,scope.$index)"
              >
                <el-option
                  v-for="item in orderTypeList"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
              <div v-else>{{ scope.row.orderTypeVal }}</div>
            </template>
          </el-table-column>

          <el-table-column
            align="center"
            width="150"
            prop="pkRegisterGrade"
            :label="'注册等级'"
          >
            <template
              slot="header"
              slot-scope="scope"
            >
              <div>{{ '注册等级' }}</div>
              <el-select
                v-model="changeData.pkRegisterGrade"
                :placeholder="'请选择'"
                @change="setGrade($event)"
              >
                <el-option
                  v-for="item in gradeList"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>

            </template>
            <template slot-scope="scope">
              <el-select
                v-if="changeIndex == scope.$index"
                v-model="scope.row.pkRegisterGrade"
                :placeholder="'请选择'"
                @change="setGrade($event,scope.$index)"
              >
                <el-option
                  v-for="item in gradeList"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
              <div v-else>{{ scope.row.pkRegisterGradeVal }}</div>
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            width="150"
            prop="registerAchieve"
            label="注册业绩(¥)"
          >
            <template
              slot="header"
              slot-scope="scope"
            >
              <div>注册业绩(¥)</div>
              <el-input
                v-model="changeData.registerAchieve"
                clearable
              />

            </template>
            <template slot-scope="scope">

              <el-input
                v-if="changeIndex == scope.$index"
                v-model="scope.row.registerAchieve"
                clearable
              />
              <div v-else>{{ scope.row.registerAchieve }}</div>
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            width="150"
            prop="orderSource"
            label="订单类型"
          >
            <template
              slot="header"
              slot-scope="scope"
            >
              <div>订单类型</div>
              <el-select
                v-model="changeData.orderSource"
                :placeholder="'请选择'"
                @change="setOrder($event)"
              >
                <el-option
                  v-for="item in orderList"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>

            </template>
            <template slot-scope="scope">
              <el-select
                v-if="changeIndex == scope.$index"
                v-model="scope.row.orderSource"
                :placeholder="'请选择'"
                @change="setOrder($event,scope.$index)"
              >
                <el-option
                  v-for="item in orderList"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
              <div v-else>{{ scope.row.orderSourceVal }}</div>
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            width="150"
            prop="pkAwards"
            label="真实奖衔"
          >
            <template
              slot="header"
              slot-scope="scope"
            >
              <div>真实奖衔</div>
              <el-select
                v-model="changeData.pkAwards"
                :placeholder="'请选择'"
                @change="setAward($event)"
              >
                <el-option
                  v-for="item in awardList"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>

            </template>
            <template slot-scope="scope">
              <el-select
                v-if="changeIndex == scope.$index"
                v-model="scope.row.pkAwards"
                :placeholder="'请选择'"
                @change="setAward($event,scope.$index)"
              >
                <el-option
                  v-for="item in awardList"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
              <div v-else>{{ scope.row.awardVal }}</div>
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            width="150"
            prop="backAmount"
            label="回填金额"
          >
            <template
              slot="header"
              slot-scope="scope"
            >
              <div>回填金额</div>
              <el-input
                v-model="changeData.backAmount"
                clearable
              />

            </template>
            <template slot-scope="scope">
              <el-input
                v-if="changeIndex == scope.$index"
                v-model="scope.row.backAmount"
                clearable
              />
              <div v-else>{{ scope.row.backAmount }}</div>
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            width="150"
            prop="point"
            label="点位状态"
          >
            <template
              slot="header"
              slot-scope="scope"
            >
              <div>点位状态</div>
              <el-input
                v-model="changeData.point"
                clearable
                disabled
              />

            </template>
            <template slot-scope="scope">
              <el-input
                v-if="changeIndex == scope.$index"
                v-model="scope.row.pointStatusVal"
                clearable
                disabled
              />
              <div v-else>{{ scope.row.pointStatusVal }}</div>
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            width="150"
            prop="settlementFlag"
            label="是否结算"
          >
            <template
              slot="header"
              slot-scope="scope"
            >
              <div>是否结算</div>
              <el-select
                v-model="changeData.settlementFlag"
                :placeholder="'请选择'"
                @change="setSettle($event)"
              >
                <el-option
                  v-for="item in yesNo"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>

            </template>
            <template slot-scope="scope">
              <el-select
                v-if="changeIndex == scope.$index"
                v-model="scope.row.settlementFlag"
                :placeholder="'请选择'"
                @change="setSettle($event,scope.$index)"
              >
                <el-option
                  v-for="item in yesNo"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
              <div v-else>{{ scope.row.settlementFlagVal }}</div>
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            width="150"
            prop="settlementAchieve"
            label="结算业绩(¥)"
          >
            <template
              slot="header"
              slot-scope="scope"
            >
              <div>结算业绩(¥)</div>
              <el-input
                v-model="changeData.settlementAchieve"
                clearable
              />

            </template>
            <template slot-scope="scope">
              <el-input
                v-if="changeIndex == scope.$index"
                v-model="scope.row.settlementAchieve"
                clearable
                :disabled="scope.row.settlementFlag == 1"
              />
              <div v-else>{{ scope.row.settlementAchieve }}</div>
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            width="150"
            prop="transferAchieve"
            label="上传业绩(¥)"
          >
            <template
              slot="header"
              slot-scope="scope"
            >
              <div>上传业绩(¥)</div>
              <el-input
                v-model="changeData.transferAchieve"
                clearable
              />

            </template>
            <template slot-scope="scope">
              <el-input
                v-if="changeIndex == scope.$index"
                v-model="scope.row.transferAchieve"
                clearable
                :disabled="scope.row.settlementFlag == 1"
              />
              <div v-else>{{ scope.row.transferAchieve }}</div>
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            width="150"
            prop="productFlag"
            label="选购产品"
          >
            <template
              slot="header"
              slot-scope="scope"
            >
              <div>选购产品</div>
              <el-select
                v-model="changeData.productFlag"
                :placeholder="'请选择'"
                @change="setProductflag($event)"
              >
                <el-option
                  v-for="item in yesNo"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>

            </template>
            <template slot-scope="scope">
              <el-select
                v-if="changeIndex == scope.$index"
                v-model="scope.row.productFlag"
                :disabled="scope.row.settlementFlag == 1"
                :placeholder="'请选择'"
                @change="setProductflag($event,scope.$index)"
              >
                <el-option
                  v-for="item in yesNo"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
              <div v-else>{{ scope.row.productFlagVal }}</div>
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            width="350"
            prop="pkProduct"
            label="产品信息"
          >
            <template
              slot="header"
              slot-scope="scope"
            >
              <div>产品信息</div>
              <!-- <div style="
                            color: #48b2fd;
                            text-decoration: underline;
                            cursor: pointer;
                          ">添加产品</div> -->
            </template>
            <template slot-scope="scope">
              <div v-if="scope.row.settlementFlag == 0&&scope.row.productFlag == 0">
                <div
                  v-for="item,index in scope.row.productList"
                  :key="index"
                  class="disFlex"
                >
                  <div style="margin-right:10px">{{ item.productName }}</div>
                  <div style="margin-right:10px">{{ item.specsName }}</div>
                  <div>*{{ item.quantity }}</div>
                  <i
                    class="el-icon-remove-outline"
                    style="font-size:18px;margin-left:5px;color: #48b2fd;"
                    @click.stop="delData(scope.$index,index)"
                  />
                </div>
                <div
                  style="
                            color: #48b2fd;
                            text-decoration: underline;
                            cursor: pointer;
                          "
                  @click="getProduct(scope.$index)"
                >添加产品
                </div>
              </div>
              <div v-else />
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            width="150"
            prop="recName"
            label="收货人"
          >
            <template
              slot="header"
              slot-scope="scope"
            >
              <div>收货人</div>
              <el-input
                v-model="changeData.recName"
                clearable
              />

            </template>
            <template slot-scope="scope">
              <el-input
                v-if="changeIndex == scope.$index"
                v-model="scope.row.recName"
                clearable
                :disabled="scope.row.settlementFlag == 1||scope.row.productFlag == 1"
              />
              <div v-else>{{ scope.row.recName }}</div>
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            width="150"
            prop="recPhone"
            label="联系方式"
          >
            <template
              slot="header"
              slot-scope="scope"
            >
              <div>联系方式</div>
              <el-input
                v-model="changeData.recPhone"
                clearable
              />

            </template>
            <template slot-scope="scope">
              <el-input
                v-if="changeIndex == scope.$index"
                v-model="scope.row.recPhone"
                clearable
                :disabled="scope.row.settlementFlag == 1||scope.row.productFlag == 1"
              />
              <div v-else>{{ scope.row.recPhone }}</div>
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            width="150"
            prop="recProvince"
            label="省/市/区/县"
          >
            <template
              slot="header"
              slot-scope="scope"
            >
              <div>省/市/区/县</div>
              <el-cascader
                v-model="changeData.addressAll"
                :options="areaData"
                :placeholder="'请选择省市区'"
                :props="regionParams"
                @change="getDizhiAll($event)"
              />

            </template>
            <template slot-scope="scope">
              <el-cascader
                v-if="changeIndex == scope.$index"
                v-model="scope.row.addressAll"
                :disabled="scope.row.settlementFlag == 1||scope.row.productFlag == 1"
                :options="areaData"
                :placeholder="'请选择省市区'"
                :props="regionParams"
                @change="getDizhi($event, scope.$index)"
              />
              <!-- nameList -->
              <div v-else>{{ scope.row.nameList }}</div>
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            width="150"
            prop="recAddress"
            label="详细地址"
          >
            <template
              slot="header"
              slot-scope="scope"
            >
              <div>详细地址</div>
              <el-input
                v-model="changeData.recAddress"
                clearable
              />

            </template>
            <template slot-scope="scope">
              <el-input
                v-if="changeIndex == scope.$index"
                v-model="scope.row.recAddress"
                clearable
                :disabled="scope.row.settlementFlag == 1||scope.row.productFlag == 1"
              />
              <div v-else>{{ scope.row.recAddress }}</div>
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            width="150"
            prop="autoFlag"
            label="是否激活"
          >
            <template
              slot="header"
              slot-scope="scope"
            >
              <div>是否激活</div>
              <el-select
                v-model="changeData.autoFlag"
                :placeholder="'请选择'"
                @change="setAuto($event)"
              >
                <el-option
                  v-for="item in yesNo"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>

            </template>
            <template slot-scope="scope">
              <el-select
                v-if="changeIndex == scope.$index"
                v-model="scope.row.autoFlag"
                :placeholder="'请选择'"
                @change="setAuto($event,scope.$index)"
              >
                <el-option
                  v-for="item in yesNo"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
              <div v-else>{{ scope.row.autoFlagVal }}</div>
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            width="150"
            prop="contentAbstract"
            label="内容摘要"
          >
            <template slot-scope="scope">
              <!-- <el-input clearable
                        disabled
                        v-model="scope.row.contentAbstract"></el-input> -->
              <div>{{ scope.row.contentAbstract }}</div>
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            width="150"
            prop="remark"
            label="生成备注"
          >
            <template slot-scope="scope">
              <el-input
                v-if="changeIndex == scope.$index"
                v-model="scope.row.remark"
                clearable
              />
              <div v-else>{{ scope.row.remark }}</div>
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            prop="time"
            :label="'操作'"
            fixed="right"
          >
            <template slot-scope="scope">
              <div style="display:flex;justify-content: center;">
                <div
                  style="color:#3181e5;font-size: 12px;margin-right:10px;cursor: pointer;"
                  @click="upData(scope.$index)"
                > {{ '编辑' }}</div>
              </div>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <el-dialog
        :title="upload.title"
        :close-on-click-modal="false"
        :visible.sync="upload.open"
        width="600px"
        append-to-body
      >
        <el-upload
          ref="upload"
          :limit="1"
          accept=".xlsx, .xls"
          :headers="upload.headers"
          :action="upload.url"
          :disabled="upload.isUploading"
          :on-progress="handleFileUploadProgress"
          :on-success="handleFileSuccess"
          :on-exceed="handleExceed"
          :auto-upload="false"
          drag
        >
          <i class="el-icon-upload" />
          <div class="el-upload__text">
            {{ '将文件拖到此处，或' }}
            <em>{{ '点击上传' }}</em>
          </div>
          <div
            slot="tip"
            class="el-upload__tip"
            style="color: red"
          >
            {{ '提示：仅允许导入“xls”或“xlsx”格式文件！' }}
          </div>
        </el-upload>
        <div
          slot="footer"
          class="dialog-footer"
        >
          <el-button
            type="primary"
            @click="submitFileForm"
          >{{ '确认' }}</el-button>
          <el-button @click="upload.open = false">{{ '取消' }}</el-button>
        </div>
      </el-dialog>
      <div class="footer">

        <el-button
          size="small"
          class="thebtn1"
          @click="toCreated"
        >生成</el-button>
      </div>
    </div>
    <el-dialog
      :title="'添加'"
      :visible.sync="dialogVisible"
      :close-on-click-modal="false"
      width="50%"
      center
      :before-close="handleClose"
    >
      <div class="cpHeight">
        <el-row>
          <el-col :span="22"> <el-input
            v-model="selectObj.queryInfo"
            clearable
            :placeholder="'请输入'"
            prefix-icon="el-icon-search"
            @keyup.enter.native="getProductList"
          />
          </el-col>
          <el-col :span="2">
            <el-button
              type="primary"
              size="small"
              @click="getProductList"
            > {{ '搜索' }}</el-button>
          </el-col>
        </el-row>
        <div style="height:10px" />
        <el-table
          ref="multipleTable"
          :data="dialogList"
          style="width: 100%"
          :header-cell-style="{ background: '#EEEEEE' }"
          :row-class-name="tableRowClassName"
          @select-all="onSelectAll"
          @select="selected"
        >
          <el-table-column
            type="selection"
            width="55"
          />
          <el-table-column
            align="center"
            prop="productName"
            :label="'产品名称'"
          />
          <el-table-column
            align="center"
            prop="productCode"
            :label="'产品编号'"
          />
          <el-table-column
            align="center"
            prop="productName"
            :label="'规格'"
          >
            <template slot-scope="scope">
              <div
                v-show="scope.row.selSkuNameList==''||scope.row.selSkuNameList==undefined"
                class="blueCor"
                @click="selSku(scope.row.pkId,scope.$index)"
              >{{ '选择规格' }}</div>
              <div
                v-show="scope.row.selSkuNameList!=''&&scope.row.selSkuNameList!=undefined"
                class="blueCor"
                @click="selSku(scope.row.pkId,scope.$index)"
              >{{ scope.row.selSkuNameList }}</div>
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            prop="productName"
            :label="'商品数量'"
          >
            <template slot-scope="scope">
              <el-input-number
                v-model="scope.row.quantity"
                size="mini"
                :min="1"
              />
            </template>
          </el-table-column>
        </el-table>

      </div>
      <pagination
        v-show="total>0"
        :total="total"
        :page.sync="queryParams.pageNum"
        :limit.sync="queryParams.pageSize"
        @pagination="getProductList"
      />
      <span
        slot="footer"
        class="dialog-footer"
      >
        <el-button @click="handleClose">{{ '取消' }}</el-button>
        <el-button
          type="primary"
          @click="sureProduct"
        >{{ '确认' }}</el-button>
      </span>
    </el-dialog>
    <el-dialog
      :title="'规格'"
      :visible.sync="ggVisible"
      :close-on-click-modal="false"
      width="40%"
      center
      :before-close="handleCloseGg"
    >
      <div>
        <el-form>
          <el-form-item
            v-for="item,index in skuList"
            :key="index"
            :label="item.typeName"
          >
            <el-radio-group v-model="item.pkProductSku">
              <el-radio
                v-for="ctem,cndex in item.specsList"
                :key="ctem.pkId"
                :label="ctem.pkId"
                @change="getCheckBox(item.pkId,item.specsName)"
              >{{ ctem.specsName }}</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-form>
      </div>
      <span
        slot="footer"
        class="dialog-footer"
      >
        <el-button @click="handleCloseGg">{{ '取消' }}</el-button>
        <el-button
          type="primary"
          @click="sureSku"
        >{{ '确认' }}</el-button>
      </span>
    </el-dialog>
    <el-dialog
      :title="'规格'"
      :visible.sync="creatData"
      :close-on-click-modal="false"
      width="30%"
      center
      :before-close="handleCloseData"
    >
      <div>
        <el-form>
          <el-form-item label="生成数量">
            <el-input-number
              v-model="quantity"
              size="mini"
              :min="1"
            />
          </el-form-item>
        </el-form>
      </div>
      <span
        slot="footer"
        class="dialog-footer"
      >
        <el-button @click="handleCloseData">{{ '取消' }}</el-button>
        <el-button
          type="primary"
          @click="sureData"
        >{{ '确认' }}</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import * as api from '@/api/specialBusiness'
import topBar from '@/components/topBar'
import { getToken } from '@/utils/auth'
import * as goods from '@/api/giftGoods.js'

export default {
  name: 'Bzpz',
  components: {
    topBar
  },
  data() {
    return {
      creatData: false,
      quantity: 1,
      pkMemberEmpty: '',
      changeData: {
        placeDept: '',
        placeDeptVal: '',
        pkCountry: '',
        pkCountryVal: '',
        pkRegisterGradeVal: '',
        pkRegisterGrade: '',
        registerAchieve: '',
        orderSourceVal: '',
        orderSource: '',
        pkAwards: '',
        backAmount: '',
        point: '',
        settlementFlag: '',
        settlementFlagVal: '',
        autoFlag: '',
        autoFlagVal: '',
        productFlag: '',
        settlementAchieve: '',
        transferAchieve: '',
        productFlagVal: '',
        productCode: '',
        specs: [],
        quantity: 1,
        recName: '',
        recPhone: '',
        addressAll: [],
        recProvince: '',
        recCity: '',
        recCounty: '',
        recAddress: '',
        specsName: '',
        specsNameId: '',
        nameList: ''
      },
      upload: {
        // 是否显示弹出层（物流导入）
        open: false,
        // 弹出层标题（物流导入）
        title: '',
        // 是否禁用上传
        isUploading: false,
        // 是否更新已经存在的物流数据
        updateSupport: 0,
        // 设置上传的请求头部
        headers: { Authorization: 'Bearer ' + getToken() },
        // 上传的地址
        url:
          process.env.VUE_APP_BASE_API +
          '/member/manage/member-empty/import-template'
      },
      regionParams: {
        label: 'name',
        value: 'id',
        children: 'children',
        expandTrigger: 'hover'
      },
      select: {
        memberCode: '',
        memberName: '',
        parentCode: '',
        placeParentCode: '',
        pointStatus: ''
      },
      selectObj: {},
      queryParams: {
        pageNum: 1,
        pageSize: 50
      },
      total: 0,
      // 查询参数
      tableData: [],
      moren: 'emptyOrder',
      topList: [
        {
          name: '空单注册',
          path: 'emptyOrder'
        },
        {
          name: '生成列表',
          path: 'creatList'
        },
        {
          name: '注册列表',
          path: 'rigiestList'
        }
      ],
      placeDeptList: [],
      gradeList: [],
      awardList: [],
      countryList: [],
      yesNo: [],
      orderList: [],
      userPkCountry: '',
      areaData: [],
      selectRow: [],
      productList: [],
      pointList: [],
      oldTableData: [], // 重置用
      colSpanArr: [],
      rowIndexArr: [],
      changeIndex: -1,
      userPkCountryName: '',
      dialogVisible: false,
      dialogList: [], // 产品数组
      selectData: [], // 选中
      ggVisible: false,
      skuList: [], // 规格数组
      orderTypeList: []
    }
  },
  mounted() {
    this.userPkCountry = JSON.parse(localStorage.getItem('userInfo')).pkCountry
    this.getData()
  },
  methods: {
    // 获取下拉字典
    getData() {
      api
        .findAllArea({
          pkCountry: this.userPkCountry
        })
        .then((res) => {
          this.areaData = res.data
        })
      api.getPlacedeptList().then((res) => {
        this.placeDeptList = res.data
      })
      api.emptyType().then((res) => {
        this.orderTypeList = res.data
      })
      api
        .getgradeRanglist({
          pkCountry: this.userPkCountry
        })
        .then((res) => {
          this.gradeList = res.data
        })
      api
        .getAwardlist({
          pkCountry: this.userPkCountry
        })
        .then((res) => {
          this.awardList = res.data
        })
      api.userCountryList().then((res) => {
        this.countryList = res.data
        this.countryList.forEach((item) => {
          if (item.pkCountry == this.userPkCountry) {
            // this.tableData[index].placeDeptName = item.label
            this.userPkCountryName = item.name
          }
        })
      })
      api.getEYesNoList().then((res) => {
        this.yesNo = res.data
      })
      api.orderSource().then((res) => {
        this.orderList = res.data
      })
      api.pointStatus().then((res) => {
        this.pointList = res.data
      })
      // api
      //   .getProductAll({
      //     pkCountry: this.userPkCountry,
      //   })
      //   .then((res) => {
      //     this.productList = res.data
      //   })
    },
    delData(index, cndex) {
      // this.tableData[index].product
      this.tableData[index].product.splice(cndex, 1)
    },
    sureData() {
      this.download(
        '/member/manage/member-empty-code/create-code',
        { quantity: this.quantity },
        `空单注册${new Date().getTime()}.xlsx`
      ).then((res) => {
        this.creatData = false
      })
    },
    handleCloseData() {
      this.creatData = false
    },
    creatMember() {
      this.creatData = true
    },
    getProduct(index) {
      this.showIndex = index
      this.getProductList()
      this.dialogVisible = true
    },
    getProductList() {
      goods
        .getProductAll(Object.assign({ isPutOn: 0 }, this.queryParams, this.select))
        .then((res) => {
          // this.productList = res.data
          res.rows.forEach((item) => {
            item.quantity = 1
          })
          this.dialogList = res.rows
          this.total = res.total
        })
    },
    handleClose() {
      this.selectData = []
      this.dialogVisible = false
    },
    sureSku() {
      this.$set(this.dialogList[this.selIndex], 'selSkuList', this.selSkuList)
      this.$set(
        this.dialogList[this.selIndex],
        'selSkuNameList',
        this.selSkuNameList
      )

      this.ggVisible = false
    },
    sureProduct() {
      if (this.selectData.length == 0) {
        this.$message({
          message: '请选择产品',
          type: 'warning'
        })
        return false
      } else {
        const obj = {
          pkProduct: this.selectData.pkId,
          productCode: this.selectData.productCode,
          productName: this.selectData.productName,
          specsName: this.selectData.selSkuNameList,
          specsNameId: this.selectData.selSkuList,
          quantity: this.selectData.quantity
        }
        this.tableData[this.showIndex].productList.push(obj)

        this.handleClose()
        this.$forceUpdate()
      }
    },
    selSku(pkId, index) {
      this.selIndex = index
      goods
        .getProductSpecs({
          pkProduct: pkId
        })
        .then((res) => {
          const arr1 = []
          const arr2 = []
          res.data.forEach((item) => {
            item.pkProductSku = item.specsList[0].pkId
            arr1.push(item.specsList[0].pkId)
            arr2.push(item.specsList[0].specsName)
          })
          this.selSkuList = arr1.join(',')
          this.selSkuNameList = arr2.join(',')

          this.skuList = res.data
          this.ggVisible = true
        })
    },
    onSelectAll() {
      this.$refs.multipleTable.clearSelection()
    },
    selected(selection, row) {
      // 清除 所有勾选项
      this.$refs.multipleTable.clearSelection()
      if (selection.length == 0) return
      this.$refs.multipleTable.toggleRowSelection(row, true)
      this.selectData = row
    },
    handleCloseGg() {
      this.ggVisible = false
    },
    getCheckBox() {
      const arr1 = []
      const arr2 = []
      this.skuList.forEach((item) => {
        item.specsList.forEach((ctem) => {
          if (ctem.pkId == item.pkProductSku) {
            arr1.push(ctem.pkId)
            arr2.push(ctem.specsName)
          }
        })
      })
      this.selSkuList = arr1.join(',')
      this.selSkuNameList = arr2.join(',')
    },
    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      if (columnIndex >= 26) {
        for (let i = 0; i < this.colSpanArr.length; i++) {
          if (rowIndex == this.rowIndexArr[i]) {
            return {
              rowspan: this.colSpanArr[i],
              colspan: 1
            }
          } else {
            if (
              rowIndex > this.rowIndexArr[i] &&
              rowIndex < this.rowIndexArr[i + 1]
            ) {
              return {
                rowspan: 0,
                colspan: 0
              }
            }
          }
        }
      }
    },
    // 合并行数据处理
    getColSpanData(prop, datas) {
      this.rowIndexArr = []
      this.colSpanArr = []
      let colLength = 1
      datas.forEach((element, index) => {
        if (index == 0) {
          // rowIndex开始合并的位置为0,合并单元格数量默认为1
          this.rowIndexArr.push(0)
          colLength = 1
        } else {
          if (element[prop] == datas[index - 1][prop]) {
            // 当相邻两条数据相等时，rowspan+1,即colLength+1
            colLength += 1
            // 当最后一条数据与倒数第2条不等式，在colSpanArr中push(1)
            if (index == datas.length - 1) {
              this.colSpanArr.push(colLength)
            }
          } else {
            //  相邻两条不等时push index和合并的长度
            // this.colSpanArr.push(colLength)
            // this.rowIndexArr.push(index)
            // if (index == datas.length - 1) {
            //   this.colSpanArr.push(1)
            // }
            // colLength = 1
            colLength += 1
            // 当最后一条数据与倒数第2条不等式，在colSpanArr中push(1)
            if (index == datas.length - 1) {
              this.colSpanArr.push(colLength)
            }
          }
        }
      })
      this.rowIndexArr.push(datas.length)
    },
    upData(index) {
      this.changeIndex = index
    },
    setPlace(e, index) {
      this.placeDeptList.forEach((item) => {
        if (item.value == e) {
          if (index != undefined) {
            this.tableData[index].placeDeptVal = item.label
          } else {
            this.changeData.placeDeptVal = item.label
          }
        }
      })
    },
    setAuto(e, index) {
      this.yesNo.forEach((item) => {
        if (item.value == e) {
          if (index != undefined) {
            this.tableData[index].autoFlagVal = item.label
          } else {
            this.changeData.autoFlagVal = item.label
          }
        }
      })
    },
    setPkcountry(e, index) {
      this.countryList.forEach((item) => {
        if (item.pkCountry == e) {
          if (index != undefined) {
            this.tableData[index].pkCountryVal = item.name
          } else {
            this.changeData.pkCountryVal = item.name
          }
        }
      })
    },
    setType() {
      this.orderTypeList.forEach((item) => {
        if (item.value == e) {
          if (index != undefined) {
            this.tableData[index].orderTypeVal = item.label
          } else {
            this.changeData.orderTypeVal = item.label
          }
        }
      })
    },
    setGrade(e, index) {
      this.gradeList.forEach((item) => {
        if (item.value == e) {
          if (index != undefined) {
            this.tableData[index].pkRegisterGradeVal = item.label
          } else {
            this.changeData.pkRegisterGradeVal = item.label
          }
        }
      })
    },
    setOrder(e, index) {
      this.orderList.forEach((item) => {
        if (item.value == e) {
          if (index != undefined) {
            this.tableData[index].orderSourceVal = item.label
          } else {
            this.changeData.orderSourceVal = item.label
          }
        }
      })
    },
    setAward(e, index) {
      this.awardList.forEach((item) => {
        if (item.value == e) {
          if (index != undefined) {
            this.tableData[index].awardVal = item.label
          } else {
            this.changeData.awardVal = item.label
          }
        }
      })
    },
    setSettle(e, index) {
      this.yesNo.forEach((item) => {
        if (item.value == e) {
          if (index != undefined) {
            this.tableData[index].settlementFlagVal = item.label
          } else {
            this.changeData.settlementFlagVal = item.label
          }
        }
      })
    },
    setProductflag(e, index) {
      this.yesNo.forEach((item) => {
        if (item.value == e) {
          if (index != undefined) {
            this.tableData[index].productFlagVal = item.label
          } else {
            this.changeData.productFlagVal = item.label
          }
        }
      })
    },
    resetAll() {
      this.changeData = {
        placeDept: '',
        pkRegisterGrade: '',
        registerAchieve: '',
        orderSource: '',
        pkAwards: '',
        backAmount: '',
        point: '',
        settlementFlag: '',
        autoFlag: '',
        productFlag: '',
        settlementAchieve: '',
        transferAchieve: '',
        productCode: '',
        specs: [],
        quantity: 1,
        recName: '',
        recPhone: '',
        addressAll: [],
        recProvince: '',
        recCity: '',
        recCounty: '',
        recAddress: '',
        specsName: '',
        specsNameId: ''
      }
    },
    changeAllData() {
      this.tableData.forEach((item) => {
        item.autoFlag = ''
        item.autoFlagVal = ''
        if (this.changeData.placeDept != '') {
          item.placeDept = this.changeData.placeDept
          item.placeDeptVal = this.changeData.placeDeptVal
        }
        if (this.changeData.pkCountry) {
          item.pkCountry = this.changeData.pkCountry
          item.pkCountryVal = this.changeData.pkCountryVal
        }
        if (this.changeData.pkRegisterGrade != '') {
          item.pkRegisterGrade = this.changeData.pkRegisterGrade
          item.pkRegisterGradeVal = this.changeData.pkRegisterGradeVal
        }
        if (this.changeData.registerAchieve != '') {
          item.registerAchieve = this.changeData.registerAchieve
        }
        if (this.changeData.orderSource != '') {
          item.orderSource = this.changeData.orderSource
          item.orderSourceVal = this.changeData.orderSourceVal
        }
        if (this.changeData.pkAwards != '') {
          item.pkAwards = this.changeData.pkAwards
          item.awardVal = this.changeData.awardVal
        }
        if (this.changeData.backAmount != '') {
          item.backAmount = this.changeData.backAmount
        }
        if (this.changeData.settlementFlag != '') {
          item.settlementFlag = this.changeData.settlementFlag
          item.settlementFlagVal = this.changeData.settlementFlagVal
        }

        if (this.changeData.productFlag != '') {
          item.productFlag = this.changeData.productFlag
          item.productFlagVal = this.changeData.productFlagVal
        }
        if (this.changeData.settlementAchieve) {
          item.settlementAchieve = this.changeData.settlementAchieve
        }
        if (this.changeData.transferAchieve) {
          item.transferAchieve = this.changeData.transferAchieve
        }
        // if (this.changeData.productCode) {
        //   item.productList[0].productCode = this.changeData.productCode
        //   item.productList[0].pkProduct = this.changeData.pkProduct
        // }
        // if (this.changeData.quantity) {
        //   item.productList[0].quantity = this.changeData.quantity
        // }
        // if (this.changeData.specsName) {
        //   item.productList[0].specsName = this.changeData.specsName
        // }
        // if (this.changeData.specsNameId) {
        //   item.productList[0].specsNameId = this.changeData.specsNameId
        // }
        if (this.changeData.recName) {
          item.recName = this.changeData.recName
        }
        if (this.changeData.recPhone) {
          item.recPhone = this.changeData.recPhone
        }
        if (this.changeData.addressAll) {
          item.addressAll = this.changeData.addressAll
        }
        if (this.changeData.recProvince) {
          item.recProvince = this.changeData.recProvince
          item.recCity = this.changeData.recCity
          item.recCounty = this.changeData.recCounty
          item.nameList = this.changeData.nameList
        }
        if (this.changeData.recAddress) {
          item.recAddress = this.changeData.recAddress
        }
        if (this.changeData.autoFlag != '' || this.changeData.autoFlag == 0) {
          item.autoFlag = this.changeData.autoFlag
          item.autoFlagVal = this.changeData.autoFlagVal
          this.$forceUpdate()
        }
      })
    },
    handleSelectionChange(val) {
      this.selectRow = val
    },
    // 删除
    deleteTable() {
      const arr = this.selectRow.map((item) => {
        return item.pkId
      })
      api
        .createDelete({
          detailIdList: arr
        })
        .then((res) => {
          this.selectRow.forEach((item, index) => {
            this.tableData = this.tableData.filter((ctem) => {
              return ctem.pkId != item.pkId
            })
          })
          // this.tableData.forEach((item) => {
          //   this.selectRow.forEach((ctem) => {
          //     if (item.pkId == ctem.pkId) {
          //       this.tableData.splice(item.index, 1)
          //     }
          //   })
          // })
        })
    },
    /** 导入按钮操作 */
    handleImport() {
      this.upload.title = '导入'
      this.upload.open = true
    },
    // 文件上传中处理
    handleFileUploadProgress(event, file, fileList) {
      this.upload.isUploading = true
    },
    // 文件上传成功处理
    handleFileSuccess(response, file, fileList) {
      var fileName = response.fileName
      if (fileName != undefined && fileName != '') {
      }
      if (response.code == 200) {
        this.pkMemberEmpty = response.data.pkMemberEmpty
        this.upload.url =
          process.env.VUE_APP_BASE_API +
          '/member/manage/member-empty/import-template?pkMemberEmpty=' +
          this.pkMemberEmpty
        response.data.forEach((item, index) => {
          item.index = index + this.tableData.length
          // item.pkSettleCountry = this.userPkCountry
          // item.pkCountry = this.userPkCountry
          item.pkRegisterGrade = ''
          // item.registerAchieve = ''
          // item.orderSource = ''
          item.pkAwards = ''
          // item.backAmount = 0
          // item.point = '正常'
          // item.pointStatus = 0
          // item.settlementFlag = ''
          // item.productFlag = ''
          // item.settlementAchieve = ''
          // item.transferAchieve = ''
          item.productList = []
          item.recName = ''
          item.recPhone = ''
          item.recProvince = ''
          item.recAddress = ''
          item.remark = ''
          item.specs = []
        })
        this.tableData = this.tableData.concat(response.data)

        // 重置用
        this.oldTableData = JSON.parse(JSON.stringify(this.tableData))
        // this.getColSpanData('remark', this.tableData)
      }

      this.upload.open = false
      this.upload.isUploading = false
      this.$refs.upload.clearFiles()
      this.$alert(response.msg, '导入结果', {
        dangerouslyUseHTMLString: true
      })
      // this.getList();
    },
    // 上传文件数量超出后的动作
    handleExceed() {
      this.upload.isUploading = false
      this.msgInfo('仅可上传一个文件哦')
    },
    // 提交上传文件
    submitFileForm() {
      this.$refs.upload.submit()
    },
    // 下载模板
    importTemplate() {
      this.download(
        '/member/manage/member-empty/export-template',
        {},
        `空单注册${new Date().getTime()}.xlsx`
      )
    },
    changeProductAll(e) {
      this.productList.forEach((item) => {
        if (item.productCode == e) {
          this.changeData.pkProduct = item.pkId
        }
      })
      this.getSkuAll([e])
    },
    getSkuAll(arr) {
      api.getProductCodeSpecs({ productCodes: arr }).then((res) => {
        // this.changeData.specs = res.data[0].specsTypeData
        this.$set(this.changeData, 'specs', res.data[0].specsTypeData)
        // this.tableData.forEach((item) => {
        //   arr.forEach((ctem) => {
        //     res.data.forEach((stem) => {
        //       if (
        //         item.productList[0].productCode == ctem &&
        //         ctem == stem.productCode
        //       ) {
        //         // item.specs = stem.specsTypeData
        //         this.$set(item, 'specs', stem.specsTypeData)
        //       }
        //     })
        //   })
        // })
        this.$forceUpdate()
      })
    },
    // 选择产品
    changeProduct(e, index) {
      this.productList.forEach((item) => {
        if (item.productCode == e) {
          this.tableData[index].productList[0].pkProduct = item.pkId
          this.tableData[index].productList[0].productName = item.productName
        }
      })
      this.getSku([e])
    },
    // 获取规格
    getSku(arr) {
      api.getProductCodeSpecs({ productCodes: arr }).then((res) => {
        this.tableData.forEach((item) => {
          arr.forEach((ctem) => {
            res.data.forEach((stem) => {
              if (
                item.productList[0].productCode == ctem &&
                ctem == stem.productCode
              ) {
                // item.specs = stem.specsTypeData
                this.$set(item, 'specs', stem.specsTypeData)
              }
            })
          })
        })
        console.log(
          '%c [ this.tableData ]-1220',
          'font-size:13px; background:#52ba05; color:#96fe49;',
          this.tableData
        )
        this.$forceUpdate()
      })
    },
    sureSpecsAll() {
      // this.changeData
      this.changeData.specs.forEach((item) => {
        item.specsList.forEach((ctem) => {
          if (item.radio == ctem.specsId) {
            item.radioVal = ctem.value
          }
        })
      })
      this.changeData.specsNameArr = []
      this.changeData.specificationsArr = []
      this.changeData.specs.forEach((item) => {
        this.changeData.specsNameArr.push(item.radioVal)
        this.changeData.specificationsArr.push(item.radio)
      })
      this.changeData.specsNameId = this.changeData.specificationsArr
        .sort()
        .join(',')
      this.changeData.specsName = this.changeData.specsNameArr.join(',')
      document.body.click()
    },
    // 选择规格
    sureSpecs(index) {
      this.tableData[index].specs.forEach((item) => {
        item.specsList.forEach((ctem) => {
          if (item.radio == ctem.specsId) {
            item.radioVal = ctem.value
          }
        })
      })
      this.tableData[index].specsNameArr = []
      this.tableData[index].specificationsArr = []
      this.tableData[index].specs.forEach((item) => {
        this.tableData[index].specsNameArr.push(item.radioVal)
        this.tableData[index].specificationsArr.push(item.radio)
      })
      this.tableData[index].productList[0].specsNameId = this.tableData[
        index
      ].specificationsArr
        .sort()
        .join(',')
      this.tableData[index].productList[0].specsName =
        this.tableData[index].specsNameArr.join(',')
      // this.$refs[`popover-${index}`].doClose()
      // 模拟点击页面其他地方
      document.body.click()
    },
    getDataList() {
      const arr = []
      this.tableData.forEach((item) => {
        if (
          (this.select.memberCode == '' ||
            this.select.memberCode == item.memberCode) &&
          (this.select.memberName == '' ||
            this.select.memberName == item.memberName) &&
          (this.select.parentCode == '' ||
            this.select.parentCode == item.parentCode) &&
          (this.select.placeParentCode == '' ||
            this.select.placeParentCode == item.placeParentCode) &&
          (this.select.pointStatus == '' ||
            this.select.pointStatus == item.pointStatus)
        ) {
          arr.push(item)
        }
      })
      this.tableData = arr
    },
    reset() {
      // oldTableData
      this.select = {
        memberCode: '',
        memberName: '',
        parentCode: '',
        placeParentCode: '',
        pointStatus: ''
      }
      this.tableData = this.oldTableData
    },
    toCreated() {
      api.createData(this.tableData).then((res) => {
        if (res.code == 500) {
          res.data.forEach((item) => {
            item.addressAll = [
              item.recProvince + '',
              item.recCity + '',
              item.recCounty + ''
            ]
            if (item.pointStatus == 0) {
              item.point = '正常'
            } else {
              item.point = '异常'
            }
          })
          this.tableData = res.data
        } else {
          this.$message({
            message: res.msg,
            type: 'success'
          })
          this.$router.push({
            path: 'creatList'
          })
        }
      })
    },
    getDizhi(e, index) {
      this.tableData[index].recProvince = e[0]
      this.tableData[index].recCity = e[1] || ''
      this.tableData[index].recCounty = e[2] || ''

      const arr = this.flatten(this.areaData)
      let nameList = ''
      arr.forEach((item) => {
        e.forEach((ctem) => {
          if (ctem == item.id) {
            nameList += item.name
          }
        })
      })
      this.tableData[index].nameList = nameList
    },
    flatten(arr) {
      return arr.reduce((result, item) => {
        return result.concat(
          item,
          Array.isArray(item.children) ? this.flatten(item.children) : []
        )
      }, [])
    },
    getDizhiAll(e) {
      this.changeData.recProvince = e[0]
      this.changeData.recCity = e[1] || ''
      this.changeData.recCounty = e[2] || ''
      const arr = this.flatten(this.areaData)
      let nameList = ''
      arr.forEach((item) => {
        e.forEach((ctem) => {
          if (ctem == item.id) {
            nameList += item.name
          }
        })
      })
      this.changeData.nameList = nameList
    },
    // 添加
    openDig() {
      api
        .emptyAdd({
          pkMemberEmpty: this.pkMemberEmpty
        })
        .then((res) => {
          this.pkMemberEmpty = res.data.pkMemberEmpty
          this.upload.url =
            process.env.VUE_APP_BASE_API +
            '/member/manage/member-empty/import-template?pkMemberEmpty=' +
            this.pkMemberEmpty
          const obj = Object.assign({}, res.data, {
            index: this.tableData.length,
            // memberCode: '',
            memberName: '',
            phone: '',
            parentCode: '',
            placeParentCode: '',
            placeDept: '',
            // pkSettleCountry: this.userPkCountry,
            // pkSettleCountryName: this.userPkCountryName,
            pkCountry: this.userPkCountry,
            pkCountryVal: this.userPkCountryName,
            pkRegisterGrade: '',
            // registerAchieve: '',
            // orderSource: '',
            pkAwards: '',
            // point: '正常',
            // pointStatus: 0,
            // settlementFlag: '',
            // productFlag: '',
            // settlementAchieve: '',
            // transferAchieve: '',
            // productList: [
            //   {
            //     pkProduct: '',
            //     productCode: '',
            //     specsName: '',
            //     quantity: 1,
            //     specsNameId: '',
            //   },
            // ],
            productList: [],
            recName: '',
            recPhone: '',
            recProvince: '',
            recAddress: '',
            // autoFlag: '',
            // contentAbstract: '',
            remark: '',
            specs: []
          })
          this.tableData.push(obj)
          this.getColSpanData('remark', this.tableData)
        })
    },
    /** 导出按钮操作 */
    handleExport() {
      this.$confirm('是否确认导出所有数据项?', '警告', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then((_) => {
        this.download(
          '/system/manage/ho-enterprise-mission/export',
          Object.assign({}, this.queryParams, this.select),
          `${'企业使命'}${new Date().getTime()}.xlsx`
        )
      })
    },
    tableRowClassName({ row, rowIndex }) {
      if (rowIndex % 2 == 1) {
        return 'warning-row'
      } else if (rowIndex % 2 == 0) {
        return 'success-row'
      }
      return ''
    }
  }
}
</script>
<style scoped lang="scss">
::v-deep .el-table .warning-row {
  background: #f9f9f9;
}

::v-deep .el-table .success-row {
  background: #ffffff;
}
::v-deep .el-table thead {
  color: #000000;
}
::v-deep .el-select {
  width: 100%;
}
.uploadIcon ::v-deep .el-upload--picture-card {
  display: none !important; /* 上传按钮隐藏 */
}
.page {
  padding: 3px 20px 20px 20px !important;
  background: #f9f9f9;
  font-size: 14px;
  .main {
    background: #ffffff;
    border-radius: 8px;
    box-shadow: 0px 2px 20px 0px rgba(238, 238, 238, 0.5);
    .form_all {
      padding: 0px 20px 0 20px;
      // margin-bottom: 20px;
      background: #fff;
      border-radius: 8px;
    }
    .maintop {
      display: flex;
      padding: 0px 0px;
      justify-content: space-between;
      align-items: center;

      background: #f8f8f8;
      .mainbtn {
        .thebtn1 {
          background: #3181e5;
          color: #ffffff;
        }
        .thebtn2 {
          background: #ffad41;
          color: #ffffff;
        }
      }
      .maintitle {
        font-size: 10px;
        font-family: MicrosoftYaHei;
        color: #999999;
      }
    }
  }
  .tem {
    display: flex;
    align-items: center;
    justify-content: center;
    img {
      width: 28px;
      height: 20px;
      margin-right: 3px;
    }
  }
  .isRed {
    color: #ed1d25;
  }
  .isGreen {
    color: #1ab62b;
  }
  .bgImg {
    width: 48px;
    height: 48px;
  }
}
.openClose {
  text-align: right;
  margin-right: 10px;
  color: #3181e5;
}
.dizhi {
  ::v-deep .el-cascader {
    width: 100%;
  }
}
::v-deep .el-date-editor.el-input,
.el-date-editor.el-input__inner {
  width: auto;
}
.form_all ::v-deep .el-input__suffix {
  top: 0px !important;
}
.form_all ::v-deep .el-select .el-input .el-select__caret.is-reverse {
  transform: translateY(0px) !important;
}
::v-deep .el-input__suffix {
  top: -3px;
}
::v-deep .el-select .el-input__suffix {
  top: 5px;
}
::v-deep .el-select .el-input .el-select__caret.is-reverse {
  transform: translateY(-8px);
}
::v-deep .el-cascader .el-input__suffix {
  top: 0px;
}
::v-deep .el-input__clear {
  margin-bottom: 20px !important;
}
.guig {
  font-weight: 400;
}
.footer {
  height: 68px;
  background: #ffffff;
  box-shadow: 0px -3px 20px 0px rgba(204, 204, 204, 0.5);
  // margin: 0 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  .thebtn1 {
    background: #3181e5;
    color: #ffffff;
    padding: 9px 45px;
  }
  .thebtn2 {
    background: #cccccc;
    color: #ffffff;
    padding: 9px 45px;
  }
}
.cpHeight {
  height: 50vh;
  overflow-y: auto;
}
.blueCor {
  color: #589ff8;
  cursor: pointer;
}
::v-deep .el-dialog__body .el-input__icon {
  line-height: 33px;
}
::v-deep .el-dialog__body .el-button {
  margin-top: 0;
}
.disFlex {
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>
