<template>
  <div>
    <SearchBox ref="SearchBoxRef" formName="selectTop" :formData="query" @showPop="showPop" @reset="reset"></SearchBox>
    <ButtonBox @search="handleSearch" @add="insertDialog" @start="start('0')" @remove="shutdwon('1')"
               @bankInsert="bankTable"></ButtonBox>

    <!--    <TableBox ref="TableBoxRef" :tableData="tableData" @edit="handleEdit" @remove="handleRemove" :page="pageType"-->
    <!--              :url="url" :param="query" @handleSelectionChange="handleSelectionChange"></TableBox>-->

    <el-card :body-style="cardBodyStyle">
      <el-table :data="tableData" border highlight-current-row @selection-change="handleSelectionChange"
                :height="height">
        <el-table-column type="selection" fixed></el-table-column>
        <el-table-column type="index" label="序号" align="center" width="60" fixed="left">
          <template #default="scope">
            <span>{{ scope.$index + (currentPage - 1) * pageSize + 1 }}</span>
          </template>
        </el-table-column>
        <el-table-column v-if="true" prop="tradePartnerName" label="合作方名称" width="200" header-align="center" fixed="left"
                         align="center" show-overflow-tooltip>
          <template #default="scope">
            <el-button @click="handleInfo(scope.row)" type="primary" link>{{ scope.row.tradePartnerName }}</el-button>
          </template>
        </el-table-column>
        <el-table-column v-if="true" prop="tradePartnerCode" label="合作方编码" width="150" header-align="center"
                         align="center" show-overflow-tooltip>
        </el-table-column>
        <el-table-column v-if="true" prop="status" label="状态" width="150" header-align="center"
                         align="center" show-overflow-tooltip>
          <template #default="scope">
            <el-tag type="success" v-if="scope.row.status == 0">{{ formatterStr("status", scope.row.status) }}</el-tag>
            <el-tag type="info" v-else-if="scope.row.status == 1">{{
                formatterStr("status", scope.row.status)
              }}
            </el-tag>
            <el-tag v-else>{{ formatterStr("status", scope.row.status) }}</el-tag>
            <!--            <Selector :value="scope.row.status" :optionList="dicList.START_STATUS">-->
            <!--            </Selector>-->
          </template>
        </el-table-column>
        <el-table-column v-if="true" prop="shortname" label="合作方简称" width="150" header-align="center"
                         align="center" show-overflow-tooltip>
        </el-table-column>

        <el-table-column v-if="true" prop="workModel.flowStatusName" label="流程状态" width="120" header-align="center" align="center"
                         show-overflow-tooltip>
          <template #default="{ row }">
            <div>
              <el-tag v-if="row.workId !== undefined && row.workModel.flowStatus === '110'">{{ row.workModel.flowStatusName }}</el-tag>
              <el-tag type="success" v-else-if="row.workId !== undefined && row.workModel.flowStatus === '170'">{{ row.workModel.flowStatusName }}</el-tag>
              <el-tag type="danger" v-else-if="row.workId !== undefined && (row.workModel.flowStatus === '130' || row.workModel.flowStatus === '180' || row.workModel.flowStatus === '190')">{{ row.workModel.flowStatusName }}</el-tag>
              <el-tag type="warning" v-else>'---'</el-tag>
            </div>

          </template>
        </el-table-column>
        <el-table-column v-if="true" prop="workModel.flowNode" label="当前节点" width="120" header-align="center" align="center"
                         show-overflow-tooltip>
          <template #default="{ row }">
            <div>
              <el-tag v-if="row.workId !== undefined && row.workModel.flowStatus === '110'">{{ row.workModel.flowNode }}</el-tag>
              <el-tag type="success" v-else-if="row.workId !== undefined && row.workModel.flowStatus === '170'">{{ row.workModel.flowNode }}</el-tag>
              <el-tag type="danger" v-else-if="row.workId !== undefined && (row.workModel.flowStatus === '130' || row.workModel.flowStatus === '180' || row.workModel.flowStatus === '190')">{{ row.workModel.flowNode }}</el-tag>
              <el-tag type="warning" v-else>'---'</el-tag>
            </div>

          </template>
        </el-table-column>
        <el-table-column v-if="true" prop="addName" label="添加人" width="200" header-align="center"
                         align="center" show-overflow-tooltip>
        </el-table-column>
        <el-table-column v-if="true" prop="addTime" label="添加时间" width="200" header-align="center"
                         align="center" show-overflow-tooltip>
        </el-table-column>
        <el-table-column v-if="true" prop="contry" label="国别" width="150" header-align="center"
                         :formatter="formatter" align="center" show-overflow-tooltip>
          <!--          <template #default="scope">-->
          <!--            <Selector :value="scope.row.contry" :optionList="dicList.COUNTRY_CODE">-->
          <!--            </Selector>-->
          <!--          </template>-->
        </el-table-column>
        <el-table-column v-if="true" prop="provice" label="省份" width="150" header-align="center"
                         :formatter="formatter"
                         align="center" show-overflow-tooltip>
          <!--          <template #default="scope">-->

          <!--            <Selector :value="scope.row.provice" :optionList="dicList.PROVINCE_CODE">-->
          <!--            </Selector>-->
          <!--          </template>-->
        </el-table-column>
        <el-table-column v-if="true" prop="postcode" label="邮编" width="150" header-align="center"
                         align="center" show-overflow-tooltip>
        </el-table-column>
        <el-table-column v-if="true" prop="modifyName" label="修改人" width="200" header-align="center"
                         align="center" show-overflow-tooltip>
        </el-table-column>
        <el-table-column v-if="true" prop="modifyTime" label="修改时间" width="200" header-align="center"
                         align="center" show-overflow-tooltip>
        </el-table-column>
        <el-table-column v-if="true" prop="telephone" label="电话" width="150" header-align="center"
                         align="center" show-overflow-tooltip>
        </el-table-column>
        <el-table-column v-if="true" prop="contact" label="联系人" width="150" header-align="center"
                         align="center" show-overflow-tooltip>
        </el-table-column>
        <el-table-column v-if="true" prop="mobil" label="手机" width="150" header-align="center"
                         align="center" show-overflow-tooltip>
        </el-table-column>
        <el-table-column v-if="true" prop="fax" label="传真" width="150" header-align="center"
                         align="center" show-overflow-tooltip>
        </el-table-column>
        <el-table-column v-if="true" prop="addr" label="地址" width="150" header-align="center"
                         align="center" show-overflow-tooltip>
        </el-table-column>
        <el-table-column v-if="true" prop="email" label="电子邮件" width="150" header-align="center"
                         align="center" show-overflow-tooltip>
        </el-table-column>
