<template>
  <div>
    <div class="paynotice-tinymce" style="height: calc(100vh - 200px)">
      <el-form
        label-width="150px"
        :rules="rules"
        :model="modalData"
        ref="modalForm"
      >
        <el-form-item
          v-if="marketList.length > 0"
          prop="marketId"
          label="菜市场:"
        >
          <el-select v-model="modalData.marketId" placeholder="请选择菜市场">
            <el-option
              v-for="item in marketList"
              :key="item.marketId"
              :label="item.marketName"
              :value="item.marketId"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item
          v-if="configType === 1 && storeList.length > 0"
          prop="shopId"
          label="店铺:"
        >
          <el-select v-model="modalData.shopId" placeholder="请选择店铺">
            <el-option
              v-for="item in storeList"
              :key="item.shopId"
              :label="item.shopName"
              :value="item.shopId"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item prop="title" label="标题:">
          <el-input
            style="width: 200px"
            v-model="modalData.title"
            placeholder="请输入购物须知标题"
          ></el-input>
        </el-form-item>
        <el-form-item prop="content" label="内容:">
          <Tinymce
            :key="keyFlag"
            :height="300"
            v-model="modalData.content"
            placeholder="请输入购物须知内容"
          />
        </el-form-item>
      </el-form>
      <div style="margin-left: 160px">
        <el-button type="primary" @click="handelConfirm">
          确定
        </el-button>
      </div>
    </div>
  </div>
</template>

<script>
import $api from '@/api/index.js'
import { mapState } from 'vuex'
import Tinymce from '../../../../components/tinymce/index.vue'
export default {
  components: {
    Tinymce
  },
  data() {
    const that = this
    return {
      keyFlag: 1,
      formInline: {
        type: 0,
        targetId: '',
        position: '3'
      },
      // 0 市场， 1 店铺
      configType: 0,
      modalData: {},
      rules: {
        marketId: [
          {
            required: true,
            message: '请选择菜市场',
            trigger: ['blur', 'change']
          }
        ],
        title: [
          {
            required: true,
            message: '请输入标题',
            trigger: ['blur', 'change']
          }
        ],
        content: [
          {
            required: true,
            message: '请输入购物须知',
            trigger: ['blur', 'change']
          }
        ]
      }
    }
  },
  created() {},
  activated() {
    console.log(this.marketId, this.shopId)
    this.keyFlag++
    if (
      JSON.parse(sessionStorage.getItem('userInfo')).role === 'ROLE_MANAGER'
    ) {
      this.formInline = {
        type: 0,
        targetId: this.marketId,
        position: '2',
        app: 1
      }
      this.modalData.marketId = this.marketId
      this.configType = 0
      $api.getMarketPayNotice(this.marketId).then(res => {
        console.log('菜市场须知', res)
        if (res.data.data) {
          this.modalData = { ...res.data.data }
        }
      })
      console.lo
    } else {
      this.formInline = {
        type: 0,
        ownerId: this.shopId,
        position: '3',
        app: 1
      }
      this.modalData.shopId = this.shopId
      this.configType = 1
      $api.getShopPayNotice(this.shopId).then(res => {
        console.log('店铺须知', res)
        if (res.data.data) {
          this.modalData = { ...res.data.data }
        }
      })
    }
  },
  methods: {
    handelConfirm() {
      this.$refs.modalForm.validate(val => {
        if (val) {
          console.log(this.modalData)
          if (this.configType === 0) {
            if (this.modalData.id) {
              $api
                .updateMarketPayNotice({
                  ...this.modalData
                })
                .then(res => {
                  console.log(res)
                })
            } else {
              $api.createMarketPayNotice({ ...this.modalData }).then(res => {
                console.log(res)
              })
            }
          } else {
            if (this.modalData.id) {
              $api.updateShopPayNotice({ ...this.modalData }).then(res => {
                console.log(res)
              })
            } else {
              $api.createShopPayNotice({ ...this.modalData }).then(res => {
                console.log(res)
              })
            }
          }
        }
      })
    }
  },
  computed: {
    ...mapState('userData', [
      'isMerchant',
      'marketList',
      'storeList',
      'marketId',
      'shopId'
    ])
  }
}
</script>

<style lang="scss" scoped>
// .paynotice-tinymce {
//   ::v-deep .tox-tinymce {
//     height: 300px !important;
//   }
// }
</style>
