<template>
  <div>
    <el-card :body-style="cardBodyStyle">
      <el-form :model="query" label-position="right" :inline="true">
        <el-row :gutter="10" style="margin-bottom: 5px;">
          <el-col :span="5">
            <el-form-item label="客户名称" style="margin-bottom: 0px;">
              <el-input v-model="query.tradePartnerName" placeholder="请输入客户名称" clearable></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item label="退款日期" style="margin-bottom: 0px;">
              <el-date-picker
                  style="width: 100%"
                  v-model="query.retreatDt"
                  type="date"
                  value-format="YYYY-MM-DD"
                  placeholder="退款日期"
              />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </el-card>
    <ButtonBar @search="handleSearch" @add="handleAdd"></ButtonBar>

    <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">
          <template #default="scope">
            <span>{{ scope.$index + (currentPage - 1) * pageSize + 1 }}</span>
          </template>
        </el-table-column>
        <el-table-column v-if="true" prop="prepaymentNo" label="退款编号"
                         header-align="center" align="center" width="200"
                         show-overflow-tooltip>
          <template #default="scope">
            <el-button @click="handleInfo(scope.row)" type="primary" link>{{ scope.row.prepaymentNo }}</el-button>
          </template>
        </el-table-column>
        <el-table-column v-if="true" prop="deptNm" label="部门名称" width="160"
                         header-align="center" align="center"
                         show-overflow-tooltip>
        </el-table-column>
        <el-table-column v-if="true" prop="retreatDt" label="退款日期" width="160"
                         header-align="center" align="center"
                         show-overflow-tooltip>

        </el-table-column>
        <el-table-column v-if="true" prop="tradePartnerName" label="客户名称"
                         header-align="center" align="center" width="160"
                         show-overflow-tooltip>
        </el-table-column>
        <el-table-column v-if="true" prop="procAmt" label="退款金额" width="160"
                         header-align="center" align="center"
                         show-overflow-tooltip>
        </el-table-column>
        <el-table-column v-if="true" prop="payMth" label="退款方式" :formatter="formatter"
                         header-align="center" align="center" width="160"
                         show-overflow-tooltip>
        </el-table-column>


        <el-table-column v-if="true" prop="actPayAmount" label="实际支付金额"  width="160"
                         header-align="center" align="center"
                         show-overflow-tooltip>
        </el-table-column>
        <el-table-column v-if="true" prop="accountNo" label="收款账号"  width="160"
                         header-align="center" align="center"
                         show-overflow-tooltip>
        </el-table-column>
        <el-table-column v-if="true" prop="bankNo" label="开户联行号"  width="160"
                         header-align="center" align="center"
                         show-overflow-tooltip>
        </el-table-column>
        <el-table-column v-if="true" prop="bankNm" label="开户行"  width="160"
                         header-align="center" align="center"
                         show-overflow-tooltip>
        </el-table-column>
        <el-table-column v-if="true" prop="payProv" label="省"  width="160" :formatter="formatter"
                         header-align="center" align="center"
                         show-overflow-tooltip>
        </el-table-column>
        <el-table-column v-if="true" prop="payCity" label="市"  width="160"
                         header-align="center" align="center"
                         show-overflow-tooltip>
        </el-table-column>
        <el-table-column v-if="true" prop="paySts" label="支付状态"  width="160" :formatter="formatter"
                         header-align="center" align="center"
                         show-overflow-tooltip>
        </el-table-column>
        <el-table-column v-if="true" prop="actPayDate" label="支付日期" width="200"
                         header-align="center" align="center"
                         show-overflow-tooltip>
        </el-table-column>
        <el-table-column v-if="true" prop="remarks" label="备注信息"
                         header-align="center" align="center" width="200"
                         show-overflow-tooltip>
        </el-table-column>
        <el-table-column v-if="true" prop="workModel.flowStatusName" label="流程状态" fixed="right" 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="当前节点" fixed="right" 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 label="操作" header-align="center" align="center" width="300px" fixed="right">
          <template #default="scope">
            <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="handleDelete(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>
          </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" draggable title="编辑" v-model="dialogVisible"
               width="1200px"
               top="5vh" @open="openDialog">
      <el-card>

        <el-form :model="form" label-width="120px" label-position="right" inline ref="ruleFormRef" :rules="rules">
          <el-row>
            <el-col :span="8">
              <el-form-item label="退款编号" prop="prepaymentNo">
                <el-input v-model="form.prepaymentNo" disabled></el-input>
              </el-form-item>
            </el-col>

            <el-col :span="8">
              <el-form-item label="退款日期" prop="retreatDt">
                <el-date-picker
                    style="width: 100%"
                    v-model="form.retreatDt"
                    type="date"
                    value-format="YYYY-MM-DD"
                    placeholder="申请日期"
                />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="退款方式" prop="payMth">
                <el-select v-model="form.payMth">
                  <el-option
                      v-for="item in dictList.COM_PAY_MTH"
                      :key="item.dicCode"
                      :label="item.dicName"
                      :value="item.dicCode"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="客户编码" prop="tradePartnerCode">
                <el-input v-model="form.tradePartnerCode" readonly>
                  <template #append>
                    <el-button :icon="Search" @click="ksDialog"/>
                  </template>
                </el-input>

              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="客户名称" prop="tradePartnerName">
                <el-input v-model="form.tradePartnerName" readonly>
                  <template #append>
                    <el-button :icon="Search" @click="ksDialog"/>
                  </template>
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="退款金额" prop="procAmt">
                <el-input-number :min="0" v-model="form.procAmt" style="width: 100%;"></el-input-number>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="收款收条号" prop="receiptCode">
                <el-input v-model="form.receiptCode" :maxlength="10"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="子收条号" prop="subReceiptCode">
                <el-input v-model="form.subReceiptCode" :maxlength="11"></el-input>
              </el-form-item>
            </el-col>


