<template>
  <div class="app-container">
    <CommonPage
      :operationBtnList="operationBtnList"
      :visibleDefaultButtons="visibleDefaultButtons"
      :showSearchForm="true"
      :show-pagination="true"
      :currentPage="queryParams.pageNo"
      :total="total"
      :pageSize="queryParams.pageSize"
      @current-change="changePageNo"
      @size-change="changePageSize"
    >
      <!-- 查询条件插槽 -->
      <template #searchForm>
        <el-form :model="queryParams" ref="queryRef" label-width="78px" label-position="top">
          <el-row :gutter="20">
            <el-col :sm="12" :lg="6" :xs="24">
              <el-form-item label="创建时间">
                <el-date-picker
                  v-model="dateRange"
                  value-format="YYYY-MM-DD"
                  type="daterange"
                  range-separator="-"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                  @clear="clearDateRange"
                ></el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :sm="12" :lg="6" :xs="24">
              <el-form-item label="流程编号" prop="fnaNo">
                <el-input
                  v-model="queryParams.fnaNo"
                  placeholder="请输入流程编号"
                  clearable
                  @keyup.enter="handleQuery"
                />
              </el-form-item>
            </el-col>
            <el-col :sm="12" :lg="6" :xs="24">
              <el-form-item label="客户姓名" prop="customerName">
                <el-input
                  v-model="queryParams.customerName"
                  placeholder="请输入姓名"
                  clearable
                  @keyup.enter="handleQuery"
                />
              </el-form-item>
            </el-col>

            <el-col :sm="12" :lg="6" :xs="24">
              <el-form-item label="状态" prop="status">
                <el-select v-model="queryParams.status" placeholder="请选择" clearable>
                  <el-option
                    v-for="dict in csf_fna_status"
                    :key="dict.value"
                    :label="dict.label"
                    :value="dict.value"
                  />
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </template>

      <!-- 表格插槽 -->
      <template #table>
        <el-table
          v-loading="loading"
          :data="tenantList"
          @selection-change="tableSelect"
          @sort-change="sortChange"
        >
          <el-table-column type="index" width="50" label="序号" />
          <el-table-column label="客户姓名" align="center" prop="customerName" width="100" />
          <el-table-column label="状态" align="center" width="150">
            <template #default="scope">
              <span v-if="scope.row.status == 'UNCOMPLETED'">
                <span style="color: #ff7d00" class="iconfont icon-yanqiweiwancheng"></span> 未完成
              </span>
              <span v-if="scope.row.status == 'COMPLETED'"
                ><span style="color: #43cf7c" class="iconfont icon-yiwancheng"></span> 已完成
              </span>
              <span v-if="scope.row.status == 'DRAFT'"
                ><span style="color: #86909c" class="iconfont icon-genjinjilu"></span> 草稿
              </span>
            </template>
          </el-table-column>
          <el-table-column
            label="流程编号"
            align="center"
            prop="fnaNo"
            width="200"
            show-overflow-tooltip
          />
          <el-table-column
            label="预约编号"
            align="center"
            prop="appointmentNo"
            width="200"
            show-overflow-tooltip
          />
          <el-table-column label="新单编号" align="center" prop="policyId" />
          <el-table-column label="保单号" align="center" prop="policyNo" width="150" />

          <el-table-column label="创建时间" sortable align="center" prop="createTime" width="200">
            <template #default="scope">
              <span>{{ parseTime(scope.row.createTime) }}</span>
            </template>
          </el-table-column>
          <el-table-column
            label="操作"
            align="center"
            width="250"
            class-name="small-padding fixed-width"
            fixed="right"
          >
            <template #default="scope">
              <el-button type="primary" link @click="handleUpdate(scope.row)">修改</el-button>
              <el-button type="success" link @click="handleCopy(scope.row)">生成副本</el-button>
              <el-button
                v-if="!scope.row.policyNo"
                type="danger"
                link
                @click="handleDelete(scope.row)"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
        <!-- <div style="width: 100%; display: flex; justify-content: flex-end; margin-bottom: 30px">
          <pagination
            v-show="total >= 0"
            :total="total"
            v-model:page="queryParams.pageNo"
            v-model:limit="queryParams.pageSize"
            @pagination="getList"
            style="text-align: right"
          />
        </div> -->
      </template>
    </CommonPage>
    <!-- 下一步到预约 -->
    <div class="bottomBtn">
      <el-button type="primary" @click="goToAppointment">下一步</el-button>
    </div>
  </div>
