<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
              :multiple="false"
              hide-upload-button
              @add="$refs['attachmentUploader'].upload()"
            ></q-uploader>
          </q-field>
          <q-field class="liststype">
            <tinymce
              :value="tempAdv.content"
              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="saveUpdateAdv">{{
            $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 },
  data() {
    return {
      uploadurl: uploadpath + "/znzl/file/upload/videoandimgurl?uploadPar=adv",
      serverData: [],
      menuModal: false,
      id: this.$route.query.id,
      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: this.$route.query.id,
        title: "",
        status: "",
        linkurl: "",
        ctime: "",
        type: "",
        content: "",
        imgurl: "",
        content: "",
        isjump: "",
        isjumpname: "",
      },
    };
  },
  mounted() {
    this.getCodelistByKindcode();
    this.getYesNoCodelistByKindcode();
    this.getData();
  },
  methods: {
    async getData() {
      let data = {
        id: this.id,
      };
      let dataRes = await loadAdv(data);
      this.tempAdv = dataRes.data.data;
    },
    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 saveUpdateAdv() {
      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;
      }
      debugger;
      let dataRes = await editAdv(this.tempAdv);
      if (dataRes.data.code == "200") {
        this.$q.notify({
          type: "positive",
          message: "提交成功",
          position: "bottom-right",
        });
        this.cancelFunction();
      }
    },
    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) {
      debugger;
      let self = this;
      let res = JSON.parse(xhr.response).path;
      self.fileCount++;
      if (res != "") {
        self.$q.notify({
          message: "上传成功",
          type: "positive",
          icon: "done",
          timeout: 1000,
          position: "top-right",
        });
        self.tempAdv.imgurl = res;
        console.log(res);
        if (self.fileCount > 1) {
          var cNode = document.getElementsByClassName("q-uploader-files")[0];
          cNode.removeChild(cNode.childNodes[0]);
        }
      } else {
        self.$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>