import Pagination from '@/components/pagination'
import {
  NButton,
  NDataTable,
  NModal,
  useMessage,
  NSpace,
  NTag,
  NFormItem,
  NInput,
  NSelect
} from 'naive-ui'
import { defineComponent, onMounted, reactive, ref } from 'vue'
import AddProtocol from './add-protocol'
import { filterProtocolType } from '@/utils/filters'
import {
  schoolContractTemplateDetail,
  schoolContractTemplatePage,
  schoolContractTemplateUpdateStatus
} from '../api'
import SaveForm from '@/components/save-form'
import { protocolTypeArray } from '@/utils/searchArray'

export default defineComponent({
  name: 'city-list',
  setup() {
    const message = useMessage()
    const state = reactive({
      loading: false,
      pagination: {
        page: 1,
        rows: 10,
        pageTotal: 0
      },
      searchForm: {
        keyword: '',
        type: '',
        status: ''
      },
      dataList: [] as any,
      visiableProtocol: false,
      protocolOperation: 'add',
      protocolData: {},
      contractTemplateContent: null,
      visiableLook: false
    })

    const columns = () => {
      return [
        {
          title: '协议编号',
          key: 'id'
        },
        {
          title: '协议名称',
          key: 'name'
        },
        {
          title: '协议号',
          key: 'contractNo'
        },
        {
          title: '协议类型',
          key: 'type',
          render(row: any) {
            return filterProtocolType(row.type)
          }
        },
        {
          title: '上传时间',
          key: 'createTime'
        },
        {
          title: '操作人',
          key: 'username'
        },
        {
          title: '状态',
          key: 'status',
          render(row: any) {
            return row.status ? <NTag type="primary">启用</NTag> : <NTag type="default">停用</NTag>
          }
        },
        {
          title: '操作',
          key: 'operation',
          render(row: any) {
            return (
              <NSpace>
                <NButton
                  type="primary"
                  text
                  size="small"
                  //v-auth="schoolContractTemplate/detail1599978249005670402"
                  onClick={() => lookDetails(row)}
                >
                  查看
                </NButton>

                {!row.status && (
                  <NButton
                    text
                    type="primary"
                    size="small"
                    onClick={() => onUpdateState(row)}
                    //v-auth="schoolContractTemplate/updateStatus1597901264288862209"
                  >
                    启用
                  </NButton>
                )}
              </NSpace>
            )
          }
        }
      ]
    }

    const onUpdateState = async (row: any) => {
      try {
        await schoolContractTemplateUpdateStatus({ id: row.id })
        message.success('启用成功')
        getList()
      } catch {}
    }

    const lookDetails = async (row: any) => {
      try {
        const { data } = await schoolContractTemplateDetail({ id: row.id })
        state.visiableLook = true
        state.contractTemplateContent = data.contractTemplateContent
      } catch {}
    }

    const getList = async () => {
      try {
        state.loading = true
        const { data } = await schoolContractTemplatePage({
          ...state.pagination,
          ...state.searchForm
        })
        state.dataList = data.rows || []
        state.pagination.pageTotal = data.total || 0
        state.loading = false
      } catch {}
    }

    const saveForm = ref()
    const onSubmit = () => {
      state.pagination.page = 1
      getList()
    }

    const onSearch = () => {
      saveForm.value?.submit()
    }
    const onBtnReset = () => {
      saveForm.value?.reset()
    }

    onMounted(() => {
      getList()
    })
    return () => (
      <div class="system-menu-container">
        <h2>协议管理</h2>

        <SaveForm
          ref={saveForm}
          model={state.searchForm}
          onSubmit={onSubmit}
          onSetModel={(val: any) => (state.searchForm = val)}
        >
          <NFormItem label="关键字" path="keyword">
            <NInput
              v-model:value={state.searchForm.keyword}
              placeholder="请输入协议名称/协议号"
              clearable
            />
          </NFormItem>
          <NFormItem label="协议类型" path="type">
            <NSelect options={protocolTypeArray} v-model:value={state.searchForm.type} clearable />
          </NFormItem>
          <NFormItem label="协议状态" path="status">
            <NSelect
              clearable
              options={[
                { label: '启用', value: 1 },
                { label: '停用', value: 0 }
              ]}
              v-model:value={state.searchForm.status}
            />
          </NFormItem>
          <NFormItem>
            <NSpace>
              <NButton type="primary" onClick={onSearch}>
                搜索
              </NButton>
              <NButton type="default" onClick={onBtnReset}>
                重置
              </NButton>
            </NSpace>
          </NFormItem>
        </SaveForm>

        <div class={['section-container']}>
          <NSpace style={{ paddingBottom: '12px' }}>
            <NButton
              type="success"
              //v-auth="schoolContractTemplate/save1597901145271291905"
              onClick={() => {
                state.visiableProtocol = true
              }}
            >
              添加协议
            </NButton>
          </NSpace>
          <NDataTable
            loading={state.loading}
            columns={columns()}
            data={state.dataList}
          ></NDataTable>
          <Pagination
            v-model:page={state.pagination.page}
            v-model:pageSize={state.pagination.rows}
            v-model:pageTotal={state.pagination.pageTotal}
            onList={getList}
            sync
          ></Pagination>
        </div>

        <NModal
          v-model:show={state.visiableProtocol}
          preset="dialog"
          showIcon={false}
          title="新增协议"
          style={{ width: '500px' }}
        >
          <AddProtocol
            type={state.protocolOperation}
            data={state.protocolData}
            onClose={() => (state.visiableProtocol = false)}
            onGetList={getList}
          />
        </NModal>

        <NModal
          v-model:show={state.visiableLook}
          preset="dialog"
          showIcon={false}
          title="查看协议"
          style={{ width: '400px' }}
        >
          <div
            style="max-height: 450px; overflow-y: auto;"
            v-html={state.contractTemplateContent}
          ></div>
          <NSpace justify="end" style="padding-top: 16px">
            <NButton type="primary" onClick={() => (state.visiableLook = false)}>
              确定
            </NButton>
          </NSpace>
        </NModal>
      </div>
    )
  }
})
