<script setup lang="ts">
import AppBlock from '@/components/AppBlock.vue'
import HomeHead from '@/views/home/components/HomeHead.vue'
import {formatDate} from '@/utils/format'
import { useMessage, NModal,NSelect} from 'naive-ui'
import { useUserStore } from '@/stores/modules/user'
import zhCn from 'element-plus/dist/locale/zh-cn.mjs'
import { topList, actList, highList, badartList, topAdd, topDel, actAdd, highAdd, badartAdd, badartDel, highDel, actDel } from '@/api/daikin/base'
const message = useMessage()
const store = useUserStore()
const header = { 'token': store.user.token }
const locale = computed(() => zhCn)
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 gettopList() {
  const { rows: _rowA } = await topList()
  dataA.value = _rowA
  if (_rowA && _rowA.length > 0) {
    dataA.value = _rowA.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
    })
    console.log(dataA.value)
  }
}

async function getbadartList() {
  const { rows: _rowB } = await badartList()
  dataB.value = _rowB
  if (_rowB && _rowB.length > 0) {
    dataB.value = _rowB.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
    })
    console.log(dataB.value)
  }
}

async function getactList() {
  const { rows: _rowD } = await actList()
  dataD.value = _rowD
  if (_rowD && _rowD.length > 0) {
    dataD.value = _rowD.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
    })
    // console.log(dataD.value)
  }
}

async function gethighList() {
  const { rows: _rowC } = await highList()
  dataC.value = _rowC
  if (_rowC && _rowC.length > 0) {
    dataC.value = _rowC.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
    })
  }
}

onMounted(async () => {
  getactList();
  getbadartList();
  gettopList();
  gethighList();
})




async function onSubmitA(row: { filePathList?: any; id?: any; indexId?: any; title?: any; proportion?: any; partSum?: any; badSum?: any }) {
  console.log(row)
  const { id, indexId, title, partSum, badSum,monthDate } = row
  let filePathArr = []

  if (row.fileList && row.fileList.length > 0) {
    row.fileList.map(item => {
      if (item.response) filePathArr.push(item.response.url);
      else filePathArr.push(item.url);
    })
  }
  let filePath = filePathArr.join(',')
  const cate = cateValue.value
  console.log(monthDate,formatDate(monthDate))
  const time = formatDate(monthDate).substring(0,7)
  const { code, msg } = await topAdd({ id, indexId, title, partSum, badSum, filePath,cate,monthDate:time})
  if (code === 200) { message.success("修改成功！") }
  else { message.error(msg) }
  shomkA.value = false
  gettopList();
}

async function onSubmitB(row: { filePathList?: any; id?: any; cate?: any; title?: any }) {
  const { id, cate, title } = row
  let filePathArr = []

  if (row.fileList && row.fileList.length > 0) {
    row.fileList.map(item => {
      if (item.response) filePathArr.push(item.response.url);
      else filePathArr.push(item.url);
    })
  }
  let filePath = filePathArr.join(',')

  const { code, msg } = await badartAdd({ id, cate, title, filePath })
  if (code === 200) { message.success("修改成功！") }
  else { message.error(msg) }
  shomkB.value = false

  getbadartList();
}

async function onSubmitC(row: { filePathList?: any; id?: any; source?: any; title?: any }) {
  console.log(row)
  const { id, source, title } = row
  let filePathArr = []

  if (row.fileList && row.fileList.length > 0) {
    row.fileList.map(item => {
      if (item.response) filePathArr.push(item.response.url);
      else filePathArr.push(item.url);
    })
  }
  let filePath = filePathArr.join(',')

  const { code, msg } = await highAdd({ id, source, title, filePath })
  if (code === 200) { message.success("修改成功！") }
  else message.error(msg)
  shomkC.value = false
  gethighList()
}
async function onSubmitD(row: { filePathList?: any; id?: any; title?: any }) {
  console.log(row)
  const { id, title } = row
  let filePathArr = []

  if (row.fileList && row.fileList.length > 0) {
    row.fileList.map(item => {
      if (item.response) filePathArr.push(item.response.url);
      else filePathArr.push(item.url);
    })
  }
  let filePath = filePathArr.join(',')

  const { code, msg } = await actAdd({ id, title, filePath })
  if (code === 200) { message.success("修改成功！") }
  else {
    message.error(msg)
  }
  shomkD.value = false
  getactList()
}


