<template>
  <div>
    <el-dialog :title="!ID ? '新建导航菜单' : '编辑菜单' " :visible.sync="isShow" @open="dialogOpen" class="menu-dialog">
      <!-- start -->
      <el-form :model="tmpMenu" :rules="menuCheck" ref="menuForm" label-width="130px" v-loading="dialogLoading" style="height:500px;overflow:auto;">
        <!--搜索框-->
        <el-form-item label="菜单名称：" prop="name" :verify="['NotNull']">
          <el-input v-model="tmpMenu.name" style="width:80%"></el-input>
        </el-form-item>
        <!--下拉框 父级菜单-->
        <el-form-item label="父菜单：" prop="parentID" :verify="['NotNull']" placeholder="请选择">
          <el-select v-model="tmpMenu.parentID" clearable >
            <el-option v-for=" item in firstLevelMenu" :key="item.ID" :label="item.name" :value="item.ID"></el-option>
          </el-select>
        </el-form-item>
        <!--下拉框 菜单类型-->
        <el-form-item label="菜单类型：" prop="type" :verify="['NotNull']">
          <el-select v-model="tmpMenu.type">
            <el-option v-for="item in menuTypeList" :key="item.value" :label="item.label" :value="item.value"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="事件Key：" v-if="tmpMenu.type !== 'view'">
          <el-input v-model="tmpMenu.menuKey" placeholder="请输入事件Key" style="width:80%"></el-input>
        </el-form-item>
        <!-- 素材 -->
        <!--图文需要拿第一个栏目的数据,暂时未完成-->
        <el-form-item label="素材：" v-if="tmpMenu.type !== 'view'">
          <div style="width:80%">
            <el-tabs type="border-card" v-model="activeTab">
              <el-tab-pane name="articles">
                <span slot="label">
                  <i class="fa fa-file-image-o" aria-hidden="true"></i>图文消息</span>
                <div class="media-item" v-if="tmpMenu.mediaID">
                  <el-card class="table-card">
                    <div v-for="val in mediaData.articles" :key="val.ID">
                      <div v-if="val.index === 0" class="appmsg-title">
                        <a href="javascript:void(0);" onclick="return false;" target="_blank">
                          <h4 class="appmsg_title">{{val.title}}</h4>
                        </a>
                        <img :src="mediaData.prefix + val.logoFile" onerror="this.src='@static/assets/images/picture'+((row.ID||row.$index) % 4)+'.png'" width="247" height="165"
                        />
                      </div>
                      <div v-else class="appmsg-div">
                        <el-row>
                          <el-col :span="16">
                            <a onclick="return false;" href="javascript:void(0);" target="_blank">{{val.title}}</a>
                          </el-col>
                          <el-col :span="8">
                            <img :src="mediaData.prefix + val.logoFile" onerror="this.src='@static/assets/images/picture'+((row.ID||row.$index) % 4)+'.png'" width="78" height="78"
                            />
                          </el-col>
                        </el-row>
                      </div>
                    </div>
                  </el-card>
                  <div style="text-align:right; font-size:12px;">
                    <a href="javascript:void(0);" @click="deleteMedia">删除</a>
                  </div>
                </div>
                <div v-else class="select-div">
                  <a href="javascript:void(0);" @click="mediaSelectModal = true">从素材库中选择</a>
                </div>
              </el-tab-pane>
              <el-tab-pane name="text">
                <span slot="label">
                  <i class="fa fa-pencil" aria-hidden="true"></i>文字</span>
                <el-input type="textarea" :rows="8" placeholder="请输入内容" v-model="tmpMenu.memo"></el-input>
              </el-tab-pane>
            </el-tabs>
          </div>
        </el-form-item>
        <!--暂时未链接按钮-->
        <el-form-item label="URL：" v-if="tmpMenu.type === 'view'" prop="URL">
          <el-input v-model="tmpMenu.linkName" disabled style="width:80%;"></el-input>
          <div>
            <el-button @click="selectContent">链接到内容</el-button>
            <el-button @click="selectCatalog">链接到栏目</el-button>
            <el-button @click="bindUser">微信用户绑定</el-button>
            <el-button @click="contribute">投稿</el-button>
            <el-button @click="inputUrl">外部地址</el-button>
            <el-button @click="checkContent">内容审核</el-button>
          </div>
          <el-input v-model="tmpMenu.URL" style="width:80%;"></el-input>
        </el-form-item>
      </el-form>
      <!-- end     -->
      <div slot="footer">
        <el-button @click="isShow = false">取 消</el-button>
        <el-button type="primary" @click="confirm" :loading="confirmLoading">确定</el-button>
      </div>
    </el-dialog>
    <el-dialog title="外部地址" :visible.sync="inputURLModal" class="input-url-dialog">
      <el-form label-width="100px;">
        <el-form-item label="地址：" :rules="{ required: true, message: '不能为空', trigger: 'blur' }">
          <el-input v-model="inputURL" style="width:80%"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer">
        <el-button @click="inputURLModal = false">取 消</el-button>
        <el-button type="primary" @click="confirmURL">确定</el-button>
      </div>
    </el-dialog>

    <content-selector title="选择内容记录" :show.sync="contentSelectorModal" @callback="contentSelectorCallback"></content-selector>
    <media-select-dialog :show.sync="mediaSelectModal" @callback="mediaSelectCallback"></media-select-dialog>
    <catalog-selector-dialog :show.sync="catalogSelectorModal" input-type="radio" title="选择栏目" @callback="catalogSelectorCallback"></catalog-selector-dialog>

  </div>
