<template>
  <section class="List">
    <ai-list>
      <ai-title slot="title" title="宣传资讯" isShowBottomBorder isShowArea v-model="search.areaId" :instance="instance"
        @change="page.current=1,getTableData()">
      </ai-title>
      <template #content>
        <div class="flex">
          <div class="type">
            <div class="title">宣传板块<span><el-button type="text" @click="addType(0, typeList.length+1, '')">添加</el-button></span></div>
            <div class="list">
              <div class="item" v-for="(item, index) in typeList" :key="index" :class="typeIndex == index ? 'active' : ''" @click="typeClick(index)">
              {{item.categoryName}}
              </div>
              <div class="item" v-if="!typeList.length">暂无数据</div>
            </div>
          </div>
          <div class="type mini-type">
            <div class="title">模块名称<span><el-button type="text" @click="addType(1, miniTypeList.length+1, typeList[typeIndex].id)">添加</el-button></span></div>
            <div class="list">
              <div class="item" v-for="(item, index) in miniTypeList" :key="index" :class="miniTypeIndex == index ? 'active' : ''" @click="miniTypeClick(index)">
                <span class="text">{{item.categoryName}}</span>
                <span class="icon">
                  <i class="el-icon-circle-plus-outline" @click="addNewType(index)"></i>
                  <i class="el-icon-edit" @click="editMini(index)"></i>
                  <i class="el-icon-delete" @click="delMini(miniTypeList[index].id)"></i>
                </span>
              </div>
              <div class="item" v-if="!miniTypeList.length">暂无数据</div>
            </div>
          </div>
          <div class="content">
            <ai-search-bar>
              <template #right>
                <el-input size="small" placeholder="请输入标题" v-model="search.title" clearable @change="page.current=1,getTableData()"/>
              </template>
            </ai-search-bar>
            <ai-search-bar>
              <template #left>
                <el-button type="primary" icon="iconfont iconAdd" @click="showEdit('')" v-if="typeList.length && miniTypeList.length">添加</el-button>
                <!-- <el-button icon="iconfont iconDelete" :disabled="!ids.length" @click="handleDelete(ids)">删除</el-button> -->
              </template>
            </ai-search-bar>
            <ai-table :tableData="tableData" :total="page.total" :current.sync="page.current" :size.sync="page.size"
                      @getList="getTableData" :col-configs="colConfigs" :dict="dict"
                      @selection-change="v=>ids=v.map(e=>e.id)">
              <el-table-column slot="options" label="操作" fixed="right" align="center" width='150px'>
                <template slot-scope="{row}">
                  <el-button type="text" @click="showEdit(row.id)">编辑</el-button>
                  <el-button type="text" @click="handleDelete(row.id)">删除</el-button>
                </template>
              </el-table-column>
            </ai-table>
          </div>
        </div>
        
      </template>
    </ai-list>
    <ai-dialog :visible.sync="dialog" :title="dialogTitle" @closed="form={}" @onConfirm="submitDialog" width="600px">
      <el-form :model="form" :rules="rules" ref="DialogForm" size="small" label-width="100px">
        <el-form-item :label="addLabelText" prop="categoryName">
          <el-input v-model.number="form.categoryName" placeholder="请输入" maxlength="10" show-word-limit/>
        </el-form-item>
        <el-form-item label="排序" prop="showIndex" v-if="type != 2">
          <el-input-number v-model="form.showIndex" @change="handleChange" :min="1" :max="100"></el-input-number>
        </el-form-item>
      </el-form>
      <ai-table :tableData="newTypeList" :total="newPage.total" :current.sync="newPage.current" :size.sync="newPage.size"
                       :col-configs="colConfigsNew" v-if="type == 2">
        <el-table-column slot="options" label="操作" fixed="right" align="center">
          <template slot-scope="{row}">
            <el-button type="text" @click="editNew(row)">编辑</el-button>
            <el-button type="text" @click="delMini(row.id)">删除</el-button>
          </template>
        </el-table-column>
      </ai-table>
    </ai-dialog>
  </section>
</template>

<script>
import {mapState} from "vuex";