const handleEditA = (index: number, row: any) => {
  if (row && row.filePathList) {
    if (row.filePathList.length > 0) {

      if (row.filePathList && row.filePathList.length > 0) {
        row.filePathList.forEach((file: { name: any; originalFileName: any }) => {
          file.name = file.originalFileName;
        });
        row.fileList = row.filePathList
      }
    }
    else if (row.files && row.files.length > 0) {
      row.files.map(i => {
        i.url = i.response.url
      })
    }
  }
  else {
    editA.value = {
      indexId: '',
      title: '',
      proportion: '',
      partSum: '',
      badSum: '',
      fileList: [],
      monthDate:''
    }
  }
  shomkA.value = true
  if (!row) return
  editA.value = row
}
const handleEditB = (index: number, row: any) => {
  if (row && row.filePathList) {
    if (row.filePathList.length > 0) {

      if (row.filePathList && row.filePathList.length > 0) {
        row.filePathList.forEach((file: { name: any; originalFileName: any }) => {
          file.name = file.originalFileName;
        });
        row.fileList = row.filePathList
      }
    }
    else if (row.files && row.files.length > 0) {
      row.files.map(i => {
        i.url = i.response.url
      })
    }
  }
  else {
    editB.value = {
      title: '',
      cate: '',
      fileList: []
    }
  }
  shomkB.value = true
  if (!row) return
  editB.value = row
}
const handleEditC = (index: number, row: any) => {
  if (row && row.filePathList) {
    if (row.filePathList.length > 0) {

      if (row.filePathList && row.filePathList.length > 0) {
        row.filePathList.forEach((file: { name: any; originalFileName: any }) => {
          file.name = file.originalFileName;
        });
        row.fileList = row.filePathList
      }
    }
    else if (row.files && row.files.length > 0) {
      row.files.map(i => {
        i.url = i.response.url
      })
    }
  }
  else {
    editC.value = {
      title: '',
      source: '',
      fileList: [],
    }
  }
  shomkC.value = true
  if (!row) return
  editC.value = row
}
const handleEditD = (index: number, row: any) => {
  if (row && row.filePathList) {
    if (row.filePathList.length > 0) {

      if (row.filePathList && row.filePathList.length > 0) {
        row.filePathList.forEach((file: { name: any; originalFileName: any }) => {
          file.name = file.originalFileName;
        });
        row.fileList = row.filePathList
      }
    }
    else if (row.files && row.files.length > 0) {
      row.files.map(i => {
        i.url = i.response.url
      })
    }
  }
  else {
    editD.value = {
      title: '',
      source: '',
      fileList: [],
    }
  }
  shomkD.value = true
  if (!row) return
  editD.value = row
}


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

  const { id } = row
  if (!id) return
  const { code, msg } = await badartDel({ id })
  if (code === 200) { message.success("删除成功！") }
  else { message.error(msg) }

  getbadartList();
}
async function handleDeleteC(index: number, row: any) {

  const { id } = row
  if (!id) return
  const { code, msg } = await highDel({ id })
  if (code === 200) { message.success("删除成功！") }
  else { message.error(msg) }
  gethighList()
}
async function handleDeleteD(index: number, row: any) {
  const { id } = row
  if (!id) return
  const { code, msg } = await actDel({ id })
  if (code === 200) { message.success("删除成功！") }
  else { message.error(msg) }
  getactList();
}
const optt = ref([
  {
    lable:'新品',
    id:'1'
  },
  {
    lable:'累进变更品',
    id:'2'
  },
  {
    lable:'现行品',
    id:'3'
  }
])

