<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="请输入店铺导航名称，5个字以内"
          v-model="form.navigationName"
          :readonly="isDetail"
          :maxlength="5"
          style="width: 400px"
        />
      </div>
      <div class="item">
        <label class="label">导航logo：</label>
        <div class="upload-con">
          <file-upload
            :width="150"
            :iconSize="26"
            :maxNum="1"
            v-model="form.image"
            :readonly="isDetail"
            showWatch
          />
          <!--          <div class="tip" v-if="!isDetail">提示：仅可上传一张，建议尺寸100 * 100，大小不得超过6MB。</div>-->
          <!-- {{data.thumbList}} -->
        </div>
      </div>
      <div class="item">
        <label class="label">导航序号：</label>
        <!--        <InputNumber  :min="1" v-model="form.displayOrder"></InputNumber>-->
        <Input
          v-model="form.displayOrder"
          placeholder="请输入导航序号，数值越小，越优先"
          :readonly="isDetail"
          type="number"
          style="width: 400px"
        />
      </div>
      <div class="item">
        <label class="label">导航产品：</label>
        <div class="goodsList">
          <Tag  :key="index" v-for="(item, index) in form.goodsList">{{item}}</Tag>
        </div>
      </div>
      <div style="margin-left: 150px" v-if='!isDetail'>
        <div class="item">
          <Input
            v-model="goods"
            placeholder="请输入产品编号或名称查询"
            style="width: 300px; margin-right: 40px"
            search
            @on-search="getGoods"
          />
          <div>
          </div>
        </div>
        <div>
          <tables
            width="400"
            height="400"
            ref="selection"
            editable
            v-model="tableData"
            :columns="columns"
            :loading="loading"
            @on-selection-change="changeSelect"
          />
        </div>
      </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'
import Tables from '_c/tables'
export default {
  components: {
    FileUpload,
    Tables
  },
  computed: {
    title () {
      if (this.routeName === 'navigation_detail') {
        return '店铺导航详情'
      } else {
        return '新增店铺导航 - 填写导航信息'
      }
    },
    isDetail () {
      return this.routeName === 'navigation_detail'
    },
    isAdd () {
      return this.routeName === 'add_navigation'
    }
    // isEdit () {
    //   return this.routeName === 'update_banner'
    // }
  },
  data () {
    return {
      routeName: '',
      loading: false,
      goods: '',
      form: {
        navigationName: '',
        image: [],
        shopId: '',
        displayOrder: '',
        updateTime: '',
        goodsList: []
      },
      submitLoading: false,
      columns: [
        {
          type: 'selection',
          width: 60,
          align: 'center'
        },
        { title: '编号', key: 'goodsId', align: 'center', width: 150 },
        { title: '名称', key: 'name', align: 'center', minWidth: 100 }
      ],
      selectCount: '',
      selectList: [],
      tableData: []
    }
  },
  methods: {
    ...mapMutations(['closeTag']),
    requestNavigationDetail (navigationId) {
      this.api({
        apiName: 'navigationDetail',
        postdata: navigationId,
        success: (res) => {
          console.log(res)
          let {
            displayOrder,
            image,
            navigationId,
            navigationName,
            updateTime,
            goodsList
          } = res.data
          this.form.navigationName = navigationName
          this.form.image = [image]
          this.form.displayOrder = displayOrder
          this.form.navigationId = navigationId
          this.form.updateTime = updateTime
          this.form.goodsList = goodsList.map((item) => {
            return item.goodsId
          })
        }
      })
    },
    // 指定商品
    getGoods () {
      let { goods } = this
      this.api({
        apiName: 'queryByNameOrId',
        postdata: { goods },
        complete: () => {
          this.loading = false
        },
        success: (res) => {
          this.tableData = res.data
        }
      })
    },
    // 获取选中商品数据
    btnSelect () {
      this.form.goodsList = this.selectList
    },
    changeSelect (e) {
      this.selectList = e.map((item) => {
        return item.goodsId
      })
      if (this.selectCount > 10) {
        return this.$Message.warning('最多只能选择10个产品哦！')
      }
      this.selectCount = e.length
      this.form.goodsList = this.selectList
    },
    initData () {
      let routeName = this.$route.name
      console.log(routeName)
      let { navigationId } = this.$route.query
      this.form.navigationId = navigationId
      this.routeName = routeName
      if (routeName == 'navigation_detail') {
        this.requestNavigationDetail(navigationId)
      } else {
        this.getGoods()
      }
    },
    checkForm () {
      let {
        navigationName,
        image,
        displayOrder,
        goodsList
      } = this.form
      let form = {
        goodsList: goodsList.map((item) => {
          return {
            goodsId: item
          }
        }),
        image,
        displayOrder,
        navigationName

      }
      form.image = image.join()
      let errMsg = ''
      if (!navigationName) {
        return { errMsg: '请输入导航名称！' }
      }
      if (image.length === 0) {
        return { errMsg: '请上传导航logo！' }
      }

      if (!displayOrder) {
        return { errMsg: '请填写导航序号！' }
      }
      if (displayOrder < 0 || !/^\d+$/.test(displayOrder)) {
        return { errMsg: '导航序号输入格式有误！' }
      }
      if (!goodsList.length) {
        return { errMsg: '请选择导航产品编号！' }
      }
      return { errMsg, form }
    },
    handleCancel () {
      let route = this.$route
      let toRouteName = 'navigation_management'
      this.closeTag({ route, toRouteName })
    },
    handleSubmit () {
      let { errMsg, form } = this.checkForm()
      if (errMsg) {
        return this.$Notice.warning({ title: errMsg })
      }
      this.submitLoading = true
      this.api({
        apiName: 'saveNavigation',
        postdata: form,
        success: (res) => {
          // 关闭当前标签页
          this.handleCancel()
          this.$Notice.success({ title: '添加成功' })
        },
        complete: () => {
          this.submitLoading = false
        }
      })
    }
  },
  mounted () {
    this.initData()
  }
}
</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;
  }
  .item .label {
    display: block;
    width: 150px;
    text-align: right;
  }
  .goodsList {
    width: 400px;
    height: 100px;
    border: 1px solid #e6e6e6;
    border-radius: 4px;
    overflow: scroll;
  }
  .footer-con {
    display: flex;
    padding: 30px 120px;
  }
}
</style>
