<template>
  <div class="page">
    <topBar
      v-if="topList.length > 0"
      :top-list="topList"
      :moren="moren"
    />
    <div v-if="topList[3].changed == true">
      <div class="thetopbox">
        <el-form ref="queryParams" :model="queryParams" label-width="100px">
          <el-row>
            <el-col :span="4">
              <el-form-item :label="'会员编号'" prop="memberCode">
                <el-input v-model="queryParams.memberCode" clearable />
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-form-item :label="'会员姓名'" prop="memberName">
                <el-input v-model="queryParams.memberName" clearable />
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-form-item :label="'真实奖衔'">
                <el-select
                  v-model="queryParams.pkAwards"
                  clearable
                  placeholder=""
                >
                  <el-option
                    v-for="item in awardsList"
                    :key="item.pkId"
                    :label="item.awardsName"
                    :value="item.pkId"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-form-item :label="'隶属体系'">
                <el-select
                  v-model="queryParams.pkVertex"
                  clearable
                  placeholder=""
                >
                  <el-option
                    v-for="item in verList"
                    :key="item.value"
                    :label="item.vertexName"
                    :value="item.pkId"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-form-item :label="'隶属团队'">
                <el-select
                  v-model="queryParams.pkTeamCode"
                  clearable
                  placeholder=""
                >
                  <el-option
                    v-for="item in memberList"
                    :key="item.value"
                    :label="item.teamName"
                    :value="item.pkId"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-form-item :label="'注水状态'">
                <el-select
                  v-model="queryParams.waterStatus"
                  clearable
                  placeholder=""
                >
                  <el-option
                    v-for="item in waterStatusList"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-form-item :label="'注水方式'">
                <el-select
                  v-model="queryParams.infusingWaterType"
                  clearable
                  placeholder=""
                >
                  <el-option
                    v-for="item in waterWayList"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item :label="'注水日期'" prop="pkSettleCountry">
                <el-date-picker
                  v-model="zsDate"
                  value-format="yyyy-MM-dd"
                  type="daterange"
                  :range-separator="'至'"
                  :start-placeholder="'开始日期'"
                  :end-placeholder="'结束日期'"
                  @change="changeZsDate"
                />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item :label="'结束日期'" prop="pkSettleCountry">
                <el-date-picker
                  v-model="jsDate"
                  value-format="yyyy-MM-dd"
                  type="daterange"
                  :range-separator="'至'"
                  :start-placeholder="'开始日期'"
                  :end-placeholder="'结束日期'"
                  @change="changeJsDate"
                />
              </el-form-item>
            </el-col>

            <el-col :span="4">
              <div class="searchbox" style="margin-left: 30px">
                <el-button class="searchbtn" @click="getSearch()">
                  {{ '搜索' }}</el-button>
                <el-button @click="reChongzhi"> {{ '重置' }}</el-button>
              </div>
            </el-col>
          </el-row>
        </el-form>
      </div>

      <div class="main">
        <div class="maintop">
          <div class="mainbtn">
            <el-button
              v-hasButtons="['WaterPvUpdate']"
              size="small"
              class="thebtn1"
              @click="updateCode()"
            >{{ '注水业绩' }}</el-button>
            <el-button
              v-hasButtons="['WaterPvExport']"
              size="small"
              class="thebtn2"
              @click="handleExport"
            >
              {{ '导出' }}</el-button>
          </div>
          <div>
            <el-dropdown :hide-on-click="false">
              <span class="el-dropdown-link kuang" style="margin-right: 10px">
                {{ '筛选字段'
                }}<i class="el-icon-arrow-down el-icon--right" />
              </span>
              <el-dropdown-menu
                slot="dropdown"
                style="overflow: auto; height: 70%"
              >
                <el-dropdown-item v-for="item in menuList" :key="item.id">
                  <el-checkbox
                    v-model="item.checked"
                    @change="getMenu($event, item.id)"
                  >{{ item.text }}</el-checkbox></el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </div>
        </div>
        <div class="maintable">
          <el-table
            v-loading="loading"
            :data="tableData"
            style="width: 100%"
            :header-cell-style="{ background: '#EEEEEE' }"
            height="620px"
          >
            <el-table-column
              align="center"
              prop="memberCode"
              min-width="120px"
              :label="'会员编号'"
            />

            <el-table-column
              align="center"
              prop="memberName"
              :label="'会员姓名'"
            />
            <el-table-column
              align="center"
              prop="awardsVal"
              :label="'真实奖衔'"
            />
            <el-table-column
              align="center"
              prop="vertexName"
              :label="'隶属体系'"
              min-width="150px"
            />
            <el-table-column
              align="center"
              prop="teamName"
              :label="'隶属团队'"
            />
            <el-table-column
              v-for="(item, index) in headerList"
              :key="index"
              align="center"
              :prop="item.prop"
              :label="item.text"
              min-width="180px"
            />
            <el-table-column
              align="center"
              prop="infusingWaterTypeVal"
              :label="'注水方式'"
            />
            <el-table-column
              align="center"
              prop="settleDate"
              :label="'注水日期'"
              min-width="150px"
            />
            <el-table-column
              align="center"
              prop="dueDate"
              min-width="150px"
              :label="'结束日期'"
            />
            <el-table-column
              align="center"
              prop="waterStatusVal"
              :label="'注水状态'"
            />
          </el-table>
        </div>
      </div>
      <pagination
        v-show="total > 0"
        :total="total"
        :page.sync="queryParams.pageNum"
        :limit.sync="queryParams.pageSize"
        @pagination="getSearch"
      />
      <el-dialog
        title="注水业绩"
        :visible.sync="updateShow"
        width="80%"
        :close-on-click-modal="false"
        center
        class="updateClass"
      >
        <el-form ref="form" :model="form" label-width="80px">
          <el-form-item :label="'操作类型'">
            <el-select
              v-model="form.czlx"
              clearable
              :placeholder="'请选择'"
            >
              <el-option
                v-for="item in cztypeList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
          <el-row style="margin-top: 10px">
            <el-col :span="6">
              <el-form-item :label="'会员编号'">
                <el-input
                  v-model="form.memberCode"
                  clearable
                  style="width: 200px"
                  @blur="checkName"
                />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item :label="'会员姓名'">
                <el-input
                  v-model="form.memberName"
                  clearable
                  style="width: 200px"
                  disabled
                />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-button
                style="background-color: #c8161d; color: #fff"
                @click="getDataList"
              >
                {{ '搜索' }}</el-button>
              <el-button @click="reset"> {{ '重置' }}</el-button>
            </el-col>
          </el-row>

          <template v-if="form.czlx == 2">
            <div class="mainbtn">
              <el-button
                size="small"
                class="thebtn1"
                style="background: #ff6723"
                @click="handleImport"
              >
                {{ '导入' }}</el-button>
              <el-button
                size="small"
                class="thebtn2"
                style="background: #009b58"
                @click="importTemplate"
              >
                {{ '下载模板' }}</el-button>
            </div>
          </template>

          <div class="tableBox" style="padding: 0">
            <el-form-item :label="'业务类型'">
              <el-checkbox-group v-model="form.waterTypeList" :min="1">
                <el-checkbox
                  v-for="item in waterTypeList"
                  :key="item.value"
                  :label="item.value"
                  @change="changeAccountType"
                >{{ item.label }}</el-checkbox>
              </el-checkbox-group>
            </el-form-item>
            <el-form-item :label="'注水方式'">
              <el-radio-group v-model="form.infusingWaterType">
                <el-radio
                  v-for="(item, index) in waterWayList"
                  :key="index"
                  :label="item.value"
                >{{ item.label }}</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-table
              :data="waterPvList"
              style="width: 100%"
              :header-cell-style="{ background: '#EEEEEE' }"
            >
              <el-table-column
                min-width="120px"
                align="center"
                prop="memberCode"
                :label="'会员编号'"
              />
              <!-- CN30720201 -->
              <el-table-column
                min-width="100px"
                align="center"
                prop="memberName"
                :label="'会员姓名'"
              />
              <el-table-column
                min-width="180px"
                align="center"
                prop="settleDate"
                :label="'注水日期'"
              >
                <template slot-scope="scope">
                  <el-date-picker
                    v-model="scope.row.settleDate"
                    type="date"
                    :placeholder="'请选择'"
                    value-format="yyyy-MM-dd"
                    style="width: 160px"
                    @change="changeSettleData(scope.row)"
                  />
                </template>
              </el-table-column>
              <el-table-column
                min-width="180px"
                align="center"
                prop="dueDate"
                :label="'到期日期'"
              >
                <template slot-scope="scope">
                  <el-date-picker
                    v-model="scope.row.dueDate"
                    type="date"
                    :placeholder="'请选择'"
                    value-format="yyyy-MM-dd"
                    style="width: 160px"
                  />
                </template>
              </el-table-column>

              <el-table-column
                v-for="item in tableTitleList"
                :key="item.value"
                :label="item.label"
                align="center"
                :prop="item.field"
                min-width="180px"
              >
                <template slot-scope="scope">
                  <el-input v-model="scope.row[`${item.field}`]" clearable />
                </template>
              </el-table-column>

              <el-table-column
                align="center"
                prop="pkAccountKeyVal"
                :label="'扣款币种'"
              />
              <el-table-column
                min-width="160px"
                align="center"
                prop="cost"
                :label="'单笔扣款金额' + `(${isOther()})`"
              />

              <el-table-column
                align="center"
                prop="remarks"
                :label="'合计扣款金额' + `(${isOther()})`"
                min-width="160px"
              />
            </el-table>
          </div>
        </el-form>
        <div class="footer">
          <div style="margin: 0 auto">
            <!-- <el-button
              v-for="(item, index) in processTypeList"
              :key="index"
              :class="`thebtn${item.value}`"
              @click="saveDate(item.value)"
              >{{ item.label }}</el-button
            > -->
            <el-button class="thebtn0" @click="saveDate(0)">
              {{ '取消' }}</el-button>
            <!-- <el-button
              v-hasButtons="['WaterPvExemptSign']"
              class="thebtn1"
              @click="saveDate(1)"
            >{{ '免签' }}</el-button>
            <el-button
              v-hasButtons="['WaterPvExemptPay']"
              class="thebtn2"
              @click="saveDate(2)"
            >{{ '免付' }}</el-button> -->
            <!-- 走免的权限 -->
            <el-button
              v-hasButtons="['WaterPvExemptAll']"
              class="thebtn3"
              @click="saveDate(3)"
            >确认</el-button>
            <!-- <el-button
              v-hasButtons="['WaterPvConfirm']"
              class="thebtn4"
              @click="saveDate(4)"
            >
              {{ '确认' }}</el-button> -->
          </div>
        </div>
      </el-dialog>
      <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>
      <el-dialog
        :title="'会员信息错误'"
        :close-on-click-modal="false"
        :visible.sync="errorShow"
        width="600px"
        append-to-body
      >
        <div>
          <el-table
            :data="errorData"
            height="400px"
            style="width: 100%"
            :header-cell-style="{ background: '#EEEEEE' }"
          >
            <el-table-column
              align="center"
              prop="memberCode"
              :label="'会员编号'"
            />
            <el-table-column
              align="center"
              prop="errorMsg"
              :label="'报错信息'"
            />
          </el-table>
        </div>
        <div class="footer" style="text-align: center">
          <div style="margin: 0 auto">
            <el-button class="thebtn" @click="errorShow = false">
              {{ '取消' }}</el-button>
            <el-button type="primary" class="thebtn" @click="errorShow = false">
              {{ '确认' }}</el-button>
          </div>
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import topBar from '@/components/topBar'
import * as spe from '@/api/specialBusiness'
import { getPubEnumsProcessTyepe, getHistoryAchieve } from '@/api/business.js'
import { getToken } from '@/utils/auth'
import { getMemberName } from '@/api/financial'
import { getAwardsListChiose } from '@/api/level'
import * as api from '@/api/settle.js'
import { getRouters } from '@/api/settle.js'
import { isOther } from '@/utils/numberToCurrency'
export default {
  name: 'WaterPv',
  components: { topBar },
  data() {
    return {
      moren: 'waterPv',
      topList: [
        {
          name: '空单注册',
          path: 'emptyOrder',
          changed: false
        },
        {
          name: '修改直推',
          path: 'modifyDirectpush',
          changed: false
        },
        {
          name: '修改安置',
          path: 'modifyPlacement',
          changed: false
        },
        {
          name: '注水业绩',
          path: 'waterPv',
          changed: false
        },
        {
          name: '修改编号',
          path: 'modifyCode',
          changed: false
        },
        {
          name: '真实奖衔控制',
          path: 'awardControl',
          changed: false
        },
        {
          name: '修改结算国家',
          path: 'modifySettleCountry',
          changed: false
        },
        {
          name: '政策币业务',
          path: 'policyMoney',
          changed: false
        },
        {
          name: '分红配置',
          path: 'bonusConfig',
          changed: false
        }
      ],
      queryParams: {
        pageNum: 1,
        pageSize: 50,
        memberCode: '',
        memberName: '',
        startDate: '',
        endtDate: '',
        pkAwards: '',
        pkTeamCode: '',
        pkVertex: ''
      },
      tableTitleList: [],
      tableData: [],
      loading: false,
      total: 0,
      updateShow: false,
      upload: {
        // 是否显示弹出层（物流导入）
        open: false,
        // 弹出层标题（物流导入）
        title: '',
        // 是否禁用上传
        isUploading: false,
        // 是否更新已经存在的物流数据
        updateSupport: 0,
        // 设置上传的请求头部
        headers: { Authorization: 'Bearer ' + getToken() },
        // 上传的地址
        url:
          process.env.VUE_APP_BASE_API +
          '/member/manager/member-achieve-log/importData'
      },
      processTypeList: [],
      zsDate: '',
      jsDate: '',
      form: {
        czlx: 2,
        waterTypeList: [], // 选中注水类型
        memberCode: '',
        memberName: '',
        infusingWaterType: '' // 注水方式
      },

      cztypeList: [],
      waterTypeList: [], // 注水类型
      waterWayList: [], // 注水方式
      waterStatusList: [], // 注水状态
      waterPvList: [],
      awardsList: [],
      verList: [],
      memberList: [],
      menuList: [
        {
          id: 0,
          text: '全选',
          checked: true
        },
        // {
        //   id: 21,
        //   text: `${'变更后左区真实业绩'}(${isOther()})`,
        //   checked: true,
        //   prop: 'asumRealModifyPv'
        // },
        // {
        //   id: 22,
        //   text: `${'变更后右区真实业绩'}(${isOther()})`,
        //   checked: true,
        //   prop: 'bsumRealModifyPv'
        // },
        {
          id: 23,
          text: `${'变更后左区业绩'}(${isOther()})`,
          checked: true,
          prop: 'afirstModifyPv'
        },
        {
          id: 24,
          text: `${'变更后右区业绩'}(${isOther()})`,
          checked: true,
          prop: 'bfirstModifyPv'
        },
        {
          id: 25,
          text: `${'变更后左区结余'}`,
          checked: true,
          prop: 'repAFirstModifyBalance'
        },
        {
          id: 26,
          text: `${'变更后右区结余'}`,
          checked: true,
          prop: 'repBFirstModifyBalance'
        }
        // {
        //   id: 27,
        //   text: `${'变更后左区复购业绩'}(${isOther()})`,
        //   checked: true,
        //   prop: 'repAModifySumPv'
        // },
        // {
        //   id: 28,
        //   text: `${'变更后右区复购业绩'}(${isOther()})`,
        //   checked: true,
        //   prop: 'repBModifySumPv'
        // },
        // {
        //   id: 29,
        //   text: `${'变更后左区复购结余'}`,
        //   checked: false,
        //   prop: 'repAModifyBalance'
        // },
        // {
        //   id: 30,
        //   text: `${'变更后右区复购结余'}`,
        //   checked: false,
        //   prop: 'repBModifyBalance'
        // }
        // {
        //   id: 31,
        //   text: `${'变更前左区真实业绩'}(${isOther()})`,
        //   checked: false,
        //   prop: 'asumRealPv'
        // },
        // {
        //   id: 32,
        //   text: `${'变更前右区真实业绩'}(${isOther()})`,
        //   checked: false,
        //   prop: 'bsumRealPv'
        // },
        // {
        //   id: 33,
        //   text: `${'变更前左区业绩'}(${isOther()})`,
        //   checked: false,
        //   prop: 'asumPv'
        // },
        // {
        //   id: 34,
        //   text: `${'变更前右区业绩'}(${isOther()})`,
        //   checked: false,
        //   prop: 'bsumPv'
        // },
        // {
        //   id: 35,
        //   text: `${'变更前左区结余'}`,
        //   checked: false,
        //   prop: 'abalance'
        // },
        // {
        //   id: 36,
        //   text: `${'变更前右区结余'}`,
        //   checked: false,
        //   prop: 'bbalance'
        // }
        // {
        //   id: 37,
        //   text: `${'变更前左区复购业绩'}(${isOther()})`,
        //   checked: false,
        //   prop: 'repASumPv'
        // },
        // {
        //   id: 38,
        //   text: `${'变更前右区复购业绩'}(${isOther()})`,
        //   checked: false,
        //   prop: 'repBSumPv'
        // },
        // {
        //   id: 39,
        //   text: `${'变更前左区复购结余'}`,
        //   checked: false,
        //   prop: 'repABalance'
        // },
        // {
        //   id: 40,
        //   text: `${'变更前右区复购结余'}`,
        //   checked: false,
        //   prop: 'repBBalance'
        // }
      ], // 表头筛选
      headerList: [],
      errorData: [],
      errorShow: false
    }
  },
  created() {
    this.getSearch()
    this.getOther()
    this.getPubEnumsProcessTyepe()
    this.getUserRoute()
    this.getMenu()
  },
  methods: {
    isOther,
    changeSettleData(row) {
      if (this.form.infusingWaterType) {
        if (this.form.infusingWaterType == 3) {
          getHistoryAchieve({
            pkMember: row.pkMember,
            settleDate: row.settleDate
          }).then((res) => {
            if (res.data) {
              this.waterPvList.forEach((ele, index) => {
                if (ele.pkMember == res.data.pkMember) {
                  const tedata = Object.assign({}, ele, res.data)
                  this.$set(this.waterPvList, index, tedata)
                }
              })
            }
          })
        }
      } else {
        this.$message({
          message: '请先选择注水方式',
          type: 'warning'
        })
        this.waterPvList.forEach((ele, index) => {
          if ((row.pkId = ele.pkId)) {
            this.$set(this.waterPvList[index], 'settleDate', '')
          }
        })
        return
      }
    },
    handleExport() {
      this.$confirm('是否确认导出所有数据项?', '警告', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then((_) => {
        this.download(
          '/member/manager/member-achieve-log/export',
          { ...this.queryParams },
          `${'注水业绩'}${new Date().getTime()}.xlsx`
        )
      })
    },
    changeJsDate(val) {
      this.queryParams.staDueDate = val ? val[0] : ''
      this.queryParams.endDueDate = val ? val[1] : ''
    },
    changeZsDate(val) {
      this.queryParams.startDate = val ? val[0] : ''
      this.queryParams.endtDate = val ? val[1] : ''
    },
    getUserRoute() {
      getRouters().then((res) => {
        res.data.forEach((item) => {
          this.topList.forEach((items) => {
            if (item.path == items.url) {
              items.changed = true
            }
          })
        })
      })
    },
    getMenu(e, id) {
      if (e && id == 0) {
        this.menuList.forEach((item) => {
          this.$set(item, 'checked', true)
        })
        const theList1 = []
        this.menuList.forEach((ele) => {
          if (ele.checked && ele.prop) {
            theList1.push(ele)
          }
        })
        this.headerList = theList1
      } else if (!e && id == 0) {
        this.menuList.forEach((item) => {
          this.$set(item, 'checked', false)
        })
        const theList2 = []
        this.menuList.forEach((ele) => {
          if (ele.checked) {
            theList2.push(ele)
          }
        })
        this.headerList = theList2
      } else {
        const theList = []
        this.menuList.forEach((ele) => {
          if (ele.id != 0 && ele.checked) {
            theList.push(ele)
          }
        })
        this.headerList = theList
      }
    },
    // 下载模板
    importTemplate() {
      this.download(
        '/member/manager/member-achieve-log/download',
        {},
        `${'模板'}${new Date().getTime()}.xlsx`
      )
    },
    getDataList() {
      // 根据选中的会员查询会员业绩
      spe
        .getAchieveSearchList({
          memberCode: this.form.memberCode
        })
        .then((res) => {
          this.waterPvList = res.data
        })
    },
    getOther() {
      getAwardsListChiose().then((res) => {
        this.awardsList = res.rows
      })
      // 获取隶属体系
      api.vertexList().then((res) => {
        this.verList = res.data
      })
      // 获取隶属团队
      api.memberTeam().then((res) => {
        this.memberList = res.rows
      })
      spe.getEmusBatchType().then((res) => {
        this.cztypeList = res.data
      })
      spe.getMemberAchieve().then((res) => {
        this.waterTypeList = res.data
        this.waterTypeList.forEach((ele) => {
          {
            this.form.waterTypeList.push(ele.value)
          }
        })
        this.changeAccountType()
      })
      spe.getMemberWaterType().then((res) => {
        this.waterWayList = res.data
      })
      spe.getWaterStatus().then((res) => {
        this.waterStatusList = res.data
      })
    },
    // 根据会员编号查询会员姓名
    checkName() {
      getMemberName({ memberCode: this.form.memberCode }).then((res) => {
        this.form.memberName = res.memberName
      })
    },
    changeAccountType() {
      var titles = []
      if (this.form.waterTypeList.length > 0) {
        this.form.waterTypeList.forEach((ele) => {
          this.waterTypeList.forEach((item) => {
            if (ele == item.value) {
              titles.push({
                value: item.value,
                label: item.label,
                field: item.field
              })
              this.tableTitleList = titles
            }
          })
        })
      } else {
        this.tableTitleList = []
      }

      this.tableTitleList = titles

      this.$forceUpdate()
    },
    saveDate(index) {
      if (index == 0) {
        this.updateShow = false
        // this.$router.go(-1);
      } else if (index == 2 || index == 4) {
        // 免付和确认走签呈

        spe
          .saveInfusingWater({
            infusingWaterType: this.form.infusingWaterType,
            cmalvList: this.waterPvList,
            processType: index
          })
          .then((res) => {
            if (res.code == 200) {
              this.$router.push({
                path: 'waterZxqc',
                query: {
                  data: JSON.stringify(res.data),
                  index: index,
                  businessType: 123
                }
              })
            } else if (res.code == 504 && res.data) {
              this.errorShow = true
              this.errorData = res.data
            }
          })
      } else {
        const unSelectedField = this.waterTypeList.filter((item) =>
          !this.form.waterTypeList.includes(item.value)
        ).map(item => item.field)
        const waterPvList = this.waterPvList.map(item => {
          const newItem = { ...item }
          unSelectedField.forEach(field => {
            delete newItem[field]
          })
          return newItem
        })

        spe
          .saveInfusingWater({
            infusingWaterType: this.form.infusingWaterType,
            cmalvList: waterPvList,
            processType: index
          })
          .then((res) => {
            if (res.code == 200) {
              this.$message({
                message: res.msg,
                type: 'success'
              })
              this.updateShow = false
              this.getSearch()
            } else if (res.code == 504 && res.data) {
              this.errorShow = true
              this.errorData = res.data
            }
          })
      }
    },
    reset() {
      this.form.memberCode = ''
      this.form.memberName = ''
      this.getDataList()
    },
    getPubEnumsProcessTyepe() {
      getPubEnumsProcessTyepe().then((res) => {
        this.processTypeList = res.data
      })
    },

    handleDelete(row, index, rows) {
      this.$confirm('是否删除').then((_) => {
        rows.splice(index, 1)
      })
    },
    getSearch() {
      this.loading = true
      spe.getMmeberAchieveList(this.queryParams).then((res) => {
        this.loading = false
        this.tableData = res.rows
        this.total = res.total
      })
    },
    reChongzhi() {
      this.queryParams = {
        pageNum: 1,
        pageSize: 50,
        memberCode: '',
        memberName: '',
        startDate: '',
        endtDate: ''
      }
      this.zsDate = ''
      this.jsDate = ''
      this.getSearch()
    },
    updateCode() {
      // if (this.idList.length > 0) {
      //   spe.getselectedCountry({ pkMemberList: this.idList }).then((res) => {
      //     this.waterPvList = res.data;
      //   });
      // }
      this.updateShow = true
    },

    /** 导入按钮操作 */
    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.waterPvList = response.data
      }

      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()
    }
  }
}
</script>

  <style lang="scss" scoped>