const activeName = ref("first")
const cateValue = ref('新品')
</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>
    <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">不良情报模块</span>
          </span>
        </template>
        <div class=" cont relative w100% h800px  overflow-y-auto">
          <el-button type="primary" @click="handleEditB" class="my20px">不良情报新增</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', 'font-size': '16px' }">

            <el-table-column label="时间" prop="createTime" />
            <el-table-column label="类别" prop="cate" />
            <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>
              </template>

            </el-table-column>
            <el-table-column label="操作" width="180px">
              <template #default="scope">
                <el-button size="small" @click="handleEditB(scope.$index, 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="two">
        <template #label>
          <span class="custom-tabs-label">
            <span class="text-20px">不良统计模块</span>
          </span>
        </template>
        <div>
          <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' , 'font-size': '16px'}">
            <el-table-column label="时间" prop="monthDate" width="180px" />
            <el-table-column label="供应商" prop="indexId" width="220px" />
            <!-- <el-table-column label="计件数" prop="partSum"  width="150px"/>
                <el-table-column label="不良件数" prop="badSum"  width="150px"/> -->
            <el-table-column label="数量" prop="partSum" />
            <!-- <el-table-column label="月份" prop="monthDate"  /> -->
            <el-table-column label="不良类别" prop="cate" />
            <!-- <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>
                  </template>

                </el-table-column> -->
            <el-table-column label="操作" width="180px">
              <template #default="scope">
                <el-button size="small" @click="handleEditA(scope.$index, 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="third">
        <template #label>
          <span class="custom-tabs-label">

            <span class="text-20px">品质情报模块</span>
          </span>
        </template>

        <div>
          <el-button type="primary" @click="handleEditC" class="my20px">品质情报新增</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' , 'font-size': '16px'}">
            <el-table-column label="时间" prop="createTime" />
            <el-table-column label="详情" prop="title" />
            <el-table-column label="来源" prop="source" />
            <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>
              </template>

            </el-table-column>
            <el-table-column label="操作" width="180px">
              <template #default="scope">
                <el-button size="small" @click="handleEditC(scope.$index, 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">活动进展模块</span>
          </span>
        </template>
        <div>
          <el-button type="primary" @click="handleEditD" class="my20px">活动进展新增</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' , 'font-size': '16px'}">


            <el-table-column label="时间" prop="createTime" />
            <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>
              </template>

            </el-table-column>
            <el-table-column label="操作" width="180px">
              <template #default="scope">
                <el-button size="small" @click="handleEditD(scope.$index, 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-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-config-provider :locale="locale">
          <el-date-picker v-model="editA.monthDate" type="month" placeholder="时间选择" size="large" />
        </el-config-provider>
        </el-form-item>
        <br>
        <el-form-item label="供应商">
          <el-input v-model="editA.indexId" />
        </el-form-item>
        <br>
        <el-form-item label="数量">
          <el-input v-model="editA.partSum" type="number" min="0" />
        </el-form-item>
        <br>
        <el-form-item label="类型">
                <n-select class="w220px" size="large" v-if="optt"  :show-arrow="false" :show-checkmark="false" v-model:value="cateValue" :options="optt" 
        value-field="lable"  label-field="lable" />
        </el-form-item>
        <br>
        <br>
        <el-form-item label="详情">
          <el-input type="textarea" 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>
            <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 :model="editB" label-width="120px" :inline="true">
        <el-form-item label="详情">
          <el-input v-model="editB.title" />
        </el-form-item>

        <br>
        <el-form-item label="类别">
          <el-input v-model="editB.cate" />
        </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>
            <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 label="详情">
          <el-input v-model="editC.title" />
        </el-form-item>

        <br>
        <el-form-item label="来源">
          <el-input v-model="editC.source" />
        </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">
            <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 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>
            <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>
</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>