<template>
  <div>
    <!--    编辑-->
    <xy-dialog :is-show.sync="isShow" title="活动编辑" type="form" :form="detail" :rules="rules" @submit="editor"
      ref="addActivity">

      <template v-slot:name>
        <div class="xy-table-item">
          <div class="xy-table-item-label">
            <span style="color: red;font-weight: 600;padding-right: 4px;">*</span>活动名称
          </div>
          <div class="xy-table-item-content">
            <el-input clearable placeholder="请填写活动名称" v-model="detail.name" style="width: 300px;" />
          </div>
        </div>
      </template>

      <template v-slot:tag>
        <div class="xy-table-item">
          <div class="xy-table-item-label">
            <span style="color: red;font-weight: 600;padding-right: 4px;">*</span>活动标识
          </div>
          <div class="xy-table-item-content">
            <el-input clearable placeholder="请填写活动标识" v-model="detail.tag" style="width: 300px;" />
          </div>
        </div>
      </template>



      <template v-slot:type>
        <div class="xy-table-item">
          <div class="xy-table-item-label">活动的类型
          </div>
          <div class="xy-table-item-content">
            <el-radio-group v-model="detail.type">
              <el-radio-button label="1">公众号</el-radio-button>
              <el-radio-button label="2">小程序</el-radio-button>
            </el-radio-group>
          </div>
        </div>
      </template>


      <template v-slot:datetimerange>
        <div class="xy-table-item">
          <div class="xy-table-item-label">
            <span style="color: red;font-weight: 600;padding-right: 4px;">*</span>活动时间范围
          </div>
          <div class="xy-table-item-content">
            <el-date-picker v-model="detail.datetimerange" type="datetimerange" :picker-options="pickerOptions"
              range-separator="至" value-format="yyyy-MM-dd HH:mm:ss" start-placeholder="开始日期" end-placeholder="结束日期"
              align="right">
            </el-date-picker>
          </div>
        </div>
      </template>



      <template v-slot:appid>
        <div class="xy-table-item">
          <div class="xy-table-item-label">公众号的APPID
          </div>
          <div class="xy-table-item-content">
            <el-input clearable placeholder="请填写公众号的APPID" v-model="detail.appid" style="width: 300px;" />
          </div>
        </div>
      </template>

      <template v-slot:appsecret>
        <div class="xy-table-item">
          <div class="xy-table-item-label">公众号的密钥
          </div>
          <div class="xy-table-item-content">
            <el-input clearable placeholder="请填写公众号的密钥" v-model="detail.appsecret" style="width: 300px;" />
          </div>
        </div>
      </template>

      <template v-slot:mch_id>
        <div class="xy-table-item">
          <div class="xy-table-item-label">微信商户的ID
          </div>
          <div class="xy-table-item-content">
            <el-input clearable placeholder="请填写微信商户的ID" v-model="detail.mch_id" style="width: 300px;" />
          </div>
        </div>
      </template>


      <template v-slot:small_logo_id>
        <div class="xy-table-item">
          <div class="xy-table-item-label">小的LOGO
          </div>
          <div class="xy-table-item-content">

            <div v-if="detail.small_logo" style="position: relative;">
              <img :src="detail.small_logo" class="avatar">
              <Button shape="circle" icon="md-close" type="error" size="small" class="img__delete"
                @click="detail.small_logo = '',detail.small_logo_id=''"></Button>
            </div>
            <el-upload v-else accept="picture" :limit="1" class="avatar-uploader" list-type="picture-card"
              :action="action" :show-file-list="true" :on-error="uploadFail" :on-success="uploadSuccess"
              :before-upload="uploadBefore">
              <i class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
            尺寸要求：80*80
          </div>

        </div>
      </template>


      <template v-slot:logo_id>
        <div class="xy-table-item">
          <div class="xy-table-item-label">LOGO
          </div>
          <div class="xy-table-item-content">

            <div v-if="detail.logo" style="position: relative;">
              <img :src="detail.logo" class="avatar">
              <Button shape="circle" icon="md-close" type="error" size="small" class="img__delete"
                @click="detail.logo = '',detail.logo_id=''"></Button>
            </div>
            <el-upload v-else accept="picture" :limit="1" class="avatar-uploader" list-type="picture-card"
              :action="action" :show-file-list="true" :on-error="uploadFailLogo" :on-success="uploadSuccessLogo"
              :before-upload="uploadBeforeLogo">
              <i class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
            尺寸要求：320*72
          </div>

        </div>
      </template>



      <template v-slot:key>
        <div class="xy-table-item">
          <div class="xy-table-item-label">微信商户的key
          </div>
          <div class="xy-table-item-content">
            <el-input clearable placeholder="请填写微信商户的key" v-model="detail.key" style="width: 300px;" />
          </div>
        </div>
      </template>


      <template v-slot:domain>
        <div class="xy-table-item">
          <div class="xy-table-item-label">活动的域名
          </div>
          <div class="xy-table-item-content">
            <el-input clearable placeholder="请填写活动的域名" v-model="detail.domain" style="width: 300px;" />
          </div>
        </div>
      </template>


      <template v-slot:sys_name>
        <div class="xy-table-item">
          <div class="xy-table-item-label">系统的名称
          </div>
          <div class="xy-table-item-content">
            <el-input clearable placeholder="请填写系统的名称" v-model="detail.sys_name" style="width: 300px;" />
          </div>
        </div>
      </template>



      <template v-slot:admin_id>
        <div class="xy-table-item">
          <div class="xy-table-item-label">管理人员
          </div>
          <div class="xy-table-item-content">
            <el-autocomplete class="inline-input" v-model="detail.admin_name" :fetch-suggestions="querySearch"
              placeholder="请输入管理人员" :trigger-on-focus="false" @select="handleSelectUser"></el-autocomplete>
          </div>
        </div>
      </template>

      <template v-slot:status>
        <div class="xy-table-item">
          <div class="xy-table-item-label">状态
          </div>
          <div class="xy-table-item-content">
            <el-select clearable v-model="detail.status">
              <el-option :value="1" label="启用"></el-option>
              <el-option :value="0" label="禁用"></el-option>
            </el-select>
          </div>
        </div>
      </template>

    </xy-dialog>

  </div>
