<script setup lang="ts">
import AppBlock from '@/components/AppBlock.vue'
import HomeHead from '@/views/home/components/HomeHead.vue'
// import HomeHeadSearch from '@/views/home/components/HomeHeadSearch.vue'
import { useMessage, NModal } from 'naive-ui'
import { useUserStore } from '@/stores/modules/user'
import UserList from '@/views/home/intelligence/process/UserPages.vue'
import { pickerOptions } from '@/utils/date'

import { getList, marketPreDelete, marketPreADD } from '@/api/daikin/base'

const message = useMessage()
const store = useUserStore()
const header = { 'token': store.user.token }

const dataA = ref([])
const editA = ref()

const shomkA = ref(false)

async function setDataFiles(arr, _row) {
  if (_row && _row.length > 0) {
    arr.value = _row.map((i: { filePathList: { name: any; originalFileName: any }[] }) => {
      if (i.filePathList && i.filePathList.length > 0) {
        i.filePathList.forEach((file: { name: any; originalFileName: any }) => {
          file.name = file.originalFileName
        })
      }
      return i
    })
  }
}
const type = ref(2)
async function getDataA() {
  const { data } = await getList({ type: 2 })
  dataA.value = data
  // setDataFiles(dataArr);
}

onMounted(async () => {
  getDataA()
})

function computedName(title) {
  let index = title.indexOf('.')
  if (index > -1) {
    return title.slice(0, index - 1)
  }
  return title
}

async function onSubmitA(row: {
  id: any
  fileList?: any
  title?: any
  isTop?: any
  isPublish?: any
  publishTime?: any
}) {
  console.log(row, 555)
  const { id, title, isTop, isPublish, publishTime } = row
  // let moduleId = 1;
  let sendData = {}
  if (!row.id) {
    sendData = {
      title,
      type: type.value,
      userIdList: userData.value,
      isTop,
      isPublish,
      publishTime
    }
    if (row.fileList && row.fileList.length > 0) {
      row.fileList.map((item) => {
        if (item.response) {
          sendData.filePath = item.response.url
          // obj.title = title || computedName(item.response.originalFilename);
        } else {
          sendData.filePath = item.url
          // obj.title = title || computedName(item.originalFilename);
        }
      })
    }
  } else {
    sendData = {
      id,
      title,
      type: type.value,
      userIdList: userData.value,
      isTop,
      isPublish,
      publishTime
    }
  }
  console.log(sendData)
  const { code, msg } = await marketPreADD(sendData)
  if (code === 200) {
    message.success('修改成功！')
  } else {
    message.error(msg)
  }
  shomkA.value = false
  getDataA()
}

const handleEditA = (type: string, row: any) => {
  console.log(row)
  editA.value = {
    title: '',
    fileList: []
  }
  setUserList.value = []
  shomkA.value = true
  if (!row) return

  editA.value = row
  editA.value.fileList = [
    {
      name: row.title,
      originalFilename: row.title,
      url: row.filePath
    }
  ]
  setUserList.value = row.userIdList
}

async function handleDeleteA(index: number, row: any) {
  const { id } = row
  if (!id) return
  const { code, msg } = await marketPreDelete({ id, type: type.value })
  if (code === 200) {
    message.success('删除成功！')
  } else {
    message.error(msg)
  }
  getDataA()
}