<!--        <el-table-column v-if="true" prop="bank" label="开户银行" width="150" header-align="center"-->
<!--                         align="center" show-overflow-tooltip>-->
<!--        </el-table-column>-->
<!--        <el-table-column v-if="true" prop="baccount" label="银行账号" width="150" header-align="center"-->
<!--                         align="center" show-overflow-tooltip>-->
<!--        </el-table-column>-->
        <el-table-column v-if="true" prop="artno" label="企业代码" width="150" header-align="center"
                         align="center" show-overflow-tooltip>
        </el-table-column>
        <el-table-column v-if="true" prop="artperson" label="法定代表人" width="150" header-align="center"
                         align="center" show-overflow-tooltip>
        </el-table-column>
        <el-table-column v-if="true" prop="taxno" label="税务登记号" width="150" header-align="center"
                         align="center" show-overflow-tooltip>
        </el-table-column>
        <el-table-column v-if="true" prop="sfhAddr" label="收发货地点" width="150" header-align="center"
                         align="center" show-overflow-tooltip>
        </el-table-column>
        <el-table-column v-if="true" prop="remark" label="备注" width="150" header-align="center"
                         align="center" show-overflow-tooltip>
        </el-table-column>
        <el-table-column v-if="true" prop="tpStyle" label="客商性质" width="150" header-align="center"
                         :formatter="formatter"
                         align="center" show-overflow-tooltip>
          <!--          <template #default="scope">-->
          <!--            <Selector :value="scope.row.tpStyle" :optionList="dicList.TP_STYLE">-->
          <!--            </Selector>-->
          <!--          </template>-->
        </el-table-column>
        <el-table-column v-if="true" prop="tpTypeListStrDic" label="客商类别" width="150" header-align="center"
                         align="center" show-overflow-tooltip>
        </el-table-column>
        <el-table-column v-if="true" prop="orgId" label="公司ID" width="150" header-align="center"
                         align="center" show-overflow-tooltip>
        </el-table-column>
        <el-table-column v-if="true" prop="orgName" label="公司" width="150" header-align="center"
                         align="center" show-overflow-tooltip>
        </el-table-column>
        <el-table-column label="操作" header-align="center" align="center" width="300px" fixed="right">
          <template #default="scope">
<!--            <el-button plain type="warning" @click="handleEdit(scope.row)">编辑</el-button>-->
<!--            <el-button plain type="danger" @click="handleRemove(scope.row )">删除</el-button>-->
<!--            <el-button plain type="success" @click="bankTable(scope.row )">银行信息</el-button>-->


            <el-button plain type="warning" @click="handleEdit(scope.row)" v-show="scope.row.workId === '' || scope.row.workModel.opType === '1'">编辑
            </el-button>
            <el-button plain type="danger" @click="handleRemove(scope.row )" v-show="scope.row.workId === '' || scope.row.workModel.opType === '1'">删除
            </el-button>
            <el-button plain type="success" @click="handleSubmit(scope.row ) "v-show="scope.row.workId === '' || scope.row.workModel.opType === '1'">发起
            </el-button>
            <el-button plain type="primary" @click="handleDetail(scope.row )" v-show="scope.row.workId !== ''">详情</el-button>
            <el-button plain type="info" @click="handleCancel(scope.row )" v-show="scope.row.workId !== '' && scope.row.workModel.opType !== '1' && scope.row.workModel.flowStatus !== '170'">撤回</el-button>
            <el-button plain type="success" @click="bankTable(scope.row )">银行信息</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
    <el-card :body-style="cardBodyStyle">
      <el-pagination :current-page="currentPage" :page-size="pageSize" :page-sizes="pageSizes" :total="totalRows"
                     background="background" layout="total, sizes, prev, pager, next, jumper"
                     @size-change="handleSizeChange"
                     @current-change="handleCurrentChange">
      </el-pagination>
    </el-card>

    <el-dialog class="diaClass" :close-on-click-modal="false" v-dialogDrag title="新增" v-model="insertDialogShow"
               @closed="dialog2Closed"
               width="50%"
               top="5vh">
      <el-card>
        <el-form ref="formRef" :model="insertForm" :rules="rules" label-width="110" label-position="right"
                 :inline="true">
          <el-row>
            <el-col :span="12">
              <el-form-item label="合作方名称" prop="tradePartnerName">
                <el-input v-model="insertForm.tradePartnerName">

                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="合作方名编码" prop="tradePartnerCode">
                <el-input v-model="insertForm.tradePartnerCode" clearable disabled></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="合作方简称" prop="shortname">
                <el-input v-model="insertForm.shortname"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="国别">
                <!--                <el-input v-model="insertForm.contry"></el-input>-->
                <SelectorComponent :optionList="dicList.COUNTRY_CODE" :value="insertForm.contry"
                                   @change="contryDict"/>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="省份">
                <SelectorComponent :optionList="dicList.PROVINCE_CODE" :value="insertForm.provice"
                                   @change="proviceDict"/>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="地址" prop="addr">
                <el-input v-model="insertForm.addr">
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="邮编" prop="postcode">
                <el-input v-model="insertForm.postcode">

                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="联系人" prop="contact">
                <el-input v-model="insertForm.contact">

                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="电话" prop="telephone">
                <el-input v-model="insertForm.telephone">

                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="手机" prop="mobil">
                <el-input v-model="insertForm.mobil">

                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="传真" prop="fax">
                <el-input v-model="insertForm.fax">

                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="电子邮件" prop="email">
                <el-input v-model="insertForm.email">

                </el-input>
              </el-form-item>
            </el-col>