export default {
  name: "List",
  props: {
    instance: Function,
    dict: Object,
    permissions: Function
  },
  computed: {
    ...mapState(['user'])
  },
  data() {
    return {
      search: {title: ""},
      page: {current: 1, size: 10, total: 0},
      newPage: {current: 1, size: 10, total: 0},
      tableData: [],
      colConfigs: [
        {label: "标题", prop: "title", align: "center"},
        {label: "地区", prop: "areaName", align: "center", width: '150px'},
        {label: "浏览次数", prop: "viewCount", align: "center", width: '100px'},
        {label: "发布人", prop: "createUserName", align: "center", width: '100px'},
        {label: "发布时间", prop: "createTime", align: "center", width: '100px'},
        {slot: "options"}
      ],
      colConfigsNew: [
        {label: "分类名称", prop: "categoryName", align: "center"},
        {slot: "options"}
      ],
      ids: [],
      dialog: false,
      form: {},
      rules: {
        categoryName: '',
        showIndex: [{required: true, message: "请输入排序", trigger: "change"}],
      },
      typeList: [], //大分类模块
      miniTypeList: [], //模块子
      newTypeList: [], //文章分类
      type: 0, //0、宣传板块；1、宣传模块；2、文章分类
      dialogTitle: '',
      addLabelText: '',
      parentId: '',
      typeIndex: 0,
      miniTypeIndex: 0
    }
  },
  methods: {
    getTableData() {
      this.instance.post("/app/apppublicityinfo/list", null, {
        params: {...this.page, ...this.search, moduleId: this.miniTypeList[this.miniTypeIndex].id || ''}
      }).then(res => {
        if (res?.data) {
          this.tableData = res.data?.records
          this.page.total = res.data.total
        }
      })
    },
    showEdit(id) {
      this.$router.push({query: {id: id, parentId: this.typeList[this.typeIndex].id, moduleId: this.miniTypeList[this.miniTypeIndex].id}, hash: "#add"})
    },
    handleDelete(ids) {
      this.$confirm("是否删除该条宣传资讯信息").then(() => {
        this.instance.post("/app/apppublicityinfo/delete", null, {
          params: {ids: ids?.toString()}
        }).then(res => {
          if (res?.code == 0) {
            this.$message.success("删除成功!")
            this.getTableData()
          }
        })
      }).catch(() => 0)
    },
    handleChange(value) {
      this.form.showIndex = value
    },
    submitDialog() {
      this.$refs.DialogForm.validate(v => {
        if (v) {
          this.form.categoryType = this.type
          this.form.parentId = this.parentId
          this.instance.post(`/app/apppublicitycategory/addPublicityCategory`, this.form).then(res => {
            if (res.code == 0) {
              this.$message.success('添加成功');
              if(this.type == 0) {
                this.getTypeList()
              }
              if(this.type == 1) {
                this.getMiniTypeList(this.typeList[this.typeIndex].id)
              }
              this.dialog = false
            }
          })
        }
      })
    },
    addType(e, index, parentId) {
      this.type = e
      this.parentId = parentId
      this.form.showIndex = index
      this.dialogTitle = ['宣传板本', '宣传模块', '文章分类'][e]
      this.addLabelText = ['板本名称', '模块名称', '分类名称'][e]
      this.rules.categoryName =  [{required: true, message: "请输入"+this.addLabelText, trigger: "change"}]
      this.dialog = true
    },
    getTypeList() {
      this.instance.post(`/app/apppublicitycategory/list?categoryType=0&size=100`).then(res => {
        if (res.code == 0 && res.data.records && res.data.records.length) {
          this.typeList = res.data.records
          this.getMiniTypeList(res.data.records[0].id)
        }
      })
    },
    getMiniTypeList(parentId) {
      this.instance.post(`/app/apppublicitycategory/list?categoryType=1&size=100&parentId=${parentId}`).then(res => {
        if (res.code == 0) {
          this.miniTypeList = res.data.records
          if(res.data.records && res.data.records.length) {
            this.miniTypeClick(0)
          }
          
        }
      })
    },
    getNewTypeList(parentId) {
      this.instance.post(`/app/apppublicitycategory/list?categoryType=2&size=10&parentId=${parentId}`).then(res => {
        if (res.code == 0) {
          this.newTypeList = res.data.records
          this.newPage.total = res.data.total
        }
      })
    },
    typeClick(e) {
      this.typeIndex = e
      this.getMiniTypeList(this.typeList[e].id)
    },
    miniTypeClick(e) {
      this.miniTypeIndex = e
      this.current = 1
      this.tableData = []
      this.getTableData()
    },
    editMini(index) {
      this.form = {...this.miniTypeList[index]}
      this.addType(this.miniTypeList[index].categoryType, this.miniTypeList[index].showIndex, this.typeList[this.typeIndex].id)
    },
    delMini(id) {
      this.$confirm("确认删除", {
        type: 'error'
      }).then(() => {
        this.instance.post(`/app/apppublicitycategory/delete?ids=${id}`).then(res => {
          if (res.code == 0) {
            this.getNewTypeList(this.miniTypeList[this.miniTypeIndex].id)
            this.getMiniTypeList(this.typeList[this.typeIndex].id)
            this.$message.success('删除成功');
          }
        }).catch((err) => {
          this.$message.error(err);
        })
      })
    },
    addNewType(index) {
      this.getNewTypeList(this.miniTypeList[index].id)
      this.addType(2, '', this.miniTypeList[index].id)
    },
    editNew(row) {
      this.form = {...row}
      this.addType(2, '', row.parentId)
    }
  },
  created() {
    this.search.areaId = this.user.info.areaId
    this.getTypeList()
    this.getTableData()
  }
}
</script>

<style lang="scss" scoped>
.List {
  height: 100%;
  .flex{
    display: flex;
    .type{
      width: 250px;
      border: 1px solid #ddd;
      box-sizing: border-box;
      .title{
        font-size: 16px;
        line-height: 40px;
        border-bottom: 1px solid #ddd;
        padding: 0 16px;
        font-weight: 600;
        span{
          color: #26f;
          font-size: 12px;
          font-weight: 400;
          float: right;
        }
      }
      .list{
        .item{
          padding: 0 16px;
          display: flex;
          justify-content: space-between;
          line-height: 32px;
          font-size: 14px;
          color: #333;
          box-sizing: border-box;
          .text{
            width: calc(100% - 70px);
            cursor: pointer;
          }
          .icon{
            width: 70px;
            text-align: right;
            i{
              font-size: 14px;
              cursor: pointer;
              margin-left: 8px;
            }
            .el-icon-delete{
              color: #f46;
            }
            .el-icon-circle-plus-outline{
              color: #26f;
            }
          }
        }
        .active{
          // color: #26f;
          background-color: #f3f6f9;
        }
      }
    }
    .mini-type{
      margin-right: 16px;
    }
    .content{
      width: calc(100% - 516px);
    }
  }
}
</style>