const activeName = ref('first')
const userList = ref()
const showModal = ref(false)
const flg = ref()
const setUserList = ref()
async function getUser(row) {
  console.log(row)
  showModal.value = !showModal.value
  flg.value = row
  if (row.id && row.userIdList) {
    setUserList.value = row.userIdList
  }
  // const {data: userArr} = await getBPCUser({moduleId})
  // setUserList.value = userArr
}
// 获取子组件传过来的值
const userData = ref()
const handleChild = (data: any) => {
  console.log(data, 444)
  const { showModal: show, multipleSelection } = data
  showModal.value = unref(show)
  let userIdList: any[] = []
  multipleSelection.value.forEach((i: { userId: any }) => {
    userIdList.push(i.userId)
  })
  if (flg.value.id) {
    flg.value.userIdList = userIdList
    marketPreADD(flg.value)
    getDataA()
    console.log(flg.value)
  }
  userData.value = userIdList
}
const CloseThiss = (data: boolean) => {
  showModal.value = data
}
</script>
<template>
  <HomeHead class="top">
    <template #content>
      <!-- <HomeHeadSearch /> -->
    </template>
  </HomeHead>
  <AppBlock class="w-full h950px p30px text-#000">
    <div class="font-600 flex items-center">
      <!-- <img src="./images/logo.svg" class="h56px mr21px" /> -->
      <div class="text-36px text-#000">汇率内容管理</div>
    </div>

    <div class="cont relative w100% h800px overflow-y-auto">
      <el-button type="primary" @click="handleEditA" class="my20px">汇率内容新增</el-button>

      <el-table
        :data="dataA"
        style="width: 95%"
        :header-cell-style="{
          background: '#2A7BF7',
          color: '#fff',
          height: '60px',
          textAlign: 'center',
          'font-size': '24px'
        }"
        :cell-style="{ 'text-align': 'center' }"
      >
        <!-- <el-table-column label="级别" prop="status" /> -->
        <el-table-column label="名称" prop="title" />
        <!-- 
                <el-table-column label="文件列表" prop="filePathList"> 
                <template #default="scope">
                  <div v-if="scope.row.filePathList" v-for="(it, index) in scope.row.filePathList">
                    {{ it.name }}
                  </div> 
                  {{ scope.row.fileName }}
                </template>

              </el-table-column> -->
        <el-table-column label="查看范围" prop="userIdList">
          <template #default="scope">
            <!-- <el-button type="primary"  class="button" @click="getUser(scope.row)">查看范围</el-button> -->
            <span v-if="scope.row.userIdList" v-for="it in scope.row.userIdList">
              &nbsp;&nbsp; {{ it.nickName }}</span
            >
          </template>
        </el-table-column>
        <el-table-column label="操作" width="180px">
          <template #default="scope">
            <el-button size="small" @click="handleEditA('edit', scope.row)">编辑</el-button>
            <el-button size="small" type="danger" @click="handleDeleteA(scope.$index, scope.row)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>
  </AppBlock>

  <n-modal v-model:show="shomkA">
    <div class="bg-#FFF p30px">
      <el-form :model="editA" label-width="120px" :inline="true">
        <!-- <el-form-item label="模块归属">
         <el-radio-group v-model="editA.status" class="ml-4">
            <el-radio label="紧急" size="large">紧急</el-radio>
            <el-radio label="重点" size="large">重点</el-radio>
            <el-radio label="New" size="large">New</el-radio>
          </el-radio-group>
        </el-form-item> -->
        <br />
        <el-form-item label="标题">
          <el-input v-model="editA.title" />
        </el-form-item>
        <br />
        <el-form-item label="查看范围">
          <el-button class="button" @click="getUser(2)">设置</el-button>
        </el-form-item>
        <br />
        <el-form-item label="文件">
          <el-upload
            v-model:file-list="editA.fileList"
            class="upload-demo"
            :headers="header"
            action="/test-api/common/upload"
            multiple
            :limit="editA.type == 'add' ? 3 : 1"
            :on-exceed="handleExceed"
          >
            <el-button type="primary">选择文件</el-button>
          </el-upload>
        </el-form-item>
        <br />
        <el-form-item label="是否置顶">
          <el-switch
            v-model="editA.isTop"
            active-text="置顶"
            inactive-text="不置顶"
            :inactive-value="0"
            :active-value="1"
          ></el-switch>
        </el-form-item>
        <br />
        <el-form-item label="是否定时发送">
          <el-switch
            v-model="editA.isPublish"
            active-text="是"
            inactive-text="否"
            :inactive-value="0"
            :active-value="1"
            @change="(val) => (editA.publishTime = val ? pickerOptions.day : '')"
          ></el-switch>
        </el-form-item>
        <br />
        <el-form-item label="发布时间" v-if="editA.isPublish == 1">
          <el-date-picker
            v-model="editA.publishTime"
            align="right"
            type="date"
            placeholder="选择日期"
            :disabledDate="pickerOptions.disabledDate"
            :shortcuts="pickerOptions.shortcuts"
            :value-format="pickerOptions.valueFormat"
          >
          </el-date-picker>
        </el-form-item>
      </el-form>
      <hr class="mb15px border-#f1f1f1" />

      <el-button class="flex-center" type="primary" @click="onSubmitA(editA)">确认</el-button>
    </div>
  </n-modal>

  <n-modal v-model:show="showModal">
    <UserList :userDataList="setUserList" @clickChild="handleChild" @CloseThis="CloseThiss" />
  </n-modal>
</template>

<style lang="less">
.demo-tabs > .el-tabs__content {
  color: #6b778c;
  font-size: 32px;
  font-weight: 600;
}
.top {
  position: absolute;
  right: 30px;
  top: -92px;
}
.flex-center {
  display: flex;
  justify-content: center;
  margin: 0 auto;
}
</style>
