<template>
  <div v-if="menuDetail && menuDetail.menuName">
    <div class="title">{{menuDetail.menuName}} <span class="menuBodyTip" :class="{'select': menuDetail.status}">[{{menuDetail.status ? '展示中' : '未展示'}}]</span></div>
    <avue-crud
      :option="option"
      :table-loading="loading"
      :data="bodyData"
      ref="crud"
    >
      <template slot="status" slot-scope="{row}">
        <el-switch v-model="row.status" @change="status(row)"></el-switch>
      </template>
      <template slot="menu" slot-scope="{row}">
        <el-button type="text" @click="contentManage(row)" v-if="row.display">管理内容</el-button>
      </template>
    </avue-crud>
  </div>
</template>

<script>
  import {
    routesCompanyEdit
  } from '@/api/help/recommend/route'

export default {
  name: "menuBody",
  inject:["recommend"],
  props: {
    menuDetail: {}
  },
  data () {
    return {
      viewDrawer:false,
      dialogShow:true,
      loading:false,
      option: {
        height: "auto",
        tip: false,
        searchShow: true,
        searchMenuSpan: 4,
        border: true,
        index: true,
        indexLabel: "序号",
        selection: false,
        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,
          },
          {
            label: "开/关",
            prop: "status",
            display: false,
            slot: true
          },
        ]
      },
      page: {
        pageSize: 10,
        currentPage: 1,
        total: 100,
      },
    }
  },
  methods: {
    contentManage (item){
      this.$router.push({ name: '管理内容', params: { type: item.id, id: this.menuDetail.menuId } })
    },
    status (row) {
      var str = ''
      switch (row.title) {
        case '政策法规':
          str = 'isShowPolicy'
          break

        case '常见问题':
          str = 'isShowQuestion'
          break

        case '广告位':
          str = 'isShowCarousel'
          break

        case '专属客服':
          str = 'isShowCustservice'
          break

      }
      var item = this.menuDetail
      var params = {
        menuId: item.menuId,
        menuCode: item.menuCode,
        [str]: row.status ? 1 : 0
      }
      routesCompanyEdit(params).then(res =>{
        this.recommend.initRoute()
      })
    }
  },
  computed: {
    bodyData () {
      var data = [
        {
          title: '政策法规',
          status: this.menuDetail.isShowPolicy === 0 ? false : true,
          id: 1,
          display: true
        },
        {
          title: '常见问题',
          status: this.menuDetail.isShowQuestion === 0 ? false : true,
          id: 2,
          display: true
        },
        {
          title: '广告位',
          status: this.menuDetail.isShowCarousel === 0 ? false : true,
          id: 3,
          display: false
        },
        {
          title: '专属客服',
          status: this.menuDetail.isShowCustservice === 0 ? false : true,
          id: 4,
          display: false
        },
      ]
      return data
    }
  }
}
</script>

<style scoped>
  .title{
    height: 24px;
    font-size: 16px;
    font-weight: 500;
    color: rgba(0, 0, 0, 0.85);
    line-height: 24px;
    padding-bottom: 15px;
    margin-bottom: 10px;
    border-bottom: 1px solid #E9E9E9;
  }
  .select{
    color: #1890FF !important;
  }
  .menuBodyTip {
    font-size: 12px;
    font-weight: 400;
    color: #999999;
    line-height: 24px;
  }
</style>
