<template>
  <div>
    <el-card :body-style="cardBodyStyle">
      <el-form :model="query" label-position="right"  label-width="auto" >
        <div>
          <el-row :gutter="10" style="margin-bottom: 5px;">
            <el-col :span="5">
              <el-form-item label="客户名称" style="margin-bottom: 0px;margin-left: 14px">
                <el-input v-model="query.tradePartnerName" placeholder="请输入客户名称" clearable>
                  <template #append>
                    <el-button :icon="Search"/>
                  </template>
                </el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </div>

      </el-form>
    </el-card>
    <ButtonBox @search="search"></ButtonBox>
<!--    <el-card :body-style="cardBodyStyle">-->
<!--      <el-button type="primary" @click="search" plain>查询</el-button>-->
<!--    </el-card>-->
    <el-card :body-style="cardBodyStyle">
      <el-table :data="tableData" border highlight-current-row :height="height">
        <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="tradePartnerCode" label="客户编码" 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"
                         show-overflow-tooltip>
        </el-table-column>
        <el-table-column v-if="true" prop="ballanceAmt" label="客户余额（元）" header-align="center" align="center"
                         show-overflow-tooltip>
        </el-table-column>
        <el-table-column v-if="true" prop="ballanceDtm" label="变动日期" header-align="center" align="center"
                         show-overflow-tooltip>
        </el-table-column>
        <el-table-column v-if="true" prop="contrNo" label="合同编号" header-align="center" align="center"
                         show-overflow-tooltip>
        </el-table-column>
        <el-table-column v-if="true" prop="khContrNo" label="对方合同编号" header-align="center" align="center"
                         show-overflow-tooltip>
        </el-table-column>
        <el-table-column v-if="true" prop="capUse" label="资金用途" header-align="center" align="center"
                         show-overflow-tooltip>
          <template #default="scope">
            {{ dic(scope.row.capUse) }}
          </template>
        </el-table-column>
        <el-table-column v-if="true" prop="payMth" label="收款类型" header-align="center" align="center" :formatter="formatter"
                         show-overflow-tooltip>
        </el-table-column>
        <el-table-column v-if="true" prop="remark" label="备注" header-align="center" align="center"
                         show-overflow-tooltip>
        </el-table-column>
        <el-table-column label="操作" header-align="center" align="center" width="200px">
          <template #default="scope">
            <el-button type="danger" plain @click="handleReback(scope.row)">退回</el-button>
            <el-button  type="success" plain @click="handleRebackZCHK(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" draggable title="收款分配" v-model="insertDialogShow"
               width="40%"
               top="5vh">
      <el-card class="box-card">
        <el-tag>基本信息</el-tag>
        <el-form :model="insertForm" :rules="rules" label-width="130" label-position="right" :inline="true">
          <el-row>
            <el-col :span="12">
              <el-form-item label="客户名称" prop="supplierNm">
                <el-col :span="24">
                  <el-input v-model="insertForm.supplierNm" disabled>

                  </el-input>
                </el-col>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="订单号" prop="salOrdNo">
                <el-input v-model="insertForm.salOrdNo" disabled>
                  <!--                  <template #append>-->
                  <!--                    <el-button :icon="Search"/>-->
                  <!--                  </template>-->
                </el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="合同编号" prop="contrNo">
                <el-input v-model="insertForm.contrNo" disabled>

                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="对方合同编号" prop="kHcontrNo">
                <el-input v-model="insertForm.kHcontrNo" disabled>

                </el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="客户余额(元)" prop="ballanceAmt">

                <el-input-number style="width: 100%" min="0" :precision="2" :step="0.1" controls-position="right"
                                 disabled
                                 v-model="insertForm.ballanceAmt"></el-input-number>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="分配金额" prop="kHcontrNo2">
                <el-input-number style="width: 100%" min="0" :precision="2" :step="0.1" controls-position="right"
                                 v-model="insertForm.kHcontrNo2"></el-input-number>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="款项用途(元)" prop="capUse">
                <el-input-number style="width: 100%" min="0" :precision="2" :step="0.1" controls-position="right"
                                 disabled
                                 v-model="insertForm.capUse"></el-input-number>

              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="资金变动时间" prop="ballanceDtm">
                <el-date-picker
                    disabled
                    style="width: 100%"
                    v-model="insertForm.ballanceDtm"
                    type="datetime"
                    placeholder=""
                />
              </el-form-item>
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="24">
              <el-form-item label="订单备注">
                <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" @click="insertDialogSave">保存</el-button>
          <el-button type="danger" @click="insertDialogShow = false">取消</el-button>
        </div>
      </template>


    </el-dialog>
  </div>
</template>

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

const {
  proxy
} = getCurrentInstance()


import style from '@/tools/style'

const cardBodyStyle = ref(style.card)


import SearchBar from '@/components/SearchBar.vue';

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({
  birthDate: '',
  type: '',
  code: '',
  name: '',
  sex: '',
  contractType: '',
  contractFlag: '',
  addTime: ['', '']
})
const tableData = ref([])
const tableDataTwo = ref([])