<!--            <el-col :span="12">-->
<!--              <el-form-item label="开户银行" prop="bank">-->
<!--                <el-input v-model="insertForm.bank">-->

<!--                </el-input>-->
<!--              </el-form-item>-->
<!--            </el-col>-->
<!--            <el-col :span="12">-->
<!--              <el-form-item label="银行账号" prop="baccount">-->
<!--                <el-input v-model="insertForm.baccount">-->

<!--                </el-input>-->
<!--              </el-form-item>-->
<!--            </el-col>-->
            <el-col :span="12">
              <el-form-item label="企业代码" prop="artno">
                <el-input v-model="insertForm.artno">

                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="法定代表人" prop="artperson">
                <el-input v-model="insertForm.artperson">

                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="税务登记号" prop="taxno">
                <el-input v-model="insertForm.taxno">

                </el-input>
              </el-form-item>
            </el-col>


            <el-col :span="12">
              <el-form-item label="客商类别" prop="tpTypeListStr">
                <SelectorComponent :if-multiple="true" :optionList="dicList.TP_TYPE" :value="insertForm.tpTypeListStr"
                                   @change="tpTypeDict"/>
              </el-form-item>
            </el-col>

            <el-col :span="12">
              <el-form-item label="客商性质" prop="tpStyle">
                <SelectorComponent :optionList="dicList.TP_STYLE" :value="insertForm.tpStyle"
                                   @change="tpStyleDict"/>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="收发货地点" prop="sfhAddr">
                <el-input v-model="insertForm.sfhAddr">

                </el-input>
              </el-form-item>
            </el-col>
            <!--          <el-col :span="12">-->
            <!--            <el-form-item label="公司ID" prop="orgId">-->
            <!--              <el-input v-model="insertForm.orgId">-->

            <!--              </el-input>-->
            <!--            </el-form-item>-->
            <!--          </el-col>-->
            <!--          <el-col :span="12">-->
            <!--            <el-form-item label="公司" prop="orgName">-->
            <!--              <el-input v-model="insertForm.orgName">-->

            <!--              </el-input>-->
            <!--            </el-form-item>-->
            <!--          </el-col>-->
            <el-col :span="24">
              <el-form-item label="备注" prop="remark">
                <el-input
                    v-model="insertForm.remark"
                    :autosize="{ minRows: 2, maxRows: 4 }"
                    type="textarea"
                    placeholder=""
                />
              </el-form-item>
            </el-col>

          </el-row>
        </el-form>

      </el-card>

      <template #footer>
        <div class="dialog-footer">
          <el-button type="success" plain @click="insertDialogSave(formRef)">保存</el-button>
          <el-button type="danger" plain @click="insertDialogShow = false">取消</el-button>
        </div>
      </template>


    </el-dialog>

    <el-dialog class="diaClass" :close-on-click-modal="false" v-dialogDrag title="查看" v-model="detailsDialogShow"
               width="50%"
               top="5vh">
      <el-card>
        <el-form ref="formRef2" :model="insertForm" :rules="rules" label-width="110" label-position="right"
                 :inline="true">
          <el-row>
            <el-col :span="12">
              <el-form-item label="合作方名称" prop="tradePartnerName">
                <el-input v-model="insertForm.tradePartnerName" readonly>

                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="合作方名编码" prop="tradePartnerCode">
                <el-input v-model="insertForm.tradePartnerCode" clearable disabled></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="合作方简称" prop="shortname">
                <el-input v-model="insertForm.shortname" readonly></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="国别">
                <!--                <el-input v-model="insertForm.contry"></el-input>-->
                <SelectorComponent :optionList="dicList.COUNTRY_CODE" :value="insertForm.contry" :allow-select="true"
                                   @change="contryDict"/>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="省份">
                <SelectorComponent :optionList="dicList.PROVINCE_CODE" :value="insertForm.provice" :allow-select="true"
                                   @change="proviceDict"/>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="地址" prop="addr">
                <el-input v-model="insertForm.addr" readonly>
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="邮编" prop="postcode">
                <el-input v-model="insertForm.postcode" readonly>

                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="联系人" prop="contact">
                <el-input v-model="insertForm.contact" readonly>

                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="电话" prop="telephone">
                <el-input v-model="insertForm.telephone" readonly>

                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="手机" prop="mobil">
                <el-input v-model="insertForm.mobil" readonly>

                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="传真" prop="fax">
                <el-input v-model="insertForm.fax" readonly>

                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="电子邮件" prop="email">
                <el-input v-model="insertForm.email" readonly>

                </el-input>
              </el-form-item>
            </el-col>
