<template>
  <Page>
    <ElForm v-show="showSearchForm" inline @submit.prevent="paging">
      <!-- <ElFormItem label="Id">
        <ElInput v-model="searchForm.id" placeholder="Id" />
      </ElFormItem>
      <ElFormItem label="用户">
        <ElInput v-model="searchForm.userId" placeholder="用户" />
      </ElFormItem> -->
      <ElFormItem label="身份类型">
        <el-select style="width: 200px" v-model="searchForm.identityCategory" placeholder="身份类型">
          <el-option v-for="item in bizList" :key="item.value" :label="item.label" :value="item.value"/>
        </el-select>
      </ElFormItem>
      <!-- <ElFormItem label="客户姓名">
        <ElInput v-model="searchForm.customerName" placeholder="客户姓名" />
      </ElFormItem> -->

      <ElFormItem label="结算方式">
        <el-select v-model="searchForm.settlementWay" placeholder="结算方式" style="width: 200px">
          <el-option v-for="item in payList" :key="item.value" :label="item.label" :value="item.value"/>
        </el-select>
      </ElFormItem>
      <!--
      <ElFormItem label="客户联系电话">
        <ElInput v-model="searchForm.phone" placeholder="客户联系电话" />
      </ElFormItem>
      <ElFormItem label="组织信息">
        <ElInput v-model="searchForm.orgId" placeholder="组织信息" />
      </ElFormItem>
      <ElFormItem label="创建人">
        <ElInput v-model="searchForm.creatorId" placeholder="创建人" />
      </ElFormItem>
      <ElFormItem label="修改人">
        <ElInput v-model="searchForm.modifierId" placeholder="修改人" />
      </ElFormItem>
      <ElFormItem label="创建时间">
        <ElInput v-model="searchForm.createTime" placeholder="创建时间" />
      </ElFormItem>
      <ElFormItem label="修改时间">
        <ElInput v-model="searchForm.modifyTime" placeholder="修改时间" />
      </ElFormItem> -->
      <ElFormItem>
        <ElButton :icon="elIcons.Search" :loading="searching" native-type="submit" type="primary">搜索</ElButton>
        <ElButton :icon="elIcons.Refresh" :loading="searching" @click="reset">重置</ElButton>
      </ElFormItem>
    </ElForm>

    <div class="tool-bar">
      <!-- <ElButton :icon="elIcons.Plus" type="primary" @click="addHandler">新建</ElButton> -->
      <ElButton :icon="elIcons.Filter" type="default" @click="showSearchForm = !showSearchForm"/>
    </div>

    <ElTable v-loading="searching" :data="tableData" cell-class-name="table-cell" class="table-list" empty-text="暂无数据" header-row-class-name="table-header" row-key="id">
      <!-- <ElTableColumn label="Id" prop="id" /> -->
      <ElTableColumn label="账号" prop="username"/>
      <ElTableColumn label="联系人" prop="nickname"/>
      <ElTableColumn label="身份类型" prop="identityCategoryTxt"/>
      <ElTableColumn label="组织信息" prop="orgId"/>
      <ElTableColumn label="客户姓名" prop="customerName"/>
      <!-- <ElTableColumn label="客户联系电话" prop="phone" /> -->
      <ElTableColumn label="结算方式" prop="settlementWayTxt"/>
      <ElTableColumn label="是否管理员">
        <template #default="scope">
          {{ scope.row.manager ? '是' : '否' }}
        </template>
      </ElTableColumn>
      <ElTableColumn label="联系电话" prop="phone"/>
      <ElTableColumn label="创建时间" prop="regdate"/>
      <!-- <ElTableColumn label="修改时间" prop="modifyTime" /> -->
      <!-- <ElTableColumn label="是否删除" prop="deleted"/> -->
      <ElTableColumn label="操作" width="180">
        <template #default="scope">
          <div class="action-btn">
            <ElPopconfirm confirm-button-text="是" cancel-button-text="否" confirm-button-type="danger" cancel-button-type="primary" placement="top" title="是否删除当前数据?" width="180" @confirm="delHandler(scope)">
              <template #reference>
                <ElButton text type="danger" :loading="deling">删除</ElButton>
              </template>
            </ElPopconfirm>
            <ElButton text type="primary" @click="modifyHandler(scope)">修改</ElButton>
          </div>
        </template>
      </ElTableColumn>
    </ElTable>
    <ElPagination :page-size="pagination.size" :total="pagination.total" class="pagination" layout="prev, pager, next" @change="pageChangeHandler"/>
    <CustomerForm ref="customerForm" @edit-succ="paging"/>
  </Page>