::v-deep .el-date-editor--daterange.el-input__inner {
  width: 100%;
}

::v-deep .el-table .warning-row {
  background: #f9f9f9;
}

::v-deep .el-table .success-row {
  background: #ffffff;
}
::v-deep .el-table thead {
  color: #000000;
}

.updateClass {
  .footer {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 15px 0;

    .thebtn0 {
      width: 120px;
      height: 38px;
    }
    .thebtn1 {
      width: 120px;
      height: 38px;
      background: rgba(0, 155, 88, 1);
      color: #ffffff;
      border: none;
    }
    .thebtn2 {
      width: 120px;
      height: 38px;
      background: rgba(243, 169, 0, 1);
      border: none;
      color: #ffffff;
    }
    .thebtn3 {
      width: 120px;
      height: 38px;
      border: none;
      color: #ffffff;
      background: rgba(228, 27, 27, 1);
    }
    .thebtn4 {
      width: 120px;
      height: 38px;
      border: none;
      color: #ffffff;
      background: rgba(72, 178, 253, 1);
    }
    .thebtn {
      width: 120px;
      height: 38px;
      border: none;
      color: #ffffff;
      background: rgba(204, 204, 204, 1);
    }
  }
}
::v-deep .el-form-item {
  margin-bottom: 10px;
}
.page {
  padding: 10px 20px;
  background: #f9f9f9;
  font-size: 14px;
  .thetopbox {
    padding-top: 20px;
    background: #ffffff;
    border-radius: 8px;
    .searchbox {
      display: flex;
      align-items: center;
      .searchtitle {
        margin-right: 10px;
      }
      .searchbtn {
        background: #c8161d;
        color: #ffffff;
      }
    }
  }
  .mainbtn {
    padding: 10px;
    // margin-bottom: 20px;
    .thebtn1 {
      background: rgba(72, 178, 253, 1);
      color: #ffffff;
    }
    .thebtn2 {
      background: rgba(255, 173, 65, 1);
      color: #ffffff;
    }
  }
  .tableBox {
    border-radius: 8px;
    border: 1px solid rgba(204, 204, 204, 1);
    padding: 20px 0;
    // padding-top: 20px;
  }
  .main {
    margin-top: 20px;
    background: #ffffff;
    border-radius: 8px;
    box-shadow: 0px 2px 20px 0px rgba(238, 238, 238, 0.5);

    .maintop {
      display: flex;
      // padding: 10px 0px;
      justify-content: space-between;
      align-items: center;
      .kuang {
        padding: 5px 20px;
        background: rgba(255, 255, 255, 0);
        border-radius: 4px;
        border: 1px solid #cccccc;
      }
      .mainbtn {
        .thebtn1 {
          background: rgba(72, 178, 253, 1);
          color: #ffffff;
        }
        .thebtn2 {
          background: #ffad41;
          color: #ffffff;
        }
      }
    }
  }
}
</style>
