<template>
  <div style="padding:10px">
    <q-card inline class="fit shadow-6">
      <q-card-main style="height:80%">
        <div class="layout-padding">
         <q-field class="liststype"><q-input v-model="tempAdv.title" float-label="标题" /></q-field>
         <q-field class="liststype"><q-select v-model="tempAdv.type" :options="kindlist" float-label="广告位置" /></q-field>
         <q-field class="liststype"><q-select v-model="tempAdv.isjump" :options="yesnokindlist" float-label="跳转" /></q-field>

         <q-field class="liststype"><q-select v-model="tempAdv.status" :options="yesnokindlist" float-label="启用" /></q-field>
         <q-field class="liststype"><q-input v-model="tempAdv.linkurl" float-label="链接地址" /></q-field>
                  <q-field class="liststype">
						<q-input v-model="tempAdv.imgurl" float-label="图片地址" />
						<q-uploader ref="attachmentUploader" name="file" @uploaded="attachmentUploaded" :headers="{'Accept': 'application/json;charset=utf-8'}" :url="uploadurl" auto-expand clearable hide-upload-button @add="$refs['attachmentUploader'].upload()"></q-uploader>
					</q-field>
          <q-field class="liststype">
            <tinymce  :value="tempAdv.content" ref="editFormContent" v-model="tempAdv.content"
                           class="mytextarea my-tinymce5002"></tinymce>
                     </q-field>
        </div>

        <div style="float: right;margin: 15px 0;">
          <!--  <q-btn push dense color="primary" icon="add" @click="saveRecipes">提交</q-btn>
          <q-btn push dense color="" @click="cancelFunction">{{ $t('Cancel') }}</q-btn>
 -->
          <q-btn round color="red" @click="addFunction">{{ $t('Save') }}</q-btn>
          <q-btn round  @click="cancelFunction">{{ $t('Cancel') }}</q-btn>
        </div>
      </q-card-main>
    </q-card>
  </div>
</template>

<script>
import { getAdvPagedList, delAdv, updateAdvStatus, saveAdv, editAdv, loadAdv, updateAdvsStatus, getSysAdvListByTypeAndNum, uploadfile } from '@/service/sysadv/sysadv';
import { getSysCodelistByKindcode } from '@/service/syscodelist/syscodelist';
import tinymce from '../../components/tinymceEditor'
const host= window.location.protocol;
const protocol=window.location.host;
const uploadpath =  host+"//"+protocol+"/uploadfileadmin/manager";
//const uploadpath = 'http://localhost:8080/manager';
export default {
  components: {
    tinymce
  },
  name: 'sysadv',
  data() {
    return {
      uploadurl: uploadpath + '/znzl/file/upload/videoandimgurl?uploadPar=adv&',
      serverData: [],
      menuModal: false,
      tempFunction: {
        id: 0,
        name: '',
        moduleId: 0,
        module: '',
        code: '',
        description: ''
      },
      serverPagination: {
        page: 1,
        rowsNumber: 0, // specifying this determines pagination is server-side
        rowsPerPage: 10 // current rows per page being displayed
      },
      nextserverPagination: {
        page: 1,
        rowsNumber: 0, // specifying this determines pagination is server-side
        rowsPerPage: 100 // current rows per page being displayed
      },
      yeornoOptions: [],
      columns: [
        {
          name: 'title',
          required: true,
          label: '标题',
          align: 'left',
          field: 'title',
          sortable: false
        },
        {
          name: 'statusname',
          label: '启用状态',
          field: 'statusname',
          sortable: false,
          align: 'center'
        },
        {
          name: 'isjumpname',
          label: '是否跳转',
          field: 'isjumpname',
          sortable: false,
          align: 'center'
        },
        {
          name: 'linkurl',
          label: '跳转链接',
          field: 'linkurl',
          sortable: false,
          align: 'left'
        },
        {
          name: 'typename',
          label: '广告位置',
          field: 'typename',
          sortable: false,
          align: 'center'
        },
        {
          name: 'imgurl',
          label: '图片路径',
          field: 'imgurl',
          sortable: false,
          align: 'left'
        },
        {
          name: 'id',
          required: true,
          label: this.$t('ID'),
          align: 'center',
          field: 'id'
        }
      ],
      filter: {
        name: '',
        pid: ''
      },
      selected: [],
      kindlist: [],
      yesnokindlist: [],
      loading: false,
      editModal: false,
      subtype: 'add',
      fileCount: 0,
      tempAdv: {
        id: '',
        title: '',
        status: '',
        linkurl: '',
        ctime: '',
        type: '',
        content: '',
        imgurl: '',
        content: '',
        isjump: '',
        isjumpname: ''
      }
    };
  },
  mounted() {
    this.getCodelistByKindcode();
    this.getYesNoCodelistByKindcode();
    // this.getYesNoCodelistByKindcode();
  },
  methods: {
    async addFunction() {
    if (this.tempAdv.title == null || this.tempAdv.type == null || this.tempAdv.title == '' || this.tempAdv.type == '') {
      this.$q.notify({
        message: '请完善信息，标题和广告位置不能为空',
        type: 'negative',
        icon: 'error_outline',
        timeout: 3000,
        position: 'center'
      });
      return false;
    }
     let dataRes = await saveAdv(this.tempAdv);
      if(dataRes.data.code=='200'){
          this.$q.notify({
              type: "positive",
              message: '提交成功',
              position: "bottom-right"
          });
          this.cancelFunction();
      }
    },
    async getCodelistByKindcode() {
      this.kindlist = [];
      let kindlist_code = await getSysCodelistByKindcode('ADV_TYPE');
      if (kindlist_code.data.data.length > 0) {
        for (var item of kindlist_code.data.data) {
          let obj = {
            label: item.codename,
            value: item.codevalue
          };
          this.kindlist.push(obj);
        }
      }
    },
    async getYesNoCodelistByKindcode() {
      this.yesnokindlist = [];
      //  this.yeornoOptions=[];
      let kindlist_code = await getSysCodelistByKindcode('YES_NO');
      if (kindlist_code.data.data.length > 0) {
        for (var item of kindlist_code.data.data) {
          let obj = {
            label: item.codename,
            value: item.codevalue
          };
          this.yesnokindlist.push(obj);
          // this.yeornoOptions.push(obj);
        }
      }
    },
    cancelFunction() {
      this.$router.push('/system/sysadv?' + new Date());
    },
    attachmentUploaded(file, xhr) {
      let res = JSON.parse(xhr.response).path;
      this.fileCount++;
      if (res != '') {
        this.$q.notify({
          message: '上传成功',
          type: 'positive',
          icon: 'done',
          timeout: 1000,
          position: 'top-right'
        });
        this.tempAdv.imgurl = res;
        console.log(res);
        if (this.fileCount > 1) {
          var cNode = document.getElementsByClassName('q-uploader-files')[0];
          cNode.removeChild(cNode.childNodes[0]);
        }
      } else {
        this.$q.notify({
          message: res.msg,
          type: 'negative',
          icon: 'error_outline',
          timeout: 3000,
          position: 'top-right'
        });
      }
    }

  },

};
</script>

<style scoped>
/* .q-input {
        width: 230px;
    }
    .q-select{
        width: 230px;
    } */
</style>