</template>
<script>
import ContentSelector from '@src/components/contentComponent/ContentSelector.vue'
import catalogSelector from '../contentcore/components/CatalogSelector.vue'
import mediaSelectDialog from './mediaSelectDialog.vue'
import util from '@src/common/util.js'

export default {
  data() {
    var checkURL = (rule, value, callback) => {
      if (this.tmpMenu.type === 'view' && !value) {
        return callback(new Error('不能为空'))
      } else {
        callback()
      }
    }
    return {
      dialogLoading: false,
      confirmLoading: false,
      contentSelectorModal: false,
      catalogSelectorModal: false,
      tmpMenu: {
        URL: null,
        linkName: null,
        mediaID: null,
        mediaType: null,
        menuKey: null,
        name: null,
        parentID: null,
        type: null,
        siteID: 0
      },
      menuCheck: {
        URL: [{ required: true, validator: checkURL, trigger: 'blur' }]
      },
      firstLevelMenu: [],
      menuTypeList: [],
      activeTab: 'articles',
      mediaSelectModal: false,
      mediaData: {},
      inputURL: '',
      inputURLModal: false
    }
  },
  computed: {
    isShow: {
      get() {
        return this.show
      },
      set(val) {
        this.$emit('update:show', val)
      }
    }
  },
  watch: {
    'tmpMenu.mediaID': {
      handler: async function(val) {
        if (!val) {
          this.mediaData = []
          return
        }
        let res = await axios.get('/ui/wechat/medias/init', {
          params: {
            ID: this.tmpMenu.mediaID
          }
        })
        this.mediaData = res.data.data
      },
      deep: true
    }
  },
  methods: {
    async dialogOpen() {
      this.confirmLoading = false
      this.dialogLoading = true
      this.activeTab = 'articles'
      let getFirstLevelMenu = await axios.get('/ui/wechatmenu/getfirstlevelmenu')
      this.firstLevelMenu = getFirstLevelMenu.data.data
      let menuType = await axios.get('/ui/platform/codes/Weixin.MenuType')
      this.menuTypeList = menuType.data.data
      if (this.ID) {
        let init = await axios.get('/ui/wechatmenu/init', {
          params: {
            ID: this.ID
          }
        })
        this.tmpMenu = init.data.data
        if (!this.tmpMenu.parentID) {
          this.tmpMenu.parentID = null
        }
      }
      this.dialogLoading = false
    },
    selectContent() {
      this.contentSelectorModal = true
    },
    selectCatalog() {
      this.catalogSelectorModal = true
    },
    contentSelectorCallback(row) {
      if (!row.ID) {
        return
      }
      this.tmpMenu.linkName = row.contentTypeID + '：' + row.title
      this.tmpMenu.URL = row.link
    },
    catalogSelectorCallback(row) {
      this.tmpMenu.linkName = '栏目：' + row.name
      this.tmpMenu.URL = row.link
    },
    bindUser() {
      this.tmpMenu.linkName = '微信用户绑定'
      this.tmpMenu.URL = '{FrontAppContext}/weixin/bindUser.zhtml?siteid={SiteID}'
    },
    contribute() {
      this.tmpMenu.linkName = '投稿'
      this.tmpMenu.URL = '{FrontAppContext}/weixin/contribute.zhtml?siteid={SiteID}'
    },
    inputUrl() {
      this.inputURL = 'http://'
      this.inputURLModal = true
    },
    confirmURL() {
      this.tmpMenu.linkName = this.inputURL
      this.tmpMenu.URL = this.inputURL
      this.inputURLModal = false
    },
    checkContent() {
      this.tmpMenu.linkName = '内容审核'
      this.tmpMenu.URL = '{FrontAppContext}/weixin/checkPendingList.zhtml?siteid={SiteID}'
    },
    mediaSelectCallback(ID) {
      Vue.delete(this.tmpMenu, 'mediaID')
      Vue.set(this.tmpMenu, 'mediaID', ID)
    },
    deleteMedia() {
      Vue.delete(this.tmpMenu, 'mediaID')
      Vue.set(this.tmpMenu, null)
    },
    async confirm() {
      try {
        await util.validateForm(this.$refs['menuForm'])
      } catch (e) {
        util.showErrorMessageBox(e)
        return
      }
      this.confirmLoading = true
      let res
      if (this.ID) {
        res = await axios.put('/ui/wechatmenu/edit', this.tmpMenu)
      } else {
        res = await axios.post('/ui/wechatmenu', this.tmpMenu)
      }
      util.showResponseMessage(res.data)
      if (res.data.status === 1) {
        this.$emit('callback')
        this.isShow = false
      }
      this.confirmLoading = false
    }
  },
  props: {
    ID: {
      default: 0
    },
    show: {
      type: Boolean,
      required: true
    }
  },
  components: {
    'media-select-dialog': mediaSelectDialog,
    'catalog-selector-dialog': catalogSelector,
    'content-selector': ContentSelector
  }
}
</script>
<style>
/* 在一般情况下dialog宽为600像素，在逻辑分辨率480像素以下dialog宽为96% */