</template>

<script setup name="FnaList">
import CommonPage from '@/components/commonPage'
import { getFnaList, deleteFna, subProcess } from '@/api/sign/fna'
import useUserStore from '@/store/modules/user'

const userStore = useUserStore()
const router = useRouter()
const { proxy } = getCurrentInstance()
const { csf_fna_status } = proxy.useDict('csf_fna_status')

const tenantList = ref([])
const loading = ref(true)
const total = ref(0)
const dateRange = ref([])
const data = reactive({
  form: {},
  queryParams: {
    pageNo: 1,
    pageSize: 10,
    startTime: '',
    endTime: '',
    sortField: '',
    sortOrder: ''
  }
})

const { queryParams, form, rules } = toRefs(data)
// 控制要显示的默认按钮
const visibleDefaultButtons = ref(['add', 'query', 'reset']) // 只显示新增和查询两个默认按钮
// 按钮配置
const operationBtnList = ref([
  {
    key: 'add',
    label: '新建流程',
    direction: 'left',
    click: handleAdd
  },
  {
    key: 'reset',
    direction: 'right',
    click: resetQuery
  },
  {
    key: 'query',
    direction: 'right',
    click: handleQuery
  }
])
const changePageNo = val => {
  queryParams.value.pageNo = val
  getList()
}
const changePageSize = val => {
  queryParams.value.pageSize = val
  getList()
}
const clearDateRange = () => {
  dateRange.value = []
}
const handleCopy = row => {
  subProcess({ fnaBizId: row.fnaBizId }).then(response => {
    if (response.code === 200) {
      getList()
      proxy.$modal.msgSuccess('生成副本成功')
    }
  })
}
const sortChange = ({ prop, order }) => {
  if (order == 'ascending') {
    queryParams.value.sortOrder = 'ascend'
  } else {
    queryParams.value.sortOrder = 'descend'
  }
  if (prop) {
    queryParams.value.sortField = prop
  }
  getList()
}
/** 多选框选中数据 */
function tableSelect(selection) {
  // selectIdsList.value = selection.map(item => item.projectBizId)
}
const goToAppointment = () => {
  router.push({ path: '/sign/appointment' })
}
/** 查询租户列表 */
function getList() {
  if (dateRange.value.length > 0) {
    queryParams.value.startTime = `${dateRange.value[0]} 00:00:00`
    queryParams.value.endTime = `${dateRange.value[1]} 23:59:59`
  } else {
    queryParams.value.startTime = ''
    queryParams.value.endTime = ''
  }
  loading.value = true
  try {
    getFnaList(queryParams.value).then(response => {
      tenantList.value = response.data.records
      total.value = response.data.total
      loading.value = false
    })
  } catch (error) {
    tenantList.value = []
  } finally {
    loading.value = false
  }
}

/** 搜索按钮操作 */
function handleQuery() {
  queryParams.value.pageNo = 1
  getList()
}

/** 重置按钮操作 */
function resetQuery() {
  dateRange.value = []
  proxy.resetForm('queryRef')
  queryParams.value = {
    pageNo: 1,
    pageSize: 10,
    startTime: '',
    endTime: ''
  }
  handleQuery()
}

/** 删除按钮操作 */
function handleDelete(row) {
  proxy.$modal
    .confirm('是否确认删除' + row.customerName + '的FNA流程？')
    .then(function () {
      return deleteFna({ fnaBizId: row.fnaBizId })
    })
    .then(() => {
      getList()
      proxy.$modal.msgSuccess('删除成功')
    })
    .catch(() => {})
}

/** 新增按钮操作 */
function handleAdd() {
  router.push('/sign/FnaList/edit?type=add')
}

/** 修改按钮操作 */
function handleUpdate(row) {
  router.push({
    path: '/sign/FnaList/edit',
    query: { fnaBizId: row.fnaBizId, type: 'edit', status: row.status, source: 'fnaList' }
  })
}

getList()
</script>
<style lang="scss" scoped>
.bottomBtn {
  box-sizing: border-box;
  width: 100%;
  text-align: right;
  margin-top: 20px;
  /* position: fixed;
  bottom: 0;
  background-color: #fff;
  z-index: 999;
  border-top: 1px solid rgb(247 247 247);
  padding: 10px 20px; */
}
</style>
