<!-- 民意征集管理 -->
<template>
  <div class="pricemoitorrecord">
    <a-card :bordered="false">
      <a-space class="search">
        <div class="silt-title">
          <span style="width: 70px; margin-right: 8px; text-align: right; display: block; line-height: 30px">{{
            '征集标题'
          }}</span>
          <a-input style="width: 220px" v-model:value="SearchFormDel.collectionTitle" placeholder="请输入" />
        </div>
        <div class="silt-title">
          <span style="width: 70px; margin-right: 8px; text-align: right; display: block; line-height: 30px">{{
            '征集状态'
          }}</span>
          <a-select :disabled="disabled" style="width: 250px" v-model:value="SearchFormDel.progressStatus">
            <a-select-option :value="0">未开始</a-select-option>
            <a-select-option :value="1">征集中</a-select-option>
            <a-select-option :value="2">已结束</a-select-option>
          </a-select>
        </div>
        <div class="btnBox">
          <a-button type="primary" class="primarySele" @click="Search"> 查询 </a-button>
          <a-button class="primarySele snowy-buttom-left" @click="onReset"> 重置 </a-button>
          <a-button type="primary" class="primarySele" @click="onView('add', {})"> 新增 </a-button>
          <a-button class="btnl colro primarySele" type="primary" :disabled="!hasSelected" :loading="state.loading"
            @click="start">
            批量操作(启用/禁用)
          </a-button>
        </div>
      </a-space>
    </a-card>

    <div class="list" style="margin-top: 10px">
      <a-table :data-source="tableData" :pagination="pagination" :columns="tableColumns" :row-key="(record) => record"
        :row-selection="{ selectedRowKeys: state.selectedRowKeys, onChange: onSelectChange }">
        <template #bodyCell="{ column, record }">
          <template v-if="column.dataIndex === 'progressStatus'">
            <div>
              {{ record.progressStatus == 0 ? '未开始' : record.progressStatus == 1 ? '征集中' : '已结束' }}
            </div>
          </template>
          <template v-if="column.dataIndex === 'status'">
            <div class="switch_del">
              <a-switch v-if="record.status !== 1" :checked="record.status == 2 ? true : false" :checked-children="'启用'"
                :un-checked-children="'禁用'" @change="handleSwitchChange(record)" size="default" />
              <a-switch v-if="record.status == 1" :checked="record.status == 1 ? false : true" :checked-children="'启用'"
                :un-checked-children="'保存'" @change="handleSwitchChange(record)" size="default" />
            </div>
          </template>
          <template v-if="column.key === '操作'">
            <a-button type="link" @click="onView('view', record)">查看</a-button>
            <a-button v-if="record.status == 1" type="link" @click="onView('edit', record)">编辑</a-button>
          </template>
        </template>
      </a-table>
    </div>
    <Form ref="formRef" @successful="tableRef.refresh()" @change="change" />
  </div>
</template>
<script setup name="policyFileControl">
import business from '@/api/interaction.info/solicitationApi'
import { listPagination } from '@/hook/listlistPagination.js'
import { reactive, ref } from 'vue'
import { useRouter } from 'vue-router'
import { defineComponent } from 'vue'
import { message } from 'ant-design-vue'
import Form from './form.vue'
const router = useRouter()

const tableColumns = [
  {
    title: '序号',
    dataIndex: 'INDEX',
    align: 'center',
    customRender: ({ text, record, index }) => {
      return `${index + 1}`
    }
  },
  { title: '征集标题', align: 'center', dataIndex: 'collectionTitle' },
  { title: '征集部门', align: 'center', dataIndex: 'departmentName' },
  { title: '开始时间', align: 'center', dataIndex: 'startTime' },
  { title: '结束时间', align: 'center', dataIndex: 'endTime' },
  { title: '征集状态', align: 'center', dataIndex: 'progressStatus' },
  { title: '征集意见总数量', align: 'center', dataIndex: 'viewsNumber' },
  { title: '审核通过意见数量', align: 'center', dataIndex: 'auditPassStatusNumber' },
  { title: '状态', align: 'center', dataIndex: 'status' },
  { title: '操作', align: 'center', key: '操作' }
]

//共享 //状态的禁用和启用的开关并调用接口
const handleSwitchChange = async (v) => {
  if (v.status == 1) {
    const res = await business.collectDisable([{ id: v.id, status: 2 }])
  } else if (v.status == 2) {
    const res = await business.collectDisable([{ id: v.id, status: 3 }])
  } else if (v.status == 3) {
    const res = await business.collectDisable([{ id: v.id, status: 2 }])
  }
  await onSearch()
}
// 初始数据存放
const state = reactive({
  selectedRowKeys: [],
  loading: false
})
// 判断批量操作启用禁用的disabled属性
const hasSelected = computed(() => state.selectedRowKeys.length > 0)
// 批量操作的启用和禁用
const start = async () => {
  state.loading = true
  const res = await business.collectDisable(del.value)
  setTimeout(() => {
    state.selectedRowKeys = []
    state.loading = false
    onSearch()
  }, 300)
}
const del = ref([])
const onSelectChange = (selectedRowKeys) => {
  state.selectedRowKeys = []
  del.value = []
  state.selectedRowKeys = selectedRowKeys
  del.value = state.selectedRowKeys.map((item) => {
    return {
      id: item.id,
      status: item.status === 1 ? 2 : item.status === 2 ? 3 : 2
    }
  })
  console.log(del.value)
}
// 封装传递的数据
const { change, tableData, onSearch, handlePageChange, pagination, Search, onReset, SearchFormDel } =
  listPagination({ collectionTitle: '', progressStatus: '' }, business.collectPage, {
    sortOrder: 'ASCEND'
  })

// 查看表单数据
const formRef = ref(null)
// 新增 查看 编辑 删除 等功能按钮
const onView = (record, row) => {
  switch (record) {
    case 'add':
      formRef.value.onOpen(record, true, false)
      break
    case 'edit':
      formRef.value.onOpen(record, true, false, row)
      break
    case 'view':
      formRef.value.onOpen(record, true, true, row)
      break
    default:
      break
  }
}
</script>
<style lang="less" scoped>
.search {
  padding-top: 20px;
  // padding-left: 50px;
  margin-bottom: 32px;

  .btnBox {
    width: 100%;
    display: inline-block;
    display: flex;
    justify-content: space-around;
    align-items: center;

    .primarySele {
      margin-left: 20px;
      margin-right: 20px;
    }
  }
}

.silt-title {
  display: flex;
}

.switch_del {
  height: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>