<script>
import { defineComponent } from 'vue'
export default defineComponent({
  //进入前是否清除参数
  beforeRouteEnter(to, from, next) {
    if (to.query.reportType == 'day') {
      to.matched[1].meta.title = '晨报章节设置'
    } else {
      to.matched[1].meta.title = '周报章节设置'
    }
    next()
  }
})

</script>

<script setup>
import { bannerupload, getchapterTypeList, editChapterType } from '@/api/api.js';
import { reactive,ref } from 'vue'
import $ from 'jquery'
import { useRoute } from 'vue-router'
import { ElMessage } from 'element-plus'

const route = useRoute()

const pageState = reactive({
  list: [],
  aeForm: {
    show: false,
    id: 0,
    UnselectedIcon: '',
    selectedIcon: '',
    wordIcon: '',
    bgImg: '',
    IsShow: false
  }
})

async function getList() {
  getchapterTypeList({ ReportType: route.query.reportType == 'week' ? 'week' : 'day' }).then(res => {
    if (res.Ret === 200) {
      pageState.list = res.Data.List || []
    }
  })
}
function handleShowEdit(data) {
  pageState.aeForm = {
    show: true,
    id: data.ReportChapterTypeId,
    UnselectedIcon: data.UnselectedImage,
    selectedIcon: data.SelectedImage,
    wordIcon: data.WordsImage,
    bgImg: data.EditImgUrl,
    IsShow: data.IsShow == 0 ? true : false
  }
}
getList()

const aeForm = ref(null)
function setClassifyHandle() {
  aeForm.value.validate((valid) => {
    if (valid) {
      let params = {
        ReportChapterTypeId: pageState.aeForm.id,
        SelectedImage: pageState.aeForm.selectedIcon,
        UnselectedImage: pageState.aeForm.UnselectedIcon,
        WordsImage: pageState.aeForm.wordIcon,
        EditImgUrl: pageState.aeForm.bgImg,
        IsShow: pageState.aeForm.IsShow ? 0 : 1
      }
      editChapterType(params).then(res => {
        if (res.Ret === 200) {
          ElMessage.success(res.Msg);
          getList();
          pageState.aeForm.show = false;
        }
      })
    }
  })
}

function clickinput(type) {  //上传模拟点击
  $(`#file${type}`).click();
}
function fileSelected(type) {  //选择文件上传
  if (document.getElementById('file' + type).files[0]) {
    let hostfile = document.getElementById('file' + type).files[0];
    let size = Math.floor(hostfile.size / 1024 / 1024);
    if (size > 200) {
      ElMessage.error('上传文件大小不能大于200M！');
      hostfile = {};
      return false
    }
    if (hostfile.name.toLowerCase().includes('.png') || hostfile.name.toLowerCase().includes('.jpg') || hostfile.name.toLowerCase().includes('.jpeg')) {
      let form = new FormData();
      form.append('file', hostfile);  //hostfile.name
      pageState.uploadloading = true;
      bannerupload(form).then((res) => {
        if (res.Ret === 200) {
          if (type == 1) {
            pageState.aeForm.UnselectedIcon = res.Data.ResourceUrl;
          } else if (type == 2) {
            pageState.aeForm.selectedIcon = res.Data.ResourceUrl;
          } else if (type == 3) {
            pageState.aeForm.wordIcon = res.Data.ResourceUrl
          } else if (type == 4) {
            pageState.aeForm.bgImg = res.Data.ResourceUrl
          }
        }
        $("#file" + type).val('');
        hostfile = {};
      });
    } else {
      ElMessage.error('上传文件格式不正确！');
    }
  }
}




</script>