<!--            <el-col :span="12">-->
<!--              <el-form-item label="开户银行" prop="bank">-->
<!--                <el-input v-model="insertForm.bank" readonly>-->

<!--                </el-input>-->
<!--              </el-form-item>-->
<!--            </el-col>-->
<!--            <el-col :span="12">-->
<!--              <el-form-item label="银行账号" prop="baccount">-->
<!--                <el-input v-model="insertForm.baccount" readonly>-->

<!--                </el-input>-->
<!--              </el-form-item>-->
<!--            </el-col>-->
            <el-col :span="12">
              <el-form-item label="企业代码" prop="artno">
                <el-input v-model="insertForm.artno" readonly>

                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="法定代表人" prop="artperson">
                <el-input v-model="insertForm.artperson" readonly>

                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="税务登记号" prop="taxno">
                <el-input v-model="insertForm.taxno" readonly>

                </el-input>
              </el-form-item>
            </el-col>


            <el-col :span="12">
              <el-form-item label="客商类别" prop="tpTypeListStrDic">
                <el-input v-model="insertForm.tpTypeListStrDic" readonly>

                </el-input>
              </el-form-item>
            </el-col>

            <el-col :span="12">
              <el-form-item label="客商性质" prop="tpStyle">
                <SelectorComponent :optionList="dicList.TP_STYLE" :value="insertForm.tpStyle" :allow-select="true"
                                   @change="tpStyleDict"/>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="收发货地点" prop="sfhAddr">
                <el-input v-model="insertForm.sfhAddr" readonly>

                </el-input>
              </el-form-item>
            </el-col>
            <!--          <el-col :span="12">-->
            <!--            <el-form-item label="公司ID" prop="orgId">-->
            <!--              <el-input v-model="insertForm.orgId">-->

            <!--              </el-input>-->
            <!--            </el-form-item>-->
            <!--          </el-col>-->
            <!--          <el-col :span="12">-->
            <!--            <el-form-item label="公司" prop="orgName">-->
            <!--              <el-input v-model="insertForm.orgName">-->

            <!--              </el-input>-->
            <!--            </el-form-item>-->
            <!--          </el-col>-->
            <el-col :span="24">
              <el-form-item label="备注" prop="remark">
                <el-input readonly
                          v-model="insertForm.remark"
                          :autosize="{ minRows: 2, maxRows: 4 }"
                          type="textarea"
                          placeholder=""
                />
              </el-form-item>
            </el-col>

          </el-row>
        </el-form>

      </el-card>

      <template #footer>
        <div class="dialog-footer">
          <el-button type="danger" plain @click="detailsDialogShow = false">取消</el-button>
        </div>
      </template>


    </el-dialog>


    <el-dialog :close-on-click-modal="false" draggable title="银行信息" v-model="bankDialog" width="60%" top="5vh">
      <el-card :body-style="cardBodyStyle">
        <el-button type="success" @click="bankInsert" plain>新增</el-button>
      </el-card>
      <el-card :body-style="cardBodyStyle">
        <el-table :data="tableDataBank" border highlight-current-row>
          <el-table-column type="index" label="序号" align="center" width="60">
            <template #default="scope">
              <span>{{ scope.$index + (currentPage - 1) * pageSize + 1 }}</span>
            </template>
          </el-table-column>
          <el-table-column v-if="true" prop="beneficiaryAccount" label="收款账号" min-width="200" header-align="center"
                           align="center" show-overflow-tooltip>
          </el-table-column>
          <el-table-column v-if="true" prop="bankNo" label="联行号" width="200" header-align="center" align="center"
                           show-overflow-tooltip>
          </el-table-column>
          <el-table-column v-if="true" prop="bankNm" label="开户行名称" width="240" header-align="center" align="center"
                           show-overflow-tooltip>
          </el-table-column>
          <el-table-column v-if="true" prop="bankProvince" label="省" width="160" header-align="center" align="center"
                           :formatter="formatter"
                           show-overflow-tooltip>
          </el-table-column>
          <el-table-column v-if="true" prop="bankCity" label="市" width="160" header-align="center" align="center"
                           show-overflow-tooltip>
          </el-table-column>

          <el-table-column label="操作" header-align="center" align="center" width="200px" fixed="right">
            <template #default="scope">
              <el-button plain type="warning" @click="handleEditBank(scope.row)">编辑</el-button>
              <el-button plain type="danger" @click="handleDeleteBank(scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-card>
      <el-card :body-style="cardBodyStyle">
        <el-pagination :current-page="currentPageBank" :page-size="pageSizeBank" :page-sizes="pageSizesBank"
                       :total="totalRowsBank"
                       background="background" layout="total, sizes, prev, pager, next, jumper"
                       @size-change="handleSizeChangeBank"
                       @current-change="handleCurrentChangeBank">
        </el-pagination>
      </el-card>


      <template #footer>
        <div class="dialog-footer">
          <el-button type="danger" @click="handleCancelBankTable" plain>取消</el-button>
        </div>
      </template>
    </el-dialog>
    <el-dialog :close-on-click-modal="false" draggable title="新增" v-model="bankInsertDialog" width="400px" top="5vh"
               @close="handleCancelSave">
      <el-form :model="bankForm" label-width="100px" label-position="right" inline ref="ruleFormRef" :rules="rulesBank">
        <el-form-item label="收款账号" prop="beneficiaryAccount">
          <el-input v-model="bankForm.beneficiaryAccount" clearable style="width: 200px"></el-input>
        </el-form-item>
        <el-form-item label="联行号" prop="bankNo">
          <el-input v-model="bankForm.bankNo" clearable style="width: 200px"></el-input>
        </el-form-item>
        <el-form-item label="开户行名称" prop="bankNm">
          <el-input v-model="bankForm.bankNm" clearable style="width: 200px"></el-input>
        </el-form-item>
        <el-form-item label="省" prop="bankProvince">
          <el-select v-model="bankForm.bankProvince" placeholder="请选择" style="width: 200px;">
            <el-option v-for="item in dicList.PROVINCE_CODE" :key="item.dicCode" :label="item.dicName"
                       :value="item.dicCode"/>
          </el-select>
        </el-form-item>
        <el-form-item label="市" prop="bankCity">
          <el-input v-model="bankForm.bankCity" clearable style="width: 200px"></el-input>
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button type="success" @click="handleSave(ruleFormRef)" plain>保存</el-button>
          <el-button type="danger" @click="handleCancelSave" plain>取消</el-button>
        </div>
      </template>
    </el-dialog>

  </div>
