<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 { getBPCUser, BPCSaveUser, getBPCEditList,updateBPC,updateBPCOne,delBPCActList, BPCDownload } from '@/api/daikin/base'

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

const dataA = ref([])
const dataB = ref([])
const dataC = ref([])
const dataD = ref([])
const dataE = ref([])

const editA = ref()
const editB = ref()
const editC = ref()
const editD = ref()
const editE = ref()


const shomkA = ref(false)
const shomkB = ref(false)
const shomkC = ref(false)
const shomkD = ref(false)
const shomkE = 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
    })
  }
}

async function getDataA() {
    const {rows: dataArr} = await getBPCEditList({moduleId: 1})
    dataA.value = dataArr
    setDataFiles(dataArr);
}
async function getDataB() {
    const {rows: dataBrr} = await getBPCEditList({moduleId: 2})
    dataB.value = dataBrr
    setDataFiles(dataBrr);
}
async function getDataC() {
    const {rows: dataCrr} = await getBPCEditList({moduleId: 3})
    dataC.value = dataCrr
    setDataFiles(dataCrr);
}
async function getDataD() {
    const {rows: dataDrr} = await getBPCEditList({moduleId: 4})
    dataD.value = dataDrr
    setDataFiles(dataDrr);
}
async function getDataE() {
    const {rows: dataErr} = await getBPCEditList({moduleId: 5})
    dataE.value = dataErr
    setDataFiles(dataErr);
}

onMounted(async () => {
  getDataA();
  getDataB();
  getDataC();
  getDataD();
  getDataE();
})

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

async function onSubmitA(row: { filePathList?: any; id?: any; indexId?: any; title?: any; proportion?: any; partSum?: any; badSum?: any }) {
  console.log(row, 444)
  const { id, status, title, type } = row
  let moduleId = 1;

  let sendData = []
  if (row.fileList && row.fileList.length > 0) {
    row.fileList.map(item => {
      let obj = { id, status, moduleId };
      if(item.response) {
        obj.filePath = item.response.url;
        obj.title = title || computedName(item.response.originalFilename);
      }
      else {
        obj.filePath = item.url;
        obj.title = title || computedName(item.originalFilename);
      }
      sendData.push(obj)
    })
  }
  
  if(type == 'add') {
    var { code, msg } = await updateBPC(sendData)
  }else {
    var { code, msg } = await updateBPCOne(sendData[0])
  }
  if (code === 200) { message.success("修改成功！") }
  else { message.error(msg) }
  shomkA.value = false
  getDataA();
}

async function onSubmitB(row: { filePathList?: any; id?: any; cate?: any; title?: any }) {
  const { id, title, type } = row
  let moduleId = 2;

  let sendData = []
  if (row.fileList && row.fileList.length > 0) {
    row.fileList.map(item => {
      let obj = { id, status, moduleId };
      if(item.response) {
        obj.filePath = item.response.url;
        obj.title = title || computedName(item.response.originalFilename);
      }
      else {
        obj.filePath = item.url;
        obj.title = title || computedName(item.originalFilename);
      }
      sendData.push(obj)
    })
  }
  
  if(type == 'add') {
    var { code, msg } = await updateBPC(sendData)
  }else {
    var { code, msg } = await updateBPCOne(sendData[0])
  }
  if (code === 200) { message.success("修改成功！") }
  else { message.error(msg) }
  shomkB.value = false

  getDataB();
}