const getTableData = () => {
  var url = 'sal/PaymentBallance/queryTh'
  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()
}
/**
 * 分页
 */

import PopupMenuTree from '@/components/PopupMenuTree.vue'
import ButtonBar from "@/components/ButtonBar.vue";
import ButtonBox from "@/components/ButtonBox.vue";

const PopupMenuTreeRef = ref(null)
const showPop = () => {
  console.log('showPop')
  PopupMenuTreeRef.value.show()
}
/**
 * 新增表单form
 */
const insertForm = reactive({
  id: '',
  ddh: '',
  contrNo: '',
  ordTy: '',
  supplierNm: '',
  salTy: '',
  payMth: '',
  salMth: '',
  kczz: '',
  bz: '',
  salOrdNo: '',
  htrq: '',
  delvDt: '',
  invMth: '',
  delvPlace: '',
  jhfs: '',
  scfs: '',
  ysfs: '',
  hthl: '',
  myfs: '',
  shhl: '',
  ckgj: '',
  qsd: '',
  mdd: '',
  djysbl: '',
  dkysbl: '',
  remark: '',
  khContrNo: '',
  hzsl: '',
  shxx: '',
  jeht: '',
  hzje: '',
  zlsm: '',
  ballanceAmt: '',
})

// 新增订单
const insertDialogShow = ref(false)
const insertDialog = () => {
  insertDialogShow.value = true
}
const handleEdit = () => {
  insertDialogShow.value = true
}
const handleReback = (row) => {
  ElMessageBox.confirm(
      '确定退回吗?',
      '提示', {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning',
        draggable: true,
      }
  )
      .then(() => {
        var url = 'sal/PaymentBallance/ballanceReback'
        var param = {
          json: row.id ,

        }
        proxy.$axios.get(url, param).then(response => {
          if (response.data.code == 0) {
            ElMessage({
              message: '退回成功',
              type: 'success',
            })
            insertDialogShow.value = false
            getTableData()
          } else {
            ElMessage({
              type: 'error',
              message: '操作失败' + response.data.msg
            })
          }
        });
      })
      .catch(() => {
        ElMessage({
          type: 'info',
          message: '已取消',
        })
      })
}
const handleRebackZCHK = (row) => {
  ElMessageBox.confirm(
      '确定转成货款吗?',
      '提示', {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning',
        draggable: true,
      }
  )
      .then(() => {
        var url = 'sal/PaymentBallance/ballanceRebackZCHK'
        var param = {
          json: row.id ,

        }
        proxy.$axios.get(url, param).then(response => {
          if (response.data.code == 0) {
            ElMessage({
              message: '退回成功',
              type: 'success',
            })
            insertDialogShow.value = false
            getTableData()
          } else {
            ElMessage({
              type: 'error',
              message: '操作失败' + response.data.msg
            })
          }
        });
      })
      .catch(() => {
        ElMessage({
          type: 'info',
          message: '已取消',
        })
      })
}

const insertDialogSave = () => {
  insertDialogShow.value = false
  ElMessage({
    message: '模拟成功！',
    type: 'success',
  })
  var url = 'framework/SysUser/saveAll'

}
// 校验
const rules = reactive({
  contrNo: [
    {required: true, message: 'Please input Activity name', trigger: 'blur'},
  ],
  salOrdNo: [
    {required: true, message: 'Please input Activity name', trigger: 'blur'},
  ],
  capUse: [
    {required: true, message: 'Please input Activity name', trigger: 'blur'},
  ],
  kHcontrNo: [
    {required: true, message: 'Please input Activity name', trigger: 'blur'},
  ],
})

const dic = (val) => {
  var reStr = ''
  for( var i = 0 ; i < dictList.value.PAY_FLAG.length ; i++){
    if (dictList.value.PAY_FLAG[i].dicCode == val){
      reStr = dictList.value.PAY_FLAG[i].dicName
      return reStr
    }
  }
  return reStr
}

const search = () => {
  getTableData()
}
const dictList = ref({})
const dictData = () => {
  var url = 'framework/Common/querySelectorList'
  var param = {
    type: JSON.stringify(['PAY_FLAG' ,'COM_PAY_MTH'])
  }
  proxy.$axios.get(url, param).then(response => {
    if (response.data.code == '0') {
      dictList.value = response.data.data
      dictList.value.PAY_FLAG[0].disabled = false
    } else {
      ElMessage.error('操作失败！' + response.data.msg)
    }
  })
}
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 'payMth':
      cellValue = dictList.value && Array.isArray(dictList.value.COM_PAY_MTH)
          ? dictList.value.COM_PAY_MTH.find(item => item.dicCode == cellValue)?.dicName
          : undefined
      break;
  }
  return cellValue
}

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

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

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

.el-date-editor--date {
  width: 100%;
}
</style>