</template>

<script setup>
import {
  ref,
  reactive,
  onMounted,
  getCurrentInstance
} from 'vue'
import {Search} from '@element-plus/icons-vue'
import dayjs from 'dayjs'

const {
  proxy
} = getCurrentInstance()


import style from '@/tools/style'

const cardBodyStyle = ref(style.card)
const formRef = ref();
const tableStatus = reactive({
  tableRowEditIndex: undefined,
  tableColumnEditIndex: undefined,
})
import SearchBar from '@/components/SearchBar.vue';
import {workflowCancel, workflowSubmit} from "@/tools/workflow.js";

const searchBarRef = ref(null)
const formItem = ref([
  {
    prop: 'birthDate',
    type: 'input',
    label: '订单号'
  },
  {
    prop: 'age',
    type: 'input',
    label: '客户名称',
    searchButton: true,
    searchCallback: 'showPop'
  }

])

const searchForm = (val) => {
  query.value = searchBarRef.value.form
  console.log(JSON.stringify(query.value))
}

/**
 *   查询
 */

const query = ref({
  tradePartnerName: '',
  status: '',
})
// 首 列表
const tableData = ref([])
// 物料 列表
const tableDataWl = ref([])
const tableDataTwo = ref([])
const tableDataMx = ref([])


const TableBoxRef = ref(null)
const handleSearch = (val) => {
  // query.value = searchBarRef.value.form
  currentPage.value = 1
  getTableData()


  // TableBoxRef.value.search()
}
const getTableData = () => {
  var url = 'bas/Partner/query'
  var param = {
    page: currentPage.value,
    rows: pageSize.value,
    status: query.value.status,
    tradePartnerName: query.value.tradePartnerName,
    params: JSON.stringify(query.value)
  }
  proxy.$axios.get(url, param).then(response => {
    if (response.data.code == '0') {
      tableData.value = response.data.data.records
      totalRows.value = response.data.data.total
    } else {
      ElMessage.error('操作失败！' + response.data.msg)
    }
  })
}
/**
 *   查询
 */
/**
 * 分页
 */
const currentPage = ref(1)
const currentPageBank = ref(1)
const totalRows = ref(0)
const totalRowsBank = ref(0)
const pageSizes = ref([ 10, 20, 30, 40])
const pageSizesBank = ref([5, 10, 20, 30, 40])
const pageSize = ref(10)
const pageSizeBank = ref(5)
const handleSizeChange = (val) => {
  pageSize.value = val
  getTableData()
}
const handleSizeChangeBank = (val) => {
  pageSize.value = val
  getBankTableData()
}
const handleCurrentChange = (val) => {
  currentPage.value = val
  getTableData()
}
const handleCurrentChangeBank = (val) => {
  currentPageBank.value = val
  getBankTableData()
}
/**
 * 分页
 */

import PopupMenuTree from '@/components/PopupMenuTree.vue'
import ButtonBar from "@/components/ButtonBar.vue";
import SearchBox from "@/components/SearchBox.vue";
import ButtonBox from "@/components/ButtonBox.vue";
import SelectorComponent from "@/views/sal/components/Selector_component.vue";
import Selector from "@/views/sal/components/Selector_text.vue";

const PopupMenuTreeRef = ref(null)
const showPop = () => {
  console.log('showPop')
  PopupMenuTreeRef.value.show()
}
const reset = () => {
  Object.keys(query.value).map(key => {
    query.value[key] = ''
  })
}

const url = ref("bas/Partner/query")


/**
 * 新增表单form
 */
