<template>
  <div class="eibs-tab">
    <el-form :model="ptssel" ref="ptsselForm" label-width="100px" label-position="right" size="small">
      <c-col :span="12" class="col-left">
        <c-col :span="24">
          <c-form-item label="业务编号" prop="ownref">
            <c-input event-render="loadText" v-model="ptssel.ownref" type="text" clearable>
            </c-input>
          </c-form-item>
        </c-col>
      </c-col>
      <c-col :span="24">
        <span style="float: right">
          <el-button size="small" @click="resetFormFields('ptsselForm')">重置</el-button>
          <el-button type="primary" icon="el-icon-search" size="small" :loading="searchLoading" @click="searchTable()">
            查询</el-button>
        </span>
      </c-col>
      <c-col :span="24">
        <c-paging-table :data="tableData" ref="ptsselTableRef" :pageSize="ptssel.pageSize" :pageNumber="ptssel.pageNum"
          :total="ptssel.total" @queryFunc="queryFunc" :border="true">
          <el-table-column label="角色" prop="rol" min-width="50px">
            <template slot-scope="scope">{{ scope.row.rol }}</template>
          </el-table-column>
          <el-table-column label="客户编号" prop="extkey" min-width="120px">
            <template slot-scope="scope">{{ scope.row.extkey }}</template>
          </el-table-column>
          <el-table-column label="客户中文名称" prop="cnnam" min-width="200px">
            <template slot-scope="scope">{{ scope.row.cnnam }}</template>
          </el-table-column>
          <el-table-column label="客户中文地址" prop="cnadr" min-width="300px">
            <template slot-scope="scope">{{ scope.row.cnadr }}</template>
          </el-table-column>
          <el-table-column label="客户英文名称" prop="ennam" min-width="200px">
            <template slot-scope="scope">{{ scope.row.ennam }}</template>
          </el-table-column>
          <el-table-column label="客户英文地址" prop="enadr" min-width="200px">
            <template slot-scope="scope">{{ scope.row.enadr }}</template>
          </el-table-column>
          <el-table-column label="客户地址" prop="adrblk" min-width="200px">
            <template slot-scope="scope">{{ scope.row.adrblk }}</template>
          </el-table-column>
          <el-table-column label="操作" min-width="60px">
            <template slot-scope="scope">
              <el-button @click="updateInfoDialog(scope.row)" type="primary" size="mini">修改</el-button>
            </template>
          </el-table-column>
        </c-paging-table>
      </c-col>
    </el-form>
    <el-dialog :visible.sync="dialogFormVisible" :title=dialogFormTitle :modal-append-to-body="false"
      :lock-scroll="false" :show-close="false" width="75%" :close-on-click-modal="false" :close-on-press-escape="false"
      v-dialogDrag>
      <el-form ref="dialogForm" :model="ptsselDialog"  label-position="right" label-suffix="：" label-width="120px" :rules="rules">
        <el-row>
          <el-col :span="23">
            <el-form-item label="客户中文名称" prop="cnnam">
              <c-input v-model="ptsselDialog.cnnam" type="textarea" maxlength="150" show-word-limit :rows="3">
              </c-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="23">
            <el-form-item label="客户中文地址" prop="cnadr">
              <c-input v-model="ptsselDialog.cnadr" type="textarea" maxlength="400" show-word-limit :rows="4">
              </c-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="23">
            <el-form-item label="客户英文名称" prop="ennam">
              <c-input v-model="ptsselDialog.ennam" type="textarea" maxlength="140" show-word-limit :rows="3">
              </c-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="23">
            <el-form-item label="客户英文地址" prop="enadr">
              <c-input v-model="ptsselDialog.enadr" type="textarea" maxlength="140" show-word-limit :rows="3">
              </c-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="23">
            <el-form-item label="客户地址" prop="adrblk">
              <c-input v-model="ptsselDialog.adrblk" type="textarea" maxlength="144" show-word-limit :rows="4">
              </c-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancelDialog">取 消</el-button>
        <el-button type="primary" @click="submitDialog" :loading="loadingStatus">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
  import PtsSelModel from "./PtsSelModel.js";
  import {
    queryByPage,
    updatePts
  } from "~/service/manage/ptssel.js";
  import Utils from "~/utils";
  import commonFunctions from "~/mixin/commonFunctions.js";
  export default {
    mixins: [commonFunctions],
    data() {
      return {
        ptssel: new PtsSelModel().data.ptssel,
        ptsselDialog: new PtsSelModel().data.ptssel,
        tableData: [],
        dialogFormVisible: false,
        dialogFormTitle: '修改当事人信息',
        loadingStatus: false,
        searchLoading: false,
        rules: {
          ennam: [
            {
              validator: this.validatorEn,
              trigger: ['change', 'blur']
            }
          ],
          enadr: [
            {
              validator: this.validatorEn,
              trigger: ['change', 'blur']
            }
          ],
        }
      }
    },
    methods: {

      // 校验英文字符 swift格式
      validatorEn(rule, value, callback){
        let swift = " \r\n'()+,-./01234567890:?ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz";
        let valStr = value
        let flag = false
        for(let i = 0; i < valStr.length; i++){
          let cStr = valStr.charAt(i)
          if (swift.indexOf(cStr) < 0) {
            flag = true
            break;
          }
        }
        if (flag) {
          callback(new Error('存在非法字符'))
        } else {
          callback()
        }
      },

      // 重置表单数据
      resetFormFields(formName) {
        this.$refs[formName].resetFields();
      },

      // 获取分页组件数据，为请求数据赋值
      queryFunc(pageNumber, pageSize) {
        this.ptssel.pageNum = pageNumber;
        this.ptssel.pageSize = pageSize;
        this.searchTable();
      },

      // 列表查询
      searchTable() {
        if(this.ptssel.ownref == null || this.ptssel.ownref == ''){
          this.$notify.warning("请输入业务编号!");
          return;
        }
        this.searchLoading = true;
        this.ptssel.branch = this.$store.state.UserContext.currentOrg.departmentNumber;
        queryByPage(this.ptssel)
          .then((res) => {
            this.searchLoading = false;
            if (res.respCode == 'AAAAAA') {
              this.tableData = res.data.list;
              this.ptssel.total = res.data.total;
              this.ptssel.pageNum = res.data.pageNumber;
              this.ptssel.pageSize = res.data.pageSize;
              this.$notify.success("查询成功!");
            } else {
              this.tableData = [];
              this.ptssel.total = 0;
              this.ptssel.pageNum = 1;
              this.$notify.warning(res.respMsg);
            }
          })
          .catch((err) => {
            this.searchLoading = false;
            this.$notify.error("查询失败!");
          });
      },

      // 【修改】按钮
      updateInfoDialog(row) {
        this.dialogFormVisible = true;
        this.dialogFormTitle = '修改当事人信息';
        this.ptsselDialog.ptsinr = row.ptsinr;
        this.ptsselDialog.adrblk = row.adrblk;
        this.ptsselDialog.cnnam = row.cnnam;
        this.ptsselDialog.cnadr = row.cnadr;
        this.ptsselDialog.ennam = row.ennam;
        this.ptsselDialog.enadr = row.enadr;
      },

      // 【确定】按钮
      submitDialog() {
        this.$refs.dialogForm.validate((validated) => {
          if (validated) {
            this.loadingStatus = true;
            updatePts(this.ptsselDialog)
              .then((res) => {
                if (res.respCode == 'AAAAAA') {
                  this.$notify.success("修改成功!");
                } else {
                  this.$notify.error(res.respMsg);
                }
                // 关闭弹框
                this.cancelDialog();
                // 刷新列表
                this.searchTable();
                this.loadingStatus = false;
              })
              .catch((err) => {
                this.loadingStatus = false;
                this.$notify.error("修改失败!");
              });
          } else {
            Utils.formValidateTips(this.$refs.dialogForm.fields)
          }
        })
      },

      // 【取消】按钮
      cancelDialog() {
        // 关闭弹框
        this.dialogFormVisible = false;
        this.ptsselDialog.ptsinr = '';
        this.ptsselDialog.adrblk = '';
        this.ptsselDialog.cnnam = '';
        this.ptsselDialog.cnadr = '';
        this.ptsselDialog.ennam = '';
        this.ptsselDialog.enadr = '';
      },

    }
  }
</script>