async function onSubmitC(row: { filePathList?: any; id?: any; source?: any; title?: any }) {
  const { id, title, type } = row
  let moduleId = 3;

  let sendData = []
  if (row.fileList && row.fileList.length > 0) {
    row.fileList.map(item => {
      let obj = { id, status, moduleId };
      if(item.response) {
        obj.filePath = item.response.url;
        obj.title = title || computedName(item.response.originalFilename);
      }
      else {
        obj.filePath = item.url;
        obj.title = title || computedName(item.originalFilename);
      }
      sendData.push(obj)
    })
  }
  
  if(type == 'add') {
    var { code, msg } = await updateBPC(sendData)
  }else {
    var { code, msg } = await updateBPCOne(sendData[0])
  }
  if (code === 200) { message.success("修改成功！") }
  else message.error(msg)
  shomkC.value = false
  getDataC()
}
async function onSubmitD(row: { filePathList?: any; id?: any; title?: any }) {
  const { id, title, type } = row
  let moduleId = 4;

  let sendData = []
  if (row.fileList && row.fileList.length > 0) {
    row.fileList.map(item => {
      let obj = { id, status, moduleId };
      if(item.response) {
        obj.filePath = item.response.url;
        obj.title = title || computedName(item.response.originalFilename);
      }
      else {
        obj.filePath = item.url;
        obj.title = title || computedName(item.originalFilename);
      }
      sendData.push(obj)
    })
  }
  
  if(type == 'add') {
    var { code, msg } = await updateBPC(sendData)
  }else {
    var { code, msg } = await updateBPCOne(sendData[0])
  }
  if (code === 200) { message.success("修改成功！") }
  else {
    message.error(msg)
  }
  shomkD.value = false
  getDataD()
}
async function onSubmitE(row: { filePathList?: any; id?: any; title?: any }) {
  const { id, title, type } = row
  let moduleId = 5;
  let sendData = []
  if (row.fileList && row.fileList.length > 0) {
    row.fileList.map(item => {
      let obj = { id, status, moduleId };
      if(item.response) {
        obj.filePath = item.response.url;
        obj.title = title || computedName(item.response.originalFilename);
      }
      else {
        obj.filePath = item.url;
        obj.title = title || computedName(item.originalFilename);
      }
      sendData.push(obj)
    })
  }
  
  if(type == 'add') {
    var { code, msg } = await updateBPC(sendData)
  }else {
    var { code, msg } = await updateBPCOne(sendData[0])
  }
  if (code === 200) { message.success("修改成功！") }
  else {
    message.error(msg)
  }
  shomkE.value = false
  getDataE()
}


const handleEditA = (type: string, row: any) => {
  editA.value = {
    type: type,
    status: '紧急',
    title: '',
    fileList: [],
  }
  shomkA.value = true
  if (!row) return
  editA.value = row
  editA.value.type = type;
  editA.value.fileList = [{
    name: row.title,
    originalFilename: row.title,
    url: row.filePath,
  }]
  // BPCDownload({ id: row.id }).then(res => {
  //   editA.value.fileList = [res.data]
  // })
}
const handleEditB = (type: string, row: any) => {
  editB.value = {
    type: type,
    title: '',
    fileList: [],
  }
  shomkB.value = true
  if (!row) return
  editB.value = row
  editB.value.type = type;
   editB.value.fileList = [{
    name: row.title,
    originalFilename: row.title,
    url: row.filePath,
  }]
  // editB.value.fileList = [row.filePath]
  // BPCDownload({ id: row.id }).then(res => {
  //   editB.value.fileList = [res.data]
  // })
}
const handleEditC = (type: string, row: any) => {
  editC.value = {
    type: type,
    title: '',
    fileList: [],
  }
  shomkC.value = true
  if (!row) return
  editC.value = row
  editC.value.type = type;
   editC.value.fileList = [{
    name: row.title,
    originalFilename: row.title,
    url: row.filePath,
  }]
  // editC.value.fileList = [row.filePath]
  // BPCDownload({ id: row.id }).then(res => {
  //   editC.value.fileList = [res.data]
  // })
}
const handleEditD = (type: string, row: any) => {
  editD.value = {
    type: type,
    title: '',
    fileList: [],
  }
  shomkD.value = true
  if (!row) return
  editD.value = row
  editD.value.type = type;
  editD.value.fileList = [{
    name: row.title,
    originalFilename: row.title,
    url: row.filePath,
  }]
  // BPCDownload({ id: row.id }).then(res => {
  //   editD.value.fileList = [res.data]
  // })
}
const handleEditE = (type: string, row: any) => {
  editE.value = {
    type: type,
    title: '',
    fileList: [],
  }
  shomkE.value = true
  if (!row) return
  editE.value = row
  editE.value.type = type;
  editE.value.fileList = [{
    name: row.title,
    originalFilename: row.title,
    url: row.filePath,
  }]
  // BPCDownload({ id: row.id }).then(res => {
  //   editE.value.fileList = [res.data]
  // })
}