const insertForm = ref({
  id: '',
  tradePartnerName: '',
  tradePartnerCode: '',
  shortname: '',
  contry: 'CHN',
  provice: '',
  addr: '',
  postcode: '',
  contact: '',
  telephone: '',
  mobil: '',
  fax: '',
  email: '',
  bank: '',
  baccount: '',
  artno: '',
  artperson: '',
  taxno: '',
  remark: '',
  tpType: '',
  tpTypeListStr: '',
  tpStyle: '',
  orgId: '',
  orgName: '',
  sfhAddr: '',

})
const dialog2Closed = () => {
  // formRef.value.resetFields();
  // Object.keys(insertForm.value).map(key => {
  //   insertForm.value[key] = ''
  // })
  insertForm.value = {
    id: '',
    tradePartnerName: '',
    tradePartnerCode: '',
    shortname: '',
    contry: 'CHN',
    provice: '',
    addr: '',
    postcode: '',
    contact: '',
    telephone: '',
    mobil: '',
    fax: '',
    email: '',
    bank: '',
    baccount: '',
    artno: '',
    artperson: '',
    taxno: '',
    remark: '',
    tpType: '',
    tpTypeListStr: '',
    tpStyle: '',
    orgId: '',
    orgName: '',

  }
};
const dicList = ref({})

const dicData = () => {
  var url = 'framework/Common/querySelectorList'
  var param = {
    type: JSON.stringify(['START_STATUS', 'TP_TYPE', 'TP_STYLE', 'COUNTRY_CODE', 'PROVINCE_CODE'])
  }
  proxy.$axios.get(url, param).then(response => {
    if (response.data.code == '0') {
      dicList.value = response.data.data
      console.log(response.data.data)

    } else {
      ElMessage.error('操作失败！' + response.data.msg)
    }
  })
}

const tpStyleDict = (val) => {
  insertForm.value.tpStyle = val
}

const tpTypeDict = (val) => {
  insertForm.value.tpTypeListStr = val
}
const contryDict = (val) => {
  insertForm.value.contry = val
}
const proviceDict = (val) => {
  insertForm.value.provice = val
}

const orgNameDict = (val) => {
  insertForm.value.orgId = val
}

const start = (param) => {
  if (checkRow.value.length < 1) {
    ElMessage({
      type: 'warning',
      message: '请选择要生效的数据!'
    })
    return
  }
  edit('生效', param)

}
const shutdwon = (param) => {
  if (checkRow.value.length < 1) {
    ElMessage({
      type: 'warning',
      message: '请选择要失效的数据!'
    })
    return
  }
  for (var i = 0; i < checkRow.value.length; i++) {
    if (checkRow.value[i].status == '1'){
      ElMessage({
        type: 'warning',
        message:   '存在已经失效的数据，不允许重复操作！',
      });
      return;
    }
  }
  edit('失效', param)

}

const edit = (title, val) => {
  var ids = []
  for (var i = 0; i < checkRow.value.length; i++) {
    ids.push(checkRow.value[i].id)
  }

  var param = {
    ids: JSON.stringify(ids),
    status: val
  }
  var url = 'bas/Partner/startAndShutDown'
  ElMessageBox.confirm(
      '此操作将' + title + '该数据, 是否继续?',
      '提示', {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning',
        draggable: true,
      }
  )
      .then(() => {
        proxy.$axios.post(url, param).then(response => {
          if (response.data.code == '0') {

            ElMessage({
              type: 'success',
              message: title + '成功！',
            });
            // handleSearch()
            getTableData()
            // TableBoxRef.value.search()
          } else {
            ElMessage.error('操作失败！' + response.data.msg)
          }
        })
      })
      .catch(() => {
        ElMessage({
          type: 'info',
          message: '已取消',
        })
      })


}

// 新增订单
const insertDialogShow = ref(false)
const detailsDialogShow = ref(false)
const insertDialog = () => {
  insertDialogShow.value = true
}
const detailsDialog = () => {
  detailsDialogShow.value = true
}
const insertDialogSave = (formRef) => {
  if (!formRef) return
  formRef.validate((valid) => {
    if (valid) {
      console.log('submit!')
      var url = 'bas/Partner/save'
      var param = {
        json: JSON.stringify(insertForm.value),
      }
      proxy.$axios.post(url, param, "application/x-www-form-urlencoded").then(response => {
        if (response.data.code == 0) {
          ElMessage({
            message: '保存成功',
            type: 'success',
          })
          insertDialogShow.value = false
          handleSearch()
        } else {
          ElMessage({
            type: 'error',
            message: '操作失败' + response.data.msg
          })
        }
      });
    } else {
      console.log('error submit!')
      return false
    }
  })
  console.log("insertForm.value", insertForm.value)

}

// 生成调价申请编码
const createNm = () => {
  ElMessage({
    message: '模拟生成调价申请编码成功！',
    type: 'success',
  })

}
// 提交审批
const submit = () => {
  insertDialogShow.value = false
  ElMessage({
    message: '模拟提交审批成功！',
    type: 'success',
  })

}

const validateOrderPayTypes = (rule, value, callback) => {
  if (!value || value.length == 0) { // 自定义验证条件，返回错误提示文字
    callback(new Error('不允许为空'))
  } else {
    var url = 'bas/Partner/queryTaxnoCount'
    var param = {
      taxno: insertForm.value.taxno,
      id: insertForm.value.id,
    }
    proxy.$axios.get(url, param).then(response => {
      if (response.data.code == '0') {
        console.log(response)
        if (response.data.data === false) {
          callback(new Error('不唯一，请修改'))
        } else {
          callback()
        }
      } else {
        callback(new Error('校验失败'))
      }
    })

  }
}
// 校验
const rules = reactive({
  tradePartnerName: [
    {required: true, message: '不允许为空', trigger: 'blur'},
  ],
  shortname: [
    {required: true, message: '不允许为空', trigger: 'blur'},
  ],
  tpTypeListStr: [
    {required: true, message: '不允许为空', trigger: 'change'},
  ],
  tpStyle: [
    {required: true, message: '不允许为空', trigger: 'change'},
  ],
  taxno: [
    {required: true, validator: validateOrderPayTypes, trigger: 'change'},
  ],

})

