 <template>
  <div>
    <BasicTable @register="registerTable" @editEnd="editEnd">
      <template #toolbar>
        <a-button type="primary" v-if="getCheckPerm('recruit-add')" @click="openModal(true)"> 新增职位</a-button>
      </template>
        <template #action="{ record }">
          <TableAction
            stopButtonPropagation
            :actions="[
              {
                label: '编辑',
                //icon: 'ep:edit',
                ifShow:getCheckPerm('recruit-edit') && record.isPush == 0,
                onClick: handleEdit.bind(null, record),
              },{
                label: '删除',
                ifShow:getCheckPerm('recruit-delete'),
                //icon: 'ic:outline-delete-outline',
                popConfirm: {
                  title: '是否确认删除',
                  confirm: handleDelete.bind(null, record),
                },
              },
            ]"
          />
      </template>
    </BasicTable>
    <addRecruitModal @register="register" @update="reload" />
  </div>
</template>
<script lang="ts">
  import { defineComponent, h } from 'vue';
  import { BasicTable, useTable, TableAction, BasicColumn, TableImg, FormProps } from '/@/components/Table';
  import { PageWrapper } from '/@/components/Page';
  import { Time } from '/@/components/Time';
  import { employNoteList, addOrUpdate, employNoteIsTop, NewPublicNews, employNoteIsPush, employNoteDelete } from '/@/api/operate'
  import { useModal } from '/@/components/Modal';
  import { Descriptions } from 'ant-design-vue';
  import { useI18n } from '/@/hooks/web/useI18n';
  import { useMessage } from '/@/hooks/web/useMessage';
  import { Switch } from 'ant-design-vue';
  import addRecruitModal from './components/recruit/addModal.vue'
  import { usePermissionStore } from '/@/store/modules/permission';
  export default defineComponent({
    components: { 
      BasicTable, 
      TableAction, 
      PageWrapper,
      TableImg,
      addRecruitModal,
      [Descriptions.name]: Descriptions,
      [Descriptions.Item.name]: Descriptions.Item,
    },
    setup() {
      const { t } = useI18n();
      const { createMessage } = useMessage();
      const permissionStore = usePermissionStore();
      const { getCheckPerm } = permissionStore;
      const [register, { openModal }] = useModal();
      const columns: BasicColumn[] = [
        
        {
          title: '职位名称',
          dataIndex: 'workName',
          ellipsis: true,
          width: 250,
        },
        {
          title: '工作地点',
          dataIndex: 'workAddress',
          ellipsis: true,
          width: 150,
        },
        {
          title: '薪资待遇',
          dataIndex: 'salary',
          ellipsis: false,
          width: 80,
        },
        {
          title: '招聘人数',
          dataIndex: 'employNum',
          width: 150,
          edit: true,
          editRule: async (text) => {
            if (text < 1) {
              return '招聘人数应大于0';
            }else if(text>999){
              return '招聘人数应小于999';
            }
            return '';
          },
          editComponent: 'InputNumber',
        },
        {
          title: '创建时间',
          dataIndex: 'createTime',
          width: 150,
          customRender: ({ record }) => {
            return (
              record.createTime &&
              h(Time, {
                value: record.createTime,
                mode: 'datetime',
              })
            );
          },
        },
        {
          title: '状态',
          dataIndex: 'isPush',
          width: 80,
          ifShow: getCheckPerm('recruit-publish'),
          customRender: ({ record }) => {
            if (!Reflect.has(record, 'pendingStatus')) {
              record.pendingStatus = false;
            }
            return h(Switch, {
              checked: record.isPush === 1,
              checkedChildren: '已发布',
              unCheckedChildren: '未发布',
              loading: false,
              onChange: async (checked: boolean) => {
                record.pendingStatus = true;
                const id: string = record.id || '';
                const newStatus = checked ? 1 : 0;
                Reflect.set(record, 'isPush', newStatus);
                await employNoteIsPush({id:id,isPush:newStatus});
                createMessage.success(t('common.optSuccess'));
                // reload()
              },
            });
          },
        },
        {
          title: '置顶',
          dataIndex: 'isTop',
          ifShow: getCheckPerm('recruit-top'),
          width: 80,
          customRender: ({ record }) => {
            if (!Reflect.has(record, 'pendingStatus')) {
              record.pendingStatus = false;
            }
            return h(Switch, {
              checked: record.isTop === 1,
              checkedChildren: '是',
              unCheckedChildren: '否',
              loading: false,
              onChange: async (checked: boolean) => {
                record.pendingStatus = true;
                const id: string = record.id || '';
                const newStatus = checked ? 1 : 0;
                // Reflect.set(record, 'isOnSale', newStatus);
                await employNoteIsTop({id,isTop:newStatus});
                createMessage.success(t('common.optSuccess'));
                reload()
              },
            });
          },
        },
      ];
      const searchForm: Partial<FormProps> = {
        labelWidth: 100,
        autoSubmitOnEnter:true,
        schemas: [
          // {
          //   field: 'sceneName',
          //   label: t('routes.operate.releaseTime'),
          //   component: 'RangePicker',
          //   componentProps: {
          //     maxLength: 100,
          //     format: 'YYYY-MM-DD',
          //     valueFormat:'YYYY-MM-DD',
          //     showTime: true,
          //   },
          //   colProps: {
          //     xl: 11,
          //     xxl: 11,
          //   },
          // },
          {
            field: 'workName',
            label: '职位名称',
            component: 'Input',
            colProps: {
              xl: 6,
              xxl: 6,
            },
          },
        ],
      };
      const [registerTable,{reload}] = useTable({
        api: employNoteList,
        title: '职位列表',
        columns: columns,
        useSearchForm: true,
        formConfig: searchForm,
        showTableSetting: true,
        showIndexColumn:false,
        rowKey: 'id',
        fetchSetting: {
          pageField: 'pageNum',
          sizeField: 'pageSize',
          listField: 'list',
          totalField: 'total',
        },
        actionColumn: {
          width: 220,
          title: '操作',
          dataIndex: 'action',
          slots: { customRender: 'action' },
        },
        canResize:true,
      });
      async function handleDelete(record: Recordable) {
        await employNoteDelete({id:record.id})
        createMessage.success(t('common.optSuccess'));
        reload();
      }
      async function handlePublish(record: Recordable) {
        console.log('点击了发布', record);
        await NewPublicNews({id:record.id,isPublic:1})
        createMessage.success(t('common.optSuccess'));
        reload();
      }
      function handleEdit(record: Recordable) {
        console.log('点击了编辑', record);
        openModal(true,record)
      }
      async function handleWithdraw(record: Recordable) {
        await NewPublicNews({id:record.id,isPublic:0})
        createMessage.success(t('common.optSuccess'));
        reload();
      }
      function hendleAddNew(){
        console.log('新增新闻');
      }
      async function editEnd({record, index, key, value}){
          console.log('editEnd',record, index, key, value)
          await addOrUpdate(record)
          createMessage.success(t('common.optSuccess'));
        }
      return {
        registerTable,
        handleDelete,
        handleEdit,
        handleWithdraw,
        handlePublish,
        hendleAddNew,
        reload,
        register,
        openModal,
        editEnd,
        getCheckPerm,
      };
    },
  });
</script>