async function handleDeleteA(index: number, row: any) {
  const { id } = row
  if (!id) return
  const { code, msg } = await delBPCActList({ id })
  if (code === 200) { message.success("删除成功！") }
  else { message.error(msg) }
  getDataA();
}
async function handleDeleteB(index: number, row: any) {
  const { id } = row
  if (!id) return
  const { code, msg } = await delBPCActList({ id })
  if (code === 200) { message.success("删除成功！") }
  else { message.error(msg) }
  
  getDataB();
}
async function handleDeleteC(index: number, row: any) {

  const { id } = row
  if (!id) return
  const { code, msg } = await delBPCActList({ id })
  if (code === 200) { message.success("删除成功！") }
  else { message.error(msg) }
  getDataC()
}
async function handleDeleteD(index: number, row: any) {
  const { id } = row
  if (!id) return
  const { code, msg } = await delBPCActList({ id })
  if (code === 200) { message.success("删除成功！") }
  else { message.error(msg) }
  getDataD();
}
async function handleDeleteE(index: number, row: any) {
  const { id } = row
  if (!id) return
  const { code, msg } = await delBPCActList({ id })
  if (code === 200) { message.success("删除成功！") }
  else { message.error(msg) }
  getDataE();
}

const activeName = ref("first")
const userList = ref()
const showModal = ref(false)
const flg = ref()
const setUserList =ref()
async function getUser(moduleId: any) {
  showModal.value = !showModal.value
  flg.value = moduleId
  const {data: userArr} = await getBPCUser({moduleId})
  setUserList.value = userArr
    
}
  // 获取子组件传过来的值
  const handleChild = (data: any) => {
    console.log(data, 444);
      const { showModal: show, multipleSelection } = data
      showModal.value = unref(show)
      // userList.value = multipleSelection
      let userIdList: any[] =[]
      multipleSelection.value.forEach((i: { userId: any })=>{
          // console.log(dataList.value)
          userIdList.push(i.userId)
      })  
      
      BPCSaveUser({
        moduleId: flg.value,
        userIdList: 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">BCP内容管理</div>
    </div>
      <el-tabs type="card" v-model="activeName" class="demo-tabs  mt30px  text-20px" @tab-click="handleClick">
        <el-tab-pane name="first">
          <template #label>
            <span class="custom-tabs-label">

              <span class="text-20px">BCP今日简报模块</span>
            </span>
          </template>
          <div class=" cont relative w100% h800px  overflow-y-auto">
            <el-button type="primary" @click="handleEditA('add')" class="my20px">BCP今日简报新增</el-button>
            <el-button type="primary" @click="getUser(1)"  > 查看范围</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="操作" 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>
        </el-tab-pane>

        <el-tab-pane name="two">
          <template #label>
            <span class="custom-tabs-label">
              <span class="text-20px">运营守则模块</span>
            </span>
          </template>
            <div>
              <el-button type="primary" @click="handleEditB('add')" class="my20px">运营守则新增</el-button>
              <el-button type="primary" @click="getUser(2)"  > 查看范围</el-button>
              <el-table :data="dataB" 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="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="操作"   width="180px">
                  <template #default="scope">
                    <el-button size="small" @click="handleEditB('edit', scope.row)">编辑</el-button>
                    <el-button size="small" type="danger" @click="handleDeleteB(scope.$index, scope.row)">删除</el-button>
                  </template>
                </el-table-column>
              </el-table>
            </div>
        </el-tab-pane>
        
        <el-tab-pane name="third">
          <template #label>
            <span class="custom-tabs-label">

              <span class="text-20px">供方SCM模块</span>
            </span>
          </template>

          <div>
            <el-button type="primary" @click="handleEditC('add')" class="my20px">供方SCM新增</el-button>
            <el-button type="primary" @click="getUser(3)"  > 查看范围</el-button>
            <el-table :data="dataC" 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="title" />
              <!-- <el-table-column label="文件列表" prop="fileList">
                <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="操作" width="180px">
                <template #default="scope">
                  <el-button size="small" @click="handleEditC('edit', scope.row)">编辑</el-button>
                  <el-button size="small" type="danger" @click="handleDeleteC(scope.$index, scope.row)">删除</el-button>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </el-tab-pane>

        <el-tab-pane name="fourth">
          <template #label>
            <span class="custom-tabs-label">
              <span class="text-20px">BCP情报模块</span>
            </span>
          </template>
          <div>
            <el-button type="primary" @click="handleEditD('add')" class="my20px">BCP情报新增</el-button>
            <el-button type="primary" @click="getUser(4)"  > 查看范围</el-button>
            <el-table :data="dataD" 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="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="操作" width="180px">
                <template #default="scope">
                  <el-button size="small" @click="handleEditD('edit', scope.row)">编辑</el-button>
                  <el-button size="small" type="danger" @click="handleDeleteD(scope.$index, scope.row)">删除</el-button>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </el-tab-pane>

        <el-tab-pane name="fifth">
          <template #label>
            <span class="custom-tabs-label">
              <span class="text-20px">底部滚动数据</span>
            </span>
          </template>
          <div>
            <el-button type="primary" @click="handleEditE('add')" class="my20px">底部滚动新增</el-button>
            <el-button type="primary" @click="getUser(5)"  > 查看范围</el-button>
            <el-table :data="dataE" 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="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="操作" width="180px">
                <template #default="scope">
                  <el-button size="small" @click="handleEditE('edit', scope.row)">编辑</el-button>
                  <el-button size="small" type="danger" @click="handleDeleteE(scope.$index, scope.row)">删除</el-button>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </el-tab-pane>
      </el-tabs>
    <el-form-item>
    </el-form-item>
  </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 v-if="editA.type !== 'add'" label="标题">
          <el-input v-model="editA.title" />
        </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>
      </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="shomkB">
    <div class="bg-#FFF p30px">
      <el-form label-width="120px" :inline="true">
        <el-form-item v-if="editB.type !== 'add'" label="标题">
          <el-input v-model="editB.title" />
        </el-form-item>
        <br>
        <el-form-item label="文件">
          <el-upload v-model:file-list="editB.fileList" class="upload-demo" :headers="header"
            action="/test-api/common/upload" multiple :limit="editB.type == 'add' ? 3 : 1"  :on-exceed="handleExceed">
            <el-button type="primary">选择文件</el-button>
          </el-upload>
        </el-form-item>
      </el-form>
      <hr class="mb15px border-#f1f1f1">

      <el-button class="flex-center" type="primary" @click="onSubmitB(editB)">确认</el-button>
    </div>
  </n-modal>
  <n-modal v-model:show="shomkC">
    <div class="bg-#FFF p30px">
      <el-form :model="editC" label-width="120px" :inline="true">
        <el-form-item v-if="editC.type !== 'add'" label="标题">
          <el-input v-model="editC.title" />
        </el-form-item>
        <br>
        <el-form-item label="文件">
          <el-upload v-model:file-list="editC.fileList" class="upload-demo" :headers="header"
            action="/test-api/common/upload" multiple :limit="editC.type == 'add' ? 3 : 1" :on-exceed="handleExceed">
            <el-button type="primary">选择文件</el-button>
          </el-upload>
        </el-form-item>
      </el-form>
      <hr class="mb15px border-#f1f1f1">

      <el-button class="flex-center" type="primary" @click="onSubmitC(editC)">确认</el-button>
    </div>
  </n-modal>
  <n-modal v-model:show="shomkD">
    <div class="bg-#FFF p30px">
      <el-form :model="editD" label-width="120px" :inline="true">
        <el-form-item v-if="editD.type !== 'add'" label="标题">
          <el-input v-model="editD.title" />
        </el-form-item>
        <br>
        <el-form-item label="文件">
          <el-upload v-model:file-list="editD.fileList" class="upload-demo" :headers="header"
            action="/test-api/common/upload" multiple :limit="editD.type == 'add' ? 3 : 1"  :on-exceed="handleExceed">
            <el-button type="primary">选择文件</el-button>

          </el-upload>
        </el-form-item>
      </el-form>
      <hr class="mb15px border-#f1f1f1">
      
      <el-button class="flex-center" type="primary" @click="onSubmitD(editD)">确认</el-button>
    </div>
  </n-modal>
  <n-modal v-model:show="shomkE">
    <div class="bg-#FFF p30px">
      <el-form :model="editE" label-width="120px" :inline="true">
        <el-form-item v-if="editE.type !== 'add'" label="标题">
          <el-input v-model="editE.title" />
        </el-form-item>
        <br>
        <el-form-item label="文件">
          <el-upload v-model:file-list="editE.fileList" class="upload-demo" :headers="header"
            action="/test-api/common/upload" multiple :limit="editE.type == 'add' ? 3 : 1" :on-exceed="handleExceed">
            <el-button type="primary">选择文件</el-button>

          </el-upload>
        </el-form-item>
      </el-form>
      <hr class="mb15px border-#f1f1f1">
      
      <el-button class="flex-center" type="primary" @click="onSubmitE(editE)">确认</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>