const otherQuery = () => {

}
const pageType = ref(true)
// 首-列表 编辑
const handleEdit = (row) => {
  if (row.status == '0') {
    ElMessage({
      type: 'warning',
      message: '数据生效中，不允许操作！'
    })
    return
  }
  var url = 'bas/Partner/queryByPK'
  var param = {
    id: row.id
  }
  proxy.$axios.get(url, param).then(response => {
    if (response.data.code == '0') {
      // Object.assign(insertForm, {
      //   ...response.data.data,
      // });
      insertForm.value = response.data.data
      var list = []
      var ss = JSON.parse(response.data.data.tpTypeListStr)
      for (var i = 0; i < ss.length; i++) {
        list.push(String(ss[i]))
      }
      insertForm.value.tpTypeListStr = list
      insertDialogShow.value = true
    } else {
      ElMessage.error('操作失败！' + response.data.msg)
    }
  })
  insertDialogShow.value = true
}

const handleRemove = (row) => {
  if (row.status == '0' || row.status == '1') {
    ElMessage({
      type: 'warning',
      message: '数据不允许操作！'
    })
    return
  }
  var url = 'bas/Partner/remove'
  var param = {
    id: row.id
  }
  ElMessageBox.confirm(
      '确定删除本条记录?',
      '提示', {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning',
        draggable: true,
      }
  )
      .then(() => {
        proxy.$axios.get(url, param).then(response => {
          if (response.data.code == '0') {
            console.log(response.data.data)
            ElMessage({
              type: 'success',
              message: '删除成功！',
            });

            handleSearch()
          } else {
            ElMessage.error('操作失败！' + response.data.msg)
          }
        })
      })
      .catch(() => {
        ElMessage({
          type: 'info',
          message: '已取消',
        })
      })


}

// 选中行
const checkRow = ref([])
const handleSelectionChange = (val) => {
  console.log("vla", val)
  // console.log("vla" , val[0].bank)
  checkRow.value = val
}

const height = ref(600)
const updateViewportHeight = () => {
  height.value = window.innerHeight * 0.65
  console.log(window.innerHeight);
};

const formatter = (row, column, cellValue, index) => {
  if (!cellValue || cellValue == null || cellValue == '') {
    return cellValue
  }
  switch (column.property) {
    case 'status':
      cellValue = dicList.value && Array.isArray(dicList.value.START_STATUS)
          ? dicList.value.START_STATUS.find(item => item.dicCode == cellValue)?.dicName
          : undefined
      break
    case 'contry':
      cellValue = dicList.value && Array.isArray(dicList.value.COUNTRY_CODE)
          ? dicList.value.COUNTRY_CODE.find(item => item.dicCode == cellValue)?.dicName
          : undefined
      break
    case 'provice':
      cellValue = dicList.value && Array.isArray(dicList.value.PROVINCE_CODE)
          ? dicList.value.PROVINCE_CODE.find(item => item.dicCode == cellValue)?.dicName
          : undefined
      break
    case 'bankProvince':
      cellValue = dicList.value && Array.isArray(dicList.value.PROVINCE_CODE)
          ? dicList.value.PROVINCE_CODE.find(item => item.dicCode == cellValue)?.dicName
          : undefined
      break
    case 'tpStyle':
      cellValue = dicList.value && Array.isArray(dicList.value.TP_STYLE)
          ? dicList.value.TP_STYLE.find(item => item.dicCode == cellValue)?.dicName
          : undefined
      break
  }
  return cellValue

}
const formatterStr = (col, value) => {
  if (!value || value == null || value == '') {
    return value
  }
  switch (col) {
    case 'status':
      value = dicList.value && Array.isArray(dicList.value.START_STATUS)
          ? dicList.value.START_STATUS.find(item => item.dicCode == value)?.dicName
          : undefined
      break
  }
  return value

}

const handleInfo = (row) => {
  detailsDialogShow.value = true
  insertForm.value = row

}
const ruleFormRef = ref()
const bankInsert = () => {
  // if (checkRow.value.length != 1) {
  //   ElMessage({
  //     type: 'warning',
  //     message: '请选择一条数据进行新增!'
  //   })
  //   return
  // }

  if (ruleFormRef.value) {
    ruleFormRef.value.resetFields();
  }
  bankForm.value = {
    bankNo: '',
    bankNm: '',
    bankProvince: '',
    bankCity: '',
    beneficiaryAccount: ''
  }
  bankInsertDialog.value = true

}
const bankFid = ref()
const bankTable = (row) => {
  if (bankFid.value != row.id) {
    bankFid.value = row.id
    tableDataBank.value = []
    getBankTableData()
  }
  bankDialog.value = true

}

