<script setup>
import { showSuccessToast } from 'vant';
// import { resolveSingleFileString } from '~/utils/helper';
import user from '~/store/user';
import { child } from '~/store/child';

function handleNavLeftClick() {
  router.replace('/home')
}



const router = useRouter()
function handleClickCard(row) {
  if (row.ni_type == '1') {
    window.open(row.brief)
  } else {
    router.push(`/djzl/djzlxq/${row.id}`)
  }
}

console.log(user._role);
let cateData = $ref([])
let cateLoading = $ref(true)
request({
  url: '/djzl/info_cate/api_tree',
  data: {
    token: user._role === 'jz' ? ( child ? child.token : user.token) : user.token
  }
}).then(res => {
  cateData = res.data
  cateLoading = false
  console.log(user.token);
})

let overlayShow = $ref(false)
const overlayForm = reactive({
  nic_id: '',
  ni_title: '',
  ni_content: '',
  ni_img: '',
  ni_type: '1',
})

function handleNavRightClick() {
  if (user._role === 'jz') return;

  overlayForm.nic_id = ''
  overlayForm.ni_title = ''
  overlayForm.ni_content = ''
  overlayForm.ni_img = ''
  overlayForm.ni_type = '1'

  overlayShow = true
}
function getList() {
  request({
    url: '/djzl/info/index',
    data: {
      nic_id: cate.nic_id,
      urltype: 1,
      token: user._role === 'jz' ? ( child ? child.token : user.token) : user.token
    }
  }).then(res => {

  })
}
function handleOverlaySubmit() {
  // console.log('overlayForm :>> ', overlayForm);
  request({
    url: '/djzl/info/add',
    data: {
      djzl_info: overlayForm
    }
  }).then(res => {
    if (res.code === '1') {
      overlayShow = false
      showSuccessToast('提交成功')
      getList();
    }
  })
}

let pickerVal = $ref()
let showPicker = $ref(false)
function onFinish(val) {
  // console.log('onFinish :>> ', val);
  const { selectedOptions } = val
  pickerVal = selectedOptions.map((option) => option.nic_name).join(' - ');
}
</script>

<template>
  <van-sticky>
    <van-nav-bar v-if="!user.token || user._role === 'jz'" title="党建专栏" left-arrow @click-left="handleNavLeftClick">
    </van-nav-bar>
    <van-nav-bar v-if="user.token && user._role !== 'jz'" title="党建专栏" right-text="新建" @click-right="handleNavRightClick"
      left-arrow @click-left="handleNavLeftClick">
    </van-nav-bar>
  </van-sticky>

  <van-tabs sticky swipeable>
    <van-tab v-for="cate in cateData" :title="cate.nic_name">
      <remote-list url="/djzl/info/index"
        :d="{ nic_id: cate.nic_id, urltype: 1, token: user._role === 'jz' ? ( child ? child.token : user.token) : user.token }" class="mt-2">
        <template #default="{ row: item }">
          <van-card :title="item.name" :thumb="(item.img)" @click="handleClickCard(item)">
            <template #price>
              <van-tag plain type="primary">{{ item.nic_name }}</van-tag>
            </template>
            <template #num>
              {{ item.datetime }}
            </template>
          </van-card>
        </template>
      </remote-list>
    </van-tab>
  </van-tabs>


  <van-overlay :show="overlayShow" @click="overlayShow = false" class="flex justify-center items-center">
    <div class="bg-white w-9/10 p-4 rounded-md dark:bg-black" @click.stop>
      <div class="font-bold text-lg mb-4 pre">新建党建专栏</div>

      <van-form @submit="handleOverlaySubmit" label-width="5em">
        <van-field name="nic_id" label="新闻类型" is-link readonly @click="showPicker = true" v-model="pickerVal"
          :rules="[{ required: true, message: '新闻类型不能为空' }]"> </van-field>

        <van-popup v-model:show="showPicker" round position="bottom">
          <van-cascader v-model="overlayForm.nic_id" title="请选择新闻类型" :options="cateData" @close="showPicker = false"
            @finish="onFinish" :field-names="{
              text: 'nic_name',
              value: 'nic_id',
              children: 'treeList',
            }" />
        </van-popup>

        <van-field name="ni_title" v-model="overlayForm.ni_title" placeholder="请输入新闻标题..." label="新闻标题"
          :rules="[{ required: true, message: '新闻标题不能为空' }]"></van-field>

        <van-field name="radio" label="内容类型">
          <template #input>
            <van-radio-group v-model="overlayForm.ni_type" direction="horizontal">
              <van-radio name="1">美篇链接</van-radio>
              <van-radio name="0">普通新闻</van-radio>
            </van-radio-group>
          </template>
        </van-field>

        <van-field v-model="overlayForm.ni_content" name="ni_content"
          :placeholder="`请输入${overlayForm.ni_type === '1' ? '美篇链接' : '新闻内容'}...`" maxlength="500" show-word-limit rows="6"
          type="textarea" autosize
          :rules="[{ required: true, message: overlayForm.ni_type === '1' ? '美篇链接不能为空' : '新闻内容不能为空' }]"
          :label="overlayForm.ni_type === '1' ? '美篇链接' : '新闻内容'" />

        <van-field name="ni_img" label="封面图片" :rules="[{ required: true, message: '封面图片不能为空' }]">
          <template #input>
            <file-upload v-model="overlayForm.ni_img" :max-count="1"></file-upload>
          </template>
        </van-field>



        <div style="margin: 16px;">
          <van-button round block type="primary" native-type="submit">
            提交
          </van-button>
        </div>
      </van-form>
    </div>
  </van-overlay>
</template>