<!--            <el-col :span="8">-->
<!--              <el-form-item label="实际支付金额" prop="actPayAmount">-->
<!--                <el-input v-model="form.actPayAmount" readonly></el-input>-->
<!--              </el-form-item>-->
<!--            </el-col>-->

            <el-col :span="8">
            </el-col>
            <el-col :span="8">
              <el-form-item label="收款账号" prop="accountNo">
                <el-input v-model="form.accountNo" readonly>
                  <template #append>
                    <el-button :icon="Search" @click="bankDialog"/>
                  </template>
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="开户联行号" prop="bankNo">
                <el-input v-model="form.bankNo" readonly></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="开户行" prop="bankNm">
                <el-input v-model="form.bankNm" readonly></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="省" prop="payProv">
                <el-select v-model="form.payProv" disabled>
                  <el-option
                      v-for="item in dictList.PROVINCE_CODE"
                      :key="item.dicCode"
                      :label="item.dicName"
                      :value="item.dicCode"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="市" prop="payCity">
                <el-input v-model="form.payCity" readonly></el-input>
              </el-form-item>
            </el-col>


<!--            <el-col :span="8">-->
<!--              <el-form-item label="支付日期" prop="year">-->
<!--                <el-date-picker-->
<!--                    style="width: 100%"-->
<!--                    v-model="form.year"-->
<!--                    type="year"-->
<!--                    placeholder="actPayDate"-->
<!--                    value-format="YYYY-MM-dd"-->
<!--                />-->
<!--              </el-form-item>-->
<!--            </el-col>-->
          </el-row>
          <el-row>
            <el-col :span="24">
              <el-form-item label="备注信息" prop="remarks">
                <el-input
                    v-model="form.remarks"
                    :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" @click="handleSave(ruleFormRef)"  plain>保存</el-button>
          <el-button type="danger" @click="handleCancelSave" plain>取消</el-button>
        </div>
      </template>
    </el-dialog>
    <el-dialog class="diaClass" :close-on-click-modal="false" draggable title="查看" v-model="dialogVisibleCk"
               width="1200px"
               top="5vh" @open="openDialog">
      <el-card>
        <el-form :model="form" label-width="120px" label-position="right" inline ref="ruleFormRef" :rules="rules">
          <el-row>
            <el-col :span="8">
              <el-form-item label="退款编号" prop="prepaymentNo">
                <el-input v-model="form.prepaymentNo" disabled></el-input>
              </el-form-item>
            </el-col>

            <el-col :span="8">
              <el-form-item label="退款日期" prop="retreatDt">
                <el-date-picker readonly
                    style="width: 100%"
                    v-model="form.retreatDt"
                    type="date"
                    value-format="YYYY-MM-DD"
                    placeholder="申请日期"
                />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="退款方式" prop="payMth">
                <el-select v-model="form.payMth" disabled>
                  <el-option
                      v-for="item in dictList.COM_PAY_MTH"
                      :key="item.dicCode"
                      :label="item.dicName"
                      :value="item.dicCode"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="客户编码" prop="tradePartnerCode">
                <el-input v-model="form.tradePartnerCode" readonly>
                </el-input>

              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="客户名称" prop="tradePartnerName">
                <el-input v-model="form.tradePartnerName" readonly>
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="退款金额" prop="procAmt">
                <el-input-number :min="0" v-model="form.procAmt" style="width: 100%;" disabled></el-input-number>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="收款收条号" prop="receiptCode">
                <el-input v-model="form.receiptCode" :maxlength="10" readonly></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="子收条号" prop="subReceiptCode">
                <el-input v-model="form.subReceiptCode" :maxlength="11" readonly></el-input>
              </el-form-item>
            </el-col>


            <!--            <el-col :span="8">-->
            <!--              <el-form-item label="实际支付金额" prop="actPayAmount">-->
            <!--                <el-input v-model="form.actPayAmount" readonly></el-input>-->
            <!--              </el-form-item>-->
            <!--            </el-col>-->

            <el-col :span="8">
            </el-col>
            <el-col :span="8">
              <el-form-item label="收款账号" prop="accountNo">
                <el-input v-model="form.accountNo" readonly>
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="开户联行号" prop="bankNo">
                <el-input v-model="form.bankNo" readonly></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="开户行" prop="bankNm">
                <el-input v-model="form.bankNm" readonly></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="省" prop="payProv">
                <el-select v-model="form.payProv" disabled>
                  <el-option
                      v-for="item in dictList.PROVINCE_CODE"
                      :key="item.dicCode"
                      :label="item.dicName"
                      :value="item.dicCode"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="市" prop="payCity">
                <el-input v-model="form.payCity" readonly></el-input>
              </el-form-item>
            </el-col>


            <!--            <el-col :span="8">-->
            <!--              <el-form-item label="支付日期" prop="year">-->
            <!--                <el-date-picker-->
            <!--                    style="width: 100%"-->
            <!--                    v-model="form.year"-->
            <!--                    type="year"-->
            <!--                    placeholder="actPayDate"-->
            <!--                    value-format="YYYY-MM-dd"-->
            <!--                />-->
            <!--              </el-form-item>-->
            <!--            </el-col>-->
          </el-row>
          <el-row>
            <el-col :span="24">
              <el-form-item label="备注信息" prop="remarks" >
                <el-input readonly
                    v-model="form.remarks"
                    :autosize="{ minRows: 2, maxRows: 4 }"
                    type="textarea"

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

      </el-card>

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


    <Popup_base_wl ref="PopupRef" @receive-from-child="retu"></Popup_base_wl>

    <Popup_base_ks ref="PopupRefKs" @receive-from-child="retuKs"></Popup_base_ks>
    <PopupPayBank ref="PopupPayBankRef" :fId="form.tradePartnerId" @receive-from-child="retuBank"></PopupPayBank>
  </div>
