<template>
  <div class="apaas_detail_container">
    <div class="apass_breadcrumb">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/message' }">
          {{ $t("lang.message") }}
        </el-breadcrumb-item>
        <el-breadcrumb-item :to="{ path: '/message/banner' }">
          {{ 'banner管理' }}
        </el-breadcrumb-item>
        <el-breadcrumb-item>
          {{ pageName }}
        </el-breadcrumb-item>
      </el-breadcrumb>
    </div>

    <div class="main_contaner banner_contaner">
      <el-form
        ref="detail_form"
        class="detail_form"
        label-position="top"
        :model="detail"
        :rules="detail_rules"
      >
        <el-form-item label="banner名称：" prop="name">
          <el-input
            v-model="detail.name"
            placeholder="请输入banner名称"
            :disabled="disabled"
          ></el-input>
        </el-form-item>

        <el-form-item label="状态：" prop="state">
          <el-select
            v-model="detail.state"
            placeholder="请选择状态"
            :disabled="true"
          >
            <el-option
              v-for="item in types"
              :label="item.name"
              :value="item.value"
              :key="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="链接地址（选填）：" prop="url">
          <el-input
            v-model="detail.url"
            placeholder="请输入链接地址"
            :disabled="disabled"
          ></el-input>
        </el-form-item>

        <el-form-item label="排序：" prop="rank">
          <el-input
            v-model="detail.rank"
            placeholder="请输入排序"
            :disabled="disabled"
          ></el-input>
        </el-form-item>

        <el-form-item label="上架时间：" prop="up_time">
          <el-date-picker
            v-model="detail.up_time"
            type="datetime"
            :disabled="disabled"
            placeholder="选择日期时间">
          </el-date-picker>
        </el-form-item>

        <el-form-item label="下架时间：" prop="down_time">
          <el-date-picker
            v-model="detail.down_time"
            type="datetime"
            :disabled="disabled"
            placeholder="选择日期时间">
          </el-date-picker>
        </el-form-item>

        <el-form-item label="上传banner图片：" prop="fileList">
          <upload-file
            :multiple="false"
            :max="1"
            type="cropper"
            :readOnly="false"
            fit="fill"
            :list="imgList"
            @getNewList="getNewList"
            ref="servicepic"
            directory="manage"
          ></upload-file>
        </el-form-item>
        
      </el-form>

      <div class="apaas_button detail_action">
        <el-button
          type="default"
          @click="cancelAction"
          :loading="submitLoading"
        >
          取消
        </el-button>
        <el-button
          type="primary"
          @click="primaryAction"
          :loading="submitLoading"
        >
          确定
        </el-button>
      </div>
    </div>
  </div>
</template>

<script>
import helper from "@/services/helper.js";
import uploadFile from "@/components/general/upload_file";
export default {
    components:{
        uploadFile
    },
  data: () => ({
    pageType: 0, // 0：新增，1：编辑，2：详情
    detail: {
      name: "",
      state: "",
      url: "",
      rank:"",
      up_time:"",
      down_time:"",
      fileList:'',
    },
    imgList: [],
    detail_rules: {
      name: [
        {
          required: true,
          message: "请输入消息模板名称",
          trigger: "blur",
        },
        {
          max: 16,
          message: "长度小于16个字符",
          trigger: "blur",
        },
      ],
      tpl_type: [
        {
          required: true,
          message: "请选择模板类型",
          trigger: "blur",
        },
      ],
      content: [
        {
          required: true,
          message: "请输入消息详情，最多可以输入500字。",
          trigger: "blur",
        },
      ],
    },
    types: [
      {
        name: "服务推送",
        value: 1,
      },
      {
        name: "平台维护",
        value: 2,
      },
      {
        name: "版本更新",
        value: 3,
      },
      {
        name: "自动消息",
        value: 4,
      },
    ],
    submitLoading: false,
  }),
  computed: {
    pageName() {
      return ["新增", "编辑", "详情"][this.pageType];
    },
    disabled() {
      return this.pageType === 2;
    },
  },
  created() {
    if (this.$route.name === "banner_edit") {
      this.pageType = 1;
    } else if (this.$route.name === "banner_detail") {
      this.pageType = 2;
    }

    if (this.pageType !== 0) {
      this.getDetail();
    }
  },
  methods: {
    getNewList(val) {
      this.detail.fileList = val[0].url;
      console.log(this.detail.fileList);
    },
    getDetail() {
      this.$http
        .get("/apaas/service/v3/msg/manage/tpl/info", {
          params: {
            id: this.$route.params.id,
          },
        })
        .then(({ data }) => {
          if (data.success == 1) {
            let detail = data.data;

            this.detail.name = detail.name;
            this.detail.tpl_type = detail.tpl_type;
            this.detail.content = detail.content;
          } else {
            this.$message({
              message: data.errMsg || "获取详情失败",
              type: "warning",
            });
          }
        })
        .catch((error) => {
          console.log(error);

          this.$message({
            message: "获取详情失败",
            type: "warning",
          });
        });
    },
    addTemplate() {
      this.$http
        .post("/apaas/service/v3/msg/manage/tpl/add", this.detail)
        .then(({ data }) => {
          if (data.success == 1) {
            this.$message({
              message: "新增消息模板成功",
              type: "success",
            });

            setTimeout(() => {
              this.$router.push("/message/message_template");
            }, 500);
          } else {
            this.$message({
              message: data.errMsg || "新增消息模板失败",
              type: "warning",
            });
          }

          this.submitLoading = true;
        })
        .catch((error) => {
          console.log(error);

          this.$message({
            message: "新增消息模板失败",
            type: "warning",
          });

          this.submitLoading = true;
        });
    },
    editTemplate() {
      this.$http
        .post("/apaas/service/v3/msg/manage/tpl/update", {
          id: this.$route.params.id,
          ...this.detail,
        })
        .then(({ data }) => {
          if (data.success == 1) {
            this.$message({
              message: "编辑消息模板成功",
              type: "success",
            });

            setTimeout(() => {
              this.$router.push("/message/message_template");
            }, 200);
          } else {
            this.$message({
              message: data.errMsg || "编辑消息模板失败",
              type: "warning",
            });
          }

          this.submitLoading = true;
        })
        .catch((error) => {
          console.log(error);

          this.$message({
            message: "编辑消息模板失败",
            type: "warning",
          });

          this.submitLoading = true;
        });
    },
    cancelAction() {
      this.$router.push("/message/message_template");
    },
    primaryAction() {
      if (this.pageType === 2) {
        this.$router.push("/message/message_template");
      } else {
        this.$refs.detail_form.validate((valid) => {
          if (valid) {
            this.submitLoading = true;

            this.pageType === 1 ? this.editTemplate() : this.addTemplate();
          } else {
            return false;
          }
        });
      }
    },
  },
};
</script>

<style>
.apaas_detail_container .banner_contaner .el-input__inner{
    width: 970px;
}
</style>