<template>
  <div class="classify-page">
    <div class="content-box">
      <el-tree
        :data="pageState.list"
        node-key="ReportChapterTypeId"
        :props="{
          label: 'ReportChapterTypeName',
          children: 'Child',
        }"
        check-strictly
        empty-text="暂无数据"
        draggable
        :allow-drop="canDropHandle"
        @node-drop="dropOverHandle"
      >
        <template #default="{ data }">
          <div class="classify-item-wrap">
            <div>
              <span :class="['tag', data.Enabled == 1 ? 'open' : 'close']">{{
                data.Enabled == 1 ? "启用" : "禁用"
              }}</span>
              <span>{{ data.ReportChapterTypeName }}</span>
            </div>

            <div class="opt-box">
              <span
                style="cursor: pointer; color: #409eff"
                @click.stop="handleShowEdit(data)"
                >小程序配置</span
              >
            </div>
          </div>
        </template>
      </el-tree>
    </div>

    <!-- 分类弹窗 -->
    <el-dialog
      :append-to-body="true"
      v-model="pageState.aeForm.show"
      center
      title="小程序配置"
      width="650px"
    >
      <div style="padding-left: 50px">
        <el-form
          :model="pageState.aeForm"
          :rules="pageState.aerules"
          ref="aeForm"
          label-position="left"
          hide-required-asterisk
          label-width="110px"
        >
          <el-form-item label="未选中icon" prop="UnselectedIcon">
            <input
              type="file"
              size="small"
              name="file"
              @change="fileSelected(1)"
              id="file1"
              class="true-file"
              style="display: none"
            />
            <el-input
              readonly
              type="text"
              v-model="pageState.aeForm.UnselectedIcon"
              placeholder="上传icon"
              size="medium"
              style="width: 400px"
            >
              <template #append>
                <el-button type="primary" size="mini" @click="clickinput(1)"
                  >选择图片</el-button
                >
              </template>
            </el-input>
          </el-form-item>
          <el-form-item label="选中icon" prop="selectedIcon">
            <input
              type="file"
              size="small"
              name="file"
              @change="fileSelected(2)"
              id="file2"
              class="true-file"
              style="display: none"
            />
            <el-input
              readonly
              type="text"
              v-model="pageState.aeForm.selectedIcon"
              placeholder="上传icon"
              size="medium"
              style="width: 400px"
            >
              <template #append>
                <el-button type="primary" size="mini" @click="clickinput(2)"
                  >选择图片</el-button
                >
              </template>
            </el-input>
          </el-form-item>
          <el-form-item label="带字icon" prop="wordIcon">
            <input
              type="file"
              size="small"
              name="file3"
              @change="fileSelected(3)"
              id="file6"
              class="true-file"
              style="display: none"
            />
            <el-input
              readonly
              type="text"
              v-model="pageState.aeForm.wordIcon"
              placeholder="上传icon"
              size="medium"
              style="width: 400px"
            >
              <template #append>
                <el-button type="primary" size="mini" @click="clickinput(3)"
                  >选择图片</el-button
                >
              </template>
            </el-input>
          </el-form-item>
          <el-form-item label="章节配图" prop="bgImg">
            <input
              type="file"
              size="small"
              name="file4"
              @change="fileSelected(4)"
              id="file6"
              class="true-file"
              style="display: none"
            />
            <el-input
              readonly
              type="text"
              v-model="pageState.aeForm.bgImg"
              placeholder="上传icon"
              size="medium"
              style="width: 400px"
            >
              <template #append>
                <el-button type="primary" size="mini" @click="clickinput(4)"
                  >选择图片</el-button
                >
              </template>
            </el-input>
          </el-form-item>
          <el-form-item label="小程序端隐藏" prop="IsShow">
            <el-switch
              v-model="pageState.aeForm.IsShow"
              inactive-color="#ededed"
            ></el-switch>
          </el-form-item>
        </el-form>
      </div>
      <template #footer>
        <div style="margin-top: 20px">
          <el-button
            @click="pageState.aeForm.show = false"
            style="width: 132px; height: 40px"
            >取消</el-button
          >
          <el-button
            @click="setClassifyHandle"
            type="primary"
            style="width: 132px; height: 40px"
            >保存</el-button
          >
        </div>
      </template>
    </el-dialog>
  </div>
</template>


<style lang="scss">
.el-cascader .el-input {
  width: 100%;
}
.classify-page {
  .content-box {
    .el-tree-node__content {
      padding-top: 10px;
      padding-bottom: 10px;
      border-bottom: 1px solid #c8cdd9;
      height: auto;
    }
  }
}
</style>
<style lang="scss" scoped>
.top-wrap {
  display: flex;
  justify-content: space-between;
  background: #ffffff;
  border-radius: 4px;
  padding: 20px;
}
.content-box {
  padding: 20px;
  margin-top: 20px;
  height: calc(100vh - 260px);
  overflow-y: auto;
  background-color: #ffffff;
  .classify-item-wrap {
    flex: 1;
    padding-right: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .tag {
      display: inline-block;
      min-width: 76px;
      line-height: 30px;
      text-align: center;
      margin-right: 5px;
      &.open {
        background-color: #ecf2fe;
        color: #0052d9;
      }
      &.close {
        background-color: #0052d9;
        color: #fff;
      }
    }
    .opt-box {
      .icon-drag,
      .icon-set {
        width: 16px;
        height: 16px;
        margin-left: 10px;
      }
    }
  }
}
</style>