<template>
  <div>
    <el-tabs type="card">
      <el-tab-pane :label="this.$i18n.t('sysManagement.chineseInformation')">
        <el-select v-model="shopId" placeholder="关联店铺" controls-position="right" @change="getInfo(shopId)">
          <el-option v-for="item in shopList"
                     :key="item.shopId"
                     :label="item.shopName"
                     :value="item.shopId">
          </el-option>
        </el-select>
        <tiny-mce
          v-model="contentCN.content"
          ref="content"
          style="width: 95%"
        ></tiny-mce>
      </el-tab-pane>
      <el-tab-pane :label="this.$i18n.t('sysManagement.englishInformation')">
        <el-select v-model="shopId" placeholder="关联店铺" controls-position="right" @change="getInfo(shopId)">
          <el-option v-for="item in shopList"
                     :key="item.shopId"
                     :label="item.shopName"
                     :value="item.shopId">
          </el-option>
        </el-select>
        <tiny-mce
          v-model="contentEN.content"
          ref="content"
          style="width: 95%"
        ></tiny-mce>
      </el-tab-pane>
    </el-tabs>
    <el-button style="margin-top: 10px" type="primary" @click="saveSubmit">{{
        $t("crud.saveBtn")
      }}</el-button>
  </div>
</template>

<script>
import TinyMce from '@/components/tiny-mce'

export default {
  components: {
    TinyMce
  },
  props: {
    params: {
      title: '',
      keyCN: '',
      keyEN: '',
      remarkCN: '',
      remarkEN: ''
    }
  },
  data () {
    return {
      // 中文配置信息
      contentCN: {
        content: ''
      },
      // 英文配置信息
      contentEN: {
        content: ''
      },
      shopId: null,
      shopList: [],
    }
  },
  mounted () {
    this.getShopList()
    // this.init()
  },
  methods: {
    getShopList () {
      this.$http({
        url: this.$http.adornUrl('/shop/shopAuditing/list'),
        method: 'get',
      }).then(({ data }) => {
        if (data) {
          this.shopList = data
        }
      })
    },
    getInfo (shopId) {
      this.$http({
        url: this.$http.adornUrl('/sys/pconfig/info/' + this.params.keyCN + "_" + shopId),
        method: 'get',
        params: this.$http.adornParams()
      }).then(({data}) => {
        if (data) {
          this.contentCN = data
        }
      })
      this.$http({
        url: this.$http.adornUrl('/sys/pconfig/info/' + this.params.keyEN + "_" + shopId),
        method: 'get',
        params: this.$http.adornParams()
      }).then(({data}) => {
        if (data) {
          this.contentEN = data
        }
      })
    },
    init () {
      this.$nextTick(() => {
        this.$http({
          url: this.$http.adornUrl('/sys/pconfig/info/' + this.params.keyCN),
          method: 'get',
          params: this.$http.adornParams()
        }).then(({data}) => {
          if (data) {
            this.contentCN = data
          }
        })
        this.$http({
          url: this.$http.adornUrl('/sys/pconfig/info/' + this.params.keyEN),
          method: 'get',
          params: this.$http.adornParams()
        }).then(({data}) => {
          if (data) {
            this.contentEN = data
          }
        })
      })
    },

    saveSubmit () {
      this.$http({
        url: this.$http.adornUrl('/sys/pconfig/save'),
        method: 'post',
        data: this.$http.adornData({
          'paramKey': this.params.keyCN + "_" + this.shopId,
          'paramValue': JSON.stringify(this.contentCN),
          'remark': this.params.remarkCN
        })
      })
      this.$http({
        url: this.$http.adornUrl('/sys/pconfig/save'),
        method: 'post',
        data: this.$http.adornData({
          'paramKey': this.params.keyEN + "_" + this.shopId,
          'paramValue': JSON.stringify(this.contentEN),
          'remark': this.params.remarkEN
        })
      }).then(({ data }) => {
        this.$message({
          message: this.$i18n.t('publics.operation'),
          type: 'success',
          duration: 1500
        })
      })
    }
  }
}
</script>