</template>

<script>
  import {
    save,
    show
  } from "@/api/activity/index";
  import {
    listuser
  } from "@/api/system/user.js";

  export default {
    data() {

      return {
        isShow: false,
        id: "",
        type: "add",
        pickerOptions: {
          shortcuts: [{
            text: '最近一周',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近一个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近三个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit('pick', [start, end]);
            }
          }]
        },
        action: `${process.env.VUE_APP_BASE_API}/api/admin/upload-file`,
        detail: {
          name: "",
          tag: "",
          type: "1",
          datetimerange: [],
          start_time: "",
          end_time: "",
          appid: "",
          appsecret: "",
          mch_id: "",
          key: "",
          cert_pem: "",
          key_pem: "",
          status: 1,
          domain: "",
          sys_name: "",
          admin_id: "",
          admin_name: "",
          logo_id: "",
          logo: "",
          small_logo_id: "",
          small_logo: ""
        },
        rules: {
          name: [{
            required: true,
            message: "活动名称必填"
          }],
          domain: [{
            required: true,
            message: "活动的域名必填"
          }],
          sys_name: [{
            required: true,
            message: "系统名称必填"
          }],
          tag: [{
            required: true,
            message: "活动的标识必填"
          }],
          datetimerange: [{
            required: true,
            message: "活动时间必须填写",
            trigger: 'change'
          }],
        }

      }
    },
    watch: {
      isShow(newVal) {
        if (newVal) {
          if (this.type === 'editor') {
            this.getDetail()
          }
        } else {
          this.id = ''
          this.type = ''
          this.$refs['addActivity'].reset()
        }
      }
    },
    methods: {

      //上传
      uploadFailLogo(err) {
        console.log(err)
      },
      uploadSuccessLogo(response) {
        this.detail.logo = response.url
        this.detail.logo_id = response.id
      },
      uploadBeforeLogo(file) {
        if ((file.size / 1000) > 2024) {
          Message({
            type: 'warning',
            message: '上传图片大小超过2M！'
          })
          return false
        }
      },
      //上传
      uploadFail(err) {
        console.log(err)
      },
      uploadSuccess(response) {
        this.detail.small_logo = response.url
        this.detail.small_logo_id = response.id
      },
      uploadBefore(file) {
        if ((file.size / 1000) > 2024) {
          Message({
            type: 'warning',
            message: '上传图片大小超过2M！'
          })
          return false
        }
      },
      querySearch(queryString, cb) {
        listuser().then(response => {
          var data = response.data;
          for (var m of data) {
            m.value = m.name;
          }
          cb(data)
        }).catch(error => {
          //reject(error)
        })
      },
      handleSelectUser(item) {
        this.detail.admin_id = item.id;
        this.detail.admin_name = item.value;

      },
      async getDetail() {
        let res = await show({
          id: this.id
        })
        Object.assign(this.detail, res);
        this.detail.logo=res.logo?res.logo.url:"";
        this.detail.small_logo=res.small_logo?res.small_logo.url:"";
        this.detail.datetimerange.push(this.$moment(res.start_time).format("YYYY-MM-DD HH:mm:ss"));
        this.detail.datetimerange.push(this.$moment(res.end_time).format("YYYY-MM-DD HH:mm:ss"));
      },
      editor() {
        this.detail.start_time = this.detail.datetimerange[0];
        this.detail.end_time = this.detail.datetimerange[1];
        save(this.detail).then(res => {
          this.isShow = false
          this.$Message.success("操作成功");
          this.$emit('refresh')
        })
      },

    },
    computed: {

    },
    mounted() {
      let that = this;
    }
  }
</script>

<style scoped lang="scss">
  .contract-add-plan {
    min-height: 30px;
    border: 1px solid #dcdee2;
    border-radius: 4px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    align-content: center;

    padding: 0 8px;

    &-no-plan {
      height: 30px;
      line-height: 30px;
      color: #CDD0D5;
    }
  }

  .xy-table-item-label {
    width: 140px;
  }

  .xy-table-item-price {
    position: relative;

    &::after {
      z-index: 1;
      position: absolute;
      right: 0;
      top: 0;
      content: '（元）'
    }

    ::v-deep .el-input__clear {
      position: relative;
      right: 30px;
      z-index: 2;
    }
  }

  .xy-table-item-price-wan {
    position: relative;

    &::after {
      position: absolute;
      right: 0;
      top: 0;
      content: '（万元）'
    }

    ::v-deep .el-input__clear {
      position: relative;
      right: 46px;
      z-index: 2;
    }
  }
</style>