.menu-dialog .el-dialog {
  width: 600px;
}

@media (max-width: 480px) {
  .menu-dialog .el-dialog {
    width: 96%;
  }
}

.input-url-dialog .el-dialog {
  width: 400px;
}

@media (max-width: 480px) {
  .input-url-dialog .el-dialog {
    width: 86%;
  }
}
</style>
<style scoped>
.el-button + .el-button {
  margin-left: 5px;
}

.select-div {
  width: 100%;
  height: 180px;
  border: 2px dashed #ccc;
  text-align: center;
  padding-top: 80px;
}

.select-div a {
  color: #ccc;
  font-weight: 400;
}

.select-div a:hover {
  color: #777;
  text-decoration: underline;
}

.media-item {
  max-width: 278px;
  margin: 10px 0 0 10px;
  float: left;
}

.appmsg-title {
  position: relative;
  margin: 0 15px 15px 15px;
}

.appmsg-title a {
  font-weight: 400;
  font-style: normal;
  font-size: 16px;
  color: #fff;
  width: 100%;
}

.appmsg_title {
  background: rgba(0, 0, 0, 0.6) !important;
  position: absolute;
  bottom: 10px;
  width: 100%;
  padding: 15px 8px 10px 8px;
}

.appmsg-div {
  padding: 15px;
  border-top: 1px solid #ccc;
}

.appmsg-div a {
  font-size: 16px;
  padding: 24px 10px 0 0;
  display: block;
  color: #8d8d8d;
}

.appmsg-div a:hover {
  color: black;
  text-decoration: none;
}

.appmsg-div img {
  float: right;
}
</style>
