<template>
  <div>
    <el-form size="small" label-position="right" style="padding-left: 10px;padding-right: 10px;" :inline="true">
      <el-row :span="24">
        <el-form-item label="一级分类" prop="firstId">
          <el-select v-model="query.firstId" placeholder="请选择分类" @change="secondList">
            <el-option v-for="(item, index) in first" :key="index" :label="item.name" :value="item.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="二级分类" prop="secondId">
          <el-select v-if="query.firstId" v-model="query.secondId" placeholder="请选择标签">
            <el-option v-for="(item, index) in second" :key="index" :label="item.name" :value="item.id"></el-option>
          </el-select>
          <el-select v-else disabled v-model="query.secondId" placeholder="请选择标签"></el-select>
        </el-form-item>
        <div class="searchBtn">
          <el-button type="primary" size="small" icon="el-icon-search" @click="searchChange1">搜 索</el-button>
          <el-button size="small" icon="el-icon-delete" @click="searchReset1">清 空</el-button>
        </div>
      </el-row>
    </el-form>
    <avue-crud
      :option="option"
      :table-loading="loading"
      :data="data"
      :page.sync="page"
      ref="crud"
      @search-change="searchChange"
      @current-change="currentChange"
      @size-change="sizeChange"
      @refresh-change="refreshChange"
      @selection-change="selectionChange"
      @on-load="onLoad"
    >
      <template slot="menuLeft">
        <el-button size="small" type="primary" @click="submit" :loading="btnLoading">保存</el-button>
      </template>
      <template slot="menu" slot-scope="{row}">
        <el-button size="small" type="text" @click="look(row)">查看</el-button>
      </template>
    </avue-crud>

    <!-- 展示区 -->
    <el-drawer title="查看" :visible.sync="viewDrawer" size="60%">
      <modify-dialog v-if="viewDrawer" :formOption="formOption" disabled></modify-dialog>
    </el-drawer>
  </div>
</template>

<script>
  import modifyDialog from "./modifyDialog";
  import {
    getAllContentCategoryFirst,
    getAllContentCategoryFirstList,
    getAllContentCategorySecondList
  } from '@/api/help/classify'
  import {getContentList, contentDel} from '@/api/help/content/allContent'
  import {sidebarContentSave} from '@/api/help/recommend/contentManage'
  const wxStatus = process.env.VUE_APP_SITE

export default {
  name: "addDialog",
  inject:["contentManage", "recommend"],
  components: {modifyDialog},
  props: {
    viewDrawerAdd: {
      type: Boolean,
      default: false
    }
  },
  created() {
    this.firstList()
  },
  data () {
    return {
      wxStatus,
      btnLoading:false,
      loading:false,
      viewDrawer:false,
      formOption: {
        secondId: ''
      },
      query: {
        secondId: ''
      },
      option: {
        height: "auto",
        tip: false,
        searchShow: true,
        searchMenuSpan: 4,
        border: true,
        index: false,
        indexLabel: "序号",
        selection: true,
        viewBtn: false,
        addBtn: false,
        editBtn:false,
        delBtn: false,
        columnBtn: false,
        menuWidth: 300,
        labelWidth: 151,
        dialogClickModal: false,
        dialogType: "drawer",
        dialogFullscreen: true,
        column: [
          {
            label: "内容标题",
            prop: "title",
            display: false,
            search: false
          },
          {
            label: "一级分类",
            prop: "firstId",
            display: false,
            type: "tree",
            dicUrl: getAllContentCategoryFirst(),
            props: {
              label: "name",
              value: "id"
            },
          },
          {
            label: "二级分类",
            prop: "secondName",
            display: false,
          }
        ]
      },
      first: [],
      second: [],
      data: [],
      submitList: [],
      page: {
        pageSize: 10,
        currentPage: 1,
        total: 100,
      },
    }
  },
  methods: {
    firstList(){
      getAllContentCategoryFirstList().then(res => {
        this.first = res.data.data
      })
    },
    secondList (id) {
      getAllContentCategorySecondList (id).then(res => {
        this.formOption.secondId = ''
        this.second = res.data.data
      })
    },
    /* 按钮方法 */
    searchChange1() {
      this.page.currentPage = 1;
      this.onLoad(this.page, this.query);
    },
    searchReset1() {
      this.query = {
        secondId: ''
      }
      this.onLoad(this.page, this.query);
    },
    submit () {
      if (this.recommend && this.recommend.titleList[1].select) {
        this.wxSubmit()
      } else {
        this.pcSubmit()
      }
    },
    /*
    * wxStatus
    * */
    wxSubmit () {
      if(this.submitList.length === 0) return
      this.btnLoading = true
      var idArr = ''
      this.submitList.forEach(e => {
        if (idArr.length === 0) {
          idArr+=e.id
        } else {
          idArr=idArr+','+e.id
        }
      })
      var source = (this.wxStatus === 'default' || this.wxStatus ==='fangzhen') ? 1 : 2
      var params = {
        sidebarId: '',
        type: source,
        contentIds: idArr,
        source: source
      }
      sidebarContentSave(params).then(res => {
        this.$message({
          type: 'success',
          message: '保存成功!'
        });
        this.btnLoading = false
        this.contentManage.closeAdd()
      }).catch(() => {
        this.btnLoading = false
      })
    },
    pcSubmit () {
      if(this.submitList.length === 0) return
      this.btnLoading = true
      var idArr = ''
      this.submitList.forEach(e => {
        if (idArr.length === 0) {
          idArr+=e.id
        } else {
          idArr=idArr+','+e.id
        }
      })
      // var source = this.wxStatus === 'default' ? 1 : 2
      var pcSource = (this.wxStatus === 'default' || this.wxStatus ==='fangzhen') ? 3 : 4;
      var params = {
        sidebarId: this.$route.params.id,
        type: this.$route.params.type,
        contentIds: idArr,
        source: pcSource
      }
      sidebarContentSave(params).then(res => {
        this.$message({
          type: 'success',
          message: '保存成功!'
        });
        this.btnLoading = false
        this.contentManage.closeAdd()
      }).catch(() => {
        this.btnLoading = false
      })
    },
    look (row) {
      this.formOption = JSON.parse(JSON.stringify(row))
      this.formOption.type = JSON.parse(JSON.stringify(row.firstName))
      this.formOption.tag = JSON.parse(JSON.stringify(row.secondName))
      this.formOption.note = JSON.parse(JSON.stringify(row.content))
      this.viewDrawer = true
    },
    /* 表格方法 */
    onLoad(page, params = {}) {
      this.loading = true;
      getContentList(
        page.currentPage,
        page.pageSize,
        Object.assign(this.query, params)
      ).then((res) => {
        this.data = res.data.data.records;
        this.page.total = res.data.data.total;
        this.loading = false;
      });
    },
    selectionChange(list){
      this.submitList = JSON.parse(JSON.stringify(list))
    },
    currentChange(val) {
      this.page.currentPage = val
    },
    sizeChange(val) {
      this.page.currentPage = 1
      this.page.pageSize = val
    },
    refreshChange () {
      this.page.currentPage = 1;
      this.onLoad(this.page)
    }
  }
}
</script>

<style scoped>
  .searchBtn {
    display: inline-block;
    margin-bottom: 18px;
  }
</style>