</template>

<script lang="ts" setup>
import CustomerApi from '@/pages/cst/customer/customer-api.ts'
import CustomerForm from '@/pages/cst/customer/CustomerForm.vue'
import Page from '@/components/page/Page.vue'
import { elIcons } from '@/common/element/element.ts'

const tableData = ref<CustomerTypes.SearchCustomerResult[]>([])
let searchForm = reactive<CustomerTypes.SearchCustomerParam>({
  current: 1,
  size: 20,
})
const searching = ref(false)
const deling = ref(false)
const showSearchForm = ref(true)
const customerFormIns = useTemplateRef<InstanceType<typeof CustomerForm>>('customerForm')
const pagination = reactive<G.Pagination>({
  total: 0,
  current: 1,
  size: 1,
})

function pageChangeHandler(currentPage: number, pageSize: number) {
  searchForm.current = currentPage
  searchForm.size = pageSize
  paging()
}

function showDialog(data?: CustomerTypes.SearchCustomerResult) {
  customerFormIns.value?.open(data)
}

function delHandler({row}: { row: CustomerTypes.SearchCustomerResult }) {
  deling.value = true
  CustomerApi.del([ row.id! ])
    .then(() => {
      ElMessage.success('删除成功')
      paging()
    })
    .finally(() => {
      deling.value = false
    })
}

function modifyHandler({row}: { row: CustomerTypes.SearchCustomerResult }) {
  showDialog(row)
}

function reset() {
  // Object.assign(searchForm, {});
  searchForm = reactive<CustomerTypes.SearchCustomerParam>({
    current: 1,
    size: 20,
  })
  paging()
}

function paging() {
  searching.value = true
  CustomerApi.paging(searchForm)
    .then((res) => {
      tableData.value = res.data?.records ?? []
    })
    .finally(() => {
      searching.value = false
    })
}

const payList = [
  {
    value: 'YueJie',
    label: '月结',
  },
  {
    value: 'YuE',
    label: '余额',
  },
  {
    value: 'XianFu',
    label: '现付',
  },
]

const bizList = [
  {
    value: 'ChanFei',
    label: '产废方',
  },
  {
    value: 'YunShu',
    label: '运输方',
  },
  {
    value: 'XiaoNa',
    label: '消纳方',
  },
  {
    value: 'CaiGou',
    label: '采购方',
  },
  {
    value: 'SiJi',
    label: '司机',
  },
]

onMounted(() => {
  paging()
})
</script>

<style lang="stylus" scoped>
.table-list {
  flex 1;
  width 100%

  :deep(.table-header) {
    color #454C59

    th {
      background-color #EDF1F7
      font-weight 500
      position relative

      & > div {
        display flex
        gap 5px
        align-items center
      }

      &:not(:first-child) > div::before {
        position: absolute;
        top: 50%;
        left: 1px;
        width: 1px;
        background-color: #D3D7DE;
        transform: translateY(-50%);
        content: "";
        height 50%
      }
    }
  }

  :deep(.table-cell) {
    color #2F3540
  }

  .action-btn {
    width 100%
    display flex
    flex-wrap wrap

    & > button {
      margin 0
    }
  }
}

.tool-bar {
  display flex
  justify-content flex-end
  margin 0 0 20px 0
}

.pagination {
  justify-content: end;
  margin: 8px;
}
</style>
