<template>
  <div class="page">
    <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' }"
          :row-class-name="tableRowClassName"
        >
          <el-table-column align="center" prop="memberCode" :label="'会员编号'">
          </el-table-column>
          <el-table-column align="center" prop="errorMsg" :label="'报错信息'">
          </el-table-column>
        </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>
    <topBar v-if="topList.length > 0"
            :topList="topList"
            :moren="moren"></topBar>
    <div v-if="topList[6].changed==true" class="contain">
      <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 clearable
                          v-model="queryParams.memberCode"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-form-item :label="'会员姓名'"
                            prop="memberName">
                <el-input clearable
                          v-model="queryParams.memberName"></el-input>
              </el-form-item>
            </el-col>

            <el-col :span="4">
              <el-form-item :label="'结算国家'"
                            prop="pkSettleCountry">
                <el-select clearable
                           v-model="queryParams.pkSettleCountry"
                           :placeholder="'请选择'">
                  <el-option v-for="(item, index) in countryFindAllList"
                             :key="index"
                             :label="item.shortName"
                             :value="item.pkId"></el-option>
                </el-select>
              </el-form-item>
            </el-col>

            <el-col :span="4">
              <el-form-item label=""
                            prop=""
                            label-width="30px">
                <el-button class="searchbtn"
                           @click="getSearch()"> {{ '搜索' }}</el-button>
                <el-button @click="reChongzhi"> {{ '重置' }}</el-button>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
      <div class="maintop">
        <div class="mainbtn">
          <el-button size="small"
                     class="thebtn1"
                     v-hasButtons="['ModifySettleCountryUpdate']"
                     @click="updateCode()">{{'修改'}}{{ '结算国家' }}</el-button>
          <el-button size="small" v-hasButtons="['ModifySettleCountryExport']"
                     class="thebtn2" @click="handleExport"> {{ '导出' }}</el-button>
        </div>
      </div>
      <div class="main">

        <div class="maintable">
          <el-table :data="tableData"
          v-loading="loading"
                    style="width: 100%"
                    :header-cell-style="{ background: '#EEEEEE' }"
                    @selection-change="handleSelectionChange">
            <el-table-column type="selection"
                             width="55"> </el-table-column>

            <el-table-column align="center"
                             prop="memberCode"
                             :label="'会员编号'">
            </el-table-column>

            <el-table-column align="center"
                             prop="memberName"
                             :label="'会员姓名'">
            </el-table-column>
            <el-table-column align="center"
                             prop="oldValue"
                             :label="'结算国家'">
            </el-table-column>
            <el-table-column align="center"
                             prop="newValue"
                             :label="'变更后结算国家'">
            </el-table-column>

            <el-table-column align="center"
                             prop="changeNumber"
                             :label="'变更次数'">
            </el-table-column>
            <el-table-column
              align="center"
              prop="approveStatusVal"
              :label="'审核状态'"
            >
            </el-table-column>
            <el-table-column align="center"
                             prop="creationTime"
                             :label="'变更日期'">
            </el-table-column>
          </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 clearable :placeholder="'请选择'" v-model="form.czlx">
            <el-option
              v-for="item in cztypeList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-row style="margin-top: 10px">
          <el-col :span="5">
            <el-form-item :label="'会员编号'">
              <el-input
                clearable
                style="width: 200px"
                v-model="form.memberCode"
                @blur="checkName"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item :label="'会员姓名'">
              <el-input
                clearable
                style="width: 200px"
                v-model="form.memberName"
                disabled
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-button
              @click="getDataList"
              style="background-color: #c8161d; color: #fff"
            > {{ '搜索' }}</el-button
            >
            <el-button @click="reset"> {{ '重置' }}</el-button>
          </el-col>
        </el-row>
      </el-form>
        <template v-if="form.czlx == 2">
          <div class="mainbtn" style="margin-bottom: 10px">
            <el-button size="small" class="thebtn2" style="background-color: #FF6723;color: #fff" @click="handleImport"
            > {{ '导入' }}</el-button>
            <el-button size="small" @click="importTemplate" style="background-color: #009B58;color: #fff;margin-left: 15px" class="thebtn2"> {{ '下载模板' }}</el-button>

          </div>
        </template>
        <el-table :data="codeData"
                  height="400px"
                  style="width: 100%"
                  :header-cell-style="{ background: '#EEEEEE' }"
                  border>
          <el-table-column align="center"
                           prop="memberCode"
                           :label="'会员编号'"></el-table-column>
          <el-table-column align="center"
                           prop="memberName"
                           :label="'会员姓名'"></el-table-column>
          <el-table-column align="center"
                           prop="shortName"
                           :label="'结算国家'"></el-table-column>
          <el-table-column align="center"
                           prop="orderCode"
                           :label="'变更后结算国家'">
            <template slot-scope="scope">
              <el-select clearable
                         v-model="scope.row.newPkSettleCountry"
                         :placeholder="'请选择'">
                <el-option v-for="(item, index) in countryFindAllList"
                           :key="index"
                           :label="item.shortName"
                           :value="item.pkId"></el-option>
              </el-select>
              <!-- <el-input v-model="scope.row.memberCodeNew"> </el-input> -->
            </template>
          </el-table-column>
          <el-table-column align="center"
                           prop="pkAccountKeyVal"
                           :label="'扣款币种'"></el-table-column>
          <el-table-column align="center"
                           prop="cost"
                           :label="`${'单笔扣款金额'}(${getUser.currency.symbol})`"></el-table-column>
          <!-- <el-table-column
              align="center"
              prop=""
              label="合计扣款金额(¥)"
            ></el-table-column> -->
          <el-table-column align="center"
                           prop=""
                           :label="'操作'">
            <template slot-scope="scope">
              <el-button @click="handleDelete(scope.row, scope.$index, codeData)"
                         type="text"
                         size="small"
                         style="color: #c73030">
                {{'删除'}}
              </el-button>
            </template>
          </el-table-column>
        </el-table>
        <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="['ModifySettleCountryExemptSign']"
                       class="thebtn1"
                       @click="saveDate(1)">{{'免签'}}</el-button>
            <el-button v-hasButtons="['ModifySettleCountryExemptPay']"
                       class="thebtn2"
                       @click="saveDate(2)">{{'免付'}}</el-button>
            <el-button v-hasButtons="['ModifySettleCountryExemptAll']"
                       class="thebtn3"
                       @click="saveDate(3)">{{'全免'}}</el-button>
            <el-button v-hasButtons="['ModifySettleCountryConfirm']"
                       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"></i>
          <div class="el-upload__text">
             {{'将文件拖到此处，或'}}
            <em>{{'点击上传'}}</em>
          </div>
          <div class="el-upload__tip"
               slot="tip">
            <el-link type="info"
                     style="font-size: 12px"
                     @click="importTemplate"> {{ '下载模板' }}</el-link>
          </div>
          <div class="el-upload__tip"
               style="color: red"
               slot="tip">
            {{'提示：仅允许导入“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>
  </div>
</template>

  <script>
import topBar from '@/components/topBar'
import * as spe from '@/api/specialBusiness'
import {getPubEnumsProcessTyepe, specialBusinessQuery} from '@/api/business.js'
import { getToken } from '@/utils/auth'
import { mapGetters } from 'vuex'
import {getRouters} from "@/api/settle";
import {getMemberName} from "@/api/financial";
export default {
  name: 'modifySettleCountry',
  components: { topBar },
  data() {
    return {

      errorData: [],
      errorShow: false,
      moren: 'modifySettleCountry',
      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: '',
        pkSettleCountry: '',
      },
      countryFindAllList: [], //结算国下拉
      tableData: [],
      loading:false,
      total: 0,
      updateShow: false,
      codeData: [],
      upload: {
        // 是否显示弹出层（物流导入）
        open: false,
        // 弹出层标题（物流导入）
        title: '',
        // 是否禁用上传
        isUploading: false,
        // 是否更新已经存在的物流数据
        updateSupport: 0,
        // 设置上传的请求头部
        headers: { Authorization: 'Bearer ' + getToken() },
        // 上传的地址
        url:
          process.env.VUE_APP_BASE_API +
          '/member/manage/update-settle-country/importData',
      },
      idList: [], //选中会员编号
      processTypeList: [],
      form: {
        approvalBusiness: 124,
        memberCode: "",
        memberName: '',
        czlx:1,
      },
      czlx:1,
      cztypeList:[],
    }
  },
  computed: {
    ...mapGetters(['getUser']),
  },
  created() {
    this.getSearch()
    this.getOther()
    this.getPubEnumsProcessTyepe()
    this.getUserRoute()
    spe.getEmusBatchType().then((res) => {
      this.cztypeList = res.data;
    });
  },
  methods: {
     handleExport() {
      this.$confirm('是否确认导出所有数据项?', '警告', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: "warning",
      }).then((_) => {
        this.download(
          "/member/manage/update-settle-country/export",
          { ...this.queryParams },
          `${'修改结算国'}${new Date().getTime()}.xlsx`
        );
      });
    },
    getDataList() {
      //根据选中的会员查询会员业绩
      specialBusinessQuery(this.form)
        .then((res) => {
          this.codeData = []
          this.codeData.push(res.data);
        });
    },
    reset() {
      this.form.memberCode = "";
      this.form.memberName = "";
      this.codeData = []
      // this.getDataList();
    },
    //根据会员编号查询会员姓名
    checkName() {
      getMemberName({ memberCode: this.form.memberCode }).then((res) => {
        this.form.memberName = res.memberName;
      });
    },
    getUserRoute() {
      getRouters().then((res)=>{
        res.data.forEach((item)=>{
          this.topList.forEach((items)=>{
            if (item.path == items.url){
              items.changed = true
            }
          })
        })
      })
    },
    tableRowClassName({ row, rowIndex }) {
      if (rowIndex % 2 == 1) {
        return 'warning-row'
      } else if (rowIndex % 2 == 0) {
        return 'success-row'
      }
      return ''
    },
    //下载模板
    importTemplate() {
      this.download(
        '/member/manage/update-settle-country/download',
        {},
        `${'模板'}${new Date().getTime()}.xlsx`
      )
    },
    saveDate(index) {
      if (index == 0) {
        this.updateShow = false
        // this.$router.go(-1);
      } else if (index == 2 || index == 4) {
        // 免付和确认走签呈
        spe
          .updateSettleCountry({
            upstcyVOList: this.codeData,
            processType: index,
          })
          .then((res) => {
            if (res.code == 200) {
              this.$router.push({
                path: 'specialZxqc',
                query: {
                  data: JSON.stringify(res.data.updateParentParamList),
                  countryData: JSON.stringify(res.data.upstcyVOList),
                  index: index,
                  businessType: 124,
                },
              })
            }else if (res.code == 504 && res.data) {
              this.errorShow = true;
              this.errorData = res.data;
            }
          })
      } else {
        spe
          .updateSettleCountry({
            upstcyVOList: this.codeData,
            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;
            }
          })
      }
    },
    getPubEnumsProcessTyepe() {
      getPubEnumsProcessTyepe().then((res) => {
        this.processTypeList = res.data
      })
    },
    handleSelectionChange(selection) {
      this.idList = selection.map((item) => item.pkId)
    },
    handleDelete(row, index, rows) {
      this.$confirm('是否删除').then((_) => {
        rows.splice(index, 1)
      })
    },
    getSearch() {
      this.loading = true
      spe.getupseCountryList(this.queryParams).then((res) => {        
        this.loading = false
        this.tableData = res.rows
        this.total = res.total
      })
    },
    reChongzhi() {
      this.queryParams = {
        pageNum: 1,
        pageSize: 50,
        memberCode: '',
        memberName: '',
        pkSettleCountry: '',
      }
      this.getSearch()
    },
    updateCode() {
      if (this.idList.length > 0) {
        spe.getselectedCountry({ pkMemberList: this.idList }).then((res) => {
          this.codeData = res.data
        })
      }
      this.updateShow = true
    },
    getOther() {
      spe.getCountryFindAll().then((res) => {
        this.countryFindAllList = res.data
      })
    },
    /** 导入按钮操作 */
    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.codeData = 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-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;
    .searchtitle {
      margin-right: 10px;
    }
    .searchbtn {
      background: #c8161d;
      color: #ffffff;
    }
    .searchbox {
      display: flex;
      align-items: center;
    }
  }
  .mainbtn1 {
    // margin-bottom: 20px;
    .thebtn1 {
      background: rgba(255, 103, 35, 1);
      color: #ffffff;
    }
  }
  .maintop {
    display: flex;
    // padding: 10px 0;
    justify-content: space-between;
    align-items: center;
    .mainbtn {
      //margin-bottom: 20px;
      .thebtn1 {
        background: rgba(72, 178, 253, 1);
        color: #ffffff;
      }
      .thebtn2 {
        background: #ffad41;
        color: #ffffff;
      }
    }
  }
  .main {
    flex: 1;
    // margin-top: 20px;
    background: #ffffff;
    border-radius: 8px;
    box-shadow: 0px 2px 20px 0px rgba(238, 238, 238, 0.5);
  }
}
.contain{
  height: 100%;
  display: flex;
  flex-direction: column;
}
</style>