</template>

<script setup>
import ButtonBar from '@/components/ButtonBar.vue'

import {
  ref,
  reactive,
  onMounted,
  getCurrentInstance
} from 'vue'

const {
  proxy
} = getCurrentInstance()

import style from '@/tools/style'
import Selector_component from "@/views/sal/components/Selector_component.vue";
import Popup_base_wl from "@/views/bas/Popup_base_wl.vue";
import {Search} from '@element-plus/icons-vue'
import Popup_base_ks from "@/views/bas/Popup_base_ks.vue";
import {workflowCancel, workflowSubmit} from "@/tools/workflow.js";
import PopupPayBank from "@/views/pur/components/PopupPayBank.vue";


const cardBodyStyle = ref(style.card)


onMounted(() => {
  handleSearch()
  dictData()
  updateViewportHeight()
})


/**
 *   查询
 */




const query = ref({})
const tableData = ref([])
const handleSearch = () => {
  currentPage.value = 1
  getTableData()
}


const getTableData = () => {
  var url = 'sal/SalPrepayRetreat/query'
  var param = {
    page: currentPage.value,
    rows: pageSize.value,
    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 totalRows = ref(0)
const pageSizes = ref([ 10, 20, 30, 40])
const pageSize = ref(10)
const handleSizeChange = (val) => {
  pageSize.value = val
  getTableData()
}
const handleCurrentChange = (val) => {
  currentPage.value = val
  getTableData()
}
/**
 * 分页
 */


/**
 * 新增
 */
const dialogVisible = ref(false)
const dialogVisibleCk = ref(false)
const form = ref({
  deptNm: "",
  itemCd: "",
  itemNm: "",
  stlGrd: "",
  specType: "",
  year: "",
  applyDt: "",
  uom: "",
  remark: "",
})
const ruleFormRef = ref()
// 校验
const rules = reactive({
  retreatDt: [
    {required: true, message: '不允许为空', trigger: 'blur' | 'change'},
  ],
  payMth: [
    {required: true, message: '不允许为空', trigger: 'blur' | 'change'},
  ],
  tradePartnerCode: [
    {required: true, message: '不允许为空', trigger: 'blur' | 'change'},
  ],
  tradePartnerName: [
    {required: true, message: '不允许为空', trigger: 'blur' | 'change'},
  ],
  accountNo: [
    {required: true, message: '不允许为空', trigger: 'blur' | 'change'},
  ],
})

const handleAdd = () => {
  form.value = {
    procAmt: 0
  }
  dialogVisible.value = true

}


/**
 * 新增
 */


/**
 * 保存、修改、删除
 */

const openDialog = () => {
}

const handleSave = (ruleFormRef) => {
  ruleFormRef.validate((valid, fields) => {
    if (valid) {
      var url = 'sal/SalPrepayRetreat/save'
      var param = {
        json: JSON.stringify(form.value),
      }

      proxy.$axios.post(url, param).then(response => {
        if (response.data.code == 0) {
          form.value = response.data.data
          ElMessage({
            message: '保存成功',
            type: 'success',
          })
          getTableData()
          dialogVisible.value = false
        } else {
          // ElMessage.error('操作失败！' + response.data.msg)
          ElMessage({
            message: '操作失败' + response.data.msg,
            type: 'error'
          })
        }
      })

    } else {
      console.log('error submit!', fields)
    }
  })
}
const handleCancelSave = () => {
  dialogVisible.value = false
  getTableData()
}
const handleCancelSaveInfo = () => {
  dialogVisibleCk.value = false
}
const handleEdit = (row) => {

  dialogVisible.value = true
  planNoShow.value = false
  form.value = row

}
const handleInfo = (row) => {

  dialogVisibleCk.value = true
  form.value = row

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



/**
 * 保存、修改、删除
 */

const multipleSelection = ref([])
const handleSelectionChange = (val) => {
  multipleSelection.value = val
}

const handleRemoveBatch = () => {
  console.log('handleRemoveBatch')

  if (multipleSelection.value.length < 1) {
    ElMessage({
      type: 'warning',
      message: '请选择要删除的数据!'
    })
    return
  }

  ElMessageBox.confirm('此操作将删除该数据, 是否继续?', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    var ids = []
    multipleSelection.value.forEach((item, index) => {
      ids.push(item.id)
    })
    var url = 'sal/SalPrepayRetreat/removeBatch'
    var param = {
      ids: JSON.stringify(ids)
    }
    proxy.$axios.post(url, param).then(response => {
      if (response.data.code == '0') {
        ElMessage({
          type: 'success',
          message: '操作成功!',
        });
        getTableData()
        dialogVisible.value = false
      } else {
        ElMessage({
          type: 'error',
          message: '操作失败!' + response.data.msg
        });
      }
    })
  }).catch(() => {
    ElMessage({
      type: 'info',
      message: '已取消删除'
    })
  })
}

const handleEditBatch = () => {
  console.log('handleEditBatch')
  if (multipleSelection.value.length != 1) {
    ElMessage({
      type: 'warning',
      message: '请选择一条数据编辑!'
    })
    return
  }
  handleEdit(multipleSelection.value[0])
}

const handleUpload = () => {
  console.log('handleUpload')
}

const handleDownload = () => {
  console.log('handleDownload')
}

const handleImport = () => {
  console.log('handleImport')
}

const handleExport = () => {
  console.log('handleExport')
}




const loading = ref(false)



const dictList = ref({})
const dictData = () => {
  var url = 'framework/Common/querySelectorList'
  var param = {
    type: JSON.stringify(['MEASURING_UNIT' , 'COM_PAY_MTH' ,'PUR_PAY_STS' ,'PROVINCE_CODE'])
  }
  proxy.$axios.get(url, param).then(response => {
    if (response.data.code == '0') {
      dictList.value = response.data.data
    } else {
      ElMessage.error('操作失败！' + response.data.msg)
    }
  })

}


const collectionTySelect = (val) => {
  form.value.uom = val
}
const PopupRef = ref(null)
const itemDialog = () => {
  PopupRef.value.open()
}
const retu = (val) => {
  console.log("val", val)
  form.value.itemCd = val.itemCd
  form.value.itemId = val.id
  form.value.itemNm = val.itemNm
  form.value.itemType = val.itemType
  form.value.uom = val.unit

}
const retuKs = (val) => {

  form.value.tradePartnerId = val.id
  form.value.tradePartnerCode = val.tradePartnerCode
  form.value.tradePartnerName = val.tradePartnerName

}
const retuBank = (val) => {

  form.value.accountNo = val.beneficiaryAccount
  form.value.bankNo = val.bankNo
  form.value.bankNm = val.bankNm
  form.value.payProv = val.bankProvince
  form.value.payCity = val.bankCity
  console.log(val)
}
const formatter = (row, column, cellValue, index) => {
  if (!cellValue || cellValue == null || cellValue == '') {
    return cellValue
  }
  switch (column.property) {
    case 'uom':
      cellValue = dictList.value && Array.isArray(dictList.value.MEASURING_UNIT)
          ? dictList.value.MEASURING_UNIT.find(item => item.dicCode == cellValue)?.dicName
          : undefined
      break;
    case 'payMth':
      cellValue =dictList.value && Array.isArray(dictList.value.COM_PAY_MTH)
          ? dictList.value.COM_PAY_MTH.find(item => item.dicCode == cellValue)?.dicName
          : undefined
      break;
    case 'paySts':
      cellValue =dictList.value && Array.isArray(dictList.value.PUR_PAY_STS)
          ? dictList.value.PUR_PAY_STS.find(item => item.dicCode == cellValue)?.dicName
          : undefined
      break;
    case 'payProv':
      cellValue =dictList.value && Array.isArray(dictList.value.PROVINCE_CODE)
          ? dictList.value.PROVINCE_CODE.find(item => item.dicCode == cellValue)?.dicName
          : undefined
      break;
  }
  return cellValue
}

const PopupRefKs = ref(null)
const PopupPayBankRef = ref(null)
const ksDialog = (index) => {
  PopupRefKs.value.open()
}
const bankDialog = () => {

  if (!form.value.tradePartnerId){
    ElMessage({
      type: 'warning',
      message: '请先选择客户'
    })
    return
  }
  PopupPayBankRef.value.open()
}
const submit = () => {
  ElMessage({
    type: 'info',
    message: '暂不支持提交'
  })
}




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

const planNoShow = ref(true)
const flowId = ref('SalRetreatFinance')
const handleSubmit = (row) => {
  var url = 'sal/SalPrepayRetreat/ifSubmitFq'
  var process = {
    'id': row.id,
  }
  var param = {
    json: JSON.stringify(process),
  }
  proxy.$axios.post(url, param).then(response => {
    if (response.data.code === 0) {
      ElMessageBox.confirm(
          '确定提交流程?',
          '提示', {
            confirmButtonText: '确认',
            cancelButtonText: '取消',
            type: 'warning',
            draggable: true,
          }
      ).then(() => {
        var obj = {
          id : row.id,
          procAmt: row.procAmt
        }
        return workflowSubmit(
            flowId.value,
            '销售退款审批流程',
            '初始化提交',
            JSON.stringify(obj),
            row.workId,
            row.trackId)
      }).then((result) => {
        if(result.status === 'success'){

          console.log(result)
          // 将结果返回的workId和trackId保存
          var url = 'sal/SalPrepayRetreat/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: '已取消提交',
        })
      })
    } else {
      ElMessage({
        type: 'error',
        message: '操作失败!' + response.data.msg
      });
    }
  })

}


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: '已取消提交',
    })
  })
}

</script>

<style scoped>
::v-deep .diaClass .el-form-item {
  width: 100%
}
.el-form-item {
  width: 100%
}
::v-deep .el-dialog__body {
  background-color: #F2F6FC;
}

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

.highlighted-cell {
  border: 1px solid red;
  border-radius: 5px;
  //padding: 1px;
  //color: #67c23a;
}
</style>