const bankForm = ref({})
const bankDialog = ref(false)
const bankInsertDialog = ref(false)
const handleCancelSave = () => {
  bankForm.value = {
    bankNo: '',
    bankNm: '',
    bankProvince: '',
    bankCity: '',
    beneficiaryAccount: ''
  }
  bankInsertDialog.value = false
}
const handleCancelBankTable = () => {
  bankDialog.value = false
}
const handleSave = (ruleFormRef) => {
  ruleFormRef.validate((valid, fields) => {
    if (valid) {
      bankForm.value.fId = bankFid.value
      var url = 'pur/PayBank/save'
      var param = {
        json: JSON.stringify(bankForm.value),
      }
      proxy.$axios.post(url, param).then(response => {
        if (response.data.code == 0) {
          bankForm.value = response.data.data
          ElMessage({
            message: '保存成功',
            type: 'success',
          })
          getBankTableData()
          bankInsertDialog.value = false
        } else {
          // ElMessage.error('操作失败！' + response.data.msg)
          ElMessage({
            message: '操作失败' + response.data.msg,
            type: 'error'
          })
        }
      })

    } else {
      console.log('error submit!', fields)
    }
  })
}

const tableDataBank = ref([])

const rulesBank = reactive({
  bankNo: [{
    required: true,
    message: '银联号必须录入',
  }],
  bankNm: [{
    required: true,
    message: '开户行名称必须录入',
  }],
  bankProvince: [{
    required: true,
    message: '省必须录入',
  }],
  bankCity: [{
    required: true,
    message: '市必须录入',
  }],
  beneficiaryAccount: [{
    required: true,
    message: '收款账号必须录入',
  }],
})
const getBankTableData = () => {
  var url = 'pur/PayBank/query'
  var param = {
    page: currentPageBank.value,
    rows: pageSizeBank.value,
    params: JSON.stringify({fId: bankFid.value})
  }
  proxy.$axios.get(url, param).then(response => {
    if (response.data.code == '0') {
      tableDataBank.value = response.data.data.records
      totalRowsBank.value = response.data.data.total
    } else {
      ElMessage.error('操作失败！' + response.data.msg)
    }
  })
}

const handleEditBank = (row) => {
  if (ruleFormRef.value) {
    ruleFormRef.value.resetFields();
  }
  bankInsertDialog.value = true
  bankForm.value = row
}
const handleDeleteBank = (row) => {
  ElMessageBox.confirm(
      '确定删除本条记录?',
      '提示', {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning',
        draggable: true,
      }
  )
      .then(() => {
        var url = 'pur/PayBank/remove'
        var param = {
          id: row.id
        }
        proxy.$axios.post(url, param).then(response => {
          if (response.data.code == 0) {
            ElMessage({
              type: 'success',
              message: '删除成功',
            })
            getBankTableData()
          } else {
            ElMessage({
              type: 'error',
              message: '删除失败' + response.data.msg
            });
          }
        });
      })
      .catch(() => {
        ElMessage({
          type: 'info',
          message: '已取消',
        })
      })
}

const flowId = ref('BasPartner')
const handleSubmit = (row) => {
  ElMessageBox.confirm(
      '确定提交流程?',
      '提示', {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning',
        draggable: true,
      }
  ).then(() => {
    var obj = {
      id : row.id
    }
    return workflowSubmit(
        flowId.value,
        '客商新增审批流程',
        '初始化提交',
        JSON.stringify(obj),
        row.workId,
        row.trackId)
  }).then((result) => {
    if(result.status === 'success'){

      console.log(result)
      // 将结果返回的workId和trackId保存
      var url = 'bas/Partner/submitFq'
      var process = {
        'id': row.id,
        'workId': result.workId,
        'trackId': result.trackId,
      }
      var param = {
        json: JSON.stringify(process),
      }
      proxy.$axios.post(url, param).then(response => {
        if (response.data.code === 0) {
          // form.value = response.data.data
          ElMessage({
            type: 'success',
            message: '提交审批成功',
          })
          getTableData()
        }
      })
    }
    else{
      ElMessage({
        type: 'error',
        message: '提交审批失败' + response.data.msg
      });
    }
  }).catch(() => {
    ElMessage({
      type: 'info',
      message: '已取消提交',
    })
  })
}


const handleDetail = (row) => {
  if(row.workId === null){
    ElMessage({
      type: 'info',
      message: '无法查看',
    })
  }else {

    sessionStorage.setItem('workflowQuery', JSON.stringify({
      flowId: flowId.value,
      workId: row.workId,
      trackId: row.trackId,
      date:new Date().getTime()
    }))

    proxy.$router.push({
      path: '/workflow/detail',
    })

  }
}

const handleCancel = (row) => {
  ElMessageBox.confirm(
      '确定撤回审批?',
      '提示', {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning',
        draggable: true,
      }
  ).then(() => {
    return workflowCancel(row.workId, row.trackId);
  }).then((result) => {
    if(result.status === 'success'){
      ElMessage({
        type: 'success',
        message: '撤回审批成功',
      })
      getTableData()
    }else {
      ElMessage({
        type: 'error',
        message: '撤回审批失败，' + result.msg
      });
    }
  }).catch(() => {
    ElMessage({
      type: 'info',
      message: '已取消提交',
    })
  })
}

onMounted(() => {
  dicData()
  getTableData()
  updateViewportHeight()
  console.log(`the component is now mounted.`)
})
</script>

<style scoped>
::v-deep .diaClass .el-form-item {
  width: 100%
}

::v-deep .diaClass70 .el-form-item {
  width: 90%
}


.el-date-editor--date {
  width: 100%;
}

::v-deep .el-dialog__body {
  background-color: #F2F6FC;
}

</style>
