<template>
  <div class="add-banner-con">
    <Card v-if="loading" class="loading-card">
      <Spin fix size="large" />
    </Card>
    <Card v-else>
      <div class="head">
        <Icon type="md-bookmark" color="#2d8cf0" :size="28" />
        <label>{{ title }}</label>
      </div>
      <div class="item">
        <label class="label">名称：</label>
        <Input
          placeholder="请填写广告banner名称"
          v-model="form.bannerName"
          :disabled="isDetail || isEdit"
          :maxlength="30"
          clearable
          style="width: 400px"
        />
      </div>
      <div class="item">
        <label class="label">海报：</label>
        <div class="upload-con">
          <file-upload
            :width="150"
            :iconSize="26"
            :maxNum="1"
            v-model="form.bannerImage"
            :readonly="isDetail"
            showWatch
          />
<!--          <div class="tip" v-if="!isDetail">提示：仅可上传一张，建议尺寸100 * 100，大小不得超过6MB。</div>-->
          <!-- {{data.thumbList}} -->
        </div>
      </div>
      <div class="item">
        <label class="label">类型：</label>
        <RadioGroup v-model="form.bannerType">
          <Radio :label="1" :disabled="isDetail" class="ivu-radio">产品</Radio>
          <Radio :label="2" :disabled="isDetail" class="ivu-radio">活动</Radio>
        </RadioGroup>
      </div>
      <div class="item" v-if="form.bannerType == 1">
        <label class="label">产品编号：</label>
        <Input
          placeholder="请填写产品编号"
          v-model="form.number"
          :disabled="isDetail"
          :maxlength="100"
          clearable
          style="width: 400px"
        />
      </div>
      <div class="item" v-if="form.bannerType == 2">
        <label class="label">活动链接：</label>
        <Input
          placeholder="请填写活动链接"
          v-model="form.url"
          :disabled="isDetail"
          :maxlength="100"
          clearable
          style="width: 400px"
        />
      </div>
      <div class="item">
        <label class="label">显示顺序：</label>
<!--        <InputNumber  :min="1" v-model="form.displayOrder"></InputNumber>-->
        <Input v-model="form.displayOrder" :disabled="isDetail" type="number" style="width: 400px;"/>
      </div>
      <div class="footer-con">
        <Button
          type="default"
          @click="handleCancel"
          v-if="!isDetail"
          style="margin-right: 30px"
        >取消</Button
        >
        <Button
          type="primary"
          @click="handleSubmit"
          v-if="!isDetail"
          :loading="submitLoading"
        >确定</Button
        >
      </div>
    </Card>
  </div>
</template>
<script>
import { mapMutations } from 'vuex'
import FileUpload from '_c/file-upload'
export default {
  components: {
    FileUpload
  },
  computed: {
    title () {
      if (this.routeName === 'update_banner') {
        return '编辑广告Banner - 填写广告信息'
      } else if (this.routeName == 'banner_detail') {
        return '广告详情'
        // this.isSelf // : `商品详情（ 品牌商：${this.form.brandName} ）`
      } else {
        return '新增广告Banner - 填写广告信息'
      }
    },
    isDetail () {
      return this.routeName === 'banner_detail'
    },
    isAdd () {
      return this.routeName === 'add_banner'
    },
    isEdit () {
      return this.routeName === 'update_banner'
    }
  },
  data () {
    return {
      routeName: '',
      loading: false,
      form: {
        operationBannerId: '',
        bannerName: '',
        bannerImage: [],
        bannerType: '',
        displayOrder: '',
        number: '',
        url: '',
        updateTime: ''
      },
      submitLoading: false
    }
  },
  methods: {
    ...mapMutations(['closeTag']),
    requestBannerDetail (operationBannerId) {
      this.api({
        apiName: 'bannerDetail',
        postdata: operationBannerId,
        success: (res) => {
          // console.log(res)
          let { bannerName, bannerType, bannerImage, displayOrder, number, url, operationBannerId, updateTime } = res.data
          this.form.bannerName = bannerName
          this.form.bannerType = bannerType
          this.form.bannerImage = [bannerImage]
          this.form.displayOrder = displayOrder
          this.form.number = number
          this.form.url = url
          this.form.operationBannerId = operationBannerId
          this.form.updateTime = updateTime
        }
      })
    },
    initData () {
      let routeName = this.$route.name
      console.log(routeName)
      let { operationBannerId } = this.$route.query
      this.form.operationBannerId = operationBannerId
      this.routeName = routeName
      if (routeName == 'update_banner' || routeName == 'banner_detail') {
        this.requestBannerDetail(operationBannerId)
      } else {
        this.loading = false
      }
    },
    checkForm () {
      let { bannerName, bannerType, bannerImage, displayOrder, number, url, operationBannerId, updateTime } = this.form
      let form = {
        bannerName,
        bannerType,
        bannerImage,
        displayOrder,
        number,
        url,
        updateTime
      }
      form.operationBannerId = operationBannerId
      form.bannerImage = bannerImage.join()
      let errMsg = ''
      if (!bannerName) {
        return { errMsg: '请填写banner名称！' }
      }
      if (bannerImage.length == 0) {
        return { errMsg: '请选择海报图片！' }
      }
      if (!bannerType) {
        return { errMsg: '请选择banner类型！' }
      }
      if (bannerType && bannerType == 2 && !url) {
        return { errMsg: '请填写活动链接！' }
      }
      if (bannerType && bannerType == 1 && !number) {
        return { errMsg: '请填写产品编号！' }
      }
      if (!displayOrder) {
        return { errMsg: '请填写banner显示顺序！' }
      }
      if (displayOrder <= 0 || !/^\d+$/.test(displayOrder)) {
        return { errMsg: '显示顺序输入格式有误！' }
      }

      return { errMsg, form }
    },
    handleCancel () {
      let route = this.$route
      let toRouteName = 'advertising_management'
      this.closeTag({ route, toRouteName })
    },
    handleSubmit () {
      let { errMsg, form } = this.checkForm()
      if (errMsg) {
        return this.$Notice.warning({ title: errMsg })
      }
      if (!errMsg) {
        form.bannerType = JSON.parse(form.bannerType)
        form.number = form.number.replace(/\s+/g, '')
      }
      let apiName = this.isAdd ? 'addBanner' : 'updateBanner'
      let title = this.isAdd ? '添加成功！' : '编辑成功！'
      this.submitLoading = true
      this.api({
        apiName,
        postdata: form,
        success: (res) => {
          // 关闭当前标签页
          let route = this.$route
          let toRouteName = 'advertising_management'
          this.closeTag({ route, toRouteName })
          this.$Notice.success({ title })
        },
        complete: () => {
          this.submitLoading = false
        }
      })
    }
  },
  mounted () {
    this.initData()
    setTimeout(() => {
      console.log('name', this.routeName)
    })
  }
}
</script>
<style lang="less" scoped>
  .add-banner-con {
    height: 100%;
    .loading-card {
      height: 100%;
    }
    .head {
      color: #17233d;
      font-size: 18px;
      font-weight: bold;
      display: flex;
      align-items: center;
      margin-bottom: 15px;
      i {
        margin-right: 10px;
      }
    }
    .item {
      display: flex;
      align-items: center;
      margin-bottom: 10px;
      .ivu-radio{
        width: 200px;
      }
    }
    .item .label {
      display: block;
      width: 150px;
      text-align: right;
    }
    .footer-con {
      display: flex;
      padding: 30px 120px;
      margin-left:90px;
    }
  }
</style>
